@nextclaw/ui 0.20.2 → 0.20.3

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

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/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 产品雷达" })

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

@@ -17,12 +17,8 @@ import {
   CronTaskComposer,
   CronTemplateGallery,
 } from "@/features/cron/components/cron-task-discovery";
-import {
-  useCronJobs,
-  useDeleteCronJob,
-  useRunCronJob,
-  useToggleCronJob,
-} from "@/features/cron/hooks/use-cron-jobs";
+import { useCronJobs } from "@/features/cron/hooks/use-cron-jobs";
+import { useCronJobActions } from "@/features/cron/hooks/use-cron-job-actions";
 import { Button } from "@/shared/components/ui/button";
 import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
 import { Input } from "@/shared/components/ui/input";
@@ -31,7 +27,6 @@ import type {
   CronListStatus,
   CronListSummaryView,
 } from "@/shared/lib/api";
-import { useConfirmDialog } from "@/shared/hooks/use-confirm-dialog";
 import { t } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
 
@@ -167,10 +162,7 @@ export function CronConfig() {
     query: deferredQuery,
     status,
   });
-  const deleteCronJob = useDeleteCronJob();
-  const toggleCronJob = useToggleCronJob();
-  const runCronJob = useRunCronJob();
-  const { confirm, ConfirmDialog } = useConfirmDialog();
+  const cronActions = useCronJobActions();
   const jobs = cronQuery.data?.jobs ?? [];
   const total = cronQuery.data?.total ?? 0;
   const summary = cronQuery.data?.summary;
@@ -190,46 +182,28 @@ export function CronConfig() {
     composerRef.current?.focus();
   };
 
-  const handleDelete = async (job: CronJobView) => {
-    const confirmed = await confirm({
-      title: `${t("cronDeleteConfirm")}?`,
-      description: job.name ? `${job.name} (${job.id})` : job.id,
-      variant: "destructive",
-      confirmLabel: t("delete"),
+  const handleDelete = (job: CronJobView) => {
+    void cronActions.deleteJob(job, () => {
+      setExpandedJobId(null);
+      setSelectedJobId(null);
+      if (jobs.length === 1 && page > 0) {
+        setPage(page - 1);
+      }
     });
-    if (!confirmed) {
-      return;
-    }
-    setExpandedJobId(null);
-    setSelectedJobId(null);
-    if (jobs.length === 1 && page > 0) {
-      setPage(page - 1);
-    }
-    deleteCronJob.mutate({ id: job.id });
   };
 
   const handleToggle = (job: CronJobView, enabled: boolean) => {
-    const leavesCurrentFilter =
-      (status === "enabled" && !enabled) || (status === "disabled" && enabled);
-    if (leavesCurrentFilter && jobs.length === 1 && page > 0) {
-      setPage(page - 1);
-    }
-    toggleCronJob.mutate({ id: job.id, enabled });
+    void cronActions.toggleJob(job, enabled, () => {
+      const leavesCurrentFilter =
+        (status === "enabled" && !enabled) || (status === "disabled" && enabled);
+      if (leavesCurrentFilter && jobs.length === 1 && page > 0) {
+        setPage(page - 1);
+      }
+    });
   };
 
-  const handleRun = async (job: CronJobView) => {
-    const force = !job.enabled;
-    if (force) {
-      const confirmed = await confirm({
-        title: `${t("cronRunForceConfirm")}?`,
-        description: job.name ? `${job.name} (${job.id})` : job.id,
-        confirmLabel: t("cronRunNow"),
-      });
-      if (!confirmed) {
-        return;
-      }
-    }
-    runCronJob.mutate({ id: job.id, force });
+  const handleRun = (job: CronJobView) => {
+    void cronActions.runJob(job);
   };
 
   const handlePageChange = (nextPage: number) => {
@@ -446,7 +420,7 @@ export function CronConfig() {
         onRun={handleRun}
         onToggle={handleToggle}
       />
-      <ConfirmDialog />
+      <cronActions.ConfirmDialog />
     </PageLayout>
   );
 }

package/src/features/cron/components/cron-job-row.tsx

@@ -166,7 +166,7 @@ export function CronJobRow({
                     size="icon"
                     className="h-8 w-8"
                     onClick={() => onEdit(job)}
-                    aria-label={`${t("edit")} ${jobLabel}`}
+                    aria-label={`${t("cronEditDetails")} ${jobLabel}`}
                   >
                     <Pencil className="h-3.5 w-3.5" />
                   </Button>