@nextclaw/ui 0.12.7 → 0.12.9

package/src/components/chat/{ChatConversationPanel.test.tsx → chat-conversation-panel.test.tsx}

@@ -1,8 +1,8 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import { ChatChildSessionPanel } from "@/components/chat/chat-child-session-panel";
-import { ChatConversationPanel } from "@/components/chat/ChatConversationPanel";
+import { ChatConversationPanel } from "@/components/chat/chat-conversation-panel";
+import { ChatSessionWorkspacePanel } from "@/components/chat/chat-session-workspace-panel";
 import type { ResolvedChildSessionTab } from "@/components/chat/ncp/session-conversation/use-ncp-child-session-tabs-view";
 import { useChatInputStore } from "@/components/chat/stores/chat-input.store";
 import { useChatSessionListStore } from "@/components/chat/stores/chat-session-list.store";
@@ -24,6 +24,8 @@ const mocks = vi.hoisted(() => ({
       title: "北京天气",
       agentId: "weather",
       updatedAt: "2026-04-10T09:00:00.000Z",
+      lastMessageAt: "2026-04-10T09:00:00.000Z",
+      readAt: "2026-04-10T09:00:00.000Z",
       sessionTypeLabel: "Codex",
       preferredModel: "openai/gpt-5.3-codex",
       projectName: "project-alpha",
@@ -49,6 +51,14 @@ vi.mock("@/components/chat/containers/chat-message-list.container", () => ({
   ChatMessageListContainer: () => <div data-testid="child-chat-message-list" />,
 }));
 
+vi.mock("@/components/chat/chat-session-workspace-file-preview", () => ({
+  ChatSessionWorkspaceFilePreview: ({
+    file,
+  }: {
+    file: { path: string };
+  }) => <div data-testid="workspace-file-preview">{file.path}</div>,
+}));
+
 vi.mock("@/components/chat/ChatWelcome", () => ({
   ChatWelcome: ({
     onCreateSession,
@@ -73,9 +83,13 @@ vi.mock("@/components/chat/presenter/chat-presenter-context", () => ({
     chatThreadManager: {
       deleteSession: mocks.deleteSession,
       goToProviders: mocks.goToProviders,
+      openChildSessionPanel: vi.fn(),
+      openFilePreview: vi.fn(),
       openSessionFromToolAction: vi.fn(),
       selectChildSessionDetail: vi.fn(),
-      closeChildSessionDetail: vi.fn(),
+      selectWorkspaceFile: vi.fn(),
+      closeWorkspaceFile: vi.fn(),
+      closeWorkspacePanel: vi.fn(),
       goToParentSession: vi.fn(),
     },
     chatSessionListManager: {
@@ -84,17 +98,14 @@ vi.mock("@/components/chat/presenter/chat-presenter-context", () => ({
       setSelectedAgentId: mocks.setSelectedAgentId,
       markSessionRead: (
         sessionKey: string | null | undefined,
-        updatedAt: string | null | undefined,
+        readAt: string | null | undefined,
       ) =>
         sessionKey
           ? useChatSessionListStore.getState().markSessionRead(
               sessionKey,
-              updatedAt,
+              readAt,
             )
           : undefined,
-      hydrateReadWatermarks: (
-        entries: readonly { sessionKey: string; updatedAt: string | null | undefined }[],
-      ) => useChatSessionListStore.getState().hydrateReadWatermarks(entries),
     },
     chatInputManager: {
       setPendingSessionType: mocks.setPendingSessionType,
@@ -183,17 +194,19 @@ describe("ChatConversationPanel", () => {
         isAwaitingAssistantOutput: false,
         parentSessionKey: null,
         parentSessionLabel: null,
+        workspacePanelParentKey: null,
         availableAgents: [
           { id: "main", displayName: "Main", runtime: "native" },
           { id: "engineer", displayName: "Engineer", runtime: "codex" },
         ],
         childSessionTabs: [],
         activeChildSessionKey: null,
+        workspaceFileTabs: [],
+        activeWorkspaceFileKey: null,
       },
     });
     useChatSessionListStore.setState({
-      readUpdatedAtBySessionKey: {},
-      hasHydratedReadWatermarks: false,
+      optimisticReadAtBySessionKey: {},
       snapshot: {
         ...useChatSessionListStore.getState().snapshot,
       },
@@ -256,6 +269,50 @@ describe("ChatConversationPanel", () => {
     expect(screen.queryByText("Engineer")).toBeNull();
   });
 
+  it("keeps the message area clean while a session history is hydrating", () => {
+    useChatThreadStore.setState({
+      snapshot: {
+        ...useChatThreadStore.getState().snapshot,
+        sessionKey: "session-1",
+        canDeleteSession: true,
+        isHistoryLoading: true,
+        messages: [],
+      },
+    });
+
+    render(<ChatConversationPanel />);
+
+    expect(
+      screen.queryByRole("status", { name: "Loading session history..." }),
+    ).toBeNull();
+    expect(screen.queryByText("No messages yet. Send one to start.")).toBeNull();
+  });
+
+  it("does not auto-open the child-session panel until the panel is explicitly opened", () => {
+    useChatThreadStore.setState({
+      snapshot: {
+        ...useChatThreadStore.getState().snapshot,
+        sessionKey: "parent-session-1",
+        sessionDisplayName: "Parent Session",
+        canDeleteSession: true,
+        childSessionTabs: [
+          {
+            sessionKey: "child-session-1",
+            parentSessionKey: "parent-session-1",
+            label: "北京天气",
+            agentId: "weather",
+          },
+        ],
+        activeChildSessionKey: "child-session-1",
+        workspacePanelParentKey: null,
+      },
+    });
+
+    render(<ChatConversationPanel />);
+
+    expect(screen.queryByLabelText("Close child session panel")).toBeNull();
+  });
+
   it("creates a draft session with the selected draft agent runtime", async () => {
     const user = userEvent.setup();
 
@@ -290,8 +347,8 @@ describe("ChatConversationPanel", () => {
   });
 });
 
-describe("ChatChildSessionPanel", () => {
-  it("keeps the header compact for a single child session", () => {
+describe("ChatSessionWorkspacePanel", () => {
+  it("renders child session tabs and active child metadata in the workspace sidebar", () => {
     mocks.resolvedChildTabs = [
       {
         sessionKey: "child-session-1",
@@ -299,15 +356,18 @@ describe("ChatChildSessionPanel", () => {
         title: "北京天气",
         agentId: "weather",
         updatedAt: "2026-04-10T09:00:00.000Z",
+        lastMessageAt: "2026-04-10T09:00:00.000Z",
+        readAt: "2026-04-10T09:00:00.000Z",
         sessionTypeLabel: "Codex",
         preferredModel: "openai/gpt-5.3-codex",
         projectName: "project-alpha",
         projectRoot: "/Users/demo/project-alpha",
       },
     ];
+
     render(
-      <ChatChildSessionPanel
-        tabs={[
+      <ChatSessionWorkspacePanel
+        childSessionTabs={[
           {
             sessionKey: "child-session-1",
             parentSessionKey: "parent-session-1",
@@ -315,20 +375,26 @@ describe("ChatChildSessionPanel", () => {
             agentId: "weather",
           },
         ]}
-        activeSessionKey="child-session-1"
+        activeChildSessionKey="child-session-1"
+        workspaceFileTabs={[]}
+        activeWorkspaceFileKey={null}
+        sessionProjectRoot="/Users/demo/project-alpha"
         onSelectSession={vi.fn()}
+        onSelectFile={vi.fn()}
+        onCloseFile={vi.fn()}
         onClose={vi.fn()}
         onBackToParent={vi.fn()}
+        onFileOpen={vi.fn()}
       />,
     );
 
-    expect(screen.getByText("北京天气")).toBeTruthy();
+    expect(screen.queryByText("Child sessions")).toBeNull();
+    expect(screen.getAllByText("北京天气")).toHaveLength(2);
     expect(screen.getByText("Codex")).toBeTruthy();
     expect(screen.getByText("openai/gpt-5.3-codex")).toBeTruthy();
     expect(screen.getByText("project-alpha")).toBeTruthy();
     expect(screen.getByText("/Users/demo/project-alpha")).toBeTruthy();
-    expect(screen.queryByText("Child Sessions")).toBeNull();
-    expect(screen.queryByText("child-session-1")).toBeNull();
+    expect(screen.getByText("No child session messages yet.")).toBeTruthy();
     expect(mocks.stickyBottomScroll).toHaveBeenCalledWith(
       expect.objectContaining({
         resetKey: "child-session-1",
@@ -337,7 +403,7 @@ describe("ChatChildSessionPanel", () => {
     );
   });
 
-  it("uses tabs as the only title layer when multiple child sessions are open", () => {
+  it("shows unread state for inactive child session tabs", () => {
     mocks.resolvedChildTabs = [
       {
         sessionKey: "child-session-1",
@@ -345,6 +411,8 @@ describe("ChatChildSessionPanel", () => {
         title: "北京天气",
         agentId: "weather",
         updatedAt: "2026-04-10T09:00:00.000Z",
+        lastMessageAt: "2026-04-10T09:00:00.000Z",
+        readAt: "2026-04-10T09:00:00.000Z",
         sessionTypeLabel: "Codex",
         preferredModel: "openai/gpt-5.3-codex",
         projectName: "project-alpha",
@@ -356,6 +424,8 @@ describe("ChatChildSessionPanel", () => {
         title: "上海天气",
         agentId: "weather",
         updatedAt: "2026-04-10T09:05:00.000Z",
+        lastMessageAt: "2026-04-10T09:06:00.000Z",
+        readAt: "2026-04-10T09:05:00.000Z",
         sessionTypeLabel: "Claude Code",
         preferredModel: "anthropic/claude-sonnet-4",
         projectName: "project-beta",
@@ -364,8 +434,8 @@ describe("ChatChildSessionPanel", () => {
     ];
 
     render(
-      <ChatChildSessionPanel
-        tabs={[
+      <ChatSessionWorkspacePanel
+        childSessionTabs={[
           {
             sessionKey: "child-session-1",
             parentSessionKey: "parent-session-1",
@@ -379,158 +449,51 @@ describe("ChatChildSessionPanel", () => {
             agentId: "weather",
           },
         ]}
-        activeSessionKey="child-session-1"
+        activeChildSessionKey="child-session-1"
+        workspaceFileTabs={[]}
+        activeWorkspaceFileKey={null}
+        sessionProjectRoot="/Users/demo/project-alpha"
         onSelectSession={vi.fn()}
+        onSelectFile={vi.fn()}
+        onCloseFile={vi.fn()}
         onClose={vi.fn()}
         onBackToParent={vi.fn()}
+        onFileOpen={vi.fn()}
       />,
     );
 
-    expect(screen.getAllByText("北京天气")).toHaveLength(1);
-    expect(screen.getByText("上海天气")).toBeTruthy();
-    expect(screen.getByText("Codex")).toBeTruthy();
-    expect(screen.getByText("openai/gpt-5.3-codex")).toBeTruthy();
-    expect(screen.getByText("project-alpha")).toBeTruthy();
-    expect(screen.getByText("/Users/demo/project-alpha")).toBeTruthy();
-    const tabButtons = screen
-      .getAllByRole("button")
-      .filter((element) => element.getAttribute("aria-pressed") !== null);
-    expect(tabButtons).toHaveLength(2);
-    expect(tabButtons[0]?.getAttribute("aria-pressed")).toBe("true");
-    expect(tabButtons[1]?.getAttribute("aria-pressed")).toBe("false");
+    expect(screen.getByLabelText("Session has unread updates")).toBeTruthy();
   });
 
-  it("shows an unread dot for inactive child tabs until the user opens them", () => {
-    mocks.resolvedChildTabs = [
-      {
-        sessionKey: "child-session-1",
-        parentSessionKey: "parent-session-1",
-        title: "北京天气",
-        agentId: "weather",
-        updatedAt: "2026-04-10T09:00:00.000Z",
-        sessionTypeLabel: "Codex",
-        preferredModel: "openai/gpt-5.3-codex",
-        projectName: "project-alpha",
-        projectRoot: "/Users/demo/project-alpha",
-      },
-      {
-        sessionKey: "child-session-2",
-        parentSessionKey: "parent-session-1",
-        title: "上海天气",
-        agentId: "weather",
-        updatedAt: "2026-04-10T09:05:00.000Z",
-        runStatus: "running",
-        sessionTypeLabel: "Claude Code",
-        preferredModel: "anthropic/claude-sonnet-4",
-        projectName: "project-beta",
-        projectRoot: "/Users/demo/project-beta",
-      },
-    ];
-
-    const { rerender } = render(
-      <ChatChildSessionPanel
-        tabs={[
-          {
-            sessionKey: "child-session-1",
-            parentSessionKey: "parent-session-1",
-            label: "北京天气",
-            agentId: "weather",
-          },
-          {
-            sessionKey: "child-session-2",
-            parentSessionKey: "parent-session-1",
-            label: "上海天气",
-            agentId: "weather",
-          },
-        ]}
-        activeSessionKey="child-session-1"
-        onSelectSession={vi.fn()}
-        onClose={vi.fn()}
-        onBackToParent={vi.fn()}
-      />,
-    );
-
-    expect(
-      screen.queryByLabelText("Session has unread updates"),
-    ).toBeNull();
-
-    mocks.resolvedChildTabs = [
-      {
-        sessionKey: "child-session-1",
-        parentSessionKey: "parent-session-1",
-        title: "北京天气",
-        agentId: "weather",
-        updatedAt: "2026-04-10T09:00:00.000Z",
-        sessionTypeLabel: "Codex",
-        preferredModel: "openai/gpt-5.3-codex",
-        projectName: "project-alpha",
-        projectRoot: "/Users/demo/project-alpha",
-      },
-      {
-        sessionKey: "child-session-2",
-        parentSessionKey: "parent-session-1",
-        title: "上海天气",
-        agentId: "weather",
-        updatedAt: "2026-04-10T09:05:00.000Z",
-        sessionTypeLabel: "Claude Code",
-        preferredModel: "anthropic/claude-sonnet-4",
-        projectName: "project-beta",
-        projectRoot: "/Users/demo/project-beta",
-      },
-    ];
-
-    rerender(
-      <ChatChildSessionPanel
-        tabs={[
-          {
-            sessionKey: "child-session-1",
-            parentSessionKey: "parent-session-1",
-            label: "北京天气",
-            agentId: "weather",
-          },
+  it("shows opened files as top tabs and renders the file preview pane", () => {
+    render(
+      <ChatSessionWorkspacePanel
+        childSessionTabs={[]}
+        activeChildSessionKey={null}
+        workspaceFileTabs={[
           {
-            sessionKey: "child-session-2",
+            key: "parent-session-1::preview::README.md",
             parentSessionKey: "parent-session-1",
-            label: "上海天气",
-            agentId: "weather",
+            path: "README.md",
+            label: "README.md",
+            viewMode: "preview",
           },
         ]}
-        activeSessionKey="child-session-1"
+        activeWorkspaceFileKey="parent-session-1::preview::README.md"
+        sessionProjectRoot="/Users/demo/project-alpha"
         onSelectSession={vi.fn()}
+        onSelectFile={vi.fn()}
+        onCloseFile={vi.fn()}
         onClose={vi.fn()}
         onBackToParent={vi.fn()}
+        onFileOpen={vi.fn()}
       />,
     );
 
-    expect(
-      screen.getByLabelText("Session has unread updates"),
-    ).toBeTruthy();
-
-    rerender(
-      <ChatChildSessionPanel
-        tabs={[
-          {
-            sessionKey: "child-session-1",
-            parentSessionKey: "parent-session-1",
-            label: "北京天气",
-            agentId: "weather",
-          },
-          {
-            sessionKey: "child-session-2",
-            parentSessionKey: "parent-session-1",
-            label: "上海天气",
-            agentId: "weather",
-          },
-        ]}
-        activeSessionKey="child-session-2"
-        onSelectSession={vi.fn()}
-        onClose={vi.fn()}
-        onBackToParent={vi.fn()}
-      />,
+    expect(screen.queryByText("Open files")).toBeNull();
+    expect(screen.getAllByText("README.md").length).toBeGreaterThan(0);
+    expect(screen.getByTestId("workspace-file-preview").textContent).toBe(
+      "README.md",
     );
-
-    expect(
-      screen.queryByLabelText("Session has unread updates"),
-    ).toBeNull();
   });
 });