feat: add desktop computer use runtime

src/components/settings/view/Settings.tsx

@@ -8,6 +8,7 @@ import AppearanceSettingsTab from '../view/tabs/AppearanceSettingsTab';
 import CredentialsSettingsTab from '../view/tabs/api-settings/CredentialsSettingsTab';
 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';
@@ -142,6 +143,8 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }: Set
 
               {activeTab === 'browser' && <BrowserUseSettingsTab />}
 
+              {activeTab === 'computer' && <ComputerUseSettingsTab />}
+
               {activeTab === 'notifications' && (
                 <NotificationsSettingsTab
                   notificationPreferences={notificationPreferences}

src/components/settings/view/SettingsSidebar.tsx

@@ -1,4 +1,4 @@
-import { Bell, Bot, GitBranch, Info, Key, ListChecks, MonitorPlay, Palette, Puzzle } from 'lucide-react';
+import { Bell, Bot, GitBranch, Info, Key, ListChecks, MonitorCog, MonitorPlay, Palette, Puzzle } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { cn } from '../../../lib/utils';
 import { PillBar, Pill } from '../../../shared/view/ui';
@@ -22,6 +22,7 @@ const NAV_ITEMS: NavItem[] = [
   { id: 'api', labelKey: 'mainTabs.apiTokens', icon: Key },
   { 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 },

src/components/settings/view/tabs/computer-use-settings/ComputerUseSettingsTab.tsx

@@ -0,0 +1,189 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Download, Loader2 } 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;
+  agentToolsEnabled: boolean;
+};
+
+type ComputerUseStatus = {
+  enabled: boolean;
+  runtime: 'cloud' | 'local';
+  available: boolean;
+  nutInstalled: boolean;
+  screenshotInstalled: boolean;
+  installInProgress: boolean;
+  agentToolsEnabled: 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, agentToolsEnabled: 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);
+  }, []);
+
+  useEffect(() => {
+    setIsLoading(true);
+    void loadState()
+      .catch((err) => setError(err instanceof Error ? err.message : 'Failed to load Computer Use settings'))
+      .finally(() => setIsLoading(false));
+  }, [loadState]);
+
+  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 needsRuntime = Boolean(settings.enabled && !isCloud && status && (!status.nutInstalled || !status.screenshotInstalled));
+
+  return (
+    <div className="space-y-8">
+      <SettingsSection
+        title="Computer Use"
+        description="Let agents see your desktop and drive the mouse and keyboard through a guarded, consent-gated control loop."
+      >
+        <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">
+              Computer Use can control your entire desktop. Agents act only while you grant control from the
+              Computer panel, and any action stops the moment you press Stop.
+            </div>
+          </div>
+
+          <SettingsRow
+            label="Enable Computer Use"
+            description="Allow CloudCLI to capture the screen and create desktop control sessions on this machine."
+          >
+            <SettingsToggle
+              checked={settings.enabled}
+              onChange={(value) => void updateSettings({ enabled: value })}
+              ariaLabel="Enable Computer Use"
+              disabled={isLoading || isSaving}
+            />
+          </SettingsRow>
+
+          <SettingsRow
+            label="Enable Computer Tools for Agents"
+            description="Register the Computer Use MCP server for all agent providers. Agents can request desktop control, but actions require your explicit per-session consent."
+          >
+            <SettingsToggle
+              checked={settings.agentToolsEnabled}
+              onChange={(value) => void updateSettings({ agentToolsEnabled: value })}
+              ariaLabel="Enable Computer Tools for Agents"
+              disabled={isLoading || isSaving || !settings.enabled}
+            />
+          </SettingsRow>
+
+          {(needsRuntime || isCloud || error) && (
+            <div className="space-y-4 px-4 py-4">
+              {isCloud && (
+                <div className="rounded-md border border-border bg-muted/40 px-3 py-2 text-sm text-muted-foreground">
+                  {status?.message || 'Cloud Computer Use requires a linked CloudCLI Desktop Agent on the user machine.'}
+                </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>
+  );
+}