@nextclaw/ui 0.20.2 → 0.21.0

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

@@ -0,0 +1,182 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { ChatSessionWorkspaceFilePreview } from "@/features/chat/features/workspace/components/chat-session-workspace-file-preview";
+import { scrollRestorationManager } from "@/shared/lib/navigation-history";
+
+const serverPathReadMock = vi.fn();
+const serverPathBrowseMock = vi.fn();
+
+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: () => null,
+}));
+
+vi.mock(
+  "@/features/chat/features/workspace/components/workspace-text-selection-menu",
+  () => ({
+    WorkspaceTextSelectionMenu: ({ children }: { children: ReactNode }) => children,
+  }),
+);
+
+function renderMarkdownPreview(file: {
+  key: string;
+  path: string;
+  previewViewer?: "rendered" | "source";
+} = {
+  key: "markdown-tab",
+  path: "/tmp/README.md",
+  previewViewer: "rendered",
+}) {
+  return render(
+    <ChatSessionWorkspaceFilePreview
+      file={{
+        key: file.key,
+        parentSessionKey: "session-1",
+        path: file.path,
+        viewMode: "preview",
+        previewViewer: file.previewViewer ?? "rendered",
+      }}
+      sessionProjectRoot="/tmp"
+      sessionWorkingDir="/tmp"
+      showBreadcrumbs={false}
+      onFileOpen={vi.fn()}
+    />,
+  );
+}
+
+describe("ChatSessionWorkspaceFilePreview Markdown scroll restoration", () => {
+  beforeEach(() => {
+    scrollRestorationManager.clear();
+    serverPathReadMock.mockImplementation(({ path }: { path: string }) => ({
+      isLoading: false,
+      error: null,
+      data: {
+        kind: "markdown",
+        resolvedPath: path,
+        startLine: 1,
+        text: `# ${path}`,
+        truncated: false,
+      },
+    }));
+    serverPathBrowseMock.mockReturnValue({
+      isLoading: false,
+      error: new Error("not a directory"),
+      data: null,
+    });
+  });
+
+  it("restores the rendered Markdown position when returning to the same file tab", () => {
+    const firstView = renderMarkdownPreview();
+    const firstScrollContainer = screen.getByTestId("markdown-preview").parentElement as HTMLDivElement;
+    firstScrollContainer.scrollTop = 144;
+    fireEvent.scroll(firstScrollContainer);
+    firstView.unmount();
+
+    renderMarkdownPreview();
+
+    expect((screen.getByTestId("markdown-preview").parentElement as HTMLDivElement).scrollTop).toBe(144);
+  });
+
+  it("keeps each Markdown tab's position when switching files in one preview instance", () => {
+    const firstFile = { key: "markdown-a", path: "/tmp/A.md" };
+    const secondFile = { key: "markdown-b", path: "/tmp/B.md" };
+    const resolvedPaths = new Map([
+      [firstFile.path, "/tmp/first-location/A.md"],
+      [secondFile.path, "/tmp/B.md"],
+    ]);
+    serverPathReadMock.mockImplementation(({ path }: { path: string }) => ({
+      isLoading: false,
+      error: null,
+      data: {
+        kind: "markdown",
+        resolvedPath: resolvedPaths.get(path) ?? path,
+        startLine: 1,
+        text: `# ${path}`,
+        truncated: false,
+      },
+    }));
+    const view = renderMarkdownPreview(firstFile);
+    const firstScrollContainer = screen.getByTestId("markdown-preview").parentElement as HTMLDivElement;
+    firstScrollContainer.scrollTop = 144;
+    fireEvent.scroll(firstScrollContainer);
+
+    view.rerender(
+      <ChatSessionWorkspaceFilePreview
+        file={{ ...secondFile, parentSessionKey: "session-1", viewMode: "preview" }}
+        sessionProjectRoot="/tmp"
+        sessionWorkingDir="/tmp"
+        showBreadcrumbs={false}
+        onFileOpen={vi.fn()}
+      />,
+    );
+    const secondScrollContainer = screen.getByTestId("markdown-preview").parentElement as HTMLDivElement;
+    secondScrollContainer.scrollTop = 72;
+    fireEvent.scroll(secondScrollContainer);
+
+    // Server-path data can be stale while the query swaps back to the first
+    // tab. Its resolved path is display data, not tab identity.
+    resolvedPaths.set(firstFile.path, "/tmp/returned-location/A.md");
+
+    view.rerender(
+      <ChatSessionWorkspaceFilePreview
+        file={{ ...firstFile, parentSessionKey: "session-1", viewMode: "preview" }}
+        sessionProjectRoot="/tmp"
+        sessionWorkingDir="/tmp"
+        showBreadcrumbs={false}
+        onFileOpen={vi.fn()}
+      />,
+    );
+
+    expect((screen.getByTestId("markdown-preview").parentElement as HTMLDivElement).scrollTop).toBe(144);
+  });
+
+  it("restores Markdown after returning from its source-view tab", () => {
+    const renderedFile = {
+      key: "markdown-rendered",
+      path: "/tmp/README.md",
+      previewViewer: "rendered" as const,
+    };
+    const sourceFile = {
+      key: "markdown-source",
+      path: "/tmp/README.md",
+      previewViewer: "source" as const,
+    };
+    const view = renderMarkdownPreview(renderedFile);
+    const scrollContainer = screen.getByTestId("markdown-preview").parentElement as HTMLDivElement;
+    scrollContainer.scrollTop = 144;
+    fireEvent.scroll(scrollContainer);
+
+    // The source-view switch replaces the rendered scroll surface before the
+    // rendered effect cleanup executes.
+    scrollContainer.scrollTop = 0;
+    view.rerender(
+      <ChatSessionWorkspaceFilePreview
+        file={{ ...sourceFile, parentSessionKey: "session-1", viewMode: "preview" }}
+        sessionProjectRoot="/tmp"
+        sessionWorkingDir="/tmp"
+        showBreadcrumbs={false}
+        onFileOpen={vi.fn()}
+      />,
+    );
+    view.rerender(
+      <ChatSessionWorkspaceFilePreview
+        file={{ ...renderedFile, parentSessionKey: "session-1", viewMode: "preview" }}
+        sessionProjectRoot="/tmp"
+        sessionWorkingDir="/tmp"
+        showBreadcrumbs={false}
+        onFileOpen={vi.fn()}
+      />,
+    );
+
+    expect((screen.getByTestId("markdown-preview").parentElement as HTMLDivElement).scrollTop).toBe(144);
+  });
+});

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

