@nextclaw/ui 0.12.7 → 0.12.9

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

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

@@ -0,0 +1,154 @@
+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';
+
+const mocks = vi.hoisted(() => ({
+  useRuntimeControl: vi.fn(),
+  toastSuccess: vi.fn(),
+  toastError: vi.fn()
+}));
+
+vi.mock('@/hooks/use-runtime-control', () => ({
+  useRuntimeControl: (...args: unknown[]) => mocks.useRuntimeControl(...args)
+}));
+
+vi.mock('sonner', () => ({
+  toast: {
+    success: (...args: unknown[]) => mocks.toastSuccess(...args),
+    error: (...args: unknown[]) => mocks.toastError(...args)
+  }
+}));
+
+describe('RuntimePresenceCard', () => {
+  beforeEach(() => {
+    setLanguage('zh');
+    vi.clearAllMocks();
+    useDesktopPresenceStore.setState({
+      supported: false,
+      initialized: false,
+      busyAction: null,
+      snapshot: null
+    });
+    mocks.useRuntimeControl.mockReturnValue({
+      data: {
+        environment: 'managed-local-service',
+        lifecycle: 'healthy',
+        serviceState: 'running',
+        canStartService: {
+          available: false,
+          requiresConfirmation: false,
+          impact: 'brief-ui-disconnect',
+          reasonIfUnavailable: 'running local service'
+        },
+        message: 'runtime healthy',
+        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: 'managed service hint'
+      },
+      isError: false,
+      error: null
+    });
+    window.nextclawDesktop = undefined;
+  });
+
+  it('explains that closing the browser does not stop the managed local service', () => {
+    render(<RuntimePresenceCard />);
+
+    expect(screen.getByText('浏览器只是本地服务控制面')).toBeTruthy();
+    expect(screen.getByText('关闭浏览器标签页不会停止本地 NextClaw 服务。服务生命周期由本地受管服务负责，而不是由页面生命周期决定。')).toBeTruthy();
+  });
+
+  it('loads desktop presence settings and updates close-to-background preference', async () => {
+    const user = userEvent.setup();
+    const getPresenceState = vi.fn().mockResolvedValue({
+      closeToBackground: true,
+      launchAtLogin: false,
+      supportsLaunchAtLogin: true,
+      launchAtLoginReason: null
+    });
+    const updatePresencePreferences = vi.fn().mockResolvedValue({
+      closeToBackground: false,
+      launchAtLogin: false,
+      supportsLaunchAtLogin: true,
+      launchAtLoginReason: null
+    });
+
+    window.nextclawDesktop = {
+      platform: 'darwin',
+      version: '32.2.1',
+      getUpdateState: vi.fn(),
+      checkForUpdates: vi.fn(),
+      downloadUpdate: vi.fn(),
+      applyDownloadedUpdate: vi.fn(),
+      updatePreferences: vi.fn(),
+      updateChannel: vi.fn(),
+      restartService: vi.fn(),
+      restartApp: vi.fn(),
+      getPresenceState,
+      updatePresencePreferences,
+      onUpdateStateChanged: vi.fn(() => () => {})
+    };
+
+    mocks.useRuntimeControl.mockReturnValue({
+      data: {
+        environment: 'desktop-embedded',
+        lifecycle: 'healthy',
+        serviceState: 'running',
+        canStartService: {
+          available: false,
+          requiresConfirmation: false,
+          impact: 'none'
+        },
+        message: 'runtime healthy',
+        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 hint'
+      },
+      isError: false,
+      error: null
+    });
+
+    render(<RuntimePresenceCard />);
+
+    await waitFor(() => {
+      expect(getPresenceState).toHaveBeenCalledTimes(1);
+      expect(screen.getByText('关闭窗口时隐藏到后台')).toBeTruthy();
+    });
+
+    await user.click(screen.getByRole('switch', { name: '关闭窗口时继续在后台运行' }));
+
+    await waitFor(() => {
+      expect(updatePresencePreferences).toHaveBeenCalledWith({ closeToBackground: false });
+    });
+  });
+});

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

