@nextclaw/ui 0.13.12 → 0.13.13

package/src/features/chat/stores/chat-thread.store.test.ts

@@ -0,0 +1,148 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { useChatThreadStore } from '@/features/chat/stores/chat-thread.store';
+
+const chatThreadWorkspaceStorageKey = 'nextclaw.chat.workspace-panel.state';
+
+function createLocalStoragePersistStorage() {
+  return {
+    getItem: (name: string) => JSON.parse(window.localStorage.getItem(name) ?? 'null'),
+    setItem: (name: string, value: unknown) => window.localStorage.setItem(name, JSON.stringify(value)),
+    removeItem: (name: string) => window.localStorage.removeItem(name)
+  };
+}
+
+function resetChatThreadStore() {
+  useChatThreadStore.setState({
+    snapshot: {
+      ...useChatThreadStore.getState().snapshot,
+      sessionKey: null,
+      messages: [],
+      isSending: false,
+      workspacePanelParentKey: null,
+      activeWorkspacePanelKind: null,
+      childSessionTabs: [],
+      activeChildSessionKey: null,
+      workspaceFileTabs: [],
+      activeWorkspaceFileKey: null,
+      workspaceNavigationHistory: [],
+      workspaceNavigationHistoryIndex: 0,
+    },
+  });
+}
+
+describe('chat thread workspace panel persistence', () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    useChatThreadStore.persist.setOptions({
+      storage: createLocalStoragePersistStorage(),
+    });
+    resetChatThreadStore();
+    window.localStorage.clear();
+  });
+
+  it('persists only the workspace panel continuity state', () => {
+    useChatThreadStore.getState().setSnapshot({
+      sessionKey: 'session-1',
+      isSending: true,
+      workspacePanelParentKey: 'session-1',
+      activeWorkspacePanelKind: 'file',
+      workspaceFileTabs: [
+        {
+          key: 'session-1::preview::README.md',
+          parentSessionKey: 'session-1',
+          path: 'README.md',
+          label: 'README.md',
+          viewMode: 'preview',
+          rawText: '# Hello',
+          fullLines: [],
+        },
+      ],
+      activeWorkspaceFileKey: 'session-1::preview::README.md',
+      workspaceNavigationHistory: [
+        { kind: 'child-session', key: 'child-session-1' },
+        { kind: 'file', key: 'session-1::preview::README.md' },
+      ],
+      workspaceNavigationHistoryIndex: 1,
+    });
+
+    const persisted = JSON.parse(
+      window.localStorage.getItem(chatThreadWorkspaceStorageKey) ?? '{}',
+    );
+
+    expect(persisted.state.snapshot).toMatchObject({
+      workspacePanelParentKey: 'session-1',
+      activeWorkspacePanelKind: 'file',
+      activeWorkspaceFileKey: 'session-1::preview::README.md',
+      workspaceNavigationHistory: [
+        { kind: 'child-session', key: 'child-session-1' },
+        { kind: 'file', key: 'session-1::preview::README.md' },
+      ],
+      workspaceNavigationHistoryIndex: 1,
+    });
+    expect(persisted.state.snapshot.sessionKey).toBeUndefined();
+    expect(persisted.state.snapshot.isSending).toBeUndefined();
+    expect(persisted.state.snapshot.workspaceFileTabs[0].rawText).toBe('# Hello');
+    expect(persisted.state.snapshot.workspaceFileTabs[0].fullLines).toBeUndefined();
+  });
+
+  it('hydrates the workspace panel state and repairs stale active file keys', async () => {
+    window.localStorage.setItem(
+      chatThreadWorkspaceStorageKey,
+      JSON.stringify({
+        state: {
+          snapshot: {
+            workspacePanelParentKey: 'session-1',
+            activeWorkspacePanelKind: 'file',
+            activeWorkspaceFileKey: 'missing-file',
+            activeChildSessionKey: 'child-session-1',
+            workspaceNavigationHistory: [
+              { kind: 'file', key: 'missing-file' },
+              { kind: 'file', key: 'session-1::preview::README.md' },
+            ],
+            workspaceNavigationHistoryIndex: 1,
+            workspaceFileTabs: [
+              {
+                key: 'session-1::preview::README.md',
+                parentSessionKey: 'session-1',
+                path: 'README.md',
+                label: 'README.md',
+                viewMode: 'preview',
+                rawText: '# Hello',
+              },
+              {
+                key: 'invalid',
+                parentSessionKey: 'session-1',
+                path: '',
+                viewMode: 'preview',
+              },
+            ],
+          },
+        },
+        version: 2,
+      }),
+    );
+
+    await useChatThreadStore.persist.rehydrate();
+
+    expect(useChatThreadStore.getState().snapshot).toMatchObject({
+      workspacePanelParentKey: 'session-1',
+      activeWorkspacePanelKind: 'file',
+      activeWorkspaceFileKey: 'session-1::preview::README.md',
+      activeChildSessionKey: 'child-session-1',
+      workspaceNavigationHistory: [
+        { kind: 'file', key: 'session-1::preview::README.md' },
+      ],
+      workspaceNavigationHistoryIndex: 0,
+      workspaceFileTabs: [
+        {
+          key: 'session-1::preview::README.md',
+          parentSessionKey: 'session-1',
+          path: 'README.md',
+          label: 'README.md',
+          viewMode: 'preview',
+          rawText: '# Hello',
+        },
+      ],
+    });
+  });
+});

