feat: add desktop computer use runtime

src/components/main-content/types/types.ts

@@ -65,6 +65,7 @@ export type MainContentHeaderProps = {
   selectedSession: ProjectSession | null;
   shouldShowTasksTab: boolean;
   shouldShowBrowserTab: boolean;
+  shouldShowComputerTab: boolean;
   isMobile: boolean;
   onMenuClick: () => void;
 };

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

@@ -59,9 +59,11 @@ function MainContent({
   const { currentProject, setCurrentProject } = useTaskMaster() as TaskMasterContextValue;
   const { tasksEnabled, isTaskMasterInstalled } = useTasksSettings() as TasksSettingsContextValue;
   const [browserUseEnabled, setBrowserUseEnabled] = useState(false);
+  const [computerUseEnabled, setComputerUseEnabled] = useState(false);
 
   const shouldShowTasksTab = Boolean(tasksEnabled && isTaskMasterInstalled);
   const shouldShowBrowserTab = browserUseEnabled;
+  const shouldShowComputerTab = computerUseEnabled;
 
   const {
     editingFile,
@@ -117,6 +119,28 @@ function MainContent({
     }
   }, [shouldShowBrowserTab, activeTab, setActiveTab]);
 
+  const loadComputerUseSettings = useCallback(async () => {
+    try {
+      const response = await authenticatedFetch('/api/computer-use/settings');
+      const data = await response.json();
+      setComputerUseEnabled(Boolean(response.ok && data?.success !== false && data?.data?.settings?.enabled));
+    } catch {
+      setComputerUseEnabled(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadComputerUseSettings();
+    window.addEventListener('computerUseSettingsChanged', loadComputerUseSettings);
+    return () => window.removeEventListener('computerUseSettingsChanged', loadComputerUseSettings);
+  }, [loadComputerUseSettings]);
+
+  useEffect(() => {
+    if (!shouldShowComputerTab && activeTab === 'computer') {
+      setActiveTab('chat');
+    }
+  }, [shouldShowComputerTab, activeTab, setActiveTab]);
+
   usePaletteOpsRegister({
     openFile: (filePath: string) => {
       setActiveTab('files');
@@ -141,6 +165,7 @@ function MainContent({
         selectedSession={selectedSession}
         shouldShowTasksTab={shouldShowTasksTab}
         shouldShowBrowserTab={shouldShowBrowserTab}
+        shouldShowComputerTab={shouldShowComputerTab}
         isMobile={isMobile}
         onMenuClick={onMenuClick}
       />
@@ -205,7 +230,7 @@ function MainContent({
             </div>
           )}
 
-          {activeTab === 'computer' && (
+          {shouldShowComputerTab && activeTab === 'computer' && (
             <div className="h-full overflow-hidden">
               <ComputerUsePanel isVisible={activeTab === 'computer'} />
             </div>

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

@@ -11,6 +11,7 @@ export default function MainContentHeader({
   selectedSession,
   shouldShowTasksTab,
   shouldShowBrowserTab,
+  shouldShowComputerTab,
   isMobile,
   onMenuClick,
 }: MainContentHeaderProps) {
@@ -61,6 +62,7 @@ export default function MainContentHeader({
               setActiveTab={setActiveTab}
               shouldShowTasksTab={shouldShowTasksTab}
               shouldShowBrowserTab={shouldShowBrowserTab}
+              shouldShowComputerTab={shouldShowComputerTab}
             />
           </div>
           {canScrollRight && (

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

@@ -12,6 +12,7 @@ type MainContentTabSwitcherProps = {
   setActiveTab: Dispatch<SetStateAction<AppTab>>;
   shouldShowTasksTab: boolean;
   shouldShowBrowserTab: boolean;
+  shouldShowComputerTab: boolean;
 };
 
 type BuiltInTab = {
@@ -36,7 +37,6 @@ const BASE_TABS: BuiltInTab[] = [
   { kind: 'builtin', id: 'shell', labelKey: 'tabs.shell', icon: Terminal },
   { kind: 'builtin', id: 'files', labelKey: 'tabs.files', icon: Folder },
   { kind: 'builtin', id: 'git',   labelKey: 'tabs.git',   icon: GitBranch },
-  { kind: 'builtin', id: 'computer', labelKey: 'tabs.computer', icon: MonitorCog },
 ];
 
 const BROWSER_TAB: BuiltInTab = {
@@ -46,6 +46,13 @@ const BROWSER_TAB: BuiltInTab = {
   icon: MonitorPlay,
 };
 
+const COMPUTER_TAB: BuiltInTab = {
+  kind: 'builtin',
+  id: 'computer',
+  labelKey: 'tabs.computer',
+  icon: MonitorCog,
+};
+
 const TASKS_TAB: BuiltInTab = {
   kind: 'builtin',
   id: 'tasks',
@@ -58,6 +65,7 @@ export default function MainContentTabSwitcher({
   setActiveTab,
   shouldShowTasksTab,
   shouldShowBrowserTab,
+  shouldShowComputerTab,
 }: MainContentTabSwitcherProps) {
   const { t } = useTranslation();
   const { plugins } = usePlugins();
@@ -65,6 +73,7 @@ export default function MainContentTabSwitcher({
   const builtInTabs: BuiltInTab[] = [
     ...BASE_TABS,
     ...(shouldShowBrowserTab ? [BROWSER_TAB] : []),
+    ...(shouldShowComputerTab ? [COMPUTER_TAB] : []),
     ...(shouldShowTasksTab ? [TASKS_TAB] : []),
   ];