@nextclaw/ui 0.15.23 → 0.15.25

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

@@ -1,282 +1,408 @@
-import { useState, type ReactNode } from "react";
-import { copyText, type ChatFileOpenActionViewModel } from "@nextclaw/agent-chat-ui";
+import { useState, type MouseEventHandler, type ReactNode } from 'react';
+import type { ChatFileOpenActionViewModel } from '@nextclaw/agent-chat-ui';
+import { ChevronsUp, Copy, FilePlus2, FolderPlus, LocateFixed, Upload, RefreshCw } from 'lucide-react';
+import { toast } from 'sonner';
+import { usePresenter } from '@/features/chat/components/providers/chat-presenter.provider';
 import {
-  ChevronDown,
-  ChevronRight,
-  Copy,
-  Folder,
-  FolderOpen,
-  LocateFixed,
-  MessageSquarePlus,
-} from "lucide-react";
-import { toast } from "sonner";
-import { usePresenter } from "@/features/chat/components/providers/chat-presenter.provider";
-import { FileTypeIcon } from "@/shared/components/file-type-icon";
+  copyWorkspacePath,
+  readBrowseError,
+  WorkspaceDirectoryTreeEntry,
+} 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 {
-  ContextMenu,
-  type ContextMenuGroup,
-} from "@/shared/components/ui/context-menu/context-menu";
-import { 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 { cn } from "@/shared/lib/utils";
+  useWorkspaceProjectFilesController,
+  type RefreshDirectory,
+  type WorkspaceDirectoryActionTarget,
+  type WorkspaceTreeSelection,
+} 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 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';
 
 type ChatSessionWorkspaceDirectoryBrowserProps = {
   browseQuery: ReturnType<typeof useServerPathBrowse>;
   onFileOpen: (action: ChatFileOpenActionViewModel) => void;
   sessionKey?: string | null;
-  renderStatus: (params: {
-    text: string;
-    tone?: "muted" | "error";
-  }) => ReactNode;
+  renderStatus: (params: { text: string; tone?: 'muted' | 'error' }) => ReactNode;
   showRoot?: boolean;
 };
 
-function buildDirectoryEntryLabel(entry: ServerPathEntryView): string {
-  const actionLabel =
-    entry.kind === "directory"
-      ? t("chatWorkspaceOpenDirectory")
-      : t("chatWorkspaceOpenFile");
-  return `${actionLabel}: ${entry.name}`;
-}
-
 function readPathName(path: string): string {
   return path.split(/[\\/]/).filter(Boolean).pop() ?? path;
 }
 
