@nextclaw/ui 0.12.8 → 0.12.10

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

@@ -0,0 +1,178 @@
+import { render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { ChatSessionWorkspaceFilePreview } from "@/components/chat/chat-session-workspace-file-preview";
+import type { ChatWorkspaceFileTab } from "@/components/chat/stores/chat-thread.store";
+import { t } from "@/lib/i18n";
+
+const serverPathReadMock = vi.fn();
+
+vi.mock("@/hooks/server-path/use-server-path-read", () => ({
+  useServerPathRead: (...args: unknown[]) => serverPathReadMock(...args),
+}));
+
+vi.mock("@nextclaw/agent-chat-ui", () => ({
+  ChatMessageMarkdown: ({ text }: { text: string }) => (
+    <div data-testid="markdown-preview">{text}</div>
+  ),
+  FileOperationCodeSurface: ({
+    layout,
+  }: {
+    layout?: "compact" | "workspace";
+  }) => <div data-testid="file-code-surface" data-layout={layout ?? "compact"} />,
+}));
+
+function buildWorkspaceFile(
+  overrides: Partial<ChatWorkspaceFileTab>,
+): ChatWorkspaceFileTab {
+  return {
+    key: "workspace-file",
+    parentSessionKey: null,
+    path: "/tmp/example.ts",
+    label: "example.ts",
+    viewMode: "preview",
+    ...overrides,
+  };
+}
+
+describe("ChatSessionWorkspaceFilePreview", () => {
+  beforeEach(() => {
+    serverPathReadMock.mockReset();
+  });
+
+  it("renders preview files inside a full-height workspace code surface", () => {
+    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"
+        onFileOpen={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByTestId("file-code-surface").getAttribute("data-layout")).toBe(
+      "workspace",
+    );
+  });
+
+  it("renders diff files inside a full-height workspace code surface", () => {
+    serverPathReadMock.mockReturnValue({
+      isLoading: false,
+      error: null,
+      data: null,
+    });
+
+    render(
+      <ChatSessionWorkspaceFilePreview
+        file={buildWorkspaceFile({
+          viewMode: "diff",
+          beforeText: "const answer = 41;\n",
+          afterText: "const answer = 42;\n",
+          oldStartLine: 1,
+          newStartLine: 1,
+        })}
+        sessionProjectRoot="/tmp"
+        onFileOpen={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByTestId("file-code-surface").getAttribute("data-layout")).toBe(
+      "workspace",
+    );
+  });
+
+  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"
+        onFileOpen={vi.fn()}
+      />,
+    );
+
+    expect(screen.queryByText(t("chatWorkspacePreview"))).toBeNull();
+    expect(screen.getByTitle("/tmp/example.ts")).toBeTruthy();
+    expect(screen.getByText("tmp")).toBeTruthy();
+    expect(screen.getByText("example.ts")).toBeTruthy();
+  });
+
+  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,
+      },
+    });
+
+    render(
+      <ChatSessionWorkspaceFilePreview
+        file={buildWorkspaceFile({ viewMode: "preview" })}
+        sessionProjectRoot="/tmp/workspace"
+        onFileOpen={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByText("workspace")).toBeTruthy();
+    expect(screen.getByText("src")).toBeTruthy();
+    expect(screen.getByText("example.ts")).toBeTruthy();
+    expect(
+      screen.getByTestId("workspace-file-breadcrumb-scroll").className,
+    ).toContain("py-1.5");
+    expect(screen.getByTestId("workspace-file-breadcrumbs").className).toContain(
+      "workspace-horizontal-scrollbar",
+    );
+  });
+
+  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,
+      },
+    });
+
+    render(
+      <ChatSessionWorkspaceFilePreview
+        file={buildWorkspaceFile({
+          viewMode: "preview",
+          line: 12,
+          column: 4,
+        })}
+        sessionProjectRoot="/tmp"
+        onFileOpen={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByText("L12:4")).toBeTruthy();
+    expect(screen.getByText(t("chatWorkspacePreviewTruncated"))).toBeTruthy();
+    expect(screen.queryByText(t("chatWorkspacePreview"))).toBeNull();
+  });
+});

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

