@nextclaw/ui 0.11.20 → 0.11.22

package/src/components/chat/session-header/chat-session-header-actions.tsx

@@ -0,0 +1,95 @@
+import { useState } from 'react';
+import { FolderOpen, MoreHorizontal, Trash2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { useChatSessionProject } from '@/components/chat/hooks/use-chat-session-project';
+import { ChatSessionHeaderMenuItem } from '@/components/chat/session-header/chat-session-header-menu-item';
+import { ChatSessionProjectDialog } from '@/components/chat/session-header/chat-session-project-dialog';
+import { t } from '@/lib/i18n';
+
+type ChatSessionHeaderActionsProps = {
+  sessionKey: string;
+  canDeleteSession: boolean;
+  isDeletePending: boolean;
+  projectRoot?: string | null;
+  onDeleteSession: () => void;
+};
+
+export function ChatSessionHeaderActions({
+  sessionKey,
+  canDeleteSession,
+  isDeletePending,
+  projectRoot,
+  onDeleteSession,
+}: ChatSessionHeaderActionsProps) {
+  const updateSessionProject = useChatSessionProject();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [isProjectPending, setIsProjectPending] = useState(false);
+  const isBusy = isDeletePending || isProjectPending;
+
+  const runProjectUpdate = async (nextProjectRoot: string | null) => {
+    const persistToServer = canDeleteSession;
+    setIsProjectPending(true);
+    try {
+      await updateSessionProject({
+        sessionKey,
+        projectRoot: nextProjectRoot,
+        persistToServer,
+      });
+      setIsDialogOpen(false);
+      setIsMenuOpen(false);
+    } finally {
+      setIsProjectPending(false);
+    }
+  };
+
+  return (
+    <>
+      <Popover open={isMenuOpen} onOpenChange={setIsMenuOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="rounded-lg shrink-0 text-gray-400 hover:text-gray-700"
+            aria-label={t('chatSessionMoreActions')}
+            disabled={isBusy}
+          >
+            <MoreHorizontal className="h-4 w-4" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent align="end" className="w-56 p-2">
+          <div className="space-y-1">
+            <ChatSessionHeaderMenuItem
+              icon={FolderOpen}
+              label={t('chatSessionSetProject')}
+              onClick={() => {
+                setIsMenuOpen(false);
+                setIsDialogOpen(true);
+              }}
+              disabled={isBusy}
+            />
+            <ChatSessionHeaderMenuItem
+              icon={Trash2}
+              label={t('chatDeleteSession')}
+              onClick={() => {
+                setIsMenuOpen(false);
+                onDeleteSession();
+              }}
+              disabled={!canDeleteSession || isBusy}
+              destructive
+            />
+          </div>
+        </PopoverContent>
+      </Popover>
+
+      <ChatSessionProjectDialog
+        open={isDialogOpen}
+        currentProjectRoot={projectRoot}
+        isSaving={isProjectPending}
+        onOpenChange={setIsDialogOpen}
+        onSave={runProjectUpdate}
+      />
+    </>
+  );
+}

package/src/components/chat/session-header/chat-session-header-menu-item.tsx

@@ -0,0 +1,35 @@
+import type { LucideIcon } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+type ChatSessionHeaderMenuItemProps = {
+  icon: LucideIcon;
+  label: string;
+  onClick: () => void;
+  disabled?: boolean;
+  destructive?: boolean;
+};
+
+export function ChatSessionHeaderMenuItem({
+  icon: Icon,
+  label,
+  onClick,
+  disabled = false,
+  destructive = false,
+}: ChatSessionHeaderMenuItemProps) {
+  return (
+    <button
+      type="button"
+      className={cn(
+        'flex w-full items-center gap-2 rounded-xl px-3 py-2 text-left text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50',
+        destructive
+          ? 'text-destructive hover:bg-destructive/10'
+          : 'text-gray-700 hover:bg-gray-100'
+      )}
+      onClick={onClick}
+      disabled={disabled}
+    >
+      <Icon className="h-4 w-4 shrink-0" />
+      <span>{label}</span>
+    </button>
+  );
+}

package/src/components/chat/session-header/chat-session-project-badge.test.tsx

@@ -0,0 +1,66 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { ChatSessionProjectBadge } from '@/components/chat/session-header/chat-session-project-badge';
+
+const mocks = vi.hoisted(() => ({
+  updateSessionProject: vi.fn(),
+}));
+
+vi.mock('@/components/chat/hooks/use-chat-session-project', () => ({
+  useChatSessionProject: () => mocks.updateSessionProject,
+}));
+
+vi.mock('@/components/chat/session-header/chat-session-project-dialog', () => ({
+  ChatSessionProjectDialog: () => null,
+}));
+
+describe('ChatSessionProjectBadge', () => {
+  beforeEach(() => {
+    mocks.updateSessionProject.mockReset();
+    mocks.updateSessionProject.mockResolvedValue(undefined);
+  });
+
+  it('shows project actions inside the badge popover', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <ChatSessionProjectBadge
+        sessionKey="session-1"
+        projectName="project-alpha"
+        projectRoot="/tmp/project-alpha"
+        persistToServer
+      />
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Set Project Directory' }));
+
+    expect(screen.getAllByText('Set Project Directory').length).toBeGreaterThan(0);
+    expect(screen.getByText('Clear Project Directory')).toBeTruthy();
+    expect(screen.getByText('/tmp/project-alpha')).toBeTruthy();
+  });
+
+  it('clears the current project from the badge popover', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <ChatSessionProjectBadge
+        sessionKey="session-1"
+        projectName="project-alpha"
+        projectRoot="/tmp/project-alpha"
+        persistToServer
+      />
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Set Project Directory' }));
+    await user.click(screen.getByText('Clear Project Directory'));
+
+    await waitFor(() => {
+      expect(mocks.updateSessionProject).toHaveBeenCalledWith({
+        sessionKey: 'session-1',
+        projectRoot: null,
+        persistToServer: true,
+      });
+    });
+  });
+});

