@nextclaw/ui 0.15.25 → 0.15.27

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

@@ -5,6 +5,7 @@ import { ChatSessionWorkspacePanelContent } from '@/features/chat/features/works
 import type { ResolvedChildSessionTab } from '@/features/chat/features/ncp/hooks/use-ncp-child-session-tabs-view';
 import { useChatThreadStore } from '@/features/chat/stores/chat-thread.store';
 import { CHAT_WORKSPACE_EXPLORER_DEFAULT_WIDTH } from '@/features/chat/features/workspace/utils/chat-workspace-panel-layout.utils';
+import { useWorkspaceProjectTreeStore } from '@/features/chat/features/workspace/stores/workspace-project-tree.store';
 
 const mocks = vi.hoisted(() => ({
   browseEntries: [
@@ -27,7 +28,9 @@ const mocks = vi.hoisted(() => ({
   deleteServerPathEntry: vi.fn(),
   renameServerPathEntry: vi.fn(),
   uploadServerPathFiles: vi.fn(),
+  watchDirectories: vi.fn(),
   refetchBrowse: vi.fn(),
+  refetchQueries: vi.fn(),
   requestDirectoryReference: vi.fn(),
   requestFileReference: vi.fn(),
   openChildSessions: vi.fn(),
@@ -41,6 +44,15 @@ const mocks = vi.hoisted(() => ({
   scrollIntoView: vi.fn(),
 }));
 
+vi.mock('@/shared/hooks/use-server-path-watch', () => ({
+  useServerPathWatch: mocks.watchDirectories,
+}));
+
+vi.mock('@tanstack/react-query', async (importOriginal) => ({
+  ...(await importOriginal()),
+  useQueryClient: () => ({ refetchQueries: mocks.refetchQueries }),
+}));
+
 function firePointerEvent(
   target: Window | Document | Node | Element,
   type: string,
@@ -168,7 +180,10 @@ beforeEach(() => {
     overwritten: false,
   });
   mocks.refetchBrowse.mockResolvedValue(undefined);
+  mocks.refetchQueries.mockResolvedValue(undefined);
+  useWorkspaceProjectTreeStore.setState({ trees: {} });
   useChatThreadStore.getState().setSnapshot({
+    workspaceExplorerOpen: false,
     workspaceExplorerWidth: CHAT_WORKSPACE_EXPLORER_DEFAULT_WIDTH,
   });
 });
@@ -474,7 +489,7 @@ it('creates a project folder from the root toolbar and refreshes the tree', asyn
       parentPath: '/Users/peiwang/Projects/nextbot',
       name: 'research',
     });
-    expect(mocks.refetchBrowse).toHaveBeenCalled();
+    expect(mocks.refetchQueries).toHaveBeenCalled();
     expect(document.activeElement).toBe(screen.getByRole('button', { name: 'research' }));
     expect(mocks.scrollIntoView).toHaveBeenCalledTimes(2);
   });
@@ -563,7 +578,7 @@ it('uploads multiple project files from the root actions menu', async () => {
       files: [file],
       overwrite: undefined,
     });
-    expect(mocks.refetchBrowse).toHaveBeenCalled();
+    expect(mocks.refetchQueries).toHaveBeenCalled();
   });
 });
 
@@ -593,11 +608,83 @@ it('requires destructive confirmation before deleting a project file', async ()
       path: '/private/resolved-worktree/package.json',
     });
     expect(mocks.removeWorkspacePath).toHaveBeenCalledWith('/private/resolved-worktree/package.json');
-    expect(mocks.refetchBrowse).toHaveBeenCalled();
+    expect(mocks.refetchQueries).toHaveBeenCalled();
   });
 });
 
