@nextclaw/ui 0.11.21 → 0.11.23

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;
@@ -18,6 +20,11 @@ export type ChatThreadSnapshot = {
   messages: readonly NcpMessage[];
   isSending: boolean;
   isAwaitingAssistantOutput: boolean;
+  parentSessionKey?: string | null;
+  parentSessionLabel?: string | null;
+  childSessionDetailSessionKey?: string | null;
+  childSessionDetailParentSessionKey?: string | null;
+  childSessionDetailLabel?: string | null;
 };
 
 type ChatThreadStore = {
@@ -31,15 +38,22 @@ 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,
   isHistoryLoading: false,
   messages: [],
   isSending: false,
-  isAwaitingAssistantOutput: false
+  isAwaitingAssistantOutput: false,
+  parentSessionKey: null,
+  parentSessionLabel: null,
+  childSessionDetailSessionKey: null,
+  childSessionDetailParentSessionKey: null,
+  childSessionDetailLabel: null,
 };
 
 export const useChatThreadStore = create<ChatThreadStore>((set) => ({

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

@@ -1,18 +1,19 @@
-import { renderHook, waitFor } from '@testing-library/react';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { useHydratedNcpAgent } from '../../../../ncp-packages/nextclaw-ncp-react/src/hooks/use-hydrated-ncp-agent.ts';
+import { renderHook, waitFor } from "@testing-library/react";
+import type { NcpAgentClientEndpoint } from "@nextclaw/ncp";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { useHydratedNcpAgent } from "../../../../ncp-packages/nextclaw-ncp-react/src/hooks/use-hydrated-ncp-agent.ts";
 
 const mocks = vi.hoisted(() => ({
   manager: {
     reset: vi.fn(),
-    hydrate: vi.fn()
+    hydrate: vi.fn(),
   },
   runtime: {
     snapshot: {
       messages: [],
       streamingMessage: null,
       activeRun: null,
-      error: null
+      error: null,
     },
     visibleMessages: [],
     activeRunId: null,
@@ -20,16 +21,19 @@ const mocks = vi.hoisted(() => ({
     isSending: false,
     send: vi.fn(),
     abort: vi.fn(),
-    streamRun: vi.fn()
-  }
+    streamRun: vi.fn(),
+  },
 }));
 
-vi.mock('../../../../ncp-packages/nextclaw-ncp-react/src/hooks/use-ncp-agent-runtime.js', () => ({
-  useScopedAgentManager: () => mocks.manager,
-  useNcpAgentRuntime: () => mocks.runtime
-}));
+vi.mock(
+  "../../../../ncp-packages/nextclaw-ncp-react/src/hooks/use-ncp-agent-runtime.js",
+  () => ({
+    useScopedAgentManager: () => mocks.manager,
+    useNcpAgentRuntime: () => mocks.runtime,
+  }),
+);
 
-describe('useHydratedNcpAgent', () => {
+describe("useHydratedNcpAgent", () => {
   beforeEach(() => {
     mocks.manager.reset.mockReset();
     mocks.manager.hydrate.mockReset();
@@ -38,40 +42,43 @@ describe('useHydratedNcpAgent', () => {
     mocks.runtime.streamRun.mockReset();
   });
 
-  it('treats a newly selected session as hydrating immediately on rerender', async () => {
+  it("treats a newly selected session as hydrating immediately on rerender", async () => {
     const client = {
       stop: vi.fn().mockResolvedValue(undefined),
-      stream: vi.fn().mockResolvedValue(undefined)
-    } as never;
+      stream: vi.fn().mockResolvedValue(undefined),
+    } satisfies Pick<NcpAgentClientEndpoint, "stop" | "stream">;
     const loadSeed = vi
       .fn()
-      .mockResolvedValueOnce({ messages: [], status: 'idle' })
-      .mockResolvedValueOnce({ messages: [], status: 'idle' });
+      .mockResolvedValueOnce({ messages: [], status: "idle" })
+      .mockResolvedValueOnce({ messages: [], status: "idle" });
 
     const { result, rerender } = renderHook(
       ({ sessionId }: { sessionId: string }) =>
         useHydratedNcpAgent({
           sessionId,
-          client,
-          loadSeed
+          client: client as never,
+          loadSeed,
         }),
       {
         initialProps: {
-          sessionId: 'session-a'
-        }
-      }
+          sessionId: "session-a",
+        },
+      },
     );
 
     await waitFor(() => {
       expect(result.current.isHydrating).toBe(false);
     });
+    expect(client.stream).toHaveBeenCalledWith({ sessionId: "session-a" });
 
-    rerender({ sessionId: 'session-b' });
+    rerender({ sessionId: "session-b" });
 
     expect(result.current.isHydrating).toBe(true);
 
     await waitFor(() => {
       expect(result.current.isHydrating).toBe(false);
     });
+    expect(client.stream).toHaveBeenCalledWith({ sessionId: "session-b" });
+    expect(client.stream).toHaveBeenCalledTimes(2);
   });
 });

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

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

@@ -0,0 +1,282 @@
+import { useEffect, useMemo, useState } from 'react';
+import { ChevronRight, Folder, FolderUp, Home, RefreshCcw, Search } from 'lucide-react';
+import { useServerPathBrowse } from '@/hooks/server-path/use-server-path-browse';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { t } from '@/lib/i18n';
+
+type ServerPathPickerDialogProps = {
+  open: boolean;
+  currentPath?: string | null;
+  isSaving: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: (path: string) => Promise<void> | void;
+  title: string;
+  description?: string;
+  pathLabel: string;
+  pathPlaceholder?: string;
+  confirmLabel: string;
+  hint?: string;
+};
+
+export function ServerPathPickerDialog({
+  open,
+  currentPath,
+  isSaving,
+  onOpenChange,
+  onConfirm,
+  title,
+  description,
+  pathLabel,
+  pathPlaceholder,
+  confirmLabel,
+  hint,
+}: ServerPathPickerDialogProps) {
+  const [draftPath, setDraftPath] = useState('');
+  const [browsePath, setBrowsePath] = useState<string | null>(null);
+  const [searchText, setSearchText] = useState('');
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const nextPath = currentPath?.trim() || null;
+    setDraftPath(nextPath ?? '');
+    setBrowsePath(nextPath);
+    setSearchText('');
+  }, [currentPath, open]);
+
+  const browseQuery = useServerPathBrowse({
+    path: browsePath,
+    enabled: open,
+  });
+
+  useEffect(() => {
+    if (!open || !browseQuery.data) {
+      return;
+    }
+    if (draftPath.trim().length === 0) {
+      setDraftPath(browseQuery.data.currentPath);
+    }
+  }, [browseQuery.data, draftPath, open]);
+
+  const normalizedDraftPath = draftPath.trim();
+  const submitDisabled = normalizedDraftPath.length === 0 || isSaving;
+  const errorMessage = useMemo(() => {
+    if (!browseQuery.error) {
+      return null;
+    }
+    return browseQuery.error instanceof Error
+      ? browseQuery.error.message
+      : String(browseQuery.error);
+  }, [browseQuery.error]);
+
+  const normalizedSearchText = searchText.trim().toLowerCase();
+  const filteredEntries = useMemo(() => {
+    const entries = browseQuery.data?.entries ?? [];
+    if (normalizedSearchText.length === 0) {
+      return entries;
+    }
+    return entries.filter((entry) => {
+      const normalizedName = entry.name.toLowerCase();
+      const normalizedPath = entry.path.toLowerCase();
+      return (
+        normalizedName.includes(normalizedSearchText) ||
+        normalizedPath.includes(normalizedSearchText)
+      );
+    });
+  }, [browseQuery.data?.entries, normalizedSearchText]);
+
+  const navigateTo = (path: string | null) => {
+    setBrowsePath(path);
+    setSearchText('');
+    if (path) {
+      setDraftPath(path);
+    }
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(nextOpen) => {
+        if (isSaving) {
+          return;
+        }
+        onOpenChange(nextOpen);
+      }}
+    >
+      <DialogContent className="max-h-[85vh] overflow-hidden sm:h-[42rem] sm:max-w-2xl sm:grid-rows-[auto_minmax(0,1fr)]">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          {description ? (
+            <DialogDescription>{description}</DialogDescription>
+          ) : null}
+        </DialogHeader>
+        <form
+          className="flex min-h-0 flex-col gap-4"
+          onSubmit={(event) => {
+            event.preventDefault();
+            if (submitDisabled) {
+              return;
+            }
+            void onConfirm(normalizedDraftPath);
+          }}
+        >
+          <div className="space-y-2">
+            <Label htmlFor="server-path-picker-input">{pathLabel}</Label>
+            <div className="flex gap-2">
+              <Input
+                id="server-path-picker-input"
+                value={draftPath}
+                onChange={(event) => setDraftPath(event.target.value)}
+                placeholder={pathPlaceholder}
+                autoFocus
+                disabled={isSaving}
+              />
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => navigateTo(normalizedDraftPath || null)}
+                disabled={isSaving}
+              >
+                {t('openPath')}
+              </Button>
+            </div>
+          </div>
+
+          <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-2xl border border-gray-200 bg-gray-50/70">
+            <div className="flex flex-wrap items-center gap-2 border-b border-gray-200 px-3 py-2">
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={() => navigateTo(browseQuery.data?.homePath ?? null)}
+                disabled={isSaving || browseQuery.isLoading}
+              >
+                <Home className="mr-1 h-4 w-4" />
+                {t('homeDirectory')}
+              </Button>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={() => navigateTo(browseQuery.data?.parentPath ?? null)}
+                disabled={!browseQuery.data?.parentPath || isSaving || browseQuery.isLoading}
+              >
+                <FolderUp className="mr-1 h-4 w-4" />
+                {t('parentDirectory')}
+              </Button>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={() => {
+                  void browseQuery.refetch();
+                }}
+                disabled={isSaving || browseQuery.isLoading}
+              >
+                <RefreshCcw className="mr-1 h-4 w-4" />
+                {t('chatRefresh')}
+              </Button>
+            </div>
+
+            <div className="border-b border-gray-200 px-3 py-2">
+              <div className="mb-2 text-xs font-medium text-gray-500">
+                {t('currentDirectory')}
+              </div>
+              <div className="flex flex-wrap items-center gap-1 text-xs text-gray-600">
+                {browseQuery.data?.breadcrumbs.map((breadcrumb, index) => (
+                  <div key={breadcrumb.path} className="flex items-center gap-1">
+                    <button
+                      type="button"
+                      className="rounded px-1.5 py-0.5 hover:bg-gray-200"
+                      onClick={() => navigateTo(breadcrumb.path)}
+                      disabled={isSaving}
+                    >
+                      {breadcrumb.label}
+                    </button>
+                    {index < browseQuery.data.breadcrumbs.length - 1 ? (
+                      <ChevronRight className="h-3 w-3 text-gray-400" />
+                    ) : null}
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className="border-b border-gray-200 px-3 py-2">
+              <div className="relative">
+                <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
+                <Input
+                  value={searchText}
+                  onChange={(event) => setSearchText(event.target.value)}
+                  placeholder={t('pathPickerSearchPlaceholder')}
+                  disabled={isSaving || browseQuery.isLoading}
+                  className="pl-9"
+                />
+              </div>
+            </div>
+
+            <ScrollArea className="min-h-0 flex-1 px-2 py-2">
+              {browseQuery.isLoading ? (
+                <div className="px-2 py-6 text-sm text-gray-500">{t('loading')}</div>
+              ) : errorMessage ? (
+                <div className="px-2 py-4 text-sm text-destructive">
+                  {t('pathBrowseFailed')}: {errorMessage}
+                </div>
+              ) : browseQuery.data && filteredEntries.length > 0 ? (
+                <div className="space-y-1">
+                  {filteredEntries.map((entry) => (
+                    <button
+                      key={entry.path}
+                      type="button"
+                      className="flex w-full items-center gap-2 rounded-xl px-3 py-2 text-left text-sm text-gray-700 transition-colors hover:bg-white"
+                      onClick={() => navigateTo(entry.path)}
+                      disabled={isSaving}
+                    >
+                      <Folder className="h-4 w-4 shrink-0 text-emerald-600" />
+                      <span className="truncate">{entry.name}</span>
+                    </button>
+                  ))}
+                </div>
+              ) : browseQuery.data && browseQuery.data.entries.length > 0 ? (
+                <div className="px-2 py-6 text-sm text-gray-500">
+                  {t('pathPickerSearchEmpty')}
+                </div>
+              ) : (
+                <div className="px-2 py-6 text-sm text-gray-500">{t('emptyDirectory')}</div>
+              )}
+            </ScrollArea>
+          </div>
+
+          {hint ? (
+            <p className="text-xs leading-relaxed text-gray-500">{hint}</p>
+          ) : null}
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => onOpenChange(false)}
+              disabled={isSaving}
+            >
+              {t('cancel')}
+            </Button>
+            <Button type="submit" disabled={submitDisabled}>
+              {isSaving ? t('saving') : confirmLabel}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/hooks/server-path/use-server-path-browse.ts

@@ -0,0 +1,19 @@
+import { useQuery } from '@tanstack/react-query';
+import { fetchServerPathBrowse } from '@/api/server-path';
+
+export function useServerPathBrowse(params: {
+  path?: string | null;
+  includeFiles?: boolean;
+  enabled?: boolean;
+}) {
+  return useQuery({
+    queryKey: ['server-path-browse', params.path ?? null, params.includeFiles ?? false],
+    queryFn: () =>
+      fetchServerPathBrowse({
+        path: params.path,
+        includeFiles: params.includeFiles,
+      }),
+    enabled: params.enabled ?? true,
+    staleTime: 0,
+  });
+}

package/src/hooks/useConfig.ts

@@ -26,7 +26,13 @@ import {
   setCronJobEnabled,
   runCronJob
 } from '@/api/config';
-import { deleteNcpSession, fetchNcpSessionMessages, fetchNcpSessions, updateNcpSession } from '@/api/ncp-session';
+import {
+  deleteNcpSession,
+  fetchNcpSessionMessages,
+  fetchNcpSessionSkills,
+  fetchNcpSessions,
+  updateNcpSession
+} from '@/api/ncp-session';
 import { toast } from 'sonner';
 import { t } from '@/lib/i18n';
 
@@ -248,6 +254,24 @@ export function useNcpSessionMessages(sessionId: string | null, limit = 200) {
   });
 }
 
+export function useNcpSessionSkills(params: {
+  sessionId: string | null;
+  projectRoot?: string | null;
+}) {
+  return useQuery({
+    queryKey: ['ncp-session-skills', params.sessionId, params.projectRoot ?? null],
+    queryFn: () =>
+      fetchNcpSessionSkills(params.sessionId as string, {
+        ...(Object.prototype.hasOwnProperty.call(params, 'projectRoot')
+          ? { projectRoot: params.projectRoot ?? null }
+          : {})
+      }),
+    enabled: Boolean(params.sessionId),
+    staleTime: 5_000,
+    retry: false
+  });
+}
+
 export function useDeleteNcpSession() {
   const queryClient = useQueryClient();
 
@@ -272,6 +296,7 @@ export function useUpdateNcpSession() {
       updateNcpSession(sessionId, data),
     onSuccess: (data) => {
       upsertNcpSessionSummaryInQueryClient(queryClient, data);
+      queryClient.invalidateQueries({ queryKey: ['ncp-session-skills', data.sessionId] });
       toast.success(t('configSavedApplied'));
     },
     onError: (error: Error) => {

package/src/lib/i18n/i18n-language-owner.ts

@@ -0,0 +1,94 @@
+export type I18nLanguage = 'zh' | 'en';
+
+const I18N_STORAGE_KEY = 'nextclaw.ui.language';
+const LANGUAGE_TO_LOCALE: Record<I18nLanguage, string> = {
+  en: 'en-US',
+  zh: 'zh-CN'
+};
+
+export const LANGUAGE_OPTIONS: Array<{ value: I18nLanguage; label: string }> = [
+  { value: 'en', label: 'English' },
+  { value: 'zh', label: '中文' }
+];
+
+class I18nLanguageOwner {
+  private activeLanguage: I18nLanguage = 'en';
+  private initialized = false;
+  private readonly listeners = new Set<(lang: I18nLanguage) => void>();
+
+  private isLanguage = (value: unknown): value is I18nLanguage => {
+    return value === 'en' || value === 'zh';
+  };
+
+  private detectBrowserLanguage = (): I18nLanguage => {
+    if (typeof navigator === 'undefined') {
+      return 'en';
+    }
+    const preferred = navigator.language?.toLowerCase() ?? 'en';
+    return preferred.startsWith('zh') ? 'zh' : 'en';
+  };
+
+  resolveInitialLanguage = (): I18nLanguage => {
+    if (typeof window === 'undefined') {
+      return 'en';
+    }
+
+    try {
+      const saved = window.localStorage.getItem(I18N_STORAGE_KEY);
+      if (this.isLanguage(saved)) {
+        return saved;
+      }
+    } catch {
+      // ignore storage failures
+    }
+
+    return this.detectBrowserLanguage();
+  };
+
+  initialize = (): I18nLanguage => {
+    if (!this.initialized) {
+      this.activeLanguage = this.resolveInitialLanguage();
+      this.initialized = true;
+    }
+    return this.activeLanguage;
+  };
+
+  getLanguage = (): I18nLanguage => (this.initialized ? this.activeLanguage : this.initialize());
+
+  setLanguage = (lang: I18nLanguage): void => {
+    this.initialize();
+    if (this.activeLanguage === lang) {
+      return;
+    }
+
+    this.activeLanguage = lang;
+
+    if (typeof window !== 'undefined') {
+      try {
+        window.localStorage.setItem(I18N_STORAGE_KEY, lang);
+      } catch {
+        // ignore storage failures
+      }
+    }
+
+    this.listeners.forEach((listener) => listener(lang));
+  };
+
+  subscribeLanguageChange = (listener: (lang: I18nLanguage) => void): (() => void) => {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+
+  getLocale = (lang: I18nLanguage = this.getLanguage()): string => LANGUAGE_TO_LOCALE[lang];
+}
+
+const owner = new I18nLanguageOwner();
+
+export const resolveInitialLanguage = owner.resolveInitialLanguage;
+export const initializeI18n = owner.initialize;
+export const getLanguage = owner.getLanguage;
+export const setLanguage = owner.setLanguage;
+export const subscribeLanguageChange = owner.subscribeLanguageChange;
+export const getLocale = owner.getLocale;