Merge pull request #891 from siteboon/electron-app

src/components/chat/hooks/useChatComposerState.ts

@@ -204,6 +204,8 @@ export function useChatComposerState({
 
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const inputHighlightRef = useRef<HTMLDivElement>(null);
+  const textareaLineHeightRef = useRef<number | null>(null);
+  const lastAutosizedInputRef = useRef<string | null>(null);
   const handleSubmitRef = useRef<
     ((event: FormEvent<HTMLFormElement> | MouseEvent | TouchEvent | KeyboardEvent<HTMLTextAreaElement>) => Promise<void>) | null
   >(null);
@@ -457,6 +459,22 @@ export function useChatComposerState({
     inputHighlightRef.current.scrollLeft = target.scrollLeft;
   }, []);
 
+  const resizeTextarea = useCallback((target: HTMLTextAreaElement) => {
+    target.style.height = 'auto';
+    const nextHeight = Math.max(22, target.scrollHeight);
+    target.style.height = `${nextHeight}px`;
+
+    let lineHeight = textareaLineHeightRef.current;
+    if (!lineHeight) {
+      lineHeight = parseInt(window.getComputedStyle(target).lineHeight);
+      textareaLineHeightRef.current = Number.isFinite(lineHeight) ? lineHeight : 24;
+    }
+
+    const expanded = nextHeight > (textareaLineHeightRef.current || 24) * 2;
+    setIsTextareaExpanded((previous) => previous === expanded ? previous : expanded);
+    lastAutosizedInputRef.current = target.value;
+  }, []);
+
   const handleImageFiles = useCallback((files: File[]) => {
     const validFiles = files.filter((file) => {
       try {
@@ -817,13 +835,13 @@ export function useChatComposerState({
     if (!textareaRef.current) {
       return;
     }
-    // Re-run when input changes so restored drafts get the same autosize behavior as typed text.
-    textareaRef.current.style.height = 'auto';
-    textareaRef.current.style.height = `${Math.max(22, textareaRef.current.scrollHeight)}px`;
-    const lineHeight = parseInt(window.getComputedStyle(textareaRef.current).lineHeight);
-    const expanded = textareaRef.current.scrollHeight > lineHeight * 2;
-    setIsTextareaExpanded(expanded);
-  }, [input]);
+    if (lastAutosizedInputRef.current === input) {
+      return;
+    }
+    // Re-run for restored drafts and programmatic input changes. User typing is
+    // already resized in onInput, so this avoids doing the same forced layout twice.
+    resizeTextarea(textareaRef.current);
+  }, [input, resizeTextarea]);
 
   useEffect(() => {
     if (!textareaRef.current || input.trim()) {
@@ -905,15 +923,11 @@ export function useChatComposerState({
   const handleTextareaInput = useCallback(
     (event: FormEvent<HTMLTextAreaElement>) => {
       const target = event.currentTarget;
-      target.style.height = 'auto';
-      target.style.height = `${Math.max(22, target.scrollHeight)}px`;
+      resizeTextarea(target);
       setCursorPosition(target.selectionStart);
       syncInputOverlayScroll(target);
-
-      const lineHeight = parseInt(window.getComputedStyle(target).lineHeight);
-      setIsTextareaExpanded(target.scrollHeight > lineHeight * 2);
     },
-    [setCursorPosition, syncInputOverlayScroll],
+    [resizeTextarea, setCursorPosition, syncInputOverlayScroll],
   );
 
   const handleClearInput = useCallback(() => {

src/components/chat/utils/toolGrouping.ts

@@ -0,0 +1,62 @@
+import type { ChatMessage } from '../types/types';
+
+export const TOOL_GROUP_THRESHOLD = 3;
+
+export interface ToolGroupItem {
+  _isGroup: true;
+  toolName: string;
+  messages: ChatMessage[];
+  timestamp: ChatMessage['timestamp'];
+}
+
+export type MessageListItem = ChatMessage | ToolGroupItem;
+
+export function isToolGroupItem(item: MessageListItem): item is ToolGroupItem {
+  return '_isGroup' in item && (item as ToolGroupItem)._isGroup === true;
+}
+
+function isGroupableToolMessage(message: ChatMessage): message is ChatMessage & { toolName: string } {
+  return Boolean(message.isToolUse && message.toolName && !message.isSubagentContainer);
+}
+
+export function groupConsecutiveTools(messages: ChatMessage[]): MessageListItem[] {
+  const items: MessageListItem[] = [];
+  let index = 0;
+
+  while (index < messages.length) {
+    const message = messages[index];
+
+    if (!isGroupableToolMessage(message)) {
+      items.push(message);
+      index += 1;
+      continue;
+    }
+
+    const run: ChatMessage[] = [message];
+    let nextIndex = index + 1;
+
+    while (
+      nextIndex < messages.length &&
+      isGroupableToolMessage(messages[nextIndex]) &&
+      messages[nextIndex].toolName === message.toolName
+    ) {
+      run.push(messages[nextIndex]);
+      nextIndex += 1;
+    }
+
+    if (run.length >= TOOL_GROUP_THRESHOLD) {
+      items.push({
+        _isGroup: true,
+        toolName: message.toolName,
+        messages: run,
+        timestamp: message.timestamp,
+      });
+    } else {
+      items.push(...run);
+    }
+
+    index = nextIndex;
+  }
+
+  return items;
+}

src/components/chat/view/ChatInterface.tsx

@@ -311,7 +311,7 @@ function ChatInterface({
 
   return (
     <PermissionContext.Provider value={permissionContextValue}>
-      <div className="flex h-full flex-col">
+      <div className="flex h-full min-h-0 flex-col">
         <ChatMessagesPane
           scrollContainerRef={scrollContainerRef}
           onWheel={handleScroll}

src/components/chat/view/subcomponents/ChatComposer.tsx

@@ -1,4 +1,5 @@
 import { useTranslation } from 'react-i18next';
+import { useMemo } from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import type {
   ChangeEvent,
@@ -160,6 +161,17 @@ export default function ChatComposer({
   sendByCtrlEnter,
 }: ChatComposerProps) {
   const { t } = useTranslation('chat');
+  const commandMenuPosition = useMemo(() => {
+    if (!isCommandMenuOpen) {
+      return { top: 0, left: 16, bottom: 90 };
+    }
+    const textareaRect = textareaRef.current?.getBoundingClientRect();
+    return {
+      top: textareaRect ? Math.max(16, textareaRect.top - 316) : 0,
+      left: textareaRect ? textareaRect.left : 16,
+      bottom: textareaRect ? window.innerHeight - textareaRect.top + 8 : 90,
+    };
+  }, [input, isCommandMenuOpen, textareaRef]);
 
   // Voice state is hosted here (not in the mic button) so the main Send button can stop
   // recording and send the transcript in one tap, the way the mic button drops it in the box.
@@ -182,13 +194,6 @@ export default function ChatComposer({
   const isRecording = voiceState === 'recording';
   const isTranscribing = voiceState === 'transcribing';
 
-  const textareaRect = textareaRef.current?.getBoundingClientRect();
-  const commandMenuPosition = {
-    top: textareaRect ? Math.max(16, textareaRect.top - 316) : 0,
-    left: textareaRect ? textareaRect.left : 16,
-    bottom: textareaRect ? window.innerHeight - textareaRect.top + 8 : 90,
-  };
-
   // Detect if the AskUserQuestion interactive panel is active
   const hasQuestionPanel = pendingPermissionRequests.some(
     (r) => r.toolName === 'AskUserQuestion'
@@ -198,7 +203,7 @@ export default function ChatComposer({
   const hasPendingPermissions = pendingPermissionRequests.length > 0;
 
   return (
-    <div className="flex-shrink-0 p-2 pb-2 sm:p-4 sm:pb-4 md:p-4 md:pb-6">
+    <div className="chat-composer-shell flex-shrink-0 p-2 pb-2 sm:p-4 sm:pb-4 md:p-4 md:pb-6">
       {!hasPendingPermissions && (
         <ActivityIndicator activity={activity} onAbort={onAbortSession} />
       )}

src/components/chat/view/subcomponents/ChatMessagesPane.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next';
-import { useCallback, useRef } from 'react';
+import { memo, useCallback, useMemo, useRef } from 'react';
 import type { Dispatch, RefObject, SetStateAction } from 'react';
 
 import type { ChatMessage } from '../../types/types';
@@ -10,9 +10,11 @@ import type {
   ProviderModelsDefinition,
 } from '../../../../types/app';
 import { getIntrinsicMessageKey } from '../../utils/messageKeys';
+import { groupConsecutiveTools, isToolGroupItem } from '../../utils/toolGrouping';
 
 import MessageComponent from './MessageComponent';
 import ProviderSelectionEmptyState from './ProviderSelectionEmptyState';
+import ToolGroupContainer from './ToolGroupContainer';
 
 interface ChatMessagesPaneProps {
   scrollContainerRef: RefObject<HTMLDivElement>;
@@ -65,7 +67,7 @@ interface ChatMessagesPaneProps {
   selectedProject: Project;
 }
 
-export default function ChatMessagesPane({
+function ChatMessagesPane({
   scrollContainerRef,
   onWheel,
   onTouchMove,
@@ -118,6 +120,7 @@ export default function ChatMessagesPane({
   const messageKeyMapRef = useRef<WeakMap<ChatMessage, string>>(new WeakMap());
   const allocatedKeysRef = useRef<Set<string>>(new Set());
   const generatedMessageKeyCounterRef = useRef(0);
+  const groupedVisibleMessages = useMemo(() => groupConsecutiveTools(visibleMessages), [visibleMessages]);
 
   // Keep keys stable across prepends so existing MessageComponent instances retain local state.
   const getMessageKey = useCallback((message: ChatMessage) => {
@@ -148,7 +151,7 @@ export default function ChatMessagesPane({
       ref={scrollContainerRef}
       onWheel={onWheel}
       onTouchMove={onTouchMove}
-      className="relative flex-1 space-y-3 overflow-y-auto overflow-x-hidden px-0 py-3 sm:space-y-4 sm:p-4"
+      className="chat-messages-pane relative min-h-0 flex-1 space-y-3 overflow-y-auto overflow-x-hidden px-0 py-3 sm:space-y-4 sm:p-4"
     >
       {(isLoadingSessionMessages || isProcessing) && chatMessages.length === 0 ? (
         <div className="mt-8 text-center text-gray-500 dark:text-gray-400">
@@ -252,28 +255,58 @@ export default function ChatMessagesPane({
             </div>
           )}
 
-          {visibleMessages.map((message, index) => {
-            const prevMessage = index > 0 ? visibleMessages[index - 1] : null;
-            return (
-              <MessageComponent
-                key={getMessageKey(message)}
-                message={message}
-                prevMessage={prevMessage}
-                createDiff={createDiff}
-                onFileOpen={onFileOpen}
-                onShowSettings={onShowSettings}
-                onGrantToolPermission={onGrantToolPermission}
-                autoExpandTools={autoExpandTools}
-                showRawParameters={showRawParameters}
-                showThinking={showThinking}
-                selectedProject={selectedProject}
-                provider={provider}
-              />
-            );
-          })}
+          {(() => {
+            let prevMessage: ChatMessage | null = null;
+
+            return groupedVisibleMessages.map((item) => {
+              if (isToolGroupItem(item)) {
+                const groupPrevMessage = prevMessage;
+                prevMessage = item.messages[item.messages.length - 1] || prevMessage;
+
+                return (
+                  <ToolGroupContainer
+                    key={`tool-group-${getMessageKey(item.messages[0])}`}
+                    group={item}
+                    prevMessage={groupPrevMessage}
+                    createDiff={createDiff}
+                    getMessageKey={getMessageKey}
+                    onFileOpen={onFileOpen}
+                    onShowSettings={onShowSettings}
+                    onGrantToolPermission={onGrantToolPermission}
+                    autoExpandTools={autoExpandTools}
+                    showRawParameters={showRawParameters}
+                    showThinking={showThinking}
+                    selectedProject={selectedProject}
+                    provider={provider}
+                  />
+                );
+              }
+
+              const messagePrevMessage = prevMessage;
+              prevMessage = item;
+
+              return (
+                <MessageComponent
+                  key={getMessageKey(item)}
+                  message={item}
+                  prevMessage={messagePrevMessage}
+                  createDiff={createDiff}
+                  onFileOpen={onFileOpen}
+                  onShowSettings={onShowSettings}
+                  onGrantToolPermission={onGrantToolPermission}
+                  autoExpandTools={autoExpandTools}
+                  showRawParameters={showRawParameters}
+                  showThinking={showThinking}
+                  selectedProject={selectedProject}
+                  provider={provider}
+                />
+              );
+            });
+          })()}
         </>
       )}
     </div>
   );
 }
 
+export default memo(ChatMessagesPane);

src/components/chat/view/subcomponents/ToolGroupContainer.tsx

@@ -0,0 +1,147 @@
+import { useMemo, useState } from 'react';
+import { ChevronRight } from 'lucide-react';
+
+import type { ChatMessage, ClaudePermissionSuggestion, PermissionGrantResult, Provider } from '../../types/types';
+import type { Project } from '../../../../types/app';
+import type { ToolGroupItem } from '../../utils/toolGrouping';
+import { getToolConfig } from '../../tools';
+
+import MessageComponent from './MessageComponent';
+
+type DiffLine = {
+  type: string;
+  content: string;
+  lineNum: number;
+};
+
+interface ToolGroupContainerProps {
+  group: ToolGroupItem;
+  prevMessage: ChatMessage | null;
+  createDiff: (oldStr: string, newStr: string) => DiffLine[];
+  getMessageKey: (message: ChatMessage) => string;
+  onFileOpen?: (filePath: string, diffInfo?: unknown) => void;
+  onShowSettings?: () => void;
+  onGrantToolPermission?: (suggestion: ClaudePermissionSuggestion) => PermissionGrantResult | null | undefined;
+  autoExpandTools?: boolean;
+  showRawParameters?: boolean;
+  showThinking?: boolean;
+  selectedProject?: Project | null;
+  provider: Provider | string;
+}
+
+function parseToolInput(toolInput: unknown): unknown {
+  if (typeof toolInput !== 'string') {
+    return toolInput;
+  }
+
+  try {
+    return JSON.parse(toolInput);
+  } catch {
+    return toolInput;
+  }
+}
+
+function getToolInputPreview(message: ChatMessage): string {
+  const config = getToolConfig(message.toolName || 'UnknownTool').input;
+  const parsedInput = parseToolInput(message.toolInput);
+  const title = typeof config.title === 'function' ? config.title(parsedInput) : config.title;
+  const value = config.getValue?.(parsedInput);
+
+  return String(value || title || message.displayText || message.content || '').trim();
+}
+
+function getToolGroupIcon(icon: string | undefined, toolName: string): string {
+  if (icon === 'terminal') {
+    return '$';
+  }
+
+  return icon || toolName.slice(0, 1).toUpperCase();
+}
+
+export default function ToolGroupContainer({
+  group,
+  prevMessage,
+  createDiff,
+  getMessageKey,
+  onFileOpen,
+  onShowSettings,
+  onGrantToolPermission,
+  autoExpandTools,
+  showRawParameters,
+  showThinking,
+  selectedProject,
+  provider,
+}: ToolGroupContainerProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const config = getToolConfig(group.toolName).input;
+  const label = config.label || group.toolName;
+  const borderClass = config.colorScheme?.border || 'border-border';
+  const iconClass = config.colorScheme?.icon || 'text-muted-foreground';
+  const icon = getToolGroupIcon(config.icon, group.toolName);
+
+  const preview = useMemo(() => {
+    const visiblePreviews = group.messages
+      .slice(0, 2)
+      .map(getToolInputPreview)
+      .filter(Boolean);
+
+    const extraCount = group.messages.length - visiblePreviews.length;
+    const previewText = visiblePreviews.join(', ');
+
+    if (!previewText) {
+      return extraCount > 0 ? `+${extraCount} more` : '';
+    }
+
+    return extraCount > 0 ? `${previewText}, +${extraCount} more` : previewText;
+  }, [group.messages]);
+
+  return (
+    <div className="chat-message tool px-3 sm:px-0" data-message-timestamp={group.timestamp || undefined}>
+      <button
+        type="button"
+        className={`group flex w-full items-center gap-2 border-l-2 ${borderClass} rounded-r-md bg-muted/25 px-3 py-2 text-left transition-colors hover:bg-muted/40 dark:bg-muted/10 dark:hover:bg-muted/20`}
+        onClick={() => setIsExpanded((current) => !current)}
+        aria-expanded={isExpanded}
+      >
+        <ChevronRight
+          className={`h-3.5 w-3.5 flex-shrink-0 text-muted-foreground transition-transform ${isExpanded ? 'rotate-90' : ''}`}
+          aria-hidden
+        />
+        <span className={`${iconClass} flex h-5 w-5 flex-shrink-0 items-center justify-center rounded bg-background/80 text-xs font-medium`}>
+          {icon}
+        </span>
+        <span className="min-w-0 flex-shrink-0 text-xs font-medium text-foreground">{label}</span>
+        <span className="flex-shrink-0 rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
+          x{group.messages.length}
+        </span>
+        {preview && (
+          <>
+            <span className="text-[10px] text-muted-foreground/40">/</span>
+            <span className="min-w-0 truncate font-mono text-xs text-muted-foreground">{preview}</span>
+          </>
+        )}
+      </button>
+
+      {isExpanded && (
+        <div className="mt-2 space-y-3 sm:space-y-4">
+          {group.messages.map((message, index) => (
+            <MessageComponent
+              key={getMessageKey(message)}
+              message={message}
+              prevMessage={index > 0 ? group.messages[index - 1] : prevMessage}
+              createDiff={createDiff}
+              onFileOpen={onFileOpen}
+              onShowSettings={onShowSettings}
+              onGrantToolPermission={onGrantToolPermission}
+              autoExpandTools={autoExpandTools}
+              showRawParameters={showRawParameters}
+              showThinking={showThinking}
+              selectedProject={selectedProject}
+              provider={provider}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

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,537 @@
+import { useCallback, useEffect, useMemo, useRef, useState, type KeyboardEvent, type MouseEvent } from 'react';
+import { Bot, Camera, Download, Expand, Loader2, MonitorCog, RefreshCw, Settings, ShieldCheck, Square, Trash2, X } from 'lucide-react';
+
+import { cn } from '../../../lib/utils';
+import { Badge, Button } from '../../../shared/view/ui';
+import { authenticatedFetch } from '../../../utils/api';
+import type { SettingsMainTab } from '../../settings/types/types';
+
+type ComputerUseStatus = {
+  enabled: boolean;
+  runtime: 'cloud' | 'local';
+  available: boolean;
+  desktopAgentConnected?: boolean;
+  desktopAgentCount?: number;
+  nutInstalled: boolean;
+  screenshotInstalled: boolean;
+  installInProgress: boolean;
+  sessionCount: number;
+  message: string;
+};
+
+type ComputerUseSession = {
+  id: string;
+  status: 'ready' | 'stopped' | 'unavailable';
+  screenshotDataUrl: string | null;
+  createdAt: string;
+  updatedAt: string;
+  lastAction: string | null;
+  message: string | null;
+  agentAccessEnabled: boolean;
+  createdBy: 'user' | 'agent';
+  displaySize: {
+    width: number;
+    height: number;
+  } | null;
+  cursor: {
+    x: number;
+    y: number;
+    actor: 'agent' | 'user';
+  } | null;
+};
+
+type ComputerUsePanelProps = {
+  isVisible: boolean;
+  onShowSettings?: (tab?: SettingsMainTab) => void;
+};
+
+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;
+}
+
+function getRuntimeTone(status: ComputerUseStatus | null, installing: boolean): string {
+  if (!status?.enabled) return 'border-border bg-muted text-muted-foreground';
+  if (status.runtime === 'cloud') {
+    return status.desktopAgentConnected
+      ? 'border-primary/30 bg-primary/5 text-foreground'
+      : 'border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300';
+  }
+  if (status.available) return 'border-primary/30 bg-primary/5 text-foreground';
+  if (status.installInProgress || installing) return 'border-primary/30 bg-primary/5 text-foreground';
+  return 'border-border bg-background text-muted-foreground';
+}
+
+function getRuntimeLabel(status: ComputerUseStatus | null, installing: boolean): string {
+  if (!status?.enabled) return 'Disabled';
+  if (status.runtime === 'cloud') {
+    const count = status.desktopAgentCount ?? (status.desktopAgentConnected ? 1 : 0);
+    if (count > 1) return `${count} desktops linked`;
+    if (count === 1) return 'Desktop linked';
+    return 'Desktop not linked';
+  }
+  if (status.available) return 'Ready';
+  if (status.installInProgress || installing) return 'Installing';
+  return 'Setup required';
+}
+
+export default function ComputerUsePanel({ isVisible, onShowSettings }: ComputerUsePanelProps) {
+  const [status, setStatus] = useState<ComputerUseStatus | null>(null);
+  const [sessions, setSessions] = useState<ComputerUseSession[]>([]);
+  const [selectedSessionId, setSelectedSessionId] = useState<string | null>(null);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [isBusy, setIsBusy] = useState(false);
+  const [isInstalling, setIsInstalling] = useState(false);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const viewerRef = useRef<HTMLDivElement | null>(null);
+
+  const selectedSession = useMemo(
+    () => sessions.find((session) => session.id === selectedSessionId) || sessions[0] || null,
+    [selectedSessionId, sessions],
+  );
+
+  const refresh = useCallback(async () => {
+    setIsRefreshing(true);
+    try {
+      const [statusResponse, sessionsResponse] = await Promise.all([
+        authenticatedFetch('/api/computer-use/status'),
+        authenticatedFetch('/api/computer-use/sessions'),
+      ]);
+      const statusData = await readJson<{ data: ComputerUseStatus }>(statusResponse);
+      const sessionsData = await readJson<{ data: { sessions: ComputerUseSession[] } }>(sessionsResponse);
+      setStatus(statusData.data);
+      setSessions(sessionsData.data.sessions);
+      setSelectedSessionId((current) => (
+        current && sessionsData.data.sessions.some((session) => session.id === current)
+          ? current
+          : sessionsData.data.sessions[0]?.id || null
+      ));
+      setError(null);
+    } finally {
+      setIsRefreshing(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!isVisible) return;
+    void refresh().catch((err) => setError(err instanceof Error ? err.message : 'Failed to load Computer Use'));
+  }, [isVisible, refresh]);
+
+  const handleRefresh = useCallback(() => {
+    void refresh().catch((err) => setError(err instanceof Error ? err.message : 'Failed to refresh Computer Use'));
+  }, [refresh]);
+
+  // Poll while an active session exists so agent-driven changes show up live.
+  useEffect(() => {
+    if (!isVisible || !selectedSession || selectedSession.status !== 'ready') return;
+    const timer = window.setInterval(() => {
+      void refresh().catch(() => undefined);
+    }, 1500);
+    return () => window.clearInterval(timer);
+  }, [isVisible, selectedSession, refresh]);
+
+  const runAction = useCallback(async (action: () => Promise<void>) => {
+    setIsBusy(true);
+    setError(null);
+    try {
+      await action();
+      await refresh();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Computer Use action failed');
+    } finally {
+      setIsBusy(false);
+    }
+  }, [refresh]);
+
+  const captureScreenshot = () => runAction(async () => {
+    if (!selectedSession) return;
+    const response = await authenticatedFetch(`/api/computer-use/sessions/${selectedSession.id}/screenshot`, { method: 'POST' });
+    await readJson(response);
+  });
+
+  const stopSession = () => runAction(async () => {
+    if (!selectedSession) return;
+    const response = await authenticatedFetch(`/api/computer-use/sessions/${selectedSession.id}/stop`, { method: 'POST' });
+    await readJson(response);
+  });
+
+  const deleteSession = () => runAction(async () => {
+    if (!selectedSession) return;
+    const response = await authenticatedFetch(`/api/computer-use/sessions/${selectedSession.id}`, { method: 'DELETE' });
+    await readJson(response);
+    setIsFullscreen(false);
+  });
+
+  const grantControl = () => runAction(async () => {
+    if (!selectedSession) return;
+    const response = await authenticatedFetch(`/api/computer-use/sessions/${selectedSession.id}/consent/grant`, { method: 'POST' });
+    await readJson(response);
+  });
+
+  const revokeControl = () => runAction(async () => {
+    if (!selectedSession) return;
+    const response = await authenticatedFetch(`/api/computer-use/sessions/${selectedSession.id}/consent/revoke`, { method: 'POST' });
+    await readJson(response);
+  });
+
+  const installRuntime = () => runAction(async () => {
+    setIsInstalling(true);
+    try {
+      const response = await authenticatedFetch('/api/computer-use/runtime/install', { method: 'POST' });
+      await readJson(response);
+    } finally {
+      setIsInstalling(false);
+    }
+  });
+
+  const clickViewer = useCallback((event: MouseEvent<HTMLImageElement>) => {
+    if (!selectedSession || selectedSession.status !== 'ready' || !selectedSession.displaySize) {
+      return;
+    }
+    viewerRef.current?.focus();
+
+    const bounds = event.currentTarget.getBoundingClientRect();
+    const scaleX = selectedSession.displaySize.width / bounds.width;
+    const scaleY = selectedSession.displaySize.height / bounds.height;
+    const x = Math.round((event.clientX - bounds.left) * scaleX);
+    const y = Math.round((event.clientY - bounds.top) * scaleY);
+
+    void runAction(async () => {
+      const response = await authenticatedFetch(`/api/computer-use/sessions/${selectedSession.id}/click`, {
+        method: 'POST',
+        body: JSON.stringify({ x, y, double: event.detail === 2 }),
+      });
+      await readJson(response);
+    });
+  }, [runAction, selectedSession]);
+
+  const keyForEvent = useCallback((event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === ' ') return 'Space';
+    const parts: string[] = [];
+    if (event.ctrlKey) parts.push('ctrl');
+    if (event.altKey) parts.push('alt');
+    if (event.shiftKey && event.key.length > 1) parts.push('shift');
+    if (event.metaKey) parts.push('meta');
+    parts.push(event.key);
+    return parts.join('+');
+  }, []);
+
+  const pressViewerKey = useCallback((event: KeyboardEvent<HTMLDivElement>) => {
+    if (!selectedSession || selectedSession.status !== 'ready') {
+      return;
+    }
+
+    const ignoredKeys = new Set(['Shift', 'Control', 'Alt', 'Meta', 'CapsLock']);
+    if (ignoredKeys.has(event.key)) {
+      return;
+    }
+
+    event.preventDefault();
+    const key = keyForEvent(event);
+    void runAction(async () => {
+      const response = await authenticatedFetch(`/api/computer-use/sessions/${selectedSession.id}/press-key`, {
+        method: 'POST',
+        body: JSON.stringify({ key }),
+      });
+      await readJson(response);
+    });
+  }, [keyForEvent, runAction, selectedSession]);
+
+  const needsRuntime = Boolean(status?.enabled && status.runtime === 'local' && (!status.nutInstalled || !status.screenshotInstalled));
+  const isCloud = status?.runtime === 'cloud';
+  const desktopAgentCount = status?.desktopAgentCount ?? (status?.desktopAgentConnected ? 1 : 0);
+  const runtimeLabel = getRuntimeLabel(status, isInstalling);
+
+  const cursorStyle = selectedSession?.cursor && selectedSession.displaySize
+    ? {
+      left: `${(selectedSession.cursor.x / selectedSession.displaySize.width) * 100}%`,
+      top: `${(selectedSession.cursor.y / selectedSession.displaySize.height) * 100}%`,
+    }
+    : null;
+
+  const renderSurface = (fullscreen = false) => (
+    <div
+      ref={viewerRef}
+      tabIndex={selectedSession?.status === 'ready' ? 0 : -1}
+      onKeyDown={pressViewerKey}
+      className={`flex min-h-[360px] flex-1 items-center justify-center bg-neutral-950 outline-none ${fullscreen ? 'min-h-[80vh]' : ''}`}
+    >
+      {selectedSession?.screenshotDataUrl ? (
+        <div className="relative inline-block max-h-full">
+          <img
+            src={selectedSession.screenshotDataUrl}
+            alt="Desktop screenshot"
+            className={fullscreen ? 'block max-h-[80vh] w-auto max-w-full object-contain' : 'block max-h-[70vh] w-auto max-w-full object-contain'}
+            onClick={clickViewer}
+          />
+          {cursorStyle && (
+            <div
+              className="pointer-events-none absolute h-5 w-5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white/90 bg-sky-500/80 shadow-[0_0_0_6px_rgba(14,165,233,0.18)]"
+              style={cursorStyle}
+            >
+              <div className="absolute left-1/2 top-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white" />
+            </div>
+          )}
+        </div>
+      ) : (
+        <div className="max-w-md px-6 text-center">
+          <MonitorCog className="mx-auto h-10 w-10 text-neutral-500" />
+          <div className="mt-3 text-sm font-medium text-neutral-100">
+            {selectedSession?.message || 'No active Computer Use session.'}
+          </div>
+          <p className="mt-2 text-xs leading-relaxed text-neutral-400">
+            {isCloud
+              ? 'Agents create sessions automatically. Keep the CloudCLI desktop app connected to approve control requests.'
+              : 'Agents create sessions automatically. Enable Computer Use and install the local runtime if needed.'}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+
+  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>
+            <Badge variant="outline" className={cn('text-[10px]', getRuntimeTone(status, isInstalling))}>
+              {runtimeLabel}
+            </Badge>
+          </div>
+          <p className="mt-0.5 text-xs text-muted-foreground">
+            {isCloud
+              ? 'Monitor cloud agent desktop sessions and linked desktops.'
+              : 'Monitor local desktop sessions and grant control only when an agent needs it.'}
+          </p>
+        </div>
+        <div className="flex items-center gap-1.5">
+          {onShowSettings && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 w-7 p-0"
+              onClick={() => onShowSettings('computer')}
+              title="Open Computer Use settings"
+              aria-label="Open Computer Use settings"
+            >
+              <Settings className="h-3.5 w-3.5" />
+            </Button>
+          )}
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 w-7 p-0"
+            onClick={handleRefresh}
+            disabled={isRefreshing || isBusy}
+            title="Refresh Computer Use"
+            aria-label="Refresh Computer Use"
+          >
+            <RefreshCw className={cn('h-3.5 w-3.5', isRefreshing && 'animate-spin')} />
+          </Button>
+        </div>
+      </div>
+
+      <div className="grid min-h-0 flex-1 grid-cols-1 lg:grid-cols-[300px_minmax(0,1fr)]">
+        <aside className="border-b border-border/60 p-3 lg:border-b-0 lg:border-r">
+          {isCloud && (
+            <div className="rounded-lg border border-border/70 bg-card/40 p-3">
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0">
+                  <div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">Cloud desktop access</div>
+                  <div className="mt-1 text-sm font-medium text-foreground">{runtimeLabel}</div>
+                </div>
+                <Badge variant="outline" className={cn('shrink-0 text-[10px]', getRuntimeTone(status, isInstalling))}>
+                  {desktopAgentCount > 0 ? `${desktopAgentCount} linked` : 'Not linked'}
+                </Badge>
+              </div>
+              <p className="mt-2 text-xs leading-relaxed text-muted-foreground">
+                {desktopAgentCount > 1
+                  ? 'More than one CloudCLI Desktop app is linked. Agents will use one available desktop.'
+                  : desktopAgentCount === 1
+                    ? 'CloudCLI Desktop is connected. Approval prompts appear on that computer.'
+                    : 'Open CloudCLI Desktop on the computer you want agents to use, connect the same account, and enable Computer Use.'}
+              </p>
+            </div>
+          )}
+
+          {needsRuntime && (
+            <div className={cn('rounded-lg border border-border/70 bg-card/40 p-3', isCloud && 'mt-3')}>
+              <div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">Desktop runtime required</div>
+              <p className="mt-2 text-xs leading-relaxed text-muted-foreground">
+                {status?.message || 'Install the desktop control runtime to enable Computer Use.'}
+              </p>
+              <div className="mt-3 flex flex-wrap gap-2 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>
+              <Button
+                type="button"
+                size="sm"
+                className="mt-3 w-full"
+                onClick={installRuntime}
+                disabled={isBusy || isInstalling || status?.installInProgress}
+              >
+                {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>
+          )}
+
+          <div className="mt-3 space-y-2">
+            <div className="rounded-lg border border-border/70 bg-muted/30 p-3 text-xs leading-relaxed text-muted-foreground">
+              <div className="flex items-center gap-1.5 font-medium text-foreground">
+                <ShieldCheck className="h-3.5 w-3.5" />
+                Safety
+              </div>
+              {isCloud ? (
+                <p className="mt-1.5">
+                  Agents create sessions automatically through MCP. The CloudCLI desktop app asks for approval on this
+                  computer, and <span className="font-medium text-foreground">Stop</span> ends the session and clears access.
+                </p>
+              ) : (
+                <p className="mt-1.5">
+                  Agents create sessions automatically through MCP but cannot act until you grant control here. Use
+                  <span className="font-medium text-foreground"> Grant Control </span>
+                  to allow agent actions, and
+                  <span className="font-medium text-foreground"> Stop </span>
+                  to revoke instantly.
+                </p>
+              )}
+            </div>
+            {sessions.map((session) => (
+              <button
+                key={session.id}
+                type="button"
+                onClick={() => setSelectedSessionId(session.id)}
+                className={`w-full rounded-lg border px-3 py-2 text-left text-sm transition-colors ${selectedSession?.id === session.id
+                  ? 'border-primary/50 bg-primary/10 text-foreground'
+                  : 'border-border/60 bg-card/30 text-muted-foreground hover:bg-muted/50'
+                }`}
+              >
+                <div className="flex items-center justify-between gap-2">
+                  <span className="truncate font-medium">
+                    {session.createdBy === 'agent' ? 'Agent session' : 'Desktop session'}
+                  </span>
+                  <Badge variant="outline" className="text-[10px]">{session.status}</Badge>
+                </div>
+                <div className="mt-1 flex flex-wrap gap-1">
+                  {session.agentAccessEnabled ? (
+                    <span className="rounded border border-emerald-500/30 px-1.5 py-0.5 text-[10px] text-emerald-600 dark:text-emerald-300">
+                      control granted
+                    </span>
+                  ) : (
+                    <span className="rounded border border-amber-500/30 px-1.5 py-0.5 text-[10px] text-amber-600 dark:text-amber-300">
+                      awaiting consent
+                    </span>
+                  )}
+                </div>
+                <div className="mt-1 truncate text-xs">{session.lastAction || session.message || session.id}</div>
+              </button>
+            ))}
+            {sessions.length === 0 && (
+              <div className="rounded-lg border border-dashed border-border/70 px-3 py-8 text-center text-xs text-muted-foreground">
+                Agents will create sessions automatically when they need desktop access.
+              </div>
+            )}
+          </div>
+        </aside>
+
+        <main className="flex min-h-0 flex-col">
+          <div className="flex flex-wrap items-center gap-2 border-b border-border/60 px-3 py-2">
+            <Button variant="outline" size="sm" onClick={captureScreenshot} disabled={isBusy || !selectedSession || selectedSession.status !== 'ready'}>
+              <Camera className="h-4 w-4" />
+              Screenshot
+            </Button>
+            {!isCloud && selectedSession?.agentAccessEnabled ? (
+              <Button variant="outline" size="sm" onClick={revokeControl} disabled={isBusy || !selectedSession}>
+                <X className="h-4 w-4" />
+                Revoke Control
+              </Button>
+            ) : !isCloud ? (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={grantControl}
+                disabled={isBusy || !selectedSession || selectedSession.status !== 'ready' || !status?.enabled}
+              >
+                <Bot className="h-4 w-4" />
+                Grant Control
+              </Button>
+            ) : null}
+            <Button variant="outline" size="sm" onClick={() => setIsFullscreen(true)} disabled={!selectedSession?.screenshotDataUrl}>
+              <Expand className="h-4 w-4" />
+              Full Screen
+            </Button>
+            <Button variant="outline" size="sm" onClick={stopSession} disabled={isBusy || !selectedSession || selectedSession.status !== 'ready'}>
+              <Square className="h-4 w-4" />
+              Stop
+            </Button>
+            <Button variant="outline" size="sm" onClick={deleteSession} disabled={isBusy || !selectedSession}>
+              <Trash2 className="h-4 w-4" />
+              Delete
+            </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="min-h-0 flex-1 overflow-auto bg-muted/20 p-4">
+            <div className="mx-auto flex min-h-[420px] max-w-6xl flex-col overflow-hidden rounded-lg border border-border bg-background shadow-sm">
+              <div className="flex items-center gap-2 border-b border-border/60 px-3 py-2 text-xs text-muted-foreground">
+                <MonitorCog className="h-3.5 w-3.5" />
+                <span className="truncate">
+                  {selectedSession?.displaySize
+                    ? `${selectedSession.displaySize.width}×${selectedSession.displaySize.height}`
+                    : 'No screen captured'}
+                </span>
+                {selectedSession?.agentAccessEnabled && (
+                  <span className="ml-auto inline-flex items-center gap-1 rounded border border-emerald-500/30 px-2 py-0.5 text-emerald-600 dark:text-emerald-300">
+                    <Bot className="h-3.5 w-3.5" />
+                    {isCloud ? 'Desktop-approved session' : 'Agent control active'}
+                  </span>
+                )}
+              </div>
+              {renderSurface()}
+            </div>
+            <p className="mx-auto mt-2 max-w-6xl text-center text-xs text-muted-foreground">
+              {selectedSession
+                ? 'Click the screenshot to click the real desktop. Focus the view and type to send keystrokes.'
+                : 'Computer Use sessions appear here after an agent requests desktop access.'}
+            </p>
+          </div>
+        </main>
+      </div>
+      {isFullscreen && selectedSession && (
+        <div className="fixed inset-0 z-50 bg-black/90 p-6">
+          <div className="flex h-full flex-col rounded-lg border border-white/10 bg-black">
+            <div className="flex items-center justify-between border-b border-white/10 px-4 py-3 text-sm text-white/80">
+              <div className="min-w-0 truncate">Desktop session</div>
+              <Button variant="outline" size="sm" onClick={() => setIsFullscreen(false)}>
+                <X className="h-4 w-4" />
+                Close
+              </Button>
+            </div>
+            {renderSurface(true)}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

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

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

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

@@ -6,11 +6,13 @@ 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';
 import { useTasksSettings } from '../../../contexts/TasksSettingsContext';
 import { useUiPreferences } from '../../../hooks/useUiPreferences';
+import { COMPUTER_USE_MENUS_ENABLED } from '../../../constants/featureFlags';
 import { authenticatedFetch } from '../../../utils/api';
 import { useEditorSidebar } from '../../code-editor/hooks/useEditorSidebar';
 import EditorSidebar from '../../code-editor/view/EditorSidebar';
@@ -58,9 +60,11 @@ function MainContent({
   const { currentProject, setCurrentProject } = useTaskMaster() as TaskMasterContextValue;
   const { tasksEnabled, isTaskMasterInstalled } = useTasksSettings() as TasksSettingsContextValue;
   const [browserUseEnabled, setBrowserUseEnabled] = useState(false);
+  const [computerUseEnabled, setComputerUseEnabled] = useState<boolean | undefined>(undefined);
 
   const shouldShowTasksTab = Boolean(tasksEnabled && isTaskMasterInstalled);
   const shouldShowBrowserTab = browserUseEnabled;
+  const shouldShowComputerTab = COMPUTER_USE_MENUS_ENABLED && computerUseEnabled === true;
 
   const {
     editingFile,
@@ -116,6 +120,60 @@ function MainContent({
     }
   }, [shouldShowBrowserTab, activeTab, setActiveTab]);
 
+  const loadComputerUseSettings = useCallback(async () => {
+    try {
+      const [settingsResponse, statusResponse] = await Promise.allSettled([
+        authenticatedFetch('/api/computer-use/settings'),
+        authenticatedFetch('/api/computer-use/status'),
+      ]);
+      const settingsRes = settingsResponse.status === 'fulfilled' ? settingsResponse.value : null;
+      const statusRes = statusResponse.status === 'fulfilled' ? statusResponse.value : null;
+      const readJson = async (response: Response | null) => {
+        if (!response) return null;
+        try {
+          return await response.json();
+        } catch {
+          return null;
+        }
+      };
+      const settingsData = await readJson(settingsRes);
+      const statusData = await readJson(statusRes);
+      const runtime = statusData?.data?.runtime;
+      const settingsUsable = Boolean(settingsRes?.ok && settingsData?.success !== false);
+      const statusUsable = Boolean(statusRes?.ok && statusData?.success !== false);
+      const settingsEnabled = Boolean(
+        settingsUsable &&
+        settingsData?.data?.settings?.enabled
+      );
+      const cloudEnabled = Boolean(
+        statusUsable &&
+        runtime === 'cloud' &&
+        statusData?.data?.enabled
+      );
+      if (runtime === 'cloud') {
+        setComputerUseEnabled(cloudEnabled);
+      } else if (settingsUsable) {
+        setComputerUseEnabled(settingsEnabled);
+      } else if (statusUsable) {
+        setComputerUseEnabled(Boolean(statusData?.data?.enabled));
+      }
+    } catch {
+      // Keep the current tab availability on transient status/settings failures.
+    }
+  }, []);
+
+  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');
@@ -140,6 +198,7 @@ function MainContent({
         selectedSession={selectedSession}
         shouldShowTasksTab={shouldShowTasksTab}
         shouldShowBrowserTab={shouldShowBrowserTab}
+        shouldShowComputerTab={shouldShowComputerTab}
         isMobile={isMobile}
         onMenuClick={onMenuClick}
       />
@@ -204,6 +263,12 @@ function MainContent({
             </div>
           )}
 
+          {shouldShowComputerTab && activeTab === 'computer' && (
+            <div className="h-full overflow-hidden">
+              <ComputerUsePanel isVisible={activeTab === 'computer'} onShowSettings={onShowSettings} />
+            </div>
+          )}
+
           {activeTab.startsWith('plugin:') && (
             <div className="h-full overflow-hidden">
               <PluginTabContent

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

@@ -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';
 
@@ -12,6 +12,7 @@ type MainContentTabSwitcherProps = {
   setActiveTab: Dispatch<SetStateAction<AppTab>>;
   shouldShowTasksTab: boolean;
   shouldShowBrowserTab: boolean;
+  shouldShowComputerTab: boolean;
 };
 
 type BuiltInTab = {
@@ -45,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',
@@ -57,6 +65,7 @@ export default function MainContentTabSwitcher({
   setActiveTab,
   shouldShowTasksTab,
   shouldShowBrowserTab,
+  shouldShowComputerTab,
 }: MainContentTabSwitcherProps) {
   const { t } = useTranslation();
   const { plugins } = usePlugins();
@@ -64,6 +73,7 @@ export default function MainContentTabSwitcher({
   const builtInTabs: BuiltInTab[] = [
     ...BASE_TABS,
     ...(shouldShowBrowserTab ? [BROWSER_TAB] : []),
+    ...(shouldShowComputerTab ? [COMPUTER_TAB] : []),
     ...(shouldShowTasksTab ? [TASKS_TAB] : []),
   ];
 

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

@@ -29,7 +29,11 @@ function getTabTitle(activeTab: AppTab, shouldShowTasksTab: boolean, t: (key: st
   }
 
   if (activeTab === 'browser') {
-    return 'Browser';
+    return t('tabs.browser');
+  }
+
+  if (activeTab === 'computer') {
+    return t('tabs.computer');
   }
 
   return 'Project';

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: {

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: {

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}
                 />
               )}
 

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 (

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

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/SidebarContent.tsx

@@ -266,7 +266,7 @@ export default function SidebarContent({
                 <div key={projectResult.projectName} className="space-y-1">
                   <div className="flex items-center gap-1.5 px-1 py-1">
                     <Folder className="h-3 w-3 flex-shrink-0 text-muted-foreground" />
-                    <span className="truncate text-xs font-medium text-foreground">
+                    <span className="truncate text-xs font-normal text-foreground">
                       {projectResult.projectDisplayName}
                     </span>
                   </div>
@@ -286,7 +286,7 @@ export default function SidebarContent({
                     >
                       <div className="mb-1 flex items-center gap-1.5">
                         <MessageSquare className="h-3 w-3 flex-shrink-0 text-primary" />
-                        <span className="truncate text-xs font-medium text-foreground">
+                        <span className="truncate text-xs font-normal text-foreground">
                           {session.sessionSummary}
                         </span>
                         {session.provider && session.provider !== 'claude' && (
@@ -298,7 +298,7 @@ export default function SidebarContent({
                       <div className="space-y-1 pl-4">
                         {session.matches.map((match, idx) => (
                           <div key={idx} className="flex items-start gap-1">
-                            <span className="mt-0.5 flex-shrink-0 text-[10px] font-medium uppercase text-muted-foreground/60">
+                            <span className="mt-0.5 flex-shrink-0 text-[10px] font-normal uppercase text-muted-foreground/60">
                               {match.role === 'user' ? 'U' : 'A'}
                             </span>
                             <HighlightedSnippet
@@ -336,11 +336,11 @@ export default function SidebarContent({
                   <span className="flex h-6 w-6 items-center justify-center rounded-md bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">
                     <Activity className="h-3.5 w-3.5" />
                   </span>
-                  <span className="truncate text-xs font-medium text-foreground">
+                  <span className="truncate text-xs font-normal text-foreground">
                     {t('running.title', 'Running now')}
                   </span>
                 </div>
-                <span className="rounded-full bg-emerald-500/10 px-2 py-0.5 text-[11px] font-medium text-emerald-700 dark:text-emerald-300">
+                <span className="rounded-full bg-emerald-500/10 px-2 py-0.5 text-[11px] font-normal text-emerald-700 dark:text-emerald-300">
                   {runningSessionsCount}
                 </span>
               </div>
@@ -395,7 +395,7 @@ export default function SidebarContent({
                       <div className="min-w-0">
                         <div className="flex items-center gap-2">
                           <Folder className="h-3.5 w-3.5 flex-shrink-0 text-muted-foreground" />
-                          <span className="truncate text-sm font-medium text-foreground">
+                          <span className="truncate text-sm font-normal text-foreground">
                             {project.displayName}
                           </span>
                           <span className="inline-flex items-center justify-center rounded-full bg-muted px-1 py-px text-center text-[7px] font-medium uppercase leading-none tracking-[0.02em] text-muted-foreground">
@@ -448,7 +448,7 @@ export default function SidebarContent({
                             <SessionProviderLogo provider={session.__provider} className="h-3.5 w-3.5 flex-shrink-0" />
                             <div className="min-w-0 flex-1">
                               <div className="flex items-center gap-2">
-                                <span className="truncate text-xs font-medium text-foreground">
+                                <span className="truncate text-xs font-normal text-foreground">
                                   {(typeof session.summary === 'string' && session.summary.trim().length > 0
                                     ? session.summary
                                     : typeof session.name === 'string' && session.name.trim().length > 0
@@ -484,7 +484,7 @@ export default function SidebarContent({
                     <div className="min-w-0">
                       <div className="flex items-center gap-2">
                         <Folder className="h-3.5 w-3.5 flex-shrink-0 text-muted-foreground" />
-                        <span className="truncate text-sm font-medium text-foreground">
+                        <span className="truncate text-sm font-normal text-foreground">
                           {group.projectDisplayName}
                         </span>
                         {group.isProjectArchived && (
@@ -513,7 +513,7 @@ export default function SidebarContent({
                           <SessionProviderLogo provider={session.provider} className="h-3.5 w-3.5 flex-shrink-0" />
                           <div className="min-w-0 flex-1">
                             <div className="flex items-center gap-2">
-                              <span className="truncate text-xs font-medium text-foreground">
+                              <span className="truncate text-xs font-normal text-foreground">
                                 {session.sessionTitle}
                               </span>
                               {session.lastActivity && (

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

@@ -70,7 +70,7 @@ export default function SidebarFooter({
                 <span className="absolute -right-0.5 -top-0.5 h-1.5 w-1.5 animate-pulse rounded-full bg-blue-500" />
               </div>
               <div className="min-w-0 flex-1">
-                <span className="block truncate text-sm font-medium text-blue-600 dark:text-blue-300">
+                <span className="block truncate text-sm font-normal text-blue-600 dark:text-blue-300">
                   {releaseInfo?.title || `v${latestVersion}`}
                 </span>
                 <span className="text-[10px] text-blue-500/70 dark:text-blue-400/60">
@@ -91,7 +91,7 @@ export default function SidebarFooter({
                 <span className="absolute -right-0.5 -top-0.5 h-1.5 w-1.5 animate-pulse rounded-full bg-blue-500" />
               </div>
               <div className="min-w-0 flex-1 text-left">
-                <span className="block truncate text-sm font-medium text-blue-600 dark:text-blue-300">
+                <span className="block truncate text-sm font-normal text-blue-600 dark:text-blue-300">
                   {releaseInfo?.title || `v${latestVersion}`}
                 </span>
                 <span className="text-xs text-blue-500/70 dark:text-blue-400/60">
@@ -168,7 +168,7 @@ export default function SidebarFooter({
           <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-background/80">
             <Bug className="h-4 w-4 text-muted-foreground" />
           </div>
-          <span className="text-sm font-medium text-foreground">{t('actions.reportIssue')}</span>
+          <span className="text-sm font-normal text-foreground">{t('actions.reportIssue')}</span>
         </a>
       </div>
 
@@ -183,7 +183,7 @@ export default function SidebarFooter({
           <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-background/80">
             <DiscordIcon className="h-4 w-4 text-muted-foreground" />
           </div>
-          <span className="text-sm font-medium text-foreground">{t('actions.joinCommunity')}</span>
+          <span className="text-sm font-normal text-foreground">{t('actions.joinCommunity')}</span>
         </a>
       </div>
 
@@ -196,7 +196,7 @@ export default function SidebarFooter({
           <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-background/80">
             <Settings className="h-4 w-4 text-muted-foreground" />
           </div>
-          <span className="text-sm font-medium text-foreground">{t('actions.settings')}</span>
+          <span className="text-sm font-normal text-foreground">{t('actions.settings')}</span>
         </button>
       </div>
     </div>

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"
@@ -167,7 +167,7 @@ export default function SidebarHeader({
                   aria-label={t('search.runningTooltip', 'Running sessions')}
                   title={t('search.runningTooltip', 'Running sessions')}
                   className={cn(
-                    "flex items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-medium transition-all",
+                    "flex items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-normal transition-all",
                     searchMode === 'running'
                       ? "bg-background shadow-sm text-foreground ring-1 ring-emerald-500/15"
                       : "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"
@@ -307,7 +307,7 @@ export default function SidebarHeader({
                   aria-label={t('search.runningTooltip', 'Running sessions')}
                   title={t('search.runningTooltip', 'Running sessions')}
                   className={cn(
-                    "flex items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-medium transition-all",
+                    "flex items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-normal transition-all",
                     searchMode === 'running'
                       ? "bg-background shadow-sm text-foreground ring-1 ring-emerald-500/15"
                       : "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(

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

@@ -102,7 +102,7 @@ export default function TaskIndicator({
         title={indicatorConfig.title}
       >
         <Icon className={sizeClassNames[size]} />
-        <span className="font-medium">{indicatorConfig.label}</span>
+        <span className="font-normal">{indicatorConfig.label}</span>
       </div>
     );
   }

src/constants/featureFlags.ts

@@ -0,0 +1,3 @@
+// TODO: Re-enable Computer Use menus after fixing the MCP server connection
+// between the desktop app and the web UI.
+export const COMPUTER_USE_MENUS_ENABLED = false;

src/contexts/ThemeContext.jsx

@@ -91,4 +91,4 @@ export const ThemeProvider = ({ children }) => {
       {children}
     </ThemeContext.Provider>
   );
-};
+};

src/hooks/useProjectsState.ts

@@ -324,7 +324,7 @@ const removeSessionFromProject = (project: Project, sessionIdToDelete: string):
   return updatedProject;
 };
 
-const VALID_TABS: Set<string> = new Set(['chat', 'files', 'shell', 'git', 'tasks', 'browser']);
+const VALID_TABS: Set<string> = new Set(['chat', 'files', 'shell', 'git', 'tasks', 'browser', 'computer']);
 
 const isValidTab = (tab: string): tab is AppTab => {
   return VALID_TABS.has(tab) || tab.startsWith('plugin:');
@@ -776,7 +776,7 @@ export function useProjectsState({
     (session: ProjectSession) => {
       setSelectedSession(session);
 
-      if (activeTab === 'tasks' || activeTab === 'browser') {
+      if (activeTab === 'tasks' || activeTab === 'browser' || activeTab === 'computer') {
         setActiveTab('chat');
       }
 

src/hooks/useWebPush.ts

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
+
 import { authenticatedFetch } from '../utils/api';
 
 type WebPushState = {
@@ -22,7 +23,12 @@ function urlBase64ToUint8Array(base64String: string): Uint8Array {
 
 export function useWebPush(): WebPushState {
   const [permission, setPermission] = useState<NotificationPermission | 'unsupported'>(() => {
-    if (typeof window === 'undefined' || !('Notification' in window) || !('serviceWorker' in navigator)) {
+    if (
+      typeof window === 'undefined'
+      || Boolean((window as any).cloudcliDesktopNotifications)
+      || !('Notification' in window)
+      || !('serviceWorker' in navigator)
+    ) {
       return 'unsupported';
     }
     return Notification.permission;

src/i18n/locales/de/common.json

@@ -23,7 +23,8 @@
     "files": "Dateien",
     "git": "Quellcodeverwaltung",
     "tasks": "Aufgaben",
-    "browser": "Browser"
+    "browser": "Browser",
+    "computer": "Computer"
   },
   "status": {
     "loading": "Lädt...",

src/i18n/locales/de/settings.json

@@ -94,6 +94,7 @@
     "git": "Git",
     "apiTokens": "API & Token",
     "tasks": "Aufgaben",
+    "computer": "Computer Use",
     "notifications": "Benachrichtigungen",
     "plugins": "Plugins",
     "about": "Info"

src/i18n/locales/en/common.json

@@ -23,7 +23,8 @@
     "files": "Files",
     "git": "Source Control",
     "tasks": "Tasks",
-    "browser": "Browser"
+    "browser": "Browser",
+    "computer": "Computer"
   },
   "status": {
     "loading": "Loading...",

src/i18n/locales/en/settings.json

@@ -113,6 +113,7 @@
     "voice": "Voice",
     "tasks": "Tasks",
     "browser": "Browser",
+    "computer": "Computer Use",
     "notifications": "Notifications",
     "plugins": "Plugins",
     "about": "About"
@@ -121,14 +122,21 @@
     "title": "Notifications",
     "description": "Control which notification events you receive.",
     "webPush": {
-      "title": "Web Push Notifications",
-      "enable": "Enable Push Notifications",
-      "disable": "Disable Push Notifications",
-      "enabled": "Push notifications are enabled",
+      "title": "Notify this browser",
+      "enable": "Enable notifications",
+      "disable": "Disable notifications",
+      "enabled": "Notifications are enabled for this browser",
       "loading": "Updating...",
       "unsupported": "Push notifications are not supported in this browser.",
       "denied": "Push notifications are blocked. Please allow them in your browser settings."
     },
+    "desktop": {
+      "title": "Notify this desktop app",
+      "enable": "Enable notifications",
+      "disable": "Disable notifications",
+      "enabled": "Notifications are enabled for this desktop app",
+      "unsupported": "Desktop notifications are not supported on this system."
+    },
     "sound": {
       "title": "Sound",
       "description": "Play a short tone when a chat run finishes or needs tool approval.",

src/i18n/locales/fr/common.json

@@ -22,7 +22,9 @@
     "shell": "Terminal",
     "files": "Fichiers",
     "git": "Contrôle de source",
-    "tasks": "Tâches"
+    "tasks": "Tâches",
+    "browser": "Navigateur",
+    "computer": "Ordinateur"
   },
   "status": {
     "loading": "Chargement...",

src/i18n/locales/fr/settings.json

@@ -94,6 +94,7 @@
     "git": "Git",
     "apiTokens": "API & Tokens",
     "tasks": "Tâches",
+    "computer": "Computer Use",
     "notifications": "Notifications",
     "plugins": "Plugins",
     "about": "À propos"

src/i18n/locales/it/common.json

@@ -23,7 +23,8 @@
     "files": "File",
     "git": "Controllo Versione",
     "tasks": "Attività",
-    "browser": "Browser"
+    "browser": "Browser",
+    "computer": "Computer"
   },
   "status": {
     "loading": "Caricamento...",

src/i18n/locales/it/settings.json

@@ -94,6 +94,7 @@
     "git": "Git",
     "apiTokens": "API e Token",
     "tasks": "Attività",
+    "computer": "Computer Use",
     "notifications": "Notifiche",
     "plugins": "Plugin",
     "about": "Informazioni"

src/i18n/locales/ja/common.json

@@ -23,7 +23,8 @@
     "files": "ファイル",
     "git": "ソース管理",
     "tasks": "タスク",
-    "browser": "Browser"
+    "browser": "Browser",
+    "computer": "Computer"
   },
   "status": {
     "loading": "読み込み中...",

src/i18n/locales/ja/settings.json

@@ -94,6 +94,7 @@
     "git": "Git",
     "apiTokens": "API & トークン",
     "tasks": "タスク",
+    "computer": "Computer Use",
     "notifications": "通知",
     "plugins": "プラグイン",
     "about": "概要"

src/i18n/locales/ko/common.json

@@ -23,7 +23,8 @@
     "files": "파일",
     "git": "소스 관리",
     "tasks": "작업",
-    "browser": "Browser"
+    "browser": "Browser",
+    "computer": "Computer"
   },
   "status": {
     "loading": "로딩 중...",

src/i18n/locales/ko/settings.json

@@ -94,6 +94,7 @@
     "git": "Git",
     "apiTokens": "API & 토큰",
     "tasks": "작업",
+    "computer": "Computer Use",
     "notifications": "알림",
     "plugins": "플러그인",
     "about": "정보"

src/i18n/locales/ru/common.json

@@ -23,7 +23,8 @@
     "files": "Файлы",
     "git": "Система контроля версий",
     "tasks": "Задачи",
-    "browser": "Browser"
+    "browser": "Browser",
+    "computer": "Компьютер"
   },
   "status": {
     "loading": "Загрузка...",

src/i18n/locales/ru/settings.json

@@ -94,6 +94,7 @@
     "git": "Git",
     "apiTokens": "API и токены",
     "tasks": "Задачи",
+    "computer": "Computer Use",
     "notifications": "Уведомления",
     "plugins": "Плагины",
     "about": "О программе"

src/i18n/locales/tr/common.json

@@ -23,7 +23,8 @@
     "files": "Dosyalar",
     "git": "Kaynak Kontrolü",
     "tasks": "Görevler",
-    "browser": "Browser"
+    "browser": "Browser",
+    "computer": "Bilgisayar"
   },
   "status": {
     "loading": "Yükleniyor...",

src/i18n/locales/tr/settings.json

@@ -94,6 +94,7 @@
     "git": "Git",
     "apiTokens": "API ve Token'lar",
     "tasks": "Görevler",
+    "computer": "Bilgisayar Kullanımı",
     "notifications": "Bildirimler",
     "plugins": "Eklentiler",
     "about": "Hakkında"

src/i18n/locales/zh-CN/common.json

@@ -23,7 +23,8 @@
     "files": "文件",
     "git": "源代码管理",
     "tasks": "任务",
-    "browser": "Browser"
+    "browser": "浏览器",
+    "computer": "计算机"
   },
   "status": {
     "loading": "加载中...",

src/i18n/locales/zh-CN/settings.json

@@ -94,6 +94,7 @@
     "git": "Git",
     "apiTokens": "API 和令牌",
     "tasks": "任务",
+    "computer": "计算机使用",
     "notifications": "通知",
     "plugins": "插件",
     "about": "关于"

src/i18n/locales/zh-TW/common.json

@@ -23,7 +23,8 @@
     "files": "檔案",
     "git": "版本控制",
     "tasks": "任務",
-    "browser": "Browser"
+    "browser": "瀏覽器",
+    "computer": "電腦"
   },
   "status": {
     "loading": "載入中...",

src/i18n/locales/zh-TW/settings.json

@@ -94,6 +94,7 @@
     "git": "Git",
     "apiTokens": "API 和權杖",
     "tasks": "任務",
+    "computer": "電腦使用",
     "notifications": "通知",
     "plugins": "外掛",
     "about": "關於"

src/index.css

@@ -129,6 +129,8 @@
   body {
     @apply bg-background text-foreground;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
     margin: 0;
     padding: 0;
   }
@@ -555,6 +557,30 @@
 
 /* Mobile optimizations and components */
 @layer components {
+  .chat-messages-pane {
+    contain: layout style paint;
+  }
+
+  .chat-composer-shell {
+    contain: layout style paint;
+  }
+
+  .chat-message {
+    contain: layout style paint;
+    content-visibility: auto;
+    contain-intrinsic-size: auto 180px;
+  }
+
+  .chat-message.assistant {
+    contain-intrinsic-size: auto 240px;
+  }
+
+  .chat-message.user,
+  .chat-message.tool,
+  .chat-message.error {
+    contain-intrinsic-size: auto 96px;
+  }
+
   /* Mobile touch optimization and safe areas */
   @media (max-width: 768px) {
     * {

src/types/app.ts

@@ -17,7 +17,7 @@ export type ProviderModelsCacheInfo = {
   source: 'memory' | 'disk' | 'fresh';
 };
 
-export type AppTab = 'chat' | 'files' | 'shell' | 'git' | 'tasks' | 'browser' | `plugin:${string}`;
+export type AppTab = 'chat' | 'files' | 'shell' | 'git' | 'tasks' | 'browser' | 'computer' | `plugin:${string}`;
 
 export interface ProjectSession {
   id: string;