feat: add electron app support

src/components/computer-use/index.ts

@@ -0,0 +1 @@
+export { default as ComputerUsePanel } from './view/ComputerUsePanel';

src/components/computer-use/view/ComputerUsePanel.tsx

@@ -0,0 +1,132 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Cable, MonitorCog, RefreshCw, ShieldCheck } from 'lucide-react';
+
+import { Badge, Button } from '../../../shared/view/ui';
+import { authenticatedFetch } from '../../../utils/api';
+
+type ComputerUseStatus = {
+  available: boolean;
+  bridgeConnected: boolean;
+  runtime: 'cloud' | 'local';
+  requiresDesktopBridge: boolean;
+  message: string;
+  capabilities: {
+    screenshots: boolean;
+    mouse: boolean;
+    keyboard: boolean;
+    clipboard: boolean;
+    stopControl: boolean;
+  };
+};
+
+type ComputerUsePanelProps = {
+  isVisible: boolean;
+};
+
+async function readStatus(response: Response): Promise<ComputerUseStatus> {
+  const data = await response.json();
+  if (!response.ok || data.success === false) {
+    throw new Error(data.error || `Request failed (${response.status})`);
+  }
+  return data.data;
+}
+
+export default function ComputerUsePanel({ isVisible }: ComputerUsePanelProps) {
+  const [status, setStatus] = useState<ComputerUseStatus | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const refresh = useCallback(async () => {
+    setError(null);
+    try {
+      const response = await authenticatedFetch('/api/computer-use/status');
+      setStatus(await readStatus(response));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load Computer Use status');
+    }
+  }, []);
+
+  useEffect(() => {
+    if (isVisible) {
+      void refresh();
+    }
+  }, [isVisible, refresh]);
+
+  const capabilities = status?.capabilities || {
+    screenshots: false,
+    mouse: false,
+    keyboard: false,
+    clipboard: false,
+    stopControl: false,
+  };
+
+  return (
+    <div className="flex h-full min-h-0 flex-col bg-background">
+      <div className="flex flex-wrap items-center justify-between gap-3 border-b border-border/60 px-4 py-3">
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <MonitorCog className="h-4 w-4 text-primary" />
+            <h3 className="text-sm font-semibold text-foreground">Computer Use</h3>
+            {status && <Badge variant="outline" className="text-[11px]">{status.runtime}</Badge>}
+          </div>
+          <p className="mt-0.5 text-xs text-muted-foreground">
+            Local desktop control through a user-approved CloudCLI Desktop Agent.
+          </p>
+        </div>
+        <Button variant="outline" size="sm" onClick={() => void refresh()}>
+          <RefreshCw className="h-4 w-4" />
+          Refresh
+        </Button>
+      </div>
+
+      {error && (
+        <div className="border-b border-red-200 bg-red-50 px-4 py-2 text-sm text-red-700 dark:border-red-900/50 dark:bg-red-950/30 dark:text-red-200">
+          {error}
+        </div>
+      )}
+
+      <div className="grid flex-1 grid-cols-1 gap-4 overflow-auto p-4 xl:grid-cols-[minmax(0,1fr)_340px]">
+        <section className="rounded-lg border border-border bg-card/40 p-5">
+          <div className="flex items-start gap-3">
+            <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
+              <Cable className="h-5 w-5" />
+            </div>
+            <div className="min-w-0 flex-1">
+              <div className="flex flex-wrap items-center gap-2">
+                <h4 className="text-sm font-semibold text-foreground">Desktop bridge</h4>
+                <Badge variant={status?.bridgeConnected ? 'default' : 'outline'} className="text-[11px]">
+                  {status?.bridgeConnected ? 'connected' : 'not connected'}
+                </Badge>
+              </div>
+              <p className="mt-2 max-w-3xl text-sm leading-relaxed text-muted-foreground">
+                {status?.message || 'Loading Computer Use status...'}
+              </p>
+              <div className="mt-4 rounded-lg border border-dashed border-border/70 bg-background/60 p-4">
+                <div className="text-sm font-medium text-foreground">Architecture boundary</div>
+                <p className="mt-1 text-sm leading-relaxed text-muted-foreground">
+                  Hosted CloudCLI can request Computer Use only through a linked local agent. The hosted server should never receive a permanent raw ability to control a user machine.
+                </p>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <aside className="rounded-lg border border-border bg-card/40 p-4">
+          <div className="flex items-center gap-2">
+            <ShieldCheck className="h-4 w-4 text-primary" />
+            <h4 className="text-sm font-semibold text-foreground">Required controls</h4>
+          </div>
+          <div className="mt-3 space-y-2">
+            {Object.entries(capabilities).map(([name, enabled]) => (
+              <div key={name} className="flex items-center justify-between rounded-md border border-border/60 px-3 py-2 text-sm">
+                <span className="capitalize text-foreground">{name.replace(/([A-Z])/g, ' $1')}</span>
+                <Badge variant={enabled ? 'default' : 'outline'} className="text-[10px]">
+                  {enabled ? 'ready' : 'blocked'}
+                </Badge>
+              </div>
+            ))}
+          </div>
+        </aside>
+      </div>
+    </div>
+  );
+}

