@nextclaw/ui 0.20.2 → 0.21.0

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>

package/src/features/cron/hooks/__tests__/use-cron-job-actions.test.tsx

@@ -0,0 +1,95 @@
+import { act, renderHook } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import type { CronJobView } from "@/shared/lib/api";
+import { setLanguage } from "@/shared/lib/i18n";
+import { useCronJobActions } from "@/features/cron/hooks/use-cron-job-actions";
+
+const mocks = vi.hoisted(() => ({
+  confirm: vi.fn(),
+  deleteJob: vi.fn(),
+  runJob: vi.fn(),
+  toggleJob: vi.fn(),
+}));
+
+vi.mock("@/features/cron/hooks/use-cron-jobs", () => ({
+  useDeleteCronJob: () => ({ mutateAsync: mocks.deleteJob }),
+  useRunCronJob: () => ({ mutateAsync: mocks.runJob }),
+  useToggleCronJob: () => ({ mutateAsync: mocks.toggleJob }),
+}));
+
+vi.mock("@/shared/hooks/use-confirm-dialog", () => ({
+  useConfirmDialog: () => ({
+    confirm: mocks.confirm,
+    ConfirmDialog: () => null,
+  }),
+}));
+
+function createJob(overrides: Partial<CronJobView> = {}): 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: null,
+      lastStatus: null,
+      lastError: null,
+    },
+    createdAt: "2026-08-26T01:00:00.000Z",
+    updatedAt: "2026-08-26T01:00:00.000Z",
+    deleteAfterRun: false,
+    ...overrides,
+  };
+}
+
+describe("useCronJobActions", () => {
+  beforeEach(() => {
+    setLanguage("zh");
+    vi.clearAllMocks();
+    mocks.confirm.mockResolvedValue(true);
+    mocks.deleteJob.mockResolvedValue({ deleted: true });
+    mocks.runJob.mockResolvedValue({ job: createJob(), executed: true });
+    mocks.toggleJob.mockResolvedValue({ job: createJob() });
+  });
+
+  it("requires confirmation and forces a paused task to run without enabling it", async () => {
+    const { result } = renderHook(() => useCronJobActions());
+    const job = createJob({ enabled: false });
+
+    await act(async () => {
+      await result.current.runJob(job);
+    });
+
+    expect(mocks.confirm).toHaveBeenCalledWith({
+      title: "任务已暂停，仍要立即执行?",
+      description: "每日绘画 (paint-daily)",
+      confirmLabel: "立即执行",
+    });
+    expect(mocks.runJob).toHaveBeenCalledWith({ id: "paint-daily", force: true });
+    expect(mocks.toggleJob).not.toHaveBeenCalled();
+  });
+
+  it("uses a destructive confirmation before deleting", async () => {
+    const { result } = renderHook(() => useCronJobActions());
+
+    await act(async () => {
+      await result.current.deleteJob(createJob());
+    });
+
+    expect(mocks.confirm).toHaveBeenCalledWith({
+      title: "确认删除定时任务?",
+      description: "每日绘画 (paint-daily)",
+      confirmLabel: "删除",
+      variant: "destructive",
+    });
+    expect(mocks.deleteJob).toHaveBeenCalledWith({ id: "paint-daily" });
+  });
+});

package/src/features/cron/hooks/use-cron-job-actions.ts

