feat: improve browser use session controls

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

@@ -1,5 +1,5 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Bot, Download, ExternalLink, Globe, Loader2, MonitorPlay, Navigation, Pause, RefreshCw, Share2, Square, X } from 'lucide-react';
+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 { Badge, Button } from '../../../shared/view/ui';
 import { authenticatedFetch } from '../../../utils/api';
@@ -29,6 +29,15 @@ type BrowserUseSession = {
   agentAccessEnabled: boolean;
   createdBy: 'user' | 'agent';
   profileName: string | null;
+  viewport: {
+    width: number;
+    height: number;
+  } | null;
+  cursor: {
+    x: number;
+    y: number;
+    actor: 'agent' | 'user';
+  } | null;
 };
 
 type BrowserUsePanelProps = {
@@ -50,7 +59,9 @@ export default function BrowserUsePanel({ isVisible }: BrowserUsePanelProps) {
   const [targetUrl, setTargetUrl] = useState('https://example.com');
   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,
@@ -78,6 +89,11 @@ export default function BrowserUsePanel({ isVisible }: BrowserUsePanelProps) {
     void refresh().catch((err) => setError(err instanceof Error ? err.message : 'Failed to load Browser Use'));
   }, [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);
@@ -114,6 +130,13 @@ export default function BrowserUsePanel({ isVisible }: BrowserUsePanelProps) {
     await readJson(response);
   });
 
+  const deleteSession = () => runAction(async () => {
+    if (!selectedSession) return;
+    const response = await authenticatedFetch(`/api/browser-use/sessions/${selectedSession.id}`, { method: 'DELETE' });
+    await readJson(response);
+    setIsFullscreen(false);
+  });
+
   const grantAgentAccess = () => runAction(async () => {
     if (!selectedSession) return;
     const response = await authenticatedFetch(`/api/browser-use/sessions/${selectedSession.id}/agent-access/grant`, { method: 'POST' });
@@ -126,7 +149,7 @@ export default function BrowserUsePanel({ isVisible }: BrowserUsePanelProps) {
     await readJson(response);
   });
 
-  const installRuntime = () => runAction(async () => {
+  const installBrowserBinaries = () => runAction(async () => {
     setIsInstalling(true);
     try {
       const response = await authenticatedFetch('/api/browser-use/runtime/install', { method: 'POST' });
@@ -136,7 +159,99 @@ export default function BrowserUsePanel({ isVisible }: BrowserUsePanelProps) {
     }
   });
 
-  const canInstallRuntime = Boolean(status?.enabled && (!status.playwrightInstalled || !status.chromiumInstalled));
+  const clickViewer = useCallback((event: MouseEvent<HTMLImageElement>) => {
+    if (!selectedSession || selectedSession.status !== 'ready' || !selectedSession.viewport) {
+      return;
+    }
+    viewerRef.current?.focus();
+
+    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);
+
+    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]);
+
+  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;
+
+  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]' : ''}`}
+    >
+      {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}
+          />
+          {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">
+          <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>
+      )}
+    </div>
+  );
 
   return (
     <div className="flex h-full min-h-0 flex-col bg-background">
@@ -164,21 +279,25 @@ export default function BrowserUsePanel({ isVisible }: BrowserUsePanelProps) {
 
       <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">
-          <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">Runtime</div>
-            <div className="mt-2 text-sm text-foreground">{status?.available ? 'Available' : 'Setup required'}</div>
-            <p className="mt-1 text-xs leading-relaxed text-muted-foreground">{status?.message || 'Loading Browser Use status...'}</p>
-            {status?.enabled && (
-              <div className="mt-3 rounded-md border border-border/70 bg-background/60 px-2 py-2 text-xs text-muted-foreground">
-                Agent tools: {status.agentToolsEnabled ? 'enabled' : 'disabled in settings'}
+          {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>
-            )}
-            {canInstallRuntime && (
               <Button
                 type="button"
                 size="sm"
                 className="mt-3 w-full"
-                onClick={installRuntime}
+                onClick={installBrowserBinaries}
                 disabled={isBusy || isInstalling || status?.installInProgress}
               >
                 {isInstalling || status?.installInProgress ? (
@@ -186,10 +305,10 @@ export default function BrowserUsePanel({ isVisible }: BrowserUsePanelProps) {
                 ) : (
                   <Download className="h-4 w-4" />
                 )}
-                Install Runtime
+                Install Binaries
               </Button>
-            )}
-          </div>
+            </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">
@@ -212,17 +331,11 @@ export default function BrowserUsePanel({ isVisible }: BrowserUsePanelProps) {
                   <Badge variant="outline" className="text-[10px]">{session.status}</Badge>
                 </div>
                 <div className="mt-1 flex flex-wrap gap-1">
-                  {session.createdBy === 'agent' && (
-                    <span className="rounded border border-primary/30 px-1.5 py-0.5 text-[10px] text-primary">agent</span>
-                  )}
                   {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>
                   )}
-                  {session.profileName && (
-                    <span className="rounded border border-border px-1.5 py-0.5 text-[10px]">profile: {session.profileName}</span>
-                  )}
                 </div>
                 <div className="mt-1 truncate text-xs">{session.url || session.message || session.id}</div>
               </button>
@@ -258,14 +371,18 @@ export default function BrowserUsePanel({ isVisible }: BrowserUsePanelProps) {
                 Give Agent Access
               </Button>
             )}
-            <Button variant="outline" size="sm" disabled>
-              <Pause className="h-4 w-4" />
-              Pause
+            <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}>
+            <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 && (
@@ -286,29 +403,25 @@ export default function BrowserUsePanel({ isVisible }: BrowserUsePanelProps) {
                   </span>
                 )}
               </div>
-              <div className="flex min-h-[360px] flex-1 items-center justify-center bg-neutral-950">
-                {selectedSession?.screenshotDataUrl ? (
-                  <img
-                    src={selectedSession.screenshotDataUrl}
-                    alt="Browser session screenshot"
-                    className="h-full max-h-[70vh] w-full object-contain"
-                  />
-                ) : (
-                  <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 the Browser Use runtime from this panel or enable it from Settings.
-                    </p>
-                  </div>
-                )}
-              </div>
+              {renderBrowserSurface()}
             </div>
           </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">{selectedSession.title || selectedSession.url || 'Browser session'}</div>
+              <Button variant="outline" size="sm" onClick={() => setIsFullscreen(false)}>
+                <X className="h-4 w-4" />
+                Close
+              </Button>
+            </div>
+            {renderBrowserSurface(true)}
+          </div>
+        </div>
+      )}
     </div>
   );
 }