@nextclaw/ui 0.9.2 → 0.9.4

package/src/components/marketplace/marketplace-installed-cache.ts

@@ -0,0 +1,149 @@
+import type {
+  MarketplaceInstalledRecord,
+  MarketplaceInstalledView,
+  MarketplaceInstallRequest,
+  MarketplaceInstallResult,
+  MarketplaceManageRequest,
+  MarketplaceManageResult,
+  MarketplaceItemType
+} from '@/api/types';
+
+function dedupeSpecs(records: MarketplaceInstalledRecord[]): string[] {
+  return Array.from(new Set(records.map((record) => record.spec).filter(Boolean)));
+}
+
+function buildInstalledRecordFromInstall(params: {
+  request: MarketplaceInstallRequest;
+  result: MarketplaceInstallResult;
+}): MarketplaceInstalledRecord {
+  const installedAt = new Date().toISOString();
+
+  if (params.result.type === 'skill') {
+    return {
+      type: 'skill',
+      spec: params.result.spec,
+      id: params.request.skill ?? params.result.spec,
+      label: params.request.skill ?? params.result.name ?? params.result.spec,
+      source: 'workspace',
+      installPath: params.request.installPath,
+      installedAt
+    };
+  }
+
+  return {
+    type: params.result.type,
+    spec: params.result.spec,
+    id: params.result.name ?? params.result.spec,
+    label: params.result.name ?? params.result.spec,
+    source: 'marketplace',
+    origin: 'marketplace',
+    enabled: params.request.enabled ?? true,
+    runtimeStatus: params.request.enabled === false ? 'disabled' : 'ready',
+    installedAt
+  };
+}
+
+function matchesInstalledRecord(record: MarketplaceInstalledRecord, params: {
+  id?: string;
+  spec?: string;
+}): boolean {
+  if (params.spec && record.spec === params.spec) {
+    return true;
+  }
+  if (params.id && record.id === params.id) {
+    return true;
+  }
+  return false;
+}
+
+function ensureInstalledView(type: MarketplaceItemType, view?: MarketplaceInstalledView): MarketplaceInstalledView {
+  return view ?? {
+    type,
+    total: 0,
+    specs: [],
+    records: []
+  };
+}
+
+export function applyInstallResultToInstalledView(params: {
+  view?: MarketplaceInstalledView;
+  request: MarketplaceInstallRequest;
+  result: MarketplaceInstallResult;
+}): MarketplaceInstalledView {
+  const current = ensureInstalledView(params.result.type, params.view);
+  const optimisticRecord = buildInstalledRecordFromInstall(params);
+  const existingIndex = current.records.findIndex((record) => matchesInstalledRecord(record, {
+    id: optimisticRecord.id,
+    spec: optimisticRecord.spec
+  }));
+
+  const nextRecords = [...current.records];
+  if (existingIndex >= 0) {
+    nextRecords[existingIndex] = {
+      ...nextRecords[existingIndex],
+      ...optimisticRecord
+    };
+  } else {
+    nextRecords.unshift(optimisticRecord);
+  }
+
+  return {
+    ...current,
+    type: params.result.type,
+    records: nextRecords,
+    specs: dedupeSpecs(nextRecords),
+    total: nextRecords.length
+  };
+}
+
+export function applyManageResultToInstalledView(params: {
+  view?: MarketplaceInstalledView;
+  request: MarketplaceManageRequest;
+  result: MarketplaceManageResult;
+}): MarketplaceInstalledView {
+  const current = ensureInstalledView(params.result.type, params.view);
+
+  if (params.result.action === 'uninstall' || params.result.action === 'remove') {
+    const nextRecords = current.records.filter((record) => !matchesInstalledRecord(record, {
+      id: params.result.id,
+      spec: params.request.spec
+    }));
+
+    return {
+      ...current,
+      records: nextRecords,
+      specs: dedupeSpecs(nextRecords),
+      total: nextRecords.length
+    };
+  }
+
+  const nextRecords = current.records.map((record) => {
+    if (!matchesInstalledRecord(record, {
+      id: params.result.id,
+      spec: params.request.spec
+    })) {
+      return record;
+    }
+
+    if (params.result.action === 'disable') {
+      return {
+        ...record,
+        enabled: false,
+        runtimeStatus: 'disabled'
+      };
+    }
+
+    return {
+      ...record,
+      enabled: true,
+      runtimeStatus: 'ready'
+    };
+  });
+
+  return {
+    ...current,
+    records: nextRecords,
+    specs: dedupeSpecs(nextRecords),
+    total: nextRecords.length
+  };
+}