@@ -0,0 +1,78 @@
+import { createElement } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import type { CronJobView } from "@/shared/lib/api";
+import { setLanguage } from "@/shared/lib/i18n";
+import { SessionCronJobContent } from "@/features/chat/features/workspace/components/session-cron-job-content";
+
+const mocks = vi.hoisted(() => ({
+  deleteJob: vi.fn(),
+  runJob: vi.fn(),
+  toggleJob: vi.fn(),
+}));
+
+vi.mock("@/features/cron", () => ({
+  CronJobDetailDialog: ({ job, open }: { job: CronJobView | null; open: boolean }) => (
+    open ? createElement("div", { role: "dialog" }, job?.payload.message) : null
+  ),
+  useCronJobActions: () => ({
+    ConfirmDialog: () => createElement("div", { "data-testid": "cron-confirm" }),
+    deleteJob: mocks.deleteJob,
+    isPending: () => false,
+    runJob: mocks.runJob,
+    toggleJob: mocks.toggleJob,
+  }),
+}));
+
+function createJob(): CronJobView {
+  return {
+    id: "paint-daily",
+    name: "每日绘画",
+    enabled: true,
+    schedule: { kind: "cron", expr: "0 9 * * *", tz: "Asia/Shanghai" },
+    payload: {
+      kind: "agent_turn",
+      message: "请生成一幅拥有柔和晨光、细腻建筑纹理和远处山景的城市水彩画，并将结果保存到项目图库。",
+      agentId: "main",
+      sessionId: "session:paint",
+    },
+    state: {
+      nextRunAt: "2026-08-27T01:00:00.000Z",
+      lastRunAt: "2026-08-26T01:00:00.000Z",
+      lastStatus: "ok",
+      lastError: null,
+    },
+    createdAt: "2026-08-26T01:00:00.000Z",
+    updatedAt: "2026-08-26T01:00:00.000Z",
+    deleteAfterRun: false,
+  };
+}
+
+describe("SessionCronJobContent", () => {
+  beforeEach(() => {
+    setLanguage("zh");
+    vi.clearAllMocks();
+  });
+
+  it("keeps the task prompt as a two-line summary and exposes task controls", async () => {
+    const user = userEvent.setup();
+    const job = createJob();
+    render(createElement(SessionCronJobContent, { jobs: [job] }));
+
+    const summary = screen.getByText(job.payload.message);
+    expect(summary.className.split(" ")).toContain("line-clamp-2");
+    expect(screen.getAllByTestId("cron-confirm").length).toBe(1);
+
+    await user.click(screen.getByRole("switch", { name: "暂停" }));
+    expect(mocks.toggleJob).toHaveBeenCalledWith(job, false);
+
+    await user.click(screen.getByRole("button", { name: "更多操作 每日绘画" }));
+    await user.click(screen.getByRole("button", { name: "立即执行" }));
+    expect(mocks.runJob).toHaveBeenCalledWith(job);
+
+    await user.click(screen.getByRole("button", { name: "查看任务详情" }));
+    expect(screen.getByRole("dialog").textContent).toContain(job.payload.message);
+  });
+});

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

