@nextclaw/ui 0.12.26 → 0.12.27

package/dist/assets/{use-infinite-scroll-loader-CFVdPpNv.js → use-infinite-scroll-loader-DF2e6nQ2.js}

@@ -1 +1 @@
-import{_ as e,m as t,p as n,r}from"./i18n-D1144VAA.js";import{$t as i,Bt as a,Qt as o,Zt as s,en as c}from"./api-DGD9_Bg4.js";import{t as l}from"./createLucideIcon-DzY6wN61.js";import{a as u,i as d,n as f,r as p,t as m}from"./select-BUTwE_lC.js";import{u as h}from"./index-Cuwst6cc.js";var g=class extends c{constructor(e,t){super(e,t)}bindMethods(){super.bindMethods(),this.fetchNextPage=this.fetchNextPage.bind(this),this.fetchPreviousPage=this.fetchPreviousPage.bind(this)}setOptions(e){super.setOptions({...e,behavior:i()})}getOptimisticResult(e){return e.behavior=i(),super.getOptimisticResult(e)}fetchNextPage(e){return this.fetch({...e,meta:{fetchMore:{direction:`forward`}}})}fetchPreviousPage(e){return this.fetch({...e,meta:{fetchMore:{direction:`backward`}}})}createResult(e,t){let{state:n}=e,r=super.createResult(e,t),{isFetching:i,isRefetching:a,isError:c,isRefetchError:l}=r,u=n.fetchMeta?.fetchMore?.direction,d=c&&u===`forward`,f=i&&u===`forward`,p=c&&u===`backward`,m=i&&u===`backward`;return{...r,fetchNextPage:this.fetchNextPage,fetchPreviousPage:this.fetchPreviousPage,hasNextPage:s(t,n.data),hasPreviousPage:o(t,n.data),isFetchNextPageError:d,isFetchingNextPage:f,isFetchPreviousPageError:p,isFetchingPreviousPage:m,isRefetchError:l&&!d&&!p,isRefetching:a&&!f&&!m}}};function _(e,t){return a(e,g,t)}var v=l(`PackageSearch`,[[`path`,{d:`M21 10V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l2-1.14`,key:`e7tb2h`}],[`path`,{d:`m7.5 4.27 9 5.15`,key:`1c824w`}],[`polyline`,{points:`3.29 7 12 12 20.71 7`,key:`ousv84`}],[`line`,{x1:`12`,x2:`12`,y1:`22`,y2:`12`,key:`a4e8g8`}],[`circle`,{cx:`18.5`,cy:`15.5`,r:`2.5`,key:`b5zd12`}],[`path`,{d:`M20.27 17.27 22 19`,key:`1l4muz`}]]);function y(e){if(!e||e.pages.length===0)return;let t=e.pages.flatMap(e=>e.items);return{...e.pages[e.pages.length-1],items:t,pages:e.pages,loadedItems:t.length,loadedPages:e.pages.length}}var b=n();function x({scope:e,searchText:t,searchPlaceholder:n,sort:i,onSearchTextChange:a,onSortChange:o}){return(0,b.jsx)(`div`,{className:`mb-4`,children:(0,b.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,b.jsxs)(`div`,{className:`relative min-w-0 flex-1`,children:[(0,b.jsx)(v,{className:`absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400`}),(0,b.jsx)(`input`,{value:t,onChange:e=>a(e.target.value),placeholder:n,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`})]}),e===`all`&&(0,b.jsxs)(m,{value:i,onValueChange:e=>o(e),children:[(0,b.jsx)(d,{className:`h-9 w-[150px] shrink-0 rounded-lg`,children:(0,b.jsx)(u,{})}),(0,b.jsxs)(f,{children:[(0,b.jsx)(p,{value:`relevance`,children:r(`marketplaceSortRelevance`)}),(0,b.jsx)(p,{value:`updated`,children:r(`marketplaceSortUpdated`)})]})]})]})})}function S({count:e}){return(0,b.jsx)(b.Fragment,{children:Array.from({length:e},(e,t)=>(0,b.jsx)(`article`,{className:`h-full rounded-2xl border border-gray-200/40 bg-white px-5 py-4 shadow-sm`,children:(0,b.jsxs)(`div`,{className:`flex items-start justify-between gap-3.5`,children:[(0,b.jsxs)(`div`,{className:`flex min-w-0 flex-1 gap-3`,children:[(0,b.jsx)(h,{className:`h-10 w-10 shrink-0 rounded-xl`}),(0,b.jsxs)(`div`,{className:`min-w-0 flex-1 space-y-2 pt-0.5`,children:[(0,b.jsx)(h,{className:`h-4 w-32 max-w-[70%]`}),(0,b.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,b.jsx)(h,{className:`h-3 w-12`}),(0,b.jsx)(h,{className:`h-3 w-24`})]}),(0,b.jsx)(h,{className:`h-3 w-full`})]})]}),(0,b.jsx)(h,{className:`h-8 w-20 shrink-0 rounded-xl`})]})},`marketplace-skeleton-${t}`))})}function C({hasMore:e,loading:t,sentinelRef:n}){return!e&&!t?null:(0,b.jsxs)(`div`,{className:`py-4`,children:[e&&(0,b.jsx)(`div`,{ref:n,className:`h-1 w-full`,"aria-hidden":`true`}),t&&(0,b.jsx)(`div`,{"data-testid":`marketplace-loading-more`,className:`pt-3 text-center text-xs text-gray-500`,children:r(`loading`)})]})}function w(e){let t=e.trim().toLowerCase().replace(/_/g,`-`),n=[t,t.split(`-`)[0],`en`];return Array.from(new Set(n.filter(Boolean)))}function T(e){return e.trim().toLowerCase().replace(/_/g,`-`)}function E(e,t,n){if(e){let t=Object.entries(e).map(([e,t])=>({locale:T(e),text:typeof t==`string`?t.trim():``})).filter(e=>e.text.length>0);if(t.length>0){let e=new Map(t.map(e=>[e.locale,e.text]));for(let t of n){let n=T(t),r=e.get(n);if(r)return r}for(let e of n){let n=T(e).split(`-`)[0];if(!n)continue;let r=t.find(e=>e.locale===n||e.locale.startsWith(`${n}-`));if(r)return r.text}return t[0]?.text??``}}return t?.trim()??``}function D(e,t){if(!e)return``;for(let n of t)if(T(n).split(`-`)[0]===`zh`&&e.descriptionZh?.trim())return e.descriptionZh.trim();return e.description?.trim()?e.description.trim():e.descriptionZh?.trim()?e.descriptionZh.trim():``}var O=e(t(),1),k=160;function A(e){let t=(0,O.useRef)(null),n=(0,O.useRef)(null),r=(0,O.useRef)(e.onLoadMore),i=(0,O.useRef)(!1);return(0,O.useEffect)(()=>{r.current=e.onLoadMore},[e.onLoadMore]),(0,O.useEffect)(()=>{e.disabled&&(i.current=!1)},[e.disabled]),(0,O.useEffect)(()=>{let a=t.current,o=n.current,s=e.thresholdPx??k;if(e.disabled||!a||!o)return;let c=()=>{i.current||e.disabled||(i.current=!0,Promise.resolve(r.current()).finally(()=>{i.current=!1}))},l=()=>{o.getBoundingClientRect().top-a.getBoundingClientRect().bottom<=s&&c()};if(typeof IntersectionObserver==`function`){let e=new IntersectionObserver(e=>{e.some(e=>e.isIntersecting)&&c()},{root:a,rootMargin:`0px 0px ${s}px 0px`});return e.observe(o),l(),()=>{e.disconnect()}}return a.addEventListener(`scroll`,l,{passive:!0}),l(),()=>{a.removeEventListener(`scroll`,l)}},[e.disabled,e.thresholdPx,e.watchValue]),{containerRef:t,sentinelRef:n}}export{x as a,y as c,E as i,_ as l,w as n,C as o,D as r,S as s,A as t};
+import{_ as e,m as t,p as n,r}from"./i18n-D1144VAA.js";import{$t as i,Bt as a,Qt as o,Zt as s,en as c}from"./api-DGD9_Bg4.js";import{t as l}from"./createLucideIcon-DzY6wN61.js";import{a as u,i as d,n as f,r as p,t as m}from"./select-BUTwE_lC.js";import{u as h}from"./index-DqJ3CYwi.js";var g=class extends c{constructor(e,t){super(e,t)}bindMethods(){super.bindMethods(),this.fetchNextPage=this.fetchNextPage.bind(this),this.fetchPreviousPage=this.fetchPreviousPage.bind(this)}setOptions(e){super.setOptions({...e,behavior:i()})}getOptimisticResult(e){return e.behavior=i(),super.getOptimisticResult(e)}fetchNextPage(e){return this.fetch({...e,meta:{fetchMore:{direction:`forward`}}})}fetchPreviousPage(e){return this.fetch({...e,meta:{fetchMore:{direction:`backward`}}})}createResult(e,t){let{state:n}=e,r=super.createResult(e,t),{isFetching:i,isRefetching:a,isError:c,isRefetchError:l}=r,u=n.fetchMeta?.fetchMore?.direction,d=c&&u===`forward`,f=i&&u===`forward`,p=c&&u===`backward`,m=i&&u===`backward`;return{...r,fetchNextPage:this.fetchNextPage,fetchPreviousPage:this.fetchPreviousPage,hasNextPage:s(t,n.data),hasPreviousPage:o(t,n.data),isFetchNextPageError:d,isFetchingNextPage:f,isFetchPreviousPageError:p,isFetchingPreviousPage:m,isRefetchError:l&&!d&&!p,isRefetching:a&&!f&&!m}}};function _(e,t){return a(e,g,t)}var v=l(`PackageSearch`,[[`path`,{d:`M21 10V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l2-1.14`,key:`e7tb2h`}],[`path`,{d:`m7.5 4.27 9 5.15`,key:`1c824w`}],[`polyline`,{points:`3.29 7 12 12 20.71 7`,key:`ousv84`}],[`line`,{x1:`12`,x2:`12`,y1:`22`,y2:`12`,key:`a4e8g8`}],[`circle`,{cx:`18.5`,cy:`15.5`,r:`2.5`,key:`b5zd12`}],[`path`,{d:`M20.27 17.27 22 19`,key:`1l4muz`}]]);function y(e){if(!e||e.pages.length===0)return;let t=e.pages.flatMap(e=>e.items);return{...e.pages[e.pages.length-1],items:t,pages:e.pages,loadedItems:t.length,loadedPages:e.pages.length}}var b=n();function x({scope:e,searchText:t,searchPlaceholder:n,sort:i,onSearchTextChange:a,onSortChange:o}){return(0,b.jsx)(`div`,{className:`mb-4`,children:(0,b.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,b.jsxs)(`div`,{className:`relative min-w-0 flex-1`,children:[(0,b.jsx)(v,{className:`absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400`}),(0,b.jsx)(`input`,{value:t,onChange:e=>a(e.target.value),placeholder:n,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`})]}),e===`all`&&(0,b.jsxs)(m,{value:i,onValueChange:e=>o(e),children:[(0,b.jsx)(d,{className:`h-9 w-[150px] shrink-0 rounded-lg`,children:(0,b.jsx)(u,{})}),(0,b.jsxs)(f,{children:[(0,b.jsx)(p,{value:`relevance`,children:r(`marketplaceSortRelevance`)}),(0,b.jsx)(p,{value:`updated`,children:r(`marketplaceSortUpdated`)})]})]})]})})}function S({count:e}){return(0,b.jsx)(b.Fragment,{children:Array.from({length:e},(e,t)=>(0,b.jsx)(`article`,{className:`h-full rounded-2xl border border-gray-200/40 bg-white px-5 py-4 shadow-sm`,children:(0,b.jsxs)(`div`,{className:`flex items-start justify-between gap-3.5`,children:[(0,b.jsxs)(`div`,{className:`flex min-w-0 flex-1 gap-3`,children:[(0,b.jsx)(h,{className:`h-10 w-10 shrink-0 rounded-xl`}),(0,b.jsxs)(`div`,{className:`min-w-0 flex-1 space-y-2 pt-0.5`,children:[(0,b.jsx)(h,{className:`h-4 w-32 max-w-[70%]`}),(0,b.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,b.jsx)(h,{className:`h-3 w-12`}),(0,b.jsx)(h,{className:`h-3 w-24`})]}),(0,b.jsx)(h,{className:`h-3 w-full`})]})]}),(0,b.jsx)(h,{className:`h-8 w-20 shrink-0 rounded-xl`})]})},`marketplace-skeleton-${t}`))})}function C({hasMore:e,loading:t,sentinelRef:n}){return!e&&!t?null:(0,b.jsxs)(`div`,{className:`py-4`,children:[e&&(0,b.jsx)(`div`,{ref:n,className:`h-1 w-full`,"aria-hidden":`true`}),t&&(0,b.jsx)(`div`,{"data-testid":`marketplace-loading-more`,className:`pt-3 text-center text-xs text-gray-500`,children:r(`loading`)})]})}function w(e){let t=e.trim().toLowerCase().replace(/_/g,`-`),n=[t,t.split(`-`)[0],`en`];return Array.from(new Set(n.filter(Boolean)))}function T(e){return e.trim().toLowerCase().replace(/_/g,`-`)}function E(e,t,n){if(e){let t=Object.entries(e).map(([e,t])=>({locale:T(e),text:typeof t==`string`?t.trim():``})).filter(e=>e.text.length>0);if(t.length>0){let e=new Map(t.map(e=>[e.locale,e.text]));for(let t of n){let n=T(t),r=e.get(n);if(r)return r}for(let e of n){let n=T(e).split(`-`)[0];if(!n)continue;let r=t.find(e=>e.locale===n||e.locale.startsWith(`${n}-`));if(r)return r.text}return t[0]?.text??``}}return t?.trim()??``}function D(e,t){if(!e)return``;for(let n of t)if(T(n).split(`-`)[0]===`zh`&&e.descriptionZh?.trim())return e.descriptionZh.trim();return e.description?.trim()?e.description.trim():e.descriptionZh?.trim()?e.descriptionZh.trim():``}var O=e(t(),1),k=160;function A(e){let t=(0,O.useRef)(null),n=(0,O.useRef)(null),r=(0,O.useRef)(e.onLoadMore),i=(0,O.useRef)(!1);return(0,O.useEffect)(()=>{r.current=e.onLoadMore},[e.onLoadMore]),(0,O.useEffect)(()=>{e.disabled&&(i.current=!1)},[e.disabled]),(0,O.useEffect)(()=>{let a=t.current,o=n.current,s=e.thresholdPx??k;if(e.disabled||!a||!o)return;let c=()=>{i.current||e.disabled||(i.current=!0,Promise.resolve(r.current()).finally(()=>{i.current=!1}))},l=()=>{o.getBoundingClientRect().top-a.getBoundingClientRect().bottom<=s&&c()};if(typeof IntersectionObserver==`function`){let e=new IntersectionObserver(e=>{e.some(e=>e.isIntersecting)&&c()},{root:a,rootMargin:`0px 0px ${s}px 0px`});return e.observe(o),l(),()=>{e.disconnect()}}return a.addEventListener(`scroll`,l,{passive:!0}),l(),()=>{a.removeEventListener(`scroll`,l)}},[e.disabled,e.thresholdPx,e.watchValue]),{containerRef:t,sentinelRef:n}}export{x as a,y as c,E as i,_ as l,w as n,C as o,D as r,S as s,A as t};