package/src/components/marketplace/marketplace-localization.ts

@@ -0,0 +1,77 @@
+import type { MarketplaceInstalledRecord, MarketplaceLocalizedTextMap } from '@/api/types';
+
+export function buildLocaleFallbacks(language: string): string[] {
+  const normalized = language.trim().toLowerCase().replace(/_/g, '-');
+  const base = normalized.split('-')[0];
+  const fallbacks = [normalized, base, 'en'];
+  return Array.from(new Set(fallbacks.filter(Boolean)));
+}
+
+export function normalizeLocaleTag(locale: string): string {
+  return locale.trim().toLowerCase().replace(/_/g, '-');
+}
+
+export function pickLocalizedText(
+  localized: MarketplaceLocalizedTextMap | undefined,
+  fallback: string | undefined,
+  localeFallbacks: string[]
+): string {
+  if (localized) {
+    const entries = Object.entries(localized)
+      .map(([locale, text]) => ({ locale: normalizeLocaleTag(locale), text: typeof text === 'string' ? text.trim() : '' }))
+      .filter((entry) => entry.text.length > 0);
+
+    if (entries.length > 0) {
+      const exactMap = new Map(entries.map((entry) => [entry.locale, entry.text] as const));
+
+      for (const locale of localeFallbacks) {
+        const normalizedLocale = normalizeLocaleTag(locale);
+        const exact = exactMap.get(normalizedLocale);
+        if (exact) {
+          return exact;
+        }
+      }
+
+      for (const locale of localeFallbacks) {
+        const base = normalizeLocaleTag(locale).split('-')[0];
+        if (!base) {
+          continue;
+        }
+        const matched = entries.find((entry) => entry.locale === base || entry.locale.startsWith(`${base}-`));
+        if (matched) {
+          return matched.text;
+        }
+      }
+
+      return entries[0]?.text ?? '';
+    }
+  }
+
+  return fallback?.trim() ?? '';
+}
+
+export function pickInstalledRecordDescription(
+  record: MarketplaceInstalledRecord | undefined,
+  localeFallbacks: string[]
+): string {
+  if (!record) {
+    return '';
+  }
+
+  for (const locale of localeFallbacks) {
+    const base = normalizeLocaleTag(locale).split('-')[0];
+    if (base === 'zh' && record.descriptionZh?.trim()) {
+      return record.descriptionZh.trim();
+    }
+  }
+
+  if (record.description?.trim()) {
+    return record.description.trim();
+  }
+
+  if (record.descriptionZh?.trim()) {
+    return record.descriptionZh.trim();
+  }
+
+  return '';
+}

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