@@ -1,4 +1,4 @@
-import { useMemo, useRef, type ReactNode, type RefObject } from 'react';
+import { useMemo, useRef, type ReactNode, type RefObject, type UIEvent } from 'react';
 import type { ChatFileOpenActionViewModel, ChatFileOperationBlockViewModel } from '@nextclaw/agent-chat-ui';
 import { NextClawClientError } from '@nextclaw/client-sdk';
 import { ChatMessageMarkdown, FileOperationCodeSurface } from '@nextclaw/agent-chat-ui';
@@ -24,6 +24,7 @@ import { buildWorkspaceFileBreadcrumb, resolveWorkspaceRelativePath } from '@/sh
 import { cn } from '@/shared/lib/utils';
 import { resolveWorkspaceFileViewer } from '@/features/chat/features/workspace/utils/chat-workspace-file-viewer.utils';
 import { WorkspaceMarkdownOutline } from './workspace-markdown-outline';
+import { useScrollRestoration } from '@/shared/hooks/use-scroll-restoration';
 
 function inferPreviewKind(params: {
   path: string;
@@ -42,6 +43,31 @@ function appendPreviewRefreshVersion(url: string, refreshVersion: number): strin
   return `${url}${url.includes('?') ? '&' : '?'}refresh=${refreshVersion}`;
 }
 
+function createMarkdownScrollRestorationKey(params: {
+  contentUrl: string | null;
+  fileKey: string;
+  previewKind: 'text' | 'markdown' | 'binary';
+  previewText: string | null;
+  previewViewer: 'source' | 'rendered' | null;
+  refreshVersion: number;
+}): string | null {
+  const {
+    contentUrl,
+    fileKey,
+    previewKind,
+    previewText,
+    previewViewer,
+    refreshVersion,
+  } = params;
+  if (previewKind !== 'markdown' || previewViewer === 'source' || !previewText || contentUrl) {
+    return null;
+  }
+  // `fileKey` is the workspace tab's stable identity. Do not include resolvedPath:
+  // React Query may temporarily expose a previous result while a different file
+  // loads, which would turn one tab into several restoration records.
+  return `workspace-preview:markdown:${fileKey}:${refreshVersion}`;
+}
+
 function buildPreviewBlock(params: {
   path: string;
   text: string;
@@ -159,6 +185,7 @@ function WorkspacePreviewBody({
   onFileOpen,
   onHtmlContentHeightChange,
   markdownScrollRef,
+  onMarkdownScroll,
   previewBlock,
   previewKind,
   previewViewer,
@@ -176,6 +203,7 @@ function WorkspacePreviewBody({
   onFileOpen: (action: ChatFileOpenActionViewModel) => void;
   onHtmlContentHeightChange?: (height: number) => void;
   markdownScrollRef: RefObject<HTMLDivElement>;
+  onMarkdownScroll: (event: UIEvent<HTMLDivElement>) => void;
   previewBlock: ChatFileOperationBlockViewModel | null;
   previewKind: 'text' | 'markdown' | 'binary';
   previewViewer: 'source' | 'rendered' | null;
@@ -224,7 +252,11 @@ function WorkspacePreviewBody({
 
   if (previewKind === 'markdown' && previewViewer !== 'source' && previewText) {
     return (
-      <div ref={markdownScrollRef} className="h-full overflow-auto custom-scrollbar px-5 py-4">
+      <div
+        ref={markdownScrollRef}
+        onScroll={onMarkdownScroll}
+        className="h-full overflow-auto custom-scrollbar px-5 py-4"
+      >
         <ChatMessageMarkdown
           text={previewText}
           role="assistant"
@@ -338,6 +370,18 @@ export function ChatSessionWorkspaceFilePreview({
     previewText,
   ]);
   const isTextPreviewTruncated = !contentUrl && Boolean(previewQuery?.data?.truncated);
+  const markdownScrollRestoration = useScrollRestoration({
+    restorationKey: createMarkdownScrollRestorationKey({
+      contentUrl,
+      fileKey: file.key,
+      previewKind,
+      previewText,
+      previewViewer,
+      refreshVersion,
+    }),
+    scrollRef: markdownScrollRef,
+  });
+  const { onScroll: onMarkdownScroll } = markdownScrollRestoration;
   const breadcrumbBasePath = sessionProjectRoot ?? sessionWorkingDir;
   const excerptPath =
     resolveWorkspaceRelativePath({
@@ -365,6 +409,7 @@ export function ChatSessionWorkspaceFilePreview({
       onFileOpen={onFileOpen}
       onHtmlContentHeightChange={onHtmlContentHeightChange}
       markdownScrollRef={markdownScrollRef}
+      onMarkdownScroll={onMarkdownScroll}
       previewBlock={previewBlock}
       previewKind={previewKind}
       previewViewer={previewViewer}

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

@@ -39,8 +39,11 @@ type ChatSessionWorkspacePanelContentProps = {
   filePreviewRefreshVersion: number;
   sessionKey: string | null;
   sessionCronJobs: readonly CronJobView[];
+  sessionCronJobsError?: boolean;
+  sessionCronJobsLoading?: boolean;
   sessionProjectRoot: string | null;
   sessionWorkingDir: string | null;
+  onRetrySessionCronJobs?: () => void;
 };
 
 function WorkspaceOverviewEntry({
@@ -220,8 +223,11 @@ function WorkspaceSelectedContent({
   filePreviewRefreshVersion,
   sessionKey,
   sessionCronJobs,
+  sessionCronJobsError = false,
+  sessionCronJobsLoading = false,
   sessionProjectRoot,
   sessionWorkingDir,
+  onRetrySessionCronJobs,
   explorerControl,
 }: ChatSessionWorkspacePanelContentProps & {
   explorerControl?: { open: boolean; onToggle: () => void };
@@ -309,7 +315,14 @@ function WorkspaceSelectedContent({
     );
   }
 
-  return <SessionCronJobContent jobs={sessionCronJobs} />;
+  return (
+    <SessionCronJobContent
+      jobs={sessionCronJobs}
+      isError={sessionCronJobsError}
+      isLoading={sessionCronJobsLoading}
+      onRetry={onRetrySessionCronJobs}
+    />
+  );
 }
 
 export function ChatSessionWorkspacePanelContent({

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

@@ -44,6 +44,9 @@ type ChatSessionWorkspacePanelProps = {
   workspaceNavigationHistoryIndex?: number;
   activePanelKind?: ChatWorkspacePanelKind | null;
   sessionCronJobs?: readonly CronJobView[];
+  sessionCronJobsError?: boolean;
+  sessionCronJobsLoading?: boolean;
+  onRetrySessionCronJobs?: () => void;
   sessionProjectRoot: string | null;
   sessionWorkingDir: string | null;
   workspacePanelWidth?: number;
@@ -62,6 +65,9 @@ export function ChatSessionWorkspacePanel({
   workspaceNavigationHistoryIndex = 0,
   activePanelKind,
   sessionCronJobs = [],
+  sessionCronJobsError = false,
+  sessionCronJobsLoading = false,
+  onRetrySessionCronJobs,
   sessionProjectRoot,
   sessionWorkingDir,
   workspacePanelWidth = CHAT_WORKSPACE_PANEL_DEFAULT_WIDTH,
@@ -218,6 +224,9 @@ export function ChatSessionWorkspacePanel({
           filePreviewRefreshVersion={filePreviewRefreshVersion}
           sessionKey={sessionKey}
           sessionCronJobs={sessionCronJobs}
+          sessionCronJobsError={sessionCronJobsError}
+          sessionCronJobsLoading={sessionCronJobsLoading}
+          onRetrySessionCronJobs={onRetrySessionCronJobs}
           sessionProjectRoot={sessionProjectRoot}
           sessionWorkingDir={sessionWorkingDir}
         />

package/src/features/chat/features/workspace/components/overview/chat-session-token-usage.tsx

@@ -8,6 +8,10 @@ function formatTokenCount(value: number | null): string {
   return value === null ? '—' : new Intl.NumberFormat().format(value);
 }
 
+function formatCount(value: number | null): string {
+  return value === null ? '—' : new Intl.NumberFormat().format(value);
+}
+
 function formatCacheHitRate(value: number | null): string {
   return value === null
     ? '—'
@@ -119,6 +123,14 @@ export function ChatSessionTokenUsage({ sessionKey }: { sessionKey: string | nul
               label={t('chatWorkspaceTokenUsageRuns')}
               value={String(usage.runCount)}
             />
+            <TokenUsageMetric
+              label={t('chatWorkspaceTokenUsageModelCalls')}
+              value={formatCount(usage.modelCallCount)}
+            />
+            <TokenUsageMetric
+              label={t('chatWorkspaceTokenUsageReportedModelCalls')}
+              value={formatCount(usage.reportedModelCallCount)}
+            />
           </div>
           <div>
             <div className="mb-1.5 text-[11px] font-medium text-gray-700">
@@ -136,6 +148,11 @@ export function ChatSessionTokenUsage({ sessionKey }: { sessionKey: string | nul
                   <div className="mt-1 text-[10px] text-gray-500">
                     {t('chatWorkspaceTokenUsageModelRunCount').replace('{count}', String(modelUsage.runCount))}
                     {' · '}
+                    {t('chatWorkspaceTokenUsageModelCallCount').replace(
+                      '{count}',
+                      formatCount(modelUsage.modelCallCount),
+                    )}
+                    {' · '}
                     {t('chatWorkspaceTokenUsageModelCacheHitRate').replace(
                       '{rate}',
                       formatCacheHitRate(modelUsage.cacheHitRate),