@nextclaw/ui 0.15.2 → 0.15.4

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

@@ -1,13 +1,22 @@
 import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { expect, it, vi } from "vitest";
 import { ChatSessionWorkspacePanelContent } from "@/features/chat/features/workspace/components/chat-session-workspace-panel-content";
 import type { ResolvedChildSessionTab } from "@/features/chat/features/ncp/hooks/use-ncp-child-session-tabs-view";
 
+const mocks = vi.hoisted(() => ({
+  materializeSideChatDraft: vi.fn(),
+  openChildSessions: vi.fn(),
+  openFilePreview: vi.fn(),
+  openProjectFiles: vi.fn(),
+  openSessionCronPanel: vi.fn(),
+  selectChildSessionDetail: vi.fn(),
+}));
+
 vi.mock("@/features/chat/components/providers/chat-presenter.provider", () => ({
   usePresenter: () => ({
     chatThreadManager: {
-      materializeSideChatDraft: vi.fn(),
-      openFilePreview: vi.fn(),
+      ...mocks,
     },
   }),
 }));
@@ -16,6 +25,33 @@ vi.mock("@/features/chat/features/conversation/components/session-conversation-a
   SessionConversationArea: () => <div data-testid="session-conversation-area" />,
 }));
 
+vi.mock("@/shared/hooks/use-server-path-browse", () => ({
+  useServerPathBrowse: () => ({
+    isLoading: false,
+    error: null,
+    data: {
+      currentPath: "/Users/peiwang/Projects/nextbot",
+      parentPath: "/Users/peiwang/Projects",
+      homePath: "/Users/peiwang",
+      breadcrumbs: [],
+      entries: [
+        {
+          name: "src",
+          path: "/Users/peiwang/Projects/nextbot/src",
+          kind: "directory",
+          hidden: false,
+        },
+        {
+          name: "package.json",
+          path: "/Users/peiwang/Projects/nextbot/package.json",
+          kind: "file",
+          hidden: false,
+        },
+      ],
+    },
+  }),
+}));
+
 function createChildTab(): ResolvedChildSessionTab {
   return {
     sessionKey: "child-1",
@@ -40,7 +76,9 @@ it("shows compact child session metadata without repeating the tab title", () =>
         kind: "child-session",
         tab: createChildTab(),
       }}
+      childSessionTabs={[createChildTab()]}
       filePreviewRefreshVersion={0}
+      sessionKey="parent-1"
       sessionCronJobs={[]}
       sessionProjectRoot={null}
       sessionWorkingDir={null}
@@ -53,3 +91,76 @@ it("shows compact child session metadata without repeating the tab title", () =>
   expect(screen.getByText("nextbot")).toBeTruthy();
   expect(screen.getByTitle("/Users/peiwang/Projects/nextbot")).toBeTruthy();
 });
+
+it("shows all session workspace entries in the overview", async () => {
+  const user = userEvent.setup();
+  const childTab = createChildTab();
+
+  render(
+    <ChatSessionWorkspacePanelContent
+      activeSelection={{ kind: "overview" }}
+      childSessionTabs={[childTab]}
+      filePreviewRefreshVersion={0}
+      sessionKey="parent-1"
+      sessionCronJobs={[]}
+      sessionProjectRoot="/tmp/project"
+      sessionWorkingDir="/tmp/project"
+    />,
+  );
+
+  expect(screen.getByText("Overview")).toBeTruthy();
+  const childSessionsButton = screen.getByRole("button", {
+    name: /Child sessions/,
+  });
+  const cronJobsButton = screen.getByRole("button", {
+    name: /Session cron jobs/,
+  });
+
+  expect((childSessionsButton as HTMLButtonElement).disabled).toBe(false);
+  expect((cronJobsButton as HTMLButtonElement).disabled).toBe(false);
+
+  await user.click(childSessionsButton);
+  await user.click(cronJobsButton);
+  await user.click(screen.getByRole("button", { name: /Project files/ }));
+
+  expect(mocks.openChildSessions).toHaveBeenCalledWith("parent-1");
+  expect(mocks.openSessionCronPanel).toHaveBeenCalledWith("parent-1");
+  expect(mocks.openProjectFiles).toHaveBeenCalledWith("parent-1");
+});
+
+it("shows an empty child sessions page instead of disabling the entry", () => {
+  render(
+    <ChatSessionWorkspacePanelContent
+      activeSelection={{ kind: "child-sessions" }}
+      childSessionTabs={[]}
+      filePreviewRefreshVersion={0}
+      sessionKey="parent-1"
+      sessionCronJobs={[]}
+      sessionProjectRoot={null}
+      sessionWorkingDir={null}
+    />,
+  );
+
+  expect(screen.getByText("No child sessions yet.")).toBeTruthy();
+});
+
+it("shows the selected session project as a hierarchical file tree", () => {
+  render(
+    <ChatSessionWorkspacePanelContent
+      activeSelection={{ kind: "project-files" }}
+      childSessionTabs={[]}
+      filePreviewRefreshVersion={0}
+      sessionKey="parent-1"
+      sessionCronJobs={[]}
+      sessionProjectRoot="/Users/peiwang/Projects/nextbot"
+      sessionWorkingDir="/Users/peiwang/Projects/nextbot"
+    />,
+  );
+
+  expect(screen.getByRole("tree", { name: "Project files" })).toBeTruthy();
+  expect(screen.getByText("nextbot")).toBeTruthy();
+  expect(
+    screen.getByRole("treeitem", { name: "Open directory: src" }),
+  ).toBeTruthy();
+  expect(document.querySelector('[data-file-type-icon="npm"]')).toBeTruthy();
+});

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

