From 2e411c324287029ae148adbdb560b39fdd347a07 Mon Sep 17 00:00:00 2001
From: Soumyadas15 <saumyadas2017@gmail.com>
Date: Tue, 27 May 2025 16:55:41 +0530
Subject: [PATCH] chore(dev): browser state fix

---
 .../thread/tool-views/BrowserToolView.tsx     | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/thread/tool-views/BrowserToolView.tsx b/frontend/src/components/thread/tool-views/BrowserToolView.tsx
index c5f908d2..6d88c996 100644
--- a/frontend/src/components/thread/tool-views/BrowserToolView.tsx
+++ b/frontend/src/components/thread/tool-views/BrowserToolView.tsx
@@ -185,11 +185,11 @@ export function BrowserToolView({
 
     if (screenshotUrl) {
       return (
-        <div className="flex items-center justify-center w-full h-full min-h-[600px] relative" style={{ minHeight: '600px' }}>
+        <div className="flex items-center justify-center w-full h-full min-h-[600px] relative p-4" style={{ minHeight: '600px' }}>
           {imageLoading && (
             <ImageLoader />
           )}
-          {!imageLoading && !imageError && (
+          <Card className={`p-0 overflow-hidden shadow-lg border ${imageLoading ? 'hidden' : 'block'}`}>
             <img
               src={screenshotUrl}
               alt="Browser Screenshot"
@@ -197,7 +197,7 @@ export function BrowserToolView({
               onLoad={handleImageLoad}
               onError={handleImageError}
             />
-          )}
+          </Card>
           {imageError && !imageLoading && (
             <div className="absolute inset-0 flex items-center justify-center bg-zinc-50 dark:bg-zinc-900">
               <div className="text-center text-zinc-500 dark:text-zinc-400">
@@ -210,11 +210,11 @@ export function BrowserToolView({
       );
     } else if (screenshotBase64) {
       return (
-        <div className="flex items-center justify-center w-full h-full min-h-[600px] relative" style={{ minHeight: '600px' }}>
+        <div className="flex items-center justify-center w-full h-full min-h-[600px] relative p-4" style={{ minHeight: '600px' }}>
           {imageLoading && (
             <ImageLoader />
           )}
-          {!imageLoading && !imageError && (
+          <Card className={`overflow-hidden shadow-lg border ${imageLoading ? 'hidden' : 'block'}`}>
             <img
               src={`data:image/jpeg;base64,${screenshotBase64}`}
               alt="Browser Screenshot"
@@ -222,7 +222,7 @@ export function BrowserToolView({
               onLoad={handleImageLoad}
               onError={handleImageError}
             />
-          )}
+          </Card>
           {imageError && !imageLoading && (
             <div className="absolute inset-0 flex items-center justify-center bg-zinc-50 dark:bg-zinc-900">
               <div className="text-center text-zinc-500 dark:text-zinc-400">
@@ -280,7 +280,7 @@ export function BrowserToolView({
       </CardHeader>
 
       <CardContent className="p-0 flex-1 overflow-hidden relative" style={{ height: 'calc(100vh - 150px)', minHeight: '600px' }}>
-        <div className="flex-1 flex h-full items-stretch bg-black">
+        <div className="flex-1 flex h-full items-stretch bg-white dark:bg-black">
           {isLastToolCall ? (
             isRunning && vncIframe ? (
               <div className="flex flex-col items-center justify-center w-full h-full min-h-[600px]" style={{ minHeight: '600px' }}>
@@ -328,12 +328,12 @@ export function BrowserToolView({
             )
           ) :
           (screenshotUrl || screenshotBase64) ? (
-            <div className="flex items-center justify-center w-full h-full overflow-auto relative">
+            <div className="flex items-center justify-center w-full h-full overflow-auto relative p-4">
               {imageLoading && (
                 <ImageLoader />
               )}
-              {!imageLoading && !imageError && (
-                screenshotUrl ? (
+              <Card className={`p-0 overflow-hidden shadow-lg border ${imageLoading ? 'hidden' : 'block'}`}>
+                {screenshotUrl ? (
                   <img
                     src={screenshotUrl}
                     alt="Browser Screenshot"
@@ -349,8 +349,8 @@ export function BrowserToolView({
                     onLoad={handleImageLoad}
                     onError={handleImageError}
                   />
-                )
-              )}
+                )}
+              </Card>
               {imageError && !imageLoading && (
                 <div className="absolute inset-0 flex items-center justify-center bg-zinc-50 dark:bg-zinc-900">
                   <div className="text-center text-zinc-500 dark:text-zinc-400">