src/components/main-content/view/MainContent.tsx

@@ -6,6 +6,7 @@ import StandaloneShell from '../../standalone-shell/view/StandaloneShell';
 import GitPanel from '../../git-panel/view/GitPanel';
 import PluginTabContent from '../../plugins/view/PluginTabContent';
 import { BrowserUsePanel } from '../../browser-use';
+import { ComputerUsePanel } from '../../computer-use';
 import type { MainContentProps } from '../types/types';
 import { useTaskMaster } from '../../../contexts/TaskMasterContext';
 import { usePaletteOpsRegister } from '../../../contexts/PaletteOpsContext';
@@ -178,6 +179,12 @@ function MainContent({
             </div>
           )}
 
+          {activeTab === 'computer' && (
+            <div className="h-full overflow-hidden">
+              <ComputerUsePanel isVisible={activeTab === 'computer'} />
+            </div>
+          )}
+
           {activeTab.startsWith('plugin:') && (
             <div className="h-full overflow-hidden">
               <PluginTabContent

src/components/main-content/view/subcomponents/MainContentTabSwitcher.tsx

@@ -1,4 +1,4 @@
-import { MessageSquare, Terminal, Folder, GitBranch, ClipboardCheck, MonitorPlay, type LucideIcon } from 'lucide-react';
+import { MessageSquare, Terminal, Folder, GitBranch, ClipboardCheck, MonitorCog, MonitorPlay, type LucideIcon } from 'lucide-react';
 import type { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -36,6 +36,7 @@ const BASE_TABS: BuiltInTab[] = [
   { kind: 'builtin', id: 'files', labelKey: 'tabs.files', icon: Folder },
   { kind: 'builtin', id: 'git',   labelKey: 'tabs.git',   icon: GitBranch },
   { kind: 'builtin', id: 'browser', labelKey: 'tabs.browser', icon: MonitorPlay },
+  { kind: 'builtin', id: 'computer', labelKey: 'tabs.computer', icon: MonitorCog },
 ];
 
 const TASKS_TAB: BuiltInTab = {

src/components/main-content/view/subcomponents/MainContentTitle.tsx

@@ -32,6 +32,10 @@ function getTabTitle(activeTab: AppTab, shouldShowTasksTab: boolean, t: (key: st
     return 'Browser Use';
   }
 
+  if (activeTab === 'computer') {
+    return 'Computer Use';
+  }
+
   return 'Project';
 }
 

src/components/sidebar/view/subcomponents/GitHubStarBadge.tsx

@@ -27,7 +27,7 @@ export default function GitHubStarBadge() {
       >
         <GitHubIcon className="h-3.5 w-3.5" />
         <Star className="h-3 w-3" />
-        <span className="font-medium">Star</span>
+        <span className="font-normal">Star</span>
         {formattedCount && (
           <span className="border-l border-border/50 pl-1.5 tabular-nums">{formattedCount}</span>
         )}

src/components/sidebar/view/subcomponents/SidebarHeader.tsx

@@ -67,7 +67,7 @@ export default function SidebarHeader({
           <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
         </svg>
       </div>
-      <h1 className="truncate text-sm font-semibold tracking-tight text-foreground">{t('app.title')}</h1>
+      <h1 className="truncate text-sm font-normal tracking-tight text-foreground">{t('app.title')}</h1>
     </div>
   );
 
@@ -138,7 +138,7 @@ export default function SidebarHeader({
                 onClick={() => onSearchModeChange('projects')}
                 aria-pressed={searchMode === 'projects'}
                 className={cn(
-                  "flex-1 flex items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-medium transition-all",
+                  "flex-1 flex items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-normal transition-all",
                   searchMode === 'projects'
                     ? "bg-background shadow-sm text-foreground"
                     : "text-muted-foreground hover:text-foreground"
@@ -151,7 +151,7 @@ export default function SidebarHeader({
                 onClick={() => onSearchModeChange('conversations')}
                 aria-pressed={searchMode === 'conversations'}
                 className={cn(
-                  "flex-1 flex items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-medium transition-all",
+                  "flex-1 flex items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-normal transition-all",
                   searchMode === 'conversations'
                     ? "bg-background shadow-sm text-foreground"
                     : "text-muted-foreground hover:text-foreground"
@@ -190,7 +190,7 @@ export default function SidebarHeader({
                   aria-label={t('search.archiveOnlyTooltip', 'Archive only')}
                   title={t('search.archiveOnlyTooltip', 'Archive only')}
                   className={cn(
-                    "flex items-center justify-center rounded-md px-2.5 py-1.5 text-xs font-medium transition-all",
+                    "flex items-center justify-center rounded-md px-2.5 py-1.5 text-xs font-normal transition-all",
                     searchMode === 'archived'
                       ? "bg-background shadow-sm text-foreground"
                       : "text-muted-foreground hover:text-foreground"
@@ -278,7 +278,7 @@ export default function SidebarHeader({
                 onClick={() => onSearchModeChange('projects')}
                 aria-pressed={searchMode === 'projects'}
                 className={cn(
-                  "flex-1 flex items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-medium transition-all",
+                  "flex-1 flex items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-normal transition-all",
                   searchMode === 'projects'
                     ? "bg-background shadow-sm text-foreground"
                     : "text-muted-foreground hover:text-foreground"
@@ -291,7 +291,7 @@ export default function SidebarHeader({
                 onClick={() => onSearchModeChange('conversations')}
                 aria-pressed={searchMode === 'conversations'}
                 className={cn(
-                  "flex-1 flex items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-medium transition-all",
+                  "flex-1 flex items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-normal transition-all",
                   searchMode === 'conversations'
                     ? "bg-background shadow-sm text-foreground"
                     : "text-muted-foreground hover:text-foreground"
@@ -331,7 +331,7 @@ export default function SidebarHeader({
                   aria-label={t('search.archiveOnlyTooltip', 'Archive only')}
                   title={t('search.archiveOnlyTooltip', 'Archive only')}
                   className={cn(
-                    "flex items-center justify-center rounded-md px-2.5 py-1.5 text-xs font-medium transition-all",
+                    "flex items-center justify-center rounded-md px-2.5 py-1.5 text-xs font-normal transition-all",
                     searchMode === 'archived'
                       ? "bg-background shadow-sm text-foreground"
                       : "text-muted-foreground hover:text-foreground"

src/components/sidebar/view/subcomponents/SidebarProjectItem.tsx

@@ -186,7 +186,7 @@ export default function SidebarProjectItem({
                   ) : (
                     <>
                       <div className="flex min-w-0 flex-1 items-center justify-between">
-                        <h3 className="truncate text-sm font-medium text-foreground">{project.displayName}</h3>
+                        <h3 className="truncate text-sm font-normal text-foreground">{project.displayName}</h3>
                         {tasksEnabled && (
                           <TaskIndicator
                             status={taskStatus}
@@ -318,7 +318,7 @@ export default function SidebarProjectItem({
                 </div>
               ) : (
                 <div>
-                  <div className="truncate text-sm font-semibold text-foreground" title={project.displayName}>
+                  <div className="truncate text-sm font-normal text-foreground" title={project.displayName}>
                     {project.displayName}
                   </div>
                   <div className="text-xs text-muted-foreground">

src/components/sidebar/view/subcomponents/SidebarSessionItem.tsx

@@ -157,7 +157,7 @@ export default function SidebarSessionItem({
 
             <div className="min-w-0 flex-1">
               <div className="flex items-center gap-2">
-                <div className="min-w-0 flex-1 truncate text-xs font-medium text-foreground">{sessionView.sessionName}</div>
+                <div className="min-w-0 flex-1 truncate text-xs font-normal text-foreground">{sessionView.sessionName}</div>
                 {isProcessing ? (
                   <span className="ml-auto flex-shrink-0">
                     <Tooltip content={t('tooltips.processingSessionIndicator', 'Processing session')} position="top">
@@ -219,7 +219,7 @@ export default function SidebarSessionItem({
             </div>
             <div className="min-w-0 flex-1">
               <div className="flex items-center gap-2">
-                <div className="min-w-0 flex-1 truncate text-xs font-medium text-foreground">{sessionView.sessionName}</div>
+                <div className="min-w-0 flex-1 truncate text-xs font-normal text-foreground">{sessionView.sessionName}</div>
                 {isProcessing ? (
                   <span
                     className={cn(