fix(tarko-agent-ui): display environment input on session creation (#1667)

Author: ulivz

multimodal/tarko/agent-ui/src/common/state/actions/eventProcessors/handlers/SystemHandler.ts

@@ -51,6 +51,11 @@ export class EnvironmentInputHandler
   ): void {
     const { get, set } = context;
 
+    // Check if this is the first environment_input event BEFORE adding the current message
+    const existingSessionMessages = get(messagesAtom)[sessionId] || [];
+    const isFirstEnvironmentInput =
+      existingSessionMessages.filter((msg) => msg.role === 'environment').length === 0;
+
     const environmentMessage: Message = {
       id: event.id,
       role: 'environment',
@@ -68,7 +73,7 @@ export class EnvironmentInputHandler
       };
     });
 
-    if (Array.isArray(event.content) && shouldUpdatePanelContent(get, sessionId)) {
+    if (Array.isArray(event.content)) {
       const imageContent = event.content.find(
         (item): item is ChatCompletionContentPartImage =>
           typeof item === 'object' &&
@@ -83,26 +88,44 @@ export class EnvironmentInputHandler
 
       if (imageContent && imageContent.image_url) {
         const currentPanelContent = get(sessionPanelContentAtom);
-        const sessionMessages = get(messagesAtom)[sessionId] || [];
-        
-        // Check if this is the first environment_input event in the session
-        const isFirstEnvironmentInput = sessionMessages.filter(msg => msg.role === 'environment').length === 0;
         const currentSessionPanel = currentPanelContent[sessionId];
 
-        // Always show first environment_input (initialization screenshot) or update existing browser_vision_control panel
-        if (isFirstEnvironmentInput || (currentSessionPanel && currentSessionPanel.type === 'browser_vision_control')) {
+        // Common panel properties
+        const basePanelContent = {
+          title: event.description || 'Environment Screenshot',
+          timestamp: event.timestamp,
+          originalContent: event.content,
+          environmentId: event.id,
+        };
+
+        let panelContent = null;
+
+        if (isFirstEnvironmentInput) {
+          // First environment input: always show as simple image
+          panelContent = {
+            ...basePanelContent,
+            type: 'image',
+            source: imageContent.image_url.url,
+          };
+        } else if (
+          currentSessionPanel?.type === 'browser_vision_control' ||
+          shouldUpdatePanelContent(get, sessionId)
+        ) {
+          // Update existing browser_vision_control panel or create new one
+          panelContent = {
+            ...basePanelContent,
+            type: 'browser_vision_control',
+            source: null,
+            title: event.description || 'Browser Screenshot',
+          };
+        }
+
+        if (panelContent) {
           set(sessionPanelContentAtom, (prev) => ({
             ...prev,
-            [sessionId]: {
-              type: 'browser_vision_control',
-              title: event.description || 'Browser Screenshot',
-              timestamp: event.timestamp,
-              originalContent: event.content,
-              environmentId: event.id,
-            },
+            [sessionId]: panelContent,
           }));
         }
-        // Skip update for other panel types to avoid duplicate Browser Screenshot rendering
       }
     }
   }

multimodal/tarko/agent-ui/src/common/state/actions/sessionActions.ts

@@ -186,20 +186,20 @@ export const setActiveSessionAction = atom(null, async (get, set, sessionId: str
 
     set(activeSessionIdAtom, sessionId);
 
-    // Auto-select best file for workspace display
-    const sessionFiles = get(sessionFilesAtom);
-    const files = sessionFiles[sessionId] || [];
-    const bestFile = selectBestFileToDisplay(files);
-
-    if (bestFile) {
-      console.log(`Auto-selecting file for workspace: ${bestFile.name} (${bestFile.path})`);
-      setWorkspacePanelForFile(set, sessionId, bestFile);
-    } else {
-      // Clear panel content for this session
-      set(sessionPanelContentAtom, (prev) => ({
-        ...prev,
-        [sessionId]: null,
-      }));
+    // Auto-select best file for workspace display only if no panel content was set by events
+    const currentPanelContent = get(sessionPanelContentAtom);
+    const sessionPanelContent = currentPanelContent[sessionId];
+    
+    if (!sessionPanelContent) {
+      // No panel content was set by events, try to auto-select a file
+      const sessionFiles = get(sessionFilesAtom);
+      const files = sessionFiles[sessionId] || [];
+      const bestFile = selectBestFileToDisplay(files);
+
+      if (bestFile) {
+        setWorkspacePanelForFile(set, sessionId, bestFile);
+      }
+      // If no files and no panel content, leave it as null (don't explicitly clear)
     }
   } catch (error) {
     console.error('Failed to set active session:', error);

multimodal/tarko/agent-ui/src/standalone/workspace/renderers/ImageRenderer.tsx

@@ -69,24 +69,19 @@ export const ImageRenderer: React.FC<ImageRendererProps> = ({ panelContent, onAc
   if (isScreenshot) {
     return (
       <div className="relative group md:text-base text-sm">
-        <BrowserShell title={name || 'Browser Screenshot'}>
-          <img
-            src={src}
-            alt={name || 'Image'}
-            className="w-full h-auto object-contain md:max-h-[70vh] max-h-48 rounded-lg"
-          />
-        </BrowserShell>
+        <img
+          src={src}
+          alt={name || 'Image'}
+          className="w-full h-auto object-contain md:max-h-[70vh] max-h-48 rounded-lg"
+        />
         {actionButtons}
       </div>
     );
   }
 
   return (
     <div className="relative group max-w-full">
-      <motion.div
-        whileHover={{ scale: 1.01 }}
-        className="relative"
-      >
+      <motion.div whileHover={{ scale: 1.01 }} className="relative">
         <img
           src={src}
           alt={name || 'Image'}