@@ -0,0 +1,163 @@
+import { useEffect } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
+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 { t } from '@/lib/i18n';
+
+function PresenceHint(props: { title: string; description: string }) {
+  const { description, title } = props;
+  return (
+    <div className="rounded-xl border border-gray-200 bg-gray-50 p-4">
+      <p className="text-sm font-medium text-gray-900">{title}</p>
+      <p className="mt-2 text-sm leading-6 text-gray-600">{description}</p>
+    </div>
+  );
+}
+
+export function RuntimePresenceCard() {
+  const runtimeControlQuery = useRuntimeControl();
+  const environment = runtimeControlQuery.data?.environment;
+  const supported = useDesktopPresenceStore((state) => state.supported);
+  const initialized = useDesktopPresenceStore((state) => state.initialized);
+  const busyAction = useDesktopPresenceStore((state) => state.busyAction);
+  const snapshot = useDesktopPresenceStore((state) => state.snapshot);
+
+  useEffect(() => {
+    if (environment === 'desktop-embedded') {
+      void desktopPresenceManager.start();
+      return;
+    }
+    desktopPresenceManager.markUnsupported();
+  }, [environment]);
+
+  if (environment === 'desktop-embedded') {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('runtimePresenceTitle')}</CardTitle>
+          <CardDescription>{t('runtimePresenceDescription')}</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="rounded-xl border border-gray-200 bg-gray-50 p-4">
+            <p className="text-xs font-medium uppercase tracking-[0.08em] text-gray-500">
+              {t('runtimePresenceBehaviorLabel')}
+            </p>
+            <p className="mt-2 text-sm font-medium text-gray-900">
+              {snapshot?.closeToBackground ? t('runtimePresenceBehaviorBackground') : t('runtimePresenceBehaviorQuit')}
+            </p>
+          </div>
+
+          {!initialized || (supported && !snapshot) ? (
+            <p className="text-sm text-gray-500">{t('runtimePresenceLoading')}</p>
+          ) : null}
+
+          {snapshot ? (
+            <div className="space-y-4">
+              <div className="flex items-start justify-between gap-4 rounded-xl border border-gray-200 p-4">
+                <div className="space-y-2">
+                  <Label htmlFor="runtime-presence-close-background">{t('runtimePresenceCloseToBackground')}</Label>
+                  <p className="text-sm text-gray-500">{t('runtimePresenceCloseToBackgroundHelp')}</p>
+                </div>
+                <Switch
+                  id="runtime-presence-close-background"
+                  aria-label={t('runtimePresenceCloseToBackground')}
+                  checked={snapshot.closeToBackground}
+                  disabled={busyAction === 'saving-preferences'}
+                  onCheckedChange={(checked) => {
+                    void desktopPresenceManager.updatePreferences({ closeToBackground: checked });
+                  }}
+                />
+              </div>
+
+              <div className="flex items-start justify-between gap-4 rounded-xl border border-gray-200 p-4">
+                <div className="space-y-2">
+                  <Label htmlFor="runtime-presence-launch-login">{t('runtimePresenceLaunchAtLogin')}</Label>
+                  <p className="text-sm text-gray-500">
+                    {snapshot.supportsLaunchAtLogin
+                      ? t('runtimePresenceLaunchAtLoginHelp')
+                      : snapshot.launchAtLoginReason ?? t('runtimePresenceLaunchAtLoginUnavailable')}
+                  </p>
+                </div>
+                <Switch
+                  id="runtime-presence-launch-login"
+                  aria-label={t('runtimePresenceLaunchAtLogin')}
+                  checked={snapshot.launchAtLogin}
+                  disabled={!snapshot.supportsLaunchAtLogin || busyAction === 'saving-preferences'}
+                  onCheckedChange={(checked) => {
+                    void desktopPresenceManager.updatePreferences({ launchAtLogin: checked });
+                  }}
+                />
+              </div>
+            </div>
+          ) : null}
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (environment === 'managed-local-service') {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('runtimePresenceTitle')}</CardTitle>
+          <CardDescription>{t('runtimePresenceDescription')}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <PresenceHint
+            title={t('runtimePresenceManagedLocalTitle')}
+            description={t('runtimePresenceManagedLocalDescription')}
+          />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (environment === 'self-hosted-web') {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('runtimePresenceTitle')}</CardTitle>
+          <CardDescription>{t('runtimePresenceDescription')}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <PresenceHint
+            title={t('runtimePresenceSelfHostedTitle')}
+            description={t('runtimePresenceSelfHostedDescription')}
+          />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (environment === 'shared-web') {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('runtimePresenceTitle')}</CardTitle>
+          <CardDescription>{t('runtimePresenceDescription')}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <PresenceHint
+            title={t('runtimePresenceSharedTitle')}
+            description={t('runtimePresenceSharedDescription')}
+          />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{t('runtimePresenceTitle')}</CardTitle>
+        <CardDescription>{t('runtimePresenceDescription')}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p className="text-sm text-gray-500">{t('runtimePresenceLoading')}</p>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/layout/AppLayout.tsx

@@ -54,7 +54,7 @@ function AppLayoutInner({ children }: AppLayoutProps) {
           ) : (
             <main
               className={cn(
-                'flex-1 custom-scrollbar p-8',
+                'flex-1 custom-scrollbar p-8 pb-24',
                 lockPageScroll ? 'overflow-auto xl:overflow-hidden' : 'overflow-auto'
               )}
             >

package/src/components/providers/ThemeProvider.tsx

@@ -14,6 +14,7 @@ import {
   subscribeThemeChange,
   type UiTheme,
 } from '@/lib/theme';
+import { pwaShellThemeManager } from '@/pwa/managers/pwa-shell-theme.manager';
 
 type ThemeContextValue = {
   theme: UiTheme;
@@ -25,6 +26,10 @@ const ThemeContext = createContext<ThemeContextValue | null>(null);
 export function ThemeProvider({ children }: { children: ReactNode }) {
   const [theme, setThemeState] = useState<UiTheme>(() => initializeTheme());
 
+  useEffect(() => {
+    pwaShellThemeManager.syncTheme(theme);
+  }, [theme]);
+
   useEffect(() => {
     const unsubscribe = subscribeThemeChange((nextTheme) => {
       setThemeState(nextTheme);