@nextclaw/ui 0.12.7 → 0.12.9

package/src/components/config/RuntimeConfig.tsx

@@ -1,8 +1,10 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useConfig, useConfigSchema, useUpdateRuntime } from '@/hooks/useConfig';
-import type { AgentBindingView, AgentProfileView } from '@/api/types';
+import type { AgentBindingView, AgentProfileView, RuntimeEntryView } from '@/api/types';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { RuntimeControlCard } from '@/components/config/runtime-control-card';
+import { RuntimePresenceCard } from '@/components/config/runtime-presence-card';
 import { Input } from '@/components/ui/input';
 import { Switch } from '@/components/ui/switch';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
@@ -17,11 +19,16 @@ import {
 import { hintForPath } from '@/lib/config-hints';
 import { t } from '@/lib/i18n';
 import { PageLayout, PageHeader } from '@/components/layout/page-layout';
+import { PwaInstallCard } from '@/pwa/components/pwa-install-entry';
 import { Plus, Save, Trash2 } from 'lucide-react';
 import { toast } from 'sonner';
 
 type DmScope = 'main' | 'per-peer' | 'per-channel-peer' | 'per-account-channel-peer';
 type PeerKind = '' | 'direct' | 'group' | 'channel';
+type RuntimeEntryDraft = RuntimeEntryView & {
+  id: string;
+  configText: string;
+};
 
 const DM_SCOPE_OPTIONS: Array<{ value: DmScope; label: string }> = [
   { value: 'main', label: 'main' },
@@ -30,6 +37,29 @@ const DM_SCOPE_OPTIONS: Array<{ value: DmScope; label: string }> = [
   { value: 'per-account-channel-peer', label: 'per-account-channel-peer' }
 ];
 
+const DEFAULT_NARP_STDIO_ENTRY_CONFIG = {
+  wireDialect: 'acp',
+  processScope: 'per-session',
+  command: '',
+  args: ['acp'],
+  env: {},
+  cwd: '',
+  startupTimeoutMs: 8000,
+  probeTimeoutMs: 3000,
+  requestTimeoutMs: 120000
+};
+
+function RuntimeConfigOverview() {
+  return (
+    <>
+      <PageHeader title={t('runtimePageTitle')} description={t('runtimePageDescription')} />
+      <RuntimeControlCard />
+      <RuntimePresenceCard />
+      <PwaInstallCard />
+    </>
+  );
+}
+
 export function RuntimeConfig() {
   const { data: config, isLoading } = useConfig();
   const { data: schema } = useConfigSchema();
@@ -37,6 +67,7 @@ export function RuntimeConfig() {
 
   const [agents, setAgents] = useState<AgentProfileView[]>([]);
   const [bindings, setBindings] = useState<AgentBindingView[]>([]);
+  const [runtimeEntries, setRuntimeEntries] = useState<RuntimeEntryDraft[]>([]);
   const [dmScope, setDmScope] = useState<DmScope>('per-channel-peer');
   const [defaultContextTokens, setDefaultContextTokens] = useState(200000);
   const [defaultEngine, setDefaultEngine] = useState('native');
@@ -47,6 +78,16 @@ export function RuntimeConfig() {
     }
     setAgents((config.agents.list ?? []).map(hydrateRuntimeAgent));
     setBindings((config.bindings ?? []).map(hydrateRuntimeBinding));
+    setRuntimeEntries(
+      Object.entries(config.agents.runtimes?.entries ?? {}).map(([id, entry]) => ({
+        id,
+        enabled: entry.enabled !== false,
+        label: entry.label ?? '',
+        type: entry.type,
+        config: entry.config ?? {},
+        configText: JSON.stringify(entry.config ?? {}, null, 2)
+      }))
+    );
     setDmScope((config.session?.dmScope as DmScope) ?? 'per-channel-peer');
     setDefaultContextTokens(config.agents.defaults.contextTokens ?? 200000);
     setDefaultEngine(config.agents.defaults.engine ?? 'native');
@@ -60,6 +101,7 @@ export function RuntimeConfig() {
   const agentEngineHint = hintForPath('agents.list.*.engine', uiHints);
   const agentsHint = hintForPath('agents.list', uiHints);
   const bindingsHint = hintForPath('bindings', uiHints);
+  const runtimeEntriesHint = hintForPath('agents.runtimes.entries', uiHints);
 
   const knownAgentIds = useMemo(() => {
     const ids = new Set<string>(['main']);
@@ -80,6 +122,28 @@ export function RuntimeConfig() {
     setBindings((prev) => prev.map((binding, cursor) => (cursor === index ? next : binding)));
   };
 
+  const updateRuntimeEntry = (index: number, patch: Partial<RuntimeEntryDraft>) => {
+    setRuntimeEntries((prev) => prev.map((entry, cursor) => (cursor === index ? { ...entry, ...patch } : entry)));
+  };
+
+  const removeRuntimeEntry = (index: number) => {
+    setRuntimeEntries((prev) => prev.filter((_, cursor) => cursor !== index));
+  };
+
+  const addRuntimeEntry = () => {
+    setRuntimeEntries((prev) => [
+      ...prev,
+      {
+        id: '',
+        enabled: true,
+        label: '',
+        type: 'narp-stdio',
+        config: DEFAULT_NARP_STDIO_ENTRY_CONFIG,
+        configText: JSON.stringify(DEFAULT_NARP_STDIO_ENTRY_CONFIG, null, 2)
+      }
+    ]);
+  };
+
   const handleSave = () => {
     try {
       const normalizedAgents = agents.map((agent, index) => {
@@ -139,6 +203,33 @@ export function RuntimeConfig() {
         return normalized;
       });
 
+      const normalizedRuntimeEntries = runtimeEntries.reduce<Record<string, RuntimeEntryView>>((entries, entry, index) => {
+        const id = entry.id.trim();
+        const type = entry.type.trim();
+        if (!id) {
+          throw new Error(`Runtime entry id is required at index ${index}.`);
+        }
+        if (!type) {
+          throw new Error(`Runtime entry type is required for "${id}".`);
+        }
+        if (entries[id]) {
+          throw new Error(`Duplicate runtime entry id: ${id}`);
+        }
+
+        const configValue = entry.configText.trim() ? JSON.parse(entry.configText) : {};
+        if (configValue && (typeof configValue !== 'object' || Array.isArray(configValue))) {
+          throw new Error(`Runtime entry config for "${id}" must be a JSON object.`);
+        }
+
+        entries[id] = {
+          enabled: entry.enabled !== false,
+          ...(entry.label?.trim() ? { label: entry.label.trim() } : {}),
+          type,
+          config: (configValue as Record<string, unknown>) ?? {}
+        };
+        return entries;
+      }, {});
+
       updateRuntime.mutate({
         data: {
           agents: {
@@ -146,7 +237,10 @@ export function RuntimeConfig() {
               contextTokens: Math.max(1000, defaultContextTokens),
               engine: defaultEngine.trim() || 'native'
             },
-            list: normalizedAgents
+            list: normalizedAgents,
+            runtimes: {
+              entries: normalizedRuntimeEntries
+            }
           },
           bindings: normalizedBindings,
           session: {
@@ -160,14 +254,11 @@ export function RuntimeConfig() {
     }
   };
 
-  if (isLoading || !config) {
-    return <div className="p-8 text-gray-400">{t('runtimeLoading')}</div>;
-  }
+  if (isLoading || !config) return <div className="p-8 text-gray-400">{t('runtimeLoading')}</div>;
 
   return (
     <PageLayout className="space-y-6">
-      <PageHeader title={t('runtimePageTitle')} description={t('runtimePageDescription')} />
-
+      <RuntimeConfigOverview />
       <Card>
         <CardHeader>
           <CardTitle>{dmScopeHint?.label ?? t('dmScope')}</CardTitle>
@@ -220,6 +311,62 @@ export function RuntimeConfig() {
         </CardContent>
       </Card>
 
+      <Card>
+        <CardHeader>
+          <CardTitle>{runtimeEntriesHint?.label ?? 'Runtime Entries'}</CardTitle>
+          <CardDescription>{runtimeEntriesHint?.help ?? '统一管理可见的 runtime entry 与其配置。'}</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          {runtimeEntries.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) => updateRuntimeEntry(index, { id: event.target.value })}
+                  placeholder="entry id，例如 hermes"
+                />
+                <Input
+                  value={entry.label ?? ''}
+                  onChange={(event) => updateRuntimeEntry(index, { label: event.target.value })}
+                  placeholder="展示名称，例如 Hermes"
+                />
+                <Input
+                  value={entry.type}
+                  onChange={(event) => updateRuntimeEntry(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) => updateRuntimeEntry(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) => updateRuntimeEntry(index, { configText: event.target.value })}
+                  spellCheck={false}
+                />
+              </div>
+              <div className="flex justify-end">
+                <Button type="button" variant="outline" onClick={() => removeRuntimeEntry(index)}>
+                  <Trash2 className="mr-2 h-4 w-4" />
+                  {t('deleteButton')}
+                </Button>
+              </div>
+            </div>
+          ))}
+          <Button type="button" variant="outline" onClick={addRuntimeEntry}>
+            <Plus className="mr-2 h-4 w-4" />
+            Add Runtime Entry
+          </Button>
+        </CardContent>
+      </Card>
+
       <Card>
         <CardHeader>
           <CardTitle>{agentsHint?.label ?? t('agentList')}</CardTitle>

package/src/components/config/desktop-update-config.test.tsx

@@ -0,0 +1,85 @@
+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';
+
+const mocks = vi.hoisted(() => ({
+  start: vi.fn(),
+  stop: vi.fn(),
+  checkForUpdates: vi.fn(),
+  downloadUpdate: vi.fn(),
+  applyDownloadedUpdate: vi.fn(),
+  updatePreferences: vi.fn(),
+  updateChannel: vi.fn()
+}));
+
+vi.mock('@/desktop/managers/desktop-update.manager', () => ({
+  desktopUpdateManager: mocks
+}));
+
+describe('DesktopUpdateConfig', () => {
+  beforeEach(() => {
+    setLanguage('zh');
+    mocks.start.mockReset();
+    mocks.stop.mockReset();
+    mocks.checkForUpdates.mockReset();
+    mocks.downloadUpdate.mockReset();
+    mocks.applyDownloadedUpdate.mockReset();
+    mocks.updatePreferences.mockReset();
+    mocks.updateChannel.mockReset();
+
+    if (!HTMLElement.prototype.hasPointerCapture) {
+      HTMLElement.prototype.hasPointerCapture = () => false;
+    }
+    if (!HTMLElement.prototype.setPointerCapture) {
+      HTMLElement.prototype.setPointerCapture = () => {};
+    }
+    if (!HTMLElement.prototype.releasePointerCapture) {
+      HTMLElement.prototype.releasePointerCapture = () => {};
+    }
+
+    useDesktopUpdateStore.setState({
+      supported: true,
+      initialized: true,
+      busyAction: null,
+      snapshot: {
+        status: 'idle',
+        channel: 'beta',
+        launcherVersion: '0.0.138',
+        currentVersion: '0.18.0',
+        availableVersion: '0.18.2-beta.1',
+        downloadedVersion: null,
+        releaseNotesUrl: 'https://example.com/release-notes',
+        lastCheckedAt: '2026-04-13T12:00:00.000Z',
+        errorMessage: null,
+        preferences: {
+          automaticChecks: true,
+          autoDownload: false
+        }
+      }
+    });
+  });
+
+  it('renders current channel information and beta guidance', () => {
+    render(<DesktopUpdateConfig />);
+
+    expect(mocks.start).toHaveBeenCalledTimes(1);
+    expect(screen.getByText('当前更新通道')).toBeTruthy();
+    expect(screen.getAllByText('Beta').length).toBeGreaterThan(0);
+    expect(screen.getByText('当前正在跟随 Beta 通道')).toBeTruthy();
+    expect(screen.getByText('切回 Stable 后不会立刻强制降级；只有当 Stable 追平或超过当前版本时，才会继续提供 Stable 更新。')).toBeTruthy();
+  });
+
+  it('sends the newly selected release channel to the desktop update manager', async () => {
+    const user = userEvent.setup();
+
+    render(<DesktopUpdateConfig />);
+
+    await user.click(screen.getByRole('combobox'));
+    await user.click(screen.getByRole('option', { name: 'Stable' }));
+
+    expect(mocks.updateChannel).toHaveBeenCalledWith('stable');
+  });
+});

package/src/components/config/desktop-update-config.tsx

@@ -2,9 +2,11 @@ import { useEffect } from 'react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Switch } from '@/components/ui/switch';
 import { PageHeader, PageLayout } from '@/components/layout/page-layout';
 import { desktopUpdateManager } from '@/desktop/managers/desktop-update.manager';
+import type { DesktopReleaseChannel } from '@/desktop/desktop-update.types';
 import { useDesktopUpdateStore } from '@/desktop/stores/desktop-update.store';
 import { formatDateTime, t } from '@/lib/i18n';
 import { cn } from '@/lib/utils';
@@ -18,6 +20,10 @@ 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 {
   if (status === 'checking') {
     return t('desktopUpdatesStatusChecking');
@@ -91,6 +97,7 @@ export function DesktopUpdateConfig() {
   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;
 
@@ -124,7 +131,7 @@ export function DesktopUpdateConfig() {
             </span>
           </div>
 
-          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-5">
             <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">{t('desktopUpdatesLauncherVersion')}</p>
               <p className="mt-2 text-base font-semibold text-gray-900">{formatVersion(snapshot.launcherVersion)}</p>
@@ -141,8 +148,19 @@ export function DesktopUpdateConfig() {
               <p className="text-xs font-medium uppercase tracking-[0.08em] text-gray-500">{t('desktopUpdatesLastCheckedAt')}</p>
               <p className="mt-2 text-base font-semibold text-gray-900">{formatLastCheckedAt(snapshot.lastCheckedAt)}</p>
             </div>
+            <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">{t('desktopUpdatesCurrentChannel')}</p>
+              <p className="mt-2 text-base font-semibold text-gray-900">{getChannelLabel(snapshot.channel)}</p>
+            </div>
           </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>
@@ -166,6 +184,29 @@ export function DesktopUpdateConfig() {
           <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>
+
           <div className="flex items-start justify-between gap-4 rounded-xl border border-gray-200 p-4">
             <div className="space-y-1">
               <Label>{t('desktopUpdatesAutomaticChecks')}</Label>
@@ -173,7 +214,7 @@ export function DesktopUpdateConfig() {
             </div>
             <Switch
               checked={snapshot.preferences.automaticChecks}
-              disabled={isSavingPreferences}
+              disabled={isSavingPreferences || isSwitchingChannel}
               onCheckedChange={(checked) => void desktopUpdateManager.updatePreferences({ automaticChecks: checked })}
             />
           </div>
@@ -185,7 +226,7 @@ export function DesktopUpdateConfig() {
             </div>
             <Switch
               checked={snapshot.preferences.autoDownload}
-              disabled={isSavingPreferences}
+              disabled={isSavingPreferences || isSwitchingChannel}
               onCheckedChange={(checked) => void desktopUpdateManager.updatePreferences({ autoDownload: checked })}
             />
           </div>

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