@nextclaw/ui 0.9.1 → 0.9.3

package/src/components/chat/ncp/ncp-chat-page-data.ts

@@ -1,17 +1,15 @@
 import { useMemo } from 'react';
 import type { Dispatch, SetStateAction } from 'react';
-import type { SessionEntryView } from '@/api/types';
+import type { SessionEntryView, ThinkingLevel } from '@/api/types';
 import type { ChatModelOption } from '@/components/chat/chat-input.types';
-import {
-  adaptNcpSessionSummaries,
-  readNcpSessionPreferredThinking
-} from '@/components/chat/ncp/ncp-session-adapter';
+import { adaptNcpSessionSummaries } from '@/components/chat/ncp/ncp-session-adapter';
 import { useChatSessionTypeState } from '@/components/chat/useChatSessionTypeState';
 import {
-  resolveSelectedModelValue,
+  resolveRecentSessionPreferredThinking,
   resolveRecentSessionPreferredModel,
-  useSyncSelectedModel
-} from '@/components/chat/chat-page-runtime';
+  useSyncSelectedModel,
+  useSyncSelectedThinking
+} from '@/components/chat/chat-session-preference-governance';
 import {
   useConfig,
   useConfigMeta,
@@ -24,9 +22,11 @@ import { buildProviderModelCatalog, composeProviderModel, resolveModelThinkingCa
 type UseNcpChatPageDataParams = {
   query: string;
   selectedSessionKey: string | null;
+  currentSelectedModel: string;
   pendingSessionType: string;
   setPendingSessionType: Dispatch<SetStateAction<string>>;
   setSelectedModel: Dispatch<SetStateAction<string>>;
+  setSelectedThinkingLevel: Dispatch<SetStateAction<ThinkingLevel | null>>;
 };
 
 function filterSessionsByQuery(sessions: SessionEntryView[], query: string): SessionEntryView[] {
@@ -37,6 +37,18 @@ function filterSessionsByQuery(sessions: SessionEntryView[], query: string): Ses
   return sessions.filter((session) => session.key.toLowerCase().includes(normalizedQuery));
 }
 
+export function filterModelOptionsBySessionType(params: {
+  modelOptions: ChatModelOption[];
+  supportedModels?: string[];
+}): ChatModelOption[] {
+  if (!params.supportedModels || params.supportedModels.length === 0) {
+    return params.modelOptions;
+  }
+  const supportedModelSet = new Set(params.supportedModels);
+  const filtered = params.modelOptions.filter((option) => supportedModelSet.has(option.value));
+  return filtered.length > 0 ? filtered : params.modelOptions;
+}
+
 export function useNcpChatPageData(params: UseNcpChatPageDataParams) {
   const configQuery = useConfig();
   const configMetaQuery = useConfigMeta();
@@ -95,19 +107,10 @@ export function useNcpChatPageData(params: UseNcpChatPageDataParams) {
     () => allSessions.find((session) => session.key === params.selectedSessionKey) ?? null,
     [allSessions, params.selectedSessionKey]
   );
-  const selectedSessionSummary = useMemo(
-    () => sessionSummaries.find((session) => session.sessionId === params.selectedSessionKey) ?? null,
-    [params.selectedSessionKey, sessionSummaries]
-  );
   const skillRecords = useMemo(
     () => installedSkillsQuery.data?.records ?? [],
     [installedSkillsQuery.data?.records]
   );
-  const selectedSessionThinkingLevel = useMemo(
-    () => (selectedSessionSummary ? readNcpSessionPreferredThinking(selectedSessionSummary) : null),
-    [selectedSessionSummary]
-  );
-
   const sessionTypeState = useChatSessionTypeState({
     selectedSession,
     selectedSessionKey: params.selectedSessionKey,
@@ -115,6 +118,14 @@ export function useNcpChatPageData(params: UseNcpChatPageDataParams) {
     setPendingSessionType: params.setPendingSessionType,
     sessionTypesData: sessionTypesQuery.data
   });
+  const filteredModelOptions = useMemo(
+    () =>
+      filterModelOptionsBySessionType({
+        modelOptions,
+        supportedModels: sessionTypeState.selectedSessionTypeOption?.supportedModels
+      }),
+    [modelOptions, sessionTypeState.selectedSessionTypeOption?.supportedModels]
+  );
   const recentSessionPreferredModel = useMemo(
     () =>
       resolveRecentSessionPreferredModel({
@@ -124,28 +135,46 @@ export function useNcpChatPageData(params: UseNcpChatPageDataParams) {
       }),
     [allSessions, params.selectedSessionKey, sessionTypeState.selectedSessionType]
   );
+  const currentModelOption = useMemo(
+    () => filteredModelOptions.find((option) => option.value === params.currentSelectedModel),
+    [filteredModelOptions, params.currentSelectedModel]
+  );
+  const supportedThinkingLevels = useMemo(
+    () => (currentModelOption?.thinkingCapability?.supported as ThinkingLevel[] | undefined) ?? [],
+    [currentModelOption?.thinkingCapability?.supported]
+  );
+  const defaultThinkingLevel = useMemo(
+    () => (currentModelOption?.thinkingCapability?.default as ThinkingLevel | null | undefined) ?? null,
+    [currentModelOption?.thinkingCapability?.default]
+  );
+  const recentSessionPreferredThinking = useMemo(
+    () =>
+      resolveRecentSessionPreferredThinking({
+        sessions: allSessions,
+        selectedSessionKey: params.selectedSessionKey,
+        sessionType: sessionTypeState.selectedSessionType
+      }),
+    [allSessions, params.selectedSessionKey, sessionTypeState.selectedSessionType]
+  );
 
   useSyncSelectedModel({
-    modelOptions,
+    modelOptions: filteredModelOptions,
     selectedSessionKey: params.selectedSessionKey,
+    selectedSessionExists: Boolean(selectedSession),
     selectedSessionPreferredModel: selectedSession?.preferredModel,
-    fallbackPreferredModel: recentSessionPreferredModel,
-    defaultModel: configQuery.data?.agents.defaults.model,
+    fallbackPreferredModel: sessionTypeState.selectedSessionTypeOption?.recommendedModel ?? recentSessionPreferredModel,
+    defaultModel: sessionTypeState.selectedSessionTypeOption?.recommendedModel ?? configQuery.data?.agents.defaults.model,
     setSelectedModel: params.setSelectedModel
   });
-
-  const hydratedSessionModel = useMemo(
-    () =>
-      resolveSelectedModelValue({
-        currentSelectedModel: '',
-        modelOptions,
-        selectedSessionPreferredModel: selectedSession?.preferredModel,
-        fallbackPreferredModel: recentSessionPreferredModel,
-        defaultModel: configQuery.data?.agents.defaults.model,
-        preferSessionPreferredModel: true
-      }),
-    [configQuery.data?.agents.defaults.model, modelOptions, recentSessionPreferredModel, selectedSession?.preferredModel]
-  );
+  useSyncSelectedThinking({
+    supportedThinkingLevels,
+    selectedSessionKey: params.selectedSessionKey,
+    selectedSessionExists: Boolean(selectedSession),
+    selectedSessionPreferredThinking: selectedSession?.preferredThinking ?? null,
+    fallbackPreferredThinking: recentSessionPreferredThinking ?? null,
+    defaultThinkingLevel,
+    setSelectedThinkingLevel: params.setSelectedThinkingLevel
+  });
 
   return {
     configQuery,
@@ -154,13 +183,11 @@ export function useNcpChatPageData(params: UseNcpChatPageDataParams) {
     sessionTypesQuery,
     installedSkillsQuery,
     isProviderStateResolved,
-    modelOptions,
+    modelOptions: filteredModelOptions,
     sessionSummaries,
     sessions,
     skillRecords,
     selectedSession,
-    hydratedSessionModel,
-    selectedSessionThinkingLevel,
     ...sessionTypeState
   };
 }

package/src/components/chat/ncp/ncp-session-adapter.test.ts

@@ -22,6 +22,7 @@ describe('adaptNcpSessionSummary', () => {
         metadata: {
           label: 'NCP Planning Thread',
           model: 'openai/gpt-5',
+          preferred_thinking: 'medium',
           session_type: 'native'
         }
       })
@@ -31,6 +32,7 @@ describe('adaptNcpSessionSummary', () => {
       key: 'ncp-session-1',
       label: 'NCP Planning Thread',
       preferredModel: 'openai/gpt-5',
+      preferredThinking: 'medium',
       sessionType: 'native',
       sessionTypeMutable: false,
       messageCount: 3

package/src/components/chat/ncp/ncp-session-adapter.ts

@@ -175,12 +175,14 @@ export function adaptNcpMessagesToUiMessages(messages: readonly NcpMessageView[]
 export function adaptNcpSessionSummary(summary: NcpSessionSummaryView): SessionEntryView {
   const label = readNcpSessionLabel(summary);
   const preferredModel = readNcpSessionPreferredModel(summary);
+  const preferredThinking = readNcpSessionPreferredThinking(summary);
   return {
     key: summary.sessionId,
     createdAt: summary.updatedAt,
     updatedAt: summary.updatedAt,
     ...(label ? { label } : {}),
     ...(preferredModel ? { preferredModel } : {}),
+    ...(preferredThinking ? { preferredThinking } : {}),
     sessionType: readNcpSessionType(summary),
     sessionTypeMutable: false,
     messageCount: summary.messageCount

package/src/components/chat/stores/chat-input.store.ts

@@ -18,7 +18,20 @@ export type ChatInputSnapshot = {
   modelOptions: ChatModelOption[];
   selectedModel: string;
   selectedThinkingLevel: ThinkingLevel | null;
-  sessionTypeOptions: Array<{ value: string; label: string }>;
+  sessionTypeOptions: Array<{
+    value: string;
+    label: string;
+    ready?: boolean;
+    reason?: string | null;
+    reasonMessage?: string | null;
+    supportedModels?: string[];
+    recommendedModel?: string | null;
+    cta?: {
+      kind: string;
+      label?: string;
+      href?: string;
+    } | null;
+  }>;
   selectedSessionType?: string;
   stopSupported: boolean;
   stopReason?: string;

package/src/components/chat/useChatSessionTypeState.test.tsx

@@ -55,4 +55,33 @@ describe('useChatSessionTypeState', () => {
 
     expect(setPendingSessionType).toHaveBeenCalledWith('codex-sdk');
   });
+
+  it('marks the selected draft session type as unavailable when runtime setup is incomplete', () => {
+    const setPendingSessionType = vi.fn();
+
+    const { result } = renderHook(() =>
+      useChatSessionTypeState({
+        selectedSession: null,
+        selectedSessionKey: null,
+        pendingSessionType: 'claude',
+        setPendingSessionType,
+        sessionTypesData: {
+          defaultType: 'native',
+          options: [
+            { value: 'native', label: 'Native', ready: true },
+            {
+              value: 'claude',
+              label: 'Claude',
+              ready: false,
+              reasonMessage: 'Configure a provider API key first.'
+            }
+          ]
+        }
+      })
+    );
+
+    expect(result.current.selectedSessionTypeOption?.ready).toBe(false);
+    expect(result.current.sessionTypeUnavailable).toBe(true);
+    expect(result.current.sessionTypeUnavailableMessage).toBe('Configure a provider API key first.');
+  });
 });

package/src/components/chat/useChatSessionTypeState.ts

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef } from 'react';
 import type { Dispatch, SetStateAction } from 'react';
-import type { SessionEntryView } from '@/api/types';
+import type { ChatSessionTypeOptionView, SessionEntryView } from '@/api/types';
 import { t } from '@/lib/i18n';
 
 export const DEFAULT_SESSION_TYPE = 'native';
@@ -8,6 +8,16 @@ export const DEFAULT_SESSION_TYPE = 'native';
 export type ChatSessionTypeOption = {
   value: string;
   label: string;
+  ready: boolean;
+  reason?: string | null;
+  reasonMessage?: string | null;
+  supportedModels?: string[];
+  recommendedModel?: string | null;
+  cta?: {
+    kind: string;
+    label?: string;
+    href?: string;
+  } | null;
 };
 
 type UseChatSessionTypeStateParams = {
@@ -17,7 +27,7 @@ type UseChatSessionTypeStateParams = {
   setPendingSessionType: Dispatch<SetStateAction<string>>;
   sessionTypesData?: {
     defaultType?: string;
-    options?: Array<{ value: string; label: string }>;
+    options?: ChatSessionTypeOptionView[];
   } | null;
 };
 
@@ -46,20 +56,32 @@ export function resolveSessionTypeLabel(sessionType: string, fallbackLabel?: str
 }
 
 function buildSessionTypeOptions(
-  options: Array<{ value: string; label: string }>
+  options: ChatSessionTypeOptionView[]
 ): ChatSessionTypeOption[] {
   const deduped = new Map<string, ChatSessionTypeOption>();
   for (const option of options) {
     const value = normalizeSessionType(option.value);
     deduped.set(value, {
       value,
-      label: option.label?.trim() || resolveSessionTypeLabel(value)
+      label: option.label?.trim() || resolveSessionTypeLabel(value),
+      ready: option.ready ?? true,
+      reason: option.reason ?? null,
+      reasonMessage: option.reasonMessage ?? null,
+      supportedModels: option.supportedModels,
+      recommendedModel: option.recommendedModel ?? null,
+      cta: option.cta ?? null
     });
   }
   if (!deduped.has(DEFAULT_SESSION_TYPE)) {
     deduped.set(DEFAULT_SESSION_TYPE, {
       value: DEFAULT_SESSION_TYPE,
-      label: resolveSessionTypeLabel(DEFAULT_SESSION_TYPE)
+      label: resolveSessionTypeLabel(DEFAULT_SESSION_TYPE),
+      ready: true,
+      reason: null,
+      reasonMessage: null,
+      supportedModels: undefined,
+      recommendedModel: null,
+      cta: null
     });
   }
   return Array.from(deduped.values()).sort((left, right) => {
@@ -75,6 +97,7 @@ function buildSessionTypeOptions(
 
 export function useChatSessionTypeState(params: UseChatSessionTypeStateParams): {
   sessionTypeOptions: ChatSessionTypeOption[];
+  selectedSessionTypeOption: ChatSessionTypeOption | null;
   defaultSessionType: string;
   selectedSessionType: string;
   canEditSessionType: boolean;
@@ -99,7 +122,13 @@ export function useChatSessionTypeState(params: UseChatSessionTypeStateParams):
     if (!options.some((option) => option.value === currentSessionType)) {
       options.push({
         value: currentSessionType,
-        label: resolveSessionTypeLabel(currentSessionType)
+        label: resolveSessionTypeLabel(currentSessionType),
+        ready: true,
+        reason: null,
+        reasonMessage: null,
+        supportedModels: undefined,
+        recommendedModel: null,
+        cta: null
       });
     }
     return options.sort((left, right) => {
@@ -121,6 +150,10 @@ export function useChatSessionTypeState(params: UseChatSessionTypeStateParams):
     () => normalizeSessionType(selectedSession?.sessionType ?? pendingSessionType ?? defaultSessionType),
     [defaultSessionType, pendingSessionType, selectedSession?.sessionType]
   );
+  const selectedSessionTypeOption = useMemo(
+    () => sessionTypeOptions.find((option) => option.value === selectedSessionType) ?? null,
+    [selectedSessionType, sessionTypeOptions]
+  );
 
   useEffect(() => {
     if (selectedSessionKey) {
@@ -147,15 +180,25 @@ export function useChatSessionTypeState(params: UseChatSessionTypeStateParams):
     () => new Set(runtimeSessionTypeOptions.map((option) => option.value)),
     [runtimeSessionTypeOptions]
   );
-  const sessionTypeUnavailable = Boolean(
-    selectedSession && !availableSessionTypeSet.has(normalizeSessionType(selectedSession.sessionType))
-  );
-  const sessionTypeUnavailableMessage = sessionTypeUnavailable
-    ? `${resolveSessionTypeLabel(selectedSessionType)} ${t('chatSessionTypeUnavailableSuffix')}`
-    : null;
+  const sessionTypeUnavailable = useMemo(() => {
+    if (selectedSession && !availableSessionTypeSet.has(normalizeSessionType(selectedSession.sessionType))) {
+      return true;
+    }
+    return selectedSessionTypeOption?.ready === false;
+  }, [availableSessionTypeSet, selectedSession, selectedSessionTypeOption?.ready]);
+  const sessionTypeUnavailableMessage = useMemo(() => {
+    if (selectedSession && !availableSessionTypeSet.has(normalizeSessionType(selectedSession.sessionType))) {
+      return `${resolveSessionTypeLabel(selectedSessionType)} ${t('chatSessionTypeUnavailableSuffix')}`;
+    }
+    if (selectedSessionTypeOption?.ready === false) {
+      return selectedSessionTypeOption.reasonMessage?.trim() || `${selectedSessionTypeOption.label} setup required`;
+    }
+    return null;
+  }, [availableSessionTypeSet, selectedSession, selectedSessionType, selectedSessionTypeOption]);
 
   return {
     sessionTypeOptions,
+    selectedSessionTypeOption,
     defaultSessionType,
     selectedSessionType,
     canEditSessionType,

package/src/components/layout/Sidebar.tsx

@@ -1,7 +1,7 @@
 import { cn } from '@/lib/utils';
 import { LANGUAGE_OPTIONS, t, type I18nLanguage } from '@/lib/i18n';
 import { THEME_OPTIONS, type UiTheme } from '@/lib/theme';
-import { Cpu, GitBranch, History, MessageCircle, MessageSquare, Sparkles, BookOpen, Plug, BrainCircuit, AlarmClock, Languages, Palette, KeyRound, Settings, ArrowLeft, Search, Shield } from 'lucide-react';
+import { Cpu, GitBranch, History, MessageCircle, MessageSquare, Sparkles, BookOpen, Plug, BrainCircuit, AlarmClock, Languages, Palette, KeyRound, Settings, ArrowLeft, Search, Shield, Wrench, Wifi } from 'lucide-react';
 import { NavLink } from 'react-router-dom';
 import { useDocBrowser } from '@/components/doc-browser';
 import { BrandHeader } from '@/components/common/BrandHeader';
@@ -82,6 +82,11 @@ export function Sidebar({ mode }: SidebarProps) {
       label: t('runtime'),
       icon: GitBranch,
     },
+    {
+      target: '/remote',
+      label: t('remote'),
+      icon: Wifi,
+    },
     {
       target: '/security',
       label: t('security'),
@@ -101,6 +106,11 @@ export function Sidebar({ mode }: SidebarProps) {
       target: '/marketplace/plugins',
       label: t('marketplaceFilterPlugins'),
       icon: Plug,
+    },
+    {
+      target: '/marketplace/mcp',
+      label: t('marketplaceFilterMcp'),
+      icon: Wrench,
     }
   ];
   const navItems = mode === 'main' ? mainNavItems : settingsNavItems;

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?.();
+  });
 });