@@ -0,0 +1,278 @@
+import { useMemo } from "react";
+import type {
+  ChatFileOpenActionViewModel,
+  ChatFileOperationBlockViewModel,
+} from "@nextclaw/agent-chat-ui";
+import {
+  ChatMessageMarkdown,
+  FileOperationCodeSurface,
+} from "@nextclaw/agent-chat-ui";
+import type { ChatWorkspaceFileTab } from "@/components/chat/stores/chat-thread.store";
+import { ChatSessionWorkspaceFileBreadcrumbs } from "@/components/chat/workspace/chat-session-workspace-file-breadcrumbs";
+import { useServerPathRead } from "@/hooks/server-path/use-server-path-read";
+import {
+  buildLineDiff,
+  buildPreviewLines,
+} from "@/components/chat/adapters/file-operation/line-builder";
+import { t } from "@/lib/i18n";
+import { buildWorkspaceFileBreadcrumb } from "@/lib/session-project/workspace-file-breadcrumb";
+import { cn } from "@/lib/utils";
+
+function inferPreviewKind(params: {
+  path: string;
+  serverKind?: "text" | "markdown" | "binary";
+}): "text" | "markdown" | "binary" {
+  if (params.serverKind) {
+    return params.serverKind;
+  }
+  return /\.mdx?$/i.test(params.path) ? "markdown" : "text";
+}
+
+function buildPreviewBlock(params: {
+  path: string;
+  text: string;
+  line?: number | null;
+}): ChatFileOperationBlockViewModel {
+  const { line, path, text } = params;
+  const startLine = line ?? 1;
+  return {
+    key: `preview:${path}`,
+    path,
+    display: "preview",
+    lines: buildPreviewLines({
+      text,
+      kind: "context",
+      oldStartLine: startLine,
+      newStartLine: startLine,
+    }),
+    rawText: text,
+    oldStartLine: startLine,
+    newStartLine: startLine,
+  };
+}
+
+function buildDiffBlock(
+  file: ChatWorkspaceFileTab,
+): ChatFileOperationBlockViewModel | null {
+  if (Array.isArray(file.fullLines) && file.fullLines.length > 0) {
+    return {
+      key: `diff:${file.key}`,
+      path: file.path,
+      display: "diff",
+      lines: file.fullLines,
+      fullLines: file.fullLines,
+      ...(file.beforeText ? { beforeText: file.beforeText } : {}),
+      ...(file.afterText ? { afterText: file.afterText } : {}),
+      ...(file.patchText ? { patchText: file.patchText } : {}),
+      ...(typeof file.oldStartLine === "number"
+        ? { oldStartLine: file.oldStartLine }
+        : {}),
+      ...(typeof file.newStartLine === "number"
+        ? { newStartLine: file.newStartLine }
+        : {}),
+    };
+  }
+
+  if (file.beforeText == null && file.afterText == null) {
+    return null;
+  }
+
+  const lines = buildLineDiff({
+    beforeText: file.beforeText ?? "",
+    afterText: file.afterText ?? "",
+    oldStartLine: file.oldStartLine ?? undefined,
+    newStartLine: file.newStartLine ?? undefined,
+  });
+
+  return {
+    key: `diff:${file.key}`,
+    path: file.path,
+    display: "diff",
+    lines,
+    fullLines: lines,
+    ...(file.beforeText ? { beforeText: file.beforeText } : {}),
+    ...(file.afterText ? { afterText: file.afterText } : {}),
+    ...(typeof file.oldStartLine === "number"
+      ? { oldStartLine: file.oldStartLine }
+      : {}),
+    ...(typeof file.newStartLine === "number"
+      ? { newStartLine: file.newStartLine }
+      : {}),
+  };
+}
+
+function WorkspaceFilePreviewStatus({
+  text,
+  tone = "muted",
+}: {
+  text: string;
+  tone?: "muted" | "error";
+}) {
+  return (
+    <div
+      className={cn(
+        "flex h-full items-center justify-center px-6 text-center text-sm",
+        tone === "error" ? "text-rose-600" : "text-gray-500",
+      )}
+    >
+      {text}
+    </div>
+  );
+}
+
+function WorkspaceDiffBody({
+  diffBlock,
+}: {
+  diffBlock: ChatFileOperationBlockViewModel | null;
+}) {
+  if (!diffBlock) {
+    return <WorkspaceFilePreviewStatus text={t("chatWorkspaceDiffEmpty")} />;
+  }
+
+  return (
+    <WorkspaceCodeSurface block={diffBlock} />
+  );
+}
+
+function WorkspaceCodeSurface({
+  block,
+}: {
+  block: ChatFileOperationBlockViewModel;
+}) {
+  return (
+    <div className="h-full overflow-auto custom-scrollbar bg-white">
+      <FileOperationCodeSurface block={block} layout="workspace" />
+    </div>
+  );
+}
+
+function WorkspacePreviewBody({
+  onFileOpen,
+  previewBlock,
+  previewKind,
+  previewQuery,
+  previewText,
+}: {
+  onFileOpen: (action: ChatFileOpenActionViewModel) => void;
+  previewBlock: ChatFileOperationBlockViewModel | null;
+  previewKind: "text" | "markdown" | "binary";
+  previewQuery: ReturnType<typeof useServerPathRead>;
+  previewText: string | null;
+}) {
+  if (previewQuery.isLoading && !previewBlock) {
+    return <WorkspaceFilePreviewStatus text={t("chatWorkspaceLoadingFile")} />;
+  }
+
+  if (previewQuery.data?.kind === "binary") {
+    return (
+      <WorkspaceFilePreviewStatus text={t("chatWorkspacePreviewUnsupported")} />
+    );
+  }
+
+  if (previewQuery.error && !previewBlock) {
+    return (
+      <WorkspaceFilePreviewStatus
+        tone="error"
+        text={
+          previewQuery.error instanceof Error
+            ? previewQuery.error.message
+            : String(previewQuery.error)
+        }
+      />
+    );
+  }
+
+  if (previewKind === "markdown" && previewText) {
+    return (
+      <div className="h-full overflow-auto custom-scrollbar px-5 py-4">
+        <ChatMessageMarkdown
+          text={previewText}
+          role="assistant"
+          texts={{
+            copyCodeLabel: t("chatCodeCopy"),
+            copiedCodeLabel: t("chatCodeCopied"),
+          }}
+          onFileOpen={onFileOpen}
+        />
+      </div>
+    );
+  }
+
+  if (previewBlock) {
+    return <WorkspaceCodeSurface block={previewBlock} />;
+  }
+
+  return <WorkspaceFilePreviewStatus text={t("chatWorkspacePreviewEmpty")} />;
+}
+
+type ChatSessionWorkspaceFilePreviewProps = {
+  file: ChatWorkspaceFileTab;
+  sessionProjectRoot: string | null;
+  onFileOpen: (action: ChatFileOpenActionViewModel) => void;
+};
+
+export function ChatSessionWorkspaceFilePreview({
+  file,
+  sessionProjectRoot,
+  onFileOpen,
+}: ChatSessionWorkspaceFilePreviewProps) {
+  const isPreviewMode = file.viewMode === "preview";
+  const previewQuery = useServerPathRead({
+    path: file.path,
+    basePath: sessionProjectRoot,
+    enabled: isPreviewMode,
+  });
+  const diffBlock = useMemo(
+    () => (file.viewMode === "diff" ? buildDiffBlock(file) : null),
+    [file],
+  );
+  const previewText =
+    isPreviewMode ? previewQuery.data?.text ?? file.rawText ?? null : null;
+  const previewKind = inferPreviewKind({
+    path: previewQuery.data?.resolvedPath ?? file.path,
+    serverKind: previewQuery.data?.kind,
+  });
+  const previewBlock = useMemo(() => {
+    if (!isPreviewMode || !previewText) {
+      return null;
+    }
+    return buildPreviewBlock({
+      path: previewQuery.data?.resolvedPath ?? file.path,
+      text: previewText,
+      line: file.line,
+    });
+  }, [file.line, file.path, isPreviewMode, previewQuery.data?.resolvedPath, previewText]);
+  const resolvedPath = previewQuery.data?.resolvedPath ?? file.path;
+  const isTruncated = Boolean(previewQuery.data?.truncated);
+  const breadcrumb = useMemo(
+    () =>
+      buildWorkspaceFileBreadcrumb({
+        path: resolvedPath,
+        sessionProjectRoot,
+        line: file.line,
+        column: file.column,
+        truncated: isTruncated,
+      }),
+    [file.column, file.line, isTruncated, resolvedPath, sessionProjectRoot],
+  );
+
+  return (
+    <div className="flex h-full min-h-0 flex-col bg-white">
+      <ChatSessionWorkspaceFileBreadcrumbs breadcrumb={breadcrumb} />
+
+      <div className="flex-1 min-h-0 overflow-hidden">
+        {file.viewMode === "diff" ? (
+          <WorkspaceDiffBody diffBlock={diffBlock} />
+        ) : (
+          <WorkspacePreviewBody
+            onFileOpen={onFileOpen}
+            previewBlock={previewBlock}
+            previewKind={previewKind}
+            previewQuery={previewQuery}
+            previewText={previewText}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/chat/chat-session-workspace-panel-nav.tsx

@@ -0,0 +1,203 @@
+import { FileCode2, MessageSquareText, X } from "lucide-react";
+import type { ResolvedChildSessionTab } from "@/components/chat/ncp/session-conversation/use-ncp-child-session-tabs-view";
+import type { ChatWorkspaceFileTab } from "@/components/chat/stores/chat-thread.store";
+import { AgentIdentityAvatar } from "@/components/common/agent-identity";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { t } from "@/lib/i18n";
+import { cn } from "@/lib/utils";
+
+export type WorkspaceSelection =
+  | {
+      kind: "child-session";
+      tab: ResolvedChildSessionTab;
+    }
+  | {
+      kind: "file";
+      file: ChatWorkspaceFileTab;
+    };
+
+export type WorkspaceTabViewModel = {
+  key: string;
+  kind: "child-session" | "file";
+  title: string;
+  tooltip: string;
+  active: boolean;
+  agentId?: string | null;
+  showUnreadDot?: boolean;
+  viewMode?: "preview" | "diff";
+  onSelect: () => void;
+  onClose?: () => void;
+};
+
+export function readWorkspaceFileTitle(file: ChatWorkspaceFileTab): string {
+  const label = file.label?.trim();
+  if (label) {
+    return label;
+  }
+  return file.path.split("/").filter(Boolean).pop() || file.path;
+}
+
+export function resolveWorkspaceSelection(params: {
+  activeChildSessionKey: string | null;
+  activeWorkspaceFileKey: string | null;
+  childSessionTabs: ResolvedChildSessionTab[];
+  workspaceFileTabs: readonly ChatWorkspaceFileTab[];
+}): WorkspaceSelection | null {
+  const {
+    activeChildSessionKey,
+    activeWorkspaceFileKey,
+    childSessionTabs,
+    workspaceFileTabs,
+  } = params;
+
+  if (activeWorkspaceFileKey) {
+    const activeFile = workspaceFileTabs.find(
+      (file) => file.key === activeWorkspaceFileKey,
+    );
+    if (activeFile) {
+      return {
+        kind: "file",
+        file: activeFile,
+      };
+    }
+  }
+
+  if (activeChildSessionKey) {
+    const activeChild = childSessionTabs.find(
+      (tab) => tab.sessionKey === activeChildSessionKey,
+    );
+    if (activeChild) {
+      return {
+        kind: "child-session",
+        tab: activeChild,
+      };
+    }
+  }
+
+  if (childSessionTabs[0]) {
+    return {
+      kind: "child-session",
+      tab: childSessionTabs[0],
+    };
+  }
+
+  if (workspaceFileTabs[0]) {
+    return {
+      kind: "file",
+      file: workspaceFileTabs[0],
+    };
+  }
+
+  return null;
+}
+
+function WorkspaceTabIcon({
+  agentId,
+  kind,
+}: Pick<WorkspaceTabViewModel, "agentId" | "kind">) {
+  if (kind === "file") {
+    return <FileCode2 className="h-3.5 w-3.5 shrink-0 text-gray-400" />;
+  }
+
+  if (agentId) {
+    return (
+      <AgentIdentityAvatar
+        agentId={agentId}
+        className="h-3.5 w-3.5 shrink-0"
+      />
+    );
+  }
+
+  return <MessageSquareText className="h-3.5 w-3.5 shrink-0 text-gray-400" />;
+}
+
+function WorkspaceTabItem({
+  tab,
+}: {
+  tab: WorkspaceTabViewModel;
+}) {
+  return (
+    <TooltipProvider delayDuration={250}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <div
+            className={cn(
+              "group flex max-w-[180px] min-w-0 items-center gap-1.5 border-r border-gray-200/70 border-b-2 px-2.5 py-2 transition-colors",
+              tab.active
+                ? "border-b-primary bg-white text-gray-900"
+                : "border-b-transparent bg-gray-50/85 text-gray-500 hover:bg-gray-100",
+            )}
+          >
+            <button
+              type="button"
+              onClick={tab.onSelect}
+              className="flex min-w-0 flex-1 items-center gap-1.5 text-left"
+            >
+              <WorkspaceTabIcon kind={tab.kind} agentId={tab.agentId} />
+              <span className="min-w-0 truncate text-[12px] font-medium">
+                {tab.title}
+              </span>
+              {tab.kind === "file" && tab.viewMode === "diff" ? (
+                <span className="shrink-0 rounded border border-amber-200 bg-amber-50 px-1 py-0 text-[9px] font-medium uppercase tracking-[0.08em] text-amber-700">
+                  {t("chatWorkspaceDiff")}
+                </span>
+              ) : null}
+              {tab.showUnreadDot ? (
+                <span
+                  aria-label={t("chatSessionUnread")}
+                  className="h-2 w-2 shrink-0 rounded-full bg-primary"
+                />
+              ) : null}
+            </button>
+            {tab.onClose ? (
+              <button
+                type="button"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  tab.onClose?.();
+                }}
+                className={cn(
+                  "rounded p-0.5 text-gray-400 transition-colors hover:bg-gray-200 hover:text-gray-700",
+                  tab.active ? "opacity-100" : "opacity-0 group-hover:opacity-100",
+                )}
+                aria-label={t("chatWorkspaceCloseFile")}
+              >
+                <X className="h-3 w-3" />
+              </button>
+            ) : null}
+          </div>
+        </TooltipTrigger>
+        <TooltipContent side="bottom" className="max-w-[320px] text-xs">
+          {tab.tooltip}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
+export function WorkspaceTabsBar({
+  tabs,
+}: {
+  tabs: readonly WorkspaceTabViewModel[];
+}) {
+  return (
+    <div
+      data-testid="workspace-tabs-bar"
+      className="workspace-horizontal-scrollbar overflow-x-auto overflow-y-hidden border-b border-gray-200/70 bg-gray-50/85"
+    >
+      <div
+        data-testid="workspace-tabs-scroll"
+        className="flex min-w-max items-stretch"
+      >
+        {tabs.map((tab) => (
+          <WorkspaceTabItem key={tab.key} tab={tab} />
+        ))}
+      </div>
+    </div>
+  );
+}