@nextclaw/ui 0.20.3 → 0.22.0

package/src/features/chat/components/layout/__tests__/chat-sidebar-toolbar.test.tsx

@@ -40,6 +40,11 @@ describe("ChatSidebarToolbar", () => {
     expect(
       screen.getByPlaceholderText("Search conversations...").className,
     ).toContain("border-0");
+    expect(
+      screen
+        .getByPlaceholderText("Search conversations...")
+        .getAttribute("data-theme-control"),
+    ).toBe("chat-search");
   });
 
   it("keeps mobile search icon transparent to pointer input", () => {
@@ -49,5 +54,10 @@ describe("ChatSidebarToolbar", () => {
     expect(
       screen.getByPlaceholderText("Search conversations...").className,
     ).toContain("border-0");
+    expect(
+      screen
+        .getByPlaceholderText("Search conversations...")
+        .getAttribute("data-theme-control"),
+    ).toBe("chat-search");
   });
 });

package/src/features/chat/components/layout/chat-page-shell.tsx

@@ -53,7 +53,10 @@ export function ChatPageLayout({ view, confirmDialog }: ChatPageLayoutProps) {
       {view === "chat" ? (
         isMobile ? <ChatMobileShell /> : <ChatConversationPanel />
       ) : (
-        <section className="flex-1 min-h-0 overflow-hidden bg-background">
+        <section
+          data-theme-surface="workspace"
+          className="flex-1 min-h-0 overflow-hidden bg-background"
+        >
           {view === "inbox" ? (
             <div className={`mx-auto flex h-full min-h-0 w-full flex-col py-4 sm:px-6 sm:py-5 ${MANAGEMENT_PAGE_CANVAS_WIDTH_CLASS}`}>
               <InboxPage />

package/src/features/chat/components/layout/chat-sidebar-toolbar.tsx

@@ -194,6 +194,7 @@ export function ChatSidebarDesktopToolbar(props: ChatSidebarToolbarProps) {
         <div className="relative">
           <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground/60" />
           <Input
+            data-theme-control="chat-search"
             value={query}
             onChange={(event) => onQueryChange(event.target.value)}
             placeholder={t("chatSidebarSearchPlaceholder")}
@@ -223,6 +224,7 @@ export function ChatSidebarMobileToolbar(props: ChatSidebarToolbarProps) {
         <div className="relative min-w-0 flex-1">
           <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground/70" />
           <Input
+            data-theme-control="chat-search"
             value={query}
             onChange={(event) => onQueryChange(event.target.value)}
             placeholder={t("chatSidebarSearchPlaceholder")}

package/src/features/chat/components/layout/chat-sidebar.tsx

@@ -247,6 +247,7 @@ export function ChatSidebar({
       onTogglePinned={() =>
         presenter.chatSessionListManager.toggleSessionPinned(item.session.key)
       }
+      onDeleteSession={presenter.chatThreadManager.deleteSession}
     />
   );
   const createSessionAndOpenIfNeeded = (
@@ -278,6 +279,7 @@ export function ChatSidebar({
 
   return (
     <aside
+      data-theme-surface="navigation"
       className={cn(
         "flex h-full min-h-0 flex-col bg-secondary transition-[width] duration-200 ease-out",
         isMobileVariant

package/src/features/chat/features/session/components/__tests__/chat-sidebar-session-item.test.tsx

@@ -5,6 +5,7 @@ import { ChatSidebarSessionItem } from "@/features/chat/features/session/compone
 
 const mocks = vi.hoisted(() => ({
   copyText: vi.fn(),
+  deleteSession: vi.fn(),
 }));
 
 vi.mock("@nextclaw/agent-chat-ui", () => ({
@@ -21,6 +22,7 @@ vi.mock("sonner", () => ({
 beforeEach(() => {
   mocks.copyText.mockReset();
   mocks.copyText.mockResolvedValue(true);
+  mocks.deleteSession.mockReset();
   render(
     <ChatSidebarSessionItem
       sessionKey="session:current"
@@ -50,6 +52,7 @@ beforeEach(() => {
       onSave={vi.fn()}
       onCancel={vi.fn()}
       onTogglePinned={vi.fn()}
+      onDelete={mocks.deleteSession}
     />,
   );
 });
@@ -87,6 +90,15 @@ it("copies the sidebar session ID from the more-actions menu", async () => {
   expect(mocks.copyText).toHaveBeenCalledWith("session:current");
 });
 
+it("deletes the sidebar session from the more-actions menu", async () => {
+  const user = userEvent.setup();
+
+  await user.click(screen.getByRole("button", { name: "More actions" }));
+  await user.click(screen.getByRole("button", { name: "Delete Session" }));
+
+  expect(mocks.deleteSession).toHaveBeenCalledOnce();
+});
+
 it("sizes the runtime icon to the session title text", () => {
   const runtimeIcon = screen.getByRole("img", { name: "Codex logo" });
 

package/src/features/chat/features/session/components/chat-sidebar-session-entry.tsx

@@ -32,6 +32,7 @@ export function ChatSidebarSessionEntry(props: {
   onSaveSessionLabel: (session: SessionEntryView) => void;
   onCancelEditingSessionLabel: () => void;
   onTogglePinned: () => void;
+  onDeleteSession: (sessionKey: string) => void;
 }) {
   const {
     item,
@@ -52,6 +53,7 @@ export function ChatSidebarSessionEntry(props: {
     onSaveSessionLabel,
     onCancelEditingSessionLabel,
     onTogglePinned,
+    onDeleteSession,
   } = props;
   const { session, runStatus } = item;
   const active = selectedSessionKey === session.key;
@@ -111,6 +113,7 @@ export function ChatSidebarSessionEntry(props: {
       onSave={() => onSaveSessionLabel(session)}
       onCancel={onCancelEditingSessionLabel}
       onTogglePinned={onTogglePinned}
+      onDelete={() => onDeleteSession(session.key)}
     />
   );
 }

package/src/features/chat/features/session/components/chat-sidebar-session-item.tsx

@@ -15,9 +15,11 @@ import {
   GitBranch,
   Pencil,
   Pin,
+  Trash2,
   X,
 } from "lucide-react";
 import { ChatSidebarContextCard } from "@/features/chat/features/session/components/chat-sidebar-context-card";
+import { ChatSessionHeaderMenuItem } from "@/features/chat/features/session/components/session-header/chat-session-header-menu-item";
 
 type ChatSidebarSessionItemProps = {
   sessionKey: string;
@@ -44,6 +46,7 @@ type ChatSidebarSessionItemProps = {
   onSave: () => void | Promise<void>;
   onCancel: () => void;
   onTogglePinned: () => void;
+  onDelete: () => void;
 };
 
 type ChatSidebarSessionEditingViewProps = Pick<
@@ -139,6 +142,7 @@ function ChatSidebarSessionDisplayView({
   onSelect,
   onStartEditing,
   onTogglePinned,
+  onDelete,
 }: ChatSidebarSessionDisplayViewProps) {
   return (
     <div className="group/session relative">
@@ -262,7 +266,14 @@ function ChatSidebarSessionDisplayView({
           sessionKey={sessionKey}
           triggerSize="sm"
           triggerTone="strong"
-        />
+        >
+          <ChatSessionHeaderMenuItem
+            icon={Trash2}
+            label={t("chatDeleteSession")}
+            onClick={onDelete}
+            destructive
+          />
+        </ChatSessionMoreActionsMenu>
       </div>
     </div>
   );
@@ -293,6 +304,7 @@ export function ChatSidebarSessionItem({
   onSave,
   onCancel,
   onTogglePinned,
+  onDelete,
 }: ChatSidebarSessionItemProps) {
   return (
     <div
@@ -332,6 +344,7 @@ export function ChatSidebarSessionItem({
           projectName={projectName}
           onStartEditing={onStartEditing}
           onTogglePinned={onTogglePinned}
+          onDelete={onDelete}
         />
       )}
     </div>

package/src/features/chat/features/session/utils/chat-session-deletion.utils.ts

@@ -0,0 +1,25 @@
+import type { ChatThreadSnapshot } from "@/features/chat/stores/chat-thread.store";
+
+export function createDeletedChatThreadStatePatch(): Partial<ChatThreadSnapshot> {
+  return {
+    sessionKey: null,
+    sessionTypeLabel: null,
+    agentId: null,
+    sessionDisplayName: undefined,
+    draftProjectRoot: null,
+    sessionProjectName: null,
+    canDeleteSession: false,
+    parentSessionKey: null,
+    parentSessionLabel: null,
+    workspacePanelParentKey: null,
+    activeWorkspacePanelKind: null,
+    childSessionTabs: [],
+    activeChildSessionKey: null,
+    activeSideChatDraft: null,
+    workspaceFileTabs: [],
+    activeWorkspaceFileKey: null,
+    closedWorkspaceTabEntries: [],
+    workspaceNavigationHistory: [],
+    workspaceNavigationHistoryIndex: 0,
+  };
+}

package/src/features/chat/features/workspace/components/__tests__/chat-session-workspace-panel.test.tsx

@@ -163,6 +163,7 @@ describe("ChatSessionWorkspacePanel", () => {
 
     const panel = screen.getByTestId("chat-session-workspace-panel");
     expect(panel.className).not.toContain("absolute");
+    expect(panel.getAttribute("data-theme-surface")).toBe("workspace-panel");
 
     await user.click(
       screen.getByRole("button", { name: "Maximize workspace panel" }),

package/src/features/chat/features/workspace/components/chat-session-workspace-panel-content.tsx

@@ -363,6 +363,7 @@ export function ChatSessionWorkspacePanelContent({
       ) : null}
       <div
         data-testid="workspace-shared-explorer"
+        data-theme-surface="workspace-explorer"
         data-mode={projectFilesActive ? 'full' : explorerOverlay ? 'overlay' : 'side'}
         className={cn(
           'relative min-h-0 shrink-0 flex-col border-r border-gray-200/80 bg-white',

package/src/features/chat/features/workspace/components/chat-session-workspace-panel.tsx

@@ -187,6 +187,7 @@ export function ChatSessionWorkspacePanel({
   return (
     <ResizableRightPanel
       data-testid="chat-session-workspace-panel"
+      data-theme-surface="workspace-panel"
       className={cn(
         isOverlayPanel
           ? "bg-white"

package/src/features/chat/managers/__tests__/chat-thread-deletion.manager.test.ts

@@ -0,0 +1,125 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { appQueryClient } from "@/app-query-client";
+import { ChatThreadManager } from "@/features/chat/managers/chat-thread.manager";
+import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
+import { useChatThreadStore } from "@/features/chat/stores/chat-thread.store";
+import type * as SharedApi from "@/shared/lib/api";
+
+const { deleteNcpSessionMock, deleteSummaryMock, toast } = vi.hoisted(() => ({
+  deleteNcpSessionMock: vi.fn(),
+  deleteSummaryMock: vi.fn(),
+  toast: { success: vi.fn(), error: vi.fn() },
+}));
+
+vi.mock("@/shared/lib/api", async (importOriginal) => {
+  const actual = await importOriginal<typeof SharedApi>();
+  return {
+    ...actual,
+    deleteNcpSession: deleteNcpSessionMock,
+    deleteNcpSessionSummaryInQueryClient: deleteSummaryMock,
+  };
+});
+
+vi.mock("sonner", () => ({ toast }));
+
+function createUiManager() {
+  return {
+    confirm: vi.fn(async () => true),
+    goToChatRoot: vi.fn(),
+  } as unknown as ConstructorParameters<typeof ChatThreadManager>[0];
+}
+
+beforeEach(() => {
+  deleteNcpSessionMock.mockReset();
+  deleteNcpSessionMock.mockResolvedValue({
+    deleted: true,
+    sessionId: "parent-session-1",
+  });
+  deleteSummaryMock.mockReset();
+  toast.success.mockReset();
+  toast.error.mockReset();
+  useChatSessionListStore.setState({
+    snapshot: {
+      ...useChatSessionListStore.getInitialState().snapshot,
+      selectedSessionKey: "parent-session-1",
+    },
+  });
+  useChatThreadStore.setState({
+    snapshot: {
+      ...useChatThreadStore.getInitialState().snapshot,
+      sessionKey: "parent-session-1",
+      canDeleteSession: true,
+      childSessionTabs: [
+        {
+          sessionKey: "child-session-1",
+          parentSessionKey: "parent-session-1",
+          label: "Child Session 1",
+          agentId: "reviewer",
+        },
+      ],
+    },
+  });
+});
+
+describe("ChatThreadManager deletion", () => {
+  it("clears the current thread and confirms the deletion", async () => {
+    const uiManager = createUiManager();
+    const removeQueries = vi
+      .spyOn(appQueryClient, "removeQueries")
+      .mockImplementation(async () => undefined);
+    const manager = new ChatThreadManager(
+      uiManager,
+      {} as ConstructorParameters<typeof ChatThreadManager>[1],
+    );
+
+    await manager.deleteSession();
+
+    expect(useChatThreadStore.getState().snapshot.sessionKey).toBeNull();
+    expect(deleteSummaryMock).toHaveBeenCalledWith(
+      appQueryClient,
+      "parent-session-1",
+    );
+    expect(removeQueries).toHaveBeenCalledWith({
+      queryKey: ["ncp-session-messages", "parent-session-1"],
+    });
+    expect(uiManager.goToChatRoot).toHaveBeenCalledWith({ replace: true });
+    expect(toast.success).toHaveBeenCalledWith("Session deleted.");
+  });
+
+  it("preserves the current thread when deleting another session", async () => {
+    const uiManager = createUiManager();
+    const manager = new ChatThreadManager(
+      uiManager,
+      {} as ConstructorParameters<typeof ChatThreadManager>[1],
+    );
+
+    await manager.deleteSession("other-session-1");
+
+    expect(deleteNcpSessionMock).toHaveBeenCalledWith("other-session-1");
+    expect(useChatThreadStore.getState().snapshot.sessionKey).toBe(
+      "parent-session-1",
+    );
+    expect(uiManager.goToChatRoot).not.toHaveBeenCalled();
+  });
+
+  it("keeps the session visible and reports a deletion error", async () => {
+    deleteNcpSessionMock.mockRejectedValueOnce(
+      new Error("network unavailable"),
+    );
+    const uiManager = createUiManager();
+    const manager = new ChatThreadManager(
+      uiManager,
+      {} as ConstructorParameters<typeof ChatThreadManager>[1],
+    );
+
+    await manager.deleteSession();
+
+    expect(useChatThreadStore.getState().snapshot.sessionKey).toBe(
+      "parent-session-1",
+    );
+    expect(uiManager.goToChatRoot).not.toHaveBeenCalled();
+    expect(toast.error).toHaveBeenCalledWith(
+      "Could not delete session: network unavailable",
+    );
+  });
+});

package/src/features/chat/managers/__tests__/chat-thread.manager.test.ts

@@ -1,5 +1,4 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { appQueryClient } from '@/app-query-client';
 import { ChatThreadManager } from '@/features/chat/managers/chat-thread.manager';
 import { useChatSessionListStore } from '@/features/chat/stores/chat-session-list.store';
 import { useChatThreadStore } from '@/features/chat/stores/chat-thread.store';
@@ -841,39 +840,3 @@ describe('ChatThreadManager visible workspace selection', () => {
     expect(sessionListManager.markVisibleWorkspaceChildRead).toHaveBeenCalledWith(tab);
   });
 });
-
-describe('ChatThreadManager deletion', () => {
-  it('clears thread state while leaving route-derived selection to navigation', async () => {
-    const removeQueries = vi.spyOn(appQueryClient, 'removeQueries').mockImplementation(async () => undefined);
-    const uiManager = {
-      goToSession: vi.fn(),
-      goToChatRoot: vi.fn(),
-      goToProviders: vi.fn(),
-      confirm: vi.fn(async () => true),
-    } as unknown as ConstructorParameters<typeof ChatThreadManager>[0];
-    const sessionListManager = {} as ConstructorParameters<typeof ChatThreadManager>[1];
-    const manager = new ChatThreadManager(uiManager, sessionListManager);
-
-    await manager.deleteSession();
-
-    expect(useChatSessionListStore.getState().snapshot.selectedSessionKey).toBe('parent-session-1');
-    expect(useChatThreadStore.getState().snapshot).toMatchObject({
-      sessionKey: null,
-      canDeleteSession: false,
-      workspacePanelParentKey: null,
-      childSessionTabs: [],
-      activeChildSessionKey: null,
-      workspaceFileTabs: [],
-      activeWorkspaceFileKey: null,
-      workspaceNavigationHistory: [],
-      workspaceNavigationHistoryIndex: 0,
-    });
-    expect(deleteSummaryMock).toHaveBeenCalledWith(appQueryClient, 'parent-session-1');
-    expect(removeQueries).toHaveBeenCalledWith({
-      queryKey: ['ncp-session-messages', 'parent-session-1'],
-    });
-    expect(uiManager.goToChatRoot).toHaveBeenCalledWith({ replace: true });
-
-    removeQueries.mockRestore();
-  });
-});

package/src/features/chat/managers/chat-thread.manager.ts

@@ -1,5 +1,6 @@
 import { appQueryClient } from '@/app-query-client';
 import { deleteNcpSession as deleteNcpSessionApi, deleteNcpSessionSummaryInQueryClient } from '@/shared/lib/api';
+import { toast } from 'sonner';
 import type {
   ChatFileOpenActionViewModel,
   ChatUiShowContentRequest,
@@ -17,6 +18,7 @@ import type {
   ChatWorkspaceFileTab,
 } from '@/features/chat/stores/chat-thread.store';
 import { useChatThreadStore } from '@/features/chat/stores/chat-thread.store';
+import { createDeletedChatThreadStatePatch } from '@/features/chat/features/session/utils/chat-session-deletion.utils';
 import {
   normalizeChatWorkspaceExplorerWidth,
   normalizeChatWorkspacePanelWidth,
@@ -80,27 +82,7 @@ export class ChatThreadManager {
   };
 
   private clearDeletedSessionState = () => {
-    useChatThreadStore.getState().setSnapshot({
-      sessionKey: null,
-      sessionTypeLabel: null,
-      agentId: null,
-      sessionDisplayName: undefined,
-      draftProjectRoot: null,
-      sessionProjectName: null,
-      canDeleteSession: false,
-      parentSessionKey: null,
-      parentSessionLabel: null,
-      workspacePanelParentKey: null,
-      activeWorkspacePanelKind: null,
-      childSessionTabs: [],
-      activeChildSessionKey: null,
-      activeSideChatDraft: null,
-      workspaceFileTabs: [],
-      activeWorkspaceFileKey: null,
-      closedWorkspaceTabEntries: [],
-      workspaceNavigationHistory: [],
-      workspaceNavigationHistoryIndex: 0,
-    });
+    useChatThreadStore.getState().setSnapshot(createDeletedChatThreadStatePatch());
   };
 
   private resolveWorkspaceParentSessionKey = (): string | null => {
@@ -565,11 +547,12 @@ export class ChatThreadManager {
     this.uiManager.goToSession(resolvedParentSessionKey);
   };
 
-  deleteSession = async () => {
+  deleteSession = async (rawSessionKey?: string) => {
     const {
       snapshot: { selectedSessionKey },
     } = useChatSessionListStore.getState();
-    if (!selectedSessionKey) {
+    const sessionKey = rawSessionKey?.trim() || selectedSessionKey;
+    if (!sessionKey) {
       return;
     }
     const confirmed = await this.uiManager.confirm({
@@ -582,13 +565,19 @@ export class ChatThreadManager {
     }
     useChatThreadStore.getState().setSnapshot({ isDeletePending: true });
     try {
-      await deleteNcpSessionApi(selectedSessionKey);
-      deleteNcpSessionSummaryInQueryClient(appQueryClient, selectedSessionKey);
+      await deleteNcpSessionApi(sessionKey);
+      deleteNcpSessionSummaryInQueryClient(appQueryClient, sessionKey);
       appQueryClient.removeQueries({
-        queryKey: ['ncp-session-messages', selectedSessionKey],
+        queryKey: ['ncp-session-messages', sessionKey],
       });
-      this.clearDeletedSessionState();
-      this.uiManager.goToChatRoot({ replace: true });
+      toast.success(t('chatDeleteSessionSucceeded'));
+      if (sessionKey === selectedSessionKey) {
+        this.clearDeletedSessionState();
+        this.uiManager.goToChatRoot({ replace: true });
+      }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      toast.error(`${t('chatDeleteSessionFailed')}: ${message}`);
     } finally {
       useChatThreadStore.getState().setSnapshot({ isDeletePending: false });
     }

package/src/features/desktop-capabilities/components/desktop-authorization-dialog.test.tsx

@@ -0,0 +1,58 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { DesktopAuthorizationDialog } from "./desktop-authorization-dialog";
+import { useDesktopAuthorizationStore } from "../stores/desktop-authorization.store";
+
+const mocks = vi.hoisted(() => ({ grantAccess: vi.fn() }));
+
+vi.mock("../managers/desktop-capability.manager", () => ({
+  desktopCapabilityManager: {
+    grantAccess: mocks.grantAccess,
+  },
+}));
+
+describe("DesktopAuthorizationDialog", () => {
+  beforeEach(() => {
+    mocks.grantAccess.mockReset();
+    mocks.grantAccess.mockResolvedValue({});
+    useDesktopAuthorizationStore.getState().clear();
+  });
+
+  it("shows the trusted subject and grants only after explicit approval", async () => {
+    useDesktopAuthorizationStore.getState().present({
+      applicationId: "wechat",
+      request: {
+        subject: { type: "agent", id: "main" },
+        resource: {
+          type: "desktop.application",
+          target: { applicationId: "wechat", platform: "darwin", bundleId: "com.tencent.xinWeChat" },
+        },
+        access: ["ui.write"],
+        declarationFingerprint: "fingerprint",
+      },
+    });
+
+    render(<DesktopAuthorizationDialog />);
+    expect(screen.getByText("AI · main")).toBeTruthy();
+    expect(screen.getByText("wechat")).toBeTruthy();
+    expect(mocks.grantAccess).not.toHaveBeenCalled();
+
+    fireEvent.click(screen.getByRole("button", { name: "Allow" }));
+    await waitFor(() => expect(mocks.grantAccess).toHaveBeenCalledOnce());
+  });
+
+  it("explains the bounded pointer permission in user terms", () => {
+    useDesktopAuthorizationStore.getState().present({
+      applicationId: "wechat",
+      request: {
+        subject: { type: "agent", id: "main" },
+        resource: { type: "desktop.application", target: { applicationId: "wechat", platform: "darwin", bundleId: "com.tencent.xinWeChat" } },
+        access: ["input.pointer"],
+        declarationFingerprint: "fingerprint",
+      },
+    });
+    render(<DesktopAuthorizationDialog />);
+    expect(screen.getByText("Click inside the app window")).toBeTruthy();
+    expect(screen.getByText(/cannot use keys, scroll, drag, send, or confirm/i)).toBeTruthy();
+  });
+});