@@ -0,0 +1,109 @@
+import { useState } from "react";
+
+import type { CronJobView } from "@/shared/lib/api";
+import { useConfirmDialog } from "@/shared/hooks/use-confirm-dialog";
+import { t } from "@/shared/lib/i18n";
+import {
+  useDeleteCronJob,
+  useRunCronJob,
+  useToggleCronJob,
+} from "./use-cron-jobs";
+
+type AfterSuccess = () => void;
+
+function describeJob(job: CronJobView): string {
+  return job.name ? `${job.name} (${job.id})` : job.id;
+}
+
+export function useCronJobActions() {
+  const deleteCronJob = useDeleteCronJob();
+  const runCronJob = useRunCronJob();
+  const toggleCronJob = useToggleCronJob();
+  const { confirm, ConfirmDialog } = useConfirmDialog();
+  const [pendingJobIds, setPendingJobIds] = useState<ReadonlySet<string>>(
+    new Set(),
+  );
+
+  const execute = async (
+    job: CronJobView,
+    action: () => Promise<unknown>,
+    afterSuccess?: AfterSuccess,
+  ): Promise<boolean> => {
+    setPendingJobIds((ids) => new Set(ids).add(job.id));
+    try {
+      await action();
+      afterSuccess?.();
+      return true;
+    } catch {
+      return false;
+    } finally {
+      setPendingJobIds((ids) => {
+        const nextIds = new Set(ids);
+        nextIds.delete(job.id);
+        return nextIds;
+      });
+    }
+  };
+
+  const deleteJob = async (
+    job: CronJobView,
+    afterSuccess?: AfterSuccess,
+  ): Promise<boolean> => {
+    const confirmed = await confirm({
+      title: `${t("cronDeleteConfirm")}?`,
+      description: describeJob(job),
+      confirmLabel: t("delete"),
+      variant: "destructive",
+    });
+    if (!confirmed) {
+      return false;
+    }
+    return await execute(
+      job,
+      () => deleteCronJob.mutateAsync({ id: job.id }),
+      afterSuccess,
+    );
+  };
+
+  const runJob = async (
+    job: CronJobView,
+    afterSuccess?: AfterSuccess,
+  ): Promise<boolean> => {
+    const force = !job.enabled;
+    if (force) {
+      const confirmed = await confirm({
+        title: `${t("cronRunForceConfirm")}?`,
+        description: describeJob(job),
+        confirmLabel: t("cronRunNow"),
+      });
+      if (!confirmed) {
+        return false;
+      }
+    }
+    return await execute(
+      job,
+      () => runCronJob.mutateAsync({ id: job.id, force }),
+      afterSuccess,
+    );
+  };
+
+  const toggleJob = async (
+    job: CronJobView,
+    enabled: boolean,
+    afterSuccess?: AfterSuccess,
+  ): Promise<boolean> => {
+    return await execute(
+      job,
+      () => toggleCronJob.mutateAsync({ id: job.id, enabled }),
+      afterSuccess,
+    );
+  };
+
+  return {
+    ConfirmDialog,
+    deleteJob,
+    isPending: (job: CronJobView) => pendingJobIds.has(job.id),
+    runJob,
+    toggleJob,
+  };
+}

package/src/features/cron/index.ts

@@ -1,4 +1,6 @@
 export { CronConfig } from "./components/cron-config";
