@nextclaw/ui 0.14.4 → 0.15.1

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

@@ -1,24 +1,55 @@
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
+import type {
+  ChatFileOpenActionViewModel,
+  ChatFileOperationBlockViewModel,
+} from "@nextclaw/agent-chat-ui";
 import { ChatSessionWorkspaceFilePreview } from "@/features/chat/features/workspace/components/chat-session-workspace-file-preview";
 import type { ChatWorkspaceFileTab } from "@/features/chat/stores/chat-thread.store";
 import { t } from "@/shared/lib/i18n";
 
 const serverPathReadMock = vi.fn();
+const serverPathBrowseMock = vi.fn();
+
+type RenderWorkspaceFilePreviewOptions = {
+  file?: Partial<ChatWorkspaceFileTab>;
+  onFileOpen?: (action: ChatFileOpenActionViewModel) => void;
+  sessionProjectRoot?: string | null;
+  sessionWorkingDir?: string | null;
+};
+
+type TextReadDataOverrides = {
+  languageHint?: string;
+  resolvedPath?: string;
+  text?: string;
+  truncated?: boolean;
+};
 
 vi.mock("@/shared/hooks/use-server-path-read", () => ({
   useServerPathRead: (...args: unknown[]) => serverPathReadMock(...args),
 }));
 
+vi.mock("@/shared/hooks/use-server-path-browse", () => ({
+  useServerPathBrowse: (...args: unknown[]) => serverPathBrowseMock(...args),
+}));
+
 vi.mock("@nextclaw/agent-chat-ui", () => ({
   ChatMessageMarkdown: ({ text }: { text: string }) => (
     <div data-testid="markdown-preview">{text}</div>
   ),
   FileOperationCodeSurface: ({
+    block,
     layout,
   }: {
+    block: ChatFileOperationBlockViewModel;
     layout?: "compact" | "workspace";
-  }) => <div data-testid="file-code-surface" data-layout={layout ?? "compact"} />,
+  }) => (
+    <div
+      data-testid="file-code-surface"
+      data-language-hint={block.languageHint ?? ""}
+      data-layout={layout ?? "compact"}
+    />
+  ),
 }));
 
 function buildWorkspaceFile(
@@ -34,37 +65,201 @@ function buildWorkspaceFile(
   };
 }
 
