feat: add Electron desktop app

2026-07-01 10:02:57 +08:00 · 2026-06-29 09:37:21 +00:00
parent ed4ae3114a
commit 97c9b67bfc
127 changed files with 15356 additions and 481 deletions
--- a/src/components/settings/hooks/useSettingsController.ts
+++ b/src/components/settings/hooks/useSettingsController.ts
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';

 import { useTheme } from '../../../contexts/ThemeContext';
+import { COMPUTER_USE_MENUS_ENABLED } from '../../../constants/featureFlags';
 import { authenticatedFetch } from '../../../utils/api';
 import { setNotificationSoundEnabled } from '../../../utils/notificationSound';
 import { useProviderAuthStatus } from '../../provider-auth/hooks/useProviderAuthStatus';
@@ -54,11 +55,11 @@ type NotificationPreferencesResponse = {

 type ActiveLoginProvider = AgentProvider | '';

-const KNOWN_MAIN_TABS: SettingsMainTab[] = ['agents', 'appearance', 'git', 'api', 'tasks', 'browser', 'notifications', 'plugins', 'about'];
+const KNOWN_MAIN_TABS: SettingsMainTab[] = ['agents', 'appearance', 'git', 'api', 'tasks', 'browser', 'computer', 'notifications', 'plugins', 'about'];

 const normalizeMainTab = (tab: string): SettingsMainTab => {
  // Keep backwards compatibility with older callers that still pass "tools".
-  if (tab === 'tools') {
+  if (tab === 'tools' || (tab === 'computer' && !COMPUTER_USE_MENUS_ENABLED)) {
    return 'agents';
  }

@@ -109,6 +110,7 @@ const createDefaultNotificationPreferences = (): NotificationPreferencesState =>
  channels: {
    inApp: true,
    webPush: false,
+    desktop: false,
    sound: true,
  },
  events: {
@@ -127,6 +129,7 @@ const normalizeNotificationPreferences = (
    channels: {
      inApp: preferences?.channels?.inApp ?? defaults.channels.inApp,
      webPush: preferences?.channels?.webPush ?? defaults.channels.webPush,
+      desktop: preferences?.channels?.desktop ?? defaults.channels.desktop,
      sound: preferences?.channels?.sound ?? defaults.channels.sound,
    },
    events: {
--- a/src/components/settings/types/types.ts
+++ b/src/components/settings/types/types.ts
@@ -3,7 +3,7 @@ import type { Dispatch, SetStateAction } from 'react';
 import type { LLMProvider } from '../../../types/app';
 import type { ProviderAuthStatus } from '../../provider-auth/types';

-export type SettingsMainTab = 'agents' | 'appearance' | 'git' | 'api' | 'voice' | 'tasks' | 'browser' | 'notifications' | 'plugins' | 'about';
+export type SettingsMainTab = 'agents' | 'appearance' | 'git' | 'api' | 'voice' | 'tasks' | 'browser' |  'computer' | 'notifications' | 'plugins' | 'about';
 export type AgentProvider = LLMProvider;
 export type AgentCategory = 'account' | 'permissions' | 'mcp' | 'skills';
 export type ProjectSortOrder = 'name' | 'date';
@@ -30,6 +30,7 @@ export type NotificationPreferencesState = {
  channels: {
    inApp: boolean;
    webPush: boolean;
+    desktop: boolean;
    sound: boolean;
  };
  events: {
--- a/src/components/settings/view/Settings.tsx
+++ b/src/components/settings/view/Settings.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useMemo, useState } from 'react';
 import { X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';

@@ -10,6 +11,7 @@ import CredentialsSettingsTab from '../view/tabs/api-settings/CredentialsSetting
 import VoiceSettingsTab from '../view/tabs/VoiceSettingsTab';
 import GitSettingsTab from '../view/tabs/git-settings/GitSettingsTab';
 import BrowserUseSettingsTab from '../view/tabs/browser-use-settings/BrowserUseSettingsTab';
+import ComputerUseSettingsTab from '../view/tabs/computer-use-settings/ComputerUseSettingsTab';
 import NotificationsSettingsTab from '../view/tabs/NotificationsSettingsTab';
 import TasksSettingsTab from '../view/tabs/tasks-settings/TasksSettingsTab';
 import PluginSettingsTab from '../../plugins/view/PluginSettingsTab';
@@ -18,8 +20,22 @@ import { useSettingsController } from '../hooks/useSettingsController';
 import { useWebPush } from '../../../hooks/useWebPush';
 import type { SettingsProps } from '../types/types';

+type DesktopNotificationsState = {
+  enabled: boolean;
+  supported: boolean;
+  connectedCount?: number;
+  targetCount?: number;
+  lastError?: string | null;
+};
+
 function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }: SettingsProps) {
  const { t } = useTranslation('settings');
+  const desktopNotificationsBridge = useMemo(() => (
+    typeof window === 'undefined'
+      ? null
+      : ((window as any).cloudcliDesktopNotifications || null)
+  ), []);
+  const [desktopNotificationsState, setDesktopNotificationsState] = useState<DesktopNotificationsState | null>(null);
  const {
    activeTab,
    setActiveTab,
@@ -75,6 +91,45 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }: Set
    });
  };

+  useEffect(() => {
+    if (!desktopNotificationsBridge) return undefined;
+    let mounted = true;
+    desktopNotificationsBridge.getState().then((state: any) => {
+      if (mounted) {
+        setDesktopNotificationsState(state?.desktopNotifications || null);
+      }
+    }).catch(() => {});
+    const unsubscribe = desktopNotificationsBridge.onStateUpdated?.((state: any) => {
+      if (mounted) {
+        setDesktopNotificationsState(state?.desktopNotifications || null);
+      }
+    });
+    return () => {
+      mounted = false;
+      unsubscribe?.();
+    };
+  }, [desktopNotificationsBridge]);
+
+  const handleEnableDesktopNotifications = async () => {
+    if (!desktopNotificationsBridge) return;
+    const state = await desktopNotificationsBridge.update({ enabled: true });
+    setDesktopNotificationsState(state?.desktopNotifications || null);
+    setNotificationPreferences({
+      ...notificationPreferences,
+      channels: { ...notificationPreferences.channels, desktop: true },
+    });
+  };
+
+  const handleDisableDesktopNotifications = async () => {
+    if (!desktopNotificationsBridge) return;
+    const state = await desktopNotificationsBridge.update({ enabled: false });
+    setDesktopNotificationsState(state?.desktopNotifications || null);
+    setNotificationPreferences({
+      ...notificationPreferences,
+      channels: { ...notificationPreferences.channels, desktop: false },
+    });
+  };
+
  if (!isOpen) {
    return null;
  }
@@ -144,6 +199,8 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }: Set

              {activeTab === 'browser' && <BrowserUseSettingsTab />}

+              {activeTab === 'computer' && <ComputerUseSettingsTab />}
+
              {activeTab === 'notifications' && (
                <NotificationsSettingsTab
                  notificationPreferences={notificationPreferences}
@@ -153,6 +210,10 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }: Set
                  isPushLoading={isPushLoading}
                  onEnablePush={handleEnablePush}
                  onDisablePush={handleDisablePush}
+                  isDesktop={Boolean(desktopNotificationsBridge)}
+                  desktopNotifications={desktopNotificationsState}
+                  onEnableDesktopNotifications={handleEnableDesktopNotifications}
+                  onDisableDesktopNotifications={handleDisableDesktopNotifications}
                />
              )}

--- a/src/components/settings/view/SettingsSidebar.tsx
+++ b/src/components/settings/view/SettingsSidebar.tsx
@@ -1,6 +1,7 @@
-import { Bell, Bot, GitBranch, Info, Key, ListChecks, Mic, MonitorPlay, Palette, Puzzle } from 'lucide-react';
+import { Bell, Bot, GitBranch, Info, Key, ListChecks,Mic, MonitorCog, MonitorPlay, Palette, Puzzle } from 'lucide-react';
 import { useTranslation } from 'react-i18next';

+import { COMPUTER_USE_MENUS_ENABLED } from '../../../constants/featureFlags';
 import { cn } from '../../../lib/utils';
 import { PillBar, Pill } from '../../../shared/view/ui';
 import type { SettingsMainTab } from '../types/types';
@@ -24,11 +25,16 @@ const NAV_ITEMS: NavItem[] = [
  { id: 'voice', labelKey: 'mainTabs.voice', icon: Mic },
  { id: 'tasks', labelKey: 'mainTabs.tasks', icon: ListChecks },
  { id: 'browser', labelKey: 'mainTabs.browser', icon: MonitorPlay },
+  { id: 'computer', labelKey: 'mainTabs.computer', icon: MonitorCog },
  { id: 'plugins', labelKey: 'mainTabs.plugins', icon: Puzzle },
  { id: 'notifications', labelKey: 'mainTabs.notifications', icon: Bell },
  { id: 'about', labelKey: 'mainTabs.about', icon: Info },
 ];

+const VISIBLE_NAV_ITEMS = NAV_ITEMS.filter((item) => (
+  COMPUTER_USE_MENUS_ENABLED || item.id !== 'computer'
+));
+
 export default function SettingsSidebar({ activeTab, onChange }: SettingsSidebarProps) {
  const { t } = useTranslation('settings');

@@ -37,7 +43,7 @@ export default function SettingsSidebar({ activeTab, onChange }: SettingsSidebar
      {/* Desktop sidebar */}
      <aside className="hidden w-56 flex-shrink-0 border-r border-border bg-muted/30 md:flex md:flex-col">
        <nav className="flex flex-col gap-1 p-3">
-          {NAV_ITEMS.map((item) => {
+          {VISIBLE_NAV_ITEMS.map((item) => {
            const Icon = item.icon;
            const isActive = activeTab === item.id;

@@ -63,7 +69,7 @@ export default function SettingsSidebar({ activeTab, onChange }: SettingsSidebar
      {/* Mobile horizontal nav — pill bar */}
      <div className="flex-shrink-0 border-b border-border px-3 py-2 md:hidden">
        <PillBar className="scrollbar-hide w-full overflow-x-auto">
-          {NAV_ITEMS.map((item) => {
+          {VISIBLE_NAV_ITEMS.map((item) => {
            const Icon = item.icon;

            return (
--- a/src/components/settings/view/tabs/NotificationsSettingsTab.tsx
+++ b/src/components/settings/view/tabs/NotificationsSettingsTab.tsx
@@ -13,6 +13,16 @@ type NotificationsSettingsTabProps = {
  isPushLoading: boolean;
  onEnablePush: () => void;
  onDisablePush: () => void;
+  isDesktop?: boolean;
+  desktopNotifications?: {
+    enabled: boolean;
+    supported: boolean;
+    connectedCount?: number;
+    targetCount?: number;
+    lastError?: string | null;
+  } | null;
+  onEnableDesktopNotifications?: () => void;
+  onDisableDesktopNotifications?: () => void;
 };

 export default function NotificationsSettingsTab({
@@ -23,6 +33,10 @@ export default function NotificationsSettingsTab({
  isPushLoading,
  onEnablePush,
  onDisablePush,
+  isDesktop = false,
+  desktopNotifications = null,
+  onEnableDesktopNotifications,
+  onDisableDesktopNotifications,
 }: NotificationsSettingsTabProps) {
  const { t } = useTranslation('settings');

@@ -33,57 +47,107 @@ export default function NotificationsSettingsTab({
    <div className="space-y-6 md:space-y-8">
      <div className="space-y-4">
        <div className="flex items-center gap-3">
-          <Bell className="w-5 h-5 text-blue-600" />
+          <Bell className="h-5 w-5 text-blue-600" />
          <h3 className="text-lg font-medium text-foreground">{t('notifications.title')}</h3>
        </div>
        <p className="text-sm text-muted-foreground">{t('notifications.description')}</p>
      </div>

-      <div className="space-y-4 bg-card border border-border rounded-lg p-4">
-        <h4 className="font-medium text-foreground">{t('notifications.webPush.title')}</h4>
-        {!pushSupported ? (
-          <p className="text-sm text-muted-foreground">{t('notifications.webPush.unsupported')}</p>
-        ) : pushDenied ? (
-          <p className="text-sm text-muted-foreground">{t('notifications.webPush.denied')}</p>
-        ) : (
-          <div className="flex items-center gap-3">
-            <button
-              type="button"
-              disabled={isPushLoading}
-              onClick={() => {
-                if (isPushSubscribed) {
-                  onDisablePush();
-                } else {
-                  onEnablePush();
-                }
-              }}
-              className={`inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed ${
-                isPushSubscribed
-                  ? 'bg-red-100 text-red-700 hover:bg-red-200 dark:bg-red-900/30 dark:text-red-400 dark:hover:bg-red-900/50'
-                  : 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600'
-              }`}
-            >
-              {isPushLoading ? (
-                <Loader2 className="w-4 h-4 animate-spin" />
-              ) : isPushSubscribed ? (
-                <BellOff className="w-4 h-4" />
-              ) : (
-                <BellRing className="w-4 h-4" />
+      {isDesktop ? (
+        <div className="space-y-4 rounded-lg border border-border bg-card p-4">
+          <h4 className="font-medium text-foreground">
+            {t('notifications.desktop.title', { defaultValue: 'Notify this desktop app' })}
+          </h4>
+          {desktopNotifications?.supported === false ? (
+            <p className="text-sm text-muted-foreground">
+              {t('notifications.desktop.unsupported', { defaultValue: 'Desktop notifications are not supported on this system.' })}
+            </p>
+          ) : (
+            <div className="space-y-2">
+              <div className="flex items-center gap-3">
+                <button
+                  type="button"
+                  onClick={() => {
+                    if (desktopNotifications?.enabled) {
+                      onDisableDesktopNotifications?.();
+                    } else {
+                      onEnableDesktopNotifications?.();
+                    }
+                  }}
+                  className={`inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors ${
+                    desktopNotifications?.enabled
+                      ? 'bg-red-100 text-red-700 hover:bg-red-200 dark:bg-red-900/30 dark:text-red-400 dark:hover:bg-red-900/50'
+                      : 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600'
+                  }`}
+                >
+                  {desktopNotifications?.enabled ? (
+                    <BellOff className="h-4 w-4" />
+                  ) : (
+                    <BellRing className="h-4 w-4" />
+                  )}
+                  {desktopNotifications?.enabled
+                    ? t('notifications.desktop.disable', { defaultValue: 'Disable desktop notifications' })
+                    : t('notifications.desktop.enable', { defaultValue: 'Enable desktop notifications' })}
+                </button>
+                {desktopNotifications?.enabled && (
+                  <span className="text-sm text-green-600 dark:text-green-400">
+                    {t('notifications.desktop.enabled', { defaultValue: 'Desktop notifications are enabled' })}
+                  </span>
+                )}
+              </div>
+              {desktopNotifications?.lastError && (
+                <p className="text-sm text-red-600 dark:text-red-400">{desktopNotifications.lastError}</p>
              )}
-              {isPushLoading
-                ? t('notifications.webPush.loading')
-                : isPushSubscribed
-                  ? t('notifications.webPush.disable')
-                  : t('notifications.webPush.enable')}
-            </button>
-            {isPushSubscribed && (
-              <span className="text-sm text-green-600 dark:text-green-400">
-                {t('notifications.webPush.enabled')}
-              </span>
-            )}
-          </div>
-        )}
-      </div>
+            </div>
+          )}
+        </div>
+      ) : (
+        <div className="space-y-4 rounded-lg border border-border bg-card p-4">
+          <h4 className="font-medium text-foreground">{t('notifications.webPush.title')}</h4>
+          {!pushSupported ? (
+            <p className="text-sm text-muted-foreground">{t('notifications.webPush.unsupported')}</p>
+          ) : pushDenied ? (
+            <p className="text-sm text-muted-foreground">{t('notifications.webPush.denied')}</p>
+          ) : (
+            <div className="flex items-center gap-3">
+              <button
+                type="button"
+                disabled={isPushLoading}
+                onClick={() => {
+                  if (isPushSubscribed) {
+                    onDisablePush();
+                  } else {
+                    onEnablePush();
+                  }
+                }}
+                className={`inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${
+                  isPushSubscribed
+                    ? 'bg-red-100 text-red-700 hover:bg-red-200 dark:bg-red-900/30 dark:text-red-400 dark:hover:bg-red-900/50'
+                    : 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600'
+                }`}
+              >
+                {isPushLoading ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : isPushSubscribed ? (
+                  <BellOff className="h-4 w-4" />
+                ) : (
+                  <BellRing className="h-4 w-4" />
+                )}
+                {isPushLoading
+                  ? t('notifications.webPush.loading')
+                  : isPushSubscribed
+                    ? t('notifications.webPush.disable')
+                    : t('notifications.webPush.enable')}
+              </button>
+              {isPushSubscribed && (
+                <span className="text-sm text-green-600 dark:text-green-400">
+                  {t('notifications.webPush.enabled')}
+                </span>
+              )}
+            </div>
+          )}
+        </div>
+      )}

      <div className="space-y-4 rounded-lg border border-border bg-card p-4">
        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
@@ -133,7 +197,7 @@ export default function NotificationsSettingsTab({
        </Button>
      </div>

-      <div className="space-y-4 bg-card border border-border rounded-lg p-4">
+      <div className="space-y-4 rounded-lg border border-border bg-card p-4">
        <h4 className="font-medium text-foreground">{t('notifications.events.title')}</h4>
        <div className="space-y-3">
          <label className="flex items-center gap-2 text-sm text-foreground">
@@ -149,7 +213,7 @@ export default function NotificationsSettingsTab({
                  },
                })
              }
-              className="w-4 h-4"
+              className="h-4 w-4"
            />
            {t('notifications.events.actionRequired')}
          </label>
@@ -167,7 +231,7 @@ export default function NotificationsSettingsTab({
                  },
                })
              }
-              className="w-4 h-4"
+              className="h-4 w-4"
            />
            {t('notifications.events.stop')}
          </label>
@@ -185,7 +249,7 @@ export default function NotificationsSettingsTab({
                  },
                })
              }
-              className="w-4 h-4"
+              className="h-4 w-4"
            />
            {t('notifications.events.error')}
          </label>
--- a/src/components/settings/view/tabs/computer-use-settings/ComputerUseSettingsTab.tsx
+++ b/src/components/settings/view/tabs/computer-use-settings/ComputerUseSettingsTab.tsx
@@ -0,0 +1,247 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Download, Loader2, RefreshCw } from 'lucide-react';
+
+import { Button } from '../../../../../shared/view/ui';
+import { authenticatedFetch } from '../../../../../utils/api';
+import SettingsCard from '../../SettingsCard';
+import SettingsRow from '../../SettingsRow';
+import SettingsSection from '../../SettingsSection';
+import SettingsToggle from '../../SettingsToggle';
+
+type ComputerUseSettings = {
+  enabled: boolean;
+};
+
+type ComputerUseStatus = {
+  enabled: boolean;
+  runtime: 'cloud' | 'local';
+  available: boolean;
+  desktopAgentConnected?: boolean;
+  desktopAgentCount?: number;
+  nutInstalled: boolean;
+  screenshotInstalled: boolean;
+  installInProgress: boolean;
+  message: string;
+};
+
+async function readJson<T>(response: Response): Promise<T> {
+  const data = await response.json();
+  if (!response.ok || data.success === false) {
+    throw new Error(data.error || data.details || `Request failed (${response.status})`);
+  }
+  return data as T;
+}
+
+export default function ComputerUseSettingsTab() {
+  const [settings, setSettings] = useState<ComputerUseSettings>({ enabled: false });
+  const [status, setStatus] = useState<ComputerUseStatus | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+  const [isInstalling, setIsInstalling] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadState = useCallback(async () => {
+    setError(null);
+    const [settingsResponse, statusResponse] = await Promise.all([
+      authenticatedFetch('/api/computer-use/settings'),
+      authenticatedFetch('/api/computer-use/status'),
+    ]);
+    const settingsData = await readJson<{ data: { settings: ComputerUseSettings } }>(settingsResponse);
+    const statusData = await readJson<{ data: ComputerUseStatus }>(statusResponse);
+    setSettings(settingsData.data.settings);
+    setStatus(statusData.data);
+  }, []);
+
+  const refreshState = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      await loadState();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load Computer Use settings');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [loadState]);
+
+  useEffect(() => {
+    void refreshState();
+  }, [refreshState]);
+
+  const updateSettings = async (nextSettings: Partial<ComputerUseSettings>) => {
+    setIsSaving(true);
+    setError(null);
+    try {
+      const response = await authenticatedFetch('/api/computer-use/settings', {
+        method: 'PUT',
+        body: JSON.stringify(nextSettings),
+      });
+      const data = await readJson<{ data: { settings: ComputerUseSettings } }>(response);
+      setSettings(data.data.settings);
+      window.dispatchEvent(new Event('computerUseSettingsChanged'));
+      await loadState();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to save Computer Use settings');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const installRuntime = async () => {
+    setIsInstalling(true);
+    setError(null);
+    try {
+      const response = await authenticatedFetch('/api/computer-use/runtime/install', { method: 'POST' });
+      await readJson(response);
+      await loadState();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to install Computer Use runtime');
+    } finally {
+      setIsInstalling(false);
+    }
+  };
+
+  const isCloud = status?.runtime === 'cloud';
+  const effectiveEnabled = isCloud ? status?.enabled === true : settings.enabled;
+  const showCloudDesktopAccess = Boolean(isCloud && effectiveEnabled);
+  const needsRuntime = Boolean(effectiveEnabled && !isCloud && status && (!status.nutInstalled || !status.screenshotInstalled));
+  const desktopAgentCount = status?.desktopAgentCount ?? (status?.desktopAgentConnected ? 1 : 0);
+  const modeDescription = isCloud
+    ? 'Let cloud agents request access to your own computer through CloudCLI Desktop.'
+    : 'Let local agents request access to this computer.';
+
+  return (
+    <div className="space-y-8">
+      <SettingsSection
+        title="Computer Use"
+        description={modeDescription}
+      >
+        <SettingsCard divided>
+          <div className="flex flex-col gap-3 px-4 py-4">
+            <div className="rounded-md border border-amber-300/50 bg-amber-50 px-3 py-2 text-sm text-amber-800 dark:border-amber-900/50 dark:bg-amber-950/30 dark:text-amber-200">
+              {isCloud
+                ? 'A cloud agent can use your desktop only after you approve the request in CloudCLI Desktop. Stop ends access immediately.'
+                : 'Agents can use your desktop only while you grant control from the Computer tab. Stop ends access immediately.'}
+            </div>
+            {effectiveEnabled && (
+              <div className="rounded-md border border-border bg-muted/40 px-3 py-2 text-sm text-muted-foreground">
+                {isCloud
+                  ? 'Keep CloudCLI Desktop open on the computer you want agents to use.'
+                  : 'Open the Computer tab to review requests, grant control, or stop a session.'}
+              </div>
+            )}
+          </div>
+
+          <SettingsRow
+            label="Enable Computer Use"
+            description={isCloud
+              ? 'Registers Computer Use MCP servers for supported agents and allows cloud agents to request guarded access to a linked desktop.'
+              : 'Registers Computer Use for supported agents and allows CloudCLI to create guarded desktop control sessions on this machine.'}
+          >
+            <SettingsToggle
+              checked={settings.enabled}
+              onChange={(value) => void updateSettings({ enabled: value })}
+              ariaLabel="Enable Computer Use"
+              disabled={isLoading || isSaving}
+            />
+          </SettingsRow>
+
+          {showCloudDesktopAccess && (
+            <SettingsRow
+              label="Cloud desktop access"
+              description={status?.desktopAgentConnected
+                ? `${desktopAgentCount} ${desktopAgentCount === 1 ? 'desktop app is' : 'desktop apps are'} connected to this environment.`
+                : 'Not connected yet. Link happens from CloudCLI Desktop on your computer.'}
+            >
+              <div className="flex items-center gap-2">
+                <Button
+                  type="button"
+                  size="sm"
+                  onClick={() => void refreshState()}
+                  disabled={isLoading}
+                  className="h-8"
+                >
+                  <RefreshCw className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
+                  Refresh
+                </Button>
+                <div className={`rounded-md border px-2.5 py-1 text-xs font-medium ${
+                  status?.desktopAgentConnected
+                    ? 'border-emerald-500/30 text-emerald-600 dark:text-emerald-300'
+                    : 'border-amber-500/30 text-amber-600 dark:text-amber-300'
+                }`}
+                >
+                  {status?.desktopAgentConnected
+                    ? `${desktopAgentCount} linked`
+                    : 'Not linked'}
+                </div>
+              </div>
+            </SettingsRow>
+          )}
+
+          {(needsRuntime || showCloudDesktopAccess || error) && (
+            <div className="space-y-4 px-4 py-4">
+              {showCloudDesktopAccess && !status?.desktopAgentConnected && (
+                <div className="rounded-md border border-border bg-muted/40 px-3 py-3 text-sm text-muted-foreground">
+                  <div className="font-medium text-foreground">To link this computer</div>
+                  <ol className="mt-2 list-decimal space-y-1 pl-5">
+                    <li>Open CloudCLI Desktop on the computer you want agents to use.</li>
+                    <li>Connect the same CloudCLI account used for this cloud environment.</li>
+                    <li>Open Desktop Settings and turn on Computer Use.</li>
+                    <li>Keep the desktop app running. This status changes to Desktop linked automatically.</li>
+                  </ol>
+                </div>
+              )}
+
+              {showCloudDesktopAccess && status?.desktopAgentConnected && (
+                <div className="rounded-md border border-border bg-muted/40 px-3 py-2 text-sm text-muted-foreground">
+                  {desktopAgentCount > 1
+                    ? `${desktopAgentCount} desktops are linked. Agents will use one available desktop; stop Computer Use on any desktop you do not want agents to control.`
+                    : 'CloudCLI Desktop is linked. Approval prompts will appear there when an agent requests desktop access.'}
+                </div>
+              )}
+
+              {needsRuntime && (
+                <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+                  <div className="min-w-0 space-y-1">
+                    <div className="text-sm font-medium text-foreground">Desktop runtime required</div>
+                    <p className="text-sm text-muted-foreground">
+                      {status?.message || 'Install the desktop control runtime needed to capture the screen and drive input.'}
+                    </p>
+                    <div className="flex flex-wrap gap-2 pt-1 text-xs text-muted-foreground">
+                      <span className="rounded-md border border-border px-2 py-1">
+                        Control lib: {status?.nutInstalled ? 'installed' : 'missing'}
+                      </span>
+                      <span className="rounded-md border border-border px-2 py-1">
+                        Screen capture: {status?.screenshotInstalled ? 'installed' : 'missing'}
+                      </span>
+                    </div>
+                  </div>
+
+                  <Button
+                    type="button"
+                    size="sm"
+                    onClick={() => void installRuntime()}
+                    disabled={isInstalling || status?.installInProgress}
+                    className="flex-shrink-0"
+                  >
+                    {isInstalling || status?.installInProgress ? (
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                    ) : (
+                      <Download className="h-4 w-4" />
+                    )}
+                    {isInstalling || status?.installInProgress ? 'Installing…' : 'Install Runtime'}
+                  </Button>
+                </div>
+              )}
+
+              {error && (
+                <div className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700 dark:border-red-900/50 dark:bg-red-950/30 dark:text-red-200">
+                  {error}
+                </div>
+              )}
+            </div>
+          )}
+        </SettingsCard>
+      </SettingsSection>
+    </div>
+  );
+}