+export { CronJobDetailDialog } from "./components/cron-job-detail-dialog";
+export { useCronJobActions } from "./hooks/use-cron-job-actions";
 export {
   useCronJobs,
   useDeleteCronJob,

package/src/features/desktop-capabilities/components/desktop-authorization-dialog.test.tsx

@@ -0,0 +1,58 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { DesktopAuthorizationDialog } from "./desktop-authorization-dialog";
+import { useDesktopAuthorizationStore } from "../stores/desktop-authorization.store";
+
+const mocks = vi.hoisted(() => ({ grantAccess: vi.fn() }));
+
+vi.mock("../managers/desktop-capability.manager", () => ({
+  desktopCapabilityManager: {
+    grantAccess: mocks.grantAccess,
+  },
+}));
+
+describe("DesktopAuthorizationDialog", () => {
+  beforeEach(() => {
+    mocks.grantAccess.mockReset();
+    mocks.grantAccess.mockResolvedValue({});
+    useDesktopAuthorizationStore.getState().clear();
+  });
+
+  it("shows the trusted subject and grants only after explicit approval", async () => {
+    useDesktopAuthorizationStore.getState().present({
+      applicationId: "wechat",
+      request: {
+        subject: { type: "agent", id: "main" },
+        resource: {
+          type: "desktop.application",
+          target: { applicationId: "wechat", platform: "darwin", bundleId: "com.tencent.xinWeChat" },
+        },
+        access: ["ui.write"],
+        declarationFingerprint: "fingerprint",
+      },
+    });
+
+    render(<DesktopAuthorizationDialog />);
+    expect(screen.getByText("AI · main")).toBeTruthy();
+    expect(screen.getByText("wechat")).toBeTruthy();
+    expect(mocks.grantAccess).not.toHaveBeenCalled();
+
+    fireEvent.click(screen.getByRole("button", { name: "Allow" }));
+    await waitFor(() => expect(mocks.grantAccess).toHaveBeenCalledOnce());
+  });
+
+  it("explains the bounded pointer permission in user terms", () => {
+    useDesktopAuthorizationStore.getState().present({
+      applicationId: "wechat",
+      request: {
+        subject: { type: "agent", id: "main" },
+        resource: { type: "desktop.application", target: { applicationId: "wechat", platform: "darwin", bundleId: "com.tencent.xinWeChat" } },
+        access: ["input.pointer"],
+        declarationFingerprint: "fingerprint",
+      },
+    });
+    render(<DesktopAuthorizationDialog />);
+    expect(screen.getByText("Click inside the app window")).toBeTruthy();
+    expect(screen.getByText(/cannot use keys, scroll, drag, send, or confirm/i)).toBeTruthy();
+  });
+});

package/src/features/desktop-capabilities/components/desktop-authorization-dialog.tsx

@@ -0,0 +1,161 @@
+import { useEffect, useState } from "react";
+import { ShieldAlert } from "lucide-react";
+import { toast } from "sonner";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/components/ui/dialog";
+import { Button } from "@/shared/components/ui/button";
+import { appQueryClient } from "@/app-query-client";
+import { nextclawClient } from "@/shared/lib/api/managers/client.manager";
+import { t } from "@/shared/lib/i18n";
+import { desktopCapabilityManager } from "../managers/desktop-capability.manager";
+import {
+  type DesktopAuthorizationRequest,
+  useDesktopAuthorizationStore,
+} from "../stores/desktop-authorization.store";
+
+const AUTHORIZATION_EVENT_TYPE = "desktop.authorization.required";
+
+export function DesktopAuthorizationDialog() {
+  const pending = useDesktopAuthorizationStore((state) => state.pending);
+  const present = useDesktopAuthorizationStore((state) => state.present);
+  const clear = useDesktopAuthorizationStore((state) => state.clear);
+  const [isGranting, setIsGranting] = useState(false);
+
+  useEffect(() => nextclawClient.eventBus.subscribeAll((event) => {
+    if (event.type !== AUTHORIZATION_EVENT_TYPE) return;
+    const request = readAuthorizationRequest(event.payload);
+    if (request) present(request);
+  }), [present]);
+
+  const allow = async () => {
+    if (!pending || isGranting) return;
+    setIsGranting(true);
+    try {
+      await desktopCapabilityManager.grantAccess(pending.request);
+      await appQueryClient.invalidateQueries({
+        queryKey: ["desktop-capability", "grants"],
+      });
+      clear();
+      toast.success(t("desktopAuthorizationAllowed"));
+    } catch (error) {
+      toast.error(
+        error instanceof Error
+          ? error.message
+          : t("desktopAuthorizationFailed"),
+      );
+    } finally {
+      setIsGranting(false);
+    }
+  };
+
+  return (
+    <Dialog
+      open={Boolean(pending)}
+      onOpenChange={(open) => {
+        if (!open && !isGranting) clear();
+      }}
+    >
+      <DialogContent className="[&>:last-child]:hidden">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <ShieldAlert className="h-4 w-4 text-amber-600" />
+            {t("desktopAuthorizationTitle")}
+          </DialogTitle>
+          <DialogDescription>
+            {t("desktopAuthorizationDescription")}
+          </DialogDescription>
+        </DialogHeader>
+        {pending ? (
+          <div className="space-y-3 rounded-xl bg-muted/55 p-4 text-sm">
+            <AuthorizationField
+              label={t("desktopAuthorizationCaller")}
+              value={formatSubject(pending)}
+            />
+            <AuthorizationField
+              label={t("desktopAuthorizationApplication")}
+              value={pending.applicationId}
+            />
+            <AuthorizationField
+              label={t("desktopAuthorizationAccess")}
+              value={pending.request.access.map(formatAccess).join(", ")}
+            />
+            <p className="text-xs leading-5 text-muted-foreground">
+              {formatRisk(pending.request.access)}
+            </p>
+          </div>
+        ) : null}
+        <DialogFooter className="gap-2 sm:gap-0">
+          <Button
+            type="button"
+            variant="outline"
+            disabled={isGranting}
+            onClick={clear}
+          >
+            {t("desktopAuthorizationReject")}
+          </Button>
+          <Button type="button" disabled={isGranting} onClick={() => void allow()}>
+            {isGranting ? t("desktopAuthorizationAllowing") : t("desktopAuthorizationAllow")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function AuthorizationField({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="grid grid-cols-[5rem_minmax(0,1fr)] gap-3">
+      <div className="text-xs font-medium text-muted-foreground">{label}</div>
+      <div className="min-w-0 break-words text-xs text-foreground">{value}</div>
+    </div>
+  );
+}
+
+function readAuthorizationRequest(value: unknown): DesktopAuthorizationRequest | null {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return null;
+  const payload = value as Record<string, unknown>;
+  const { request } = payload;
+  if (!request || typeof request !== "object" || Array.isArray(request)) return null;
+  const candidate = request as Record<string, unknown>;
+  if (
+    typeof payload.applicationId !== "string" ||
+    !candidate.subject ||
+    !candidate.resource ||
+    !Array.isArray(candidate.access) ||
+    typeof candidate.declarationFingerprint !== "string"
+  ) return null;
+  return {
+    applicationId: payload.applicationId,
+    request: candidate as DesktopAuthorizationRequest["request"],
+  };
+}
+
+function formatSubject(pending: DesktopAuthorizationRequest): string {
+  const { subject } = pending.request;
+  const label = subject.type === "agent"
+    ? t("desktopCapabilitiesAgent")
+    : t("desktopCapabilitiesExtension");
+  return `${label} · ${subject.id}`;
+}
+
+function formatAccess(access: string): string {
+  if (access === "ui.read") return t("desktopAuthorizationRead");
+  if (access === "ui.observe") return t("desktopAuthorizationObserve");
+  if (access === "ui.write") return t("desktopAuthorizationWrite");
+  if (access === "screen.capture-window") return t("desktopAuthorizationScreenCapture");
+  if (access === "input.pointer") return t("desktopAuthorizationPointerInput");
+  return access;
+}
+
+function formatRisk(access: string[]): string {
+  if (access.includes("ui.write")) return t("desktopAuthorizationWriteRisk");
+  if (access.includes("screen.capture-window")) return t("desktopAuthorizationScreenCaptureRisk");
+  if (access.includes("input.pointer")) return t("desktopAuthorizationPointerInputRisk");
+  return t("desktopAuthorizationReadRisk");
+}

package/src/features/desktop-capabilities/hooks/use-desktop-capabilities.test.ts

@@ -0,0 +1,10 @@
+import { describe, expect, it } from "vitest";
+import { isDesktopAutomationAvailable } from "./use-desktop-capabilities";
+
+describe("isDesktopAutomationAvailable", () => {
+  it("uses only the backend product feature-control value", () => {
+    expect(isDesktopAutomationAvailable({ desktopAutomation: { available: true } })).toBe(true);
+    expect(isDesktopAutomationAvailable({ desktopAutomation: { available: false } })).toBe(false);
+    expect(isDesktopAutomationAvailable(undefined)).toBe(false);
+  });
+});

package/src/features/desktop-capabilities/hooks/use-desktop-capabilities.ts

@@ -0,0 +1,55 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { CapabilityGrantView, ProductFeatureControlsView } from "@nextclaw/client-sdk";
+import { useFeatureControls } from "@/app/hooks/use-feature-controls";
+import { desktopCapabilityManager } from "../managers/desktop-capability.manager";
+
+const STATUS_QUERY_KEY = ["desktop-capability", "status"] as const;
+const GRANTS_QUERY_KEY = ["desktop-capability", "grants"] as const;
+
+export function useDesktopCapabilityStatus() {
+  return useQuery({
+    queryKey: STATUS_QUERY_KEY,
+    queryFn: desktopCapabilityManager.getStatus,
+  });
+}
+
+export function useDesktopCapabilityAvailability(): boolean {
+  const featureControls = useFeatureControls();
+  return isDesktopAutomationAvailable(featureControls.data);
+}
+
+export function isDesktopAutomationAvailable(controls: ProductFeatureControlsView | undefined): boolean {
+  return controls?.desktopAutomation.available === true;
+}
+
+export function useDesktopCapabilityGrants() {
+  return useQuery({
+    queryKey: GRANTS_QUERY_KEY,
+    queryFn: desktopCapabilityManager.listGrants,
+  });
+}
+
+export function useRequestDesktopSystemPermission() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: desktopCapabilityManager.requestSystemPermission,
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: STATUS_QUERY_KEY });
+    },
+  });
+}
+
+export function useOpenDesktopSystemSettings() {
+  return useMutation({ mutationFn: desktopCapabilityManager.openSystemSettings });
+}
+
+export function useRevokeDesktopGrant() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (grant: CapabilityGrantView) =>
+      await desktopCapabilityManager.revokeGrant(grant),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: GRANTS_QUERY_KEY });
+    },
+  });
+}