package/src/components/chat/session-header/chat-session-project-badge.tsx

@@ -0,0 +1,102 @@
+import { useState } from 'react';
+import { ChevronDown, FolderOpen, FolderX, Pencil } from 'lucide-react';
+import { useChatSessionProject } from '@/components/chat/hooks/use-chat-session-project';
+import { ChatSessionHeaderMenuItem } from '@/components/chat/session-header/chat-session-header-menu-item';
+import { ChatSessionProjectDialog } from '@/components/chat/session-header/chat-session-project-dialog';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { t } from '@/lib/i18n';
+
+type ChatSessionProjectBadgeProps = {
+  sessionKey: string;
+  projectName: string;
+  projectRoot?: string | null;
+  persistToServer: boolean;
+};
+
+export function ChatSessionProjectBadge({
+  sessionKey,
+  projectName,
+  projectRoot,
+  persistToServer,
+}: ChatSessionProjectBadgeProps) {
+  const updateSessionProject = useChatSessionProject();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [isProjectPending, setIsProjectPending] = useState(false);
+
+  const runProjectUpdate = async (nextProjectRoot: string | null) => {
+    setIsProjectPending(true);
+    try {
+      await updateSessionProject({
+        sessionKey,
+        projectRoot: nextProjectRoot,
+        persistToServer,
+      });
+      setIsDialogOpen(false);
+      setIsMenuOpen(false);
+    } finally {
+      setIsProjectPending(false);
+    }
+  };
+
+  return (
+    <>
+      <Popover open={isMenuOpen} onOpenChange={setIsMenuOpen}>
+        <PopoverTrigger asChild>
+          <button
+            type="button"
+            title={projectRoot ?? undefined}
+            className="min-w-0 max-w-[320px] shrink rounded-full border border-emerald-200 bg-emerald-50 px-2 py-0.5 text-[11px] font-medium text-emerald-700 transition-colors hover:border-emerald-300 hover:bg-emerald-100 disabled:cursor-not-allowed disabled:opacity-60"
+            aria-label={t('chatSessionSetProject')}
+            disabled={isProjectPending}
+          >
+            <span className="flex min-w-0 items-center gap-1.5">
+              <FolderOpen className="h-3.5 w-3.5 shrink-0" />
+              <span className="truncate">{projectName}</span>
+              <ChevronDown className="h-3 w-3 shrink-0 opacity-70" />
+            </span>
+          </button>
+        </PopoverTrigger>
+        <PopoverContent align="start" className="w-72 p-2">
+          <div className="px-3 pb-2 pt-1">
+            <div className="text-[11px] font-medium uppercase tracking-wider text-emerald-700/80">
+              {projectName}
+            </div>
+            {projectRoot ? (
+              <div className="mt-1 break-all text-xs text-gray-500">
+                {projectRoot}
+              </div>
+            ) : null}
+          </div>
+          <div className="space-y-1">
+            <ChatSessionHeaderMenuItem
+              icon={Pencil}
+              label={t('chatSessionSetProject')}
+              onClick={() => {
+                setIsMenuOpen(false);
+                setIsDialogOpen(true);
+              }}
+              disabled={isProjectPending}
+            />
+            <ChatSessionHeaderMenuItem
+              icon={FolderX}
+              label={t('chatSessionClearProject')}
+              onClick={() => {
+                void runProjectUpdate(null);
+              }}
+              disabled={isProjectPending}
+            />
+          </div>
+        </PopoverContent>
+      </Popover>
+
+      <ChatSessionProjectDialog
+        open={isDialogOpen}
+        currentProjectRoot={projectRoot}
+        isSaving={isProjectPending}
+        onOpenChange={setIsDialogOpen}
+        onSave={runProjectUpdate}
+      />
+    </>
+  );
+}

