@nextclaw/ui 0.12.10 → 0.12.12

package/src/features/system-status/components/config/runtime-config-overview.tsx

@@ -0,0 +1,16 @@
+import { PageHeader } from '@/app/components/layout/page-layout';
+import { RuntimeControlCard } from '@/features/system-status/components/runtime-control-card';
+import { RuntimePresenceCard } from '@/features/system-status/components/runtime-presence-card';
+import { t } from '@/shared/lib/i18n';
+import { PwaInstallCard } from '@/features/pwa';
+
+export function RuntimeConfigOverview() {
+  return (
+    <>
+      <PageHeader title={t('runtimePageTitle')} description={t('runtimePageDescription')} />
+      <RuntimeControlCard />
+      <RuntimePresenceCard />
+      <PwaInstallCard />
+    </>
+  );
+}

package/src/features/system-status/components/config/runtime-entry-list-card.tsx

@@ -0,0 +1,58 @@
+import { Plus, Trash2 } from 'lucide-react';
+import { Button } from '@/shared/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/shared/components/ui/card';
+import { Input } from '@/shared/components/ui/input';
+import { Switch } from '@/shared/components/ui/switch';
+import type { RuntimeEntryDraft } from '@/features/system-status/utils/runtime-config-agent.utils';
+
+export function RuntimeEntryListCard(props: {
+  entries: RuntimeEntryDraft[];
+  onUpdateEntry: (index: number, patch: Partial<RuntimeEntryDraft>) => void;
+  onRemoveEntry: (index: number) => void;
+  onAddEntry: () => void;
+  label?: string;
+  help?: string;
+}) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{props.label ?? 'Runtime Entries'}</CardTitle>
+        <CardDescription>{props.help ?? '统一管理可见的 runtime entry 与其配置。'}</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {props.entries.map((entry, index) => (
+          <div key={`${index}-${entry.id || 'runtime-entry'}`} className="rounded-xl border border-gray-200 p-3 space-y-3">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+              <Input value={entry.id} onChange={(event) => props.onUpdateEntry(index, { id: event.target.value })} placeholder="entry id，例如 hermes" />
+              <Input value={entry.label ?? ''} onChange={(event) => props.onUpdateEntry(index, { label: event.target.value })} placeholder="展示名称，例如 Hermes" />
+              <Input value={entry.type} onChange={(event) => props.onUpdateEntry(index, { type: event.target.value })} placeholder="runtime type，例如 narp-stdio" />
+              <div className="flex items-center justify-between rounded-lg border border-gray-200 px-3 py-2">
+                <span className="text-sm text-gray-700">Enabled</span>
+                <Switch checked={entry.enabled !== false} onCheckedChange={(checked) => props.onUpdateEntry(index, { enabled: checked })} />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium text-gray-800">Config JSON</label>
+              <textarea
+                className="min-h-32 w-full rounded-md border border-gray-200 px-3 py-2 text-sm font-mono"
+                value={entry.configText}
+                onChange={(event) => props.onUpdateEntry(index, { configText: event.target.value })}
+                spellCheck={false}
+              />
+            </div>
+            <div className="flex justify-end">
+              <Button type="button" variant="outline" onClick={() => props.onRemoveEntry(index)}>
+                <Trash2 className="mr-2 h-4 w-4" />
+                Delete
+              </Button>
+            </div>
+          </div>
+        ))}
+        <Button type="button" variant="outline" onClick={props.onAddEntry}>
+          <Plus className="mr-2 h-4 w-4" />
+          Add Runtime Entry
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}

package/src/features/system-status/components/config/runtime-settings-card.tsx

