@nextclaw/ui 0.12.9 → 0.12.11

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

@@ -1,17 +1,44 @@
-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 { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { toast } from 'sonner';
 import { RuntimeControlCard } from '@/components/config/runtime-control-card';
 import { setLanguage } from '@/lib/i18n';
 
+const baseControlView = {
+  environment: 'managed-local-service' as const,
+  lifecycle: 'healthy' as const,
+  serviceState: 'running' as const,
+  message: 'runtime healthy',
+  pendingRestart: null,
+  canStartService: {
+    available: false,
+    requiresConfirmation: false,
+    impact: 'brief-ui-disconnect' as const,
+    reasonIfUnavailable: '当前页面已经由运行中的本地服务托管。',
+  },
+  canRestartService: {
+    available: true,
+    requiresConfirmation: false,
+    impact: 'brief-ui-disconnect' as const,
+  },
+  canStopService: {
+    available: true,
+    requiresConfirmation: true,
+    impact: 'brief-ui-disconnect' as const,
+  },
+  canRestartApp: {
+    available: false,
+    requiresConfirmation: true,
+    impact: 'full-app-relaunch' as const,
+    reasonIfUnavailable: 'desktop only',
+  },
+  managementHint: 'This page is served by the running local service.',
+};
+
 const mocks = vi.hoisted(() => ({
-  useRuntimeControl: vi.fn(),
-  useRuntimeServiceAction: vi.fn(),
-  waitForRecovery: vi.fn(),
-  restartApp: vi.fn(),
+  useRuntimeControlPanelView: vi.fn(),
+  runRuntimeControlAction: vi.fn(),
 }));
 
 vi.mock('sonner', () => ({
@@ -21,104 +48,28 @@ vi.mock('sonner', () => ({
   },
 }));
 
-vi.mock('@/hooks/use-runtime-control', () => ({
-  useRuntimeControl: (...args: unknown[]) => mocks.useRuntimeControl(...args),
-  useRuntimeServiceAction: (...args: unknown[]) => mocks.useRuntimeServiceAction(...args),
-}));
-
-vi.mock('@/runtime-control/runtime-control.manager', () => ({
-  runtimeControlManager: {
-    waitForRecovery: (...args: unknown[]) => mocks.waitForRecovery(...args),
-    restartApp: (...args: unknown[]) => mocks.restartApp(...args),
+vi.mock('@/features/system-status', () => ({
+  useRuntimeControlPanelView: (...args: unknown[]) =>
+    mocks.useRuntimeControlPanelView(...args),
+  systemStatusManager: {
+    runRuntimeControlAction: (...args: unknown[]) =>
+      mocks.runRuntimeControlAction(...args),
   },
 }));
 
-function createWrapper(queryClient: QueryClient) {
-  return function Wrapper({ children }: { children: ReactNode }) {
-    return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
-  };
-}
-
 describe('RuntimeControlCard', () => {
   beforeEach(() => {
     setLanguage('zh');
     vi.clearAllMocks();
-    mocks.useRuntimeControl.mockReturnValue({
-      data: {
-        environment: 'managed-local-service',
-        lifecycle: 'healthy',
-        serviceState: 'running',
-        message: 'runtime healthy',
-        canStartService: {
-          available: false,
-          requiresConfirmation: false,
-          impact: 'brief-ui-disconnect',
-          reasonIfUnavailable: '当前页面已经由运行中的本地服务托管。'
-        },
-        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',
-          reasonIfUnavailable: 'desktop only',
-        },
-        managementHint: 'This page is served by the running local service.'
-      },
-      isError: false,
-      error: null,
-    });
-    mocks.useRuntimeServiceAction.mockReturnValue({
-      mutateAsync: vi.fn().mockResolvedValue({
-        accepted: true,
-        action: 'restart-service',
-        lifecycle: 'restarting-service',
-        message: 'Restart scheduled. This page may disconnect for a few seconds.',
-      }),
-      isPending: false,
-    });
-    mocks.waitForRecovery.mockResolvedValue({
-      environment: 'managed-local-service',
-      lifecycle: 'healthy',
-      serviceState: 'running',
-      message: 'runtime healthy',
-      canStartService: {
-        available: false,
-        requiresConfirmation: false,
-        impact: 'brief-ui-disconnect',
-        reasonIfUnavailable: '当前页面已经由运行中的本地服务托管。'
-      },
-      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',
-        reasonIfUnavailable: 'desktop only',
-      },
-      managementHint: 'This page is served by the running local service.'
-    });
-    mocks.restartApp.mockResolvedValue({
-      accepted: true,
-      action: 'restart-app',
-      lifecycle: 'restarting-app',
-      message: 'NextClaw app restart scheduled.',
+    mocks.useRuntimeControlPanelView.mockReturnValue({
+      controlView: baseControlView,
+      visibleLifecycle: 'healthy',
+      visibleServiceState: 'running',
+      visibleMessage: 'runtime healthy',
+      busyAction: null,
+      busy: false,
+      pendingRestart: null,
+      errorMessage: null,
     });
   });
 
@@ -127,14 +78,15 @@ describe('RuntimeControlCard', () => {
   });
 
   it('renders service management actions from the current capability view', () => {
-    const queryClient = new QueryClient();
+    render(<RuntimeControlCard />);
 
-    render(<RuntimeControlCard />, {
-      wrapper: createWrapper(queryClient),
-    });
+    const startButton = screen.getByRole('button', {
+      name: '启动服务',
+    }) as HTMLButtonElement;
+    const restartAppButton = screen.getByRole('button', {
+      name: '重启应用',
+    }) as HTMLButtonElement;
 
-    const startButton = screen.getByRole('button', { name: '启动服务' }) as HTMLButtonElement;
-    const restartAppButton = screen.getByRole('button', { name: '重启应用' }) as HTMLButtonElement;
     expect(screen.getByText('服务管理')).toBeTruthy();
     expect(screen.getByText('服务运行中')).toBeTruthy();
     expect(screen.getByRole('button', { name: '重启服务' })).toBeTruthy();
@@ -144,84 +96,61 @@ describe('RuntimeControlCard', () => {
     expect(screen.getByText('desktop only')).toBeTruthy();
   });
 
-  it('runs the restart service flow and waits for recovery', async () => {
-    const queryClient = new QueryClient();
+  it('runs the restart service flow through the system status manager', async () => {
     const user = userEvent.setup();
-    const invalidateQueriesSpy = vi.spyOn(queryClient, 'invalidateQueries');
-    const mutateAsync = vi.fn().mockResolvedValue({
+    mocks.runRuntimeControlAction.mockResolvedValue({
       accepted: true,
       action: 'restart-service',
       lifecycle: 'restarting-service',
       message: 'Restart scheduled. This page may disconnect for a few seconds.',
     });
-    mocks.useRuntimeServiceAction.mockReturnValue({
-      mutateAsync,
-      isPending: false,
-    });
 
-    render(<RuntimeControlCard />, {
-      wrapper: createWrapper(queryClient),
-    });
+    render(<RuntimeControlCard />);
 
     await user.click(screen.getByRole('button', { name: '重启服务' }));
 
     await waitFor(() => {
-      expect(mutateAsync).toHaveBeenCalledWith('restart-service');
-      expect(mocks.waitForRecovery).toHaveBeenCalledTimes(1);
+      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('runs the stop service flow after confirmation', async () => {
-    const queryClient = new QueryClient();
     const user = userEvent.setup();
-    const mutateAsync = vi.fn().mockResolvedValue({
+    const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true);
+    mocks.runRuntimeControlAction.mockResolvedValue({
       accepted: true,
       action: 'stop-service',
       lifecycle: 'stopping-service',
       message: 'Stop scheduled. This page will disconnect shortly.',
     });
-    mocks.useRuntimeServiceAction.mockReturnValue({
-      mutateAsync,
-      isPending: false,
-    });
-    const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true);
 
-    render(<RuntimeControlCard />, {
-      wrapper: createWrapper(queryClient),
-    });
+    render(<RuntimeControlCard />);
 
     await user.click(screen.getByRole('button', { name: '停止服务' }));
 
     await waitFor(() => {
       expect(confirmSpy).toHaveBeenCalledTimes(1);
-      expect(mutateAsync).toHaveBeenCalledWith('stop-service');
+      expect(mocks.runRuntimeControlAction).toHaveBeenCalledWith(
+        'stop-service'
+      );
     });
-    expect(mocks.waitForRecovery).not.toHaveBeenCalled();
-    expect(toast.success).toHaveBeenCalledWith('Stop scheduled. This page will disconnect shortly.');
+    expect(toast.success).toHaveBeenCalledWith(
+      'Stop scheduled. This page will disconnect shortly.'
+    );
   });
 
   it('runs the desktop restart app flow after confirmation', async () => {
-    const queryClient = new QueryClient();
     const user = userEvent.setup();
-
-    mocks.useRuntimeControl.mockReturnValue({
-      data: {
+    const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true);
+    mocks.useRuntimeControlPanelView.mockReturnValue({
+      controlView: {
+        ...baseControlView,
         environment: 'desktop-embedded',
-        lifecycle: 'healthy',
-        serviceState: 'running',
-        message: 'runtime healthy',
-        canStartService: {
-          available: false,
-          requiresConfirmation: false,
-          impact: 'none',
-        },
-        canRestartService: {
-          available: true,
-          requiresConfirmation: false,
-          impact: 'brief-ui-disconnect',
-        },
         canStopService: {
           available: false,
           requiresConfirmation: true,
@@ -232,24 +161,73 @@ describe('RuntimeControlCard', () => {
           requiresConfirmation: true,
           impact: 'full-app-relaunch',
         },
-        managementHint: 'desktop launcher hint'
+        managementHint: 'desktop launcher hint',
       },
-      isError: false,
-      error: null,
+      visibleLifecycle: 'healthy',
+      visibleServiceState: 'running',
+      visibleMessage: 'runtime healthy',
+      busyAction: null,
+      busy: false,
+      pendingRestart: null,
+      errorMessage: null,
+    });
+    mocks.runRuntimeControlAction.mockResolvedValue({
+      accepted: true,
+      action: 'restart-app',
+      lifecycle: 'restarting-app',
+      message: 'NextClaw app restart scheduled.',
     });
 
-    const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true);
-
-    render(<RuntimeControlCard />, {
-      wrapper: createWrapper(queryClient),
-    });
+    render(<RuntimeControlCard />);
 
     await user.click(screen.getByRole('button', { name: '重启应用' }));
 
     await waitFor(() => {
       expect(confirmSpy).toHaveBeenCalledTimes(1);
-      expect(mocks.restartApp).toHaveBeenCalledTimes(1);
+      expect(mocks.runRuntimeControlAction).toHaveBeenCalledWith(
+        'restart-app'
+      );
     });
-    expect(toast.success).toHaveBeenCalledWith('NextClaw app restart scheduled.');
+    expect(toast.success).toHaveBeenCalledWith(
+      'NextClaw app restart scheduled.'
+    );
+  });
+
+  it('shows a pending restart notice instead of auto-applying hidden restarts', () => {
+    mocks.useRuntimeControlPanelView.mockReturnValue({
+      controlView: {
+        ...baseControlView,
+        message: 'Saved changes are waiting for a manual restart.',
+        pendingRestart: {
+          changedPaths: ['plugins', 'ui'],
+          message: 'Saved changes are waiting for a manual restart.',
+          reasons: ['config reload requires restart: plugins, ui'],
+          requestedAt: '2026-04-17T10:00:00.000Z',
+        },
+      },
+      visibleLifecycle: 'healthy',
+      visibleServiceState: 'running',
+      visibleMessage: 'Saved changes are waiting for a manual restart.',
+      busyAction: null,
+      busy: false,
+      pendingRestart: {
+        changedPaths: ['plugins', 'ui'],
+        message: 'Saved changes are waiting for a manual restart.',
+        reasons: ['config reload requires restart: plugins, ui'],
+        requestedAt: '2026-04-17T10:00:00.000Z',
+      },
+      errorMessage: null,
+    });
+
+    render(<RuntimeControlCard />);
+
+    expect(screen.getByText('待重启')).toBeTruthy();
+    expect(
+      screen.getByText(
+        '这次改动已经保存，但系统不会自动重启。请在你方便的时候手动重启，重启完成后该提示会自动清空。'
+      )
+    ).toBeTruthy();
+    expect(screen.getByText('plugins')).toBeTruthy();
+    expect(screen.getByText('ui')).toBeTruthy();
   });
 });

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,27 +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 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'
@@ -182,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}`);
     }
   };
@@ -219,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}`);
     }
   };
@@ -254,13 +205,37 @@ 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>
 
+        {pendingRestart ? (
+          <div className="rounded-xl border border-amber-200 bg-amber-50 p-4 space-y-3">
+            <div className="text-sm font-medium text-amber-900">{t('runtimeControlPendingRestartTitle')}</div>
+            <p className="text-sm text-amber-800">{t('runtimeControlPendingRestartDescription')}</p>
+            {pendingRestart.changedPaths.length > 0 ? (
+              <div className="space-y-2">
+                <div className="text-xs font-medium uppercase tracking-[0.08em] text-amber-700">
+                  {t('runtimeControlPendingRestartPaths')}
+                </div>
+                <div className="flex flex-wrap gap-2">
+                  {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"
+                    >
+                      {path}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+
         <div className="flex flex-col gap-3 md:flex-row md:flex-wrap">
           {visibleActions.map((item) => {
             const isBusyAction = busyAction === item.action;

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 />);