@@ -0,0 +1,102 @@
+import type { MarketplaceSort } from '@/api/types';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Skeleton } from '@/components/ui/skeleton';
+import { t } from '@/lib/i18n';
+import { PackageSearch } from 'lucide-react';
+
+export function FilterPanel(props: {
+  scope: 'all' | 'installed';
+  searchText: string;
+  searchPlaceholder: string;
+  sort: MarketplaceSort;
+  onSearchTextChange: (value: string) => void;
+  onSortChange: (value: MarketplaceSort) => void;
+}) {
+  return (
+    <div className="mb-4">
+      <div className="flex gap-3 items-center">
+        <div className="flex-1 min-w-0 relative">
+          <PackageSearch className="h-4 w-4 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" />
+          <input
+            value={props.searchText}
+            onChange={(event) => props.onSearchTextChange(event.target.value)}
+            placeholder={props.searchPlaceholder}
+            className="w-full h-9 border border-gray-200/80 rounded-xl pl-9 pr-3 text-sm focus:outline-none focus:ring-1 focus:ring-primary/40"
+          />
+        </div>
+
+        {props.scope === 'all' && (
+          <Select value={props.sort} onValueChange={(value) => props.onSortChange(value as MarketplaceSort)}>
+            <SelectTrigger className="h-9 w-[150px] shrink-0 rounded-lg">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="relevance">{t('marketplaceSortRelevance')}</SelectItem>
+              <SelectItem value="updated">{t('marketplaceSortUpdated')}</SelectItem>
+            </SelectContent>
+          </Select>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function MarketplaceListSkeleton(props: {
+  count: number;
+}) {
+  return (
+    <>
+      {Array.from({ length: props.count }, (_, index) => (
+        <article
+          key={`marketplace-skeleton-${index}`}
+          className="rounded-2xl border border-gray-200/40 bg-white px-5 py-4 shadow-sm"
+        >
+          <div className="flex items-start gap-3.5 justify-between">
+            <div className="flex min-w-0 flex-1 gap-3">
+              <Skeleton className="h-10 w-10 shrink-0 rounded-xl" />
+              <div className="min-w-0 flex-1 space-y-2 pt-0.5">
+                <Skeleton className="h-4 w-32 max-w-[70%]" />
+                <div className="flex items-center gap-2">
+                  <Skeleton className="h-3 w-12" />
+                  <Skeleton className="h-3 w-24" />
+                </div>
+                <Skeleton className="h-3 w-full" />
+              </div>
+            </div>
+            <Skeleton className="h-8 w-20 shrink-0 rounded-xl" />
+          </div>
+        </article>
+      ))}
+    </>
+  );
+}
+
+export function PaginationBar(props: {
+  page: number;
+  totalPages: number;
+  busy: boolean;
+  onPrev: () => void;
+  onNext: () => void;
+}) {
+  return (
+    <div className="mt-4 flex items-center justify-end gap-2">
+      <button
+        className="h-8 px-3 rounded-xl border border-gray-200/80 text-sm text-gray-600 disabled:opacity-40"
+        onClick={props.onPrev}
+        disabled={props.page <= 1 || props.busy}
+      >
+        {t('prev')}
+      </button>
+      <div className="text-sm text-gray-600 min-w-20 text-center">
+        {props.totalPages === 0 ? '0 / 0' : `${props.page} / ${props.totalPages}`}
+      </div>
+      <button
+        className="h-8 px-3 rounded-xl border border-gray-200/80 text-sm text-gray-600 disabled:opacity-40"
+        onClick={props.onNext}
+        disabled={props.totalPages === 0 || props.page >= props.totalPages || props.busy}
+      >
+        {t('next')}
+      </button>
+    </div>
+  );
+}

package/src/components/marketplace/mcp/McpMarketplacePage.test.tsx

@@ -0,0 +1,208 @@
+import { render, screen } from '@testing-library/react';
+import { describe, beforeEach, expect, it, vi } from 'vitest';
+import { McpMarketplacePage } from '@/components/marketplace/mcp/McpMarketplacePage';
+import type { MarketplaceInstalledView, MarketplaceListView } from '@/api/types';
+
+type ItemsQueryState = {
+  data?: MarketplaceListView;
+  isLoading: boolean;
+  isFetching: boolean;
+  isError: boolean;
+  error: Error | null;
+};
+
+type InstalledQueryState = {
+  data?: MarketplaceInstalledView;
+  isLoading: boolean;
+  isFetching: boolean;
+  isError: boolean;
+  error: Error | null;
+};
+
+const mocks = vi.hoisted(() => ({
+  itemsQuery: null as unknown as ItemsQueryState,
+  installedQuery: null as unknown as InstalledQueryState,
+  installMutation: {
+    mutateAsync: vi.fn(),
+    isPending: false
+  },
+  manageMutation: {
+    mutateAsync: vi.fn(),
+    isPending: false
+  },
+  doctorMutation: {
+    mutateAsync: vi.fn(),
+    isPending: false
+  },
+  confirm: vi.fn(),
+  docOpen: vi.fn()
+}));
+
+vi.mock('@tanstack/react-query', () => ({
+  useMutation: () => mocks.doctorMutation
+}));
+
+vi.mock('@/components/providers/I18nProvider', () => ({
+  useI18n: () => ({
+    language: 'zh',
+    setLanguage: vi.fn(),
+    toggleLanguage: vi.fn(),
+    t: (key: string) => key
+  })
+}));
+
+vi.mock('@/components/doc-browser', () => ({
+  useDocBrowser: () => ({
+    open: mocks.docOpen
+  })
+}));
+
+vi.mock('@/hooks/useConfirmDialog', () => ({
+  useConfirmDialog: () => ({
+    confirm: mocks.confirm,
+    ConfirmDialog: () => null
+  })
+}));
+
+vi.mock('@/hooks/useMcpMarketplace', () => ({
+  useMcpMarketplaceItems: () => mocks.itemsQuery,
+  useMcpMarketplaceInstalled: () => mocks.installedQuery,
+  useInstallMcpMarketplaceItem: () => mocks.installMutation,
+  useManageMcpMarketplaceItem: () => mocks.manageMutation
+}));
+
+function createItemsQuery(overrides: Partial<ItemsQueryState> = {}): ItemsQueryState {
+  return {
+    data: undefined,
+    isLoading: false,
+    isFetching: false,
+    isError: false,
+    error: null,
+    ...overrides
+  };
+}
+
+function createInstalledQuery(overrides: Partial<InstalledQueryState> = {}): InstalledQueryState {
+  return {
+    data: {
+      type: 'mcp',
+      total: 0,
+      specs: [],
+      records: []
+    },
+    isLoading: false,
+    isFetching: false,
+    isError: false,
+    error: null,
+    ...overrides
+  };
+}
+
+describe('McpMarketplacePage', () => {
+  beforeEach(() => {
+    mocks.installMutation.mutateAsync.mockReset();
+    mocks.manageMutation.mutateAsync.mockReset();
+    mocks.doctorMutation.mutateAsync.mockReset();
+    mocks.confirm.mockReset();
+    mocks.docOpen.mockReset();
+    mocks.itemsQuery = createItemsQuery();
+    mocks.installedQuery = createInstalledQuery();
+  });
+
+  it('prefers localized summary copy for the active language', () => {
+    mocks.itemsQuery = createItemsQuery({
+      data: {
+        total: 1,
+        page: 1,
+        pageSize: 12,
+        totalPages: 1,
+        sort: 'relevance',
+        items: [
+          {
+            id: 'mcp-chrome-devtools',
+            slug: 'chrome-devtools',
+            type: 'mcp',
+            name: 'Chrome DevTools MCP',
+            summary: 'Connect MCP clients to Chrome DevTools for browser inspection and automation.',
+            summaryI18n: {
+              en: 'Connect MCP clients to Chrome DevTools for browser inspection and automation.',
+              zh: '把 MCP 客户端接入 Chrome DevTools，用于浏览器检查与自动化。'
+            },
+            tags: ['mcp', 'browser'],
+            author: 'Chrome DevTools',
+            install: {
+              kind: 'template',
+              spec: 'chrome-devtools',
+              command: 'nextclaw mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest'
+            },
+            updatedAt: '2026-03-19T00:00:00.000Z'
+          }
+        ]
+      }
+    });
+
+    render(<McpMarketplacePage />);
+
+    expect(screen.getByText('把 MCP 客户端接入 Chrome DevTools，用于浏览器检查与自动化。')).toBeTruthy();
+  });
+
+  it('hides install button when an installed record matches by spec without catalog slug', () => {
+    mocks.itemsQuery = createItemsQuery({
+      data: {
+        total: 1,
+        page: 1,
+        pageSize: 12,
+        totalPages: 1,
+        sort: 'relevance',
+        items: [
+          {
+            id: 'mcp-chrome-devtools',
+            slug: 'chrome-devtools',
+            type: 'mcp',
+            name: 'Chrome DevTools MCP',
+            summary: 'Connect MCP clients to Chrome DevTools for browser inspection and automation.',
+            summaryI18n: {
+              en: 'Connect MCP clients to Chrome DevTools for browser inspection and automation.',
+              zh: '把 MCP 客户端接入 Chrome DevTools，用于浏览器检查与自动化。'
+            },
+            tags: ['mcp', 'browser'],
+            author: 'Chrome DevTools',
+            install: {
+              kind: 'template',
+              spec: 'chrome-devtools',
+              command: 'nextclaw mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest'
+            },
+            updatedAt: '2026-03-19T00:00:00.000Z'
+          }
+        ]
+      }
+    });
+    mocks.installedQuery = createInstalledQuery({
+      data: {
+        type: 'mcp',
+        total: 1,
+        specs: ['chrome-devtools'],
+        records: [
+          {
+            type: 'mcp',
+            id: 'chrome-devtools',
+            spec: 'chrome-devtools',
+            label: 'Chrome DevTools MCP',
+            enabled: true,
+            runtimeStatus: 'enabled',
+            transport: 'stdio',
+            scope: {
+              allAgents: true,
+              agents: []
+            }
+          }
+        ]
+      }
+    });
+
+    render(<McpMarketplacePage />);
+
+    expect(screen.queryByText('Install')).toBeNull();
+    expect(screen.getByText('Disable')).toBeTruthy();
+  });
+});