@@ -14,6 +14,7 @@ const mocks = vi.hoisted(() => ({
   goBackWorkspacePanel: vi.fn(),
   goForwardWorkspacePanel: vi.fn(),
   closeWorkspacePanel: vi.fn(),
+  setWorkspacePanelWidth: vi.fn(),
   invalidateQueries: vi.fn(),
 }));
 

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

@@ -1,7 +1,8 @@
-import type { ReactNode } from "react";
+import { useState, type ReactNode } from "react";
 import type { ChatFileOpenActionViewModel } from "@nextclaw/agent-chat-ui";
-import { ChevronRight, FileCode2, Folder } from "lucide-react";
-import type { useServerPathBrowse } from "@/shared/hooks/use-server-path-browse";
+import { ChevronDown, ChevronRight, Folder, FolderOpen } from "lucide-react";
+import { FileTypeIcon } from "@/shared/components/file-type-icon";
+import { useServerPathBrowse } from "@/shared/hooks/use-server-path-browse";
 import type { ServerPathEntryView } from "@/shared/lib/api";
 import { t } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
@@ -13,20 +14,9 @@ type ChatSessionWorkspaceDirectoryBrowserProps = {
     text: string;
     tone?: "muted" | "error";
   }) => ReactNode;
+  showRoot?: boolean;
 };
 
