@nextclaw/ui 0.15.1 → 0.15.3

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

@@ -14,6 +14,7 @@ const serverPathBrowseMock = vi.fn();
 type RenderWorkspaceFilePreviewOptions = {
   file?: Partial<ChatWorkspaceFileTab>;
   onFileOpen?: (action: ChatFileOpenActionViewModel) => void;
+  refreshVersion?: number;
   sessionProjectRoot?: string | null;
   sessionWorkingDir?: string | null;
 };
@@ -82,6 +83,7 @@ function mockTextRead(overrides: TextReadDataOverrides = {}) {
 function renderWorkspaceFilePreview({
   file,
   onFileOpen = vi.fn(),
+  refreshVersion,
   sessionProjectRoot = "/tmp",
   sessionWorkingDir = "/tmp",
 }: RenderWorkspaceFilePreviewOptions = {}) {
@@ -90,6 +92,7 @@ function renderWorkspaceFilePreview({
       file={buildWorkspaceFile(file ?? {})}
       sessionProjectRoot={sessionProjectRoot}
       sessionWorkingDir={sessionWorkingDir}
+      refreshVersion={refreshVersion}
       onFileOpen={onFileOpen}
     />,
   );
@@ -97,74 +100,148 @@ function renderWorkspaceFilePreview({
 }
 
 function mockWorkspaceBreadcrumbBrowseTree() {
-  serverPathBrowseMock.mockImplementation(
-    ({ path }: { path?: string | null }) => ({
-      isLoading: false,
-      error: null,
-      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,
-                },
-              ],
+  serverPathBrowseMock.mockImplementation(({ path }: { path?: string | null }) => {
+    if (path === "/tmp/workspace/src/components") {
+      return {
+        isLoading: false,
+        error: null,
+        data: {
+          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,
             },
-    }),
-  );
+          ],
+        },
+      };
+    }
+
+    if (path === "/tmp/workspace/src") {
+      return {
+        isLoading: false,
+        error: null,
+        data: {
+          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,
+            },
+          ],
+        },
+      };
+    }
+
+    return {
+      isLoading: false,
+      error: new Error("server path must point to a directory"),
+      data: null,
+    };
+  });
 }
 
 beforeEach(() => {
   serverPathReadMock.mockReset();
   serverPathBrowseMock.mockReset();
-  serverPathBrowseMock.mockReturnValue({
+  serverPathReadMock.mockReturnValue({
     isLoading: false,
     error: null,
-    data: {
-      currentPath: "/tmp",
-      parentPath: null,
-      homePath: "/Users/demo",
-      breadcrumbs: [],
-      entries: [],
-    },
+    data: null,
+  });
+  serverPathBrowseMock.mockReturnValue({
+    isLoading: false,
+    error: new Error("server path must point to a directory"),
+    data: null,
   });
 });
 
 describe("ChatSessionWorkspaceFilePreview rendering", () => {
+  it("renders attachment content URLs as workspace-native media previews", () => {
+    renderWorkspaceFilePreview({
+      file: {
+        key: "attachment-image",
+        path: "photo.png",
+        label: "photo.png",
+        viewMode: "preview",
+        contentUrl: "/api/ncp/assets/content?uri=asset%3A%2F%2Fstore%2Fphoto",
+        mimeType: "image/png",
+      },
+    });
+
+    expect(serverPathReadMock).toHaveBeenCalledWith(
+      expect.objectContaining({ enabled: false }),
+    );
+    expect(serverPathBrowseMock).toHaveBeenCalledWith(
+      expect.objectContaining({ enabled: false }),
+    );
+    const image = screen.getByTestId("workspace-content-image");
+    expect(image.getAttribute("src")).toBe(
+      "/api/ncp/assets/content?uri=asset%3A%2F%2Fstore%2Fphoto",
+    );
+    expect(image.getAttribute("alt")).toBe("photo.png");
+  });
+
+  it("offers download and system open actions for unsupported office attachments", () => {
+    renderWorkspaceFilePreview({
+      file: {
+        key: "attachment-docx",
+        path: "overview.zh-CN.docx",
+        label: "overview.zh-CN.docx",
+        viewMode: "preview",
+        contentUrl: "/api/ncp/assets/content?uri=asset%3A%2F%2Fstore%2Foverview",
+        mimeType:
+          "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+      },
+    });
+
+    expect(screen.getByTestId("workspace-content-unsupported")).toBeTruthy();
+    expect(
+      screen.getByTestId("workspace-content-unsupported").textContent,
+    ).toContain("overview.zh-CN.docx");
+    expect(screen.getByText(t("chatWorkspacePreviewUnsupported"))).toBeTruthy();
+    expect(screen.getByText(t("chatWorkspacePreviewUnsupportedHint"))).toBeTruthy();
+
+    const download = screen.getByRole("link", {
+      name: t("chatWorkspacePreviewDownload"),
+    });
+    expect(download.getAttribute("href")).toBe(
+      "/api/ncp/assets/content?uri=asset%3A%2F%2Fstore%2Foverview",
+    );
+    expect(download.getAttribute("download")).toBe("overview.zh-CN.docx");
+
+    const openExternally = screen.getByRole("link", {
+      name: t("chatWorkspacePreviewOpenExternally"),
+    });
+    expect(openExternally.getAttribute("href")).toBe(
+      "/api/ncp/assets/content?uri=asset%3A%2F%2Fstore%2Foverview",
+    );
+    expect(openExternally.getAttribute("target")).toBe("_blank");
+  });
+
   it("renders preview files inside a full-height workspace code surface", () => {
     mockTextRead();
     renderWorkspaceFilePreview();
@@ -229,6 +306,26 @@ describe("ChatSessionWorkspaceFilePreview rendering", () => {
     expect(screen.queryByTestId("file-code-surface")).toBeNull();
   });
 
+  it("adds the refresh version to rendered HTML iframe URLs", () => {
+    mockTextRead({
+      resolvedPath: "/tmp/example.html",
+      text: "<!doctype html><h1>Hello</h1>",
+    });
+    renderWorkspaceFilePreview({
+      file: {
+        label: "example.html",
+        path: "/tmp/example.html",
+        previewViewer: "rendered",
+        viewMode: "preview",
+      },
+      refreshVersion: 3,
+    });
+
+    expect(screen.getByTestId("workspace-html-preview").getAttribute("src")).toContain(
+      "refresh=3",
+    );
+  });
+
   it("keeps HTML files in the source preview when source is requested", () => {
     mockTextRead({
       resolvedPath: "/tmp/example.html",
@@ -291,6 +388,79 @@ describe("ChatSessionWorkspaceFilePreview rendering", () => {
     expect(screen.getByText("tmp")).toBeTruthy();
     expect(screen.getByText("example.ts")).toBeTruthy();
   });
+
+  it("renders directory entries and opens child directories or files", () => {
+    serverPathReadMock.mockReturnValue({
+      isLoading: false,
+      error: new Error("server path must point to a file"),
+      data: null,
+    });
+    serverPathBrowseMock.mockReturnValue({
+      isLoading: false,
+      error: null,
+      data: {
+        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,
+          },
+        ],
+      },
+    });
+    const onFileOpen = vi.fn();
+
+    renderWorkspaceFilePreview({
+      file: {
+        path: "src",
+        label: "src",
+        viewMode: "preview",
+      },
+      onFileOpen,
+      sessionProjectRoot: "/tmp/workspace",
+      sessionWorkingDir: "/tmp/workspace",
+    });
+
+    expect(serverPathBrowseMock).toHaveBeenCalledWith({
+      path: "src",
+      basePath: "/tmp/workspace",
+      includeFiles: true,
+      enabled: true,
+    });
+    expect(screen.getByTestId("workspace-directory-browser")).toBeTruthy();
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Open directory: components" }),
+    );
+    expect(onFileOpen).toHaveBeenCalledWith({
+      path: "/tmp/workspace/src/components",
+      label: "components",
+      viewMode: "preview",
+    });
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Open file: index.ts" }),
+    );
+    expect(onFileOpen).toHaveBeenCalledWith({
+      path: "/tmp/workspace/src/index.ts",
+      label: "index.ts",
+      viewMode: "preview",
+    });
+  });
 });
 
 describe("ChatSessionWorkspaceFilePreview breadcrumbs", () => {

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

@@ -40,6 +40,7 @@ it("shows compact child session metadata without repeating the tab title", () =>
         kind: "child-session",
         tab: createChildTab(),
       }}
+      filePreviewRefreshVersion={0}
       sessionCronJobs={[]}
       sessionProjectRoot={null}
       sessionWorkingDir={null}

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

@@ -0,0 +1,144 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { ChatSessionWorkspacePanel } from "@/features/chat/features/workspace/components/chat-session-workspace-panel";
+import type { ChatWorkspaceFileTab } from "@/features/chat/stores/chat-thread.store";
+import type * as ReactQuery from "@tanstack/react-query";
+
+const mocks = vi.hoisted(() => ({
+  syncVisibleWorkspaceSelection: vi.fn(),
+  selectChildSessionDetail: vi.fn(),
+  selectWorkspaceFile: vi.fn(),
+  closeWorkspaceFile: vi.fn(),
+  openSessionCronPanel: vi.fn(),
+  goBackWorkspacePanel: vi.fn(),
+  goForwardWorkspacePanel: vi.fn(),
+  closeWorkspacePanel: vi.fn(),
+  invalidateQueries: vi.fn(),
+}));
+
+vi.mock("@tanstack/react-query", async (importOriginal) => ({
+  ...(await importOriginal<typeof ReactQuery>()),
+  useQueryClient: () => ({
+    invalidateQueries: mocks.invalidateQueries,
+  }),
+}));
+
+vi.mock("@/features/chat/components/providers/chat-presenter.provider", () => ({
+  usePresenter: () => ({
+    chatThreadManager: mocks,
+  }),
+}));
+
+vi.mock("@/features/chat/features/ncp/hooks/use-ncp-child-session-tabs-view", () => ({
+  useNcpChildSessionTabsView: () => [],
+}));
+
+vi.mock("@/features/chat/features/workspace/components/chat-session-workspace-panel-content", () => ({
+  ChatSessionWorkspacePanelContent: ({
+    activeSelection,
+    filePreviewRefreshVersion,
+  }: {
+    activeSelection: { kind: string };
+    filePreviewRefreshVersion: number;
+  }) => (
+    <div
+      data-file-refresh-version={filePreviewRefreshVersion}
+      data-testid="workspace-panel-content"
+    >
+      {activeSelection.kind}
+    </div>
+  ),
+}));
+
+function createWorkspaceFileTab(): ChatWorkspaceFileTab {
+  return {
+    key: "file-tab",
+    parentSessionKey: "session-1",
+    path: "README.md",
+    viewMode: "preview",
+  };
+}
+
+function renderPanel(displayMode: "docked" | "overlay" = "docked") {
+  const fileTab = createWorkspaceFileTab();
+
+  return render(
+    <ChatSessionWorkspacePanel
+      sessionKey="session-1"
+      childSessionTabs={[]}
+      activeChildSessionKey={null}
+      activeSideChatDraft={null}
+      workspaceFileTabs={[fileTab]}
+      activeWorkspaceFileKey={fileTab.key}
+      workspaceNavigationHistory={[{ kind: "file", key: fileTab.key }]}
+      workspaceNavigationHistoryIndex={0}
+      activePanelKind="file"
+      sessionCronJobs={[]}
+      sessionProjectRoot={null}
+      sessionWorkingDir={null}
+      displayMode={displayMode}
+    />,
+  );
+}
+
+describe("ChatSessionWorkspacePanel", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("refreshes the active workspace file from the top action bar", async () => {
+    const user = userEvent.setup();
+    renderPanel();
+
+    await user.click(screen.getByRole("button", { name: "Refresh preview" }));
+
+    expect(mocks.invalidateQueries).toHaveBeenCalledWith({
+      queryKey: ["server-path-read", "README.md", null],
+    });
+    expect(mocks.invalidateQueries).toHaveBeenCalledWith({
+      queryKey: ["server-path-browse", "README.md", "", true],
+    });
+    expect(
+      screen
+        .getByTestId("workspace-panel-content")
+        .getAttribute("data-file-refresh-version"),
+    ).toBe("1");
+  });
+
+  it("maximizes and restores the docked workspace panel within its container", async () => {
+    const user = userEvent.setup();
+    renderPanel();
+
+    const panel = screen.getByTestId("chat-session-workspace-panel");
+    expect(panel.className).not.toContain("absolute");
+
+    await user.click(
+      screen.getByRole("button", { name: "Maximize workspace panel" }),
+    );
+
+    expect(panel.className).toContain("absolute");
+    expect(panel.className).not.toContain("fixed");
+    expect(
+      screen.queryByTestId("resizable-right-panel-handle"),
+    ).toBeNull();
+
+    await user.click(
+      screen.getByRole("button", { name: "Restore workspace panel" }),
+    );
+
+    expect(panel.className).not.toContain("absolute");
+    expect(screen.getByTestId("resizable-right-panel-handle")).toBeTruthy();
+  });
+
+  it("does not show a redundant maximize action in viewport overlay mode", () => {
+    renderPanel("overlay");
+
+    expect(
+      screen.queryByRole("button", { name: "Maximize workspace panel" }),
+    ).toBeNull();
+    expect(screen.getByTestId("chat-session-workspace-panel").className).toContain(
+      "fixed",
+    );
+  });
+});

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

@@ -0,0 +1,99 @@
+import 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 type { ServerPathEntryView } from "@/shared/lib/api";
+import { t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
+
+type ChatSessionWorkspaceDirectoryBrowserProps = {
+  browseQuery: ReturnType<typeof useServerPathBrowse>;
+  onFileOpen: (action: ChatFileOpenActionViewModel) => void;
+  renderStatus: (params: {
+    text: string;
+    tone?: "muted" | "error";
+  }) => ReactNode;
+};
+
+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"
+      ? t("chatWorkspaceOpenDirectory")
+      : t("chatWorkspaceOpenFile");
+  return `${actionLabel}: ${entry.name}`;
+}
+
+export function ChatSessionWorkspaceDirectoryBrowser({
+  browseQuery,
+  onFileOpen,
+  renderStatus,
+}: ChatSessionWorkspaceDirectoryBrowserProps) {
+  const entries = browseQuery.data?.entries ?? [];
+  const errorMessage = browseQuery.error
+    ? browseQuery.error instanceof Error
+      ? browseQuery.error.message
+      : String(browseQuery.error)
+    : null;
+  const openEntry = (entry: ServerPathEntryView) => {
+    onFileOpen({
+      path: entry.path,
+      label: entry.name,
+      viewMode: "preview",
+    });
+  };
+
+  if (browseQuery.isLoading && !browseQuery.data) {
+    return renderStatus({ text: t("chatWorkspaceLoadingDirectory") });
+  }
+
+  if (errorMessage && !browseQuery.data) {
+    return renderStatus({
+      tone: "error",
+      text: `${t("chatWorkspaceDirectoryLoadFailed")}: ${errorMessage}`,
+    });
+  }
+
+  if (entries.length === 0) {
+    return renderStatus({ text: t("chatWorkspaceDirectoryEmpty") });
+  }
+
+  return (
+    <div
+      data-testid="workspace-directory-browser"
+      className="h-full overflow-auto bg-white px-2 py-2 custom-scrollbar"
+    >
+      <div className="space-y-0.5">
+        {entries.map((entry) => (
+          <button
+            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-1 focus-visible:ring-border",
+              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>
+    </div>
+  );
+}

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

@@ -67,7 +67,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,7 +97,7 @@ 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)}

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

@@ -1,6 +1,6 @@
 import { Fragment, useState } from "react";
 import type { ChatFileOpenActionViewModel } from "@nextclaw/agent-chat-ui";
-import { ChevronRight, FileCode2, FolderTree } from "lucide-react";
+import { ChevronRight, FileCode2, Folder, FolderTree } from "lucide-react";
 import { Popover, PopoverContent, PopoverTrigger } from "@/shared/components/ui/popover";
 import { WorkspaceBreadcrumbBrowser } from "./chat-session-workspace-file-breadcrumb-browser";
 import type {
@@ -48,7 +48,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
@@ -59,6 +59,8 @@ function WorkspaceBreadcrumbSegmentButton({
         >
           {segment.kind === "workspace" ? (
             <FolderTree className="h-3 w-3 shrink-0" />
+          ) : segment.kind === "directory" && segment.isCurrent ? (
+            <Folder className="h-3 w-3 shrink-0" />
           ) : segment.isCurrent ? (
             <FileCode2 className="h-3 w-3 shrink-0" />
           ) : null}