package/dist/index.html

@@ -78,7 +78,7 @@
     })();
   </script>
   <title>NextClaw</title>
-  <script type="module" crossorigin src="/assets/index-Cuwst6cc.js"></script>
+  <script type="module" crossorigin src="/assets/index-DqJ3CYwi.js"></script>
   <link rel="modulepreload" crossorigin href="/assets/i18n-D1144VAA.js">
   <link rel="modulepreload" crossorigin href="/assets/createLucideIcon-DzY6wN61.js">
   <link rel="modulepreload" crossorigin href="/assets/cpu-DPPwMzoC.js">
@@ -106,7 +106,7 @@
   <link rel="modulepreload" crossorigin href="/assets/doc-browser-CAhfnm0D.js">
   <link rel="modulepreload" crossorigin href="/assets/use-config-Cyv5IuSt.js">
   <link rel="modulepreload" crossorigin href="/assets/desktop-DVUbOWbR.js">
-  <link rel="stylesheet" crossorigin href="/assets/index-dlcqieQ0.css">
+  <link rel="stylesheet" crossorigin href="/assets/index-DmWo8dX2.css">
 </head>
 
 <body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextclaw/ui",
-  "version": "0.12.26",
+  "version": "0.12.27",
   "private": false,
   "type": "module",
   "license": "MIT",
