@nextclaw/ui 0.9.1 → 0.9.3

package/src/components/marketplace/MarketplacePage.tsx

@@ -2,7 +2,6 @@
 import type {
   MarketplaceInstalledRecord,
   MarketplaceItemSummary,
-  MarketplaceLocalizedTextMap,
   MarketplaceManageAction,
   MarketplacePluginContentView,
   MarketplaceSkillContentView,
@@ -10,8 +9,6 @@ import type {
   MarketplaceItemType
 } from '@/api/types';
 import { fetchMarketplacePluginContent, fetchMarketplaceSkillContent } from '@/api/marketplace';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Skeleton } from '@/components/ui/skeleton';
 import { Tabs } from '@/components/ui/tabs-custom';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { useDocBrowser } from '@/components/doc-browser';
@@ -23,10 +20,15 @@ import {
   useMarketplaceInstalled,
   useMarketplaceItems
 } from '@/hooks/useMarketplace';
+import {
+  FilterPanel,
+  MarketplaceListSkeleton,
+  PaginationBar
+} from '@/components/marketplace/marketplace-page-parts';
+import { buildLocaleFallbacks, pickLocalizedText } from '@/components/marketplace/marketplace-localization';
 import { t } from '@/lib/i18n';
 import { PageLayout, PageHeader } from '@/components/layout/page-layout';
 import { cn } from '@/lib/utils';
