@nextclaw/ui 0.15.25 → 0.15.27

package/src/features/chat/features/workspace/components/project-files/workspace-directory-tree.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useLayoutEffect, useMemo, useRef, useState, type ReactNode } from 'react';
+import { useCallback, useLayoutEffect, useMemo, useRef, useState, type ReactNode } from 'react';
 import type { ChatFileOpenActionViewModel } from '@nextclaw/agent-chat-ui';
 import {
   ChevronDown,
@@ -26,12 +26,16 @@ import { buildServerPathContentUrl, type ServerPathEntryView } from '@/shared/li
 import { t } from '@/shared/lib/i18n';
 import { cn } from '@/shared/lib/utils';
 import { buildWorkspaceEntryContextMenuGroups } from '@/features/chat/features/workspace/components/project-files/workspace-directory-entry-menu';
+import {
+  normalizeWorkspaceProjectTreeRelativePath,
+  useWorkspaceProjectTreeStore,
+} from '@/features/chat/features/workspace/stores/workspace-project-tree.store';
 
 export { copyWorkspacePath } from '@/features/chat/features/workspace/components/project-files/workspace-directory-entry-menu';
 
 type WorkspaceDirectoryTreeActionProps = {
+  activeRelativePath: string | null;
   busy: boolean;
-  collapseVersion: number;
   createTarget: WorkspaceDirectoryActionTarget | null;
   onAddToChat?: (entry: ServerPathEntryView, relativePath: string) => void;
   onCreateFolder?: (target: WorkspaceDirectoryActionTarget) => void;
@@ -44,6 +48,7 @@ type WorkspaceDirectoryTreeActionProps = {
   renderCreateFolder: (level: number) => ReactNode;
   revealPath: string | null;
   selectedPath: string | null;
+  treeRootKey: string | null;
 };
 
 function buildEntryLabel(entry: ServerPathEntryView): string {
@@ -182,10 +187,54 @@ function useWorkspaceEntryRename({
   return { active, cancel, error, name, start, submit, updateName };
 }
 
+function readWorkspaceTreeEntrySelection(
+  activeRelativePath: string | null,
+  relativePath: string | null,
+  selectedPath: string | null,
+  entryPath: string,
+): readonly [active: boolean, selected: boolean] {
+  const active = !selectedPath && activeRelativePath !== null && activeRelativePath === relativePath;
+  return [active, selectedPath === null ? active : selectedPath === entryPath];
+}
+
+function isWorkspaceTreeEntryExpanded(
+  manuallyExpanded: boolean,
+  isDirectory: boolean,
+  activeRelativePath: string | null,
+  relativePath: string | null,
+  selectedPath: string | null,
+): boolean {
+  return (
+    manuallyExpanded ||
+    Boolean(!selectedPath && isDirectory && relativePath && activeRelativePath?.startsWith(`${relativePath}/`))
+  );
+}
+
+function useWorkspaceTreeEntryExpansion(treeRootKey: string | null, relativePath: string | null) {
+  const [locallyExpanded, setLocallyExpanded] = useState(false);
+  const relativePathKey = normalizeWorkspaceProjectTreeRelativePath(relativePath);
+  const persistedExpanded = useWorkspaceProjectTreeStore((state) =>
+    Boolean(treeRootKey && relativePathKey && state.trees[treeRootKey]?.expandedPaths.includes(relativePathKey)),
+  );
+  const setDirectoryExpanded = useWorkspaceProjectTreeStore((state) => state.setDirectoryExpanded);
+  const manuallyExpanded = treeRootKey && relativePathKey ? persistedExpanded : locallyExpanded;
+  const updateExpanded = useCallback(
+    (expanded: boolean) => {
+      if (treeRootKey && relativePathKey) {
+        setDirectoryExpanded(treeRootKey, relativePathKey, expanded);
+        return;
+      }
+      setLocallyExpanded(expanded);
+    },
+    [relativePathKey, setDirectoryExpanded, treeRootKey],
+  );
+  return { manuallyExpanded, updateExpanded };
+}
+
 export function WorkspaceDirectoryTreeEntry({
+  activeRelativePath,
   browseParentRefresh,
   busy,
-  collapseVersion,
   createTarget,
   entry,
   level,
@@ -204,6 +253,7 @@ export function WorkspaceDirectoryTreeEntry({
   renderCreateFolder,
   revealPath,
   selectedPath,
+  treeRootKey,
 }: WorkspaceDirectoryTreeActionProps & {
   browseParentRefresh: RefreshDirectory;
   entry: ServerPathEntryView;
@@ -216,15 +266,19 @@ export function WorkspaceDirectoryTreeEntry({
   const rowRef = useRef<HTMLDivElement | null>(null);
   const entryButtonRef = useRef<HTMLButtonElement | null>(null);
   const isDirectory = entry.kind === 'directory';
-  const [isExpanded, setIsExpanded] = useState(false);
+  const { manuallyExpanded, updateExpanded } = useWorkspaceTreeEntryExpansion(treeRootKey, relativePath);
+  const isExpanded = isWorkspaceTreeEntryExpanded(
+    manuallyExpanded,
+    isDirectory,
+    activeRelativePath,
+    relativePath,
+    selectedPath,
+  );
   const rename = useWorkspaceEntryRename({
     entry,
     onRename,
     refresh: browseParentRefresh,
   });
-  useEffect(() => {
-    if (collapseVersion > 0) setIsExpanded(false);
-  }, [collapseVersion]);
   const browseQuery = useServerPathBrowse({
     path: entry.path,
     includeFiles: true,
@@ -239,15 +293,25 @@ export function WorkspaceDirectoryTreeEntry({
             label: entry.name,
             path: entry.path,
             refresh: () => refreshDirectory(),
-            expand: () => setIsExpanded(true),
+            expand: () => updateExpanded(true),
           }
         : parentCreateTarget,
-    [entry.name, entry.path, isDirectory, parentCreateTarget, refreshDirectory],
+    [entry.name, entry.path, isDirectory, parentCreateTarget, refreshDirectory, updateExpanded],
   );
   const selection = useMemo<WorkspaceTreeSelection>(
     () => ({ path: entry.path, createTarget: ownCreateTarget }),
     [entry.path, ownCreateTarget],
   );
+  const [activeSelected, selected] = readWorkspaceTreeEntrySelection(
+    activeRelativePath,
+    relativePath,
+    selectedPath,
+    entry.path,
+  );
+
+  useLayoutEffect(() => {
+    if (activeSelected) rowRef.current?.scrollIntoView?.({ block: 'nearest' });
+  }, [activeSelected]);
 
   useLayoutEffect(() => {
     if (revealPath !== entry.path) return;
@@ -259,7 +323,7 @@ export function WorkspaceDirectoryTreeEntry({
 
   const activateEntry = () => {
     onSelect(selection);
-    if (isDirectory) setIsExpanded((value) => !value);
+    if (isDirectory) updateExpanded(!isExpanded);
     else onFileOpen({ path: entry.path, label: entry.name, viewMode: 'preview' });
   };
 
@@ -280,14 +344,19 @@ export function WorkspaceDirectoryTreeEntry({
     relativePath,
   });
   return (
-    <div role="treeitem" aria-expanded={isDirectory ? isExpanded : undefined} aria-label={buildEntryLabel(entry)}>
+    <div
+      role="treeitem"
+      aria-expanded={isDirectory ? isExpanded : undefined}
+      aria-label={buildEntryLabel(entry)}
+      aria-selected={selected}
+    >
       <ContextMenu groups={contextMenuGroups} label={t('chatWorkspaceFileContextMenu')}>
         <div
           ref={rowRef}
           data-workspace-tree-entry=""
           className={cn(
             'group flex h-[26px] w-full min-w-0 items-center text-gray-700 transition-colors hover:bg-gray-100 focus-within:bg-gray-100',
-            selectedPath === entry.path ? 'bg-primary/10' : null,
+            selected ? 'bg-primary/10' : null,
             entry.hidden ? 'opacity-65' : null,
           )}
           style={{ paddingLeft: `${6 + level * 12}px` }}
@@ -383,9 +452,9 @@ export function WorkspaceDirectoryTreeEntry({
         <div role="group">
           {createTarget?.path === entry.path ? renderCreateFolder(level + 1) : null}
           <WorkspaceDirectoryTreeChildren
+            activeRelativePath={activeRelativePath}
             browseQuery={browseQuery}
             busy={busy}
-            collapseVersion={collapseVersion}
             createTarget={createTarget}
             level={level}
             onAddToChat={onAddToChat}
@@ -403,6 +472,7 @@ export function WorkspaceDirectoryTreeEntry({
             renderCreateFolder={renderCreateFolder}
             revealPath={revealPath}
             selectedPath={selectedPath}
+            treeRootKey={treeRootKey}
           />
         </div>
       ) : null}

package/src/features/chat/features/workspace/components/project-files/workspace-project-tree-view.tsx

@@ -0,0 +1,93 @@
+import { useEffect, useLayoutEffect, useRef, type MouseEventHandler, type ReactNode } from 'react';
+import type { QueryKey } from '@tanstack/react-query';
+import {
+  normalizeWorkspaceProjectTreeRootKey,
+  useWorkspaceProjectTreeStore,
+} from '@/features/chat/features/workspace/stores/workspace-project-tree.store';
+import { t } from '@/shared/lib/i18n';
+
+function normalizeComparablePath(path: string): string {
+  const normalized = path.trim().replace(/\\/g, '/').replace(/\/+$/g, '') || '/';
+  return /^[a-z]:/i.test(normalized) ? normalized.toLowerCase() : normalized;
+}
+
+export function isWorkspaceProjectBrowseQuery(queryKey: QueryKey, rootPath: string): boolean {
+  if (queryKey[0] !== 'server-path-browse' || queryKey[3] !== true || typeof queryKey[1] !== 'string') {
+    return false;
+  }
+  const root = normalizeComparablePath(rootPath);
+  const candidate = normalizeComparablePath(queryKey[1]);
+  return candidate === root || (root === '/' ? candidate.startsWith('/') : candidate.startsWith(`${root}/`));
+}
+
+export function WorkspaceProjectTree({
+  children,
+  currentPath,
+  onBlankContext,
+  onContextMenu,
+  rootDraft,
+  showRoot,
+}: {
+  children: ReactNode;
+  currentPath: string | null;
+  onBlankContext: () => void;
+  onContextMenu?: MouseEventHandler<HTMLDivElement>;
+  rootDraft: ReactNode;
+  showRoot: boolean;
+}) {
+  const treeRef = useRef<HTMLDivElement | null>(null);
+  const pendingScrollTopRef = useRef<number | null>(null);
+  const scrollPersistTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const treeRootKey = normalizeWorkspaceProjectTreeRootKey(currentPath);
+  const savedScrollTop = useWorkspaceProjectTreeStore((state) =>
+    treeRootKey ? (state.trees[treeRootKey]?.scrollTop ?? 0) : 0,
+  );
+  const setScrollTop = useWorkspaceProjectTreeStore((state) => state.setScrollTop);
+
+  useLayoutEffect(() => {
+    if (treeRef.current && treeRootKey) treeRef.current.scrollTop = savedScrollTop;
+  }, [savedScrollTop, treeRootKey]);
+
+  useEffect(
+    () => () => {
+      if (scrollPersistTimerRef.current) clearTimeout(scrollPersistTimerRef.current);
+      if (treeRootKey && pendingScrollTopRef.current !== null) {
+        setScrollTop(treeRootKey, pendingScrollTopRef.current);
+      }
+    },
+    [setScrollTop, treeRootKey],
+  );
+
+  return (
+    <div
+      ref={treeRef}
+      data-testid="workspace-directory-browser"
+      role="tree"
+      tabIndex={-1}
+      aria-label={t('chatWorkspaceProjectFiles')}
+      className="min-h-0 flex-1 overflow-auto py-1 custom-scrollbar"
+      onContextMenu={(event) => {
+        if (!(event.target as HTMLElement).closest('[data-workspace-tree-entry]')) onBlankContext();
+        onContextMenu?.(event);
+      }}
+      onScroll={(event) => {
+        if (!treeRootKey) return;
+        pendingScrollTopRef.current = event.currentTarget.scrollTop;
+        if (scrollPersistTimerRef.current) clearTimeout(scrollPersistTimerRef.current);
+        scrollPersistTimerRef.current = setTimeout(() => {
+          scrollPersistTimerRef.current = null;
+          if (pendingScrollTopRef.current !== null) setScrollTop(treeRootKey, pendingScrollTopRef.current);
+        }, 120);
+      }}
+    >
+      {showRoot && currentPath ? (
+        <>
+          {rootDraft}
+          {children}
+        </>
+      ) : (
+        children
+      )}
+    </div>
+  );
+}

package/src/features/chat/features/workspace/hooks/use-workspace-explorer-layout.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState, type PointerEvent as ReactPointerEvent } from 'react';
+import { useCallback, useEffect, useRef, useState, type PointerEvent as ReactPointerEvent } from 'react';
 import { usePresenter } from '@/features/chat/components/providers/chat-presenter.provider';
 import { useChatThreadStore } from '@/features/chat/stores/chat-thread.store';
 import {
@@ -9,22 +9,23 @@ import {
 export function useWorkspaceExplorerLayout({
   fileActive,
   projectFilesActive,
-  sessionProjectRoot,
-  sessionWorkingDir,
 }: {
   fileActive: boolean;
   projectFilesActive: boolean;
-  sessionProjectRoot: string | null;
-  sessionWorkingDir: string | null;
 }) {
   const presenter = usePresenter();
   const containerRef = useRef<HTMLDivElement | null>(null);
   const resizeRef = useRef<{ startX: number; startWidth: number; width: number } | null>(null);
+  const explorerOpen = useChatThreadStore((state) => state.snapshot.workspaceExplorerOpen);
   const persistedExplorerWidth = useChatThreadStore((state) => state.snapshot.workspaceExplorerWidth);
+  const setSnapshot = useChatThreadStore((state) => state.setSnapshot);
   const [compact, setCompact] = useState(false);
   const [explorerDragWidth, setExplorerDragWidth] = useState<number | null>(null);
-  const [explorerOpen, setExplorerOpen] = useState(true);
   const explorerWidth = explorerDragWidth ?? persistedExplorerWidth;
+  const setExplorerOpen = useCallback(
+    (open: boolean) => setSnapshot({ workspaceExplorerOpen: open }),
+    [setSnapshot],
+  );
 
   useEffect(() => {
     const node = containerRef.current;
@@ -36,10 +37,6 @@ export function useWorkspaceExplorerLayout({
     return () => observer.disconnect();
   }, []);
 
-  useEffect(() => {
-    setExplorerOpen(true);
-  }, [sessionProjectRoot, sessionWorkingDir]);
-
   useEffect(() => {
     if (!fileActive || !compact || !explorerOpen) return;
     const closeOnEscape = (event: KeyboardEvent) => {
@@ -47,7 +44,7 @@ export function useWorkspaceExplorerLayout({
     };
     window.addEventListener('keydown', closeOnEscape);
     return () => window.removeEventListener('keydown', closeOnEscape);
-  }, [compact, explorerOpen, fileActive]);
+  }, [compact, explorerOpen, fileActive, setExplorerOpen]);
 
   const onResizeStart = (event: ReactPointerEvent<HTMLDivElement>) => {
     if (compact || !fileActive) return;

package/src/features/chat/features/workspace/hooks/use-workspace-file-actions.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { NextClawClientError } from '@nextclaw/client-sdk';
 import { toast } from 'sonner';
 import type { useConfirmDialog } from '@/shared/hooks/use-confirm-dialog';
@@ -29,6 +29,11 @@ export type WorkspaceTreeSelection = {
   createTarget: WorkspaceDirectoryActionTarget;
 };
 
+type WorkspaceTreeSelectionState = {
+  activeRelativePath: string | null;
+  selection: WorkspaceTreeSelection;
+};
+
 function readErrorMessage(error: unknown): string {
   return error instanceof Error ? error.message : String(error);
 }
@@ -193,6 +198,7 @@ async function createWorkspaceEntry({
 }
 
 type WorkspaceProjectFilesControllerOptions = {
+  activeRelativePath: string | null;
   confirm: Confirm;
   onEntryDeleted?: (path: string) => void;
   onEntryRenamed?: (params: { previousPath: string; path: string; label: string }) => void;
@@ -200,6 +206,7 @@ type WorkspaceProjectFilesControllerOptions = {
 };
 
 export function useWorkspaceProjectFilesController({
+  activeRelativePath,
   confirm,
   onEntryDeleted,
   onEntryRenamed,
@@ -211,18 +218,11 @@ export function useWorkspaceProjectFilesController({
   const [createName, setCreateName] = useState('');
   const [createKind, setCreateKind] = useState<'directory' | 'file'>('directory');
   const [createError, setCreateError] = useState<string | null>(null);
-  const [selectedPath, setSelectedPath] = useState<string | null>(null);
-  const [selectedCreateTarget, setSelectedCreateTarget] = useState<WorkspaceDirectoryActionTarget | null>(null);
+  const [selectionState, setSelectionState] = useState<WorkspaceTreeSelectionState | null>(null);
   const [revealPath, setRevealPath] = useState<string | null>(null);
   const [uploadTarget, setUploadTarget] = useState<WorkspaceDirectoryActionTarget | null>(null);
-
-  useEffect(() => {
-    setCreateTarget(null);
-    setSelectedPath(null);
-    setSelectedCreateTarget(null);
-    setRevealPath(null);
-    setUploadTarget(null);
-  }, [rootPath]);
+  const selectedEntry =
+    selectionState?.activeRelativePath === activeRelativePath ? selectionState.selection : null;
 
   const requestUpload = (target: WorkspaceDirectoryActionTarget) => {
     setUploadTarget(target);
@@ -231,8 +231,7 @@ export function useWorkspaceProjectFilesController({
     fileInputRef.current.click();
   };
   const selectEntry = (selection: WorkspaceTreeSelection) => {
-    setSelectedPath(selection.path);
-    setSelectedCreateTarget(selection.createTarget);
+    setSelectionState({ activeRelativePath, selection });
   };
   const openCreate = (kind: 'directory' | 'file', target: WorkspaceDirectoryActionTarget) => {
     target.expand?.();
@@ -275,7 +274,20 @@ export function useWorkspaceProjectFilesController({
       label: renamed.name,
     });
     await refresh();
-    setSelectedPath(renamed.path);
+    setSelectionState((state) =>
+      state?.activeRelativePath === activeRelativePath
+        ? {
+            activeRelativePath,
+            selection: {
+              path: renamed.path,
+              createTarget:
+                state.selection.createTarget.path === entry.path
+                  ? { ...state.selection.createTarget, label: renamed.name, path: renamed.path }
+                  : state.selection.createTarget,
+            },
+          }
+        : null,
+    );
     setRevealPath(renamed.path);
     toast.success(t('chatWorkspaceRenameSucceeded').replace('{name}', renamed.name));
     return renamed;
@@ -292,44 +304,54 @@ export function useWorkspaceProjectFilesController({
     });
     if (!created) return;
     setCreateTarget(null);
-    setSelectedPath(created.path);
-    setSelectedCreateTarget({
-      label: createName.trim(),
-      path: created.path,
-      refresh: createTarget.refresh,
+    setSelectionState({
+      activeRelativePath,
+      selection: {
+        path: created.path,
+        createTarget: {
+          label: createName.trim(),
+          path: created.path,
+          refresh: createTarget.refresh,
+        },
+      },
     });
     setRevealPath(created.path);
   };
 
   return {
-    actions,
-    cancelCreateFolder: () => {
-      setCreateTarget(null);
-      setCreateName('');
-      setCreateError(null);
+    actions: {
+      cancelCreateFolder: () => {
+        setCreateTarget(null);
+        setCreateName('');
+        setCreateError(null);
+      },
+      clearSelection: () => {
+        setSelectionState(null);
+      },
+      completeReveal: () => setRevealPath(null),
+      deleteEntry,
+      openCreateFile: (target: WorkspaceDirectoryActionTarget) => openCreate('file', target),
+      openCreateFolder: (target: WorkspaceDirectoryActionTarget) => openCreate('directory', target),
+      renameEntry,
+      requestUpload,
+      selectEntry,
+      setCreateError,
+      setCreateName,
+      submitCreate,
+      uploadFiles,
+    },
+    refs: {
+      fileInputRef,
     },
-    clearSelection: () => {
-      setSelectedPath(null);
-      setSelectedCreateTarget(null);
+    state: {
+      createError,
+      createKind,
+      createName,
+      createTarget,
+      pendingAction: actions.pendingAction,
+      revealPath,
+      selectedCreateTarget: selectedEntry?.createTarget ?? null,
+      selectedPath: selectedEntry?.path ?? null,
     },
-    completeReveal: () => setRevealPath(null),
-    submitCreate,
-    createError,
-    createName,
-    createKind,
-    createTarget,
-    deleteEntry,
-    fileInputRef,
-    openCreateFile: (target: WorkspaceDirectoryActionTarget) => openCreate('file', target),
-    openCreateFolder: (target: WorkspaceDirectoryActionTarget) => openCreate('directory', target),
-    requestUpload,
-    renameEntry,
-    revealPath,
-    selectEntry,
-    selectedCreateTarget,
-    selectedPath,
-    setCreateError,
-    setCreateName,
-    uploadFiles,
   };
 }

package/src/features/chat/features/workspace/stores/__tests__/workspace-project-tree.store.test.ts

@@ -0,0 +1,38 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { useWorkspaceProjectTreeStore } from '@/features/chat/features/workspace/stores/workspace-project-tree.store';
+
+const ROOT = '/Users/peiwang/Projects/nextbot';
+
+describe('workspace project tree store', () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    useWorkspaceProjectTreeStore.setState({ trees: {} });
+  });
+
+  it('keeps expansion and scroll view state isolated by project root', () => {
+    const store = useWorkspaceProjectTreeStore.getState();
+    store.setDirectoryExpanded(ROOT, 'src/features', true);
+    store.setScrollTop(ROOT, 128.4);
+    store.setDirectoryExpanded('/tmp/another-project', 'docs', true);
+
+    expect(useWorkspaceProjectTreeStore.getState().trees[ROOT]).toMatchObject({
+      expandedPaths: ['src/features'],
+      scrollTop: 128,
+    });
+    expect(useWorkspaceProjectTreeStore.getState().trees['/tmp/another-project']).toMatchObject({
+      expandedPaths: ['docs'],
+      scrollTop: 0,
+    });
+  });
+
+  it('normalizes paths and collapses only the requested project', () => {
+    const store = useWorkspaceProjectTreeStore.getState();
+    store.setDirectoryExpanded(`${ROOT}/`, '/src\\features/', true);
+    store.setDirectoryExpanded(ROOT, 'src/features', true);
+    store.setDirectoryExpanded('/tmp/another-project', 'docs', true);
+    useWorkspaceProjectTreeStore.getState().collapseAll(ROOT);
+
+    expect(useWorkspaceProjectTreeStore.getState().trees[ROOT]?.expandedPaths).toEqual([]);
+    expect(useWorkspaceProjectTreeStore.getState().trees['/tmp/another-project']?.expandedPaths).toEqual(['docs']);
+  });
+});