@nextclaw/ui 0.12.23 → 0.12.25

package/src/features/marketplace/components/marketplace-page-detail.test.tsx

@@ -63,6 +63,11 @@ vi.mock("@/shared/hooks/use-confirm-dialog", () => ({
 vi.mock("@/features/marketplace/hooks/use-marketplace", () => ({
   useMarketplaceItems: () => mocks.itemsQuery,
   useMarketplaceInstalled: () => mocks.installedQuery,
+  useMarketplaceSkillScenes: () => ({
+    data: { scenes: [] },
+    isLoading: false,
+  }),
+  useMarketplaceSkillSceneCounts: () => new Map(),
   useInstallMarketplaceItem: () => ({
     mutateAsync: vi.fn(),
     isPending: false,
@@ -103,7 +108,7 @@ function createItemsQuery(items: MarketplaceItemSummary[]): ItemsQueryState {
     data: {
       total: items.length,
       page: 1,
-      pageSize: 12,
+      pageSize: 20,
       totalPages: 1,
       sort: "relevance",
       items,
@@ -162,7 +167,9 @@ describe("MarketplacePage detail loading", () => {
     await user.click(screen.getByText("Web Search"));
 
     expect(mocks.docOpen).toHaveBeenCalledTimes(1);
-    expect(String(mocks.docOpen.mock.calls[0]?.[0])).toContain("Loading");
+    const loadingDetailHtml = decodeURIComponent(String(mocks.docOpen.mock.calls[0]?.[0]));
+    expect(loadingDetailHtml).toContain('aria-busy="true"');
+    expect(loadingDetailHtml).not.toContain("Loading");
     expect(mocks.docOpen.mock.calls[0]?.[1]).toMatchObject({
       dedupeKey: "marketplace:skill:web-search",
       kind: "content",

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

@@ -70,7 +70,7 @@ export function MarketplaceListSkeleton({ count }: {
       {Array.from({ length: count }, (_, index) => (
         <article
           key={`marketplace-skeleton-${index}`}
-          className="rounded-2xl border border-gray-200/40 bg-white px-5 py-4 shadow-sm"
+          className="h-full rounded-2xl border border-gray-200/40 bg-white px-5 py-4 shadow-sm"
         >
           <div className="flex items-start justify-between gap-3.5">
             <div className="flex min-w-0 flex-1 gap-3">

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

@@ -28,6 +28,7 @@ const mocks = vi.hoisted(() => ({
   navigate: vi.fn(),
   docOpen: vi.fn(),
   confirm: vi.fn(),
+  routeParams: {} as { type?: string; scene?: string },
   itemsQuery: null as unknown as ItemsQueryState,
   installedQuery: null as unknown as InstalledQueryState,
   installMutation: {
@@ -48,7 +49,7 @@ vi.mock("react-router-dom", async () => {
   return {
     ...(actual as object),
     useNavigate: () => mocks.navigate,
-    useParams: () => ({}),
+    useParams: () => mocks.routeParams,
   };
 });
 
@@ -73,6 +74,23 @@ vi.mock("@/shared/hooks/use-confirm-dialog", () => ({
 
 vi.mock("@/features/marketplace/hooks/use-marketplace", () => ({
   useMarketplaceItems: () => mocks.itemsQuery,
+  useMarketplaceSkillScenes: () => ({
+    data: {
+      scenes: [
+        {
+          scene: "development-debugging",
+          title: "Development",
+          description: "Review, debug, analyze, and verify delivery work.",
+          count: 2,
+        },
+      ],
+    },
+    isLoading: false,
+    isFetching: false,
+    isError: false,
+    error: null,
+  }),
+  useMarketplaceSkillSceneCounts: () => new Map([["development-debugging", 2]]),
   useMarketplaceInstalled: () => mocks.installedQuery,
   useInstallMarketplaceItem: () => mocks.installMutation,
   useManageMarketplaceItem: () => mocks.manageMutation,
@@ -169,6 +187,7 @@ describe("MarketplacePage", () => {
     mocks.navigate.mockReset();
     mocks.docOpen.mockReset();
     mocks.confirm.mockReset();
+    mocks.routeParams = {};
     mocks.installMutation.mutateAsync.mockReset();
     mocks.manageMutation.mutate.mockReset();
     mocks.manageMutation.mutateAsync.mockReset();
@@ -193,7 +212,7 @@ describe("MarketplacePage", () => {
       container.querySelectorAll(
         '[data-testid="marketplace-list-skeleton"] > article',
       ),
-    ).toHaveLength(12);
+    ).toHaveLength(36);
   });
 
   it("keeps loaded cards visible during background refresh", () => {
@@ -201,7 +220,7 @@ describe("MarketplacePage", () => {
       data: {
         total: 1,
         page: 1,
-        pageSize: 12,
+        pageSize: 20,
         totalPages: 1,
         sort: "relevance",
         items: [createMarketplaceItem()],
@@ -220,7 +239,7 @@ describe("MarketplacePage", () => {
       data: {
         total: 1,
         page: 1,
-        pageSize: 12,
+        pageSize: 20,
         totalPages: 1,
         sort: "relevance",
         items: [
@@ -256,7 +275,7 @@ describe("MarketplacePage", () => {
       data: {
         total: 1,
         page: 1,
-        pageSize: 12,
+        pageSize: 20,
         totalPages: 1,
         sort: "relevance",
         items: [createPluginMarketplaceItem()],
@@ -277,7 +296,7 @@ describe("MarketplacePage", () => {
       data: {
         total: 2,
         page: 1,
-        pageSize: 12,
+        pageSize: 20,
         totalPages: 1,
         sort: "relevance",
         items: [

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

@@ -23,7 +23,6 @@ import {
 } from "@/features/marketplace/hooks/use-marketplace";
 import {
   FilterPanel,
-  MarketplaceListSkeleton,
   MarketplaceInfiniteScrollStatus,
 } from "@/features/marketplace/components/marketplace-page-parts";
 import {
@@ -34,25 +33,29 @@ import {
   buildCatalogLookup,
   buildInstalledRecordLookup,
   findCatalogItemForRecord,
-  findInstalledRecordForItem,
   matchInstalledSearch,
   type InstalledRenderEntry,
 } from "@/features/marketplace/components/marketplace-page-data";
 import { buildGenericDetailDataUrl } from "@/features/marketplace/components/marketplace-detail-doc";
-import {
-  MarketplaceListCard,
-  type InstallState,
-  type ManageState,
+import type {
+  InstallState,
+  ManageState,
 } from "@/features/marketplace/components/marketplace-list-card";
+import { MarketplaceCatalogGrid } from "@/features/marketplace/components/marketplace-catalog-grid";
+import {
+  MarketplaceCuratedSceneView,
+  MarketplaceCuratedShelves,
+} from "@/features/marketplace/components/curated-shelves/marketplace-curated-shelves";
+import { useMarketplaceCuratedSceneRoute } from "@/features/marketplace/hooks/use-marketplace-curated-scene-route";
 import { t } from "@/shared/lib/i18n";
-import { PageHeader, PageLayout } from "@/app/components/layout/page-layout";
+import { PageLayout } from "@/app/components/layout/page-layout";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { useInfiniteScrollLoader } from "@/shared/hooks/use-infinite-scroll-loader";
 import { Tabs } from "@/shared/components/ui/tabs-custom";
 
-const PAGE_SIZE = 12;
-const SKELETON_CARD_COUNT = PAGE_SIZE;
+const PAGE_SIZE = 20;
+const SKELETON_CARD_COUNT = 36;
 
 type ScopeType = "all" | "installed";
 
@@ -61,10 +64,43 @@ type MarketplacePageProps = {
   forcedType?: MarketplaceRouteType;
 };
 
+function getMarketplaceCopyKeys(typeFilter: MarketplaceItemType) {
+  if (typeFilter === "plugin") {
+    return {
+      pageTitle: "marketplacePluginsPageTitle",
+      pageDescription: "marketplacePluginsPageDescription",
+      tabMarketplace: "marketplaceTabMarketplacePlugins",
+      tabInstalled: "marketplaceTabInstalledPlugins",
+      searchPlaceholder: "marketplaceSearchPlaceholderPlugins",
+      sectionCatalog: "marketplaceSectionPlugins",
+      sectionInstalled: "marketplaceSectionInstalledPlugins",
+      errorLoadData: "marketplaceErrorLoadingPluginsData",
+      errorLoadInstalled: "marketplaceErrorLoadingInstalledPlugins",
+      emptyData: "marketplaceNoPlugins",
+      emptyInstalled: "marketplaceNoInstalledPlugins",
+      installedCountSuffix: "marketplaceInstalledPluginsCountSuffix",
+    };
+  }
+  return {
+    pageTitle: "marketplaceSkillsPageTitle",
+    pageDescription: "marketplaceSkillsPageDescription",
+    tabMarketplace: "marketplaceTabMarketplaceSkills",
+    tabInstalled: "marketplaceTabInstalledSkills",
+    searchPlaceholder: "marketplaceSearchPlaceholderSkills",
+    sectionCatalog: "marketplaceSectionSkills",
+    sectionInstalled: "marketplaceSectionInstalledSkills",
+    errorLoadData: "marketplaceErrorLoadingSkillsData",
+    errorLoadInstalled: "marketplaceErrorLoadingInstalledSkills",
+    emptyData: "marketplaceNoSkills",
+    emptyInstalled: "marketplaceNoInstalledSkills",
+    installedCountSuffix: "marketplaceInstalledSkillsCountSuffix",
+  };
+}
+
 export function MarketplacePage(props: MarketplacePageProps = {}) {
   const { forcedType } = props;
   const navigate = useNavigate();
-  const params = useParams<{ type?: string }>();
+  const params = useParams<{ type?: string; scene?: string }>();
   const { language } = useI18n();
   const docBrowser = useDocBrowser();
 
@@ -94,36 +130,7 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
     [language],
   );
 
-  const isPluginModule = typeFilter === "plugin";
-  const copyKeys = isPluginModule
-    ? {
-        pageTitle: "marketplacePluginsPageTitle",
-        pageDescription: "marketplacePluginsPageDescription",
-        tabMarketplace: "marketplaceTabMarketplacePlugins",
-        tabInstalled: "marketplaceTabInstalledPlugins",
-        searchPlaceholder: "marketplaceSearchPlaceholderPlugins",
-        sectionCatalog: "marketplaceSectionPlugins",
-        sectionInstalled: "marketplaceSectionInstalledPlugins",
-        errorLoadData: "marketplaceErrorLoadingPluginsData",
-        errorLoadInstalled: "marketplaceErrorLoadingInstalledPlugins",
-        emptyData: "marketplaceNoPlugins",
-        emptyInstalled: "marketplaceNoInstalledPlugins",
-        installedCountSuffix: "marketplaceInstalledPluginsCountSuffix",
-      }
-    : {
-        pageTitle: "marketplaceSkillsPageTitle",
-        pageDescription: "marketplaceSkillsPageDescription",
-        tabMarketplace: "marketplaceTabMarketplaceSkills",
-        tabInstalled: "marketplaceTabInstalledSkills",
-        searchPlaceholder: "marketplaceSearchPlaceholderSkills",
-        sectionCatalog: "marketplaceSectionSkills",
-        sectionInstalled: "marketplaceSectionInstalledSkills",
-        errorLoadData: "marketplaceErrorLoadingSkillsData",
-        errorLoadInstalled: "marketplaceErrorLoadingInstalledSkills",
-        emptyData: "marketplaceNoSkills",
-        emptyInstalled: "marketplaceNoInstalledSkills",
-        installedCountSuffix: "marketplaceInstalledSkillsCountSuffix",
-      };
+  const copyKeys = getMarketplaceCopyKeys(typeFilter);
 
   const [searchText, setSearchText] = useState("");
   const [query, setQuery] = useState("");
@@ -145,9 +152,11 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
   }, [searchText]);
 
   const installedQuery = useMarketplaceInstalled(typeFilter);
+  const sceneParam = typeFilter === "skill" ? params.scene?.trim() : undefined;
 
   const itemsQuery = useMarketplaceItems({
-    q: query || undefined,
+    q: sceneParam ? undefined : query || undefined,
+    scene: sceneParam,
     type: typeFilter,
     sort,
     pageSize: PAGE_SIZE,
@@ -160,7 +169,7 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
       !itemsQuery.hasNextPage ||
       itemsQuery.isFetchingNextPage,
     onLoadMore: () => itemsQuery.fetchNextPage(),
-    watchValue: `${typeFilter}:${scope}:${query}:${sort}:${itemsQuery.data?.loadedItems ?? 0}:${itemsQuery.data?.loadedPages ?? 0}`,
+    watchValue: `${typeFilter}:${scope}:${query}:${sceneParam ?? ""}:${sort}:${itemsQuery.data?.loadedItems ?? 0}:${itemsQuery.data?.loadedPages ?? 0}`,
   });
 
   useEffect(() => {
@@ -168,7 +177,7 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
     if (container && typeof container.scrollTo === "function") {
       container.scrollTo({ top: 0 });
     }
-  }, [infiniteScroll.containerRef, query, scope, sort, typeFilter]);
+  }, [infiniteScroll.containerRef, query, sceneParam, scope, sort, typeFilter]);
 
   const installMutation = useInstallMarketplaceItem();
   const manageMutation = useManageMarketplaceItem();
@@ -263,15 +272,18 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
   const manageState: ManageState = {
     actionsByTarget: managingTargets,
   };
-
-  const scopeTabs = [
-    { id: "all", label: t(copyKeys.tabMarketplace) },
-    {
-      id: "installed",
-      label: t(copyKeys.tabInstalled),
-      count: installedQuery.data?.total ?? 0,
-    },
-  ];
+  const curatedSceneRoute = useMarketplaceCuratedSceneRoute({
+    items: allItems,
+    installedRecordLookup,
+    scene: sceneParam,
+    forcedType,
+    typeFilter,
+    scope,
+    searchText,
+    query,
+    showListSkeleton,
+    hasCatalogError: itemsQuery.isError,
+  });
 
   const handleInstall = async (item: MarketplaceItemSummary) => {
     const installSpec = item.install.spec;
@@ -419,11 +431,7 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
         title,
         typeLabel: detailConfig.typeLabel,
         spec: item.install.spec,
-        summary,
-        metadataRaw: t("loading"),
-        contentRaw: t("loading"),
-        tags: item.tags,
-        author: item.author,
+        loading: true,
       }),
       openOptions,
     );
@@ -468,36 +476,44 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
 
   return (
     <PageLayout className="flex h-full min-h-0 flex-col pb-0">
-      <PageHeader
-        title={t(copyKeys.pageTitle)}
-        description={t(copyKeys.pageDescription)}
-      />
-
-      <Tabs
-        tabs={scopeTabs}
-        activeTab={scope}
-        onChange={(value) => setScope(value as ScopeType)}
-        className="mb-4"
-      />
-
-      <FilterPanel
-        scope={scope}
-        searchText={searchText}
-        searchPlaceholder={t(copyKeys.searchPlaceholder)}
-        sort={sort}
-        onSearchTextChange={setSearchText}
-        onSortChange={setSort}
-      />
+      {!curatedSceneRoute.isSceneRoute && (
+        <>
+          <Tabs
+            tabs={[
+              { id: "all", label: t(copyKeys.tabMarketplace) },
+              {
+                id: "installed",
+                label: t(copyKeys.tabInstalled),
+                count: installedQuery.data?.total ?? 0,
+              },
+            ]}
+            activeTab={scope}
+            onChange={(value) => setScope(value as ScopeType)}
+            className="mb-3"
+          />
+
+          <FilterPanel
+            scope={scope}
+            searchText={searchText}
+            searchPlaceholder={t(copyKeys.searchPlaceholder)}
+            sort={sort}
+            onSearchTextChange={setSearchText}
+            onSortChange={setSort}
+          />
+        </>
+      )}
 
       <section className="flex min-h-0 flex-1 flex-col">
-        <div className="mb-3 flex items-center justify-between">
-          <h3 className="text-[14px] font-semibold text-gray-900">
-            {scope === "installed"
-              ? t(copyKeys.sectionInstalled)
-              : t(copyKeys.sectionCatalog)}
-          </h3>
-          <span className="text-[12px] text-gray-500">{listSummary}</span>
-        </div>
+        {!curatedSceneRoute.isSceneRoute && !curatedSceneRoute.showShelves && (
+          <div className="mb-3 flex items-center justify-between">
+            <h3 className="text-[14px] font-semibold text-gray-900">
+              {scope === "installed"
+                ? t(copyKeys.sectionInstalled)
+                : t(copyKeys.sectionCatalog)}
+            </h3>
+            <span className="text-[12px] text-gray-500">{listSummary}</span>
+          </div>
+        )}
 
         {scope === "all" && itemsQuery.isError && (
           <div className="rounded-xl border border-rose-200 bg-rose-50 p-4 text-sm text-rose-700">
@@ -515,55 +531,60 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
           className="min-h-0 flex-1 overflow-y-auto custom-scrollbar pr-1"
           aria-busy={showListSkeleton || itemsQuery.isFetchingNextPage}
         >
-          <div
-            data-testid={
-              showListSkeleton ? "marketplace-list-skeleton" : undefined
-            }
-            className="grid grid-cols-1 gap-3 lg:grid-cols-2 2xl:grid-cols-3"
-          >
-            {showListSkeleton && (
-              <MarketplaceListSkeleton count={SKELETON_CARD_COUNT} />
-            )}
-
-            {!showListSkeleton &&
-              scope === "all" &&
-              allItems.map((item) => (
-                <MarketplaceListCard
-                  key={item.id}
-                  item={item}
-                  record={findInstalledRecordForItem(item, installedRecordLookup)}
-                  language={language}
-                  installState={installState}
-                  manageState={manageState}
-                  onOpen={() =>
-                    void openItemDetail(
-                      item,
-                      findInstalledRecordForItem(item, installedRecordLookup),
-                    )
-                  }
-                  onInstall={handleInstall}
-                  onManage={handleManage}
-                />
-              ))}
-
-            {!showListSkeleton &&
-              scope === "installed" &&
-              installedEntries.map((entry) => (
-                <MarketplaceListCard
-                  key={entry.key}
-                  item={entry.item}
-                  record={entry.record}
-                  language={language}
-                  installState={installState}
-                  manageState={manageState}
-                  onOpen={() => void openItemDetail(entry.item, entry.record)}
-                  onInstall={handleInstall}
-                  onManage={handleManage}
-                />
-              ))}
-          </div>
+          {curatedSceneRoute.isSceneRoute && curatedSceneRoute.selectedScene && (
+            <MarketplaceCuratedSceneView
+              scene={curatedSceneRoute.selectedScene}
+              entries={curatedSceneRoute.sceneEntries}
+              isLoading={showListSkeleton}
+              language={language}
+              localeFallbacks={localeFallbacks}
+              installState={installState}
+              onBack={() => navigate(curatedSceneRoute.backPath)}
+              onOpen={(entry) => void openItemDetail(entry.item, entry.record)}
+              onInstall={handleInstall}
+            />
+          )}
+
+          {curatedSceneRoute.showShelves && (
+            <MarketplaceCuratedShelves
+              entries={curatedSceneRoute.entries}
+              scenes={curatedSceneRoute.scenes}
+              language={language}
+              installState={installState}
+              onOpen={(entry) => void openItemDetail(entry.item, entry.record)}
+              onInstall={handleInstall}
+              onOpenScene={(scene) =>
+                navigate(`${curatedSceneRoute.pathPrefix}/${scene}`)
+              }
+            />
+          )}
+
+          {!curatedSceneRoute.isSceneRoute && (
+            <MarketplaceCatalogGrid
+              scope={scope}
+              title={
+                scope === "installed"
+                  ? t(copyKeys.sectionInstalled)
+                  : t(copyKeys.sectionCatalog)
+              }
+              summary={listSummary}
+              showTitle={curatedSceneRoute.showShelves}
+              showListSkeleton={showListSkeleton}
+              skeletonCardCount={SKELETON_CARD_COUNT}
+              allItems={allItems}
+              installedEntries={installedEntries}
+              installedRecordLookup={installedRecordLookup}
+              language={language}
+              installState={installState}
+              manageState={manageState}
+              onOpen={(item, record) => void openItemDetail(item, record)}
+              onInstall={handleInstall}
+              onManage={handleManage}
+            />
+          )}
 
           {scope === "all" &&
+            !curatedSceneRoute.isSceneRoute &&
             !showListSkeleton &&
             !itemsQuery.isError &&
             allItems.length === 0 && (
@@ -572,6 +593,7 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
               </div>
             )}
           {scope === "installed" &&
+            !curatedSceneRoute.isSceneRoute &&
             !showListSkeleton &&
             !installedQuery.isError &&
             installedEntries.length === 0 && (

package/src/features/marketplace/hooks/use-marketplace-curated-scene-route.ts

@@ -0,0 +1,97 @@
+import type {
+  MarketplaceInstalledRecord,
+  MarketplaceItemSummary,
+  MarketplaceItemType,
+} from "@/shared/lib/api";
+import { findInstalledRecordForItem } from "@/features/marketplace/components/marketplace-page-data";
+import {
+  useMarketplaceSkillSceneCounts,
+  useMarketplaceSkillScenes,
+} from "@/features/marketplace/hooks/use-marketplace";
+import { useMemo } from "react";
+
+type MarketplaceCuratedSceneRouteParams = {
+  items: MarketplaceItemSummary[];
+  installedRecordLookup: Map<string, MarketplaceInstalledRecord>;
+  scene?: string;
+  forcedType?: "plugins" | "skills";
+  typeFilter: MarketplaceItemType;
+  scope: "all" | "installed";
+  searchText: string;
+  query: string;
+  showListSkeleton: boolean;
+  hasCatalogError: boolean;
+};
+
+export function useMarketplaceCuratedSceneRoute(
+  params: MarketplaceCuratedSceneRouteParams,
+) {
+  const {
+    items,
+    installedRecordLookup,
+    scene,
+    forcedType,
+    typeFilter,
+    scope,
+    searchText,
+    query,
+    showListSkeleton,
+    hasCatalogError,
+  } = params;
+  const scenesQuery = useMarketplaceSkillScenes(typeFilter === "skill");
+  const rawScenes = useMemo(
+    () => scenesQuery.data?.scenes ?? [],
+    [scenesQuery.data?.scenes],
+  );
+  const fallbackCounts = useMarketplaceSkillSceneCounts(rawScenes, typeFilter === "skill");
+  const scenes = useMemo(
+    () =>
+      rawScenes.map((entry) => ({
+        ...entry,
+        count: typeof entry.count === "number"
+          ? entry.count
+          : fallbackCounts.get(entry.scene),
+      })),
+    [fallbackCounts, rawScenes],
+  );
+  const entries = useMemo(
+    () =>
+      items.map((item) => ({
+        item,
+        record: findInstalledRecordForItem(item, installedRecordLookup),
+      })),
+    [items, installedRecordLookup],
+  );
+  const selectedScene = useMemo(() => {
+    const normalizedScene = scene?.trim();
+    if (!normalizedScene) {
+      return undefined;
+    }
+    return scenes.find((entry) => entry.scene === normalizedScene) ?? {
+      scene: normalizedScene,
+      title: normalizedScene,
+    };
+  }, [scene, scenes]);
+  const isSceneRoute = typeFilter === "skill" && Boolean(scene?.trim());
+  const showShelves =
+    typeFilter === "skill" &&
+    scope === "all" &&
+    !searchText.trim() &&
+    !query &&
+    !showListSkeleton &&
+    !hasCatalogError &&
+    scenes.length > 0 &&
+    items.length >= 4 &&
+    !isSceneRoute;
+
+  return {
+    entries,
+    scenes,
+    selectedScene,
+    sceneEntries: entries,
+    isSceneRoute,
+    showShelves,
+    backPath: forcedType ? "/skills" : "/marketplace/skills",
+    pathPrefix: forcedType ? "/skills/scenes" : "/marketplace/skills/scenes",
+  };
+}