@nextclaw/ui 0.20.1 → 0.20.3

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),

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

@@ -1,103 +1,297 @@
-import { Trash2 } from "lucide-react";
+import { useState } from "react";
+import {
+  CalendarClock,
+  Check,
+  Clock,
+  MoreVertical,
+  Play,
+  TriangleAlert,
+} from "lucide-react";
+
+import {
+  CronJobDetailDialog,
+  useCronJobActions,
+} from "@/features/cron";
 import type { CronJobView } from "@/shared/lib/api";
 import { Button } from "@/shared/components/ui/button";
-import { useConfirmDialog } from "@/shared/hooks/use-confirm-dialog";
-import { useDeleteCronJob } from "@/features/cron";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/shared/components/ui/popover";
+import { Switch } from "@/shared/components/ui/switch";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/shared/components/ui/tooltip";
 import {
   describeCronSchedule,
-  describeCronSession,
-  formatCronDate,
+  formatRelativeTime,
 } from "@/shared/lib/cron";
 import { t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
+
+function CronJobStatus({ job }: { readonly job: CronJobView }) {
+  const needsAttention = job.state.lastStatus === "error";
+  const label = needsAttention
+    ? t("cronNeedsAttention")
+    : job.enabled
+      ? t("cronRunningNormally")
+      : t("cronPaused");
+
+  return (
+    <span
+      className={cn(
+        "inline-flex shrink-0 items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium",
+        needsAttention
+          ? "bg-red-50 text-red-700"
+          : job.enabled
+            ? "bg-emerald-50 text-emerald-700"
+            : "bg-muted text-muted-foreground",
+      )}
+    >
+      <span
+        className={cn(
+          "h-1.5 w-1.5 rounded-full",
+          needsAttention
+            ? "bg-red-500"
+            : job.enabled
+              ? "bg-emerald-500"
+              : "bg-muted-foreground/50",
+        )}
+      />
+      {label}
+    </span>
+  );
+}
+
+function SessionCronJobCard({
+  cronActions,
+  job,
+  onOpenDetails,
+}: {
+  readonly cronActions: ReturnType<typeof useCronJobActions>;
+  readonly job: CronJobView;
+  readonly onOpenDetails: (job: CronJobView) => void;
+}) {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const isPending = cronActions.isPending(job);
+  const needsAttention = job.state.lastStatus === "error";
+  const StatusIcon = needsAttention ? TriangleAlert : Check;
+  const jobLabel = job.name || job.id;
 
-export function SessionCronJobContent({ jobs }: { jobs: readonly CronJobView[] }) {
-  const deleteCronJob = useDeleteCronJob();
-  const { confirm, ConfirmDialog } = useConfirmDialog();
+  return (
+    <article className="rounded-2xl border border-border/60 bg-background px-3.5 py-3 shadow-sm transition-colors hover:bg-muted/20 focus-within:bg-muted/20">
+      <div className="flex items-start gap-3">
+        <span
+          className={cn(
+            "mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-xl",
+            needsAttention
+              ? "bg-amber-50 text-amber-600"
+              : job.enabled
+                ? "bg-emerald-50 text-emerald-600"
+                : "bg-muted text-muted-foreground",
+          )}
+        >
+          <StatusIcon className="h-3.5 w-3.5" aria-hidden="true" />
+        </span>
+        <div className="min-w-0 flex-1">
+          <div className="flex min-w-0 items-center gap-2">
+            <h3 className="min-w-0 flex-1 truncate text-sm font-semibold text-foreground">
+              {jobLabel}
+            </h3>
+            <CronJobStatus job={job} />
+          </div>
+          <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] text-muted-foreground">
+            <span className="inline-flex items-center gap-1">
+              <CalendarClock className="h-3.5 w-3.5" aria-hidden="true" />
+              {describeCronSchedule(job)}
+            </span>
+            {job.enabled && job.state.nextRunAt ? (
+              <span className="inline-flex items-center gap-1">
+                <Clock className="h-3.5 w-3.5" aria-hidden="true" />
+                {t("cronNextRun")} {formatRelativeTime(job.state.nextRunAt)}
+              </span>
+            ) : null}
+          </div>
+        </div>
+        <TooltipProvider delayDuration={250}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span>
+                <Switch
+                  checked={job.enabled}
+                  disabled={isPending}
+                  onCheckedChange={(enabled) => {
+                    void cronActions.toggleJob(job, enabled);
+                  }}
+                  aria-label={job.enabled ? t("cronDisable") : t("cronEnable")}
+                />
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>
+              {job.enabled ? t("cronDisable") : t("cronEnable")}
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+
+      <p className="mt-3 line-clamp-2 text-xs leading-5 text-muted-foreground">
+        {job.payload.message}
+      </p>
+      {!job.enabled ? (
+        <p className="mt-2 text-[11px] text-muted-foreground">
+          {t("cronToggleHint")}
+        </p>
+      ) : null}
+      {job.state.lastError ? (
+        <p className="mt-2 line-clamp-2 text-[11px] leading-5 text-red-700">
+          {job.state.lastError}
+        </p>
+      ) : null}
+
+      <div className="mt-3 flex items-center justify-between border-t border-border/50 pt-2.5">
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="h-7 px-2 text-xs"
+          onClick={() => onOpenDetails(job)}
+        >
+          {t("cronEditDetails")}
+        </Button>
+        <TooltipProvider delayDuration={250}>
+          <Popover open={menuOpen} onOpenChange={setMenuOpen}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <PopoverTrigger asChild>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    className="h-7 w-7"
+                    disabled={isPending}
+                    aria-label={`${t("cronMoreActions")} ${jobLabel}`}
+                  >
+                    <MoreVertical className="h-4 w-4" />
+                  </Button>
+                </PopoverTrigger>
+              </TooltipTrigger>
+              <TooltipContent>{t("cronMoreActions")}</TooltipContent>
+            </Tooltip>
+            <PopoverContent align="end" sideOffset={4} className="w-40 p-1">
+              <button
+                type="button"
+                disabled={isPending}
+                onClick={() => {
+                  setMenuOpen(false);
+                  void cronActions.runJob(job);
+                }}
+                className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-foreground transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50"
+              >
+                <Play className="h-3.5 w-3.5 text-muted-foreground" />
+                {t("cronRunNow")}
+              </button>
+              <button
+                type="button"
+                disabled={isPending}
+                onClick={() => {
+                  setMenuOpen(false);
+                  void cronActions.deleteJob(job);
+                }}
+                className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-red-600 transition-colors hover:bg-red-50 disabled:cursor-not-allowed disabled:opacity-50"
+              >
+                {t("delete")}
+              </button>
+            </PopoverContent>
+          </Popover>
+        </TooltipProvider>
+      </div>
+    </article>
+  );
+}
 
-  const handleDelete = async (job: CronJobView) => {
-    const confirmed = await confirm({
-      title: `${t("cronDeleteConfirm")}?`,
-      description: job.name ? `${job.name} (${job.id})` : job.id,
-      confirmLabel: t("delete"),
-    });
-    if (!confirmed) {
-      return;
-    }
-    deleteCronJob.mutate({ id: job.id });
-  };
+export function SessionCronJobContent({
+  jobs,
+  isError = false,
+  isLoading = false,
+  onRetry,
+}: {
+  readonly jobs: readonly CronJobView[];
+  readonly isError?: boolean;
+  readonly isLoading?: boolean;
+  readonly onRetry?: () => void;
+}) {
+  const [selectedJobId, setSelectedJobId] = useState<string | null>(null);
+  const cronActions = useCronJobActions();
+  const selectedJob = jobs.find((job) => job.id === selectedJobId) ?? null;
 
   return (
     <div className="h-full overflow-y-auto custom-scrollbar px-4 py-4">
       <div className="mb-4">
-        <div className="text-sm font-semibold text-gray-900">
+        <div className="text-sm font-semibold text-foreground">
           {t("chatWorkspaceSessionCronJobs")}
         </div>
-        <div className="mt-1 text-xs text-gray-500">
+        <div className="mt-1 text-xs text-muted-foreground">
           {t("cronTotalLabel")}: {jobs.length}
         </div>
       </div>
-      {jobs.length === 0 ? (
-        <div className="py-8 text-center text-sm text-gray-500">
+      {isLoading ? (
+        <div className="py-8 text-center text-sm text-muted-foreground">
+          {t("cronLoading")}
+        </div>
+      ) : isError ? (
+        <div className="py-8 text-center text-sm text-muted-foreground">
+          <p>{t("cronLoadFailed")}</p>
+          {onRetry ? (
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="mt-2"
+              onClick={onRetry}
+            >
+              {t("cronRetry")}
+            </Button>
+          ) : null}
+        </div>
+      ) : jobs.length === 0 ? (
+        <div className="py-8 text-center text-sm text-muted-foreground">
           {t("chatWorkspaceCronJobEmpty")}
         </div>
       ) : (
-        <div className="space-y-3">
+        <div className="space-y-2.5">
           {jobs.map((job) => (
-            <div
+            <SessionCronJobCard
               key={job.id}
-              className="rounded-lg border border-gray-200 bg-white px-3 py-3"
-            >
-              <div className="flex items-start justify-between gap-3">
-                <div className="min-w-0">
-                  <div className="truncate text-sm font-semibold text-gray-900">
-                    {job.name || job.id}
-                  </div>
-                  <div className="mt-1 text-[11px] text-gray-400">
-                    {job.id}
-                  </div>
-                </div>
-                <Button
-                  type="button"
-                  variant="subtle"
-                  size="sm"
-                  className="h-7 gap-1 rounded-lg px-2"
-                  onClick={() => void handleDelete(job)}
-                  disabled={deleteCronJob.isPending}
-                >
-                  <Trash2 className="h-3.5 w-3.5" />
-                  {t("delete")}
-                </Button>
-              </div>
-              <div className="mt-3 space-y-1.5 text-xs text-gray-500">
-                <div>
-                  <span className="font-medium text-gray-700">{t("cronScheduleLabel")}:</span>{" "}
-                  {describeCronSchedule(job)}
-                </div>
-                <div>
-                  <span className="font-medium text-gray-700">{t("cronNextRun")}:</span>{" "}
-                  {formatCronDate(job.state.nextRunAt)}
-                </div>
-                <div>
-                  <span className="font-medium text-gray-700">{t("cronLastRun")}:</span>{" "}
-                  {formatCronDate(job.state.lastRunAt)}
-                </div>
-                <div>
-                  <span className="font-medium text-gray-700">{t("cronLastStatus")}:</span>{" "}
-                  {job.state.lastStatus ?? "-"}
-                </div>
-                <div>
-                  <span className="font-medium text-gray-700">{t("cronSessionLabel")}:</span>{" "}
-                  {describeCronSession(job)}
-                </div>
-              </div>
-              <div className="mt-3 whitespace-pre-wrap break-words text-sm text-gray-700">
-                {job.payload.message}
-              </div>
-            </div>
+              cronActions={cronActions}
+              job={job}
+              onOpenDetails={(item) => setSelectedJobId(item.id)}
+            />
           ))}
         </div>
       )}
-      <ConfirmDialog />
+      <CronJobDetailDialog
+        job={selectedJob}
+        open={Boolean(selectedJob)}
+        onOpenChange={(open) => {
+          if (!open) {
+            setSelectedJobId(null);
+          }
+        }}
+        onDelete={(job) => {
+          void cronActions.deleteJob(job, () => setSelectedJobId(null));
+        }}
+        onRun={(job) => {
+          void cronActions.runJob(job);
+        }}
+        onToggle={(job, enabled) => {
+          void cronActions.toggleJob(job, enabled);
+        }}
+      />
+      <cronActions.ConfirmDialog />
     </div>
   );
 }

package/src/features/chat/features/workspace/components/workspace-markdown-outline.tsx

@@ -0,0 +1,156 @@
+import {
+  useEffect,
+  useRef,
+  useState,
+  type RefObject,
+} from "react";
+import { ListTree } from "lucide-react";
+import { ChatPopoverContent } from "@/features/chat/components/chat-popover-content";
+import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
+import { Popover, PopoverTrigger } from "@/shared/components/ui/popover";
+import { t } from "@/shared/lib/i18n";
+
+const HEADING_SELECTOR = "h1, h2, h3, h4, h5, h6";
+const HEADING_INDEX_ATTRIBUTE = "data-workspace-markdown-heading-index";
+const HEADING_TOP_GAP = 16;
+
+type WorkspaceMarkdownOutlineItem = {
+  depth: number;
+  index: number;
+  label: string;
+};
+
+function collectWorkspaceMarkdownOutline(
+  container: HTMLElement,
+): WorkspaceMarkdownOutlineItem[] {
+  const levelStack: number[] = [];
+  const items: WorkspaceMarkdownOutlineItem[] = [];
+
+  container
+    .querySelectorAll<HTMLElement>(HEADING_SELECTOR)
+    .forEach((heading) => {
+      heading.removeAttribute(HEADING_INDEX_ATTRIBUTE);
+      const label = heading.textContent?.replace(/\s+/g, " ").trim();
+      if (!label) return;
+
+      const level = Number(heading.tagName.slice(1));
+      while (
+        levelStack.length > 0 &&
+        levelStack[levelStack.length - 1]! >= level
+      ) {
+        levelStack.pop();
+      }
+
+      const index = items.length;
+      heading.setAttribute(HEADING_INDEX_ATTRIBUTE, String(index));
+      items.push({ depth: levelStack.length, index, label });
+      levelStack.push(level);
+    });
+
+  return items;
+}
+
+export function WorkspaceMarkdownOutline({
+  contentKey,
+  documentKey,
+  scrollContainerRef,
+}: {
+  contentKey: string;
+  documentKey: string;
+  scrollContainerRef: RefObject<HTMLDivElement>;
+}) {
+  const [items, setItems] = useState<WorkspaceMarkdownOutlineItem[]>([]);
+  const [open, setOpen] = useState(false);
+  const outlineScrollRef = useRef<HTMLElement | null>(null);
+  const outlineScrollTopRef = useRef(0);
+
+  useEffect(() => {
+    outlineScrollTopRef.current = 0;
+    setOpen(false);
+    const container = scrollContainerRef.current;
+    if (!container) {
+      setItems([]);
+      return;
+    }
+
+    setItems(collectWorkspaceMarkdownOutline(container));
+    return () => {
+      container
+        .querySelectorAll<HTMLElement>(`[${HEADING_INDEX_ATTRIBUTE}]`)
+        .forEach((heading) => heading.removeAttribute(HEADING_INDEX_ATTRIBUTE));
+    };
+  }, [contentKey, documentKey, scrollContainerRef]);
+
+  if (items.length === 0) return null;
+
+  const label = t("chatWorkspaceMarkdownOutline");
+  const handleOpenChange = (nextOpen: boolean) => {
+    if (!nextOpen && outlineScrollRef.current) {
+      outlineScrollTopRef.current = outlineScrollRef.current.scrollTop;
+    }
+    setOpen(nextOpen);
+  };
+  const handleSelect = (index: number) => {
+    const container = scrollContainerRef.current;
+    const heading = container?.querySelector<HTMLElement>(
+      `[${HEADING_INDEX_ATTRIBUTE}="${index}"]`,
+    );
+    if (!container || !heading) return;
+
+    handleOpenChange(false);
+    const top =
+      container.scrollTop +
+      heading.getBoundingClientRect().top -
+      container.getBoundingClientRect().top;
+    container.scrollTo({
+      top: Math.max(0, top - HEADING_TOP_GAP),
+    });
+  };
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PopoverTrigger asChild>
+        <IconActionButton
+          icon={<ListTree className="h-3.5 w-3.5" />}
+          label={label}
+          size="sm"
+          tone="surface"
+          className="rounded-sm data-[state=open]:bg-gray-200/80 data-[state=open]:text-gray-900"
+        />
+      </PopoverTrigger>
+
+      <ChatPopoverContent
+        align="end"
+        className="w-[min(20rem,calc(100vw-1.5rem))] rounded-lg p-1.5"
+        data-testid="workspace-markdown-outline-popover"
+      >
+        <nav
+          ref={(node) => {
+            outlineScrollRef.current = node;
+            if (node) node.scrollTop = outlineScrollTopRef.current;
+          }}
+          aria-label={label}
+          className="max-h-80 overflow-y-auto custom-scrollbar"
+        >
+          <ul className="space-y-0.5">
+            {items.map((item) => (
+              <li key={item.index}>
+                <button
+                  type="button"
+                  className="block w-full truncate rounded-md py-1.5 pr-2 text-left text-xs leading-4 text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-950 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-border active:bg-gray-200"
+                  style={{
+                    paddingInlineStart: `${0.5 + item.depth * 0.75}rem`,
+                  }}
+                  title={item.label}
+                  onClick={() => handleSelect(item.index)}
+                >
+                  {item.label}
+                </button>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      </ChatPopoverContent>
+    </Popover>
+  );
+}

package/src/features/chat/features/workspace/hooks/use-chat-conversation-workspace-state.ts

@@ -62,6 +62,11 @@ export function useChatConversationWorkspaceState(
     activeSideChatDraft,
     workspaceFileTabs,
     sessionCronJobs,
+    sessionCronJobsError: cronQuery.isError,
+    sessionCronJobsLoading: cronQuery.isLoading,
+    retrySessionCronJobs: () => {
+      void cronQuery.refetch();
+    },
     showWorkspacePanel:
       snapshot.workspacePanelParentKey === sessionKey &&
       snapshot.activeWorkspacePanelKind != null,

package/src/features/cron/components/__tests__/cron-config.test.tsx

@@ -52,6 +52,16 @@ vi.mock("@/features/cron/hooks/use-cron-jobs", () => ({
   useToggleCronJob: () => ({ mutate: mocks.toggleJob }),
 }));
 
+vi.mock("@/features/cron/hooks/use-cron-job-actions", () => ({
+  useCronJobActions: () => ({
+    ConfirmDialog: () => null,
+    deleteJob: mocks.deleteJob,
+    isPending: () => false,
+    runJob: mocks.runJob,
+    toggleJob: mocks.toggleJob,
+  }),
+}));
+
 vi.mock("@/shared/hooks/use-confirm-dialog", () => ({
   useConfirmDialog: () => ({
     confirm: mocks.confirm,
@@ -268,7 +278,7 @@ describe("CronConfig", () => {
     renderCronConfig();
 
     await user.click(
-      screen.getByRole("button", { name: "编辑 Agent 产品雷达" }),
+      screen.getByRole("button", { name: "查看任务详情 Agent 产品雷达" }),
     );
     expect(screen.getByRole("dialog")).toBeTruthy();
     expect(screen.getByText("当前系统只保存最近一次执行快照。")).toBeTruthy();
@@ -283,10 +293,11 @@ describe("CronConfig", () => {
     renderCronConfig();
 
     await user.click(screen.getAllByRole("switch")[0]);
-    expect(mocks.toggleJob).toHaveBeenCalledWith({
-      id: "agent-radar",
-      enabled: false,
-    });
+    expect(mocks.toggleJob).toHaveBeenCalledWith(
+      expect.objectContaining({ id: "agent-radar" }),
+      false,
+      expect.any(Function),
+    );
     expect(
       screen
         .getByRole("button", { name: "展开任务 Agent 产品雷达" })