package/src/components/chat/session-header/chat-session-project-dialog.tsx

@@ -0,0 +1,34 @@
+import { ServerPathPickerDialog } from '@/components/path-picker/server-path-picker-dialog';
+import { t } from '@/lib/i18n';
+
+type ChatSessionProjectDialogProps = {
+  open: boolean;
+  currentProjectRoot?: string | null;
+  isSaving: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSave: (projectRoot: string) => Promise<void> | void;
+};
+
+export function ChatSessionProjectDialog({
+  open,
+  currentProjectRoot,
+  isSaving,
+  onOpenChange,
+  onSave,
+}: ChatSessionProjectDialogProps) {
+  return (
+    <ServerPathPickerDialog
+      open={open}
+      currentPath={currentProjectRoot}
+      isSaving={isSaving}
+      onOpenChange={onOpenChange}
+      onConfirm={onSave}
+      title={t('chatSessionProjectDialogTitle')}
+      description={t('chatSessionProjectDialogDescription')}
+      pathLabel={t('chatSessionProjectPathLabel')}
+      pathPlaceholder={t('chatSessionProjectPathPlaceholder')}
+      confirmLabel={t('chatSessionSetProject')}
+      hint={t('chatSessionProjectUpdateHint')}
+    />
+  );
+}

package/src/components/chat/stores/chat-input.store.ts

@@ -1,8 +1,7 @@
 import { create } from 'zustand';
 import type { ChatComposerNode } from '@nextclaw/agent-chat-ui';
 import type { NcpDraftAttachment } from '@nextclaw/ncp-react';
-import type { MarketplaceInstalledRecord } from '@/api/types';
-import type { ThinkingLevel } from '@/api/types';
+import type { SessionSkillEntryView, ThinkingLevel } from '@/api/types';
 import type { ChatModelOption } from '@/components/chat/chat-input.types';
 import { createInitialChatComposerNodes } from '@/components/chat/chat-composer-state';
 
