@nextclaw/ui 0.12.7 → 0.12.8

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

@@ -0,0 +1,255 @@
+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 mocks = vi.hoisted(() => ({
+  useRuntimeControl: vi.fn(),
+  useRuntimeServiceAction: vi.fn(),
+  waitForRecovery: vi.fn(),
+  restartApp: vi.fn(),
+}));
+
+vi.mock('sonner', () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+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),
+  },
+}));
+
+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.',
+    });
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('renders service management actions from the current capability view', () => {
+    const queryClient = new QueryClient();
+
+    render(<RuntimeControlCard />, {
+      wrapper: createWrapper(queryClient),
+    });
+
+    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();
+    expect(screen.getByRole('button', { name: '停止服务' })).toBeTruthy();
+    expect(startButton.disabled).toBe(true);
+    expect(restartAppButton.disabled).toBe(true);
+    expect(screen.getByText('desktop only')).toBeTruthy();
+  });
+
+  it('runs the restart service flow and waits for recovery', async () => {
+    const queryClient = new QueryClient();
+    const user = userEvent.setup();
+    const invalidateQueriesSpy = vi.spyOn(queryClient, 'invalidateQueries');
+    const mutateAsync = vi.fn().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),
+    });
+
+    await user.click(screen.getByRole('button', { name: '重启服务' }));
+
+    await waitFor(() => {
+      expect(mutateAsync).toHaveBeenCalledWith('restart-service');
+      expect(mocks.waitForRecovery).toHaveBeenCalledTimes(1);
+    });
+    expect(toast.success).toHaveBeenCalledWith('Restart scheduled. This page may disconnect for a few seconds.');
+    expect(invalidateQueriesSpy).toHaveBeenCalledWith({ queryKey: ['runtime-control'] });
+  });
+
+  it('runs the stop service flow after confirmation', async () => {
+    const queryClient = new QueryClient();
+    const user = userEvent.setup();
+    const mutateAsync = vi.fn().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),
+    });
+
+    await user.click(screen.getByRole('button', { name: '停止服务' }));
+
+    await waitFor(() => {
+      expect(confirmSpy).toHaveBeenCalledTimes(1);
+      expect(mutateAsync).toHaveBeenCalledWith('stop-service');
+    });
+    expect(mocks.waitForRecovery).not.toHaveBeenCalled();
+    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: {
+        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,
+          impact: 'brief-ui-disconnect',
+        },
+        canRestartApp: {
+          available: true,
+          requiresConfirmation: true,
+          impact: 'full-app-relaunch',
+        },
+        managementHint: 'desktop launcher hint'
+      },
+      isError: false,
+      error: null,
+    });
+
+    const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true);
+
+    render(<RuntimeControlCard />, {
+      wrapper: createWrapper(queryClient),
+    });
+
+    await user.click(screen.getByRole('button', { name: '重启应用' }));
+
+    await waitFor(() => {
+      expect(confirmSpy).toHaveBeenCalledTimes(1);
+      expect(mocks.restartApp).toHaveBeenCalledTimes(1);
+    });
+    expect(toast.success).toHaveBeenCalledWith('NextClaw app restart scheduled.');
+  });
+});

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

