feat: add Electron desktop app

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>

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