@@ -12,6 +11,8 @@ export type ChatInputSnapshot = {
   attachments: NcpDraftAttachment[];
   draft: string;
   pendingSessionType: string;
+  pendingProjectRoot: string | null;
+  pendingProjectRootSessionKey: string | null;
   defaultSessionType: string;
   canStopGeneration: boolean;
   stopDisabledReason: string | null;
@@ -39,7 +40,7 @@ export type ChatInputSnapshot = {
   stopReason?: string;
   canEditSessionType: boolean;
   sessionTypeUnavailable: boolean;
-  skillRecords: MarketplaceInstalledRecord[];
+  skillRecords: SessionSkillEntryView[];
   isSkillsLoading: boolean;
   selectedSkills: string[];
 };
@@ -55,6 +56,8 @@ const initialSnapshot: ChatInputSnapshot = {
   attachments: [],
   draft: '',
   pendingSessionType: 'native',
+  pendingProjectRoot: null,
+  pendingProjectRootSessionKey: null,
   defaultSessionType: 'native',
   canStopGeneration: false,
   stopDisabledReason: null,

package/src/components/chat/stores/chat-thread.store.ts

@@ -9,8 +9,10 @@ export type ChatThreadSnapshot = {
   sessionTypeUnavailable: boolean;
   sessionTypeUnavailableMessage?: string | null;
   sessionTypeLabel?: string | null;
-  selectedSessionKey: string | null;
+  sessionKey: string | null;
   sessionDisplayName?: string;
+  sessionProjectRoot?: string | null;
+  sessionProjectName?: string | null;
   canDeleteSession: boolean;
   isDeletePending: boolean;
   threadRef: MutableRefObject<HTMLDivElement | null> | null;
@@ -31,8 +33,10 @@ const initialSnapshot: ChatThreadSnapshot = {
   sessionTypeUnavailable: false,
   sessionTypeUnavailableMessage: null,
   sessionTypeLabel: null,
-  selectedSessionKey: null,
+  sessionKey: null,
   sessionDisplayName: undefined,
+  sessionProjectRoot: null,
+  sessionProjectName: null,
   canDeleteSession: false,
   isDeletePending: false,
   threadRef: null,

package/src/components/chat/useNcpAgentRuntime.test.tsx

@@ -0,0 +1,90 @@
+import { act, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { NcpEventType, type NcpEndpointEvent } from "@nextclaw/ncp";
+import { useNcpAgentRuntime } from "../../../../ncp-packages/nextclaw-ncp-react/src/hooks/use-ncp-agent-runtime.ts";
+
+function createEvent(type: NcpEventType, delta: string): NcpEndpointEvent {
+  return {
+    type,
+    payload: {
+      sessionId: "session-1",
+      messageId: "assistant-1",
+      toolCallId: "tool-1",
+      delta,
+    },
+  } as NcpEndpointEvent;
+}
+
+describe("useNcpAgentRuntime", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("batches streamed endpoint events before dispatching them to the manager", async () => {
+    let subscriber: ((event: NcpEndpointEvent) => void) | null = null;
+    const snapshot = {
+      messages: [],
+      streamingMessage: null,
+      error: null,
+      activeRun: null,
+    };
+    const client = {
+      subscribe: vi.fn((callback: (event: NcpEndpointEvent) => void) => {
+        subscriber = callback;
+        return () => {
+          subscriber = null;
+        };
+      }),
+      stop: vi.fn().mockResolvedValue(undefined),
+      send: vi.fn().mockResolvedValue(undefined),
+      abort: vi.fn().mockResolvedValue(undefined),
+      stream: vi.fn().mockResolvedValue(undefined),
+    };
+    const manager = {
+      getSnapshot: vi.fn(() => snapshot),
+      subscribe: vi.fn(() => () => {}),
+      dispatch: vi.fn().mockResolvedValue(undefined),
+      dispatchBatch: vi.fn().mockResolvedValue(undefined),
+    };
+
+    renderHook(() =>
+      useNcpAgentRuntime({
+        sessionId: "session-1",
+        client: client as never,
+        manager: manager as never,
+      }),
+    );
+
+    expect(subscriber).not.toBeNull();
+
+    act(() => {
+      subscriber?.(createEvent(NcpEventType.MessageToolCallArgsDelta, '{"path":"src/app.ts",'));
+      subscriber?.(
+        createEvent(
+          NcpEventType.MessageToolCallArgsDelta,
+          '"content":"console.log(1);"}',
+        ),
+      );
+    });
+
+    expect(manager.dispatchBatch).not.toHaveBeenCalled();
+
+    await act(async () => {
+      vi.advanceTimersByTime(16);
+      await Promise.resolve();
+    });
+
+    expect(manager.dispatchBatch).toHaveBeenCalledTimes(1);
+    expect(manager.dispatchBatch).toHaveBeenCalledWith([
+      createEvent(NcpEventType.MessageToolCallArgsDelta, '{"path":"src/app.ts",'),
+      createEvent(
+        NcpEventType.MessageToolCallArgsDelta,
+        '"content":"console.log(1);"}',
+      ),
+    ]);
+  });
+});

package/src/components/path-picker/server-path-picker-dialog.test.tsx

@@ -0,0 +1,92 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ServerPathPickerDialog } from '@/components/path-picker/server-path-picker-dialog';
+import { setLanguage } from '@/lib/i18n';
+
+const mocks = vi.hoisted(() => ({
+  useServerPathBrowse: vi.fn(),
+  refetch: vi.fn(),
+}));
+
+vi.mock('@/hooks/server-path/use-server-path-browse', () => ({
+  useServerPathBrowse: mocks.useServerPathBrowse,
+}));
+
+describe('ServerPathPickerDialog', () => {
+  beforeEach(() => {
+    setLanguage('zh');
+    mocks.refetch.mockReset();
+    mocks.useServerPathBrowse.mockReturnValue({
+      data: {
+        currentPath: '/workspace',
+        homePath: '/Users/peiwang',
+        parentPath: '/',
+        breadcrumbs: [
+          { label: 'workspace', path: '/workspace' },
+        ],
+        entries: [
+          { name: 'playground', path: '/workspace/playground' },
+          { name: 'nextbot', path: '/workspace/nextbot' },
+        ],
+      },
+      isLoading: false,
+      error: null,
+      refetch: mocks.refetch,
+    });
+  });
+
+  it('filters entries inside the current directory', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <ServerPathPickerDialog
+        open
+        currentPath="/workspace"
+        isSaving={false}
+        onOpenChange={() => {}}
+        onConfirm={() => {}}
+        title="选择目录"
+        description="选择一个目录"
+        pathLabel="目录"
+        confirmLabel="确定"
+      />
+    );
+
+    expect(screen.getByText('playground')).toBeTruthy();
+    expect(screen.getByText('nextbot')).toBeTruthy();
+
+    await user.type(screen.getByPlaceholderText('搜索当前目录'), 'play');
+
+    expect(screen.getByText('playground')).toBeTruthy();
+    expect(screen.queryByText('nextbot')).toBeNull();
+  });
+
+  it('shows the empty-search hint and keeps the list region scroll-contained', async () => {
+    const user = userEvent.setup();
+    render(
+      <ServerPathPickerDialog
+        open
+        currentPath="/workspace"
+        isSaving={false}
+        onOpenChange={() => {}}
+        onConfirm={() => {}}
+        title="选择目录"
+        description="选择一个目录"
+        pathLabel="目录"
+        confirmLabel="确定"
+      />
+    );
+
+    await user.type(screen.getByPlaceholderText('搜索当前目录'), 'missing');
+
+    expect(screen.getByText('当前目录下没有匹配结果。')).toBeTruthy();
+
+    const dialog = screen.getByRole('dialog');
+    expect(dialog.className).toContain('overflow-hidden');
+    expect(dialog.className).toContain('sm:h-[42rem]');
+
+    const scrollArea = screen.getByText('当前目录下没有匹配结果。').closest('.overflow-auto');
+    expect(scrollArea?.className).toContain('flex-1');
+    expect(scrollArea?.className).toContain('min-h-0');
+  });
+});