@nextclaw/ui 0.9.2 → 0.9.3

package/src/components/marketplace/MarketplacePage.test.tsx

@@ -1,6 +1,8 @@
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { MarketplacePage } from '@/components/marketplace/MarketplacePage';
 import type {
+  MarketplaceInstalledRecord,
   MarketplaceInstalledView,
   MarketplaceItemSummary,
   MarketplaceListView
@@ -35,6 +37,7 @@ const mocks = vi.hoisted(() => ({
   },
   manageMutation: {
     mutate: vi.fn(),
+    mutateAsync: vi.fn(),
     isPending: false,
     variables: undefined
   }
@@ -95,6 +98,37 @@ function createMarketplaceItem(overrides: Partial<MarketplaceItemSummary> = {}):
   };
 }
 
+function createPluginMarketplaceItem(overrides: Partial<MarketplaceItemSummary> = {}): MarketplaceItemSummary {
+  return createMarketplaceItem({
+    id: 'plugin-codex-runtime',
+    slug: 'codex-runtime',
+    type: 'plugin',
+    name: 'Codex SDK NCP Runtime',
+    summary: 'Optional Codex runtime for NextClaw',
+    summaryI18n: { en: 'Optional Codex runtime for NextClaw' },
+    install: {
+      kind: 'npm',
+      spec: '@nextclaw/nextclaw-ncp-runtime-plugin-codex-sdk',
+      command: 'npm install @nextclaw/nextclaw-ncp-runtime-plugin-codex-sdk'
+    },
+    ...overrides
+  });
+}
+
+function createInstalledRecord(overrides: Partial<MarketplaceInstalledRecord> = {}): MarketplaceInstalledRecord {
+  return {
+    type: 'plugin',
+    id: '@nextclaw/nextclaw-ncp-runtime-plugin-codex-sdk',
+    spec: '@nextclaw/nextclaw-ncp-runtime-plugin-codex-sdk',
+    label: 'Codex SDK NCP Runtime',
+    enabled: true,
+    origin: 'marketplace',
+    source: 'marketplace',
+    installedAt: '2026-03-19T00:00:00.000Z',
+    ...overrides
+  };
+}
+
 function createItemsQuery(overrides: Partial<Record<string, unknown>> = {}) {
   return {
     data: undefined as MarketplaceListView | undefined,
@@ -129,6 +163,7 @@ describe('MarketplacePage', () => {
     mocks.confirm.mockReset();
     mocks.installMutation.mutateAsync.mockReset();
     mocks.manageMutation.mutate.mockReset();
+    mocks.manageMutation.mutateAsync.mockReset();
     mocks.installMutation.isPending = false;
     mocks.installMutation.variables = undefined;
     mocks.manageMutation.isPending = false;
@@ -167,4 +202,121 @@ describe('MarketplacePage', () => {
     expect(screen.queryByTestId('marketplace-list-skeleton')).toBeNull();
     expect(screen.getByText('Web Search')).toBeTruthy();
   });
+
+  it('does not render the redundant plugin type label in plugin cards', () => {
+    mocks.itemsQuery = createItemsQuery({
+      data: {
+        total: 1,
+        page: 1,
+        pageSize: 12,
+        totalPages: 1,
+        sort: 'relevance',
+        items: [
+          createMarketplaceItem({
+            id: 'plugin-codex-runtime',
+            slug: 'codex-runtime',
+            type: 'plugin',
+            name: 'Codex SDK NCP Runtime',
+            summary: 'Optional Codex runtime for NextClaw',
+            summaryI18n: { en: 'Optional Codex runtime for NextClaw' },
+            install: {
+              kind: 'npm',
+              spec: '@nextclaw/nextclaw-ncp-runtime-plugin-codex-sdk',
+              command: 'npm install @nextclaw/nextclaw-ncp-runtime-plugin-codex-sdk'
+            }
+          })
+        ]
+      } satisfies MarketplaceListView
+    });
+
+    const { container } = render(<MarketplacePage forcedType="plugins" />);
+    const card = container.querySelector('article');
+
+    expect(card?.textContent).toContain('@nextclaw/nextclaw-ncp-runtime-plugin-codex-sdk');
+    expect(card?.textContent).not.toContain('Plugin');
+  });
+
+  it('does not dim the loaded list during background refresh', () => {
+    mocks.itemsQuery = createItemsQuery({
+      data: {
+        total: 1,
+        page: 1,
+        pageSize: 12,
+        totalPages: 1,
+        sort: 'relevance',
+        items: [createPluginMarketplaceItem()]
+      } satisfies MarketplaceListView,
+      isFetching: true
+    });
+
+    const { container } = render(<MarketplacePage forcedType="plugins" />);
+
+    expect(screen.getByText('Codex SDK NCP Runtime')).toBeTruthy();
+    expect(container.querySelector('.opacity-70')).toBeNull();
+  });
+
+  it('only disables the targeted plugin action while a manage request is pending', async () => {
+    const user = userEvent.setup();
+    let resolveMutation: (() => void) | undefined;
+    mocks.itemsQuery = createItemsQuery({
+      data: {
+        total: 2,
+        page: 1,
+        pageSize: 12,
+        totalPages: 1,
+        sort: 'relevance',
+        items: [
+          createPluginMarketplaceItem(),
+          createPluginMarketplaceItem({
+            id: 'plugin-claude-runtime',
+            slug: 'claude-runtime',
+            name: 'Claude Agent Runtime',
+            install: {
+              kind: 'npm',
+              spec: '@nextclaw/nextclaw-ncp-runtime-plugin-claude-code-sdk',
+              command: 'npm install @nextclaw/nextclaw-ncp-runtime-plugin-claude-code-sdk'
+            }
+          })
+        ]
+      } satisfies MarketplaceListView
+    });
+    mocks.installedQuery = createInstalledQuery({
+      data: {
+        type: 'plugin',
+        total: 2,
+        specs: [
+          '@nextclaw/nextclaw-ncp-runtime-plugin-codex-sdk',
+          '@nextclaw/nextclaw-ncp-runtime-plugin-claude-code-sdk'
+        ],
+        records: [
+          createInstalledRecord(),
+          createInstalledRecord({
+            id: '@nextclaw/nextclaw-ncp-runtime-plugin-claude-code-sdk',
+            spec: '@nextclaw/nextclaw-ncp-runtime-plugin-claude-code-sdk',
+            label: 'Claude Agent Runtime'
+          })
+        ]
+      } satisfies MarketplaceInstalledView
+    });
+    mocks.manageMutation.mutateAsync.mockImplementation(
+      () => new Promise<void>((resolve) => {
+        resolveMutation = resolve;
+      })
+    );
+
+    render(<MarketplacePage forcedType="plugins" />);
+
+    const disableButtons = screen.getAllByRole('button', { name: 'Disable' });
+    const firstDisableButton = disableButtons[0];
+    const secondDisableButton = disableButtons[1];
+
+    await user.click(firstDisableButton);
+
+    expect(mocks.manageMutation.mutateAsync).toHaveBeenCalledTimes(1);
+    expect(firstDisableButton.hasAttribute('disabled')).toBe(true);
+    expect(firstDisableButton.textContent).toContain('Disabling');
+    expect(secondDisableButton.hasAttribute('disabled')).toBe(false);
+
+    resolveMutation?.();
+  });
 });

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([]);
+  });
+});