@nextclaw/ui 0.13.12 → 0.14.0

package/src/features/cron/hooks/use-cron-jobs.ts

@@ -0,0 +1,58 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  deleteCronJob,
+  fetchCronJobs,
+  runCronJob,
+  setCronJobEnabled
+} from '@/shared/lib/api';
+import { toast } from 'sonner';
+import { t } from '@/shared/lib/i18n';
+
+export function useCronJobs(params: { all?: boolean } = { all: true }) {
+  return useQuery({
+    queryKey: ['cron', params],
+    queryFn: () => fetchCronJobs(params),
+    staleTime: 10_000
+  });
+}
+
+function useCronMutationFeedback() {
+  const queryClient = useQueryClient();
+
+  return {
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['cron'] });
+      toast.success(t('configSavedApplied'));
+    },
+    onError: (error: Error) => {
+      toast.error(t('configSaveFailed') + ': ' + error.message);
+    }
+  };
+}
+
+export function useDeleteCronJob() {
+  const feedback = useCronMutationFeedback();
+
+  return useMutation({
+    mutationFn: ({ id }: { id: string }) => deleteCronJob(id),
+    ...feedback
+  });
+}
+
+export function useToggleCronJob() {
+  const feedback = useCronMutationFeedback();
+
+  return useMutation({
+    mutationFn: ({ id, enabled }: { id: string; enabled: boolean }) => setCronJobEnabled(id, { enabled }),
+    ...feedback
+  });
+}
+
+export function useRunCronJob() {
+  const feedback = useCronMutationFeedback();
+
+  return useMutation({
+    mutationFn: ({ id, force }: { id: string; force?: boolean }) => runCronJob(id, { force }),
+    ...feedback
+  });
+}

package/src/features/cron/index.ts

@@ -0,0 +1,7 @@
+export { CronConfig } from "./components/cron-config";
+export {
+  useCronJobs,
+  useDeleteCronJob,
+  useRunCronJob,
+  useToggleCronJob,
+} from "./hooks/use-cron-jobs";

package/src/features/marketplace/components/{marketplace-page.test.tsx → __tests__/marketplace-page.test.tsx}