@@ -28,14 +28,14 @@
     "tailwind-merge": "^2.5.4",
     "zod": "^3.23.8",
     "zustand": "^5.0.2",
-    "@nextclaw/client-sdk": "0.1.6",
-    "@nextclaw/ncp": "0.5.11",
+    "@nextclaw/agent-chat": "0.1.16",
+    "@nextclaw/agent-chat-ui": "0.3.18",
     "@nextclaw/ncp-http-agent-client": "0.3.23",
+    "@nextclaw/ncp": "0.5.11",
+    "@nextclaw/ncp-react": "0.4.31",
     "@nextclaw/server": "0.12.18",
     "@nextclaw/shared": "0.1.5",
-    "@nextclaw/agent-chat-ui": "0.3.18",
-    "@nextclaw/agent-chat": "0.1.16",
-    "@nextclaw/ncp-react": "0.4.31"
+    "@nextclaw/client-sdk": "0.1.6"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",

package/src/features/marketplace/components/curated-shelves/marketplace-curated-scene-route.test.tsx

@@ -18,11 +18,27 @@ type ItemsQueryState = {
   fetchNextPage?: () => Promise<unknown>;
 };
 
+type ScenesQueryState = {
+  data?: {
+    scenes: Array<{
+      scene: string;
+      title: string;
+      description?: string;
+      count?: number;
+    }>;
+  };
+  isLoading: boolean;
+  isFetching: boolean;
+  isError: boolean;
+  error: Error | null;
+};
+
 const mocks = vi.hoisted(() => ({
   navigate: vi.fn(),
   docOpen: vi.fn(),
   routeParams: {} as { scene?: string },
   itemsQuery: null as unknown as ItemsQueryState,
+  scenesQuery: null as unknown as ScenesQueryState,
 }));
 
 vi.mock("react-router-dom", async () => {
@@ -55,21 +71,7 @@ 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.",
-        },
-      ],
-    },
-    isLoading: false,
-    isFetching: false,
-    isError: false,
-    error: null,
-  }),
+  useMarketplaceSkillScenes: () => mocks.scenesQuery,
   useMarketplaceSkillSceneCounts: () => new Map([["development-debugging", 2]]),
   useMarketplaceInstalled: () => ({
     data: {
@@ -165,12 +167,32 @@ function createItemsQuery(items: MarketplaceItemSummary[]) {
   };
 }
 
+function createScenesQuery(overrides: Partial<ScenesQueryState> = {}) {
+  return {
+    data: {
+      scenes: [
+        {
+          scene: "development-debugging",
+          title: "Development",
+          description: "Review, debug, analyze, and verify delivery work.",
+        },
+      ],
+    },
+    isLoading: false,
+    isFetching: false,
+    isError: false,
+    error: null,
+    ...overrides,
+  };
+}
+
 describe("Marketplace curated scene routes", () => {
   beforeEach(() => {
     mocks.navigate.mockReset();
     mocks.docOpen.mockReset();
     mocks.routeParams = {};
     mocks.itemsQuery = createItemsQuery(createSceneItems());
+    mocks.scenesQuery = createScenesQuery();
   });
 
   it("opens curated goals through a scene route", async () => {
@@ -183,6 +205,7 @@ describe("Marketplace curated scene routes", () => {
     expect(mocks.navigate).toHaveBeenCalledWith(
       "/skills/scenes/development-debugging",
     );
+    expect(screen.getByText("All Skills")).toBeTruthy();
     expect(container.querySelector("input")?.getAttribute("value") ?? "").toBe("");
   });
 
@@ -196,7 +219,7 @@ describe("Marketplace curated scene routes", () => {
     expect(screen.getByRole("button", { name: "Back" })).toBeTruthy();
     expect(screen.getByText("Code Review")).toBeTruthy();
     expect(screen.queryByText("Calendar Sync")).toBeNull();
-    expect(screen.queryByText("Skill Catalog")).toBeNull();
+    expect(screen.queryByText("All Skills")).toBeNull();
     expect(screen.queryByPlaceholderText("Search skills...")).toBeNull();
 
     await user.click(screen.getByRole("button", { name: "Back" }));
@@ -232,4 +255,19 @@ describe("Marketplace curated scene routes", () => {
 
     expect(screen.getByTestId("marketplace-loading-more")).toBeTruthy();
   });
+
+  it("keeps the shelf layout stable while scenes are still loading", () => {
+    mocks.scenesQuery = createScenesQuery({
+      data: undefined,
+      isLoading: true,
+      isFetching: true,
+    });
+
+    render(<MarketplacePage forcedType="skills" />);
+
+    expect(screen.getByTestId("marketplace-scenes-skeleton")).toBeTruthy();
+    expect(screen.getByText("Recently updated")).toBeTruthy();
+    expect(screen.getByText("All Skills")).toBeTruthy();
+    expect(screen.queryByRole("button", { name: /Development/ })).toBeNull();
+  });
 });

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

@@ -23,6 +23,7 @@ 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";
@@ -36,6 +37,8 @@ export type MarketplaceShelfEntry = {
 export function MarketplaceCuratedShelves(props: {
   entries: MarketplaceShelfEntry[];
   scenes: MarketplaceSceneView[];
+  isScenesLoading: boolean;
+  isItemsLoading: boolean;
   language: string;
   installState: InstallState;
   onOpen: (entry: MarketplaceShelfEntry) => void;
@@ -45,6 +48,8 @@ export function MarketplaceCuratedShelves(props: {
   const {
     entries,
     scenes,
+    isScenesLoading,
+    isItemsLoading,
     language,
     installState,
     onOpen,
@@ -70,19 +75,23 @@ export function MarketplaceCuratedShelves(props: {
             language,
           )}
         />
-        <div className="grid grid-cols-2 gap-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
-          {scenes.map((scene) => (
-            <GoalCard
-              key={scene.scene}
-              scene={scene}
-              language={language}
-              onSelect={onOpenScene}
-            />
-          ))}
-        </div>
+        {isScenesLoading ? (
+          <SceneGoalSkeletons />
+        ) : (
+          <div className="grid grid-cols-2 gap-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
+            {scenes.map((scene) => (
+              <GoalCard
+                key={scene.scene}
+                scene={scene}
+                language={language}
+                onSelect={onOpenScene}
+              />
+            ))}
+          </div>
+        )}
       </section>
 
-      {recentEntries.length > 0 && (
+      {(isItemsLoading || recentEntries.length > 0) && (
         <ShelfItemRow
           icon={Clock3}
           title={readLocalized({ zh: "最近更新", en: "Recently updated" }, language)}
@@ -96,6 +105,7 @@ export function MarketplaceCuratedShelves(props: {
           entries={recentEntries}
           language={language}
           localeFallbacks={localeFallbacks}
+          isLoading={isItemsLoading}
           installState={installState}
           onOpen={onOpen}
           onInstall={onInstall}
@@ -105,6 +115,29 @@ 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,6 +292,7 @@ function ShelfItemRow(props: {
   entries: MarketplaceShelfEntry[];
   language: string;
   localeFallbacks: string[];
+  isLoading: boolean;
   installState: InstallState;
   onOpen: (entry: MarketplaceShelfEntry) => void;
   onInstall: (item: MarketplaceItemSummary) => void;
@@ -270,6 +304,7 @@ function ShelfItemRow(props: {
     entries,
     language,
     localeFallbacks,
+    isLoading,
     installState,
     onOpen,
     onInstall,
@@ -278,23 +313,60 @@ function ShelfItemRow(props: {
   return (
     <section className="space-y-2.5">
       <ShelfHeader icon={Icon} title={title} description={description} />
-      <div className="-mx-1 flex gap-2.5 overflow-x-auto px-1 pb-1.5 custom-scrollbar">
-        {entries.map((entry) => (
-          <SkillShelfCard
-            key={entry.item.id}
-            entry={entry}
-            language={language}
-            localeFallbacks={localeFallbacks}
-            installState={installState}
-            onOpen={onOpen}
-            onInstall={onInstall}
-          />
-        ))}
-      </div>
+      {isLoading ? (
+        <RecentShelfSkeletons />
+      ) : (
+        <div className="-mx-1 flex gap-2.5 overflow-x-auto px-1 pb-1.5 custom-scrollbar">
+          {entries.map((entry) => (
+            <SkillShelfCard
+              key={entry.item.id}
+              entry={entry}
+              language={language}
+              localeFallbacks={localeFallbacks}
+              installState={installState}
+              onOpen={onOpen}
+              onInstall={onInstall}
+            />
+          ))}
+        </div>
+      )}
     </section>
   );
 }
 
+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-page.test.tsx

@@ -207,7 +207,11 @@ describe("MarketplacePage", () => {
 
     const { container } = render(<MarketplacePage forcedType="skills" />);
 
+    expect(screen.getByText("Recently updated")).toBeTruthy();
+    expect(screen.getByTestId("marketplace-recent-skeleton")).toBeTruthy();
+    expect(screen.getByText("All Skills")).toBeTruthy();
     expect(screen.getByTestId("marketplace-list-skeleton")).toBeTruthy();
+    expect(screen.queryByText("Skill Catalog")).toBeNull();
     expect(
       container.querySelectorAll(
         '[data-testid="marketplace-list-skeleton"] > article',

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

@@ -504,16 +504,18 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
       )}
 
       <section className="flex min-h-0 flex-1 flex-col">
-        {!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>
-        )}
+        {!curatedSceneRoute.isSceneRoute &&
+          !curatedSceneRoute.showShelves &&
+          !showListSkeleton && (
+            <div className="mb-3 flex items-center justify-between">
+              <h3 className="text-[14px] font-semibold text-gray-900">
+                {scope === "installed"
+                  ? t(copyKeys.sectionInstalled)
+                  : language.startsWith("zh") ? "全部技能" : "All Skills"}
+              </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">
@@ -549,6 +551,8 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
             <MarketplaceCuratedShelves
               entries={curatedSceneRoute.entries}
               scenes={curatedSceneRoute.scenes}
+              isScenesLoading={curatedSceneRoute.isScenesLoading}
+              isItemsLoading={showListSkeleton}
               language={language}
               installState={installState}
               onOpen={(entry) => void openItemDetail(entry.item, entry.record)}
@@ -565,7 +569,7 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
               title={
                 scope === "installed"
                   ? t(copyKeys.sectionInstalled)
-                  : t(copyKeys.sectionCatalog)
+                  : language.startsWith("zh") ? "全部技能" : "All Skills"
               }
               summary={listSummary}
               showTitle={curatedSceneRoute.showShelves}
@@ -603,7 +607,7 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
             )}
 
           {scope === "all" &&
-            !skeletonState.showCatalog &&
+            !showListSkeleton &&
             !itemsQuery.isError && (
               <MarketplaceInfiniteScrollStatus
                 hasMore={Boolean(itemsQuery.hasNextPage)}

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

@@ -73,16 +73,24 @@ export function useMarketplaceCuratedSceneRoute(
     };
   }, [scene, scenes]);
   const isSceneRoute = typeFilter === "skill" && Boolean(scene?.trim());
-  const showShelves =
+  const isShelfHome =
     typeFilter === "skill" &&
     scope === "all" &&
     !searchText.trim() &&
     !query &&
-    !showListSkeleton &&
-    !hasCatalogError &&
-    scenes.length > 0 &&
-    items.length >= 4 &&
     !isSceneRoute;
+  const hasShelfCatalog = showListSkeleton || items.length >= 4;
+  const isScenesLoading =
+    isShelfHome &&
+    !hasCatalogError &&
+    hasShelfCatalog &&
+    scenes.length === 0 &&
+    scenesQuery.isLoading;
+  const showShelves =
+    isShelfHome &&
+    !hasCatalogError &&
+    hasShelfCatalog &&
+    (showListSkeleton || scenes.length > 0 || isScenesLoading);
 
   return {
     entries,
@@ -90,6 +98,7 @@ export function useMarketplaceCuratedSceneRoute(
     selectedScene,
     sceneEntries: entries,
     isSceneRoute,
+    isScenesLoading,
     showShelves,
     backPath: forcedType ? "/skills" : "/marketplace/skills",
     pathPrefix: forcedType ? "/skills/scenes" : "/marketplace/skills/scenes",