@nextclaw/ui 0.15.12 → 0.15.13

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

@@ -16,8 +16,12 @@ import { useChatSessionListStore } from "@/features/chat/stores/chat-session-lis
 import { useChatQueryStore } from "@/features/chat/stores/ncp-chat-query.store";
 import { useSystemStatus } from "@/features/system-status";
 import { useAgents } from "@/shared/hooks/use-agents";
-import { useCreateProject, useProjects } from "@/shared/hooks/use-projects";
-import type { ProjectCreateRequest } from "@/shared/lib/api";
+import {
+  useAddExistingProject,
+  useCreateProject,
+  useProjects,
+} from "@/shared/hooks/use-projects";
+import type { ProjectAddExistingRequest, ProjectCreateRequest } from "@/shared/lib/api";
 import { normalizeSessionProjectRootValue } from "@/shared/lib/session-project";
 import { cn } from "@/shared/lib/utils";
 import { LANGUAGE_OPTIONS, t, type I18nLanguage } from "@/shared/lib/i18n";
@@ -45,7 +49,7 @@ import {
 import { useChatNewSessionTypePreference } from "@/features/chat/features/session-type/hooks/use-chat-new-session-type-preference";
 import { useViewportLayoutStore } from "@/app/stores/viewport-layout.store";
 import { SIDEBAR_RAIL_WIDTH_CLASS } from "@/app/components/layout/sidebar-rail.styles";
-import { ChatProjectCreateDialog } from "@/features/chat/features/project/components/chat-project-create-dialog";
+import { ChatProjectAddDialog } from "@/features/chat/features/project/components/chat-project-add-dialog";
 
 type ChatSidebarVariant = "desktop" | "mobile";
 
@@ -98,7 +102,7 @@ export function ChatSidebar({
     (state) => state.isSidebarCollapsed,
   );
   const [isCreateMenuOpen, setIsCreateMenuOpen] = useState(false);
-  const [isProjectCreateOpen, setIsProjectCreateOpen] = useState(false);
+  const [isProjectAddOpen, setIsProjectAddOpen] = useState(false);
   const [isUtilityMenuOpen, setIsUtilityMenuOpen] = useState(false);
   const listSnapshot = useChatSessionListStore((state) => state.snapshot);
   const sessionTypesData = useChatQueryStore(
@@ -111,6 +115,7 @@ export function ChatSidebar({
   const agentsQuery = useAgents();
   const projectsQuery = useProjects();
   const projectCreateMutation = useCreateProject();
+  const projectAddExistingMutation = useAddExistingProject();
   const { isLoading, items } = useNcpSessionListView();
   const { language, setLanguage } = useI18n();
   const { theme, setTheme } = useTheme();
@@ -246,13 +251,20 @@ export function ChatSidebar({
       sessionType,
     });
   };
-  const openProjectCreate = () => {
+  const openProjectAdd = () => {
     projectCreateMutation.reset();
-    setIsProjectCreateOpen(true);
+    projectAddExistingMutation.reset();
+    setIsProjectAddOpen(true);
   };
   const createProjectFromSidebar = async (input: ProjectCreateRequest): Promise<void> => {
     await projectCreateMutation.mutateAsync(input);
-    setIsProjectCreateOpen(false);
+    setIsProjectAddOpen(false);
+  };
+  const addExistingProjectFromSidebar = async (
+    input: ProjectAddExistingRequest,
+  ): Promise<void> => {
+    await projectAddExistingMutation.mutateAsync(input);
+    setIsProjectAddOpen(false);
   };
 
   return (
@@ -324,7 +336,7 @@ export function ChatSidebar({
         isCollapsed={shouldCollapse}
         isLoading={isLoading}
         isProjectFirstView={isProjectFirstView}
-        onCreateProject={openProjectCreate}
+        onAddProject={openProjectAdd}
         onSelectMode={presenter.chatSessionListManager.setListMode}
         projectGroups={projectGroups}
         renderSessionItem={renderSessionItem}
@@ -354,16 +366,19 @@ export function ChatSidebar({
         />
       ) : null}
 
-      <ChatProjectCreateDialog
-        open={isProjectCreateOpen}
+      <ChatProjectAddDialog
+        open={isProjectAddOpen}
         defaultWorkspacePath={normalizeSessionProjectRootValue(
           config?.agents.defaults.workspace,
         )}
         templates={projectsQuery.data?.templates ?? []}
         isCreating={projectCreateMutation.isPending}
-        errorMessage={projectCreateMutation.error?.message}
-        onOpenChange={setIsProjectCreateOpen}
+        isAddingExisting={projectAddExistingMutation.isPending}
+        createErrorMessage={projectCreateMutation.error?.message}
+        addExistingErrorMessage={projectAddExistingMutation.error?.message}
+        onOpenChange={setIsProjectAddOpen}
         onCreate={createProjectFromSidebar}
+        onAddExisting={addExistingProjectFromSidebar}
       />
     </aside>
   );

package/src/features/chat/features/conversation/components/session-conversation-input.tsx

@@ -49,6 +49,7 @@ import {
 } from '@/features/chat/managers/chat-recent-skills.manager';
 
 import { useSessionConversationInputAttachments } from '@/features/chat/features/conversation/hooks/use-session-conversation-input-attachments';
+import { useSessionConversationSlashCommands } from '@/features/chat/features/conversation/hooks/use-session-conversation-slash-commands';
 import { ChatConversationTrack } from '@/features/chat/components/conversation/chat-conversation-track';
 import { useChatMessageLayoutStore } from '@/features/chat/stores/chat-message-layout.store';
 import type { useSessionConversationInputQuery } from '@/features/chat/features/conversation/hooks/use-session-conversation-input-query';
@@ -222,26 +223,10 @@ export const SessionConversationInput = memo(function SessionConversationInput(p
     skillGroupLabels: labels.skillGroupLabels,
     skillScopeLabels: labels.skillScopeLabels,
   });
-  const slashCommands = useMemo(() => {
-    const parentSessionKey = inputQuery.selectedSessionKey?.trim();
-    if (!parentSessionKey) {
-      return [];
-    }
-    return [
-      {
-        key: 'side-chat',
-        title: t('chatSlashCommandSideChatTitle', language),
-        description: t('chatSlashCommandSideChatDescription', language),
-        detailLines: [t('chatSlashCommandSideChatDetail', language)],
-        keywords: ['side', 'chat', 'child', 'branch', 'new'],
-        onSelect: () => presenter.chatThreadManager.openSideChatDraft(parentSessionKey),
-      },
-    ];
-  }, [
-    inputQuery.selectedSessionKey,
+  const slashCommands = useSessionConversationSlashCommands({
     language,
-    presenter.chatThreadManager,
-  ]);
+    selectedSessionKey: inputQuery.selectedSessionKey,
+  });
   const handleSlashPanelAppSelect = useCallback(
     (appId: string) =>
       void presenter.chatUiManager.showContent({

package/src/features/chat/features/conversation/hooks/__tests__/use-session-conversation-slash-commands.test.tsx

@@ -0,0 +1,79 @@
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { toast } from 'sonner';
+import { compactNcpSessionContext } from '@/shared/lib/api';
+import { useSessionConversationSlashCommands } from '@/features/chat/features/conversation/hooks/use-session-conversation-slash-commands';
+
+const mocks = vi.hoisted(() => ({
+  compactNcpSessionContext: vi.fn(),
+  openSideChatDraft: vi.fn(),
+}));
+
+vi.mock('sonner', () => ({
+  toast: { error: vi.fn(), success: vi.fn() },
+}));
+
+vi.mock('@/shared/lib/api', () => ({
+  compactNcpSessionContext: mocks.compactNcpSessionContext,
+}));
+
+vi.mock('@/features/chat/components/providers/chat-presenter.provider', () => ({
+  usePresenter: () => ({
+    chatThreadManager: { openSideChatDraft: mocks.openSideChatDraft },
+  }),
+}));
+
+describe('useSessionConversationSlashCommands', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mocks.compactNcpSessionContext.mockResolvedValue({
+      compacted: true,
+      sessionId: 'session-1',
+    });
+  });
+
+  it('exposes the runtime compaction command for the selected session', async () => {
+    const { result } = renderHook(() => useSessionConversationSlashCommands({
+      language: 'en',
+      selectedSessionKey: ' session-1 ',
+    }));
+    const command = result.current.find((entry) => entry.key === 'compact-context');
+
+    act(() => command?.onSelect());
+
+    await waitFor(() => expect(compactNcpSessionContext).toHaveBeenCalledWith('session-1'));
+    expect(toast.success).toHaveBeenCalledOnce();
+  });
+
+  it('reports runtime errors and suppresses duplicate in-flight requests', async () => {
+    let rejectRequest!: (error: Error) => void;
+    mocks.compactNcpSessionContext.mockReturnValue(new Promise((_resolve, reject) => {
+      rejectRequest = reject;
+    }));
+    const { result } = renderHook(() => useSessionConversationSlashCommands({
+      language: 'en',
+      selectedSessionKey: 'session-1',
+    }));
+    const command = result.current.find((entry) => entry.key === 'compact-context');
+
+    act(() => {
+      command?.onSelect();
+      command?.onSelect();
+    });
+    expect(compactNcpSessionContext).toHaveBeenCalledOnce();
+    rejectRequest(new Error('session is busy'));
+
+    await waitFor(() => expect(toast.error).toHaveBeenCalledWith(
+      expect.stringContaining('session is busy'),
+    ));
+  });
+
+  it('does not expose session commands before a session exists', () => {
+    const { result } = renderHook(() => useSessionConversationSlashCommands({
+      language: 'en',
+      selectedSessionKey: null,
+    }));
+
+    expect(result.current).toEqual([]);
+  });
+});

package/src/features/chat/features/conversation/hooks/use-session-conversation-slash-commands.ts

@@ -0,0 +1,55 @@
+import { useCallback, useMemo, useRef } from 'react';
+import { toast } from 'sonner';
+import { compactNcpSessionContext } from '@/shared/lib/api';
+import { t, type I18nLanguage } from '@/shared/lib/i18n';
+import { usePresenter } from '@/features/chat/components/providers/chat-presenter.provider';
+import type { ChatSlashCommandDescriptor } from '@/features/chat/features/input/input-surface-plugins/slash-command-plugin.utils';
+
+export function useSessionConversationSlashCommands(params: {
+  language: I18nLanguage;
+  selectedSessionKey?: string | null;
+}): readonly ChatSlashCommandDescriptor[] {
+  const { language, selectedSessionKey } = params;
+  const presenter = usePresenter();
+  const compactingSessionIdsRef = useRef(new Set<string>());
+  const compactContext = useCallback(async (sessionId: string) => {
+    if (compactingSessionIdsRef.current.has(sessionId)) {
+      return;
+    }
+    compactingSessionIdsRef.current.add(sessionId);
+    try {
+      await compactNcpSessionContext(sessionId);
+      toast.success(t('chatSlashCommandCompactContextSuccess', language));
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      toast.error(`${t('chatSlashCommandCompactContextFailed', language)}: ${message}`);
+    } finally {
+      compactingSessionIdsRef.current.delete(sessionId);
+    }
+  }, [language]);
+
+  return useMemo(() => {
+    const sessionId = selectedSessionKey?.trim();
+    if (!sessionId) {
+      return [];
+    }
+    return [
+      {
+        key: 'side-chat',
+        title: t('chatSlashCommandSideChatTitle', language),
+        description: t('chatSlashCommandSideChatDescription', language),
+        detailLines: [t('chatSlashCommandSideChatDetail', language)],
+        keywords: ['side', 'chat', 'child', 'branch', 'new'],
+        onSelect: () => presenter.chatThreadManager.openSideChatDraft(sessionId),
+      },
+      {
+        key: 'compact-context',
+        title: t('chatSlashCommandCompactContextTitle', language),
+        description: t('chatSlashCommandCompactContextDescription', language),
+        detailLines: [t('chatSlashCommandCompactContextDetail', language)],
+        keywords: ['compact', 'compress', 'context', 'summary', '压缩', '上下文'],
+        onSelect: () => void compactContext(sessionId),
+      },
+    ];
+  }, [compactContext, language, presenter.chatThreadManager, selectedSessionKey]);
+}

package/src/features/chat/features/message/components/__tests__/chat-inline-panel-app-card.test.tsx

@@ -126,6 +126,34 @@ it("renders panel apps through the shared adaptive inline surface", () => {
   );
 });
 
+it("renders and expands a panel app from an explicit external path", () => {
+  render(
+    <ChatInlinePanelAppCard
+      panelApp={{
+        appId: "weather-card",
+        path: "/tmp/weather-card.panel",
+        title: "External Weather",
+      }}
+    />,
+  );
+
+  expect(screen.getByTitle("External Weather").getAttribute("src")).toBe(
+    "/api/panel-apps/weather-card/content?path=%2Ftmp%2Fweather-card.panel&nextclawDisplayMode=card&nextclawPlacement=inline",
+  );
+
+  fireEvent.click(screen.getByLabelText("chatPanelCardExpand"));
+
+  expect(mocks.openTarget).not.toHaveBeenCalled();
+  expect(mocks.open).toHaveBeenCalledWith(
+    "/api/panel-apps/weather-card/content?path=%2Ftmp%2Fweather-card.panel",
+    {
+      dedupeKey: "panel-app:/tmp/weather-card.panel",
+      kind: "panel-app",
+      title: "External Weather",
+    },
+  );
+});
+
 it("ignores inline height messages from a different window", () => {
   const { container } = render(
     <ChatInlinePanelAppCard

package/src/features/chat/features/message/components/chat-inline-panel-app-card.tsx

@@ -22,7 +22,7 @@ import { t } from "@/shared/lib/i18n";
 
 type ChatInlinePanelAppDescriptor = Pick<
   ChatPanelAppCardViewModel,
-  "appId" | "title"
+  "appId" | "path" | "title"
 >;
 
 export function ChatInlinePanelAppCard({
@@ -39,17 +39,19 @@ export function ChatInlinePanelAppCard({
   const panelApps = usePanelApps();
   const entry = useMemo(
     () =>
-      findPanelAppEntryByDisplayId(
+      panelApp.path ? undefined : findPanelAppEntryByDisplayId(
         panelApps.data?.entries ?? [],
         panelApp.appId,
       ),
-    [panelApp.appId, panelApps.data?.entries],
+    [panelApp.appId, panelApp.path, panelApps.data?.entries],
   );
   const target = entry ? createPanelAppRightPanelResourceTarget(entry) : null;
   const title = panelApp.title ?? target?.title ?? panelApp.appId;
-  const url = panelApps.isLoading
-    ? ""
-    : (target?.url ?? createFallbackPanelAppContentPath(panelApp.appId));
+  const url = panelApp.path
+    ? createFallbackPanelAppContentPath(panelApp.appId, panelApp.path)
+    : panelApps.isLoading
+      ? ""
+      : (target?.url ?? createFallbackPanelAppContentPath(panelApp.appId));
   const cardUrl = useMemo(
     () => (url ? createInlinePanelAppCardUrl(url) : ""),
     [url],
@@ -58,10 +60,11 @@ export function ChatInlinePanelAppCard({
     () =>
       createInlinePanelAppTab({
         appId: entry?.id ?? panelApp.appId,
+        path: panelApp.path,
         title,
         url,
       }),
-    [entry?.id, panelApp.appId, title, url],
+    [entry?.id, panelApp.appId, panelApp.path, title, url],
   );
   const iframeInstanceId = `${tab.id}:${tab.navVersion}:${iframeId}`;
   const openExpanded = () => {

package/src/features/chat/features/message/components/chat-message-list.container.tsx

@@ -144,6 +144,7 @@ function renderChatInlineDisplay(display: ChatInlineDisplayViewModel) {
     <ChatInlinePanelAppCard
       panelApp={{
         appId: display.target.payload.appId,
+        path: display.target.payload.path,
         title: display.title,
       }}
     />

package/src/features/chat/features/message/utils/__tests__/chat-message-show-content-tool-card.utils.test.ts

@@ -149,6 +149,7 @@ describe("buildShowContentToolCard", () => {
               type: "panel_app",
               payload: {
                 appId: "reader",
+                path: "/tmp/reader.panel",
               },
             },
             title: "Reader",
@@ -164,6 +165,7 @@ describe("buildShowContentToolCard", () => {
     expect(card).toMatchObject({
       panelApp: {
         appId: "reader",
+        path: "/tmp/reader.panel",
         title: "Reader",
         action: {
           kind: "show-content",
@@ -173,6 +175,7 @@ describe("buildShowContentToolCard", () => {
               type: "panel_app",
               payload: {
                 appId: "reader",
+                path: "/tmp/reader.panel",
               },
             },
             title: "Reader",

package/src/features/chat/features/message/utils/chat-inline-panel-app-card.utils.ts

@@ -1,12 +1,13 @@
 import {
+  createPanelAppContentPath,
   createPanelAppResourceUri,
   RIGHT_PANEL_PANEL_APP_TAB_KIND,
 } from "@/features/right-panel-resources";
 import { PANEL_APP_INLINE_HOST_CONTRACT } from "@nextclaw/shared";
 import type { DocBrowserTab } from "@/shared/components/doc-browser/doc-browser-context";
 
-export function createFallbackPanelAppContentPath(appId: string): string {
-  return `/api/panel-apps/${encodeURIComponent(appId)}/content`;
+export function createFallbackPanelAppContentPath(appId: string, sourcePath?: string): string {
+  return createPanelAppContentPath(appId, sourcePath);
 }
 
 export function createInlinePanelAppCardUrl(url: string): string {
@@ -35,19 +36,20 @@ export function readInlinePanelAppContentHeight(value: unknown): number | null {
 
 export function createInlinePanelAppTab(params: {
   appId: string;
+  path?: string;
   title: string;
   url: string;
 }): DocBrowserTab {
-  const { appId, title, url } = params;
+  const { appId, path, title, url } = params;
   return {
     currentUrl: url,
-    dedupeKey: `panel-app:${appId}`,
+    dedupeKey: `panel-app:${path ?? appId}`,
     history: [url],
     historyIndex: 0,
-    id: `inline-panel-app:${appId}`,
+    id: `inline-panel-app:${path ?? appId}`,
     kind: RIGHT_PANEL_PANEL_APP_TAB_KIND,
     navVersion: 0,
-    resourceUri: createPanelAppResourceUri(appId),
+    resourceUri: createPanelAppResourceUri(appId, path),
     title,
   };
 }

package/src/features/chat/features/message/utils/chat-message-show-content-tool-card.utils.ts

@@ -121,6 +121,7 @@ function readShowContentRequest(value: unknown): ChatUiShowContentRequest | null
       type: "panel_app",
       payload: {
         appId,
+        path: readOptionalString(payload.path),
       },
     },
     title,
@@ -178,6 +179,7 @@ export function buildShowContentToolCard(params: {
   const panelApp = request.target.type === "panel_app" && request.placement === "inline"
     ? {
         appId: request.target.payload.appId,
+        path: request.target.payload.path,
         title: request.title,
         action: showContentAction,
       }

package/src/features/chat/features/project/components/__tests__/chat-project-add-dialog.test.tsx

@@ -0,0 +1,116 @@
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import type { ComponentProps } from 'react';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { ChatProjectAddDialog } from '@/features/chat/features/project/components/chat-project-add-dialog';
+import { setLanguage } from '@/shared/lib/i18n';
+
+const pathPickerSpy = vi.fn();
+
+vi.mock('@/shared/components/path-picker/server-path-picker-dialog', () => ({
+  ServerPathPickerDialog: (props: unknown) => pathPickerSpy(props),
+}));
+
+function renderDialog(overrides: Partial<ComponentProps<typeof ChatProjectAddDialog>> = {}) {
+  const onCreate = vi.fn(async () => undefined);
+  const onAddExisting = vi.fn(async () => undefined);
+  render(
+    <ChatProjectAddDialog
+      open
+      defaultWorkspacePath="/workspace"
+      templates={[
+        { id: 'empty', name: 'Empty', description: 'Empty project' },
+        {
+          id: 'knowledge-base',
+          name: 'Knowledge base',
+          description: 'Knowledge base project',
+        },
+      ]}
+      isCreating={false}
+      isAddingExisting={false}
+      onOpenChange={() => {}}
+      onCreate={onCreate}
+      onAddExisting={onAddExisting}
+      {...overrides}
+    />,
+  );
+  return { onCreate, onAddExisting };
+}
+
+describe('ChatProjectAddDialog', () => {
+  beforeEach(() => {
+    setLanguage('zh');
+    pathPickerSpy.mockClear();
+  });
+
+  it('creates a new project with an optional project directory and template', async () => {
+    const user = userEvent.setup();
+    const { onCreate, onAddExisting } = renderDialog();
+
+    expect(screen.getByRole('heading', { name: '添加项目' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: '新建项目' }).getAttribute('aria-pressed')).toBe(
+      'true',
+    );
+    await user.type(screen.getByLabelText('项目名称'), '个人知识库');
+    fireEvent.change(document.querySelector('select')!, {
+      target: { value: 'knowledge-base' },
+    });
+    await user.click(screen.getByRole('button', { name: '浏览' }));
+    expect(pathPickerSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        open: true,
+        allowCreateDirectory: true,
+        currentPath: '',
+        defaultWorkspacePath: '/workspace',
+        title: '选择或新建项目目录',
+      }),
+    );
+    const pickerProps = pathPickerSpy.mock.lastCall?.[0] as {
+      onConfirm: (path: string) => void;
+    };
+    act(() => pickerProps.onConfirm('/srv/knowledge'));
+    expect((screen.getByLabelText('项目目录（可选）') as HTMLInputElement).value).toBe(
+      '/srv/knowledge',
+    );
+    await user.click(screen.getByRole('button', { name: '创建项目' }));
+
+    await waitFor(() => {
+      expect(onCreate).toHaveBeenCalledWith({
+        name: '个人知识库',
+        rootPath: '/srv/knowledge',
+        template: 'knowledge-base',
+      });
+    });
+    expect(onAddExisting).not.toHaveBeenCalled();
+  });
+
+  it('adds an existing directory without exposing project initialization', async () => {
+    const user = userEvent.setup();
+    const { onCreate, onAddExisting } = renderDialog();
+
+    await user.click(screen.getByRole('button', { name: '添加已有目录' }));
+    expect(screen.queryByLabelText('项目名称')).toBeNull();
+    expect(screen.queryByLabelText('项目模板')).toBeNull();
+    expect(screen.getByText(
+      '选择服务端机器上的已有目录。项目名称取目录名，不会修改或初始化目录内容。',
+    )).toBeTruthy();
+    await user.click(screen.getByRole('button', { name: '浏览' }));
+    expect(pathPickerSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        open: true,
+        allowCreateDirectory: false,
+        title: '选择已有项目目录',
+      }),
+    );
+    const pickerProps = pathPickerSpy.mock.lastCall?.[0] as {
+      onConfirm: (path: string) => void;
+    };
+    act(() => pickerProps.onConfirm('/srv/existing-project'));
+    await user.click(screen.getByRole('button', { name: '添加到项目列表' }));
+
+    await waitFor(() => {
+      expect(onAddExisting).toHaveBeenCalledWith({ rootPath: '/srv/existing-project' });
+    });
+    expect(onCreate).not.toHaveBeenCalled();
+  });
+});