@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { MarketplacePage } from "@/features/marketplace";
 import type {
   MarketplaceInstalledView,
@@ -10,8 +10,10 @@ type ItemsQueryState = {
   data?: MarketplaceListView;
   isLoading: boolean;
   isFetching: boolean;
+  isFetchingNextPage: boolean;
   isError: boolean;
   error: Error | null;
+  hasNextPage: boolean;
 };
 
 type InstalledQueryState = {
@@ -26,6 +28,7 @@ const mocks = vi.hoisted(() => ({
   navigate: vi.fn(),
   docOpen: vi.fn(),
   confirm: vi.fn(),
+  openExternalUrl: vi.fn(),
   routeParams: {} as { scene?: string },
   itemsQuery: null as unknown as ItemsQueryState,
   installedQuery: null as unknown as InstalledQueryState,
@@ -70,6 +73,12 @@ vi.mock("@/shared/hooks/use-confirm-dialog", () => ({
   }),
 }));
 
+vi.mock("@/shared/lib/host-capabilities", () => ({
+  hostCapabilityManager: {
+    openExternalUrl: mocks.openExternalUrl,
+  },
+}));
+
 vi.mock("@/features/marketplace/hooks/use-marketplace", () => ({
   useMarketplaceItems: () => mocks.itemsQuery,
   useMarketplaceSkillScenes: () => ({
@@ -121,8 +130,10 @@ function createItemsQuery(overrides: Partial<Record<string, unknown>> = {}) {
     data: undefined as MarketplaceListView | undefined,
     isLoading: false,
     isFetching: false,
+    isFetchingNextPage: false,
     isError: false,
     error: null,
+    hasNextPage: false,
     ...overrides,
   };
 }
@@ -150,6 +161,7 @@ describe("MarketplacePage", () => {
     mocks.navigate.mockReset();
     mocks.docOpen.mockReset();
     mocks.confirm.mockReset();
+    mocks.openExternalUrl.mockReset();
     mocks.routeParams = {};
     mocks.installMutation.mutateAsync.mockReset();
     mocks.manageMutation.mutate.mockReset();
@@ -198,6 +210,8 @@ describe("MarketplacePage", () => {
     render(<MarketplacePage forcedType="skills" />);
 
     expect(screen.queryByTestId("marketplace-list-skeleton")).toBeNull();
+    expect(screen.getByTestId("marketplace-list-refreshing")).toBeTruthy();
+    expect(screen.getAllByText("Updating...").length).toBeGreaterThan(0);
     expect(screen.getByText("Web Search")).toBeTruthy();
   });
 
@@ -240,4 +254,26 @@ describe("MarketplacePage", () => {
     expect(screen.getByText("Web Search")).toBeTruthy();
     expect(container.querySelector(".opacity-70")).toBeNull();
   });
+
+  it("opens SkillHub from the marketplace tab row", () => {
+    mocks.itemsQuery = createItemsQuery({
+      data: {
+        total: 1,
+        page: 1,
+        pageSize: 20,
+        totalPages: 1,
+        sort: "relevance",
+        items: [createMarketplaceItem()],
+      } satisfies MarketplaceListView,
+    });
+
+    render(<MarketplacePage forcedType="skills" />);
+
+    const openButton = screen.getByRole("button", {
+      name: /SkillHub/i,
+    });
+    fireEvent.click(openButton);
+
+    expect(mocks.openExternalUrl).toHaveBeenCalledWith("https://skillhub.cn/");
+  });
 });

package/src/features/marketplace/components/curated-shelves/marketplace-curated-shelves.tsx

@@ -23,11 +23,9 @@ import {
   type MarketplaceShelfLocalizedText,
   type MarketplaceShelfSceneVisual,
 } from "@/features/marketplace/components/curated-shelves/marketplace-curated-shelves.config";
-import { Skeleton } from "@/shared/components/ui/skeleton";
 
 const SCENE_CARD_GRID_CLASS =
   "grid grid-cols-[repeat(auto-fill,minmax(240px,320px))] justify-start gap-3";
-const SCENE_SKELETON_CARD_COUNT = 24;
 
 export type MarketplaceShelfEntry = {
   item: MarketplaceItemSummary;
@@ -76,7 +74,14 @@ export function MarketplaceCuratedShelves(props: {
           )}
         />
         {isScenesLoading ? (
-          <SceneGoalSkeletons />
+          <div
+            data-testid="marketplace-scenes-skeleton"
+            className="grid auto-rows-[104px] grid-cols-2 gap-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
+          >
+            <MarketplaceListSkeleton
+              count={MARKETPLACE_SHELF_SCENE_VISUALS.length}
+            />
+          </div>
         ) : (
           <div className="grid grid-cols-2 gap-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
             {scenes.map((scene) => (
@@ -115,29 +120,6 @@ export function MarketplaceCuratedShelves(props: {
   );
 }
 
-function SceneGoalSkeletons() {
-  return (
-    <div
-      data-testid="marketplace-scenes-skeleton"
-      className="grid grid-cols-2 gap-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
-    >
-      {MARKETPLACE_SHELF_SCENE_VISUALS.map((scene) => (
-        <div
-          key={scene.scene}
-          className="flex min-h-[74px] flex-col justify-center rounded-lg border border-gray-200/70 bg-white px-3 py-2.5 shadow-sm"
-        >
-          <div className="flex min-w-0 items-center gap-2">
-            <Skeleton className="h-7 w-7 shrink-0 rounded-md" />
-            <Skeleton className="h-3.5 min-w-0 flex-1" />
-            <Skeleton className="h-3 w-8 shrink-0" />
-          </div>
-          <Skeleton className="mt-2 h-3 w-4/5" />
-        </div>
-      ))}
-    </div>
-  );
-}
-
 function GoalCard(props: {
   scene: MarketplaceSceneView;
   language: string;
@@ -259,7 +241,7 @@ export function MarketplaceCuratedSceneView(props: {
             "min-h-0 flex-1 auto-rows-[166px] content-start",
           )}
         >
-          <MarketplaceListSkeleton count={SCENE_SKELETON_CARD_COUNT} />
+          <MarketplaceListSkeleton count={24} />
         </div>
       ) : entries.length > 0 ? (
         <div className={SCENE_CARD_GRID_CLASS}>
@@ -314,7 +296,12 @@ function ShelfItemRow(props: {
     <section className="space-y-2.5">
       <ShelfHeader icon={Icon} title={title} description={description} />
       {isLoading ? (
-        <RecentShelfSkeletons />
+        <div
+          data-testid="marketplace-recent-skeleton"
+          className="-mx-1 grid auto-rows-[166px] grid-cols-[repeat(4,260px)] gap-2.5 overflow-hidden px-1 pb-1.5"
+        >
+          <MarketplaceListSkeleton count={4} />
+        </div>
       ) : (
         <div className="-mx-1 flex gap-2.5 overflow-x-auto px-1 pb-1.5 custom-scrollbar">
           {entries.map((entry) => (
@@ -334,39 +321,6 @@ function ShelfItemRow(props: {
   );
 }
 
-function RecentShelfSkeletons() {
-  return (
-    <div
-      data-testid="marketplace-recent-skeleton"
-      className="-mx-1 flex gap-2.5 overflow-hidden px-1 pb-1.5"
-    >
-      {Array.from({ length: 4 }, (_, index) => (
-        <article
-          key={`marketplace-recent-skeleton-${index}`}
-          className="flex min-h-[166px] w-[260px] shrink-0 flex-col justify-between rounded-xl border border-gray-200/70 bg-white p-3 shadow-sm"
-        >
-          <div>
-            <div className="mb-2.5 flex min-w-0 items-start gap-2.5">
-              <Skeleton className="h-10 w-10 shrink-0 rounded-xl" />
-              <div className="min-w-0 flex-1 space-y-1.5 pt-0.5">
-                <Skeleton className="h-3.5 w-32 max-w-full" />
-                <Skeleton className="h-3 w-24 max-w-full" />
-              </div>
-            </div>
-            <Skeleton className="h-3 w-full" />
-            <Skeleton className="mt-1.5 h-3 w-4/5" />
-            <Skeleton className="mt-2 h-3 w-24" />
-          </div>
-          <div className="mt-3 flex items-center justify-between gap-3 border-t border-gray-100 pt-2.5">
-            <Skeleton className="h-3 w-20" />
-            <Skeleton className="h-7 w-16 rounded-md" />
-          </div>
-        </article>
-      ))}
-    </div>
-  );
-}
-
 function ShelfHeader({
   icon: Icon,
   title,

package/src/features/marketplace/components/marketplace-external-skill-source-action.tsx

@@ -0,0 +1,14 @@
+import { ExternalActionLink } from "@/shared/components/actions/action-link";
+import { hostCapabilityManager } from "@/shared/lib/host-capabilities";
+import { t } from "@/shared/lib/i18n";
+
+const SKILLHUB_URL = "https://skillhub.cn/";
+
+export function MarketplaceExternalSkillSourceAction() {
+  return (
+    <ExternalActionLink
+      label={t("marketplaceExternalSkillSourceTitle")}
+      onClick={() => void hostCapabilityManager.openExternalUrl(SKILLHUB_URL)}
+    />
+  );
+}

package/src/features/marketplace/components/marketplace-item-list-view.tsx

@@ -0,0 +1,167 @@
+import type {
+  MarketplaceInstalledRecord,
+  MarketplaceItemSummary,
+  MarketplaceManageAction,
+} from "@/shared/lib/api";
+import {
+  MarketplaceListCard,
+  type InstallState,
+  type ManageState,
+} from "@/features/marketplace/components/marketplace-list-card";
+import { cn } from "@/shared/lib/utils";
+import type { Ref } from "react";
+import {
+  MarketplaceInfiniteScrollStatus,
+  MarketplaceListSkeleton,
+} from "@/features/marketplace/components/marketplace-page-parts";
+
+export type MarketplaceItemListEntry = {
+  key: string;
+  item?: MarketplaceItemSummary;
+  record?: MarketplaceInstalledRecord;
+};
+
+export type MarketplaceItemListViewModel = {
+  scope: "all" | "installed";
+  entries: MarketplaceItemListEntry[];
+  header: {
+    title: string;
+    summary: string;
+    refreshingLabel: string;
+  };
+  status: {
+    showSkeleton: boolean;
+    isRefreshing: boolean;
+    error?: Error;
+  };
+  emptyLabel: string;
+  errorLabel: string;
+};
+
+type MarketplaceItemListActions = {
+  onOpen: (
+    item?: MarketplaceItemSummary,
+    record?: MarketplaceInstalledRecord,
+  ) => void;
+  onInstall: (item: MarketplaceItemSummary) => void;
+  onManage: (
+    action: MarketplaceManageAction,
+    record: MarketplaceInstalledRecord,
+  ) => void;
+};
+
+export function MarketplaceItemListView({
+  model,
+  showTitle,
+  operationState,
+  scroll,
+  actions,
+}: {
+  model: MarketplaceItemListViewModel;
+  showTitle: boolean;
+  operationState: {
+    installState: InstallState;
+    manageState: ManageState;
+  };
+  scroll: {
+    hasMore: boolean;
+    loadingMore: boolean;
+    sentinelRef: Ref<HTMLDivElement>;
+  };
+  actions: MarketplaceItemListActions;
+}) {
+  const {
+    scope,
+    entries,
+    header,
+    status,
+    emptyLabel,
+    errorLabel,
+  } = model;
+  const {
+    showSkeleton,
+    isRefreshing,
+    error,
+  } = status;
+  const {
+    hasMore,
+    loadingMore,
+    sentinelRef,
+  } = scroll;
+  const { installState, manageState } = operationState;
+  const { onOpen, onInstall, onManage } = actions;
+
+  return (
+    <section className={cn("flex min-h-full flex-col", showTitle && "gap-3")}>
+      {showTitle && (
+        <div className="flex items-center justify-between gap-3">
+          <h3 className="text-[14px] font-semibold text-gray-950">
+            {header.title}
+          </h3>
+          <div className="flex items-center gap-2 text-[12px] text-gray-500">
+            {isRefreshing && (
+              <span className="font-medium text-primary">
+                {header.refreshingLabel}
+              </span>
+            )}
+            <span>{header.summary}</span>
+          </div>
+        </div>
+      )}
+
+      {error && (
+        <div className="rounded-xl border border-rose-200 bg-rose-50 p-4 text-sm text-rose-700">
+          {errorLabel}: {error.message}
+        </div>
+      )}
+
+      {isRefreshing && (
+        <div
+          data-testid="marketplace-list-refreshing"
+          className="h-0.5 overflow-hidden rounded-full bg-primary/10"
+        >
+          <div className="h-full w-1/3 animate-pulse rounded-full bg-primary" />
+        </div>
+      )}
+
+      <div
+        data-testid={showSkeleton ? "marketplace-list-skeleton" : undefined}
+        className={cn(
+          "grid grid-cols-1 gap-3 lg:grid-cols-2 2xl:grid-cols-3",
+          showSkeleton && "min-h-0 flex-1 auto-rows-[104px] content-start",
+        )}
+      >
+        {showSkeleton && <MarketplaceListSkeleton count={36} />}
+
+        {!showSkeleton &&
+          !error &&
+          entries.map((entry) => (
+            <MarketplaceListCard
+              key={entry.key}
+              item={entry.item}
+              record={entry.record}
+              installState={installState}
+              manageState={manageState}
+              onOpen={() => onOpen(entry.item, entry.record)}
+              onInstall={onInstall}
+              onManage={onManage}
+            />
+          ))}
+      </div>
+
+      {!showSkeleton && !error && entries.length === 0 && (
+        <div className="py-8 text-center text-[13px] text-gray-500">
+          {emptyLabel}
+        </div>
+      )}
+
+      {scope === "all" && !showSkeleton && !error && (
+        <MarketplaceInfiniteScrollStatus
+          hasMore={hasMore}
+          loading={loadingMore}
+          sentinelRef={sentinelRef}
+        />
+      )}
+    </section>
+  );
+}

package/src/features/marketplace/components/marketplace-list-card.tsx

@@ -3,6 +3,7 @@ import type {
   MarketplaceItemSummary,
   MarketplaceManageAction,
 } from "@/shared/lib/api";
+import { useI18n } from "@/app/components/i18n-provider";
 import {
   Tooltip,
   TooltipContent,
@@ -34,13 +35,13 @@ export type ManageState = {
 type MarketplaceListCardActionProps = {
   item?: MarketplaceItemSummary;
   record?: MarketplaceInstalledRecord;
-  isInstalling: boolean;
-  isDisabled: boolean;
-  canUpdate: boolean;
-  canUninstall: boolean;
-  busyAction?: MarketplaceManageAction;
-  busyForRecord: boolean;
-  language: string;
+  state: {
+    isInstalling: boolean;
+    isDisabled: boolean;
+    canUpdate: boolean;
+    canUninstall: boolean;
+    busyAction?: MarketplaceManageAction;
+  };
   onInstall: (item: MarketplaceItemSummary) => void;
   onManage: (
     action: MarketplaceManageAction,
@@ -96,16 +97,18 @@ function MarketplaceListCardActions(props: MarketplaceListCardActionProps) {
   const {
     item,
     record,
+    state,
+    onInstall,
+    onManage,
+  } = props;
+  const {
     isInstalling,
     isDisabled,
     canUpdate,
     canUninstall,
     busyAction,
-    busyForRecord,
-    language,
-    onInstall,
-    onManage,
-  } = props;
+  } = state;
+  const busyForRecord = Boolean(busyAction);
   const hasActions = Boolean((item && !record) || (record && (canUpdate || canUninstall)));
 
   return (
@@ -122,10 +125,7 @@ function MarketplaceListCardActions(props: MarketplaceListCardActionProps) {
         )}
       >
         {record ? (
-          <MarketplaceInstalledStatusIcon
-            disabled={isDisabled}
-            language={language}
-          />
+          <MarketplaceInstalledStatusIcon disabled={isDisabled} />
         ) : null}
       </div>
 
@@ -187,11 +187,9 @@ function MarketplaceListCardActions(props: MarketplaceListCardActionProps) {
   );
 }
 
-function MarketplaceInstalledStatusIcon(props: {
-  disabled: boolean;
-  language: string;
-}) {
-  const { disabled, language } = props;
+function MarketplaceInstalledStatusIcon(props: { disabled: boolean }) {
+  const { disabled } = props;
+  const { language } = useI18n();
   const label = disabled
     ? readLocalized({ zh: "已禁用", en: "Disabled" }, language)
     : readLocalized({ zh: "已安装", en: "Installed" }, language);
@@ -223,7 +221,6 @@ function MarketplaceInstalledStatusIcon(props: {
 export function MarketplaceListCard(props: {
   item?: MarketplaceItemSummary;
   record?: MarketplaceInstalledRecord;
-  language: string;
   installState: InstallState;
   manageState: ManageState;
   onOpen: () => void;
@@ -236,13 +233,13 @@ export function MarketplaceListCard(props: {
   const {
     item,
     record,
-    language,
     installState,
     manageState,
     onOpen,
     onInstall,
     onManage,
   } = props;
+  const { language } = useI18n();
   const localeFallbacks = buildLocaleFallbacks(language);
   const title =
     item?.name ??
@@ -258,7 +255,6 @@ export function MarketplaceListCard(props: {
   const busyAction = targetId
     ? manageState.actionsByTarget.get(targetId)
     : undefined;
-  const busyForRecord = Boolean(busyAction);
   const canUninstall = record?.type === "skill" && record.source === "workspace";
   const canUpdate = record?.type === "skill" && record.origin === "marketplace";
   const isDisabled = record
@@ -287,13 +283,13 @@ export function MarketplaceListCard(props: {
       <MarketplaceListCardActions
         item={item}
         record={record}
-        isInstalling={isInstalling}
-        isDisabled={isDisabled}
-        canUpdate={canUpdate}
-        canUninstall={canUninstall}
-        busyAction={busyAction}
-        busyForRecord={busyForRecord}
-        language={language}
+        state={{
+          isInstalling,
+          isDisabled,
+          canUpdate,
+          canUninstall,
+          busyAction,
+        }}
         onInstall={onInstall}
         onManage={onManage}
       />

package/src/features/marketplace/components/marketplace-page-data.ts

@@ -4,12 +4,6 @@ import type {
 } from "@/shared/lib/api";
 import { pickLocalizedText } from "@/features/marketplace/components/marketplace-localization";
 
-export type InstalledRenderEntry = {
-  key: string;
-  record: MarketplaceInstalledRecord;
-  item?: MarketplaceItemSummary;
-};
-
 function normalizeMarketplaceKey(value: string | undefined): string {
   return (value ?? "").trim().toLowerCase();
 }

package/src/features/marketplace/components/marketplace-page-parts.tsx

@@ -8,11 +8,12 @@ import {
 } from "@/shared/components/ui/select";
 import { Skeleton } from "@/shared/components/ui/skeleton";
 import { t } from "@/shared/lib/i18n";
-import { PackageSearch } from "lucide-react";
+import { Loader2, PackageSearch } from "lucide-react";
 import type { Ref } from "react";
 
 export function FilterPanel({
   scope,
+  isRefreshing,
   searchText,
   searchPlaceholder,
   sort,
@@ -20,6 +21,7 @@ export function FilterPanel({
   onSortChange,
 }: {
   scope: "all" | "installed";
+  isRefreshing: boolean;
   searchText: string;
   searchPlaceholder: string;
   sort: MarketplaceSort;
@@ -35,8 +37,14 @@ export function FilterPanel({
             value={searchText}
             onChange={(event) => onSearchTextChange(event.target.value)}
             placeholder={searchPlaceholder}
-            className="h-9 w-full rounded-xl border border-gray-200/80 pl-9 pr-3 text-sm focus:outline-none focus:ring-1 focus:ring-primary/40"
+            className="h-9 w-full rounded-xl border border-gray-200/80 pl-9 pr-9 text-sm focus:outline-none focus:ring-1 focus:ring-primary/40"
           />
+          {isRefreshing && (
+            <Loader2
+              className="absolute right-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 animate-spin text-primary"
+              aria-label={t("marketplaceRefreshingResults")}
+            />
+          )}
         </div>
 
         {scope === "all" && (