@nextclaw/ui 0.14.1 → 0.14.3

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/chat-sidebar-list-mode-switch.tsx

@@ -10,16 +10,16 @@ export function ChatSidebarListModeSwitch({ isProjectFirstView, onSelectMode }:
         type="button"
         aria-pressed={!isProjectFirstView}
         onClick={() => onSelectMode('time-first')}
-        className={cn('transition-colors', isProjectFirstView ? 'text-gray-400 hover:text-gray-600' : 'font-medium text-gray-600')}
+        className={cn('transition-colors', isProjectFirstView ? 'text-muted-foreground/65 hover:text-muted-foreground' : 'font-medium text-foreground')}
       >
         {t('chatSidebarViewTime')}
       </button>
-      <span className="text-gray-300">/</span>
+      <span className="text-muted-foreground/35">/</span>
       <button
         type="button"
         aria-pressed={isProjectFirstView}
         onClick={() => onSelectMode('project-first')}
-        className={cn('transition-colors', isProjectFirstView ? 'font-medium text-gray-600' : 'text-gray-400 hover:text-gray-600')}
+        className={cn('transition-colors', isProjectFirstView ? 'font-medium text-foreground' : 'text-muted-foreground/65 hover:text-muted-foreground')}
       >
         {t('chatSidebarViewProject')}
       </button>

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",
+    });
+  });
+});

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

@@ -36,9 +36,10 @@ describe("ChatConversationHeader", () => {
   it("uses a stable desktop height before and after session materialization", () => {
     renderHeader();
 
-    const header = screen.getByText("New Task").closest(".border-b");
+    const header = screen.getByTestId("chat-conversation-header");
 
     expect(header?.className).toContain("h-[52px]");
+    expect(header?.className).not.toContain("border-b");
     expect(header?.className).not.toContain("transition-all");
   });
 
@@ -58,9 +59,10 @@ describe("ChatConversationHeader", () => {
     });
 
     const moreActions = screen.getByRole("button", { name: "More actions" });
-    const header = screen.getByText("First message").closest(".border-b");
+    const header = screen.getByTestId("chat-conversation-header");
 
     expect(header?.className).toContain("h-[52px]");
+    expect(header?.className).not.toContain("border-b");
     expect(moreActions.className).toContain("h-7");
     expect(moreActions.className).toContain("w-7");
   });