-import { PackageSearch } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
@@ -40,9 +42,7 @@ type InstallState = {
 };
 
 type ManageState = {
-  isPending: boolean;
-  targetId?: string;
-  action?: MarketplaceManageAction;
+  actionsByTarget: ReadonlyMap<string, MarketplaceManageAction>;
 };
 
 type InstalledRenderEntry = {
@@ -134,56 +134,6 @@ function findCatalogItemForRecord(
   return catalogLookup.get(toLookupKey(record.type, record.label));
 }
 
-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)));
-}
-
-function normalizeLocaleTag(locale: string): string {
-  return locale.trim().toLowerCase().replace(/_/g, '-');
-}
-
-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() ?? '';
-}
-
 function matchInstalledSearch(
   record: MarketplaceInstalledRecord,
   item: MarketplaceItemSummary | undefined,
@@ -317,43 +267,6 @@ function buildGenericDetailDataUrl(params: {
   return `data:text/html;charset=utf-8,${encodeURIComponent(html)}`;
 }
 
-function FilterPanel(props: {
-  scope: ScopeType;
-  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={(v) => props.onSortChange(v 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>
-  );
-}
-
 function MarketplaceListCard(props: {
   item?: MarketplaceItemSummary;
   record?: MarketplaceInstalledRecord;
@@ -366,14 +279,14 @@ function MarketplaceListCard(props: {
 }) {
   const { item, record, localeFallbacks, installState, manageState, onOpen, onInstall, onManage } = props;
   const pluginRecord = record?.type === 'plugin' ? record : undefined;
-  const type = item?.type ?? record?.type;
   const title = item?.name ?? record?.label ?? record?.id ?? record?.spec ?? t('marketplaceUnknownItem');
   const summary = pickLocalizedText(item?.summaryI18n, item?.summary, localeFallbacks)
     || (record ? t('marketplaceInstalledLocalSummary') : '');
   const spec = item?.install.spec ?? record?.spec ?? '';
 
   const targetId = record?.id || record?.spec;
-  const busyForRecord = Boolean(targetId) && manageState.isPending && manageState.targetId === targetId;
+  const busyAction = targetId ? manageState.actionsByTarget.get(targetId) : undefined;
+  const busyForRecord = Boolean(busyAction);
 
   const canToggle = Boolean(pluginRecord);
   const canUninstallPlugin = record?.type === 'plugin' && record.origin !== 'bundled';
@@ -384,8 +297,6 @@ function MarketplaceListCard(props: {
   const installSpec = item?.install.spec;
   const isInstalling = typeof installSpec === 'string' && installState.installingSpecs.has(installSpec);
 
-  const displayType = type === 'plugin' ? t('marketplaceTypePlugin') : type === 'skill' ? t('marketplaceTypeSkill') : t('marketplaceTypeExtension');
-
   return (
     <article
       onClick={onOpen}
@@ -405,19 +316,15 @@ function MarketplaceListCard(props: {
             </Tooltip>
 
             <div className="flex items-center gap-1.5 mt-0.5 mb-1.5">
-              <span className="text-[11px] text-gray-500 font-medium">{displayType}</span>
               {spec && (
-                <>
-                  <span className="text-[10px] text-gray-300">•</span>
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <span className="text-[11px] text-gray-400 truncate max-w-full font-mono">{spec}</span>
-                    </TooltipTrigger>
-                    <TooltipContent className="max-w-[300px] text-xs font-mono break-all">
-                      {spec}
-                    </TooltipContent>
-                  </Tooltip>
-                </>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <span className="text-[11px] text-gray-400 truncate max-w-full font-mono">{spec}</span>
+                  </TooltipTrigger>
+                  <TooltipContent className="max-w-[300px] text-xs font-mono break-all">
+                    {spec}
+                  </TooltipContent>
+                </Tooltip>
               )}
             </div>
 
@@ -451,29 +358,29 @@ function MarketplaceListCard(props: {
 
         {pluginRecord && canToggle && (
           <button
-            disabled={manageState.isPending}
+            disabled={busyForRecord}
             onClick={(event) => {
               event.stopPropagation();
               onManage(isDisabled ? 'enable' : 'disable', pluginRecord);
             }}
             className="inline-flex items-center h-8 px-4 rounded-xl text-xs font-medium border border-gray-200/80 text-gray-600 bg-white hover:bg-gray-50 hover:border-gray-300 disabled:opacity-50 transition-colors"
           >
-            {busyForRecord && manageState.action !== 'uninstall'
-              ? (manageState.action === 'enable' ? t('marketplaceEnabling') : t('marketplaceDisabling'))
+            {busyAction && busyAction !== 'uninstall'
+              ? (busyAction === 'enable' ? t('marketplaceEnabling') : t('marketplaceDisabling'))
               : (isDisabled ? t('marketplaceEnable') : t('marketplaceDisable'))}
           </button>
         )}
 
         {record && canUninstall && (
           <button
-            disabled={manageState.isPending}
+            disabled={busyForRecord}
             onClick={(event) => {
               event.stopPropagation();
               onManage('uninstall', record);
             }}
             className="inline-flex items-center h-8 px-4 rounded-xl text-xs font-medium border border-rose-100 text-rose-500 bg-white hover:bg-rose-50 hover:border-rose-200 disabled:opacity-50 transition-colors"
           >
-            {busyForRecord && manageState.action === 'uninstall' ? t('marketplaceRemoving') : t('marketplaceUninstall')}
+            {busyAction === 'uninstall' ? t('marketplaceRemoving') : t('marketplaceUninstall')}
           </button>
         )}
       </div>
@@ -481,68 +388,6 @@ function MarketplaceListCard(props: {
   );
 }
 
-function MarketplaceListSkeleton(props: {
-  count?: number;
-}) {
-  const count = props.count ?? SKELETON_CARD_COUNT;
-
-  return (
-    <>
-      {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"
-        >
-          <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>
-      ))}
-    </>
-  );
-}
-
-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>
-  );
-}
-
 export function MarketplacePage(props: MarketplacePageProps = {}) {
   const { forcedType } = props;
   const navigate = useNavigate();
@@ -609,6 +454,7 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
   const [sort, setSort] = useState<MarketplaceSort>('relevance');
   const [page, setPage] = useState(1);
   const [installingSpecs, setInstallingSpecs] = useState<ReadonlySet<string>>(new Set());
+  const [managingTargets, setManagingTargets] = useState<ReadonlyMap<string, MarketplaceManageAction>>(new Map());
 
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -687,10 +533,6 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
   const showCatalogSkeleton = scope === 'all' && itemsQuery.isLoading && !itemsQuery.data;
   const showInstalledSkeleton = scope === 'installed' && installedQuery.isLoading && !installedQuery.data;
   const showListSkeleton = showCatalogSkeleton || showInstalledSkeleton;
-  const isListRefreshing = !showListSkeleton && (
-    (scope === 'all' && itemsQuery.isFetching)
-    || (scope === 'installed' && installedQuery.isFetching)
-  );
 
   const listSummary = useMemo(() => {
     if (scope === 'installed') {
@@ -710,9 +552,7 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
   const installState: InstallState = { installingSpecs };
 
   const manageState: ManageState = {
-    isPending: manageMutation.isPending,
-    targetId: manageMutation.variables?.id || manageMutation.variables?.spec,
-    action: manageMutation.variables?.action
+    actionsByTarget: managingTargets
   };
 
   const scopeTabs = [
@@ -759,14 +599,13 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
   };
 
   const handleManage = async (action: MarketplaceManageAction, record: MarketplaceInstalledRecord) => {
-    if (manageMutation.isPending) {
-      return;
-    }
-
     const targetId = record.id || record.spec;
     if (!targetId) {
       return;
     }
+    if (managingTargets.has(targetId)) {
+      return;
+    }
 
     if (action === 'uninstall') {
       const confirmed = await confirm({
@@ -780,12 +619,29 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
       }
     }
 
-    manageMutation.mutate({
-      type: record.type,
-      action,
-      id: targetId,
-      spec: record.spec
+    setManagingTargets((previous) => {
+      const next = new Map(previous);
+      next.set(targetId, action);
+      return next;
     });
+
+    try {
+      await manageMutation.mutateAsync({
+        type: record.type,
+        action,
+        id: targetId,
+        spec: record.spec
+      });
+    } finally {
+      setManagingTargets((previous) => {
+        if (!previous.has(targetId)) {
+          return previous;
+        }
+        const next = new Map(previous);
+        next.delete(targetId);
+        return next;
+      });
+    }
   };
 
   const openItemDetail = async (item?: MarketplaceItemSummary, record?: MarketplaceInstalledRecord) => {
@@ -909,15 +765,12 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
           </div>
         )}
 
-        <div className="min-h-0 flex-1 overflow-y-auto custom-scrollbar pr-1" aria-busy={showListSkeleton || isListRefreshing}>
+        <div className="min-h-0 flex-1 overflow-y-auto custom-scrollbar pr-1" aria-busy={showListSkeleton}>
           <div
             data-testid={showListSkeleton ? 'marketplace-list-skeleton' : undefined}
-            className={cn(
-              'grid grid-cols-1 gap-3 lg:grid-cols-2 2xl:grid-cols-3 transition-opacity',
-              isListRefreshing ? 'opacity-70' : 'opacity-100'
-            )}
+            className="grid grid-cols-1 gap-3 lg:grid-cols-2 2xl:grid-cols-3"
           >
-            {showListSkeleton && <MarketplaceListSkeleton />}
+            {showListSkeleton && <MarketplaceListSkeleton count={SKELETON_CARD_COUNT} />}
 
             {!showListSkeleton && scope === 'all' && allItems.map((item) => (
               <MarketplaceListCard

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

@@ -0,0 +1,110 @@
+import type {
+  MarketplaceInstalledView,
+  MarketplaceInstallRequest,
+  MarketplaceInstallResult,
+  MarketplaceManageRequest,
+  MarketplaceManageResult
+} from '@/api/types';
+import {
+  applyInstallResultToInstalledView,
+  applyManageResultToInstalledView
+} from '@/components/marketplace/marketplace-installed-cache';
+
+describe('marketplace-installed-cache', () => {
+  it('adds a plugin record immediately after install success', () => {
+    const request: MarketplaceInstallRequest = {
+      type: 'plugin',
+      spec: '@nextclaw/nextclaw-ncp-runtime-plugin-codex-sdk',
+      kind: 'npm'
+    };
+    const result: MarketplaceInstallResult = {
+      type: 'plugin',
+      spec: '@nextclaw/nextclaw-ncp-runtime-plugin-codex-sdk',
+      message: 'installed'
+    };
+
+    const next = applyInstallResultToInstalledView({ request, result });
+
+    expect(next.total).toBe(1);
+    expect(next.specs).toEqual(['@nextclaw/nextclaw-ncp-runtime-plugin-codex-sdk']);
+    expect(next.records[0]).toMatchObject({
+      type: 'plugin',
+      spec: '@nextclaw/nextclaw-ncp-runtime-plugin-codex-sdk',
+      enabled: true,
+      origin: 'marketplace',
+      runtimeStatus: 'ready'
+    });
+  });
+
+  it('marks a plugin record as disabled immediately after disable success', () => {
+    const view: MarketplaceInstalledView = {
+      type: 'plugin',
+      total: 1,
+      specs: ['@nextclaw/nextclaw-ncp-runtime-plugin-codex-sdk'],
+      records: [
+        {
+          type: 'plugin',
+          id: '@nextclaw/nextclaw-ncp-runtime-plugin-codex-sdk',
+          spec: '@nextclaw/nextclaw-ncp-runtime-plugin-codex-sdk',
+          label: 'Codex Runtime',
+          enabled: true,
+          origin: 'marketplace'
+        }
+      ]
+    };
+    const request: MarketplaceManageRequest = {
+      type: 'plugin',
+      action: 'disable',
+      id: '@nextclaw/nextclaw-ncp-runtime-plugin-codex-sdk',
+      spec: '@nextclaw/nextclaw-ncp-runtime-plugin-codex-sdk'
+    };
+    const result: MarketplaceManageResult = {
+      type: 'plugin',
+      action: 'disable',
+      id: '@nextclaw/nextclaw-ncp-runtime-plugin-codex-sdk',
+      message: 'disabled'
+    };
+
+    const next = applyManageResultToInstalledView({ view, request, result });
+
+    expect(next.records[0]).toMatchObject({
+      enabled: false,
+      runtimeStatus: 'disabled'
+    });
+  });
+
+  it('removes a skill record immediately after uninstall success', () => {
+    const view: MarketplaceInstalledView = {
+      type: 'skill',
+      total: 1,
+      specs: ['@nextclaw/web-search'],
+      records: [
+        {
+          type: 'skill',
+          id: 'web-search',
+          spec: '@nextclaw/web-search',
+          label: 'Web Search',
+          source: 'workspace'
+        }
+      ]
+    };
+    const request: MarketplaceManageRequest = {
+      type: 'skill',
+      action: 'uninstall',
+      id: 'web-search',
+      spec: '@nextclaw/web-search'
+    };
+    const result: MarketplaceManageResult = {
+      type: 'skill',
+      action: 'uninstall',
+      id: 'web-search',
+      message: 'removed'
+    };
+
+    const next = applyManageResultToInstalledView({ view, request, result });
+
+    expect(next.total).toBe(0);
+    expect(next.records).toEqual([]);
+    expect(next.specs).toEqual([]);
+  });
+});

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
+  };
+}