Merge remote-tracking branch 'origin/browser-use' into electron-app

# Conflicts:
#	src/i18n/locales/en/settings.json

src/components/app/AppContent.tsx

@@ -71,7 +71,6 @@ function AppContentInner() {
     setActiveTab,
     setSidebarOpen,
     setIsInputFocused,
-    setShowSettings,
     openSettings,
     refreshProjectsSilently,
     registerOptimisticSession,
@@ -247,7 +246,7 @@ function AppContentInner() {
           onSessionEstablished={(targetSessionId, context) =>
             registerOptimisticSession({ sessionId: targetSessionId, ...context })
           }
-          onShowSettings={() => setShowSettings(true)}
+          onShowSettings={openSettings}
           externalMessageUpdate={externalMessageUpdate}
           newSessionTrigger={newSessionTrigger}
         />

src/components/browser-use/view/BrowserUsePanel.tsx

@@ -1,8 +1,23 @@
-import { useCallback, useEffect, useMemo, useRef, useState, type KeyboardEvent, type MouseEvent } from 'react';
-import { Bot, Download, Expand, ExternalLink, Globe, Loader2, MonitorPlay, Navigation, RefreshCw, Share2, Square, Trash2, X } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  Bot,
+  Clock3,
+  Download,
+  Expand,
+  ExternalLink,
+  Loader2,
+  MonitorPlay,
+  RefreshCw,
+  Settings,
+  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 BrowserUseStatus = {
   enabled: boolean;
@@ -11,8 +26,6 @@ type BrowserUseStatus = {
   chromiumInstalled: boolean;
   installInProgress: boolean;
   sessionCount: number;
-  agentToolsEnabled: boolean;
-  mcpRecommended: boolean;
   message: string;
 };
 
@@ -26,8 +39,7 @@ type BrowserUseSession = {
   updatedAt: string;
   lastAction: string | null;
   message: string | null;
-  agentAccessEnabled: boolean;
-  createdBy: 'user' | 'agent';
+  createdBy: 'agent';
   profileName: string | null;
   viewport: {
     width: number;
@@ -36,12 +48,13 @@ type BrowserUseSession = {
   cursor: {
     x: number;
     y: number;
-    actor: 'agent' | 'user';
+    actor: 'agent';
   } | null;
 };
 
 type BrowserUsePanelProps = {
   isVisible: boolean;
+  onShowSettings?: (tab?: SettingsMainTab) => void;
 };
 
 async function readJson<T>(response: Response): Promise<T> {
@@ -52,48 +65,127 @@ async function readJson<T>(response: Response): Promise<T> {
   return data as T;
 }
 
-export default function BrowserUsePanel({ isVisible }: BrowserUsePanelProps) {
+function formatRelativeTime(value: string | null): string {
+  if (!value) return 'Never';
+
+  const timestamp = Date.parse(value);
+  if (!Number.isFinite(timestamp)) return 'Unknown';
+
+  const elapsedSeconds = Math.max(0, Math.round((Date.now() - timestamp) / 1000));
+  if (elapsedSeconds < 10) return 'Just now';
+  if (elapsedSeconds < 60) return `${elapsedSeconds}s ago`;
+  const elapsedMinutes = Math.round(elapsedSeconds / 60);
+  if (elapsedMinutes < 60) return `${elapsedMinutes}m ago`;
+  const elapsedHours = Math.round(elapsedMinutes / 60);
+  if (elapsedHours < 24) return `${elapsedHours}h ago`;
+  return `${Math.round(elapsedHours / 24)}d ago`;
+}
+
+function getDomain(url: string | null): string {
+  if (!url) return 'No page loaded';
+
+  try {
+    return new URL(url).hostname;
+  } catch {
+    return url;
+  }
+}
+
+function formatAction(action: string | null): string {
+  if (!action) return 'Waiting';
+  return action.replace(/_/g, ' ').replace(/:/g, ': ');
+}
+
+function getStatusTone(status: BrowserUseSession['status']): string {
+  if (status === 'ready') {
+    return 'border-primary/30 bg-primary/5 text-foreground';
+  }
+  if (status === 'stopped') {
+    return 'border-border bg-muted text-muted-foreground';
+  }
+  return 'border-border bg-background text-muted-foreground';
+}
+
+function getRuntimeTone(status: BrowserUseStatus | null, installing: boolean): string {
+  if (!status?.enabled) return 'border-border bg-muted text-muted-foreground';
+  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 getStatusDot(status: BrowserUseSession['status']): string {
+  if (status === 'ready') return 'bg-primary';
+  if (status === 'stopped') return 'bg-muted-foreground/50';
+  return 'bg-border';
+}
+
+const PROMPTS = [
+  'Use Browser to inspect the checkout flow and report any broken UI states.',
+  'Open <url> with Browser, interact with the page, and summarize what changed after each step.',
+];
+
+export default function BrowserUsePanel({ isVisible, onShowSettings }: BrowserUsePanelProps) {
   const [status, setStatus] = useState<BrowserUseStatus | null>(null);
   const [sessions, setSessions] = useState<BrowserUseSession[]>([]);
   const [selectedSessionId, setSelectedSessionId] = useState<string | null>(null);
-  const [targetUrl, setTargetUrl] = useState('https://example.com');
+  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 activeSessions = sessions.filter((session) => session.status === 'ready');
+  const needsBrowserBinaries = Boolean(status?.enabled && (!status.playwrightInstalled || !status.chromiumInstalled));
+  const runtimeLabel = !status?.enabled
+    ? 'Disabled'
+    : status.available
+      ? 'Ready'
+      : status.installInProgress || isInstalling
+        ? 'Installing'
+        : 'Setup required';
+
+  const cursorStyle = selectedSession?.cursor && selectedSession.viewport
+    ? {
+      left: `${(selectedSession.cursor.x / selectedSession.viewport.width) * 100}%`,
+      top: `${(selectedSession.cursor.y / selectedSession.viewport.height) * 100}%`,
+    }
+    : null;
+
   const refresh = useCallback(async () => {
-    const [statusResponse, sessionsResponse] = await Promise.all([
-      authenticatedFetch('/api/browser-use/status'),
-      authenticatedFetch('/api/browser-use/sessions'),
-    ]);
-    const statusData = await readJson<{ data: BrowserUseStatus }>(statusResponse);
-    const sessionsData = await readJson<{ data: { sessions: BrowserUseSession[] } }>(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
-    ));
+    setIsRefreshing(true);
+    try {
+      const [statusResponse, sessionsResponse] = await Promise.all([
+        authenticatedFetch('/api/browser-use/status'),
+        authenticatedFetch('/api/browser-use/sessions'),
+      ]);
+      const statusData = await readJson<{ data: BrowserUseStatus }>(statusResponse);
+      const sessionsData = await readJson<{ data: { sessions: BrowserUseSession[] } }>(sessionsResponse);
+      const nextSessions = sessionsData.data.sessions;
+      setStatus(statusData.data);
+      setSessions(nextSessions);
+      setSelectedSessionId((current) => (
+        current && nextSessions.some((session) => session.id === current)
+          ? current
+          : nextSessions[0]?.id || null
+      ));
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load Browser');
+    } finally {
+      setIsRefreshing(false);
+    }
   }, []);
 
   useEffect(() => {
     if (!isVisible) return;
-    void refresh().catch((err) => setError(err instanceof Error ? err.message : 'Failed to load Browser Use'));
+    void refresh();
   }, [isVisible, refresh]);
 
-  useEffect(() => {
-    if (!selectedSession?.url) return;
-    setTargetUrl(selectedSession.url);
-  }, [selectedSession?.id, selectedSession?.url]);
-
   const runAction = useCallback(async (action: () => Promise<void>) => {
     setIsBusy(true);
     setError(null);
@@ -101,29 +193,12 @@ export default function BrowserUsePanel({ isVisible }: BrowserUsePanelProps) {
       await action();
       await refresh();
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Browser Use action failed');
+      setError(err instanceof Error ? err.message : 'Browser action failed');
     } finally {
       setIsBusy(false);
     }
   }, [refresh]);
 
-  const createSession = () => runAction(async () => {
-    const response = await authenticatedFetch('/api/browser-use/sessions', { method: 'POST' });
-    const data = await readJson<{ data: { session: BrowserUseSession } }>(response);
-    setSelectedSessionId(data.data.session.id);
-  });
-
-  const navigate = () => runAction(async () => {
-    if (!selectedSession) {
-      throw new Error('Create a browser session first.');
-    }
-    const response = await authenticatedFetch(`/api/browser-use/sessions/${selectedSession.id}/navigate`, {
-      method: 'POST',
-      body: JSON.stringify({ url: targetUrl }),
-    });
-    await readJson(response);
-  });
-
   const stopSession = () => runAction(async () => {
     if (!selectedSession) return;
     const response = await authenticatedFetch(`/api/browser-use/sessions/${selectedSession.id}/stop`, { method: 'POST' });
@@ -137,18 +212,6 @@ export default function BrowserUsePanel({ isVisible }: BrowserUsePanelProps) {
     setIsFullscreen(false);
   });
 
-  const grantAgentAccess = () => runAction(async () => {
-    if (!selectedSession) return;
-    const response = await authenticatedFetch(`/api/browser-use/sessions/${selectedSession.id}/agent-access/grant`, { method: 'POST' });
-    await readJson(response);
-  });
-
-  const revokeAgentAccess = () => runAction(async () => {
-    if (!selectedSession) return;
-    const response = await authenticatedFetch(`/api/browser-use/sessions/${selectedSession.id}/agent-access/revoke`, { method: 'POST' });
-    await readJson(response);
-  });
-
   const installBrowserBinaries = () => runAction(async () => {
     setIsInstalling(true);
     try {
@@ -159,80 +222,108 @@ export default function BrowserUsePanel({ isVisible }: BrowserUsePanelProps) {
     }
   });
 
-  const clickViewer = useCallback((event: MouseEvent<HTMLImageElement>) => {
-    if (!selectedSession || selectedSession.status !== 'ready' || !selectedSession.viewport) {
-      return;
-    }
-    viewerRef.current?.focus();
+  const renderSessionItem = (session: BrowserUseSession) => {
+    const isSelected = selectedSession?.id === session.id;
+    return (
+      <button
+        key={session.id}
+        type="button"
+        onClick={() => setSelectedSessionId(session.id)}
+        className={cn(
+          'group w-full rounded-md border px-3 py-2.5 text-left transition-colors',
+          isSelected
+            ? '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-start justify-between gap-2">
+          <div className="min-w-0">
+            <div className="flex min-w-0 items-center gap-2">
+              <span className={cn('h-1.5 w-1.5 shrink-0 rounded-full', getStatusDot(session.status))} />
+              <div className="truncate text-sm font-medium">{session.title || getDomain(session.url)}</div>
+            </div>
+            <div className="mt-1 truncate pl-3.5 text-xs text-muted-foreground">{getDomain(session.url)}</div>
+          </div>
+          <Badge variant="outline" className="shrink-0 border-border bg-background text-[10px] text-muted-foreground">
+            {session.status}
+          </Badge>
+        </div>
+        <div className="mt-2 flex items-center gap-1.5 text-[11px] text-muted-foreground">
+          <Clock3 className="h-3 w-3" />
+          <span>{formatRelativeTime(session.updatedAt)}</span>
+          <span className="truncate">- {formatAction(session.lastAction)}</span>
+        </div>
+      </button>
+    );
+  };
 
-    const bounds = event.currentTarget.getBoundingClientRect();
-    const scaleX = selectedSession.viewport.width / bounds.width;
-    const scaleY = selectedSession.viewport.height / bounds.height;
-    const x = Math.round((event.clientX - bounds.left) * scaleX);
-    const y = Math.round((event.clientY - bounds.top) * scaleY);
+  const renderEmptyState = () => (
+    <div className="flex min-h-0 flex-1 items-center justify-center p-6">
+      <div className="w-full max-w-2xl rounded-md border border-border bg-card/40 p-5 shadow-sm">
+        <div className="flex items-start gap-3">
+          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md border border-border bg-background">
+            <MonitorPlay className="h-5 w-5 text-primary" />
+          </div>
+          <div className="min-w-0">
+            <div className="text-sm font-semibold text-foreground">
+              {status?.enabled ? 'No browser sessions yet' : 'Browser is disabled'}
+            </div>
+            <p className="mt-1 max-w-xl text-sm leading-6 text-muted-foreground">
+              {status?.enabled
+                ? 'Agent browser sessions appear here while an AI task is using Browser.'
+                : 'Enable Browser in settings to let agents open monitored browser sessions.'}
+            </p>
+          </div>
+        </div>
 
-    void runAction(async () => {
-      const response = await authenticatedFetch(`/api/browser-use/sessions/${selectedSession.id}/click`, {
-        method: 'POST',
-        body: JSON.stringify({ x, y }),
-      });
-      await readJson(response);
-    });
-  }, [runAction, selectedSession]);
+        {needsBrowserBinaries && (
+          <div className="mt-4 rounded-md border border-border bg-muted/30 p-3">
+            <div className="text-sm font-medium text-foreground">Runtime setup required</div>
+            <p className="mt-1 text-sm text-muted-foreground">{status?.message}</p>
+            <Button
+              type="button"
+              size="sm"
+              className="mt-3"
+              onClick={installBrowserBinaries}
+              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>
+        )}
 
-  const keyForEvent = useCallback((event: KeyboardEvent<HTMLDivElement>) => {
-    if (event.key === ' ') return 'Space';
-    return event.key;
-  }, []);
-
-  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/browser-use/sessions/${selectedSession.id}/press-key`, {
-        method: 'POST',
-        body: JSON.stringify({ key }),
-      });
-      await readJson(response);
-    });
-  }, [keyForEvent, runAction, selectedSession]);
-
-  const needsBrowserBinaries = Boolean(status?.enabled && (!status.playwrightInstalled || !status.chromiumInstalled));
-
-  const cursorStyle = selectedSession?.cursor && selectedSession.viewport
-    ? {
-      left: `${(selectedSession.cursor.x / selectedSession.viewport.width) * 100}%`,
-      top: `${(selectedSession.cursor.y / selectedSession.viewport.height) * 100}%`,
-    }
-    : null;
+        <div className="mt-5 grid gap-2 sm:grid-cols-2">
+          {PROMPTS.map((prompt) => (
+            <div key={prompt} className="rounded-md border border-border/70 bg-background/70 p-3">
+              <div className="mb-2 flex items-center gap-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                <Bot className="h-3.5 w-3.5" />
+                Prompt
+              </div>
+              <p className="text-sm leading-6 text-foreground">{prompt}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
 
   const renderBrowserSurface = (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]' : ''}`}
-    >
+    <div className={cn('flex flex-1 items-center justify-center bg-neutral-950', fullscreen ? 'min-h-[80vh]' : 'min-h-[420px]')}>
       {selectedSession?.screenshotDataUrl ? (
         <div className="relative inline-block max-h-full">
           <img
             src={selectedSession.screenshotDataUrl}
             alt="Browser session 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}
+            className={fullscreen ? 'block max-h-[80vh] w-auto max-w-full object-contain' : 'block max-h-[72vh] w-auto max-w-full object-contain'}
           />
           {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)]"
+              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-primary/80 shadow-[0_0_0_6px_hsl(var(--primary)/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" />
@@ -240,14 +331,10 @@ export default function BrowserUsePanel({ isVisible }: BrowserUsePanelProps) {
           )}
         </div>
       ) : (
-        <div className="max-w-md px-6 text-center">
-          <MonitorPlay className="mx-auto h-10 w-10 text-neutral-500" />
-          <div className="mt-3 text-sm font-medium text-neutral-100">
-            {selectedSession?.message || 'Create a browser session to start.'}
-          </div>
-          <p className="mt-2 text-xs leading-relaxed text-neutral-400">
-            Install browser binaries from this panel or enable Browser Use from Settings.
-          </p>
+        <div className="px-6 text-center">
+          <MonitorPlay className="mx-auto h-9 w-9 text-neutral-500" />
+          <div className="mt-3 text-sm font-medium text-neutral-100">{selectedSession?.message || 'Waiting for screenshot'}</div>
+          <p className="mt-1 text-xs text-neutral-400">The next agent browser snapshot will render here.</p>
         </div>
       )}
     </div>
@@ -255,171 +342,184 @@ export default function BrowserUsePanel({ isVisible }: BrowserUsePanelProps) {
 
   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="flex 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">
             <MonitorPlay className="h-4 w-4 text-primary" />
-            <h3 className="text-sm font-semibold text-foreground">Browser Use</h3>
+            <h3 className="text-sm font-semibold text-foreground">Browser</h3>
+            <Badge variant="outline" className={cn('text-[10px]', getRuntimeTone(status, isInstalling))}>
+              {runtimeLabel}
+            </Badge>
           </div>
-          <p className="mt-0.5 text-xs text-muted-foreground">
-            Create browser sessions, watch agent activity, and decide which sessions agents may control.
-          </p>
+          <p className="mt-0.5 text-xs text-muted-foreground">Monitor browser sessions opened by AI agents.</p>
         </div>
-        <div className="flex flex-wrap items-center gap-2">
-          <a
-            href="https://cloudcli.ai/docs/user-guide/browser-use"
-            target="_blank"
-            rel="noreferrer"
-            className="inline-flex h-9 items-center justify-center gap-2 rounded-md border border-input bg-background px-3 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground"
+        <div className="flex items-center gap-1.5">
+          {onShowSettings && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 w-7 p-0"
+              onClick={() => onShowSettings('browser')}
+              title="Open Browser settings"
+              aria-label="Open Browser settings"
+            >
+              <Settings className="h-3.5 w-3.5" />
+            </Button>
+          )}
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 w-7 p-0"
+            onClick={() => void refresh()}
+            disabled={isRefreshing || isBusy}
+            title="Refresh browser sessions"
+            aria-label="Refresh browser sessions"
           >
-            Guide
-            <ExternalLink className="h-4 w-4" />
-          </a>
-          <Button variant="outline" size="sm" onClick={() => void refresh()} disabled={isBusy}>
-            <RefreshCw className="h-4 w-4" />
-            Refresh
-          </Button>
-          <Button size="sm" onClick={createSession} disabled={isBusy || !status?.available}>
-            <Globe className="h-4 w-4" />
-            New Session
+            <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-[280px_minmax(0,1fr)]">
-        <aside className="border-b border-border/60 p-3 lg:border-b-0 lg:border-r">
-          {needsBrowserBinaries && (
-            <div className="rounded-lg border border-border/70 bg-card/40 p-3">
-              <div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">Browser binaries required</div>
-              <p className="mt-2 text-xs leading-relaxed text-muted-foreground">
-                {status?.message || 'Install the browser binaries needed to create Browser Use sessions.'}
-              </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">
-                  Playwright: {status?.playwrightInstalled ? 'installed' : 'missing'}
-                </span>
-                <span className="rounded-md border border-border px-2 py-1">
-                  Chromium: {status?.chromiumInstalled ? 'installed' : 'missing'}
-                </span>
-              </div>
-              <Button
-                type="button"
-                size="sm"
-                className="mt-3 w-full"
-                onClick={installBrowserBinaries}
-                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 Binaries'}
-              </Button>
-            </div>
-          )}
+      {error && (
+        <div className="border-b border-destructive/20 bg-destructive/10 px-4 py-2 text-sm text-destructive">
+          {error}
+        </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">
-              Agents can create their own browser sessions when browser tools are enabled. Use
-              <span className="font-medium text-foreground"> Give Agent Access </span>
-              to let agents control a session you created, and revoke access whenever you want.
-            </div>
+      {sessions.length > 0 && (
+        <div className="border-b border-border/60 bg-muted/20 px-3 py-2 lg:hidden">
+          <div className="flex gap-2 overflow-x-auto">
             {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'
-                }`}
+                className={cn(
+                  'flex min-w-[180px] items-center gap-2 rounded-md border px-2.5 py-2 text-left',
+                  selectedSession?.id === session.id
+                    ? 'border-primary/40 bg-primary/5'
+                    : 'border-border bg-background',
+                )}
               >
-                <div className="flex items-center justify-between gap-2">
-                  <span className="truncate font-medium">{session.title || session.url || 'Browser 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">
-                      shared
-                    </span>
-                  )}
-                </div>
-                <div className="mt-1 truncate text-xs">{session.url || session.message || session.id}</div>
+                <span className={cn('h-1.5 w-1.5 shrink-0 rounded-full', getStatusDot(session.status))} />
+                <span className="min-w-0 flex-1 truncate text-xs font-medium text-foreground">
+                  {session.title || getDomain(session.url)}
+                </span>
               </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">
-                No browser sessions yet.
+          </div>
+        </div>
+      )}
+
+      <div className="grid min-h-0 flex-1 grid-cols-1 lg:grid-cols-[minmax(0,1fr)_320px]">
+        <main className="flex min-h-0 flex-col overflow-hidden">
+          <div className="flex items-center justify-between gap-3 border-b border-border/60 bg-muted/20 px-4 py-2.5 text-xs text-muted-foreground">
+            <div className="min-w-0 truncate">
+              {activeSessions.length} active
+              <span className="px-1.5">/</span>
+              {sessions.length} total
+            </div>
+            <div className="min-w-0 truncate">
+              Updated {formatRelativeTime(selectedSession?.updatedAt || null)}
+            </div>
+          </div>
+
+          {sessions.length === 0 ? (
+            renderEmptyState()
+          ) : (
+            <div className="min-h-0 flex-1 overflow-auto bg-muted/20 p-4">
+              <div className="mx-auto flex min-h-[500px] max-w-7xl flex-col overflow-hidden rounded-md border border-border bg-background shadow-sm">
+                <div className="flex flex-wrap items-center gap-2 border-b border-border/60 px-3 py-2">
+                  <Badge variant="outline" className={selectedSession ? cn('text-[10px]', getStatusTone(selectedSession.status)) : 'text-[10px]'}>
+                    {selectedSession?.status || 'empty'}
+                  </Badge>
+                  <div className="min-w-0 flex-1">
+                    <div className="truncate text-sm font-medium text-foreground">
+                      {selectedSession?.title || getDomain(selectedSession?.url || null)}
+                    </div>
+                    <div className="mt-0.5 flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground">
+                      <ExternalLink className="h-3.5 w-3.5 shrink-0" />
+                      <span className="truncate">{selectedSession?.url || 'No page loaded'}</span>
+                    </div>
+                  </div>
+                  <div className="hidden text-xs text-muted-foreground md:block">
+                    {formatAction(selectedSession?.lastAction || null)}
+                  </div>
+                  <Button variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={() => setIsFullscreen(true)} disabled={!selectedSession?.screenshotDataUrl} title="Full screen" aria-label="Full screen">
+                    <Expand className="h-4 w-4" />
+                  </Button>
+                  <Button variant="ghost" size="sm" className="h-8 w-8 p-0 lg:hidden" onClick={stopSession} disabled={isBusy || !selectedSession || selectedSession.status !== 'ready'} title="Stop session" aria-label="Stop session">
+                    <Square className="h-4 w-4" />
+                  </Button>
+                  <Button variant="ghost" size="sm" className="h-8 w-8 p-0 lg:hidden" onClick={deleteSession} disabled={isBusy || !selectedSession} title="Delete session" aria-label="Delete session">
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+                {renderBrowserSurface()}
               </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">
-            <input
-              value={targetUrl}
-              onChange={(event) => setTargetUrl(event.target.value)}
-              className="h-9 min-w-[220px] flex-1 rounded-md border border-input bg-background px-3 text-sm outline-none focus:ring-1 focus:ring-ring"
-              placeholder="https://example.com"
-            />
-            <Button variant="outline" size="sm" onClick={navigate} disabled={isBusy || !selectedSession || selectedSession.status !== 'ready'}>
-              <Navigation className="h-4 w-4" />
-              Go
-            </Button>
-            {selectedSession?.agentAccessEnabled ? (
-              <Button variant="outline" size="sm" onClick={revokeAgentAccess} disabled={isBusy || !selectedSession}>
-                <X className="h-4 w-4" />
-                Revoke Agent
-              </Button>
-            ) : (
-              <Button variant="outline" size="sm" onClick={grantAgentAccess} disabled={isBusy || !selectedSession || !status?.agentToolsEnabled}>
-                <Share2 className="h-4 w-4" />
-                Give Agent Access
-              </Button>
-            )}
-            <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>
           )}
+        </main>
 
-          <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">
-                <ExternalLink className="h-3.5 w-3.5" />
-                <span className="truncate">{selectedSession?.url || 'No page loaded'}</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" />
-                    Agent access active
-                  </span>
-                )}
+        <aside className="hidden min-h-0 flex-col border-l border-border/60 bg-background lg:flex">
+          <div className="border-b border-border/60 px-4 py-3">
+            <div className="flex items-center justify-between gap-2">
+              <div>
+                <div className="text-sm font-semibold text-foreground">Sessions</div>
+                <div className="mt-0.5 text-xs text-muted-foreground">{sessions.length} total</div>
               </div>
-              {renderBrowserSurface()}
+              <Badge variant="outline" className="text-[10px]">{activeSessions.length} active</Badge>
             </div>
           </div>
-        </main>
+
+          <div className="min-h-0 flex-1 overflow-y-auto p-3">
+            {sessions.length > 0 ? (
+              <div className="space-y-2">{sessions.map(renderSessionItem)}</div>
+            ) : (
+              <div className="rounded-md border border-dashed border-border/70 px-3 py-8 text-center text-xs text-muted-foreground">
+                No agent browser sessions.
+              </div>
+            )}
+          </div>
+
+          <div className="border-t border-border/60 p-3">
+            <div className="rounded-md border border-border/70 bg-muted/30 p-3">
+              <div className="flex items-center gap-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                <Bot className="h-3.5 w-3.5" />
+                Selected
+              </div>
+              <div className="mt-3 space-y-2 text-xs text-muted-foreground">
+                <div className="flex items-center justify-between gap-3">
+                  <span>Status</span>
+                  <span className="font-medium text-foreground">{selectedSession?.status || 'None'}</span>
+                </div>
+                <div className="flex items-center justify-between gap-3">
+                  <span>Last action</span>
+                  <span className="truncate font-medium text-foreground">{formatAction(selectedSession?.lastAction || null)}</span>
+                </div>
+                <div className="flex items-center justify-between gap-3">
+                  <span>Profile</span>
+                  <span className="truncate font-medium text-foreground">{selectedSession?.profileName || 'Temporary'}</span>
+                </div>
+              </div>
+              <div className="mt-3 grid grid-cols-2 gap-2">
+                <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>
+            </div>
+          </div>
+        </aside>
       </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 h-full flex-col rounded-md 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">{selectedSession.title || selectedSession.url || 'Browser session'}</div>
               <Button variant="outline" size="sm" onClick={() => setIsFullscreen(false)}>

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

@@ -7,6 +7,7 @@ import type {
   SessionActivityMap,
 } from '../../../hooks/useSessionProtection';
 import type { SessionEstablishedContext, SessionNavigationOptions } from '../../chat/types/types';
+import type { SettingsMainTab } from '../../settings/types/types';
 
 export type TaskMasterTask = {
   id: string | number;
@@ -53,7 +54,7 @@ export type MainContentProps = {
   processingSessions: SessionActivityMap;
   onNavigateToSession: (targetSessionId: string, options?: SessionNavigationOptions) => void;
   onSessionEstablished: (sessionId: string, context: SessionEstablishedContext) => void;
-  onShowSettings: () => void;
+  onShowSettings: (tab?: SettingsMainTab) => void;
   externalMessageUpdate: number;
   newSessionTrigger: number;
 };

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

@@ -226,7 +226,7 @@ function MainContent({
 
           {shouldShowBrowserTab && activeTab === 'browser' && (
             <div className="h-full overflow-hidden">
-              <BrowserUsePanel isVisible={activeTab === 'browser'} />
+              <BrowserUsePanel isVisible={activeTab === 'browser'} onShowSettings={onShowSettings} />
             </div>
           )}
 

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

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

src/components/mcp/view/McpServers.tsx

@@ -52,6 +52,11 @@ const getServerKey = (server: ProviderMcpServer): string => (
   `${server.provider}:${server.scope}:${server.workspacePath || 'global'}:${server.name}`
 );
 
+// Servers prefixed with `cloudcli-` are written and removed automatically by a
+// CloudCLI feature toggle (e.g. the Browser tab), not added by the user. They are
+// shown read-only so users don't edit/delete them out of sync with the feature.
+const isManagedServer = (server: ProviderMcpServer): boolean => server.name.startsWith('cloudcli-');
+
 function ConfigLine({ label, children }: { label: string; children: string }) {
   if (!children) {
     return null;
@@ -177,65 +182,92 @@ export default function McpServers({ selectedProvider, currentProjects }: McpSer
           <div className="py-8 text-center text-muted-foreground">Loading MCP servers...</div>
         )}
 
-        {servers.map((server) => (
-          <div key={getServerKey(server)} className="rounded-lg border border-border bg-card/50 p-4">
-            <div className="flex items-start justify-between">
-              <div className="min-w-0 flex-1">
-                <div className="mb-2 flex flex-wrap items-center gap-2">
-                  {getTransportIcon(server.transport)}
-                  <span className="font-medium text-foreground">{server.name}</span>
-                  <Badge variant="outline" className="text-xs">
-                    {server.transport || 'stdio'}
-                  </Badge>
-                  <Badge variant="outline" className="text-xs">
-                    {getScopeLabel(server.scope)}
-                  </Badge>
-                  {server.projectDisplayName && (
-                    <Badge variant="outline" className="max-w-full truncate text-xs">
-                      {server.projectDisplayName}
-                    </Badge>
-                  )}
+        {servers.map((server) => {
+          const managed = isManagedServer(server);
+
+          return (
+            <div key={getServerKey(server)} className="rounded-lg border border-border bg-card/50 p-4">
+              <div className="flex items-start justify-between">
+                <div className="min-w-0 flex-1">
+                  <div className="mb-2 flex flex-wrap items-center gap-2">
+                    {!managed && getTransportIcon(server.transport)}
+                    <span className="font-medium text-foreground">{server.name}</span>
+                    {!managed && (
+                      <>
+                        <Badge variant="outline" className="text-xs">
+                          {server.transport || 'stdio'}
+                        </Badge>
+                        <Badge variant="outline" className="text-xs">
+                          {getScopeLabel(server.scope)}
+                        </Badge>
+                        {server.projectDisplayName && (
+                          <Badge variant="outline" className="max-w-full truncate text-xs">
+                            {server.projectDisplayName}
+                          </Badge>
+                        )}
+                      </>
+                    )}
+                    {managed && (
+                      <Badge variant="outline" className="gap-1 text-xs text-muted-foreground">
+                        <Lock className="h-3 w-3" />
+                        {t('mcpServers.managed.badge', { defaultValue: 'Managed' })}
+                      </Badge>
+                    )}
+                  </div>
+
+                  <div className="space-y-1 text-sm text-muted-foreground">
+                    {!managed && (
+                      <>
+                        <ConfigLine label={t('mcpServers.config.command')}>{server.command || ''}</ConfigLine>
+                        <ConfigLine label={t('mcpServers.config.url')}>{server.url || ''}</ConfigLine>
+                        <ConfigLine label={t('mcpServers.config.args')}>{(server.args || []).join(' ')}</ConfigLine>
+                        <ConfigLine label="Cwd">{server.cwd || ''}</ConfigLine>
+                        {server.env && Object.keys(server.env).length > 0 && (
+                          <ConfigLine label={t('mcpServers.config.environment')}>
+                            {Object.entries(server.env).map(([key, value]) => `${key}=${maskSecret(value)}`).join(', ')}
+                          </ConfigLine>
+                        )}
+                        {server.envVars && server.envVars.length > 0 && (
+                          <ConfigLine label="Env Vars">{server.envVars.join(', ')}</ConfigLine>
+                        )}
+                      </>
+                    )}
+                    {managed && (
+                      <div className="text-xs text-muted-foreground">
+                        {t('mcpServers.managed.hint', {
+                          defaultValue: 'Managed by CloudCLI.',
+                        })}
+                      </div>
+                    )}
+                  </div>
                 </div>
 
-                <div className="space-y-1 text-sm text-muted-foreground">
-                  <ConfigLine label={t('mcpServers.config.command')}>{server.command || ''}</ConfigLine>
-                  <ConfigLine label={t('mcpServers.config.url')}>{server.url || ''}</ConfigLine>
-                  <ConfigLine label={t('mcpServers.config.args')}>{(server.args || []).join(' ')}</ConfigLine>
-                  <ConfigLine label="Cwd">{server.cwd || ''}</ConfigLine>
-                  {server.env && Object.keys(server.env).length > 0 && (
-                    <ConfigLine label={t('mcpServers.config.environment')}>
-                      {Object.entries(server.env).map(([key, value]) => `${key}=${maskSecret(value)}`).join(', ')}
-                    </ConfigLine>
-                  )}
-                  {server.envVars && server.envVars.length > 0 && (
-                    <ConfigLine label="Env Vars">{server.envVars.join(', ')}</ConfigLine>
-                  )}
-                </div>
-              </div>
-
-              <div className="ml-4 flex items-center gap-2">
-                <Button
-                  onClick={() => openForm(server)}
-                  variant="ghost"
-                  size="sm"
-                  className="text-muted-foreground hover:text-foreground"
-                  title={t('mcpServers.actions.edit')}
-                >
-                  <Edit3 className="h-4 w-4" />
-                </Button>
-                <Button
-                  onClick={() => deleteServer(server)}
-                  variant="ghost"
-                  size="sm"
-                  className="text-red-600 hover:text-red-700"
-                  title={t('mcpServers.actions.delete')}
-                >
-                  <Trash2 className="h-4 w-4" />
-                </Button>
+                {!managed && (
+                  <div className="ml-4 flex items-center gap-2">
+                    <Button
+                      onClick={() => openForm(server)}
+                      variant="ghost"
+                      size="sm"
+                      className="text-muted-foreground hover:text-foreground"
+                      title={t('mcpServers.actions.edit')}
+                    >
+                      <Edit3 className="h-4 w-4" />
+                    </Button>
+                    <Button
+                      onClick={() => deleteServer(server)}
+                      variant="ghost"
+                      size="sm"
+                      className="text-red-600 hover:text-red-700"
+                      title={t('mcpServers.actions.delete')}
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </Button>
+                  </div>
+                )}
               </div>
             </div>
-          </div>
-        ))}
+          );
+        })}
 
         {!isLoading && !isLoadingProjectScopes && servers.length === 0 && (
           <div className="py-8 text-center text-muted-foreground">{t('mcpServers.empty')}</div>

src/components/settings/constants/constants.ts

@@ -33,7 +33,7 @@ export const SETTINGS_MAIN_TABS: SettingsMainTabMeta[] = [
   { id: 'git', label: 'Git', keywords: 'git github commits', icon: GitBranch },
   { id: 'api', label: 'API Tokens', keywords: 'api tokens auth keys', icon: KeyRound },
   { id: 'tasks', label: 'Tasks', keywords: 'tasks taskmaster', icon: ListChecks },
-  { id: 'browser', label: 'Browser Use', keywords: 'browser use playwright chromium automation', icon: MonitorPlay },
+  { id: 'browser', label: 'Browser', keywords: 'browser playwright chromium automation', icon: MonitorPlay },
   { id: 'notifications', label: 'Notifications', keywords: 'notifications alerts push', icon: Bell },
   { id: 'plugins', label: 'Plugins', keywords: 'plugins extensions integrations', icon: Plug },
   { id: 'about', label: 'About', keywords: 'about version info', icon: Info },

src/components/settings/view/tabs/browser-use-settings/BrowserUseSettingsTab.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
-import { Download, ExternalLink, Loader2 } from 'lucide-react';
+import { Download, Loader2 } from 'lucide-react';
 
 import { Button } from '../../../../../shared/view/ui';
 import { authenticatedFetch } from '../../../../../utils/api';
@@ -10,7 +10,6 @@ import SettingsToggle from '../../SettingsToggle';
 
 type BrowserUseSettings = {
   enabled: boolean;
-  agentToolsEnabled: boolean;
 };
 
 type BrowserUseStatus = {
@@ -19,7 +18,6 @@ type BrowserUseStatus = {
   playwrightInstalled: boolean;
   chromiumInstalled: boolean;
   installInProgress: boolean;
-  agentToolsEnabled: boolean;
   message: string;
 };
 
@@ -32,31 +30,39 @@ async function readJson<T>(response: Response): Promise<T> {
 }
 
 export default function BrowserUseSettingsTab() {
-  const [settings, setSettings] = useState<BrowserUseSettings>({ enabled: false, agentToolsEnabled: false });
+  const [settings, setSettings] = useState<BrowserUseSettings | null>(null);
   const [status, setStatus] = useState<BrowserUseStatus | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
+  const [isSettingsLoading, setIsSettingsLoading] = useState(true);
+  const [isStatusLoading, setIsStatusLoading] = 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/browser-use/settings'),
-      authenticatedFetch('/api/browser-use/status'),
-    ]);
+  const loadSettings = useCallback(async () => {
+    const settingsResponse = await authenticatedFetch('/api/browser-use/settings');
     const settingsData = await readJson<{ data: { settings: BrowserUseSettings } }>(settingsResponse);
-    const statusData = await readJson<{ data: BrowserUseStatus }>(statusResponse);
     setSettings(settingsData.data.settings);
+  }, []);
+
+  const loadStatus = useCallback(async () => {
+    const statusResponse = await authenticatedFetch('/api/browser-use/status');
+    const statusData = await readJson<{ data: BrowserUseStatus }>(statusResponse);
     setStatus(statusData.data);
   }, []);
 
   useEffect(() => {
-    setIsLoading(true);
-    void loadState()
-      .catch((err) => setError(err instanceof Error ? err.message : 'Failed to load Browser Use settings'))
-      .finally(() => setIsLoading(false));
-  }, [loadState]);
+    setError(null);
+    setIsSettingsLoading(true);
+    setIsStatusLoading(true);
+
+    void loadSettings()
+      .catch((err) => setError(err instanceof Error ? err.message : 'Failed to load Browser settings'))
+      .finally(() => setIsSettingsLoading(false));
+
+    void loadStatus()
+      .catch((err) => setError(err instanceof Error ? err.message : 'Failed to load Browser status'))
+      .finally(() => setIsStatusLoading(false));
+  }, [loadSettings, loadStatus]);
 
   const updateSettings = async (nextSettings: Partial<BrowserUseSettings>) => {
     setIsSaving(true);
@@ -69,10 +75,12 @@ export default function BrowserUseSettingsTab() {
       const data = await readJson<{ data: { settings: BrowserUseSettings } }>(response);
       setSettings(data.data.settings);
       window.dispatchEvent(new Event('browserUseSettingsChanged'));
-      await loadState();
+      setIsStatusLoading(true);
+      await loadStatus();
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to save Browser Use settings');
+      setError(err instanceof Error ? err.message : 'Failed to save Browser settings');
     } finally {
+      setIsStatusLoading(false);
       setIsSaving(false);
     }
   };
@@ -83,108 +91,93 @@ export default function BrowserUseSettingsTab() {
     try {
       const response = await authenticatedFetch('/api/browser-use/runtime/install', { method: 'POST' });
       await readJson(response);
-      await loadState();
+      setIsStatusLoading(true);
+      await loadStatus();
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to install browser binaries');
+      setError(err instanceof Error ? err.message : 'Failed to install browser runtime');
     } finally {
+      setIsStatusLoading(false);
       setIsInstalling(false);
     }
   };
 
-  const needsBrowserBinaries = Boolean(settings.enabled && status && (!status.playwrightInstalled || !status.chromiumInstalled));
+  const browserEnabled = settings?.enabled === true;
+  const needsBrowserBinaries = Boolean(browserEnabled && status && (!status.playwrightInstalled || !status.chromiumInstalled));
+  const runtimeLabel = (installed?: boolean) => {
+    if (isStatusLoading && !status) {
+      return 'checking...';
+    }
+    return installed ? 'installed' : 'missing';
+  };
 
   return (
     <div className="space-y-8">
       <SettingsSection
-        title="Browser Use"
-        description="Manage local Playwright browser sessions used for captured browser screenshots and guarded navigation."
+        title="Browser"
+        description="Allow agents to create guarded Playwright browser sessions that you can monitor from the Browser tab."
       >
         <SettingsCard divided>
-          <div className="flex flex-col gap-3 px-4 py-4 sm:flex-row sm:items-center sm:justify-between">
-            <div className="min-w-0">
-              <div className="text-sm font-medium text-foreground">How Browser Use Works</div>
-              <p className="mt-0.5 text-sm text-muted-foreground">
-                Learn what agents can do with browser sessions, when to share access, and what the current limitations are.
-              </p>
+          <SettingsRow
+            label="Enable Browser"
+            description="Registers Browser for supported agents. Agents can create browser sessions; you can watch, stop, and delete them."
+          >
+            {isSettingsLoading && !settings ? (
+              <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+            ) : (
+              <SettingsToggle
+                checked={browserEnabled}
+                onChange={(value) => void updateSettings({ enabled: value })}
+                ariaLabel="Enable Browser"
+                disabled={isSaving}
+              />
+            )}
+          </SettingsRow>
+
+          <div className="space-y-4 px-4 py-4">
+            <div className="flex flex-wrap gap-2 text-xs text-muted-foreground">
+              <span className="rounded-md border border-border px-2 py-1">
+                Playwright: {runtimeLabel(status?.playwrightInstalled)}
+              </span>
+              <span className="rounded-md border border-border px-2 py-1">
+                Chromium: {runtimeLabel(status?.chromiumInstalled)}
+              </span>
+              <span className="rounded-md border border-border px-2 py-1">
+                Status: {isStatusLoading && !status ? 'checking...' : status?.available ? 'ready' : browserEnabled ? 'setup required' : 'disabled'}
+              </span>
             </div>
-            <a
-              href="https://cloudcli.ai/docs/user-guide/browser-use"
-              target="_blank"
-              rel="noreferrer"
-              className="inline-flex h-9 flex-shrink-0 items-center justify-center gap-2 rounded-md border border-input bg-background px-3 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground"
-            >
-              Open Guide
-              <ExternalLink className="h-4 w-4" />
-            </a>
+
+            {needsBrowserBinaries && (
+              <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">Browser runtime required</div>
+                  <p className="text-sm text-muted-foreground">
+                    {status?.message || 'Install the browser runtime before agents can create Browser sessions.'}
+                  </p>
+                </div>
+
+                <Button
+                  type="button"
+                  size="sm"
+                  onClick={() => void installBrowserBinaries()}
+                  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>
-
-          <SettingsRow
-            label="Enable Browser Use"
-            description="Allow CloudCLI to create owner-scoped Playwright browser sessions."
-          >
-            <SettingsToggle
-              checked={settings.enabled}
-              onChange={(value) => void updateSettings({ enabled: value })}
-              ariaLabel="Enable Browser Use"
-              disabled={isLoading || isSaving}
-            />
-          </SettingsRow>
-
-          <SettingsRow
-            label="Enable Browser Tools for Agents"
-            description="Register the Browser Use MCP server for all agent providers. Agents can create browser sessions and control sessions shared with agents."
-          >
-            <SettingsToggle
-              checked={settings.agentToolsEnabled}
-              onChange={(value) => void updateSettings({ agentToolsEnabled: value })}
-              ariaLabel="Enable Browser Tools for Agents"
-              disabled={isLoading || isSaving || !settings.enabled}
-            />
-          </SettingsRow>
-
-          {(needsBrowserBinaries || error) && (
-            <div className="space-y-4 px-4 py-4">
-              {needsBrowserBinaries && (
-                <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">Browser binaries required</div>
-                    <p className="text-sm text-muted-foreground">
-                      {status?.message || 'Install the browser binaries needed to create Browser Use sessions.'}
-                    </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">
-                        Playwright: {status?.playwrightInstalled ? 'installed' : 'missing'}
-                      </span>
-                      <span className="rounded-md border border-border px-2 py-1">
-                        Chromium: {status?.chromiumInstalled ? 'installed' : 'missing'}
-                      </span>
-                    </div>
-                  </div>
-
-                  <Button
-                    type="button"
-                    size="sm"
-                    onClick={() => void installBrowserBinaries()}
-                    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 Binaries'}
-                  </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/SidebarFooter.tsx

@@ -69,7 +69,7 @@ export default function SidebarFooter({
               onClick={onShowVersionModal}
             >
               <div className="relative flex-shrink-0">
-                <ArrowUpCircle className="w-4.5 h-4.5 text-blue-500 dark:text-blue-400" />
+                <ArrowUpCircle className="h-4 w-4 text-blue-500 dark:text-blue-400" />
                 <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">
@@ -145,12 +145,12 @@ export default function SidebarFooter({
           href={GITHUB_ISSUES_URL}
           target="_blank"
           rel="noopener noreferrer"
-          className="flex h-12 w-full items-center gap-3.5 rounded-xl bg-muted/40 px-4 transition-all hover:bg-muted/60 active:scale-[0.98]"
+          className="flex h-10 w-full items-center gap-3 rounded-xl bg-muted/40 px-3.5 transition-all hover:bg-muted/60 active:scale-[0.98]"
         >
-          <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-background/80">
-            <Bug className="w-4.5 h-4.5 text-muted-foreground" />
+          <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-base font-medium text-foreground">{t('actions.reportIssue')}</span>
+          <span className="text-sm font-medium text-foreground">{t('actions.reportIssue')}</span>
         </a>
       </div>
 
@@ -160,25 +160,25 @@ export default function SidebarFooter({
           href={DISCORD_INVITE_URL}
           target="_blank"
           rel="noopener noreferrer"
-          className="flex h-12 w-full items-center gap-3.5 rounded-xl bg-muted/40 px-4 transition-all hover:bg-muted/60 active:scale-[0.98]"
+          className="flex h-10 w-full items-center gap-3 rounded-xl bg-muted/40 px-3.5 transition-all hover:bg-muted/60 active:scale-[0.98]"
         >
-          <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-background/80">
-            <DiscordIcon className="w-4.5 h-4.5 text-muted-foreground" />
+          <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-base font-medium text-foreground">{t('actions.joinCommunity')}</span>
+          <span className="text-sm font-medium text-foreground">{t('actions.joinCommunity')}</span>
         </a>
       </div>
 
       {/* Mobile settings */}
       <div className="px-3 pb-3 pt-2 md:hidden">
         <button
-          className="flex h-12 w-full items-center gap-3.5 rounded-xl bg-muted/40 px-4 transition-all hover:bg-muted/60 active:scale-[0.98]"
+          className="flex h-10 w-full items-center gap-3 rounded-xl bg-muted/40 px-3.5 transition-all hover:bg-muted/60 active:scale-[0.98]"
           onClick={onShowSettings}
         >
-          <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-background/80">
-            <Settings className="w-4.5 h-4.5 text-muted-foreground" />
+          <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-base font-medium text-foreground">{t('actions.settings')}</span>
+          <span className="text-sm font-medium text-foreground">{t('actions.settings')}</span>
         </button>
       </div>
     </div>

src/i18n/locales/en/settings.json

@@ -94,7 +94,7 @@
     "git": "Git",
     "apiTokens": "API & Tokens",
     "tasks": "Tasks",
-    "browser": "Browser Use",
+    "browser": "Browser",
     "computer": "Computer Use",
     "notifications": "Notifications",
     "plugins": "Plugins",
@@ -452,6 +452,10 @@
       "edit": "Edit server",
       "delete": "Delete server"
     },
+    "managed": {
+      "badge": "Managed",
+      "hint": "Managed by CloudCLI."
+    },
     "help": {
       "title": "About Codex MCP",
       "description": "Codex supports stdio-based MCP servers. You can add servers that extend Codex's capabilities with additional tools and resources."