-it('preserves project tree expansion and scroll while visiting another workspace tab', async () => {
+it('refreshes the root and every active expanded directory query', async () => {
+  const user = userEvent.setup();
+  render(
+    <ChatSessionWorkspacePanelContent
+      activeSelection={{ kind: 'project-files' }}
+      childSessionTabs={[]}
+      filePreviewRefreshVersion={0}
+      sessionKey="parent-1"
+      sessionCronJobs={[]}
+      sessionProjectRoot="/Users/peiwang/Projects/nextbot"
+      sessionWorkingDir="/Users/peiwang/Projects/nextbot"
+    />,
+  );
+
+  await user.click(screen.getByRole('button', { name: 'src' }));
+  await user.click(screen.getByRole('button', { name: 'Refresh project files' }));
+
+  expect(mocks.refetchQueries).toHaveBeenCalledTimes(1);
+  const request = mocks.refetchQueries.mock.calls[0]?.[0] as {
+    predicate: (query: { queryKey: readonly unknown[] }) => boolean;
+    type: string;
+  };
+  expect(request.type).toBe('active');
+  expect(request.predicate({ queryKey: ['server-path-browse', '/Users/peiwang/Projects/nextbot', '', true] })).toBe(true);
+  expect(request.predicate({ queryKey: ['server-path-browse', '/Users/peiwang/Projects/nextbot/src', '', true] })).toBe(true);
+  expect(request.predicate({ queryKey: ['server-path-browse', '/tmp/another-project', '', true] })).toBe(false);
+});
+
+it('collapses all persisted directories in one action', async () => {
+  const user = userEvent.setup();
+  render(
+    <ChatSessionWorkspacePanelContent
+      activeSelection={{ kind: 'project-files' }}
+      childSessionTabs={[]}
+      filePreviewRefreshVersion={0}
+      sessionKey="parent-1"
+      sessionCronJobs={[]}
+      sessionProjectRoot="/Users/peiwang/Projects/nextbot"
+      sessionWorkingDir="/Users/peiwang/Projects/nextbot"
+    />,
+  );
+
+  const sourceDirectory = screen.getByRole('treeitem', { name: 'Open directory: src' });
+  await user.click(screen.getByRole('button', { name: 'src' }));
+  expect(sourceDirectory.getAttribute('aria-expanded')).toBe('true');
+  await user.click(screen.getByRole('button', { name: 'Collapse all' }));
+  expect(sourceDirectory.getAttribute('aria-expanded')).toBe('false');
+});
+
+it('restores expansion and scroll from project view state after remounting', async () => {
+  const user = userEvent.setup();
+  const props = {
+    activeSelection: { kind: 'project-files' as const },
+    childSessionTabs: [],
+    filePreviewRefreshVersion: 0,
+    sessionKey: 'parent-1',
+    sessionCronJobs: [],
+    sessionProjectRoot: '/Users/peiwang/Projects/nextbot',
+    sessionWorkingDir: '/Users/peiwang/Projects/nextbot',
+  };
+  const first = render(<ChatSessionWorkspacePanelContent {...props} />);
+  await user.click(screen.getByRole('button', { name: 'src' }));
+  const firstTree = screen.getByRole('tree', { name: 'Project files' });
+  firstTree.scrollTop = 144;
+  fireEvent.scroll(firstTree);
+  first.unmount();
+
+  render(<ChatSessionWorkspacePanelContent {...props} />);
+  expect(screen.getAllByRole('treeitem', { name: 'Open directory: src' })[0]?.getAttribute('aria-expanded')).toBe('true');
+  expect(screen.getByRole('tree', { name: 'Project files' }).scrollTop).toBe(144);
+});
+
+it('selects and reveals the active file when it is opened outside the Explorer', async () => {
   const user = userEvent.setup();
   const projectFilesProps = {
     activeSelection: { kind: 'project-files' as const },
@@ -609,24 +696,69 @@ it('preserves project tree expansion and scroll while visiting another workspace
     sessionWorkingDir: '/Users/peiwang/Projects/nextbot',
   };
   const { rerender } = render(<ChatSessionWorkspacePanelContent {...projectFilesProps} />);
-  const tree = screen.getByRole('tree', { name: 'Project files' });
-  const sourceDirectory = screen.getByRole('treeitem', {
-    name: 'Open directory: src',
-  });
+  const sourceDirectory = screen.getByRole('treeitem', { name: 'Open directory: src' });
+  const packageEntry = screen.getByRole('treeitem', { name: 'Open file: package.json' });
   await user.click(screen.getByRole('button', { name: 'src' }));
-  tree.scrollTop = 128;
-  expect(sourceDirectory.getAttribute('aria-expanded')).toBe('true');
+  expect(sourceDirectory.getAttribute('aria-selected')).toBe('true');
 
-  rerender(<ChatSessionWorkspacePanelContent {...projectFilesProps} activeSelection={{ kind: 'overview' }} />);
-  rerender(<ChatSessionWorkspacePanelContent {...projectFilesProps} />);
+  rerender(
+    <ChatSessionWorkspacePanelContent
+      {...projectFilesProps}
+      activeSelection={{
+        kind: 'file',
+        file: {
+          key: 'parent-1::preview::package.json',
+          parentSessionKey: 'parent-1',
+          path: 'package.json',
+          label: 'package.json',
+          viewMode: 'preview',
+          previewViewer: 'source',
+        },
+      }}
+    />,
+  );
 
-  expect(screen.getByRole('tree', { name: 'Project files' })).toBe(tree);
-  expect(sourceDirectory.isConnected).toBe(true);
-  expect(sourceDirectory.getAttribute('aria-expanded')).toBe('true');
-  expect(tree.scrollTop).toBe(128);
+  await waitFor(() => {
+    expect(packageEntry.getAttribute('aria-selected')).toBe('true');
+    expect(sourceDirectory.getAttribute('aria-selected')).toBe('false');
+  });
+  expect(mocks.scrollIntoView).toHaveBeenCalled();
+  expect(document.activeElement).not.toBe(screen.getByRole('button', { name: 'package.json' }));
 });
 
-it('reuses the Explorer beside a file and persists a dragged compact width', () => {
+it('expands active-file ancestors like an auto-revealing Explorer', async () => {
+  useChatThreadStore.getState().setSnapshot({ workspaceExplorerOpen: true });
+  render(
+    <ChatSessionWorkspacePanelContent
+      activeSelection={{
+        kind: 'file',
+        file: {
+          key: 'parent-1::preview::src/index.ts',
+          parentSessionKey: 'parent-1',
+          path: '/Users/peiwang/Projects/nextbot/src/index.ts',
+          label: 'index.ts',
+          viewMode: 'preview',
+          previewViewer: 'source',
+        },
+      }}
+      childSessionTabs={[]}
+      filePreviewRefreshVersion={0}
+      sessionKey="parent-1"
+      sessionCronJobs={[]}
+      sessionProjectRoot="/Users/peiwang/Projects/nextbot"
+      sessionWorkingDir="/Users/peiwang/Projects/nextbot"
+    />,
+  );
+
+  const sourceDirectory = within(screen.getByTestId('workspace-shared-explorer')).getAllByRole('treeitem', {
+    name: 'Open directory: src',
+  })[0];
+  await waitFor(() => {
+    expect(sourceDirectory.getAttribute('aria-expanded')).toBe('true');
+  });
+});
+
+it('keeps the file Explorer closed by default and reuses it after an explicit open', () => {
   const projectFilesProps = {
     activeSelection: { kind: 'project-files' as const },
     childSessionTabs: [],
@@ -659,6 +791,9 @@ it('reuses the Explorer beside a file and persists a dragged compact width', ()
   const explorer = screen.getByTestId('workspace-shared-explorer');
   const breadcrumbs = screen.getByTestId('workspace-file-breadcrumbs');
   const toggle = screen.getByTestId('workspace-explorer-toggle');
+  expect(explorer.getAttribute('aria-hidden')).toBe('true');
+  fireEvent.click(toggle);
+  expect(useChatThreadStore.getState().snapshot.workspaceExplorerOpen).toBe(true);
   expect(screen.getByRole('tree', { name: 'Project files' })).toBe(tree);
   expect(explorer.getAttribute('data-mode')).toBe('side');
   expect(explorer.style.width).toBe('224px');
@@ -674,7 +809,7 @@ it('reuses the Explorer beside a file and persists a dragged compact width', ()
   expect(mocks.setWorkspaceExplorerWidth).toHaveBeenCalledWith(300);
 });
 
-it('uses an overlay only below the compact threshold and closes it without unmounting', () => {
+it('uses an overlay only below the compact threshold and persists closing it without unmounting', () => {
   HTMLElement.prototype.getBoundingClientRect = () => ({
     bottom: 600,
     height: 600,
@@ -686,6 +821,7 @@ it('uses an overlay only below the compact threshold and closes it without unmou
     y: 0,
     toJSON: () => ({}),
   });
+  useChatThreadStore.getState().setSnapshot({ workspaceExplorerOpen: true });
   render(
     <ChatSessionWorkspacePanelContent
       activeSelection={{
@@ -714,6 +850,7 @@ it('uses an overlay only below the compact threshold and closes it without unmou
   expect(screen.queryByTestId('workspace-explorer-resize-handle')).toBeNull();
 
   fireEvent.click(screen.getByTestId('workspace-explorer-scrim'));
+  expect(useChatThreadStore.getState().snapshot.workspaceExplorerOpen).toBe(false);
   expect(explorer.getAttribute('aria-hidden')).toBe('true');
   expect(tree.isConnected).toBe(true);
 });

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

@@ -22,14 +22,18 @@ vi.mock("@/shared/hooks/use-server-path-browse", () => ({
   useServerPathBrowse: () => ({ data: null, error: null, isLoading: false }),
 }));
 
-vi.mock("@nextclaw/agent-chat-ui", () => ({
-  ChatMessageMarkdown: ({ text }: { text: string }) => <div>{text}</div>,
-  FileOperationCodeSurface: ({ block }: { block: ChatFileOperationBlockViewModel }) => (
-    <div data-testid="json-source-preview">
-      {block.lines.map(({ text }, index) => <span key={index}>{text}{"\n"}</span>)}
-    </div>
-  ),
-}));
+vi.mock("@nextclaw/agent-chat-ui", async (importOriginal) => {
+  const actual = await importOriginal();
+  return {
+    ...(actual as object),
+    ChatMessageMarkdown: ({ text }: { text: string }) => <div>{text}</div>,
+    FileOperationCodeSurface: ({ block }: { block: ChatFileOperationBlockViewModel }) => (
+      <div data-testid="json-source-preview">
+        {block.lines.map(({ text }, index) => <span key={index}>{text}{"\n"}</span>)}
+      </div>
+    ),
+  };
+});
 
 it("supports the first text selection in a JSON preview", async () => {
   const onTextExcerptAdd = vi.fn();

package/src/features/chat/features/workspace/components/chat-session-workspace-directory-browser.tsx

@@ -1,4 +1,5 @@
-import { useState, type MouseEventHandler, type ReactNode } from 'react';
+import { useMemo, type ReactNode } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
 import type { ChatFileOpenActionViewModel } from '@nextclaw/agent-chat-ui';
 import { ChevronsUp, Copy, FilePlus2, FolderPlus, LocateFixed, Upload, RefreshCw } from 'lucide-react';
 import { toast } from 'sonner';
@@ -10,6 +11,10 @@ import {
 } from '@/features/chat/features/workspace/components/project-files/workspace-directory-tree';
 import { WorkspaceNewFolderTreeItem } from '@/features/chat/features/workspace/components/project-files/workspace-new-folder-tree-item';
 import { WorkspaceProjectFilesToolbar } from '@/features/chat/features/workspace/components/project-files/workspace-project-files-toolbar';
+import {
+  isWorkspaceProjectBrowseQuery,
+  WorkspaceProjectTree,
+} from '@/features/chat/features/workspace/components/project-files/workspace-project-tree-view';
 import {
   useWorkspaceProjectFilesController,
   type RefreshDirectory,
@@ -18,12 +23,18 @@ import {
 } from '@/features/chat/features/workspace/hooks/use-workspace-file-actions';
 import { ContextMenu, type ContextMenuGroup } from '@/shared/components/ui/context-menu/context-menu';
 import { useConfirmDialog } from '@/shared/hooks/use-confirm-dialog';
+import { useServerPathWatch } from '@/shared/hooks/use-server-path-watch';
 import type { useServerPathBrowse } from '@/shared/hooks/use-server-path-browse';
 import type { ServerPathEntryView } from '@/shared/lib/api';
 import { hostCapabilityManager } from '@/shared/lib/host-capabilities';
 import { t } from '@/shared/lib/i18n';
+import {
+  normalizeWorkspaceProjectTreeRootKey,
+  useWorkspaceProjectTreeStore,
+} from '@/features/chat/features/workspace/stores/workspace-project-tree.store';
 
 type ChatSessionWorkspaceDirectoryBrowserProps = {
+  activeRelativePath?: string | null;
   browseQuery: ReturnType<typeof useServerPathBrowse>;
   onFileOpen: (action: ChatFileOpenActionViewModel) => void;
   sessionKey?: string | null;
@@ -31,13 +42,15 @@ type ChatSessionWorkspaceDirectoryBrowserProps = {
   showRoot?: boolean;
 };
 
+const EMPTY_EXPANDED_PATHS: readonly string[] = [];
+
 function readPathName(path: string): string {
   return path.split(/[\\/]/).filter(Boolean).pop() ?? path;
 }
 
 function WorkspaceDirectoryEntries({
+  activeRelativePath,
   busy,
-  collapseVersion,
   createTarget,
   entries,
   fallbackParentTarget,
@@ -58,9 +71,10 @@ function WorkspaceDirectoryEntries({
   revealPath,
   selectedPath,
   showRoot,
+  treeRootKey,
 }: {
+  activeRelativePath: string | null;
   busy: boolean;
-  collapseVersion: number;
   createTarget: WorkspaceDirectoryActionTarget | null;
   entries: readonly ServerPathEntryView[];
   fallbackParentTarget: WorkspaceDirectoryActionTarget;
@@ -81,16 +95,17 @@ function WorkspaceDirectoryEntries({
   revealPath: string | null;
   selectedPath: string | null;
   showRoot: boolean;
+  treeRootKey: string | null;
 }) {
   if (entries.length === 0) {
     return <div className="px-4 py-8 text-center text-xs text-gray-400">{t('chatWorkspaceDirectoryEmpty')}</div>;
   }
   return entries.map((entry) => (
     <WorkspaceDirectoryTreeEntry
+      activeRelativePath={activeRelativePath}
       key={entry.path}
       browseParentRefresh={refresh}
       busy={busy}
-      collapseVersion={collapseVersion}
       createTarget={createTarget}
       entry={entry}
       level={showRoot ? 1 : 0}
@@ -109,6 +124,7 @@ function WorkspaceDirectoryEntries({
       renderCreateFolder={renderCreateFolder}
       revealPath={revealPath}
       selectedPath={selectedPath}
+      treeRootKey={treeRootKey}
     />
   ));
 }
@@ -203,46 +219,8 @@ function buildRootContextMenuGroups({
   ];
 }
 
-function WorkspaceProjectTree({
-  children,
-  currentPath,
-  onBlankContext,
-  onContextMenu,
-  rootDraft,
-  showRoot,
-}: {
-  children: ReactNode;
-  currentPath: string | null;
-  onBlankContext: () => void;
-  onContextMenu?: MouseEventHandler<HTMLDivElement>;
-  rootDraft: ReactNode;
-  showRoot: boolean;
-}) {
-  return (
-    <div
-      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);
-      }}
-    >
-      {showRoot && currentPath ? (
-        <>
-          {rootDraft}
-          {children}
-        </>
-      ) : (
-        children
-      )}
-    </div>
-  );
-}
-
 function WorkspaceDirectoryBrowserReady({
+  activeRelativePath,
   browseQuery,
   ConfirmDialog,
   controller,
@@ -254,6 +232,7 @@ function WorkspaceDirectoryBrowserReady({
   rootPath,
   showRoot,
 }: {
+  activeRelativePath: string | null;
   browseQuery: ReturnType<typeof useServerPathBrowse>;
   ConfirmDialog: () => ReactNode;
   controller: ReturnType<typeof useWorkspaceProjectFilesController>;
@@ -265,33 +244,43 @@ function WorkspaceDirectoryBrowserReady({
   rootPath: string | null;
   showRoot: boolean;
 }) {
+  const queryClient = useQueryClient();
   const {
-    actions,
     cancelCreateFolder,
     clearSelection,
     completeReveal,
     submitCreate,
-    createError,
-    createKind,
-    createName,
-    createTarget,
     deleteEntry,
-    fileInputRef,
     openCreateFile,
     openCreateFolder,
     requestUpload,
     renameEntry,
-    revealPath,
     selectEntry,
-    selectedCreateTarget,
-    selectedPath,
     setCreateError,
     setCreateName,
     uploadFiles,
-  } = controller;
-  const busy = actions.pendingAction !== null;
-  const [collapseVersion, setCollapseVersion] = useState(0);
-  const rootRefresh = () => browseQuery.refetch();
+  } = controller.actions;
+  const { fileInputRef } = controller.refs;
+  const {
+    createError,
+    createKind,
+    createName,
+    createTarget,
+    pendingAction,
+    revealPath,
+    selectedCreateTarget,
+    selectedPath,
+  } = controller.state;
+  const busy = pendingAction !== null;
+  const treeRootKey = normalizeWorkspaceProjectTreeRootKey(rootPath);
+  const collapseAll = useWorkspaceProjectTreeStore((state) => state.collapseAll);
+  const rootRefresh = () =>
+    rootPath
+      ? queryClient.refetchQueries({
+          predicate: (query) => isWorkspaceProjectBrowseQuery(query.queryKey, rootPath),
+          type: 'active',
+        })
+      : browseQuery.refetch();
   const rootTarget: WorkspaceDirectoryActionTarget | null = rootPath
     ? { label: rootLabel, path: rootPath, refresh: rootRefresh }
     : null;
@@ -300,7 +289,7 @@ function WorkspaceDirectoryBrowserReady({
     <WorkspaceNewFolderTreeItem
       error={createError}
       kind={createKind}
-      isCreating={actions.pendingAction === 'create-directory' || actions.pendingAction === 'create-file'}
+      isCreating={pendingAction === 'create-directory' || pendingAction === 'create-file'}
       level={level}
       name={createName}
       onCancel={cancelCreateFolder}
@@ -318,8 +307,8 @@ function WorkspaceDirectoryBrowserReady({
   };
   const treeEntries = (
     <WorkspaceDirectoryEntries
+      activeRelativePath={activeRelativePath}
       busy={busy}
-      collapseVersion={collapseVersion}
       createTarget={createTarget}
       entries={entries}
       fallbackParentTarget={fallbackParentTarget}
@@ -340,6 +329,7 @@ function WorkspaceDirectoryBrowserReady({
       revealPath={revealPath}
       selectedPath={selectedPath}
       showRoot={false}
+      treeRootKey={treeRootKey || null}
     />
   );
   const tree = (
@@ -355,10 +345,12 @@ function WorkspaceDirectoryBrowserReady({
   const rootMenuGroups = rootTarget
     ? buildRootContextMenuGroups({
         busy,
-        onCollapseAll: () => setCollapseVersion((value) => value + 1),
+        onCollapseAll: () => {
+          if (treeRootKey) collapseAll(treeRootKey);
+        },
         onCreateFile: () => openCreateFile(rootTarget),
         onCreateFolder: () => openCreateFolder(rootTarget),
-        onRefresh: () => void browseQuery.refetch(),
+        onRefresh: () => void rootRefresh(),
         onRevealPath,
         onUpload: () => requestUpload(rootTarget),
         target: rootTarget,
@@ -376,10 +368,12 @@ function WorkspaceDirectoryBrowserReady({
         <WorkspaceProjectFilesToolbar
           disabled={busy}
           rootLabel={rootLabel}
-          onCollapseAll={() => setCollapseVersion((value) => value + 1)}
+          onCollapseAll={() => {
+            if (treeRootKey) collapseAll(treeRootKey);
+          }}
           onNewFile={() => openCreateFile(toolbarTarget)}
           onNewFolder={() => openCreateFolder(toolbarTarget)}
-          onRefresh={() => void browseQuery.refetch()}
+          onRefresh={() => void rootRefresh()}
         />
       ) : null}
       {rootPath ? (
@@ -406,6 +400,7 @@ function WorkspaceDirectoryBrowserReady({
 }
 
 export function ChatSessionWorkspaceDirectoryBrowser({
+  activeRelativePath = null,
   browseQuery,
   onFileOpen,
   sessionKey,
@@ -417,8 +412,30 @@ export function ChatSessionWorkspaceDirectoryBrowser({
   const entries = browseQuery.data?.entries ?? [];
   const errorMessage = readBrowseError(browseQuery);
   const rootPath = showRoot ? (browseQuery.data?.currentPath ?? null) : null;
+  const treeRootKey = normalizeWorkspaceProjectTreeRootKey(rootPath);
+  const expandedPaths = useWorkspaceProjectTreeStore((state) =>
+    treeRootKey ? (state.trees[treeRootKey]?.expandedPaths ?? EMPTY_EXPANDED_PATHS) : EMPTY_EXPANDED_PATHS,
+  );
+  const watchedDirectories = useMemo(() => {
+    if (!rootPath) return [];
+    const separator = rootPath.includes('\\') && !rootPath.includes('/') ? '\\' : '/';
+    const normalizedRoot = rootPath.replace(/[\\/]+$/g, '');
+    const expandedPathSet = new Set(expandedPaths);
+    const visibleExpandedPaths = expandedPaths.filter((relativePath) => {
+      const segments = relativePath.split('/');
+      return segments.slice(0, -1).every((_, index) => expandedPathSet.has(segments.slice(0, index + 1).join('/')));
+    });
+    return [
+      rootPath,
+      ...visibleExpandedPaths.map(
+        (relativePath) => `${normalizedRoot}${separator}${relativePath.replace(/[\\/]+/g, separator)}`,
+      ),
+    ];
+  }, [expandedPaths, rootPath]);
+  useServerPathWatch(watchedDirectories);
   const rootLabel = rootPath ? readPathName(rootPath) : '';
   const controller = useWorkspaceProjectFilesController({
+    activeRelativePath,
     confirm,
     onEntryDeleted: presenter.chatThreadManager.removeWorkspacePath,
     onEntryRenamed: presenter.chatThreadManager.renameWorkspacePath,
@@ -457,6 +474,7 @@ export function ChatSessionWorkspaceDirectoryBrowser({
   }
   return (
     <WorkspaceDirectoryBrowserReady
+      activeRelativePath={activeRelativePath}
       browseQuery={browseQuery}
       ConfirmDialog={ConfirmDialog}
       controller={controller}

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

@@ -24,6 +24,7 @@ import {
 } from '@/features/chat/features/workspace/utils/chat-workspace-panel-layout.utils';
 import { useWorkspaceExplorerLayout } from '@/features/chat/features/workspace/hooks/use-workspace-explorer-layout';
 import { t } from '@/shared/lib/i18n';
+import { resolveWorkspaceRelativePath } from '@/shared/lib/session-project';
 import { cn } from '@/shared/lib/utils';
 import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
 
@@ -175,11 +176,13 @@ function WorkspaceChildSessions({ childSessionTabs }: { childSessionTabs: readon
 }
 
 function WorkspaceProjectFiles({
+  activePath,
   onFileOpen,
   projectRoot,
   sessionKey,
   workingDir,
 }: {
+  activePath: string | null;
   onFileOpen?: (action: ChatFileOpenActionViewModel) => void;
   projectRoot: string | null;
   sessionKey: string | null;
@@ -203,6 +206,9 @@ function WorkspaceProjectFiles({
 
   return (
     <ChatSessionWorkspaceDirectoryBrowser
+      activeRelativePath={
+        activePath ? resolveWorkspaceRelativePath({ path: activePath, sessionProjectRoot: rootPath }) : null
+      }
       key={rootPath}
       browseQuery={browseQuery}
       onFileOpen={onFileOpen ?? presenter.chatThreadManager.openFilePreview}
@@ -384,7 +390,7 @@ export function ChatSessionWorkspacePanelContent({
     onResizeStart,
     setExplorerOpen,
     showExplorer,
-  } = useWorkspaceExplorerLayout({ fileActive, projectFilesActive, sessionProjectRoot, sessionWorkingDir });
+  } = useWorkspaceExplorerLayout({ fileActive, projectFilesActive });
 
   return (
     <div
@@ -414,6 +420,7 @@ export function ChatSessionWorkspacePanelContent({
         aria-hidden={!showExplorer}
       >
         <WorkspaceProjectFiles
+          activePath={fileActive ? activeSelection.file.path : null}
           onFileOpen={(action) => {
             if (compact) setExplorerOpen(false);
             presenter.chatThreadManager.openFilePreview(action);
@@ -445,7 +452,7 @@ export function ChatSessionWorkspacePanelContent({
               fileActive
                 ? {
                     open: explorerOpen,
-                    onToggle: () => setExplorerOpen((value) => !value),
+                    onToggle: () => setExplorerOpen(!explorerOpen),
                   }
                 : undefined
             }