@@ -0,0 +1,301 @@
+import { useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import type {
+  RuntimeActionCapability,
+  RuntimeControlAction,
+  RuntimeControlView,
+  RuntimeLifecycleState,
+  RuntimeServiceState
+} 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 { Loader2, RotateCw, Square, Play } from 'lucide-react';
+import { toast } from 'sonner';
+
+type VisibleRuntimeAction = {
+  action: RuntimeControlAction;
+  capability: RuntimeActionCapability;
+  label: string;
+  icon: 'play' | 'rotate' | 'square';
+  variant?: 'default' | 'secondary' | 'destructive';
+};
+
+function resolveLifecycleLabel(lifecycle: RuntimeLifecycleState): string {
+  if (lifecycle === 'healthy') {
+    return t('runtimeControlHealthy');
+  }
+  if (lifecycle === 'starting-service') {
+    return t('runtimeControlStartingService');
+  }
+  if (lifecycle === 'restarting-service') {
+    return t('runtimeControlRestartingService');
+  }
+  if (lifecycle === 'stopping-service') {
+    return t('runtimeControlStoppingService');
+  }
+  if (lifecycle === 'restarting-app') {
+    return t('runtimeControlRestartingApp');
+  }
+  if (lifecycle === 'recovering') {
+    return t('runtimeControlRecovering');
+  }
+  if (lifecycle === 'failed') {
+    return t('runtimeControlFailed');
+  }
+  return t('runtimeControlUnavailable');
+}
+
+function resolveServiceStateLabel(serviceState: RuntimeServiceState): string {
+  if (serviceState === 'running') {
+    return t('runtimeControlServiceRunning');
+  }
+  if (serviceState === 'stopped') {
+    return t('runtimeControlServiceStopped');
+  }
+  if (serviceState === 'starting') {
+    return t('runtimeControlServiceStarting');
+  }
+  if (serviceState === 'stopping') {
+    return t('runtimeControlServiceStopping');
+  }
+  if (serviceState === 'restarting') {
+    return t('runtimeControlServiceRestarting');
+  }
+  return t('runtimeControlServiceUnknown');
+}
+
+function resolveEnvironmentLabel(view: RuntimeControlView): string {
+  if (view.environment === 'desktop-embedded') {
+    return t('runtimeControlEnvironmentDesktop');
+  }
+  if (view.environment === 'managed-local-service') {
+    return t('runtimeControlEnvironmentManagedService');
+  }
+  if (view.environment === 'self-hosted-web') {
+    return t('runtimeControlEnvironmentSelfHosted');
+  }
+  return t('runtimeControlEnvironmentSharedWeb');
+}
+
+function resolveVisibleActions(controlView: RuntimeControlView | undefined): VisibleRuntimeAction[] {
+  if (!controlView) {
+    return [];
+  }
+
+  const actions: VisibleRuntimeAction[] = [
+    {
+      action: 'start-service',
+      capability: controlView.canStartService,
+      label: t('runtimeControlStartService'),
+      icon: 'play'
+    },
+    {
+      action: 'restart-service',
+      capability: controlView.canRestartService,
+      label: t('runtimeControlRestartService'),
+      icon: 'rotate'
+    },
+    {
+      action: 'stop-service',
+      capability: controlView.canStopService,
+      label: t('runtimeControlStopService'),
+      icon: 'square',
+      variant: 'destructive'
+    },
+    {
+      action: 'restart-app',
+      capability: controlView.canRestartApp,
+      label: t('runtimeControlRestartApp'),
+      icon: 'rotate',
+      variant: 'secondary'
+    }
+  ];
+
+  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) {
+    return <Loader2 className="mr-2 h-4 w-4 animate-spin" />;
+  }
+  if (icon === 'play') {
+    return <Play className="mr-2 h-4 w-4" />;
+  }
+  if (icon === 'square') {
+    return <Square className="mr-2 h-4 w-4" />;
+  }
+  return <RotateCw className="mr-2 h-4 w-4" />;
+}
+
+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 handleServiceAction = async (action: Extract<RuntimeControlAction, 'start-service' | 'restart-service' | 'stop-service'>) => {
+    const capability = action === 'start-service'
+      ? controlView?.canStartService
+      : action === 'stop-service'
+        ? controlView?.canStopService
+        : controlView?.canRestartService;
+
+    if (!capability?.available) {
+      toast.error(capability?.reasonIfUnavailable ?? t('runtimeControlLoadFailed'));
+      return;
+    }
+    if (action === 'stop-service' && capability.requiresConfirmation && !window.confirm(t('runtimeControlStopServiceConfirm'))) {
+      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);
+      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}`);
+    }
+  };
+
+  const handleRestartApp = async () => {
+    if (!controlView?.canRestartApp.available) {
+      toast.error(controlView?.canRestartApp.reasonIfUnavailable ?? t('runtimeRestartAppUnavailable'));
+      return;
+    }
+    if (!window.confirm(t('runtimeControlRestartAppConfirm'))) {
+      return;
+    }
+
+    setBusyAction('restart-app');
+    setLocalLifecycle('restarting-app');
+    setLocalMessage(t('runtimeControlRestartingAppHelp'));
+
+    try {
+      const result = await runtimeControlManager.restartApp();
+      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}`);
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{t('runtimeControlTitle')}</CardTitle>
+        <CardDescription>{t('runtimeControlDescription')}</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="rounded-xl border border-gray-200 bg-gray-50 p-4 space-y-3">
+          <div className="flex flex-col gap-1 md:flex-row md:items-center md:justify-between">
+            <div className="text-sm font-medium text-gray-900">{resolveServiceStateLabel(displayedServiceState)}</div>
+            <div className="text-xs text-gray-500">
+              {controlView ? resolveEnvironmentLabel(controlView) : t('runtimeControlLoading')}
+            </div>
+          </div>
+          <p className="text-sm text-gray-600">{displayedMessage}</p>
+          <div className="text-xs text-gray-500">{resolveLifecycleLabel(displayedLifecycle)}</div>
+          {controlView?.managementHint ? (
+            <p className="text-xs text-gray-500">{controlView.managementHint}</p>
+          ) : null}
+          {runtimeControlQuery.isError && !busy ? (
+            <p className="text-sm text-amber-700">
+              {runtimeControlQuery.error instanceof Error ? runtimeControlQuery.error.message : t('runtimeControlLoadFailed')}
+            </p>
+          ) : null}
+        </div>
+
+        <div className="flex flex-col gap-3 md:flex-row md:flex-wrap">
+          {visibleActions.map((item) => {
+            const isBusyAction = busyAction === item.action;
+            const disabled = !item.capability.available || busy;
+            const handleClick = () => {
+              if (item.action === 'restart-app') {
+                void handleRestartApp();
+                return;
+              }
+              void handleServiceAction(item.action);
+            };
+
+            return (
+              <Button
+                key={item.action}
+                type="button"
+                variant={item.variant ?? 'default'}
+                onClick={handleClick}
+                disabled={disabled}
+              >
+                <RuntimeActionIcon icon={item.icon} busy={isBusyAction} />
+                {item.label}
+              </Button>
+            );
+          })}
+        </div>
+
+        {visibleActions
+          .filter((item) => !item.capability.available && item.capability.reasonIfUnavailable)
+          .map((item) => (
+            <p key={`${item.action}-reason`} className="text-xs text-gray-500">
+              {item.capability.reasonIfUnavailable}
+            </p>
+          ))}
+      </CardContent>
+    </Card>
+  );
+}