-function WorkspaceDirectoryEntryIcon({
-  kind,
-}: {
-  kind: ServerPathEntryView["kind"];
-}) {
-  return kind === "directory" ? (
-    <Folder className="h-4 w-4 shrink-0 text-emerald-600" />
-  ) : (
-    <FileCode2 className="h-4 w-4 shrink-0 text-sky-600" />
-  );
-}
-
 function buildDirectoryEntryLabel(entry: ServerPathEntryView): string {
   const actionLabel =
     entry.kind === "directory"
@@ -35,18 +25,115 @@ function buildDirectoryEntryLabel(entry: ServerPathEntryView): string {
   return `${actionLabel}: ${entry.name}`;
 }
 
-export function ChatSessionWorkspaceDirectoryBrowser({
+function readPathName(path: string): string {
+  return path.split(/[\\/]/).filter(Boolean).pop() ?? path;
+}
+
+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,
   onFileOpen,
-  renderStatus,
-}: ChatSessionWorkspaceDirectoryBrowserProps) {
+}: {
+  browseQuery: ReturnType<typeof useServerPathBrowse>;
+  level: number;
+  onFileOpen: (action: ChatFileOpenActionViewModel) => void;
+}) {
   const entries = browseQuery.data?.entries ?? [];
-  const errorMessage = browseQuery.error
-    ? browseQuery.error instanceof Error
-      ? browseQuery.error.message
-      : String(browseQuery.error)
-    : null;
-  const openEntry = (entry: ServerPathEntryView) => {
+  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 entries.map((entry) => (
+    <WorkspaceDirectoryTreeEntry
+      key={entry.path}
+      entry={entry}
+      level={level + 1}
+      onFileOpen={onFileOpen}
+    />
+  ));
+}
+
+function WorkspaceDirectoryTreeEntry({
+  entry,
+  level,
+  onFileOpen,
+}: {
+  entry: ServerPathEntryView;
+  level: number;
+  onFileOpen: (action: ChatFileOpenActionViewModel) => void;
+}) {
+  const isDirectory = entry.kind === "directory";
+  const [isExpanded, setIsExpanded] = useState(false);
+  const browseQuery = useServerPathBrowse({
+    path: entry.path,
+    includeFiles: true,
+    enabled: isDirectory && isExpanded,
+  });
+  const activateEntry = () => {
+    if (isDirectory) {
+      setIsExpanded((value) => !value);
+      return;
+    }
     onFileOpen({
       path: entry.path,
       label: entry.name,
@@ -54,6 +141,60 @@ export function ChatSessionWorkspaceDirectoryBrowser({
     });
   };
 
+  return (
+    <div
+      role="treeitem"
+      aria-expanded={isDirectory ? isExpanded : undefined}
+      aria-label={buildDirectoryEntryLabel(entry)}
+    >
+      <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>
+
+      {isDirectory && isExpanded ? (
+        <div role="group">
+          <WorkspaceDirectoryTreeChildren
+            browseQuery={browseQuery}
+            level={level}
+            onFileOpen={onFileOpen}
+          />
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export function ChatSessionWorkspaceDirectoryBrowser({
+  browseQuery,
+  onFileOpen,
+  renderStatus,
+  showRoot = false,
+}: ChatSessionWorkspaceDirectoryBrowserProps) {
+  const entries = browseQuery.data?.entries ?? [];
+  const errorMessage = readBrowseError(browseQuery);
+
   if (browseQuery.isLoading && !browseQuery.data) {
     return renderStatus({ text: t("chatWorkspaceLoadingDirectory") });
   }
@@ -72,28 +213,40 @@ export function ChatSessionWorkspaceDirectoryBrowser({
   return (
     <div
       data-testid="workspace-directory-browser"
-      className="h-full overflow-auto bg-white px-2 py-2 custom-scrollbar"
+      role="tree"
+      aria-label={t("chatWorkspaceProjectFiles")}
+      className="h-full overflow-auto bg-white py-2 custom-scrollbar"
     >
-      <div className="space-y-0.5">
-        {entries.map((entry) => (
-          <button
+      {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}
+                onFileOpen={onFileOpen}
+              />
+            ))}
+          </div>
+        </div>
+      ) : (
+        entries.map((entry) => (
+          <WorkspaceDirectoryTreeEntry
             key={entry.path}
-            type="button"
-            aria-label={buildDirectoryEntryLabel(entry)}
-            className={cn(
-              "flex h-8 w-full min-w-0 items-center gap-2 rounded-sm px-2 text-left text-sm text-gray-700 transition-colors hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
-              entry.hidden ? "opacity-65" : null,
-            )}
-            onClick={() => openEntry(entry)}
-          >
-            <WorkspaceDirectoryEntryIcon kind={entry.kind} />
-            <span className="min-w-0 flex-1 truncate">{entry.name}</span>
-            {entry.kind === "directory" ? (
-              <ChevronRight className="h-3.5 w-3.5 shrink-0 text-gray-300" />
-            ) : null}
-          </button>
-        ))}
-      </div>
+            entry={entry}
+            level={0}
+            onFileOpen={onFileOpen}
+          />
+        ))
+      )}
     </div>
   );
 }

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

@@ -1,6 +1,7 @@
 import { Fragment } from "react";
 import type { ChatFileOpenActionViewModel } from "@nextclaw/agent-chat-ui";
-import { ChevronRight, File, Folder, Loader2 } from "lucide-react";
+import { ChevronRight, Folder, Loader2 } from "lucide-react";
+import { FileTypeIcon } from "@/shared/components/file-type-icon";
 import { ScrollArea } from "@/shared/components/ui/scroll-area";
 import { useServerPathBrowse } from "@/shared/hooks/use-server-path-browse";
 import type { ServerPathEntryView } from "@/shared/lib/api";
@@ -8,14 +9,16 @@ import { t } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
 
 function WorkspaceBreadcrumbEntryIcon({
+  name,
   kind,
 }: {
+  name: string;
   kind: ServerPathEntryView["kind"];
 }) {
   return kind === "directory" ? (
     <Folder className="h-3.5 w-3.5 shrink-0 text-emerald-600" />
   ) : (
-    <File className="h-3.5 w-3.5 shrink-0 text-sky-600" />
+    <FileTypeIcon fileName={name} size="compact" />
   );
 }
 
@@ -67,7 +70,7 @@ export function WorkspaceBreadcrumbBrowser({
             <Fragment key={breadcrumb.path}>
               <button
                 type="button"
-                className="h-5 rounded-sm px-1 text-left hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
+                className="h-5 rounded-sm px-1 text-left hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
                 onClick={() => onBrowsePathChange(breadcrumb.path)}
               >
                 {breadcrumb.label}
@@ -97,12 +100,15 @@ export function WorkspaceBreadcrumbBrowser({
                 key={entry.path}
                 type="button"
                 className={cn(
-                  "flex h-6 w-full items-center gap-1.5 rounded-sm px-1.5 text-left text-[11px] text-gray-700 transition-colors hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+                  "flex h-6 w-full items-center gap-1.5 rounded-sm px-1.5 text-left text-[11px] text-gray-700 transition-colors hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
                   entry.hidden ? "opacity-65" : null,
                 )}
                 onClick={() => openEntry(entry)}
               >
-                <WorkspaceBreadcrumbEntryIcon kind={entry.kind} />
+                <WorkspaceBreadcrumbEntryIcon
+                  kind={entry.kind}
+                  name={entry.name}
+                />
                 <span className="min-w-0 flex-1 truncate">{entry.name}</span>
                 {entry.kind === "directory" ? (
                   <ChevronRight className="h-3 w-3 shrink-0 text-gray-300" />

package/src/features/chat/features/workspace/components/chat-session-workspace-file-breadcrumbs.tsx

@@ -1,7 +1,9 @@
 import { Fragment, useState } from "react";
 import type { ChatFileOpenActionViewModel } from "@nextclaw/agent-chat-ui";
-import { ChevronRight, FileCode2, Folder, FolderTree } from "lucide-react";
-import { Popover, PopoverContent, PopoverTrigger } from "@/shared/components/ui/popover";
+import { ChevronRight, Folder, FolderTree } from "lucide-react";
+import { Popover, PopoverTrigger } from "@/shared/components/ui/popover";
+import { FileTypeIcon } from "@/shared/components/file-type-icon";
+import { ChatPopoverContent } from "@/features/chat/components/chat-popover-content";
 import { WorkspaceBreadcrumbBrowser } from "./chat-session-workspace-file-breadcrumb-browser";
 import type {
   WorkspaceFileBreadcrumbSegmentViewModel,
@@ -48,7 +50,7 @@ function WorkspaceBreadcrumbSegmentButton({
           type="button"
           aria-current={segment.isCurrent ? "page" : undefined}
           className={cn(
-            "inline-flex h-5 items-center gap-1 rounded-sm px-1 text-[11px] leading-none transition-colors hover:bg-gray-200/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+            "inline-flex h-5 items-center gap-1 rounded-sm px-1 text-[11px] leading-none transition-colors hover:bg-gray-200/80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
             segment.kind === "workspace"
               ? "bg-primary/8 text-primary hover:bg-primary/12"
               : segment.isCurrent
@@ -62,12 +64,12 @@ function WorkspaceBreadcrumbSegmentButton({
           ) : segment.kind === "directory" && segment.isCurrent ? (
             <Folder className="h-3 w-3 shrink-0" />
           ) : segment.isCurrent ? (
-            <FileCode2 className="h-3 w-3 shrink-0" />
+            <FileTypeIcon fileName={segment.label} size="compact" />
           ) : null}
           <span>{segment.label}</span>
         </button>
       </PopoverTrigger>
-      <PopoverContent
+      <ChatPopoverContent
         data-testid="workspace-breadcrumb-popover"
         className="w-[22rem] rounded-md p-0"
         align="start"
@@ -78,7 +80,7 @@ function WorkspaceBreadcrumbSegmentButton({
           onClose={() => setOpen(false)}
           onFileOpen={onFileOpen}
         />
-      </PopoverContent>
+      </ChatPopoverContent>
     </Popover>
   );
 }