package/src/features/chat/stores/chat-thread.store.ts

@@ -1,4 +1,5 @@
 import { create } from 'zustand';
+import { createJSONStorage, persist } from 'zustand/middleware';
 import type { MutableRefObject } from 'react';
 import type { NcpMessage } from '@nextclaw/ncp';
 import type { ChatFileOperationLineViewModel } from '@nextclaw/agent-chat-ui';
@@ -33,6 +34,19 @@ export type ChatWorkspaceFileTab = {
   fullLines?: ChatFileOperationLineViewModel[];
 };
 
+export type ChatWorkspaceNavigationEntry =
+  | {
+      kind: 'child-session';
+      key: string;
+    }
+  | {
+      kind: 'file';
+      key: string;
+    }
+  | {
+      kind: 'cron';
+    };
+
 export type ChatThreadSnapshot = {
   isProviderStateResolved: boolean;
   modelOptions: ChatModelOption[];
@@ -65,14 +79,43 @@ export type ChatThreadSnapshot = {
   activeChildSessionKey?: string | null;
   workspaceFileTabs: ChatWorkspaceFileTab[];
   activeWorkspaceFileKey?: string | null;
+  workspaceNavigationHistory: ChatWorkspaceNavigationEntry[];
+  workspaceNavigationHistoryIndex: number;
   contextWindow?: SessionContextWindowView | null;
 };
 
+const CHAT_THREAD_WORKSPACE_STORAGE_KEY = 'nextclaw.chat.workspace-panel.state';
+const CHAT_THREAD_WORKSPACE_STORAGE_VERSION = 2;
+const CHAT_THREAD_MAX_PERSISTED_WORKSPACE_FILE_TABS = 8;
+
 type ChatThreadStore = {
   snapshot: ChatThreadSnapshot;
   setSnapshot: (patch: Partial<ChatThreadSnapshot>) => void;
 };
 
+type PersistedChatThreadStore = {
+  snapshot?: {
+    workspacePanelParentKey?: unknown;
+    activeWorkspacePanelKind?: unknown;
+    activeChildSessionKey?: unknown;
+    workspaceFileTabs?: unknown;
+    activeWorkspaceFileKey?: unknown;
+    workspaceNavigationHistory?: unknown;
+    workspaceNavigationHistoryIndex?: unknown;
+  };
+};
+
+type PersistedChatWorkspaceSnapshot = Pick<
+  ChatThreadSnapshot,
+  | 'workspacePanelParentKey'
+  | 'activeWorkspacePanelKind'
+  | 'activeChildSessionKey'
+  | 'workspaceFileTabs'
+  | 'activeWorkspaceFileKey'
+  | 'workspaceNavigationHistory'
+  | 'workspaceNavigationHistoryIndex'
+>;
+
 const initialSnapshot: ChatThreadSnapshot = {
   isProviderStateResolved: false,
   modelOptions: [],
@@ -105,16 +148,251 @@ const initialSnapshot: ChatThreadSnapshot = {
   activeChildSessionKey: null,
   workspaceFileTabs: [],
   activeWorkspaceFileKey: null,
+  workspaceNavigationHistory: [],
+  workspaceNavigationHistoryIndex: 0,
   contextWindow: null
 };
 
-export const useChatThreadStore = create<ChatThreadStore>((set) => ({
-  snapshot: initialSnapshot,
-  setSnapshot: (patch) =>
-    set((state) => ({
-      snapshot: {
-        ...state.snapshot,
-        ...patch
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return !!value && typeof value === 'object';
+}
+
+function normalizeOptionalString(value: unknown): string | null {
+  return typeof value === 'string' && value.trim().length > 0
+    ? value.trim()
+    : null;
+}
+
+function normalizeOptionalNumber(value: unknown): number | null {
+  return typeof value === 'number' && Number.isFinite(value)
+    ? value
+    : null;
+}
+
+function normalizeHistoryIndex(value: unknown, maxIndex: number): number {
+  return typeof value === 'number' && Number.isInteger(value)
+    ? Math.min(Math.max(0, value), maxIndex)
+    : maxIndex;
+}
+
+function isWorkspacePanelKind(
+  value: unknown,
+): value is NonNullable<ChatThreadSnapshot['activeWorkspacePanelKind']> {
+  return value === 'child-session' || value === 'file' || value === 'cron';
+}
+
+function normalizePersistedWorkspaceNavigationEntry(
+  value: unknown,
+): ChatWorkspaceNavigationEntry | null {
+  if (!isRecord(value)) {
+    return null;
+  }
+  if (value.kind === 'cron') {
+    return { kind: 'cron' };
+  }
+  const key = normalizeOptionalString(value.key);
+  if (!key || (value.kind !== 'child-session' && value.kind !== 'file')) {
+    return null;
+  }
+  return {
+    kind: value.kind,
+    key,
+  };
+}
+
+function createWorkspaceNavigationEntryFromSnapshot({
+  activeChildSessionKey,
+  activeWorkspaceFileKey,
+  activeWorkspacePanelKind,
+}: {
+  activeWorkspacePanelKind: ChatThreadSnapshot['activeWorkspacePanelKind'];
+  activeChildSessionKey: string | null;
+  activeWorkspaceFileKey: string | null;
+}): ChatWorkspaceNavigationEntry | null {
+  if (activeWorkspacePanelKind === 'cron') {
+    return { kind: 'cron' };
+  }
+  if (activeWorkspacePanelKind === 'child-session' && activeChildSessionKey) {
+    return {
+      kind: 'child-session',
+      key: activeChildSessionKey,
+    };
+  }
+  if (activeWorkspacePanelKind === 'file' && activeWorkspaceFileKey) {
+    return {
+      kind: 'file',
+      key: activeWorkspaceFileKey,
+    };
+  }
+  return null;
+}
+
+function normalizeOptionalText(value: unknown): string | null {
+  return typeof value === 'string' ? value : null;
+}
+
+function normalizePersistedWorkspaceFileTab(
+  value: unknown,
+): ChatWorkspaceFileTab | null {
+  if (
+    !isRecord(value)
+    || typeof value.key !== 'string'
+    || typeof value.path !== 'string'
+    || (value.viewMode !== 'preview' && value.viewMode !== 'diff')
+  ) {
+    return null;
+  }
+  const key = value.key.trim();
+  const path = value.path.trim();
+  if (!key || !path) {
+    return null;
+  }
+  return {
+    key,
+    parentSessionKey: normalizeOptionalString(value.parentSessionKey),
+    path,
+    label: normalizeOptionalString(value.label),
+    viewMode: value.viewMode,
+    line: normalizeOptionalNumber(value.line),
+    column: normalizeOptionalNumber(value.column),
+    rawText: normalizeOptionalText(value.rawText),
+    beforeText: normalizeOptionalText(value.beforeText),
+    afterText: normalizeOptionalText(value.afterText),
+    patchText: normalizeOptionalText(value.patchText),
+    oldStartLine: normalizeOptionalNumber(value.oldStartLine),
+    newStartLine: normalizeOptionalNumber(value.newStartLine),
+  };
+}
+
+function toPersistedWorkspaceFileTab(
+  tab: ChatWorkspaceFileTab,
+): ChatWorkspaceFileTab {
+  return {
+    key: tab.key,
+    parentSessionKey: tab.parentSessionKey,
+    path: tab.path,
+    label: tab.label,
+    viewMode: tab.viewMode,
+    line: tab.line,
+    column: tab.column,
+    rawText: tab.rawText,
+    beforeText: tab.beforeText,
+    afterText: tab.afterText,
+    patchText: tab.patchText,
+    oldStartLine: tab.oldStartLine,
+    newStartLine: tab.newStartLine,
+  };
+}
+
+function normalizePersistedWorkspaceSnapshot(
+  value: unknown,
+): PersistedChatWorkspaceSnapshot | null {
+  if (!isRecord(value)) {
+    return null;
+  }
+  const workspaceFileTabs = Array.isArray(value.workspaceFileTabs)
+    ? value.workspaceFileTabs
+      .map(normalizePersistedWorkspaceFileTab)
+      .filter((tab): tab is ChatWorkspaceFileTab => tab !== null)
+      .slice(-CHAT_THREAD_MAX_PERSISTED_WORKSPACE_FILE_TABS)
+    : [];
+  const activeWorkspaceFileKey = normalizeOptionalString(value.activeWorkspaceFileKey);
+  const resolvedActiveWorkspaceFileKey =
+    activeWorkspaceFileKey && workspaceFileTabs.some((tab) => tab.key === activeWorkspaceFileKey)
+      ? activeWorkspaceFileKey
+      : workspaceFileTabs[0]?.key ?? null;
+  const activeWorkspacePanelKind = isWorkspacePanelKind(value.activeWorkspacePanelKind)
+    ? value.activeWorkspacePanelKind
+    : null;
+  const resolvedActiveWorkspacePanelKind =
+    activeWorkspacePanelKind === 'file' && !resolvedActiveWorkspaceFileKey
+      ? null
+      : activeWorkspacePanelKind;
+  const activeChildSessionKey = normalizeOptionalString(value.activeChildSessionKey);
+  const fallbackHistoryEntry = createWorkspaceNavigationEntryFromSnapshot({
+    activeWorkspacePanelKind: resolvedActiveWorkspacePanelKind,
+    activeChildSessionKey,
+    activeWorkspaceFileKey: resolvedActiveWorkspaceFileKey,
+  });
+  const normalizedNavigationHistory = Array.isArray(value.workspaceNavigationHistory)
+    ? value.workspaceNavigationHistory
+      .map(normalizePersistedWorkspaceNavigationEntry)
+      .filter((entry): entry is ChatWorkspaceNavigationEntry => entry !== null)
+      .filter((entry) =>
+        entry.kind !== 'file' || workspaceFileTabs.some((tab) => tab.key === entry.key),
+      )
+    : [];
+  const workspaceNavigationHistory =
+    normalizedNavigationHistory.length > 0
+      ? normalizedNavigationHistory
+      : fallbackHistoryEntry
+        ? [fallbackHistoryEntry]
+        : [];
+  const workspaceNavigationHistoryIndex =
+    workspaceNavigationHistory.length > 0
+      ? normalizeHistoryIndex(
+        value.workspaceNavigationHistoryIndex,
+        workspaceNavigationHistory.length - 1,
+      )
+      : 0;
+
+  return {
+    workspacePanelParentKey: normalizeOptionalString(value.workspacePanelParentKey),
+    activeWorkspacePanelKind: resolvedActiveWorkspacePanelKind,
+    activeChildSessionKey,
+    workspaceFileTabs,
+    activeWorkspaceFileKey: resolvedActiveWorkspaceFileKey,
+    workspaceNavigationHistory,
+    workspaceNavigationHistoryIndex,
+  };
+}
+
+export const useChatThreadStore = create<ChatThreadStore>()(
+  persist(
+    (set) => ({
+      snapshot: initialSnapshot,
+      setSnapshot: (patch) =>
+        set((state) => ({
+          snapshot: {
+            ...state.snapshot,
+            ...patch
+          }
+        }))
+    }),
+    {
+      name: CHAT_THREAD_WORKSPACE_STORAGE_KEY,
+      version: CHAT_THREAD_WORKSPACE_STORAGE_VERSION,
+      storage: createJSONStorage(() => window.localStorage),
+      partialize: (state): PersistedChatThreadStore => ({
+        snapshot: {
+          workspacePanelParentKey: state.snapshot.workspacePanelParentKey,
+          activeWorkspacePanelKind: state.snapshot.activeWorkspacePanelKind,
+          activeChildSessionKey: state.snapshot.activeChildSessionKey,
+          workspaceFileTabs: state.snapshot.workspaceFileTabs
+            .slice(-CHAT_THREAD_MAX_PERSISTED_WORKSPACE_FILE_TABS)
+            .map(toPersistedWorkspaceFileTab),
+          activeWorkspaceFileKey: state.snapshot.activeWorkspaceFileKey,
+          workspaceNavigationHistory: state.snapshot.workspaceNavigationHistory,
+          workspaceNavigationHistoryIndex: state.snapshot.workspaceNavigationHistoryIndex,
+        }
+      }),
+      merge: (persistedState, currentState) => {
+        const persistedSnapshot = isRecord(persistedState)
+          ? persistedState.snapshot
+          : null;
+        const workspaceSnapshot =
+          normalizePersistedWorkspaceSnapshot(persistedSnapshot);
+        if (!workspaceSnapshot) {
+          return currentState;
+        }
+        return {
+          ...currentState,
+          snapshot: {
+            ...currentState.snapshot,
+            ...workspaceSnapshot
+          }
+        };
       }
-    }))
-}));
+    }
+  )
+);

package/src/features/marketplace/components/marketplace-catalog-grid.tsx

@@ -19,8 +19,10 @@ type MarketplaceCatalogGridProps = {
   scope: "all" | "installed";
   title: string;
   summary: string;
+  refreshingLabel: string;
   showTitle: boolean;
   showListSkeleton: boolean;
+  isRefreshing: boolean;
   skeletonCardCount: number;
   allItems: MarketplaceItemSummary[];
   installedEntries: InstalledRenderEntry[];
@@ -41,8 +43,10 @@ export function MarketplaceCatalogGrid(props: MarketplaceCatalogGridProps) {
     scope,
     title,
     summary,
+    refreshingLabel,
     showTitle,
     showListSkeleton,
+    isRefreshing,
     skeletonCardCount,
     allItems,
     installedEntries,
@@ -60,7 +64,21 @@ export function MarketplaceCatalogGrid(props: MarketplaceCatalogGridProps) {
       {showTitle && (
         <div className="flex items-center justify-between gap-3">
           <h3 className="text-[14px] font-semibold text-gray-950">{title}</h3>
-          <span className="text-[12px] text-gray-500">{summary}</span>
+          <div className="flex items-center gap-2 text-[12px] text-gray-500">
+            {isRefreshing && (
+              <span className="font-medium text-primary">{refreshingLabel}</span>
+            )}
+            <span>{summary}</span>
+          </div>
+        </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>
       )}
 

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

@@ -0,0 +1,14 @@
+import { ExternalActionLink } from "@/shared/components/ui/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-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" && (

package/src/features/marketplace/components/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/");
+  });
 });