@nextclaw/ui 0.13.13 → 0.14.1-beta.0

package/src/features/chat/components/conversation/{chat-conversation-header.test.tsx → __tests__/chat-conversation-header.test.tsx}

@@ -2,7 +2,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { ChatConversationHeader } from "@/features/chat/components/conversation/chat-conversation-header";
-import { useChatThreadStore } from "@/features/chat/stores/chat-thread.store";
+import { ChatSessionHeaderActions } from "@/features/chat/features/session/components/session-header/chat-session-header-actions";
 
 vi.mock("@/shared/components/common/agent-avatar", () => ({
   AgentAvatar: ({ agentId }: { agentId: string }) => (
@@ -10,38 +10,23 @@ vi.mock("@/shared/components/common/agent-avatar", () => ({
   ),
 }));
 
-function renderHeader(
-  snapshotPatch: Partial<ReturnType<typeof useChatThreadStore.getState>["snapshot"]>,
-) {
+function renderHeader({
+  actions,
+  shouldShow = true,
+  title = "New Task",
+}: {
+  actions?: JSX.Element | null;
+  shouldShow?: boolean;
+  title?: string;
+} = {}) {
   const queryClient = new QueryClient();
-  const snapshot = {
-    ...useChatThreadStore.getState().snapshot,
-    isProviderStateResolved: true,
-    modelOptions: [],
-    sessionTypeLabel: "Codex",
-    sessionKey: null,
-    agentId: "main",
-    canDeleteSession: false,
-    messages: [],
-    ...snapshotPatch,
-  };
-
   return render(
     <QueryClientProvider client={queryClient}>
       <ChatConversationHeader
-        snapshot={snapshot}
-        childSessionCount={0}
-        sessionCronJobCount={0}
         layoutMode="desktop"
-        normalizedAgentId={snapshot.agentId ?? ""}
-        sessionHeaderTitle={snapshot.sessionDisplayName ?? "New Task"}
-        shouldShowHeaderAgentAvatar={false}
-        shouldShowSessionHeader={Boolean(
-          snapshot.sessionKey || snapshot.sessionTypeLabel,
-        )}
-        onOpenChildSessions={vi.fn()}
-        onOpenSessionCronJobs={vi.fn()}
-        onDeleteSession={vi.fn()}
+        title={title}
+        shouldShow={shouldShow}
+        actions={actions}
       />
     </QueryClientProvider>,
   );
@@ -49,7 +34,7 @@ function renderHeader(
 
 describe("ChatConversationHeader", () => {
   it("uses a stable desktop height before and after session materialization", () => {
-    renderHeader({});
+    renderHeader();
 
     const header = screen.getByText("New Task").closest(".border-b");
 
@@ -59,9 +44,17 @@ describe("ChatConversationHeader", () => {
 
   it("uses the standard session-header action button density after the session is materialized", () => {
     renderHeader({
-      sessionKey: "session-1",
-      canDeleteSession: true,
-      sessionDisplayName: "First message",
+      title: "First message",
+      actions: (
+        <ChatSessionHeaderActions
+          sessionKey="session-1"
+          canDeleteSession
+          isDeletePending={false}
+          childSessionCount={0}
+          sessionCronJobCount={0}
+          onDeleteSession={vi.fn()}
+        />
+      ),
     });
 
     const moreActions = screen.getByRole("button", { name: "More actions" });

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

@@ -2,12 +2,14 @@ import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { ChatConversationPanel } from "@/features/chat/components/conversation/chat-conversation-panel";
-import { ChatSessionWorkspacePanel } from "@/features/chat/components/chat-session-workspace-panel";
-import type { ResolvedChildSessionTab } from "@/features/chat/hooks/use-ncp-child-session-tabs-view";
-import type { CronJobView } from "@/shared/lib/api";
+import { ChatSessionWorkspacePanel } from "@/features/chat/features/workspace/components/chat-session-workspace-panel";
+import type { ResolvedChildSessionTab } from "@/features/chat/features/ncp/hooks/use-ncp-child-session-tabs-view";
+import type { CronJobView, NcpSessionSummaryView } from "@/shared/lib/api";
 import { useChatInputStore } from "@/features/chat/stores/chat-input.store";
+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 { ChatQuerySnapshot } from "@/features/chat/stores/ncp-chat-query.store";
 
 const mocks = vi.hoisted(() => ({
   deleteSession: vi.fn(),
@@ -20,6 +22,10 @@ const mocks = vi.hoisted(() => ({
   goForwardWorkspacePanel: vi.fn(),
   deleteCronJob: vi.fn(),
   cronJobs: [] as CronJobView[],
+  agents: [
+    { id: "main", displayName: "Main", runtime: "native" },
+    { id: "engineer", displayName: "Engineer", runtime: "codex" },
+  ],
   setSelectedAgentId: vi.fn(),
   setPendingSessionType: vi.fn(),
   stickyBottomScroll: vi.fn(() => ({
@@ -51,14 +57,14 @@ vi.mock("@nextclaw/agent-chat-ui", async (importOriginal) => {
 });
 
 vi.mock(
-  "@/features/chat/components/conversation/chat-input-bar.container",
+  "@/features/chat/features/input/components/chat-input-bar.container",
   () => ({
     ChatInputBarContainer: () => <div data-testid="chat-input-bar" />,
   }),
 );
 
 vi.mock(
-  "@/features/chat/components/conversation/chat-message-list.container",
+  "@/features/chat/features/message/components/chat-message-list.container",
   () => ({
     ChatMessageListContainer: ({
       isSending,
@@ -77,7 +83,7 @@ vi.mock(
 );
 
 vi.mock(
-  "@/features/chat/components/chat-session-workspace-file-preview",
+  "@/features/chat/features/workspace/components/chat-session-workspace-file-preview",
   () => ({
     ChatSessionWorkspaceFilePreview: ({ file }: { file: { path: string } }) => (
       <div data-testid="workspace-file-preview">{file.path}</div>
@@ -109,14 +115,17 @@ vi.mock("@/features/chat/components/providers/chat-presenter.provider", () => ({
     chatUiManager: {
       goToChatRoot: mocks.goToChatRoot,
       goToSession: mocks.goToSession,
+      goToProviders: mocks.goToProviders,
     },
     chatThreadManager: {
       deleteSession: mocks.deleteSession,
-      goToProviders: mocks.goToProviders,
       openChildSessionPanel: vi.fn(),
       openSessionCronPanel: mocks.openSessionCronPanel,
       openFilePreview: vi.fn(),
+      handleToolAction: vi.fn(),
       openSessionFromToolAction: vi.fn(),
+      showContent: vi.fn(),
+      syncVisibleWorkspaceSelection: vi.fn(),
       selectChildSessionDetail: vi.fn(),
       selectWorkspaceFile: vi.fn(),
       closeWorkspaceFile: vi.fn(),
@@ -138,6 +147,22 @@ vi.mock("@/features/chat/components/providers/chat-presenter.provider", () => ({
               .getState()
               .markSessionRead(sessionKey, readAt)
           : undefined,
+      markVisibleWorkspaceChildRead: (tab: {
+        sessionKey: string | null | undefined;
+        lastMessageAt?: string | null;
+        readAt?: string | null;
+        runStatus?: string | null;
+      }) => {
+        if (tab.runStatus === "running") {
+          return;
+        }
+        if (!tab.sessionKey || !tab.lastMessageAt) {
+          return;
+        }
+        useChatSessionListStore
+          .getState()
+          .markSessionRead(tab.sessionKey, tab.lastMessageAt);
+      },
     },
     chatInputManager: {
       setPendingSessionType: mocks.setPendingSessionType,
@@ -145,7 +170,7 @@ vi.mock("@/features/chat/components/providers/chat-presenter.provider", () => ({
   }),
 }));
 
-vi.mock("@/shared/hooks/use-config", () => ({
+vi.mock("@/features/cron", () => ({
   useCronJobs: () => ({
     data: { jobs: mocks.cronJobs, total: mocks.cronJobs.length },
   }),
@@ -156,14 +181,14 @@ vi.mock("@/shared/hooks/use-config", () => ({
 }));
 
 vi.mock(
-  "@/features/chat/components/conversation/session-header/chat-session-header-actions",
+  "@/features/chat/features/session/components/session-header/chat-session-header-actions",
   () => ({
     ChatSessionHeaderActions: () => <button aria-label="More actions" />,
   }),
 );
 
 vi.mock(
-  "@/features/chat/components/conversation/session-header/chat-session-project-badge",
+  "@/features/chat/features/session/components/session-header/chat-session-project-badge",
   () => ({
     ChatSessionProjectBadge: ({ projectName }: { projectName: string }) => (
       <button>{projectName}</button>
@@ -171,11 +196,11 @@ vi.mock(
   }),
 );
 
-vi.mock("@/features/chat/hooks/use-ncp-child-session-tabs-view", () => ({
+vi.mock("@/features/chat/features/ncp/hooks/use-ncp-child-session-tabs-view", () => ({
   useNcpChildSessionTabsView: () => mocks.resolvedChildTabs,
 }));
 
-vi.mock("@/features/chat/hooks/use-ncp-session-conversation", () => ({
+vi.mock("@/features/chat/features/ncp/hooks/use-ncp-session-conversation", () => ({
   useNcpSessionConversation: () => ({
     visibleMessages: [],
     isHydrating: false,
@@ -190,12 +215,47 @@ vi.mock("@/shared/components/common/agent-avatar", () => ({
   ),
 }));
 
+vi.mock("@/shared/hooks/use-agents", () => ({
+  useAgents: () => ({
+    data: { agents: mocks.agents },
+  }),
+}));
+
 vi.mock("@/shared/components/common/agent-identity", () => ({
   AgentIdentityAvatar: ({ agentId }: { agentId: string }) => (
     <div data-testid="agent-identity-avatar">{agentId}</div>
   ),
 }));
 
+function createFetchedQuery<TData>(data: TData) {
+  return {
+    data,
+    error: null,
+    fetchStatus: "idle",
+    isFetched: true,
+    isFetching: false,
+    isLoading: false,
+    isSuccess: true,
+    status: "success",
+  };
+}
+
+function createSessionSummary(
+  overrides: Partial<NcpSessionSummaryView> & Pick<NcpSessionSummaryView, "sessionId">,
+): NcpSessionSummaryView {
+  return {
+    sessionId: overrides.sessionId,
+    agentId: overrides.agentId ?? "main",
+    createdAt: overrides.createdAt ?? "2026-04-10T08:00:00.000Z",
+    updatedAt: overrides.updatedAt ?? "2026-04-10T09:00:00.000Z",
+    lastMessageAt: overrides.lastMessageAt ?? "2026-04-10T09:00:00.000Z",
+    messageCount: overrides.messageCount ?? 1,
+    metadata: overrides.metadata ?? {},
+    status: overrides.status ?? "idle",
+    workingDir: overrides.workingDir,
+  };
+}
+
 function resetChatConversationPanelTestState() {
   mocks.deleteSession.mockReset();
   mocks.goToProviders.mockReset();
@@ -208,6 +268,10 @@ function resetChatConversationPanelTestState() {
   mocks.goForwardWorkspacePanel.mockReset();
   mocks.deleteCronJob.mockReset();
   mocks.cronJobs = [];
+  mocks.agents = [
+    { id: "main", displayName: "Main", runtime: "native" },
+    { id: "engineer", displayName: "Engineer", runtime: "codex" },
+  ];
   mocks.resolvedChildTabs = [
     {
       sessionKey: "child-session-1",
@@ -229,13 +293,11 @@ function resetChatConversationPanelTestState() {
   useChatInputStore.setState({
     snapshot: {
       ...useChatInputStore.getState().snapshot,
+      isProviderStateResolved: false,
       defaultSessionType: "native",
-    },
-  });
-  useChatThreadStore.setState({
-    snapshot: {
-      ...useChatThreadStore.getState().snapshot,
-      isProviderStateResolved: true,
+      pendingSessionType: "codex",
+      sessionTypeUnavailable: false,
+      sessionTypeUnavailableMessage: null,
       modelOptions: [
         {
           value: "openai/gpt-5.1",
@@ -243,11 +305,29 @@ function resetChatConversationPanelTestState() {
           providerLabel: "OpenAI",
         } as never,
       ],
+    },
+  });
+  useChatQueryStore.setState({
+    snapshot: {
+      configQuery: createFetchedQuery({ agents: { defaults: {} }, providers: {} }) as unknown as ChatQuerySnapshot["configQuery"],
+      providersQuery: createFetchedQuery({ providers: {} }) as unknown as ChatQuerySnapshot["providersQuery"],
+      providerTemplatesQuery: createFetchedQuery({ providerTemplates: [] }) as unknown as ChatQuerySnapshot["providerTemplatesQuery"],
+      sessionTypesQuery: createFetchedQuery({
+        defaultType: "native",
+        options: [
+          { value: "native", label: "Native", ready: true },
+          { value: "codex", label: "Codex", ready: true },
+        ],
+      }) as unknown as ChatQuerySnapshot["sessionTypesQuery"],
+    },
+  });
+  useChatThreadStore.setState({
+    snapshot: {
+      ...useChatThreadStore.getState().snapshot,
       sessionTypeLabel: "Codex",
       sessionKey: "draft-session-1",
       sessionDisplayName: undefined,
       agentId: null,
-      agentDisplayName: null,
       sessionProjectRoot: null,
       sessionProjectName: null,
       canDeleteSession: false,
@@ -260,10 +340,6 @@ function resetChatConversationPanelTestState() {
       parentSessionKey: null,
       parentSessionLabel: null,
       workspacePanelParentKey: null,
-      availableAgents: [
-        { id: "main", displayName: "Main", runtime: "native" },
-        { id: "engineer", displayName: "Engineer", runtime: "codex" },
-      ],
       childSessionTabs: [],
       activeChildSessionKey: null,
       workspaceFileTabs: [],
@@ -318,14 +394,34 @@ describe("ChatConversationPanel", () => {
   });
 
   it("shows the selected session project badge and more actions trigger", () => {
+    useChatSessionListStore.setState({
+      snapshot: {
+        ...useChatSessionListStore.getState().snapshot,
+        selectedSessionKey: "session-1",
+      },
+    });
+    useChatQueryStore.setState({
+      snapshot: {
+        ...useChatQueryStore.getState().snapshot,
+        sessionsQuery: createFetchedQuery({
+          sessions: [
+            createSessionSummary({
+              sessionId: "session-1",
+              metadata: {
+                label: "Project Thread",
+                project_root: "/Users/demo/workspace/project-alpha",
+                session_type: "codex",
+              },
+            }),
+          ],
+          total: 1,
+        }) as unknown as ChatQuerySnapshot["sessionsQuery"],
+      },
+    });
     useChatThreadStore.setState({
       snapshot: {
         ...useChatThreadStore.getState().snapshot,
         sessionKey: "session-1",
-        sessionDisplayName: "Project Thread",
-        sessionProjectRoot: "/Users/demo/workspace/project-alpha",
-        sessionProjectName: "project-alpha",
-        canDeleteSession: true,
       },
     });
 
@@ -341,7 +437,6 @@ describe("ChatConversationPanel", () => {
       snapshot: {
         ...useChatThreadStore.getState().snapshot,
         agentId: "main",
-        agentDisplayName: "Main",
       },
     });
 
@@ -355,23 +450,17 @@ describe("ChatConversationPanel", () => {
       snapshot: {
         ...useChatThreadStore.getState().snapshot,
         agentId: "engineer",
-        agentDisplayName: "Engineer",
       },
     });
 
     render(<ChatConversationPanel />);
 
-    expect(screen.getByTestId("agent-avatar").textContent).toBe("engineer");
+    expect(screen.getByTestId("agent-identity-avatar").textContent).toBe("engineer");
     expect(screen.queryByText("Engineer")).toBeNull();
   });
 
   it("renders a fuller loading skeleton before provider state settles", () => {
-    useChatThreadStore.setState({
-      snapshot: {
-        ...useChatThreadStore.getState().snapshot,
-        isProviderStateResolved: false,
-      },
-    });
+    useChatQueryStore.setState({ snapshot: {} });
 
     render(<ChatConversationPanel />);
 
@@ -382,6 +471,13 @@ describe("ChatConversationPanel", () => {
     expect(screen.queryByTestId("chat-input-bar")).toBeNull();
   });
 
+  it("does not keep the conversation skeleton after provider queries resolve", () => {
+    render(<ChatConversationPanel />);
+
+    expect(screen.queryByTestId("chat-conversation-skeleton")).toBeNull();
+    expect(screen.getByTestId("chat-input-bar")).toBeTruthy();
+  });
+
   it("keeps the message area clean while a session history is hydrating", () => {
     useChatThreadStore.setState({
       snapshot: {
@@ -520,7 +616,6 @@ describe("ChatConversationPanel", () => {
       snapshot: {
         ...useChatThreadStore.getState().snapshot,
         agentId: "engineer",
-        agentDisplayName: "Engineer",
       },
     });
 

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

@@ -0,0 +1,37 @@
+import { usePresenter } from "@/features/chat/components/providers/chat-presenter.provider";
+import { useChatInputStore } from "@/features/chat/stores/chat-input.store";
+import { t } from "@/shared/lib/i18n";
+
+export function ChatConversationAlerts() {
+  const presenter = usePresenter();
+  const snapshot = useChatInputStore((state) => state.snapshot);
+  const shouldShowProviderHint =
+    snapshot.isProviderStateResolved && snapshot.modelOptions.length === 0;
+
+  return (
+    <>
+      {shouldShowProviderHint ? (
+        <div className="px-4 py-2.5 border-b border-amber-200/70 bg-amber-50/70 flex items-center justify-between gap-3 shrink-0 sm:px-5">
+          <span className="text-xs text-amber-800">
+            {t("chatModelNoOptions")}
+          </span>
+          <button
+            type="button"
+            onClick={presenter.chatUiManager.goToProviders}
+            className="text-xs font-semibold text-amber-900 underline-offset-2 hover:underline"
+          >
+            {t("chatGoConfigureProvider")}
+          </button>
+        </div>
+      ) : null}
+      {snapshot.sessionTypeUnavailable &&
+      snapshot.sessionTypeUnavailableMessage?.trim() ? (
+        <div className="px-4 py-2.5 border-b border-amber-200/70 bg-amber-50/70 shrink-0 sm:px-5">
+          <span className="text-xs text-amber-800">
+            {snapshot.sessionTypeUnavailableMessage}
+          </span>
+        </div>
+      ) : null}
+    </>
+  );
+}

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

@@ -0,0 +1,91 @@
+import { useRef } from "react";
+import { useStickyBottomScroll } from "@nextclaw/agent-chat-ui";
+import { ChatMessageListContainer } from "@/features/chat/features/message/components/chat-message-list.container";
+import { ChatWelcome } from "@/features/chat/components/chat-welcome";
+import { usePresenter } from "@/features/chat/components/providers/chat-presenter.provider";
+import { resolveAgentRuntimeSessionType } from "@/features/chat/features/session-type/utils/chat-session-type.utils";
+import { useChatInputStore } from "@/features/chat/stores/chat-input.store";
+import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
+import { useChatThreadStore } from "@/features/chat/stores/chat-thread.store";
+import { useAgents } from "@/shared/hooks/use-agents";
+
+export function ChatConversationContent() {
+  const presenter = usePresenter();
+  const defaultSessionType = useChatInputStore(
+    (state) => state.snapshot.defaultSessionType,
+  );
+  const selectedAgentId = useChatSessionListStore(
+    (state) => state.snapshot.selectedAgentId,
+  );
+  const snapshot = useChatThreadStore((state) => state.snapshot);
+  const threadRef = useRef<HTMLDivElement | null>(null);
+  const agentsQuery = useAgents();
+  const draftAgentId = snapshot.agentId ?? selectedAgentId;
+  const availableAgents =
+    (agentsQuery.data?.agents?.length ?? 0) > 0
+      ? (agentsQuery.data?.agents ?? [])
+      : [{ id: draftAgentId }];
+  const showWelcome =
+    !snapshot.canDeleteSession &&
+    !snapshot.hasSubmittedDraftMessage &&
+    snapshot.messages.length === 0 &&
+    !snapshot.isSending;
+  const hideEmptyHint =
+    snapshot.isHistoryLoading &&
+    snapshot.messages.length === 0 &&
+    !snapshot.isSending &&
+    !snapshot.isAwaitingAssistantOutput;
+  const resolveDraftAgent = (agentId: string) =>
+    availableAgents.find((agent) => agent.id === agentId) ?? null;
+  const createDraftSessionForAgent = () => {
+    const sessionType = resolveAgentRuntimeSessionType(
+      resolveDraftAgent(draftAgentId),
+      defaultSessionType,
+    );
+    presenter.chatSessionListManager.createSession(sessionType);
+  };
+  const selectDraftAgent = (agentId: string) => {
+    presenter.chatSessionListManager.setSelectedAgentId(agentId);
+    presenter.chatInputManager.setPendingSessionType(
+      resolveAgentRuntimeSessionType(
+        resolveDraftAgent(agentId),
+        defaultSessionType,
+      ),
+    );
+  };
+  const { onScroll } = useStickyBottomScroll({
+    scrollRef: threadRef,
+    resetKey: snapshot.sessionKey,
+    isLoading: snapshot.isHistoryLoading,
+    hasContent: snapshot.messages.length > 0,
+    contentVersion: snapshot.messages[snapshot.messages.length - 1] ?? null,
+  });
+  const hasMessages = snapshot.messages.length > 0;
+  const isAwaitingAssistantOutput =
+    hasMessages && snapshot.isSending && snapshot.isAwaitingAssistantOutput;
+
+  return (
+    <div
+      ref={threadRef}
+      onScroll={onScroll}
+      data-chat-scroll-container="true"
+      className="flex-1 min-h-0 overflow-y-auto custom-scrollbar"
+    >
+      {showWelcome ? (
+        <ChatWelcome
+          onCreateSession={createDraftSessionForAgent}
+          agents={availableAgents}
+          selectedAgentId={draftAgentId}
+          onSelectAgent={selectDraftAgent}
+        />
+      ) : 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={snapshot.messages}
+            isSending={isAwaitingAssistantOutput}
+          />
+        </div>
+      )}
+    </div>
+  );
+}