@nextclaw/ui 0.12.8 → 0.12.10

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";
@@ -51,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,
@@ -75,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: {
@@ -182,12 +194,15 @@ 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({
@@ -254,6 +269,67 @@ describe("ChatConversationPanel", () => {
     expect(screen.queryByText("Engineer")).toBeNull();
   });
 
+  it("renders a fuller loading skeleton before provider state settles", () => {
+    useChatThreadStore.setState({
+      snapshot: {
+        ...useChatThreadStore.getState().snapshot,
+        isProviderStateResolved: false,
+      },
+    });
+
+    render(<ChatConversationPanel />);
+
+    expect(screen.getByTestId("chat-conversation-skeleton")).toBeTruthy();
+    expect(
+      screen.getAllByTestId("chat-conversation-skeleton-bubble"),
+    ).toHaveLength(4);
+    expect(screen.queryByTestId("chat-input-bar")).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();
 
@@ -288,8 +364,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",
@@ -305,9 +381,10 @@ describe("ChatChildSessionPanel", () => {
         projectRoot: "/Users/demo/project-alpha",
       },
     ];
+
     render(
-      <ChatChildSessionPanel
-        tabs={[
+      <ChatSessionWorkspacePanel
+        childSessionTabs={[
           {
             sessionKey: "child-session-1",
             parentSessionKey: "parent-session-1",
@@ -315,20 +392,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,129 +420,7 @@ describe("ChatChildSessionPanel", () => {
     );
   });
 
-  it("uses tabs as the only title layer when multiple child sessions are open", () => {
-    mocks.resolvedChildTabs = [
-      {
-        sessionKey: "child-session-1",
-        parentSessionKey: "parent-session-1",
-        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",
-      },
-      {
-        sessionKey: "child-session-2",
-        parentSessionKey: "parent-session-1",
-        title: "上海天气",
-        agentId: "weather",
-        updatedAt: "2026-04-10T09:05:00.000Z",
-        lastMessageAt: "2026-04-10T09:05:00.000Z",
-        readAt: "2026-04-10T09:05:00.000Z",
-        sessionTypeLabel: "Claude Code",
-        preferredModel: "anthropic/claude-sonnet-4",
-        projectName: "project-beta",
-        projectRoot: "/Users/demo/project-beta",
-      },
-    ];
-
-    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.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");
-  });
-
-  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",
-        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",
-      },
-      {
-        sessionKey: "child-session-2",
-        parentSessionKey: "parent-session-1",
-        title: "上海天气",
-        agentId: "weather",
-        updatedAt: "2026-04-10T09:05:00.000Z",
-        lastMessageAt: "2026-04-10T09:05:00.000Z",
-        readAt: "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();
-
+  it("shows unread state for inactive child session tabs", () => {
     mocks.resolvedChildTabs = [
       {
         sessionKey: "child-session-1",
@@ -489,9 +450,9 @@ describe("ChatChildSessionPanel", () => {
       },
     ];
 
-    rerender(
-      <ChatChildSessionPanel
-        tabs={[
+    render(
+      <ChatSessionWorkspacePanel
+        childSessionTabs={[
           {
             sessionKey: "child-session-1",
             parentSessionKey: "parent-session-1",
@@ -505,94 +466,54 @@ 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.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.queryByLabelText("Session has unread updates")).toBeNull();
   });
 
-  it("does not show an unread dot for child tabs without a persisted ui read baseline", () => {
-    mocks.resolvedChildTabs = [
-      {
-        sessionKey: "child-session-1",
-        parentSessionKey: "parent-session-1",
-        title: "北京天气",
-        agentId: "weather",
-        updatedAt: "2026-04-10T09:00:00.000Z",
-        lastMessageAt: "2026-04-10T09:00:00.000Z",
-        readAt: null,
-        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",
-        lastMessageAt: "2026-04-10T09:06:00.000Z",
-        readAt: null,
-        sessionTypeLabel: "Claude Code",
-        preferredModel: "anthropic/claude-sonnet-4",
-        projectName: "project-beta",
-        projectRoot: "/Users/demo/project-beta",
-      },
-    ];
-
+  it("shows opened files as top tabs and renders the file preview pane", () => {
     render(
-      <ChatChildSessionPanel
-        tabs={[
-          {
-            sessionKey: "child-session-1",
-            parentSessionKey: "parent-session-1",
-            label: "北京天气",
-            agentId: "weather",
-          },
+      <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.queryByLabelText("Session has unread updates")).toBeNull();
+    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.getByTestId("workspace-tabs-bar").className).toContain(
+      "workspace-horizontal-scrollbar",
+    );
   });
 });