@@ -0,0 +1,73 @@
+import { Input } from '@/shared/components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/shared/components/ui/select';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/shared/components/ui/card';
+import { t } from '@/shared/lib/i18n';
+import type { DmScope } from '@/features/system-status/utils/runtime-config-agent.utils';
+
+const DM_SCOPE_OPTIONS: Array<{ value: DmScope; label: string }> = [
+  { value: 'main', label: 'main' },
+  { value: 'per-peer', label: 'per-peer' },
+  { value: 'per-channel-peer', label: 'per-channel-peer' },
+  { value: 'per-account-channel-peer', label: 'per-account-channel-peer' }
+];
+
+export function RuntimeSettingsCard(props: {
+  dmScope: DmScope;
+  defaultContextTokens: number;
+  defaultEngine: string;
+  onDmScopeChange: (value: DmScope) => void;
+  onDefaultContextTokensChange: (value: number) => void;
+  onDefaultEngineChange: (value: string) => void;
+  dmScopeLabel?: string;
+  dmScopeHelp?: string;
+  defaultContextTokensLabel?: string;
+  defaultContextTokensHelp?: string;
+  defaultEngineLabel?: string;
+  defaultEngineHelp?: string;
+}) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{props.dmScopeLabel ?? t('dmScope')}</CardTitle>
+        <CardDescription>{props.dmScopeHelp ?? t('dmScopeHelp')}</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <label className="text-sm font-medium text-gray-800">{props.defaultContextTokensLabel ?? t('defaultContextTokens')}</label>
+          <Input
+            type="number"
+            min={1000}
+            step={1000}
+            value={props.defaultContextTokens}
+            onChange={(event) => props.onDefaultContextTokensChange(Math.max(1000, Number.parseInt(event.target.value, 10) || 1000))}
+          />
+          <p className="text-xs text-gray-500">{props.defaultContextTokensHelp ?? t('defaultContextTokensHelp')}</p>
+        </div>
+        <div className="space-y-2">
+          <label className="text-sm font-medium text-gray-800">{props.defaultEngineLabel ?? t('defaultEngine')}</label>
+          <Input
+            value={props.defaultEngine}
+            onChange={(event) => props.onDefaultEngineChange(event.target.value)}
+            placeholder={t('defaultEnginePlaceholder')}
+          />
+          <p className="text-xs text-gray-500">{props.defaultEngineHelp ?? t('defaultEngineHelp')}</p>
+        </div>
+        <div className="space-y-2">
+          <label className="text-sm font-medium text-gray-800">{props.dmScopeLabel ?? t('dmScope')}</label>
+          <Select value={props.dmScope} onValueChange={(value) => props.onDmScopeChange(value as DmScope)}>
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {DM_SCOPE_OPTIONS.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/src/{components/config → features/system-status/components}/desktop-update-config.test.tsx

@@ -1,9 +1,9 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { DesktopUpdateConfig } from '@/components/config/desktop-update-config';
-import { useDesktopUpdateStore } from '@/desktop/stores/desktop-update.store';
-import { setLanguage } from '@/lib/i18n';
+import { DesktopUpdateConfig } from '@/features/system-status/components/desktop-update-config';
+import { setLanguage } from '@/shared/lib/i18n';
+import { useDesktopUpdateStore } from '@/platforms/desktop';
 
 const mocks = vi.hoisted(() => ({
   start: vi.fn(),
@@ -15,9 +15,15 @@ const mocks = vi.hoisted(() => ({
   updateChannel: vi.fn()
 }));
 
-vi.mock('@/desktop/managers/desktop-update.manager', () => ({
-  desktopUpdateManager: mocks
-}));
+vi.mock('@/platforms/desktop', async () => {
+  const actual = await vi.importActual<typeof import('@/platforms/desktop')>(
+    '@/platforms/desktop'
+  );
+  return {
+    ...actual,
+    desktopUpdateManager: mocks,
+  };
+});
 
 describe('DesktopUpdateConfig', () => {
   beforeEach(() => {

package/src/features/system-status/components/desktop-update-config.tsx

@@ -0,0 +1,219 @@
+import { useEffect } from 'react';
+import { Button } from '@/shared/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/shared/components/ui/card';
+import { Label } from '@/shared/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/shared/components/ui/select';
+import { Switch } from '@/shared/components/ui/switch';
+import { PageHeader, PageLayout } from '@/app/components/layout/page-layout';
+import { formatDateTime, t } from '@/shared/lib/i18n';
+import { cn } from '@/shared/lib/utils';
+import {
+  desktopUpdateManager,
+  type DesktopReleaseChannel,
+  useDesktopUpdateStore,
+} from '@/platforms/desktop';
+import { Download, ExternalLink, RefreshCw, RotateCw } from 'lucide-react';
+
+const STATUS_LABEL_KEYS: Record<string, string> = {
+  checking: 'desktopUpdatesStatusChecking',
+  'update-available': 'desktopUpdatesStatusAvailable',
+  downloading: 'desktopUpdatesStatusDownloading',
+  downloaded: 'desktopUpdatesStatusDownloaded',
+  'up-to-date': 'desktopUpdatesStatusUpToDate',
+  failed: 'desktopUpdatesStatusFailed',
+};
+
+function StatusBadge({ status }: { status: string }) {
+  return <span className={cn('inline-flex rounded-full px-3 py-1 text-xs font-medium ring-1', getStatusTone(status))}>{getStatusLabel(status)}</span>;
+}
+
+function OverviewStat({ label, value }: { label: string; value: string }) {
+  return <div className="rounded-xl border border-gray-200 bg-gray-50/60 p-4"><p className="text-xs font-medium uppercase tracking-[0.08em] text-gray-500">{label}</p><p className="mt-2 text-base font-semibold text-gray-900">{value}</p></div>;
+}
+
+function PreferenceToggle({
+  label,
+  help,
+  checked,
+  disabled,
+  onCheckedChange,
+}: {
+  label: string;
+  help: string;
+  checked: boolean;
+  disabled: boolean;
+  onCheckedChange: (checked: boolean) => void;
+}) {
+  return (
+    <div className="flex items-start justify-between gap-4 rounded-xl border border-gray-200 p-4">
+      <div className="space-y-1">
+        <Label>{label}</Label>
+        <p className="text-sm text-gray-500">{help}</p>
+      </div>
+      <Switch checked={checked} disabled={disabled} onCheckedChange={onCheckedChange} />
+    </div>
+  );
+}
+
+function formatVersion(value: string | null): string {
+  return value?.trim() || '-';
+}
+function formatLastCheckedAt(value: string | null): string {
+  return value ? formatDateTime(value) : '-';
+}
+function getChannelLabel(channel: DesktopReleaseChannel): string {
+  return channel === 'beta' ? t('desktopUpdatesChannelBeta') : t('desktopUpdatesChannelStable');
+}
+function getStatusLabel(status: string): string {
+  return t(STATUS_LABEL_KEYS[status] ?? 'desktopUpdatesStatusIdle');
+}
+function getStatusTone(status: string): string {
+  if (status === 'downloaded') {
+    return 'bg-emerald-50 text-emerald-700 ring-emerald-100';
+  }
+  if (status === 'update-available' || status === 'downloading' || status === 'checking') {
+    return 'bg-amber-50 text-amber-700 ring-amber-100';
+  }
+  if (status === 'failed') {
+    return 'bg-red-50 text-red-700 ring-red-100';
+  }
+  return 'bg-gray-100 text-gray-700 ring-gray-200';
+}
+
+function DesktopOnlyState() {
+  return (
+    <PageLayout className="space-y-6">
+      <PageHeader title={t('desktopUpdatesPageTitle')} description={t('desktopUpdatesPageDescription')} />
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('desktopUpdatesDesktopOnlyTitle')}</CardTitle>
+          <CardDescription>{t('desktopUpdatesDesktopOnlyDescription')}</CardDescription>
+        </CardHeader>
+        <CardContent><p className="text-sm text-gray-500">{t('desktopUpdatesDesktopOnlyFutureHint')}</p></CardContent>
+      </Card>
+    </PageLayout>
+  );
+}
+
+export function DesktopUpdateConfig() {
+  const { supported, initialized, busyAction, snapshot } = useDesktopUpdateStore();
+  useEffect(() => {
+    void desktopUpdateManager.start();
+    return () => {
+      desktopUpdateManager.stop();
+    };
+  }, []);
+  if (!initialized) {
+    return <div className="p-8 text-gray-400">{t('loading')}</div>;
+  }
+  if (!supported || !snapshot) {
+    return <DesktopOnlyState />;
+  }
+  const isChecking = busyAction === 'checking';
+  const isDownloading = busyAction === 'downloading';
+  const isApplying = busyAction === 'applying';
+  const isSavingPreferences = busyAction === 'saving-preferences';
+  const isSwitchingChannel = busyAction === 'switching-channel';
+  const canDownload = snapshot.status === 'update-available' && !isDownloading && !isApplying;
+  const canApply = snapshot.status === 'downloaded' && !isApplying;
+  const overviewStats = [
+    [t('desktopUpdatesLauncherVersion'), formatVersion(snapshot.launcherVersion)],
+    [t('desktopUpdatesCurrentBundleVersion'), formatVersion(snapshot.currentVersion)],
+    [t('desktopUpdatesAvailableVersion'), formatVersion(snapshot.availableVersion)],
+    [t('desktopUpdatesLastCheckedAt'), formatLastCheckedAt(snapshot.lastCheckedAt)],
+    [t('desktopUpdatesCurrentChannel'), getChannelLabel(snapshot.channel)],
+  ] as const;
+  return (
+    <PageLayout className="space-y-6">
+      <PageHeader
+        title={t('desktopUpdatesPageTitle')}
+        description={t('desktopUpdatesPageDescription')}
+        actions={<Button variant="outline" onClick={() => void desktopUpdateManager.checkForUpdates()} disabled={isChecking || isDownloading || isApplying}><RefreshCw className={cn('mr-2 h-4 w-4', isChecking && 'animate-spin')} />{t('desktopUpdatesCheckNow')}</Button>}
+      />
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('desktopUpdatesOverviewTitle')}</CardTitle>
+          <CardDescription>{t('desktopUpdatesOverviewDescription')}</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-5">
+          <div className="flex flex-wrap items-center gap-3"><span className="text-sm font-medium text-gray-700">{t('desktopUpdatesStatusLabel')}</span><StatusBadge status={snapshot.status} /></div>
+          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-5">{overviewStats.map(([label, value]) => <OverviewStat key={label} label={label} value={value} />)}</div>
+          {snapshot.channel === 'beta' ? (
+            <div className="rounded-2xl border border-amber-200 bg-amber-50/70 p-4">
+              <p className="text-sm font-semibold text-amber-800">{t('desktopUpdatesBetaBadgeTitle')}</p>
+              <p className="mt-1 text-sm text-amber-700">{t('desktopUpdatesBetaBadgeDescription')}</p>
+            </div>
+          ) : null}
+          {snapshot.downloadedVersion ? (
+            <div className="rounded-2xl border border-emerald-200 bg-emerald-50/70 p-4">
+              <p className="text-sm font-semibold text-emerald-800">{t('desktopUpdatesDownloadedBannerTitle')}</p>
+              <p className="mt-1 text-sm text-emerald-700">{t('desktopUpdatesDownloadedBannerDescription').replace('{version}', snapshot.downloadedVersion)}</p>
+            </div>
+          ) : null}
+          {snapshot.errorMessage ? <div className="rounded-2xl border border-red-200 bg-red-50/70 p-4 text-sm text-red-700">{snapshot.errorMessage}</div> : null}
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('desktopUpdatesPreferencesTitle')}</CardTitle>
+          <CardDescription>{t('desktopUpdatesPreferencesDescription')}</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-5">
+          <div className="rounded-xl border border-gray-200 p-4">
+            <div className="space-y-3">
+              <div className="space-y-1">
+                <Label>{t('desktopUpdatesReleaseChannel')}</Label>
+                <p className="text-sm text-gray-500">{t('desktopUpdatesReleaseChannelHelp')}</p>
+              </div>
+              <Select value={snapshot.channel} disabled={isSwitchingChannel || isChecking || isDownloading || isApplying} onValueChange={(value) => void desktopUpdateManager.updateChannel(value as DesktopReleaseChannel)}>
+                <SelectTrigger className="w-full max-w-sm">
+                  <SelectValue placeholder={t('desktopUpdatesReleaseChannel')} />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="stable">{t('desktopUpdatesChannelStable')}</SelectItem>
+                  <SelectItem value="beta">{t('desktopUpdatesChannelBeta')}</SelectItem>
+                </SelectContent>
+              </Select>
+              <p className="text-sm text-gray-500">{t('desktopUpdatesReleaseChannelDowngradeHint')}</p>
+            </div>
+          </div>
+          <PreferenceToggle
+            label={t('desktopUpdatesAutomaticChecks')}
+            help={t('desktopUpdatesAutomaticChecksHelp')}
+            checked={snapshot.preferences.automaticChecks}
+            disabled={isSavingPreferences || isSwitchingChannel}
+            onCheckedChange={(checked) => void desktopUpdateManager.updatePreferences({ automaticChecks: checked })}
+          />
+          <PreferenceToggle
+            label={t('desktopUpdatesAutoDownload')}
+            help={t('desktopUpdatesAutoDownloadHelp')}
+            checked={snapshot.preferences.autoDownload}
+            disabled={isSavingPreferences || isSwitchingChannel}
+            onCheckedChange={(checked) => void desktopUpdateManager.updatePreferences({ autoDownload: checked })}
+          />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('desktopUpdatesActionsTitle')}</CardTitle>
+          <CardDescription>{t('desktopUpdatesActionsDescription')}</CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-wrap items-center gap-3">
+          <Button variant="outline" onClick={() => void desktopUpdateManager.checkForUpdates()} disabled={isChecking || isDownloading || isApplying}>
+            <RefreshCw className={cn('mr-2 h-4 w-4', isChecking && 'animate-spin')} />
+            {t('desktopUpdatesCheckNow')}
+          </Button>
+          <Button onClick={() => void desktopUpdateManager.downloadUpdate()} disabled={!canDownload}>
+            <Download className={cn('mr-2 h-4 w-4', isDownloading && 'animate-bounce')} />
+            {t('desktopUpdatesDownloadNow')}
+          </Button>
+          <Button variant="secondary" onClick={() => void desktopUpdateManager.applyDownloadedUpdate()} disabled={!canApply}>
+            <RotateCw className={cn('mr-2 h-4 w-4', isApplying && 'animate-spin')} />
+            {t('desktopUpdatesApplyNow')}
+          </Button>
+          {snapshot.releaseNotesUrl ? <Button variant="ghost" onClick={() => window.open(snapshot.releaseNotesUrl ?? '', '_blank', 'noopener,noreferrer')}><ExternalLink className="mr-2 h-4 w-4" />{t('desktopUpdatesReleaseNotes')}</Button> : null}
+        </CardContent>
+      </Card>
+    </PageLayout>
+  );
+}

package/src/features/system-status/components/runtime-control-card.test.tsx

@@ -0,0 +1,213 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { toast } from 'sonner';
+import { RuntimeControlCard } from './runtime-control-card';
+import { setLanguage } from '@/shared/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(() => ({
+  useRuntimeControlPanelView: vi.fn(),
+  runRuntimeControlAction: vi.fn()
+}));
+
+vi.mock('sonner', () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn()
+  }
+}));
+
+vi.mock('@/features/system-status', () => ({
+  useRuntimeControlPanelView: (...args: unknown[]) => mocks.useRuntimeControlPanelView(...args),
+  systemStatusManager: {
+    runRuntimeControlAction: (...args: unknown[]) => mocks.runRuntimeControlAction(...args)
+  }
+}));
+
+describe('RuntimeControlCard', () => {
+  beforeEach(() => {
+    setLanguage('zh');
+    vi.clearAllMocks();
+    mocks.useRuntimeControlPanelView.mockReturnValue({
+      controlView: baseControlView,
+      visibleLifecycle: 'healthy',
+      visibleServiceState: 'running',
+      visibleMessage: 'runtime healthy',
+      busyAction: null,
+      busy: false,
+      pendingRestart: null,
+      errorMessage: null
+    });
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('renders service management actions from the current capability view', () => {
+    render(<RuntimeControlCard />);
+
+    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 through the system status manager', async () => {
+    const user = userEvent.setup();
+    mocks.runRuntimeControlAction.mockResolvedValue({
+      accepted: true,
+      action: 'restart-service',
+      lifecycle: 'restarting-service',
+      message: 'Restart scheduled. This page may disconnect for a few seconds.'
+    });
+
+    render(<RuntimeControlCard />);
+
+    await user.click(screen.getByRole('button', { name: '重启服务' }));
+
+    await waitFor(() => {
+      expect(mocks.runRuntimeControlAction).toHaveBeenCalledWith('restart-service');
+    });
+    expect(toast.success).toHaveBeenCalledWith('Restart scheduled. This page may disconnect for a few seconds.');
+  });
+
+  it('runs the stop service flow after confirmation', async () => {
+    const user = userEvent.setup();
+    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.'
+    });
+
+    render(<RuntimeControlCard />);
+
+    await user.click(screen.getByRole('button', { name: '停止服务' }));
+
+    await waitFor(() => {
+      expect(confirmSpy).toHaveBeenCalledTimes(1);
+      expect(mocks.runRuntimeControlAction).toHaveBeenCalledWith('stop-service');
+    });
+    expect(toast.success).toHaveBeenCalledWith('Stop scheduled. This page will disconnect shortly.');
+  });
+
+  it('runs the desktop restart app flow after confirmation', async () => {
+    const user = userEvent.setup();
+    const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true);
+    mocks.useRuntimeControlPanelView.mockReturnValue({
+      controlView: {
+        ...baseControlView,
+        environment: 'desktop-embedded',
+        canStopService: {
+          available: false,
+          requiresConfirmation: true,
+          impact: 'brief-ui-disconnect'
+        },
+        canRestartApp: {
+          available: true,
+          requiresConfirmation: true,
+          impact: 'full-app-relaunch'
+        },
+        managementHint: 'desktop launcher hint'
+      },
+      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.'
+    });
+
+    render(<RuntimeControlCard />);
+
+    await user.click(screen.getByRole('button', { name: '重启应用' }));
+
+    await waitFor(() => {
+      expect(confirmSpy).toHaveBeenCalledTimes(1);
+      expect(mocks.runRuntimeControlAction).toHaveBeenCalledWith('restart-app');
+    });
+    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();
+  });
+});