@nextclaw/ui 0.12.10 → 0.12.11

package/src/components/config/runtime-control-card.tsx

@@ -1,5 +1,3 @@
-import { useState } from 'react';
-import { useQueryClient } from '@tanstack/react-query';
 import type {
   RuntimeActionCapability,
   RuntimeControlAction,
@@ -9,9 +7,11 @@ import type {
 } from '@/api/runtime-control.types';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { useRuntimeControl, useRuntimeServiceAction } from '@/hooks/use-runtime-control';
 import { t } from '@/lib/i18n';
-import { runtimeControlManager } from '@/runtime-control/runtime-control.manager';
+import {
+  useRuntimeControlPanelView,
+  systemStatusManager,
+} from '@/features/system-status';
 import { Loader2, RotateCw, Square, Play } from 'lucide-react';
 import { toast } from 'sonner';
 
@@ -117,19 +117,6 @@ function resolveVisibleActions(controlView: RuntimeControlView | undefined): Vis
   return actions.filter((item) => item.capability.available || Boolean(item.capability.reasonIfUnavailable));
 }
 
-function resolveActionHelp(action: RuntimeControlAction): string {
-  if (action === 'start-service') {
-    return t('runtimeControlStartingServiceHelp');
-  }
-  if (action === 'restart-service') {
-    return t('runtimeControlRestartingServiceHelp');
-  }
-  if (action === 'stop-service') {
-    return t('runtimeControlStoppingServiceHelp');
-  }
-  return t('runtimeControlRestartingAppHelp');
-}
-
 function RuntimeActionIcon(props: { icon: VisibleRuntimeAction['icon']; busy: boolean }) {
   const { busy, icon } = props;
   if (busy) {
@@ -145,28 +132,17 @@ function RuntimeActionIcon(props: { icon: VisibleRuntimeAction['icon']; busy: bo
 }
 
 export function RuntimeControlCard() {
-  const queryClient = useQueryClient();
-  const runtimeControlQuery = useRuntimeControl();
-  const serviceActionMutation = useRuntimeServiceAction();
-  const [localLifecycle, setLocalLifecycle] = useState<RuntimeLifecycleState | null>(null);
-  const [localServiceState, setLocalServiceState] = useState<RuntimeServiceState | null>(null);
-  const [localMessage, setLocalMessage] = useState<string | null>(null);
-  const [busyAction, setBusyAction] = useState<RuntimeControlAction | null>(null);
-
-  const controlView = runtimeControlQuery.data;
-  const displayedLifecycle = localLifecycle ?? controlView?.lifecycle ?? 'healthy';
-  const displayedServiceState = localServiceState ?? controlView?.serviceState ?? 'unknown';
-  const displayedMessage = localMessage ?? controlView?.message ?? t('runtimeControlDescription');
-  const busy = serviceActionMutation.isPending || busyAction !== null || displayedLifecycle === 'recovering';
-  const visibleActions = resolveVisibleActions(controlView);
-  const pendingRestart = controlView?.pendingRestart ?? null;
-
-  const resetLocalState = () => {
-    setLocalLifecycle(null);
-    setLocalServiceState(null);
-    setLocalMessage(null);
-    setBusyAction(null);
-  };
+  const {
+    busy,
+    busyAction,
+    controlView,
+    errorMessage,
+    pendingRestart,
+    visibleLifecycle: displayedLifecycle,
+    visibleMessage: displayedMessage,
+    visibleServiceState: displayedServiceState,
+  } = useRuntimeControlPanelView();
+  const visibleActions = resolveVisibleActions(controlView ?? undefined);
 
   const handleServiceAction = async (action: Extract<RuntimeControlAction, 'start-service' | 'restart-service' | 'stop-service'>) => {
     const capability = action === 'start-service'
@@ -183,30 +159,11 @@ export function RuntimeControlCard() {
       return;
     }
 
-    setBusyAction(action);
-    setLocalLifecycle(action === 'start-service' ? 'starting-service' : action === 'stop-service' ? 'stopping-service' : 'restarting-service');
-    setLocalServiceState(action === 'start-service' ? 'starting' : action === 'stop-service' ? 'stopping' : 'restarting');
-    setLocalMessage(resolveActionHelp(action));
-
     try {
-      const result = await serviceActionMutation.mutateAsync(action);
+      const result = await systemStatusManager.runRuntimeControlAction(action);
       toast.success(result.message);
-      if (action === 'stop-service') {
-        return;
-      }
-      setLocalLifecycle('recovering');
-      setLocalMessage(t('runtimeControlRecoveringHelp'));
-      const recoveredView = await runtimeControlManager.waitForRecovery();
-      queryClient.setQueryData(['runtime-control'], recoveredView);
-      await queryClient.invalidateQueries({ queryKey: ['runtime-control'] });
-      resetLocalState();
-      toast.success(t('runtimeControlRecovered'));
     } catch (error) {
       const message = error instanceof Error ? error.message : t('runtimeControlActionFailed');
-      setLocalLifecycle('failed');
-      setLocalServiceState(action === 'stop-service' ? 'running' : 'unknown');
-      setLocalMessage(message);
-      setBusyAction(null);
       toast.error(`${t('runtimeControlActionFailed')}: ${message}`);
     }
   };
@@ -220,18 +177,11 @@ export function RuntimeControlCard() {
       return;
     }
 
-    setBusyAction('restart-app');
-    setLocalLifecycle('restarting-app');
-    setLocalMessage(t('runtimeControlRestartingAppHelp'));
-
     try {
-      const result = await runtimeControlManager.restartApp();
+      const result = await systemStatusManager.runRuntimeControlAction('restart-app');
       toast.success(result.message);
     } catch (error) {
       const message = error instanceof Error ? error.message : t('runtimeControlActionFailed');
-      setLocalLifecycle('failed');
-      setLocalMessage(message);
-      setBusyAction(null);
       toast.error(`${t('runtimeControlActionFailed')}: ${message}`);
     }
   };
@@ -255,9 +205,9 @@ export function RuntimeControlCard() {
           {controlView?.managementHint ? (
             <p className="text-xs text-gray-500">{controlView.managementHint}</p>
           ) : null}
-          {runtimeControlQuery.isError && !busy ? (
+          {errorMessage && !busy ? (
             <p className="text-sm text-amber-700">
-              {runtimeControlQuery.error instanceof Error ? runtimeControlQuery.error.message : t('runtimeControlLoadFailed')}
+              {errorMessage}
             </p>
           ) : null}
         </div>
@@ -272,7 +222,7 @@ export function RuntimeControlCard() {
                   {t('runtimeControlPendingRestartPaths')}
                 </div>
                 <div className="flex flex-wrap gap-2">
-                  {pendingRestart.changedPaths.map((path) => (
+                  {pendingRestart.changedPaths.map((path: string) => (
                     <span
                       key={path}
                       className="rounded-full border border-amber-200 bg-white px-2.5 py-1 text-xs text-amber-800"

package/src/components/config/runtime-presence-card.test.tsx

@@ -2,17 +2,17 @@ import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { RuntimePresenceCard } from '@/components/config/runtime-presence-card';
-import { useDesktopPresenceStore } from '@/desktop/stores/desktop-presence.store';
 import { setLanguage } from '@/lib/i18n';
+import { useDesktopPresenceStore } from '@/platforms/desktop';
 
 const mocks = vi.hoisted(() => ({
-  useRuntimeControl: vi.fn(),
+  useSystemStatus: vi.fn(),
   toastSuccess: vi.fn(),
   toastError: vi.fn()
 }));
 
-vi.mock('@/hooks/use-runtime-control', () => ({
-  useRuntimeControl: (...args: unknown[]) => mocks.useRuntimeControl(...args)
+vi.mock('@/features/system-status', () => ({
+  useSystemStatus: (...args: unknown[]) => mocks.useSystemStatus(...args)
 }));
 
 vi.mock('sonner', () => ({
@@ -32,8 +32,8 @@ describe('RuntimePresenceCard', () => {
       busyAction: null,
       snapshot: null
     });
-    mocks.useRuntimeControl.mockReturnValue({
-      data: {
+    mocks.useSystemStatus.mockReturnValue({
+      runtimeControlView: {
         environment: 'managed-local-service',
         lifecycle: 'healthy',
         serviceState: 'running',
@@ -61,9 +61,7 @@ describe('RuntimePresenceCard', () => {
           reasonIfUnavailable: 'desktop only'
         },
         managementHint: 'managed service hint'
-      },
-      isError: false,
-      error: null
+      }
     });
     window.nextclawDesktop = undefined;
   });
@@ -106,8 +104,8 @@ describe('RuntimePresenceCard', () => {
       onUpdateStateChanged: vi.fn(() => () => {})
     };
 
-    mocks.useRuntimeControl.mockReturnValue({
-      data: {
+    mocks.useSystemStatus.mockReturnValue({
+      runtimeControlView: {
         environment: 'desktop-embedded',
         lifecycle: 'healthy',
         serviceState: 'running',
@@ -133,9 +131,7 @@ describe('RuntimePresenceCard', () => {
           impact: 'full-app-relaunch'
         },
         managementHint: 'desktop hint'
-      },
-      isError: false,
-      error: null
+      }
     });
 
     render(<RuntimePresenceCard />);

package/src/components/config/runtime-presence-card.tsx

@@ -9,9 +9,11 @@ import {
 import { NoticeCard } from "@/components/ui/notice-card";
 import { SettingRow } from "@/components/ui/setting-row";
 import { Switch } from "@/components/ui/switch";
-import { desktopPresenceManager } from "@/desktop/managers/desktop-presence.manager";
-import { useDesktopPresenceStore } from "@/desktop/stores/desktop-presence.store";
-import { useRuntimeControl } from "@/hooks/use-runtime-control";
+import {
+  desktopPresenceManager,
+  useDesktopPresenceStore,
+} from "@/platforms/desktop";
+import { useSystemStatus } from "@/features/system-status";
 import { t } from "@/lib/i18n";
 
 function PresenceHint(props: { title: string; description: string }) {
@@ -20,8 +22,8 @@ function PresenceHint(props: { title: string; description: string }) {
 }
 
 export function RuntimePresenceCard() {
-  const runtimeControlQuery = useRuntimeControl();
-  const environment = runtimeControlQuery.data?.environment;
+  const systemStatus = useSystemStatus();
+  const environment = systemStatus.runtimeControlView?.environment;
   const supported = useDesktopPresenceStore((state) => state.supported);
   const initialized = useDesktopPresenceStore((state) => state.initialized);
   const busyAction = useDesktopPresenceStore((state) => state.busyAction);

package/src/components/layout/Sidebar.tsx

@@ -9,8 +9,8 @@ import { SidebarActionItem, SidebarNavLinkItem, SidebarSelectItem } from '@/comp
 import { useI18n } from '@/components/providers/I18nProvider';
 import { useTheme } from '@/components/providers/ThemeProvider';
 import { SelectItem } from '@/components/ui/select';
-import { useRemoteStatus } from '@/hooks/useRemoteAccess';
-import { useAppPresenter } from '@/presenter/app-presenter-context';
+import { useAppManager } from '@/app/components/app-manager-provider';
+import { useRemoteStatus } from '@/features/remote';
 
 type SidebarMode = 'main' | 'settings';
 
@@ -19,7 +19,7 @@ type SidebarProps = {
 };
 
 export function Sidebar({ mode }: SidebarProps) {
-  const presenter = useAppPresenter();
+  const manager = useAppManager();
   const docBrowser = useDocBrowser();
   const remoteStatus = useRemoteStatus();
   const { language, setLanguage } = useI18n();
@@ -182,7 +182,7 @@ export function Sidebar({ mode }: SidebarProps) {
         <div className={cn('shrink-0 border-t border-[#dde0ea] bg-secondary', isSettingsMode ? 'mt-2 pt-3' : 'mt-3 pt-3')}>
           {isSettingsMode ? (
             <SidebarActionItem
-              onClick={() => presenter.accountManager.openAccountPanel()}
+              onClick={() => manager.accountManager.openAccountPanel()}
               icon={KeyRound}
               label={t('remoteAccountEntryManage')}
               density="compact"

package/src/components/layout/runtime-status-entry.test.tsx

@@ -1,40 +1,31 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import type { ReactNode } from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { toast } from 'sonner';
 import { RuntimeStatusEntry } from '@/components/layout/runtime-status-entry';
 import { setLanguage } from '@/lib/i18n';
 
 const mocks = vi.hoisted(() => ({
-  useRuntimeControl: vi.fn(),
-  controlService: vi.fn()
+  useRuntimeStatusBadgeView: vi.fn(),
+  runRuntimeControlAction: vi.fn(),
 }));
 
 vi.mock('sonner', () => ({
   toast: {
     success: vi.fn(),
-    error: vi.fn()
-  }
+    error: vi.fn(),
+  },
 }));
 
-vi.mock('@/hooks/use-runtime-control', () => ({
-  useRuntimeControl: (...args: unknown[]) => mocks.useRuntimeControl(...args)
+vi.mock('@/features/system-status', () => ({
+  useRuntimeStatusBadgeView: (...args: unknown[]) =>
+    mocks.useRuntimeStatusBadgeView(...args),
+  systemStatusManager: {
+    runRuntimeControlAction: (...args: unknown[]) =>
+      mocks.runRuntimeControlAction(...args),
+  },
 }));
 
-vi.mock('@/runtime-control/runtime-control.manager', () => ({
-  runtimeControlManager: {
-    controlService: (...args: unknown[]) => mocks.controlService(...args)
-  }
-}));
-
-function createWrapper(queryClient: QueryClient) {
-  return function Wrapper({ children }: { children: ReactNode }) {
-    return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
-  };
-}
-
 describe('RuntimeStatusEntry', () => {
   beforeEach(() => {
     setLanguage('zh');
@@ -42,112 +33,65 @@ describe('RuntimeStatusEntry', () => {
   });
 
   it('shows a compact pending-restart entry with reasons and a restart action', async () => {
-    const queryClient = new QueryClient();
     const user = userEvent.setup();
-    const invalidateQueriesSpy = vi.spyOn(queryClient, 'invalidateQueries');
-
-    mocks.useRuntimeControl.mockReturnValue({
-      data: {
-        environment: 'managed-local-service',
-        lifecycle: 'healthy',
-        serviceState: 'running',
-        message: 'runtime healthy',
-        pendingRestart: {
-          changedPaths: ['plugins', 'ui'],
-          message: 'Saved changes are waiting for a manual restart.',
-          reasons: ['config reload requires restart: plugins, ui'],
-          requestedAt: '2026-04-17T12:00:00.000Z'
-        },
-        canStartService: {
-          available: false,
-          requiresConfirmation: false,
-          impact: 'brief-ui-disconnect'
-        },
-        canRestartService: {
-          available: true,
-          requiresConfirmation: false,
-          impact: 'brief-ui-disconnect'
-        },
-        canStopService: {
-          available: true,
-          requiresConfirmation: true,
-          impact: 'brief-ui-disconnect'
-        },
-        canRestartApp: {
-          available: false,
-          requiresConfirmation: true,
-          impact: 'full-app-relaunch'
-        }
-      },
-      isError: false,
-      error: null
+
+    mocks.useRuntimeStatusBadgeView.mockReturnValue({
+      tone: 'attention',
+      title: '待重启',
+      description:
+        '这些改动已经保存，但不会自动重启。你可以在这里查看原因，并在方便的时候手动重启。',
+      reasonLines: [
+        'plugins 改动将在重启后生效。',
+        'ui 改动将在重启后生效。',
+      ],
+      actionLabel: '立即重启',
+      isBusy: false,
     });
-    mocks.controlService.mockResolvedValue({
+    mocks.runRuntimeControlAction.mockResolvedValue({
       accepted: true,
       action: 'restart-service',
       lifecycle: 'restarting-service',
-      message: 'Restart scheduled. This page may disconnect for a few seconds.'
+      message: 'Restart scheduled. This page may disconnect for a few seconds.',
     });
 
-    render(<RuntimeStatusEntry />, {
-      wrapper: createWrapper(queryClient)
-    });
+    render(<RuntimeStatusEntry />);
 
     await user.click(screen.getByTestId('runtime-status-entry'));
 
     expect(screen.getByText('待重启')).toBeTruthy();
-    expect(screen.getByText('这些改动已经保存，但不会自动重启。你可以在这里查看原因，并在方便的时候手动重启。')).toBeTruthy();
+    expect(
+      screen.getByText(
+        '这些改动已经保存，但不会自动重启。你可以在这里查看原因，并在方便的时候手动重启。'
+      )
+    ).toBeTruthy();
     expect(screen.getByText('plugins 改动将在重启后生效。')).toBeTruthy();
     expect(screen.getByText('ui 改动将在重启后生效。')).toBeTruthy();
 
     await user.click(screen.getByRole('button', { name: '立即重启' }));
 
     await waitFor(() => {
-      expect(mocks.controlService).toHaveBeenCalledWith('restart-service');
+      expect(mocks.runRuntimeControlAction).toHaveBeenCalledWith(
+        'restart-service'
+      );
     });
-    expect(toast.success).toHaveBeenCalledWith('Restart scheduled. This page may disconnect for a few seconds.');
-    expect(invalidateQueriesSpy).toHaveBeenCalledWith({ queryKey: ['runtime-control'] });
+    expect(toast.success).toHaveBeenCalledWith(
+      'Restart scheduled. This page may disconnect for a few seconds.'
+    );
   });
 
   it('shows a healthy status without restart controls when no action is needed', async () => {
-    const queryClient = new QueryClient();
     const user = userEvent.setup();
 
-    mocks.useRuntimeControl.mockReturnValue({
-      data: {
-        environment: 'managed-local-service',
-        lifecycle: 'healthy',
-        serviceState: 'running',
-        message: 'runtime healthy',
-        pendingRestart: null,
-        canStartService: {
-          available: false,
-          requiresConfirmation: false,
-          impact: 'brief-ui-disconnect'
-        },
-        canRestartService: {
-          available: true,
-          requiresConfirmation: false,
-          impact: 'brief-ui-disconnect'
-        },
-        canStopService: {
-          available: true,
-          requiresConfirmation: true,
-          impact: 'brief-ui-disconnect'
-        },
-        canRestartApp: {
-          available: false,
-          requiresConfirmation: true,
-          impact: 'full-app-relaunch'
-        }
-      },
-      isError: false,
-      error: null
+    mocks.useRuntimeStatusBadgeView.mockReturnValue({
+      tone: 'healthy',
+      title: '系统正常',
+      description: '所有系统状态都正常。',
+      reasonLines: [],
+      actionLabel: null,
+      isBusy: false,
     });
 
-    render(<RuntimeStatusEntry />, {
-      wrapper: createWrapper(queryClient)
-    });
+    render(<RuntimeStatusEntry />);
 
     await user.click(screen.getByTestId('runtime-status-entry'));
 

package/src/components/layout/runtime-status-entry.tsx

@@ -1,8 +1,8 @@
-import { useState } from 'react';
-import { useQueryClient } from '@tanstack/react-query';
-import { useRuntimeControl } from '@/hooks/use-runtime-control';
-import { runtimeControlManager } from '@/runtime-control/runtime-control.manager';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import {
+  systemStatusManager,
+  useRuntimeStatusBadgeView,
+} from '@/features/system-status';
 import { t } from '@/lib/i18n';
 import { cn } from '@/lib/utils';
 import { toast } from 'sonner';
@@ -21,72 +21,24 @@ type RuntimeStatusSummary = {
   reasonLines: string[];
   title: string;
   tone: RuntimeStatusTone;
+  isBusy: boolean;
 };
 
-function buildRuntimeStatusSummary(
-  view: ReturnType<typeof useRuntimeControl>['data']
-): RuntimeStatusSummary {
-  if (!view) {
-    return {
-      tone: 'inactive',
-      title: t('runtimeStatusLoadingTitle'),
-      description: t('runtimeStatusLoadingDescription'),
-      reasonLines: [],
-      actionLabel: null
-    };
-  }
-
-  if (view.pendingRestart) {
-    return {
-      tone: 'attention',
-      title: t('runtimeStatusPendingRestartTitle'),
-      description: t('runtimeStatusPendingRestartDescription'),
-      reasonLines:
-        view.pendingRestart.changedPaths.length > 0
-          ? view.pendingRestart.changedPaths.map((path) =>
-              t('runtimeStatusPendingRestartReasonItem').replace('{path}', path)
-            )
-          : [view.pendingRestart.message],
-      actionLabel: view.canRestartService.available ? t('runtimeStatusRestartAction') : null
-    };
-  }
-
-  return {
-    tone: view.lifecycle === 'healthy' ? 'healthy' : 'inactive',
-    title: t('runtimeStatusHealthyTitle'),
-    description: t('runtimeStatusHealthyDescription'),
-    reasonLines: [],
-    actionLabel: null
-  };
-}
-
 export function RuntimeStatusEntry() {
-  const queryClient = useQueryClient();
-  const runtimeControlQuery = useRuntimeControl();
-  const [isRestarting, setIsRestarting] = useState(false);
-  const runtimeView = runtimeControlQuery.data;
-  const summary = buildRuntimeStatusSummary(runtimeView);
-  const title = runtimeControlQuery.isError ? t('runtimeControlLoadFailed') : summary.title;
-  const description =
-    runtimeControlQuery.isError && runtimeControlQuery.error instanceof Error
-      ? runtimeControlQuery.error.message
-      : summary.description;
-  const canRestart = Boolean(runtimeView?.pendingRestart && runtimeView.canRestartService.available);
+  const summary = useRuntimeStatusBadgeView() as RuntimeStatusSummary;
+  const canRestart = summary.actionLabel === t('runtimeStatusRestartAction');
 
   const handleRestart = async () => {
     if (!canRestart) {
       return;
     }
-    setIsRestarting(true);
     try {
-      const result = await runtimeControlManager.controlService('restart-service');
+      const result =
+        await systemStatusManager.runRuntimeControlAction('restart-service');
       toast.success(result.message);
-      await queryClient.invalidateQueries({ queryKey: ['runtime-control'] });
     } catch (error) {
       const message = error instanceof Error ? error.message : t('runtimeControlActionFailed');
       toast.error(`${t('runtimeControlActionFailed')}: ${message}`);
-    } finally {
-      setIsRestarting(false);
     }
   };
 
@@ -96,8 +48,8 @@ export function RuntimeStatusEntry() {
         <button
           type="button"
           className="inline-flex items-center justify-center rounded-full p-0.5 transition-transform hover:scale-105"
-          aria-label={title}
-          title={title}
+          aria-label={summary.title}
+          title={summary.title}
           data-testid="runtime-status-entry"
         >
           <span className={cn('h-2.5 w-2.5 rounded-full', runtimeStatusToneStyles[summary.tone])} />
@@ -109,8 +61,8 @@ export function RuntimeStatusEntry() {
         className="w-[290px] space-y-3 rounded-2xl border border-gray-200 bg-white p-4"
       >
         <div className="space-y-1">
-          <div className="text-sm font-semibold text-gray-900">{title}</div>
-          <p className="text-xs leading-5 text-gray-600">{description}</p>
+          <div className="text-sm font-semibold text-gray-900">{summary.title}</div>
+          <p className="text-xs leading-5 text-gray-600">{summary.description}</p>
         </div>
         {summary.reasonLines.length > 0 ? (
           <div className="space-y-2">
@@ -130,10 +82,10 @@ export function RuntimeStatusEntry() {
             <button
               type="button"
               onClick={() => void handleRestart()}
-              disabled={isRestarting}
+              disabled={summary.isBusy}
               className="text-sm font-semibold text-sky-600 transition-colors hover:text-sky-700 disabled:text-gray-400"
             >
-              {isRestarting ? t('runtimeStatusRestartingAction') : summary.actionLabel}
+              {summary.isBusy ? t('runtimeStatusRestartingAction') : summary.actionLabel}
             </button>
           </div>
         ) : null}

package/src/components/layout/sidebar.layout.test.tsx

@@ -22,17 +22,23 @@ vi.mock('@/components/doc-browser', () => ({
   })
 }));
 
-vi.mock('@/presenter/app-presenter-context', () => ({
-  useAppPresenter: () => ({
+vi.mock('@/app/components/app-manager-provider', () => ({
+  useAppManager: () => ({
     accountManager: {
       openAccountPanel: mocks.openAccountPanel
     }
   })
 }));
 
-vi.mock('@/hooks/useRemoteAccess', () => ({
-  useRemoteStatus: () => mocks.remoteStatus
-}));
+vi.mock('@/features/remote', async () => {
+  const actual = await vi.importActual<typeof import('@/features/remote')>(
+    '@/features/remote'
+  );
+  return {
+    ...actual,
+    useRemoteStatus: () => mocks.remoteStatus
+  };
+});
 
 vi.mock('@/components/providers/I18nProvider', () => ({
   useI18n: () => ({