-describe("ChatSessionWorkspaceFilePreview", () => {
-  beforeEach(() => {
-    serverPathReadMock.mockReset();
+function mockTextRead(overrides: TextReadDataOverrides = {}) {
+  serverPathReadMock.mockReturnValue({
+    isLoading: false,
+    error: null,
+    data: {
+      kind: "text",
+      resolvedPath: "/tmp/example.ts",
+      text: "const answer = 42;\n",
+      truncated: false,
+      ...overrides,
+    },
   });
+}
 
-  it("renders preview files inside a full-height workspace code surface", () => {
-    serverPathReadMock.mockReturnValue({
+function renderWorkspaceFilePreview({
+  file,
+  onFileOpen = vi.fn(),
+  sessionProjectRoot = "/tmp",
+  sessionWorkingDir = "/tmp",
+}: RenderWorkspaceFilePreviewOptions = {}) {
+  render(
+    <ChatSessionWorkspaceFilePreview
+      file={buildWorkspaceFile(file ?? {})}
+      sessionProjectRoot={sessionProjectRoot}
+      sessionWorkingDir={sessionWorkingDir}
+      onFileOpen={onFileOpen}
+    />,
+  );
+  return { onFileOpen };
+}
+
+function mockWorkspaceBreadcrumbBrowseTree() {
+  serverPathBrowseMock.mockImplementation(
+    ({ path }: { path?: string | null }) => ({
       isLoading: false,
       error: null,
-      data: {
-        kind: "text",
-        resolvedPath: "/tmp/example.ts",
-        text: "const answer = 42;\n",
-        truncated: false,
-      },
-    });
+      data:
+        path === "/tmp/workspace/src/components"
+          ? {
+              currentPath: "/tmp/workspace/src/components",
+              parentPath: "/tmp/workspace/src",
+              homePath: "/Users/demo",
+              breadcrumbs: [
+                { label: "workspace", path: "/tmp/workspace" },
+                { label: "src", path: "/tmp/workspace/src" },
+                { label: "components", path: "/tmp/workspace/src/components" },
+              ],
+              entries: [
+                {
+                  name: "button.tsx",
+                  path: "/tmp/workspace/src/components/button.tsx",
+                  kind: "file",
+                  hidden: false,
+                },
+              ],
+            }
+          : {
+              currentPath: "/tmp/workspace/src",
+              parentPath: "/tmp/workspace",
+              homePath: "/Users/demo",
+              breadcrumbs: [
+                { label: "workspace", path: "/tmp/workspace" },
+                { label: "src", path: "/tmp/workspace/src" },
+              ],
+              entries: [
+                {
+                  name: "components",
+                  path: "/tmp/workspace/src/components",
+                  kind: "directory",
+                  hidden: false,
+                },
+                {
+                  name: "index.ts",
+                  path: "/tmp/workspace/src/index.ts",
+                  kind: "file",
+                  hidden: false,
+                },
+              ],
+            },
+    }),
+  );
+}
 
-    render(
-      <ChatSessionWorkspaceFilePreview
-        file={buildWorkspaceFile({ viewMode: "preview" })}
-        sessionProjectRoot="/tmp"
-        sessionWorkingDir="/tmp"
-        onFileOpen={vi.fn()}
-      />,
-    );
+beforeEach(() => {
+  serverPathReadMock.mockReset();
+  serverPathBrowseMock.mockReset();
+  serverPathBrowseMock.mockReturnValue({
+    isLoading: false,
+    error: null,
+    data: {
+      currentPath: "/tmp",
+      parentPath: null,
+      homePath: "/Users/demo",
+      breadcrumbs: [],
+      entries: [],
+    },
+  });
+});
+
+describe("ChatSessionWorkspaceFilePreview rendering", () => {
+  it("renders preview files inside a full-height workspace code surface", () => {
+    mockTextRead();
+    renderWorkspaceFilePreview();
 
     expect(screen.getByTestId("file-code-surface").getAttribute("data-layout")).toBe(
       "workspace",
     );
   });
 
+  it("passes server language hints to the workspace code surface", () => {
+    mockTextRead({ languageHint: "js", resolvedPath: "/tmp/example.js" });
+    renderWorkspaceFilePreview({
+      file: {
+        label: "example.js",
+        path: "/tmp/example.js",
+        viewMode: "preview",
+      },
+    });
+
+    expect(
+      screen.getByTestId("file-code-surface").getAttribute("data-language-hint"),
+    ).toBe("js");
+  });
+
+  it("keeps HTML files in the source preview when preview viewer is automatic", () => {
+    mockTextRead({
+      resolvedPath: "/tmp/example.html",
+      text: "<!doctype html><h1>Hello</h1>",
+    });
+    renderWorkspaceFilePreview({
+      file: {
+        label: "example.html",
+        path: "/tmp/example.html",
+        viewMode: "preview",
+      },
+    });
+
+    expect(screen.queryByTestId("workspace-html-preview")).toBeNull();
+    expect(screen.getByTestId("file-code-surface")).toBeTruthy();
+  });
+
+  it("renders HTML files through an unrestricted server content iframe when rendered preview is requested", () => {
+    mockTextRead({
+      resolvedPath: "/tmp/example.html",
+      text: "<!doctype html><h1>Hello</h1>",
+    });
+    renderWorkspaceFilePreview({
+      file: {
+        label: "example.html",
+        path: "/tmp/example.html",
+        previewViewer: "rendered",
+        viewMode: "preview",
+      },
+    });
+
+    const frame = screen.getByTestId("workspace-html-preview");
+    expect(frame.getAttribute("sandbox")).toBeNull();
+    expect(frame.getAttribute("srcdoc")).toBeNull();
+    expect(frame.getAttribute("src")).toContain(
+      "/api/server-paths/content/__abs__/tmp/example.html",
+    );
+    expect(screen.queryByTestId("file-code-surface")).toBeNull();
+  });
+
+  it("keeps HTML files in the source preview when source is requested", () => {
+    mockTextRead({
+      resolvedPath: "/tmp/example.html",
+      text: "<!doctype html><h1>Hello</h1>",
+    });
+    renderWorkspaceFilePreview({
+      file: {
+        path: "/tmp/example.html",
+        previewViewer: "source",
+        viewMode: "preview",
+      },
+    });
+
+    expect(screen.queryByTestId("workspace-html-preview")).toBeNull();
+    expect(screen.getByTestId("file-code-surface")).toBeTruthy();
+  });
+
+  it("falls back to the source preview when rendered is requested for a non-HTML file", () => {
+    mockTextRead({ resolvedPath: "/tmp/example.txt", text: "plain text" });
+    renderWorkspaceFilePreview({
+      file: {
+        path: "/tmp/example.txt",
+        previewViewer: "rendered",
+        viewMode: "preview",
+      },
+    });
+
+    expect(screen.queryByTestId("workspace-html-preview")).toBeNull();
+    expect(screen.getByTestId("file-code-surface")).toBeTruthy();
+  });
+
   it("renders diff files inside a full-height workspace code surface", () => {
     serverPathReadMock.mockReturnValue({
       isLoading: false,
@@ -72,20 +267,15 @@ describe("ChatSessionWorkspaceFilePreview", () => {
       data: null,
     });
 
-    render(
-      <ChatSessionWorkspaceFilePreview
-        file={buildWorkspaceFile({
-          viewMode: "diff",
-          beforeText: "const answer = 41;\n",
-          afterText: "const answer = 42;\n",
-          oldStartLine: 1,
-          newStartLine: 1,
-        })}
-        sessionProjectRoot="/tmp"
-        sessionWorkingDir="/tmp"
-        onFileOpen={vi.fn()}
-      />,
-    );
+    renderWorkspaceFilePreview({
+      file: {
+        viewMode: "diff",
+        beforeText: "const answer = 41;\n",
+        afterText: "const answer = 42;\n",
+        oldStartLine: 1,
+        newStartLine: 1,
+      },
+    });
 
     expect(screen.getByTestId("file-code-surface").getAttribute("data-layout")).toBe(
       "workspace",
@@ -93,53 +283,24 @@ describe("ChatSessionWorkspaceFilePreview", () => {
   });
 
   it("does not repeat the preview badge inside the workspace header", () => {
-    serverPathReadMock.mockReturnValue({
-      isLoading: false,
-      error: null,
-      data: {
-        kind: "text",
-        resolvedPath: "/tmp/example.ts",
-        text: "const answer = 42;\n",
-        truncated: false,
-      },
-    });
-
-    render(
-      <ChatSessionWorkspaceFilePreview
-        file={buildWorkspaceFile({ viewMode: "preview" })}
-        sessionProjectRoot="/tmp"
-        sessionWorkingDir="/tmp"
-        onFileOpen={vi.fn()}
-      />,
-    );
+    mockTextRead();
+    renderWorkspaceFilePreview();
 
     expect(screen.queryByText(t("chatWorkspacePreview"))).toBeNull();
     expect(screen.getByTitle("/tmp/example.ts")).toBeTruthy();
     expect(screen.getByText("tmp")).toBeTruthy();
     expect(screen.getByText("example.ts")).toBeTruthy();
   });
+});
 
+describe("ChatSessionWorkspaceFilePreview breadcrumbs", () => {
   it("renders project-relative breadcrumbs when the file is inside the workspace", () => {
-    serverPathReadMock.mockReturnValue({
-      isLoading: false,
-      error: null,
-      data: {
-        kind: "text",
-        resolvedPath: "/tmp/workspace/src/example.ts",
-        text: "const answer = 42;\n",
-        truncated: false,
-      },
+    mockTextRead({ resolvedPath: "/tmp/workspace/src/example.ts" });
+    renderWorkspaceFilePreview({
+      sessionProjectRoot: "/tmp/workspace",
+      sessionWorkingDir: "/tmp/workspace",
     });
 
-    render(
-      <ChatSessionWorkspaceFilePreview
-        file={buildWorkspaceFile({ viewMode: "preview" })}
-        sessionProjectRoot="/tmp/workspace"
-        sessionWorkingDir="/tmp/workspace"
-        onFileOpen={vi.fn()}
-      />,
-    );
-
     expect(screen.getByText("workspace")).toBeTruthy();
     expect(screen.getByText("src")).toBeTruthy();
     expect(screen.getByText("example.ts")).toBeTruthy();
@@ -151,30 +312,68 @@ describe("ChatSessionWorkspaceFilePreview", () => {
     );
   });
 
-  it("keeps line and truncation metadata without the duplicated type badge", () => {
-    serverPathReadMock.mockReturnValue({
-      isLoading: false,
-      error: null,
-      data: {
-        kind: "text",
-        resolvedPath: "/tmp/example.ts",
-        text: "const answer = 42;\n",
-        truncated: true,
-      },
+  it("browses from a breadcrumb segment and opens selected files", () => {
+    mockTextRead({ resolvedPath: "/tmp/workspace/src/example.ts" });
+    mockWorkspaceBreadcrumbBrowseTree();
+    const onFileOpen = vi.fn();
+
+    renderWorkspaceFilePreview({
+      onFileOpen,
+      sessionProjectRoot: "/tmp/workspace",
+      sessionWorkingDir: "/tmp/workspace",
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "src" }));
+
+    expect(serverPathBrowseMock).toHaveBeenCalledWith({
+      path: "/tmp/workspace/src",
+      includeFiles: true,
+      enabled: true,
+    });
+    fireEvent.click(screen.getByRole("button", { name: "components" }));
+    fireEvent.click(screen.getByRole("button", { name: "button.tsx" }));
+
+    expect(onFileOpen).toHaveBeenCalledWith({
+      path: "/tmp/workspace/src/components/button.tsx",
+      label: "button.tsx",
+      viewMode: "preview",
+    });
+  });
+
+  it("keeps the breadcrumb browser compact", () => {
+    mockTextRead({ resolvedPath: "/tmp/workspace/src/example.ts" });
+    mockWorkspaceBreadcrumbBrowseTree();
+
+    renderWorkspaceFilePreview({
+      sessionProjectRoot: "/tmp/workspace",
+      sessionWorkingDir: "/tmp/workspace",
     });
 
-    render(
-      <ChatSessionWorkspaceFilePreview
-        file={buildWorkspaceFile({
-          viewMode: "preview",
-          line: 12,
-          column: 4,
-        })}
-        sessionProjectRoot="/tmp"
-        sessionWorkingDir="/tmp"
-        onFileOpen={vi.fn()}
-      />,
+    fireEvent.click(screen.getByRole("button", { name: "src" }));
+
+    expect(screen.getByTestId("workspace-breadcrumb-popover").className).toContain(
+      "w-[22rem]",
+    );
+    expect(screen.getByTestId("workspace-breadcrumb-browser").className).toContain(
+      "max-h-72",
+    );
+    expect(screen.getAllByRole("button", { name: "workspace" }).at(-1)?.className).toContain(
+      "h-5",
     );
+    expect(screen.getByRole("button", { name: "components" }).className).toContain(
+      "h-6",
+    );
+  });
+
+  it("keeps line and truncation metadata without the duplicated type badge", () => {
+    mockTextRead({ truncated: true });
+    renderWorkspaceFilePreview({
+      file: {
+        viewMode: "preview",
+        line: 12,
+        column: 4,
+      },
+    });
 
     expect(screen.getByText("L12:4")).toBeTruthy();
     expect(screen.getByText(t("chatWorkspacePreviewTruncated"))).toBeTruthy();
@@ -182,30 +381,20 @@ describe("ChatSessionWorkspaceFilePreview", () => {
   });
 
   it("uses the session working directory as the base path when no project root is set", () => {
-    serverPathReadMock.mockReturnValue({
-      isLoading: false,
-      error: null,
-      data: {
-        kind: "text",
-        resolvedPath: "/tmp/agent-workspace/AGENTS.md",
-        text: "# Agent rules\n",
-        truncated: false,
+    mockTextRead({
+      resolvedPath: "/tmp/agent-workspace/AGENTS.md",
+      text: "# Agent rules\n",
+    });
+    renderWorkspaceFilePreview({
+      file: {
+        path: "AGENTS.md",
+        label: "AGENTS.md",
+        viewMode: "preview",
       },
+      sessionProjectRoot: null,
+      sessionWorkingDir: "/tmp/agent-workspace",
     });
 
-    render(
-      <ChatSessionWorkspaceFilePreview
-        file={buildWorkspaceFile({
-          path: "AGENTS.md",
-          label: "AGENTS.md",
-          viewMode: "preview",
-        })}
-        sessionProjectRoot={null}
-        sessionWorkingDir="/tmp/agent-workspace"
-        onFileOpen={vi.fn()}
-      />,
-    );
-
     expect(serverPathReadMock).toHaveBeenCalledWith({
       path: "AGENTS.md",
       basePath: "/tmp/agent-workspace",

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

@@ -0,0 +1,121 @@
+import { Fragment } from "react";
+import type { ChatFileOpenActionViewModel } from "@nextclaw/agent-chat-ui";
+import { ChevronRight, File, Folder, Loader2 } from "lucide-react";
+import { ScrollArea } from "@/shared/components/ui/scroll-area";
+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";
+
+function WorkspaceBreadcrumbEntryIcon({
+  kind,
+}: {
+  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" />
+  );
+}
+
+export function WorkspaceBreadcrumbBrowser({
+  browsePath,
+  onBrowsePathChange,
+  onClose,
+  onFileOpen,
+}: {
+  browsePath: string | null;
+  onBrowsePathChange: (path: string) => void;
+  onClose: () => void;
+  onFileOpen: (action: ChatFileOpenActionViewModel) => void;
+}) {
+  const browseQuery = useServerPathBrowse({
+    path: browsePath,
+    includeFiles: true,
+    enabled: Boolean(browsePath),
+  });
+  const errorMessage = browseQuery.error
+    ? browseQuery.error instanceof Error
+      ? browseQuery.error.message
+      : String(browseQuery.error)
+    : null;
+  const entries = browseQuery.data?.entries ?? [];
+
+  const openEntry = (entry: ServerPathEntryView) => {
+    if (entry.kind === "directory") {
+      onBrowsePathChange(entry.path);
+      return;
+    }
+
+    onFileOpen({
+      path: entry.path,
+      label: entry.name,
+      viewMode: "preview",
+    });
+    onClose();
+  };
+
+  return (
+    <div
+      data-testid="workspace-breadcrumb-browser"
+      className="flex max-h-72 flex-col overflow-hidden"
+    >
+      <div className="border-b border-gray-200 px-2 py-1">
+        <div className="flex min-w-0 flex-wrap items-center gap-0.5 text-[11px] leading-none text-gray-600">
+          {browseQuery.data?.breadcrumbs.map((breadcrumb, index) => (
+            <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"
+                onClick={() => onBrowsePathChange(breadcrumb.path)}
+              >
+                {breadcrumb.label}
+              </button>
+              {index < browseQuery.data.breadcrumbs.length - 1 ? (
+                <ChevronRight className="h-3 w-3 shrink-0 text-gray-300" />
+              ) : null}
+            </Fragment>
+          ))}
+        </div>
+      </div>
+
+      <ScrollArea className="min-h-0 flex-1 px-1 py-1">
+        {browseQuery.isLoading ? (
+          <div className="flex items-center gap-1.5 px-2 py-4 text-[11px] text-gray-500">
+            <Loader2 className="h-3.5 w-3.5 animate-spin" />
+            {t("loading")}
+          </div>
+        ) : errorMessage ? (
+          <div className="px-2 py-3 text-[11px] text-rose-600">
+            {t("pathBrowseFailed")}: {errorMessage}
+          </div>
+        ) : entries.length > 0 ? (
+          <div className="space-y-0.5">
+            {entries.map((entry) => (
+              <button
+                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",
+                  entry.hidden ? "opacity-65" : null,
+                )}
+                onClick={() => openEntry(entry)}
+              >
+                <WorkspaceBreadcrumbEntryIcon kind={entry.kind} />
+                <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" />
+                ) : null}
+              </button>
+            ))}
+          </div>
+        ) : (
+          <div className="px-2 py-4 text-[11px] text-gray-500">
+            {t("emptyDirectory")}
+          </div>
+        )}
+      </ScrollArea>
+    </div>
+  );
+}