package/src/features/desktop-capabilities/index.ts

@@ -0,0 +1 @@
+export { DesktopAuthorizationDialog } from "./components/desktop-authorization-dialog";

package/src/features/desktop-capabilities/managers/desktop-capability.manager.ts

@@ -0,0 +1,25 @@
+import type {
+  CapabilityGrantRequestView,
+  CapabilityGrantView,
+} from "@nextclaw/client-sdk";
+import { nextclawClient } from "@/shared/lib/api/managers/client.manager";
+
+export class DesktopCapabilityManager {
+  getStatus = async () => await nextclawClient.capabilityAccess.getDesktopStatus();
+
+  listGrants = async () => await nextclawClient.capabilityAccess.listDesktopGrants();
+
+  grantAccess = async (request: CapabilityGrantRequestView) =>
+    await nextclawClient.capabilityAccess.grantDesktopAccess(request);
+
+  requestSystemPermission = async () =>
+    await nextclawClient.capabilityAccess.requestDesktopPermissions();
+
+  openSystemSettings = async () =>
+    await nextclawClient.capabilityAccess.openDesktopPermissionSettings();
+
+  revokeGrant = async (grant: CapabilityGrantView) =>
+    await nextclawClient.capabilityAccess.revokeDesktopAccess(grant);
+}
+
+export const desktopCapabilityManager = new DesktopCapabilityManager();