@nextclaw/ui 0.9.2 → 0.9.4

package/src/components/remote/RemoteAccessPage.tsx

@@ -0,0 +1,396 @@
+import { useEffect, useMemo, useState } from 'react';
+import type { RemoteRuntimeView, RemoteServiceView } from '@/api/types';
+import {
+  useRemoteDoctor,
+  useRemoteBrowserAuthPoll,
+  useRemoteBrowserAuthStart,
+  useRemoteLogout,
+  useRemoteServiceControl,
+  useRemoteSettings,
+  useRemoteStatus
+} from '@/hooks/useRemoteAccess';
+import { PageHeader, PageLayout } from '@/components/layout/page-layout';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { StatusDot } from '@/components/ui/status-dot';
+import { Switch } from '@/components/ui/switch';
+import { formatDateTime, t } from '@/lib/i18n';
+import { Activity, KeyRound, Laptop, RefreshCcw, ServerCog, ShieldCheck, SquareTerminal } from 'lucide-react';
+
+function getRuntimeStatus(runtime: RemoteRuntimeView | null): { status: 'active' | 'inactive' | 'ready' | 'setup' | 'warning'; label: string } {
+  if (!runtime) {
+    return { status: 'inactive', label: t('remoteRuntimeMissing') };
+  }
+  if (runtime.state === 'connected') {
+    return { status: 'ready', label: t('remoteStateConnected') };
+  }
+  if (runtime.state === 'connecting') {
+    return { status: 'warning', label: t('remoteStateConnecting') };
+  }
+  if (runtime.state === 'error') {
+    return { status: 'warning', label: t('remoteStateError') };
+  }
+  if (runtime.state === 'disconnected') {
+    return { status: 'warning', label: t('remoteStateDisconnected') };
+  }
+  return { status: 'inactive', label: t('remoteStateDisabled') };
+}
+
+function getServiceStatus(service: RemoteServiceView): { status: 'active' | 'inactive' | 'ready' | 'setup' | 'warning'; label: string } {
+  if (!service.running) {
+    return { status: 'inactive', label: t('remoteServiceStopped') };
+  }
+  return service.currentProcess
+    ? { status: 'ready', label: t('remoteServiceManagedRunning') }
+    : { status: 'active', label: t('remoteServiceRunning') };
+}
+
+function KeyValueRow(props: { label: string; value?: string | number | null; muted?: boolean }) {
+  const value = props.value === undefined || props.value === null || props.value === '' ? '-' : String(props.value);
+  return (
+    <div className="flex items-start justify-between gap-4 py-2 text-sm">
+      <span className="text-gray-500">{props.label}</span>
+      <span className={props.muted ? 'text-right text-gray-500' : 'text-right text-gray-800'}>{value}</span>
+    </div>
+  );
+}
+
+export function RemoteAccessPage() {
+  const remoteStatus = useRemoteStatus();
+  const browserAuthStartMutation = useRemoteBrowserAuthStart();
+  const browserAuthPollMutation = useRemoteBrowserAuthPoll();
+  const logoutMutation = useRemoteLogout();
+  const settingsMutation = useRemoteSettings();
+  const doctorMutation = useRemoteDoctor();
+  const serviceMutation = useRemoteServiceControl();
+
+  const status = remoteStatus.data;
+  const runtimeStatus = useMemo(() => getRuntimeStatus(status?.runtime ?? null), [status?.runtime]);
+  const serviceStatus = useMemo(() => getServiceStatus(status?.service ?? { running: false, currentProcess: false }), [status?.service]);
+
+  const [enabled, setEnabled] = useState(false);
+  const [deviceName, setDeviceName] = useState('');
+  const [platformApiBase, setPlatformApiBase] = useState('');
+  const [authSessionId, setAuthSessionId] = useState<string | null>(null);
+  const [authVerificationUri, setAuthVerificationUri] = useState<string | null>(null);
+  const [authStatusMessage, setAuthStatusMessage] = useState('');
+  const [authExpiresAt, setAuthExpiresAt] = useState<string | null>(null);
+  const [authPollIntervalMs, setAuthPollIntervalMs] = useState(1500);
+
+  useEffect(() => {
+    if (!status) {
+      return;
+    }
+    setEnabled(status.settings.enabled);
+    setDeviceName(status.settings.deviceName);
+    setPlatformApiBase(status.settings.platformApiBase);
+  }, [status]);
+
+  useEffect(() => {
+    if (!status?.account.loggedIn) {
+      return;
+    }
+    setAuthSessionId(null);
+    setAuthVerificationUri(null);
+    setAuthExpiresAt(null);
+    setAuthStatusMessage('');
+    setAuthPollIntervalMs(1500);
+  }, [status?.account.loggedIn]);
+
+  useEffect(() => {
+    if (!authSessionId || status?.account.loggedIn) {
+      return;
+    }
+
+    let cancelled = false;
+    const timerId = window.setTimeout(async () => {
+      try {
+        const result = await browserAuthPollMutation.mutateAsync({
+          sessionId: authSessionId,
+          apiBase: platformApiBase.trim() || status?.settings.platformApiBase || status?.account.apiBase || undefined
+        });
+        if (cancelled) {
+          return;
+        }
+        if (result.status === 'pending') {
+          setAuthStatusMessage(t('remoteBrowserAuthWaiting'));
+          setAuthPollIntervalMs(result.nextPollMs ?? 1500);
+          return;
+        }
+        if (result.status === 'authorized') {
+          setAuthStatusMessage(t('remoteBrowserAuthCompleted'));
+          setAuthSessionId(null);
+          setAuthVerificationUri(null);
+          return;
+        }
+        setAuthStatusMessage(result.message || t('remoteBrowserAuthExpired'));
+        setAuthSessionId(null);
+        setAuthVerificationUri(null);
+      } catch {
+        if (cancelled) {
+          return;
+        }
+        setAuthSessionId(null);
+        setAuthVerificationUri(null);
+      }
+    }, authPollIntervalMs);
+
+    return () => {
+      cancelled = true;
+      window.clearTimeout(timerId);
+    };
+  }, [
+    authPollIntervalMs,
+    authSessionId,
+    browserAuthPollMutation,
+    platformApiBase,
+    status?.account.apiBase,
+    status?.account.loggedIn,
+    status?.settings.platformApiBase
+  ]);
+
+  const handleStartBrowserAuth = async () => {
+    const apiBase = platformApiBase.trim() || status?.settings.platformApiBase || status?.account.apiBase || undefined;
+    const result = await browserAuthStartMutation.mutateAsync({ apiBase });
+    setAuthSessionId(result.sessionId);
+    setAuthVerificationUri(result.verificationUri);
+    setAuthExpiresAt(result.expiresAt);
+    setAuthPollIntervalMs(result.intervalMs);
+    setAuthStatusMessage(t('remoteBrowserAuthWaiting'));
+    const opened = window.open(result.verificationUri, '_blank', 'noopener,noreferrer');
+    if (!opened) {
+      setAuthStatusMessage(t('remoteBrowserAuthPopupBlocked'));
+    }
+  };
+
+  const handleResumeBrowserAuth = () => {
+    if (!authVerificationUri) {
+      return;
+    }
+    window.open(authVerificationUri, '_blank', 'noopener,noreferrer');
+  };
+
+  if (remoteStatus.isLoading && !status) {
+    return <div className="p-8 text-gray-400">{t('remoteLoading')}</div>;
+  }
+
+  return (
+    <PageLayout className="space-y-6">
+      <PageHeader title={t('remotePageTitle')} description={t('remotePageDescription')} />
+
+      <div className="grid gap-6 xl:grid-cols-[1.35fr_0.95fr]">
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Activity className="h-4 w-4 text-primary" />
+              {t('remoteOverviewTitle')}
+            </CardTitle>
+            <CardDescription>{t('remoteOverviewDescription')}</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-5">
+            <div className="flex flex-wrap gap-2">
+              <StatusDot status={status?.account.loggedIn ? 'ready' : 'inactive'} label={status?.account.loggedIn ? t('remoteAccountConnected') : t('remoteAccountNotConnected')} />
+              <StatusDot status={serviceStatus.status} label={serviceStatus.label} />
+              <StatusDot status={runtimeStatus.status} label={runtimeStatus.label} />
+            </div>
+
+            <div className="rounded-2xl border border-gray-200/70 bg-gray-50/70 px-4 py-3">
+              <KeyValueRow label={t('remoteLocalOrigin')} value={status?.localOrigin} />
+              <KeyValueRow label={t('remotePublicPlatform')} value={status?.platformBase ?? status?.account.platformBase} />
+              <KeyValueRow label={t('remoteDeviceId')} value={status?.runtime?.deviceId} muted />
+              <KeyValueRow label={t('remoteLastConnectedAt')} value={status?.runtime?.lastConnectedAt ? formatDateTime(status.runtime.lastConnectedAt) : '-'} muted />
+              <KeyValueRow label={t('remoteLastError')} value={status?.runtime?.lastError} muted />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Laptop className="h-4 w-4 text-primary" />
+              {t('remoteDeviceTitle')}
+            </CardTitle>
+            <CardDescription>{t('remoteDeviceDescription')}</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <div className="flex items-center justify-between rounded-2xl border border-gray-200/70 px-4 py-3">
+                <div>
+                  <p className="text-sm font-medium text-gray-900">{t('remoteEnabled')}</p>
+                  <p className="mt-1 text-xs text-gray-500">{t('remoteEnabledHelp')}</p>
+                </div>
+                <Switch checked={enabled} onCheckedChange={setEnabled} />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="remote-device-name">{t('remoteDeviceName')}</Label>
+              <Input id="remote-device-name" value={deviceName} onChange={(event) => setDeviceName(event.target.value)} placeholder={t('remoteDeviceNamePlaceholder')} />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="remote-platform-api-base">{t('remotePlatformApiBase')}</Label>
+              <Input
+                id="remote-platform-api-base"
+                value={platformApiBase}
+                onChange={(event) => setPlatformApiBase(event.target.value)}
+                placeholder="https://ai-gateway-api.nextclaw.io/v1"
+              />
+              <p className="text-xs text-gray-500">{t('remotePlatformApiBaseHelp')}</p>
+            </div>
+
+            <div className="flex flex-wrap gap-3">
+              <Button
+                onClick={() =>
+                  settingsMutation.mutate({
+                    enabled,
+                    deviceName,
+                    platformApiBase
+                  })
+                }
+                disabled={settingsMutation.isPending}
+              >
+                {settingsMutation.isPending ? t('saving') : t('remoteSaveSettings')}
+              </Button>
+              <Button
+                variant="outline"
+                onClick={() => serviceMutation.mutate('restart')}
+                disabled={serviceMutation.isPending}
+              >
+                <RefreshCcw className="mr-2 h-4 w-4" />
+                {t('remoteRestartService')}
+              </Button>
+            </div>
+            <p className="text-xs text-gray-500">{t('remoteSaveHint')}</p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="grid gap-6 xl:grid-cols-[1fr_1fr]">
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <KeyRound className="h-4 w-4 text-primary" />
+              {t('remoteAccountTitle')}
+            </CardTitle>
+            <CardDescription>{t('remoteAccountDescription')}</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {status?.account.loggedIn ? (
+              <>
+                <div className="rounded-2xl border border-gray-200/70 bg-gray-50/70 px-4 py-3">
+                  <KeyValueRow label={t('remoteAccountEmail')} value={status.account.email} />
+                  <KeyValueRow label={t('remoteAccountRole')} value={status.account.role} />
+                  <KeyValueRow label={t('remoteApiBase')} value={status.account.apiBase} />
+                </div>
+                <Button variant="outline" onClick={() => logoutMutation.mutate()} disabled={logoutMutation.isPending}>
+                  {logoutMutation.isPending ? t('remoteLoggingOut') : t('remoteLogout')}
+                </Button>
+              </>
+            ) : (
+              <>
+                <div className="rounded-2xl border border-gray-200/70 bg-gray-50/70 px-4 py-3">
+                  <p className="text-sm font-medium text-gray-900">{t('remoteBrowserAuthTitle')}</p>
+                  <p className="mt-1 text-sm text-gray-600">{t('remoteBrowserAuthDescription')}</p>
+                  <div className="mt-3 border-t border-white/80 pt-3">
+                    <KeyValueRow label={t('remoteApiBase')} value={platformApiBase || status?.settings.platformApiBase || status?.account.apiBase} muted />
+                    <KeyValueRow label={t('remoteBrowserAuthSession')} value={authSessionId} muted />
+                    <KeyValueRow
+                      label={t('remoteBrowserAuthExpiresAt')}
+                      value={authExpiresAt ? formatDateTime(authExpiresAt) : '-'}
+                      muted
+                    />
+                  </div>
+                </div>
+                {authStatusMessage ? <p className="text-sm text-gray-600">{authStatusMessage}</p> : null}
+                <div className="flex flex-wrap gap-3">
+                  <Button onClick={handleStartBrowserAuth} disabled={browserAuthStartMutation.isPending || !!authSessionId}>
+                    {browserAuthStartMutation.isPending
+                      ? t('remoteBrowserAuthStarting')
+                      : authSessionId
+                        ? t('remoteBrowserAuthAuthorizing')
+                        : t('remoteBrowserAuthAction')}
+                  </Button>
+                  {authVerificationUri ? (
+                    <Button variant="outline" onClick={handleResumeBrowserAuth}>
+                      {t('remoteBrowserAuthResume')}
+                    </Button>
+                  ) : null}
+                </div>
+                <p className="text-xs text-gray-500">{t('remoteBrowserAuthHint')}</p>
+              </>
+            )}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <ServerCog className="h-4 w-4 text-primary" />
+              {t('remoteServiceTitle')}
+            </CardTitle>
+            <CardDescription>{t('remoteServiceDescription')}</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="rounded-2xl border border-gray-200/70 bg-gray-50/70 px-4 py-3">
+              <KeyValueRow label={t('remoteServicePid')} value={status?.service.pid} />
+              <KeyValueRow label={t('remoteServiceUiUrl')} value={status?.service.uiUrl} />
+              <KeyValueRow label={t('remoteServiceCurrentProcess')} value={status?.service.currentProcess ? t('yes') : t('no')} />
+            </div>
+            <div className="flex flex-wrap gap-3">
+              <Button variant="primary" onClick={() => serviceMutation.mutate('start')} disabled={serviceMutation.isPending}>
+                {t('remoteStartService')}
+              </Button>
+              <Button variant="outline" onClick={() => serviceMutation.mutate('restart')} disabled={serviceMutation.isPending}>
+                {t('remoteRestartService')}
+              </Button>
+              <Button variant="outline" onClick={() => serviceMutation.mutate('stop')} disabled={serviceMutation.isPending}>
+                {t('remoteStopService')}
+              </Button>
+            </div>
+            <p className="text-xs text-gray-500">{t('remoteServiceHint')}</p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <ShieldCheck className="h-4 w-4 text-primary" />
+            {t('remoteDoctorTitle')}
+          </CardTitle>
+          <CardDescription>{t('remoteDoctorDescription')}</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex flex-wrap gap-3">
+            <Button variant="outline" onClick={() => doctorMutation.mutate()} disabled={doctorMutation.isPending}>
+              <SquareTerminal className="mr-2 h-4 w-4" />
+              {doctorMutation.isPending ? t('remoteDoctorRunning') : t('remoteRunDoctor')}
+            </Button>
+          </div>
+
+          {doctorMutation.data ? (
+            <div className="rounded-2xl border border-gray-200/70 bg-gray-50/70 px-4 py-3">
+              <KeyValueRow label={t('remoteDoctorGeneratedAt')} value={formatDateTime(doctorMutation.data.generatedAt)} muted />
+              <div className="mt-3 space-y-2">
+                {doctorMutation.data.checks.map((check) => (
+                  <div key={check.name} className="rounded-xl border border-white bg-white px-3 py-3">
+                    <div className="flex items-center justify-between gap-3">
+                      <span className="text-sm font-medium text-gray-900">{check.name}</span>
+                      <StatusDot status={check.ok ? 'ready' : 'warning'} label={check.ok ? t('remoteCheckPassed') : t('remoteCheckFailed')} />
+                    </div>
+                    <p className="mt-2 text-sm text-gray-600">{check.detail}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ) : (
+            <p className="text-sm text-gray-500">{t('remoteDoctorEmpty')}</p>
+          )}
+        </CardContent>
+      </Card>
+    </PageLayout>
+  );
+}

package/src/components/ui/input.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { cn } from '@/lib/utils';
 
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> { }
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, ...props }, ref) => {

package/src/components/ui/label.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { cn } from '@/lib/utils';
 
-export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {}
+export type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement>;
 
 const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
   ({ className, ...props }, ref) => (

package/src/hooks/useMarketplace.ts

@@ -1,6 +1,10 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
 import { t } from '@/lib/i18n';
+import {
+  applyInstallResultToInstalledView,
+  applyManageResultToInstalledView
+} from '@/components/marketplace/marketplace-installed-cache';
 import {
   fetchMarketplaceItem,
   fetchMarketplaceInstalled,
@@ -10,7 +14,12 @@ import {
   manageMarketplaceItem,
   type MarketplaceListParams
 } from '@/api/marketplace';
-import type { MarketplaceInstallRequest, MarketplaceItemType, MarketplaceManageRequest } from '@/api/types';
+import type {
+  MarketplaceInstallRequest,
+  MarketplaceInstalledView,
+  MarketplaceItemType,
+  MarketplaceManageRequest
+} from '@/api/types';
 
 export function useMarketplaceItems(params: MarketplaceListParams) {
   return useQuery({
@@ -59,9 +68,19 @@ export function useInstallMarketplaceItem() {
 
   return useMutation({
     mutationFn: (request: MarketplaceInstallRequest) => installMarketplaceItem(request),
-    onSuccess: (result) => {
-      queryClient.invalidateQueries({ queryKey: ['marketplace-installed', result.type] });
-      queryClient.invalidateQueries({ queryKey: ['marketplace-items'] });
+    onSuccess: (result, variables) => {
+      queryClient.setQueryData<MarketplaceInstalledView | undefined>(
+        ['marketplace-installed', result.type],
+        (view) => applyInstallResultToInstalledView({
+          view,
+          request: variables,
+          result
+        })
+      );
+      queryClient.invalidateQueries({
+        queryKey: ['marketplace-installed', result.type],
+        refetchType: 'inactive'
+      });
       if (result.type === 'plugin') {
         queryClient.invalidateQueries({ queryKey: ['ncp-session-types'] });
       }
@@ -81,9 +100,19 @@ export function useManageMarketplaceItem() {
 
   return useMutation({
     mutationFn: (request: MarketplaceManageRequest) => manageMarketplaceItem(request),
-    onSuccess: (result) => {
-      queryClient.invalidateQueries({ queryKey: ['marketplace-installed', result.type] });
-      queryClient.invalidateQueries({ queryKey: ['marketplace-items'] });
+    onSuccess: (result, variables) => {
+      queryClient.setQueryData<MarketplaceInstalledView | undefined>(
+        ['marketplace-installed', result.type],
+        (view) => applyManageResultToInstalledView({
+          view,
+          request: variables,
+          result
+        })
+      );
+      queryClient.invalidateQueries({
+        queryKey: ['marketplace-installed', result.type],
+        refetchType: 'inactive'
+      });
       if (result.type === 'plugin') {
         queryClient.invalidateQueries({ queryKey: ['ncp-session-types'] });
       }

package/src/hooks/useMcpMarketplace.ts

@@ -0,0 +1,99 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import {
+  doctorMcpMarketplaceItem,
+  fetchMcpMarketplaceContent,
+  fetchMcpMarketplaceInstalled,
+  fetchMcpMarketplaceItem,
+  fetchMcpMarketplaceItems,
+  fetchMcpMarketplaceRecommendations,
+  installMcpMarketplaceItem,
+  manageMcpMarketplaceItem,
+  type McpMarketplaceListParams
+} from '@/api/mcp-marketplace';
+import { t } from '@/lib/i18n';
+
+export function useMcpMarketplaceItems(params: McpMarketplaceListParams) {
+  return useQuery({
+    queryKey: ['marketplace-mcp-items', params],
+    queryFn: () => fetchMcpMarketplaceItems(params),
+    staleTime: 15_000
+  });
+}
+
+export function useMcpMarketplaceInstalled() {
+  return useQuery({
+    queryKey: ['marketplace-mcp-installed'],
+    queryFn: () => fetchMcpMarketplaceInstalled(),
+    staleTime: 10_000
+  });
+}
+
+export function useMcpMarketplaceItem(slug: string | null) {
+  return useQuery({
+    queryKey: ['marketplace-mcp-item', slug],
+    queryFn: () => fetchMcpMarketplaceItem(slug as string),
+    enabled: Boolean(slug),
+    staleTime: 30_000
+  });
+}
+
+export function useMcpMarketplaceContent(slug: string | null) {
+  return useQuery({
+    queryKey: ['marketplace-mcp-content', slug],
+    queryFn: () => fetchMcpMarketplaceContent(slug as string),
+    enabled: Boolean(slug),
+    staleTime: 30_000
+  });
+}
+
+export function useMcpMarketplaceRecommendations(params: { scene?: string; limit?: number }) {
+  return useQuery({
+    queryKey: ['marketplace-mcp-recommendations', params],
+    queryFn: () => fetchMcpMarketplaceRecommendations(params),
+    staleTime: 30_000
+  });
+}
+
+export function useInstallMcpMarketplaceItem() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: installMcpMarketplaceItem,
+    onSuccess: (result) => {
+      queryClient.invalidateQueries({ queryKey: ['marketplace-mcp-installed'] });
+      queryClient.invalidateQueries({ queryKey: ['marketplace-mcp-items'] });
+      queryClient.invalidateQueries({ queryKey: ['marketplace-mcp-doctor'] });
+      toast.success(result.message || t('marketplaceInstallSuccessMcp'));
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || t('marketplaceInstallFailed'));
+    }
+  });
+}
+
+export function useManageMcpMarketplaceItem() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: manageMcpMarketplaceItem,
+    onSuccess: (result: { message?: string }) => {
+      queryClient.invalidateQueries({ queryKey: ['marketplace-mcp-installed'] });
+      queryClient.invalidateQueries({ queryKey: ['marketplace-mcp-items'] });
+      queryClient.invalidateQueries({ queryKey: ['marketplace-mcp-doctor'] });
+      toast.success(result.message || t('marketplaceMcpManageSuccess'));
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || t('marketplaceOperationFailed'));
+    }
+  });
+}
+
+export function useDoctorMcpMarketplaceItem(name: string | null) {
+  return useQuery({
+    queryKey: ['marketplace-mcp-doctor', name],
+    queryFn: () => doctorMcpMarketplaceItem(name as string),
+    enabled: Boolean(name),
+    staleTime: 15_000
+  });
+}
+
+export { fetchMcpMarketplaceContent };