-async function copyWorkspacePath(path: string) {
-  const copied = await copyText(path);
-  toast[copied ? "success" : "error"](
-    t(copied ? "chatCodeCopied" : "chatWorkspaceCopyPathFailed"),
-  );
-}
-
-function readBrowseError(
-  browseQuery: ReturnType<typeof useServerPathBrowse>,
-): string | null {
-  if (!browseQuery.error) {
-    return null;
-  }
-  return browseQuery.error instanceof Error
-    ? browseQuery.error.message
-    : String(browseQuery.error);
-}
-
-function WorkspaceDirectoryEntryIcon({
-  fileName,
-  isDirectory,
-  isExpanded,
-}: {
-  fileName: string;
-  isDirectory: boolean;
-  isExpanded: boolean;
-}) {
-  if (!isDirectory) {
-    return <FileTypeIcon fileName={fileName} />;
-  }
-  return isExpanded ? (
-    <FolderOpen className="h-4 w-4 shrink-0 text-amber-500" />
-  ) : (
-    <Folder className="h-4 w-4 shrink-0 text-amber-500" />
-  );
-}
-
-function WorkspaceDirectoryTreeChildren({
-  browseQuery,
-  level,
-  onAddFileToChat,
+function WorkspaceDirectoryEntries({
+  busy,
+  collapseVersion,
+  createTarget,
+  entries,
+  fallbackParentTarget,
+  mutable,
+  onAddToChat,
+  onCreateFile,
+  onCreateFolder,
+  onDelete,
   onFileOpen,
+  onRevealComplete,
+  onRename,
   onRevealPath,
-  parentRelativePath,
+  onSelect,
+  onUpload,
+  refresh,
+  relativePaths,
+  renderCreateFolder,
+  revealPath,
+  selectedPath,
+  showRoot,
 }: {
-  browseQuery: ReturnType<typeof useServerPathBrowse>;
-  level: number;
-  onAddFileToChat?: (entry: ServerPathEntryView, relativePath: string) => void;
+  busy: boolean;
+  collapseVersion: number;
+  createTarget: WorkspaceDirectoryActionTarget | null;
+  entries: readonly ServerPathEntryView[];
+  fallbackParentTarget: WorkspaceDirectoryActionTarget;
+  mutable: boolean;
+  onAddToChat?: (entry: ServerPathEntryView, relativePath: string) => void;
+  onCreateFile: (target: WorkspaceDirectoryActionTarget) => void;
+  onCreateFolder: (target: WorkspaceDirectoryActionTarget) => void;
+  onDelete: (entry: ServerPathEntryView, refresh: RefreshDirectory) => void;
   onFileOpen: (action: ChatFileOpenActionViewModel) => void;
+  onRevealComplete: () => void;
+  onRename: (entry: ServerPathEntryView, name: string, refresh: RefreshDirectory) => Promise<unknown>;
   onRevealPath?: (path: string) => void;
-  parentRelativePath: string | null;
+  onSelect: (selection: WorkspaceTreeSelection) => void;
+  onUpload: (target: WorkspaceDirectoryActionTarget) => void;
+  refresh: RefreshDirectory;
+  relativePaths: boolean;
+  renderCreateFolder: (level: number) => ReactNode;
+  revealPath: string | null;
+  selectedPath: string | null;
+  showRoot: boolean;
 }) {
-  const entries = browseQuery.data?.entries ?? [];
-  const errorMessage = readBrowseError(browseQuery);
-  const statusStyle = { paddingLeft: `${36 + level * 14}px` };
-
-  if (browseQuery.isLoading && !browseQuery.data) {
-    return (
-      <div
-        className="h-7 truncate pr-2 text-[11px] leading-7 text-gray-400"
-        style={statusStyle}
-      >
-        {t("chatWorkspaceLoadingDirectory")}
-      </div>
-    );
-  }
-  if (errorMessage && !browseQuery.data) {
-    return (
-      <div
-        className="h-7 truncate pr-2 text-[11px] leading-7 text-rose-600"
-        style={statusStyle}
-        title={errorMessage}
-      >
-        {t("chatWorkspaceDirectoryLoadFailed")}
-      </div>
-    );
-  }
   if (entries.length === 0) {
-    return (
-      <div
-        className="h-7 truncate pr-2 text-[11px] leading-7 text-gray-400"
-        style={statusStyle}
-      >
-        {t("chatWorkspaceDirectoryEmpty")}
-      </div>
-    );
+    return <div className="px-4 py-8 text-center text-xs text-gray-400">{t('chatWorkspaceDirectoryEmpty')}</div>;
   }
   return entries.map((entry) => (
     <WorkspaceDirectoryTreeEntry
       key={entry.path}
+      browseParentRefresh={refresh}
+      busy={busy}
+      collapseVersion={collapseVersion}
+      createTarget={createTarget}
       entry={entry}
-      level={level + 1}
-      onAddFileToChat={onAddFileToChat}
+      level={showRoot ? 1 : 0}
+      onAddToChat={onAddToChat}
+      onCreateFile={mutable ? onCreateFile : undefined}
+      onCreateFolder={mutable ? onCreateFolder : undefined}
+      onDelete={mutable ? onDelete : undefined}
       onFileOpen={onFileOpen}
+      onRevealComplete={onRevealComplete}
+      onRename={onRename}
       onRevealPath={onRevealPath}
-      relativePath={
-        parentRelativePath
-          ? `${parentRelativePath}/${entry.name}`
-          : null
-      }
+      onSelect={onSelect}
+      onUpload={mutable ? onUpload : undefined}
+      parentCreateTarget={fallbackParentTarget}
+      relativePath={relativePaths ? entry.name : null}
+      renderCreateFolder={renderCreateFolder}
+      revealPath={revealPath}
+      selectedPath={selectedPath}
     />
   ));
 }
 
-function WorkspaceDirectoryTreeEntry({
-  entry,
-  level,
-  onAddFileToChat,
-  onFileOpen,
+function buildRootContextMenuGroups({
+  busy,
+  onCollapseAll,
+  onCreateFile,
+  onCreateFolder,
+  onRefresh,
   onRevealPath,
-  relativePath,
+  onUpload,
+  target,
 }: {
-  entry: ServerPathEntryView;
-  level: number;
-  onAddFileToChat?: (entry: ServerPathEntryView, relativePath: string) => void;
-  onFileOpen: (action: ChatFileOpenActionViewModel) => void;
+  busy: boolean;
+  onCollapseAll: () => void;
+  onCreateFile: () => void;
+  onCreateFolder: () => void;
+  onRefresh: () => void;
   onRevealPath?: (path: string) => void;
-  relativePath: string | null;
-}) {
-  const isDirectory = entry.kind === "directory";
-  const [isExpanded, setIsExpanded] = useState(false);
-  const browseQuery = useServerPathBrowse({
-    path: entry.path,
-    includeFiles: true,
-    enabled: isDirectory && isExpanded,
-  });
-  const contextMenuGroups: ContextMenuGroup[] = [
+  onUpload: () => void;
+  target: WorkspaceDirectoryActionTarget;
+}): ContextMenuGroup[] {
+  return [
     {
-      key: "primary",
+      key: 'manage',
       items: [
-        ...(entry.kind === "file" && relativePath && onAddFileToChat
-          ? [{
-              key: "add-to-chat",
-              label: t("chatWorkspaceAddToChat"),
-              icon: <MessageSquarePlus className="h-4 w-4" />,
-              restoreFocus: false,
-              onSelect: () => onAddFileToChat(entry, relativePath),
-            }]
-          : []),
-        ...(onRevealPath
-          ? [{
-              key: "reveal",
-              label: t("chatWorkspaceRevealInFileManager"),
-              icon: <LocateFixed className="h-4 w-4" />,
-              onSelect: () => onRevealPath(entry.path),
-            }]
-          : []),
+        {
+          key: 'new-file',
+          label: t('chatWorkspaceNewFile'),
+          icon: <FilePlus2 className="h-4 w-4" />,
+          disabled: busy,
+          restoreFocus: false,
+          onSelect: onCreateFile,
+        },
+        {
+          key: 'new-folder',
+          label: t('chatWorkspaceNewFolder'),
+          icon: <FolderPlus className="h-4 w-4" />,
+          disabled: busy,
+          restoreFocus: false,
+          onSelect: onCreateFolder,
+        },
+        {
+          key: 'upload',
+          label: t('chatWorkspaceUploadFilesHere'),
+          icon: <Upload className="h-4 w-4" />,
+          disabled: busy,
+          restoreFocus: false,
+          onSelect: onUpload,
+        },
       ],
     },
     {
-      key: "copy",
+      key: 'view',
       items: [
         {
-          key: "copy-path",
-          label: t("chatWorkspaceCopyPath"),
-          icon: <Copy className="h-4 w-4" />,
-          onSelect: () => void copyWorkspacePath(entry.path),
+          key: 'refresh',
+          label: t('chatWorkspaceRefreshExplorer'),
+          icon: <RefreshCw className="h-4 w-4" />,
+          onSelect: onRefresh,
         },
-        ...(relativePath
-          ? [{
-              key: "copy-relative-path",
-              label: t("chatWorkspaceCopyRelativePath"),
-              icon: <Copy className="h-4 w-4" />,
-              onSelect: () => void copyWorkspacePath(relativePath),
-            }]
+        {
+          key: 'collapse',
+          label: t('chatWorkspaceCollapseAll'),
+          icon: <ChevronsUp className="h-4 w-4" />,
+          onSelect: onCollapseAll,
+        },
+      ],
+    },
+    {
+      key: 'path',
+      items: [
+        ...(onRevealPath
+          ? [
+              {
+                key: 'reveal',
+                label: t('chatWorkspaceRevealInFileManager'),
+                icon: <LocateFixed className="h-4 w-4" />,
+                onSelect: () => onRevealPath(target.path),
+              },
+            ]
           : []),
+        {
+          key: 'copy-path',
+          label: t('chatWorkspaceCopyPath'),
+          icon: <Copy className="h-4 w-4" />,
+          onSelect: () => void copyWorkspacePath(target.path),
+        },
       ],
     },
   ];
-  const activateEntry = () => {
-    if (isDirectory) {
-      setIsExpanded((value) => !value);
-      return;
-    }
-    onFileOpen({
-      path: entry.path,
-      label: entry.name,
-      viewMode: "preview",
-    });
-  };
+}
 
+function WorkspaceProjectTree({
+  children,
+  currentPath,
+  onBlankContext,
+  onContextMenu,
+  rootDraft,
+  showRoot,
+}: {
+  children: ReactNode;
+  currentPath: string | null;
+  onBlankContext: () => void;
+  onContextMenu?: MouseEventHandler<HTMLDivElement>;
+  rootDraft: ReactNode;
+  showRoot: boolean;
+}) {
   return (
     <div
-      role="treeitem"
-      aria-expanded={isDirectory ? isExpanded : undefined}
-      aria-label={buildDirectoryEntryLabel(entry)}
+      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);
+      }}
     >
-      <ContextMenu
-        groups={contextMenuGroups}
-        label={t("chatWorkspaceFileContextMenu")}
-      >
-        <button
-          type="button"
-          className={cn(
-            "flex h-7 w-full min-w-0 items-center gap-1.5 pr-2 text-left text-[13px] text-gray-700 transition-colors hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-border",
-            entry.hidden ? "opacity-65" : null,
-          )}
-          style={{ paddingLeft: `${8 + level * 14}px` }}
-          onClick={activateEntry}
-        >
-          <span className="inline-flex h-4 w-4 shrink-0 items-center justify-center text-gray-400">
-            {isDirectory ? (
-              isExpanded ? (
-                <ChevronDown className="h-3.5 w-3.5" />
-              ) : (
-                <ChevronRight className="h-3.5 w-3.5" />
-              )
-            ) : null}
-          </span>
-          <WorkspaceDirectoryEntryIcon
-            fileName={entry.name}
-            isDirectory={isDirectory}
-            isExpanded={isExpanded}
-          />
-          <span className="min-w-0 flex-1 truncate">{entry.name}</span>
-        </button>
-      </ContextMenu>
+      {showRoot && currentPath ? (
+        <>
+          {rootDraft}
+          {children}
+        </>
+      ) : (
+        children
+      )}
+    </div>
+  );
+}
 
-      {isDirectory && isExpanded ? (
-        <div role="group">
-          <WorkspaceDirectoryTreeChildren
-            browseQuery={browseQuery}
-            level={level}
-            onAddFileToChat={onAddFileToChat}
-            onFileOpen={onFileOpen}
-            onRevealPath={onRevealPath}
-            parentRelativePath={relativePath}
-          />
-        </div>
+function WorkspaceDirectoryBrowserReady({
+  browseQuery,
+  ConfirmDialog,
+  controller,
+  entries,
+  onAddToChat,
+  onFileOpen,
+  onRevealPath,
+  rootLabel,
+  rootPath,
+  showRoot,
+}: {
+  browseQuery: ReturnType<typeof useServerPathBrowse>;
+  ConfirmDialog: () => ReactNode;
+  controller: ReturnType<typeof useWorkspaceProjectFilesController>;
+  entries: readonly ServerPathEntryView[];
+  onAddToChat?: (entry: ServerPathEntryView, relativePath: string) => void;
+  onFileOpen: (action: ChatFileOpenActionViewModel) => void;
+  onRevealPath?: (path: string) => void;
+  rootLabel: string;
+  rootPath: string | null;
+  showRoot: boolean;
+}) {
+  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();
+  const rootTarget: WorkspaceDirectoryActionTarget | null = rootPath
+    ? { label: rootLabel, path: rootPath, refresh: rootRefresh }
+    : null;
+  const toolbarTarget = selectedCreateTarget ?? rootTarget;
+  const renderCreateFolder = (level: number) => (
+    <WorkspaceNewFolderTreeItem
+      error={createError}
+      kind={createKind}
+      isCreating={actions.pendingAction === 'create-directory' || actions.pendingAction === 'create-file'}
+      level={level}
+      name={createName}
+      onCancel={cancelCreateFolder}
+      onNameChange={(name) => {
+        setCreateName(name);
+        setCreateError(null);
+      }}
+      onSubmit={() => void submitCreate()}
+    />
+  );
+  const fallbackParentTarget = rootTarget ?? {
+    label: '',
+    path: browseQuery.data?.currentPath ?? '',
+    refresh: rootRefresh,
+  };
+  const treeEntries = (
+    <WorkspaceDirectoryEntries
+      busy={busy}
+      collapseVersion={collapseVersion}
+      createTarget={createTarget}
+      entries={entries}
+      fallbackParentTarget={fallbackParentTarget}
+      mutable={Boolean(rootPath)}
+      onAddToChat={onAddToChat}
+      onCreateFile={openCreateFile}
+      onCreateFolder={openCreateFolder}
+      onDelete={(target, refresh) => void deleteEntry(target, refresh)}
+      onFileOpen={onFileOpen}
+      onRevealComplete={completeReveal}
+      onRename={renameEntry}
+      onRevealPath={onRevealPath}
+      onSelect={selectEntry}
+      onUpload={requestUpload}
+      refresh={rootRefresh}
+      relativePaths={Boolean(onAddToChat)}
+      renderCreateFolder={renderCreateFolder}
+      revealPath={revealPath}
+      selectedPath={selectedPath}
+      showRoot={false}
+    />
+  );
+  const tree = (
+    <WorkspaceProjectTree
+      currentPath={rootPath}
+      onBlankContext={clearSelection}
+      rootDraft={createTarget?.path === rootPath ? renderCreateFolder(0) : null}
+      showRoot={showRoot}
+    >
+      {treeEntries}
+    </WorkspaceProjectTree>
+  );
+  const rootMenuGroups = rootTarget
+    ? buildRootContextMenuGroups({
+        busy,
+        onCollapseAll: () => setCollapseVersion((value) => value + 1),
+        onCreateFile: () => openCreateFile(rootTarget),
+        onCreateFolder: () => openCreateFolder(rootTarget),
+        onRefresh: () => void browseQuery.refetch(),
+        onRevealPath,
+        onUpload: () => requestUpload(rootTarget),
+        target: rootTarget,
+      })
+    : [];
+
+  const content = (
+    <div
+      className="flex h-full min-h-0 flex-col bg-white"
+      onContextMenu={(event) => {
+        if (!(event.target as HTMLElement).closest('[data-workspace-tree-entry]')) clearSelection();
+      }}
+    >
+      {rootPath && toolbarTarget ? (
+        <WorkspaceProjectFilesToolbar
+          disabled={busy}
+          rootLabel={rootLabel}
+          onCollapseAll={() => setCollapseVersion((value) => value + 1)}
+          onNewFile={() => openCreateFile(toolbarTarget)}
+          onNewFolder={() => openCreateFolder(toolbarTarget)}
+          onRefresh={() => void browseQuery.refetch()}
+        />
+      ) : null}
+      {rootPath ? (
+        <input
+          ref={fileInputRef}
+          type="file"
+          multiple
+          className="sr-only"
+          aria-label={t('chatWorkspaceUploadFiles')}
+          onChange={(event) => void uploadFiles(Array.from(event.currentTarget.files ?? []))}
+        />
       ) : null}
+      {tree}
+      <ConfirmDialog />
     </div>
   );
+  return rootTarget ? (
+    <ContextMenu groups={rootMenuGroups} label={t('chatWorkspaceRootContextMenu')}>
+      {content}
+    </ContextMenu>
+  ) : (
+    content
+  );
 }
 
 export function ChatSessionWorkspaceDirectoryBrowser({
@@ -287,85 +413,60 @@ export function ChatSessionWorkspaceDirectoryBrowser({
   showRoot = false,
 }: ChatSessionWorkspaceDirectoryBrowserProps) {
   const presenter = usePresenter();
+  const { confirm, ConfirmDialog } = useConfirmDialog();
   const entries = browseQuery.data?.entries ?? [];
   const errorMessage = readBrowseError(browseQuery);
+  const rootPath = showRoot ? (browseQuery.data?.currentPath ?? null) : null;
+  const rootLabel = rootPath ? readPathName(rootPath) : '';
+  const controller = useWorkspaceProjectFilesController({
+    confirm,
+    onEntryDeleted: presenter.chatThreadManager.removeWorkspacePath,
+    onEntryRenamed: presenter.chatThreadManager.renameWorkspacePath,
+    rootPath,
+  });
   const onRevealPath = hostCapabilityManager.canRevealPath()
     ? (path: string) => {
         void hostCapabilityManager.revealPath(path).then((result) => {
-          if (!result.revealed) {
-            toast.error(t("chatWorkspaceRevealPathFailed"));
-          }
-        });
-      }
-    : undefined;
-  const onAddFileToChat = sessionKey !== undefined
-    ? (entry: ServerPathEntryView, relativePath: string) => {
-        presenter.chatComposerIntentManager.requestFileReference({
-          targetSessionKey: sessionKey,
-          tokenKey: relativePath,
-          label: entry.name,
+          if (!result.revealed) toast.error(t('chatWorkspaceRevealPathFailed'));
         });
       }
     : undefined;
+  const onAddToChat =
+    sessionKey !== undefined
+      ? (entry: ServerPathEntryView, relativePath: string) => {
+          const request =
+            entry.kind === 'directory'
+              ? presenter.chatComposerIntentManager.requestDirectoryReference
+              : presenter.chatComposerIntentManager.requestFileReference;
+          request({
+            targetSessionKey: sessionKey,
+            tokenKey: relativePath,
+            label: entry.name,
+          });
+        }
+      : undefined;
 
   if (browseQuery.isLoading && !browseQuery.data) {
-    return renderStatus({ text: t("chatWorkspaceLoadingDirectory") });
+    return renderStatus({ text: t('chatWorkspaceLoadingDirectory') });
   }
-
   if (errorMessage && !browseQuery.data) {
     return renderStatus({
-      tone: "error",
-      text: `${t("chatWorkspaceDirectoryLoadFailed")}: ${errorMessage}`,
+      tone: 'error',
+      text: `${t('chatWorkspaceDirectoryLoadFailed')}: ${errorMessage}`,
     });
   }
-
-  if (entries.length === 0) {
-    return renderStatus({ text: t("chatWorkspaceDirectoryEmpty") });
-  }
-
   return (
-    <div
-      data-testid="workspace-directory-browser"
-      role="tree"
-      aria-label={t("chatWorkspaceProjectFiles")}
-      className="h-full overflow-auto bg-white py-2 custom-scrollbar"
-    >
-      {showRoot && browseQuery.data ? (
-        <div role="treeitem" aria-expanded="true">
-          <div className="flex h-8 items-center gap-1.5 border-b border-gray-100 px-2 text-xs font-semibold text-gray-700">
-            <ChevronDown className="h-3.5 w-3.5 shrink-0 text-gray-400" />
-            <FolderOpen className="h-4 w-4 shrink-0 text-amber-500" />
-            <span className="min-w-0 flex-1 truncate" title={browseQuery.data.currentPath}>
-              {readPathName(browseQuery.data.currentPath)}
-            </span>
-          </div>
-          <div role="group" className="pt-1">
-            {entries.map((entry) => (
-              <WorkspaceDirectoryTreeEntry
-                key={entry.path}
-                entry={entry}
-                level={1}
-                onAddFileToChat={onAddFileToChat}
-                onFileOpen={onFileOpen}
-                onRevealPath={onRevealPath}
-                relativePath={onAddFileToChat ? entry.name : null}
-              />
-            ))}
-          </div>
-        </div>
-      ) : (
-        entries.map((entry) => (
-          <WorkspaceDirectoryTreeEntry
-            key={entry.path}
-            entry={entry}
-            level={0}
-            onAddFileToChat={onAddFileToChat}
-            onFileOpen={onFileOpen}
-            onRevealPath={onRevealPath}
-            relativePath={onAddFileToChat ? entry.name : null}
-          />
-        ))
-      )}
-    </div>
+    <WorkspaceDirectoryBrowserReady
+      browseQuery={browseQuery}
+      ConfirmDialog={ConfirmDialog}
+      controller={controller}
+      entries={entries}
+      onAddToChat={onAddToChat}
+      onFileOpen={onFileOpen}
+      onRevealPath={onRevealPath}
+      rootLabel={rootLabel}
+      rootPath={rootPath}
+      showRoot={showRoot}
+    />
   );
 }