logs have a button to see, improved rejection/approved flow, trying to handle tqdm

frontend/src/components/Chat/ApprovalFlow.tsx

@@ -1,31 +1,56 @@
 import { useState, useCallback, useEffect } from 'react';
-import { Box, Typography, Button, TextField, Divider } from '@mui/material';
+import { Box, Typography, Button, TextField, IconButton } from '@mui/material';
+import SendIcon from '@mui/icons-material/Send';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import CancelIcon from '@mui/icons-material/Cancel';
 import { useAgentStore } from '@/store/agentStore';
 import { useLayoutStore } from '@/store/layoutStore';
+import { useSessionStore } from '@/store/sessionStore';
+import type { Message } from '@/types/agent';
 
 interface ApprovalFlowProps {
-  sessionId: string;
+  message: Message;
 }
 
-export default function ApprovalFlow({ sessionId }: ApprovalFlowProps) {
-  const { pendingApprovals, setPendingApprovals, setPanelContent } = useAgentStore();
+export default function ApprovalFlow({ message }: ApprovalFlowProps) {
+  const { setPanelContent, updateMessage } = useAgentStore();
   const { setRightPanelOpen, setLeftSidebarOpen } = useLayoutStore();
+  const { activeSessionId } = useSessionStore();
   const [currentIndex, setCurrentIndex] = useState(0);
   const [feedback, setFeedback] = useState('');
   const [decisions, setDecisions] = useState<Array<{ tool_call_id: string; approved: boolean; feedback: string | null }>>([]);
 
-  // Reset local state when a new batch of approvals arrives
-  useEffect(() => {
-    setCurrentIndex(0);
-    setFeedback('');
-    setDecisions([]);
-  }, [pendingApprovals]);
+  const approvalData = message.approval;
+  
+  if (!approvalData) return null;
+
+  const { batch, status } = approvalData;
+
+  // Extract logs from toolOutput if available
+  let logsContent = '';
+  let showLogsButton = false;
+  
+  if (message.toolOutput && message.toolOutput.includes('**Logs:**')) {
+    const parts = message.toolOutput.split('**Logs:**');
+    if (parts.length > 1) {
+        const logsPart = parts[1].trim();
+        const codeBlockMatch = logsPart.match(/```([\s\S]*?)```/);
+        if (codeBlockMatch) {
+            logsContent = codeBlockMatch[1].trim();
+            showLogsButton = true;
+        }
+    }
+  }
 
   // Sync right panel with current tool
   useEffect(() => {
-    if (!pendingApprovals || currentIndex >= pendingApprovals.tools.length) return;
+    if (!batch || currentIndex >= batch.tools.length) return;
+    
+    // Only auto-open panel if pending
+    if (status !== 'pending') return;
     
-    const tool = pendingApprovals.tools[currentIndex];
+    const tool = batch.tools[currentIndex];
     const args = tool.arguments as any;
 
     if (tool.tool === 'hf_jobs' && (args.operation === 'run' || args.operation === 'scheduled run') && args.script) {
@@ -35,30 +60,20 @@ export default function ApprovalFlow({ sessionId }: ApprovalFlowProps) {
         language: 'python',
         parameters: args
       });
-      setRightPanelOpen(true);
-      setLeftSidebarOpen(false);
+      // Don't auto-open if already resolved
     } else if (tool.tool === 'hf_repo_files' && args.operation === 'upload' && args.content) {
       setPanelContent({
         title: `File Upload: ${args.path || 'unnamed'}`,
         content: args.content,
         parameters: args
       });
-      setRightPanelOpen(true);
-      setLeftSidebarOpen(false);
-    } else {
-      // For other tools, just show parameters in the panel
-      setPanelContent({
-        title: `Tool: ${tool.tool}`,
-        content: '',
-        parameters: args
-      });
     }
-  }, [currentIndex, pendingApprovals, setPanelContent, setRightPanelOpen, setLeftSidebarOpen]);
+  }, [currentIndex, batch, status, setPanelContent]);
 
   const handleResolve = useCallback(async (approved: boolean) => {
-    if (!pendingApprovals) return;
+    if (!batch || !activeSessionId) return;
 
-    const currentTool = pendingApprovals.tools[currentIndex];
+    const currentTool = batch.tools[currentIndex];
     const newDecisions = [
       ...decisions,
       {
@@ -68,40 +83,97 @@ export default function ApprovalFlow({ sessionId }: ApprovalFlowProps) {
       },
     ];
 
-    if (currentIndex < pendingApprovals.tools.length - 1) {
+    if (currentIndex < batch.tools.length - 1) {
       setDecisions(newDecisions);
       setCurrentIndex(currentIndex + 1);
       setFeedback('');
     } else {
-      // All tools in batch resolved, submit to backend
+      // All tools in batch resolved
       try {
         await fetch('/api/approve', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({
-            session_id: sessionId,
+            session_id: activeSessionId,
             approvals: newDecisions,
           }),
         });
-        setPendingApprovals(null);
+        
+        // Update message status
+        updateMessage(activeSessionId, message.id, {
+            approval: {
+                ...approvalData!,
+                status: approved ? 'approved' : 'rejected',
+                decisions: newDecisions
+            }
+        });
+        
       } catch (e) {
         console.error('Approval submission failed:', e);
       }
     }
-  }, [sessionId, pendingApprovals, currentIndex, feedback, decisions, setPendingApprovals]);
+  }, [activeSessionId, message.id, batch, currentIndex, feedback, decisions, approvalData, updateMessage]);
 
-  if (!pendingApprovals || currentIndex >= pendingApprovals.tools.length) return null;
+  if (!batch || currentIndex >= batch.tools.length) return null;
 
-  const currentTool = pendingApprovals.tools[currentIndex];
+  const currentTool = batch.tools[currentIndex];
+
+  const getToolDescription = (toolName: string, args: any) => {
+    if (toolName === 'hf_jobs') {
+      return (
+        <Typography variant="body2" sx={{ color: 'var(--muted-text)', flex: 1 }}>
+          The agent wants to execute <Box component="span" sx={{ color: 'var(--accent-yellow)', fontWeight: 500 }}>hf_jobs</Box> on{' '}
+          <Box component="span" sx={{ fontWeight: 500, color: 'var(--text)' }}>{args.hardware_flavor || 'default'}</Box> with a timeout of{' '}
+          <Box component="span" sx={{ fontWeight: 500, color: 'var(--text)' }}>{args.timeout || '30m'}</Box>
+        </Typography>
+      );
+    }
+    return (
+      <Typography variant="body2" sx={{ color: 'var(--muted-text)', flex: 1 }}>
+        The agent wants to execute <Box component="span" sx={{ color: 'var(--accent-yellow)', fontWeight: 500 }}>{toolName}</Box>
+      </Typography>
+    );
+  };
+
+  const showCode = () => {
+    const args = currentTool.arguments as any;
+    if (currentTool.tool === 'hf_jobs' && args.script) {
+        setPanelContent({
+            title: 'Compute Job Script',
+            content: args.script,
+            language: 'python',
+            parameters: args
+        });
+        setRightPanelOpen(true);
+        setLeftSidebarOpen(false);
+    } else {
+        setPanelContent({
+            title: `Tool: ${currentTool.tool}`,
+            content: JSON.stringify(args, null, 2),
+            language: 'json',
+            parameters: args
+        });
+        setRightPanelOpen(true);
+        setLeftSidebarOpen(false);
+    }
+  };
+
+  const handleViewLogs = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setPanelContent({
+        title: 'Job Logs',
+        content: logsContent,
+        language: 'text'
+    });
+    setRightPanelOpen(true);
+    setLeftSidebarOpen(false);
+  };
 
   return (
     <Box 
       className="action-card"
       sx={{ 
-        mt: 2, 
-        mb: 4, 
         width: '100%',
-        alignSelf: 'center',
         padding: '18px',
         borderRadius: 'var(--radius-md)',
         background: 'linear-gradient(180deg, rgba(255,255,255,0.015), transparent)',
@@ -109,51 +181,104 @@ export default function ApprovalFlow({ sessionId }: ApprovalFlowProps) {
         display: 'flex',
         flexDirection: 'column',
         gap: '12px',
+        opacity: status !== 'pending' && !showLogsButton ? 0.8 : 1
       }}
     >
       <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
          <Typography variant="subtitle2" sx={{ fontWeight: 600, color: 'var(--text)' }}>
-            Approval Required
+            {status === 'pending' ? 'Approval Required' : status === 'approved' ? 'Approved' : 'Rejected'}
          </Typography>
          <Typography variant="caption" sx={{ color: 'var(--muted-text)' }}>
-            ({currentIndex + 1}/{pendingApprovals.count})
+            ({currentIndex + 1}/{batch.count})
          </Typography>
+         {status === 'approved' && <CheckCircleIcon sx={{ fontSize: 18, color: 'var(--accent-green)' }} />}
+         {status === 'rejected' && <CancelIcon sx={{ fontSize: 18, color: 'var(--accent-red)' }} />}
       </Box>
 
-      <Typography variant="body2" sx={{ color: 'var(--muted-text)' }}>
-        The agent wants to execute <Box component="span" sx={{ color: 'var(--accent-yellow)', fontWeight: 500 }}>{currentTool.tool}</Box>
-      </Typography>
-
-      <Box component="pre" sx={{ 
-        bgcolor: 'rgba(0,0,0,0.3)', 
-        p: 2, 
-        borderRadius: '8px',
-        fontSize: '0.8rem', 
-        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, monospace',
-        overflow: 'auto',
-        maxHeight: 200,
-        border: '1px solid rgba(255,255,255,0.05)',
-        margin: 0
-      }}>
-        {JSON.stringify(currentTool.arguments, null, 2)}
+      <Box 
+        onClick={showCode}
+        sx={{ 
+            display: 'flex', 
+            alignItems: 'center', 
+            gap: 1, 
+            cursor: 'pointer',
+            p: 1.5,
+            borderRadius: '8px',
+            bgcolor: 'rgba(0,0,0,0.2)',
+            border: '1px solid rgba(255,255,255,0.05)',
+            transition: 'all 0.2s',
+            '&:hover': {
+                bgcolor: 'rgba(255,255,255,0.03)',
+                borderColor: 'var(--accent-primary)',
+            }
+        }}
+      >
+        {getToolDescription(currentTool.tool, currentTool.arguments)}
+        <OpenInNewIcon sx={{ fontSize: 16, color: 'var(--muted-text)', opacity: 0.7 }} />
       </Box>
 
+      {showLogsButton && (
+        <Button
+            variant="outlined"
+            size="small"
+            startIcon={<OpenInNewIcon />}
+            onClick={handleViewLogs}
+            sx={{
+                alignSelf: 'flex-start',
+                textTransform: 'none',
+                borderColor: 'rgba(255,255,255,0.1)',
+                color: 'var(--accent-primary)',
+                '&:hover': {
+                    borderColor: 'var(--accent-primary)',
+                    bgcolor: 'rgba(255,255,255,0.03)'
+                }
+            }}
+        >
+            View Logs
+        </Button>
+      )}
+
+      {status === 'pending' && (
       <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-        <TextField
-          fullWidth
-          size="small"
-          placeholder="Feedback (optional)"
-          value={feedback}
-          onChange={(e) => setFeedback(e.target.value)}
-          variant="outlined"
-          sx={{ 
-            '& .MuiOutlinedInput-root': { 
-                bgcolor: 'rgba(0,0,0,0.2)',
-                fontFamily: 'inherit',
-                fontSize: '0.9rem' 
-            }
-          }}
-        />
+        <Box sx={{ display: 'flex', gap: 1 }}>
+            <TextField
+                fullWidth
+                size="small"
+                placeholder="Feedback (optional)"
+                value={feedback}
+                onChange={(e) => setFeedback(e.target.value)}
+                variant="outlined"
+                sx={{ 
+                    '& .MuiOutlinedInput-root': { 
+                        bgcolor: 'rgba(0,0,0,0.2)',
+                        fontFamily: 'inherit',
+                        fontSize: '0.9rem' 
+                    }
+                }}
+            />
+            <IconButton 
+                onClick={() => handleResolve(false)}
+                disabled={!feedback}
+                title="Reject with feedback"
+                sx={{ 
+                    color: 'var(--accent-red)',
+                    border: '1px solid rgba(255,255,255,0.05)',
+                    borderRadius: '8px',
+                    width: 40,
+                    height: 40,
+                    '&:hover': {
+                        bgcolor: 'rgba(224, 90, 79, 0.1)',
+                        borderColor: 'var(--accent-red)',
+                    },
+                    '&.Mui-disabled': {
+                        color: 'rgba(255,255,255,0.1)',
+                        borderColor: 'rgba(255,255,255,0.02)'
+                    }
+                }}
+            >
+                <SendIcon fontSize="small" />
+            </IconButton>
+        </Box>
         
         <Box className="action-buttons" sx={{ display: 'flex', gap: '10px' }}>
             <Button 
@@ -194,6 +319,13 @@ export default function ApprovalFlow({ sessionId }: ApprovalFlowProps) {
             </Button>
         </Box>
       </Box>
+      )}
+      
+      {status === 'rejected' && decisions.some(d => d.feedback) && (
+        <Typography variant="body2" sx={{ color: 'var(--accent-red)', mt: 1 }}>
+            Feedback: {decisions.find(d => d.feedback)?.feedback}
+        </Typography>
+      )}
     </Box>
   );
-}
+}

frontend/src/components/Chat/MessageBubble.tsx

@@ -1,6 +1,7 @@
 import { Box, Paper, Typography, Chip } from '@mui/material';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
+import ApprovalFlow from './ApprovalFlow';
 import type { Message } from '@/types/agent';
 
 interface MessageBubbleProps {
@@ -12,6 +13,14 @@ export default function MessageBubble({ message }: MessageBubbleProps) {
   const isTool = message.role === 'tool';
   const isAssistant = message.role === 'assistant';
 
+  if (message.approval) {
+    return (
+        <Box sx={{ width: '100%', maxWidth: '880px', mx: 'auto', my: 2 }}>
+            <ApprovalFlow message={message} />
+        </Box>
+    );
+  }
+
   return (
     <Box
       sx={{

frontend/src/components/Chat/MessageList.tsx

@@ -3,7 +3,6 @@ import { Box, Typography } from '@mui/material';
 import { useAgentStore } from '@/store/agentStore';
 import { useSessionStore } from '@/store/sessionStore';
 import MessageBubble from './MessageBubble';
-import ApprovalFlow from './ApprovalFlow';
 import type { Message } from '@/types/agent';
 
 interface MessageListProps {
@@ -131,7 +130,8 @@ export default function MessageList({ messages, isProcessing }: MessageListProps
         )}
 
         {activeSessionId && (
-          <ApprovalFlow sessionId={activeSessionId} />
+          // ApprovalFlow is now handled within messages
+          null
         )}
         
         <div ref={bottomRef} />

frontend/src/components/CodePanel/CodePanel.tsx

@@ -1,4 +1,5 @@
-import { Box, Typography, IconButton, Checkbox } from '@mui/material';
+import { useRef, useEffect, useMemo } from 'react';
+import { Box, Typography, IconButton } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
@@ -7,10 +8,27 @@ import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import { useAgentStore } from '@/store/agentStore';
 import { useLayoutStore } from '@/store/layoutStore';
+import { processLogs } from '@/utils/logProcessor';
 
 export default function CodePanel() {
   const { panelContent, plan } = useAgentStore();
   const { setRightPanelOpen } = useLayoutStore();
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const displayContent = useMemo(() => {
+    if (!panelContent?.content) return '';
+    // Apply log processing only for text/logs, not for code/json
+    if (!panelContent.language || panelContent.language === 'text') {
+        return processLogs(panelContent.content);
+    }
+    return panelContent.content;
+  }, [panelContent?.content, panelContent?.language]);
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [displayContent]);
 
   return (
     <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column', bgcolor: 'var(--panel)' }}>
@@ -40,8 +58,9 @@ export default function CodePanel() {
             </Typography>
             </Box>
         ) : (
-            <Box sx={{ flex: 1, overflow: 'auto', p: 2 }}>
+            <Box sx={{ flex: 1, overflow: 'hidden', p: 2 }}>
             <Box 
+                ref={scrollRef}
                 className="code-panel"
                 sx={{
                     background: '#0A0B0C',
@@ -70,7 +89,7 @@ export default function CodePanel() {
                         wrapLines={true}
                         wrapLongLines={true}
                     >
-                        {panelContent.content}
+                        {displayContent}
                     </SyntaxHighlighter>
                     ) : (
                     <Box component="pre" sx={{ 
@@ -80,7 +99,7 @@ export default function CodePanel() {
                         whiteSpace: 'pre-wrap',
                         wordBreak: 'break-all'
                     }}>
-                        <code>{panelContent.content}</code>
+                        <code>{displayContent}</code>
                     </Box>
                     )
                 ) : (

frontend/src/hooks/useAgentWebSocket.ts

@@ -111,7 +111,38 @@ export function useAgentWebSocket({
           const toolName = (event.data?.tool as string) || 'unknown';
           const output = (event.data?.output as string) || '';
           const success = event.data?.success as boolean;
-          // Only log output to console, not to trace logs per user request
+          
+          if (toolName === 'hf_jobs') {
+            // Find the last message with approval (likely the one that triggered this job)
+            const messages = useAgentStore.getState().getMessages(sessionId);
+            // Reverse to find the most recent one
+            const lastApprovalMsg = [...messages].reverse().find(m => m.approval);
+            
+            if (lastApprovalMsg) {
+                // Append output if there's already some (for multiple jobs in batch)
+                const currentOutput = lastApprovalMsg.toolOutput || '';
+                const newOutput = currentOutput ? currentOutput + '\n\n' + output : output;
+                
+                useAgentStore.getState().updateMessage(sessionId, lastApprovalMsg.id, {
+                    toolOutput: newOutput
+                });
+                console.log('Updated approval message with tool output:', toolName);
+            } else {
+                console.warn('Received hf_jobs output but no approval message found to update.');
+            }
+            // CRITICAL: Always break for hf_jobs to prevent a separate "Tool" bubble from appearing
+            break;
+          }
+          
+          const message: Message = {
+            id: `msg_tool_${Date.now()}`,
+            role: 'tool',
+            content: output,
+            timestamp: new Date().toISOString(),
+            toolName: toolName,
+          };
+          addMessage(sessionId, message);
+          
           console.log('Tool output:', toolName, success);
           break;
         }
@@ -165,7 +196,22 @@ export function useAgentWebSocket({
             tool_call_id: string;
           }>;
           const count = (event.data?.count as number) || 0;
-          setPendingApprovals({ tools, count });
+          
+          // Create a persistent message for the approval request
+          const message: Message = {
+            id: `msg_approval_${Date.now()}`,
+            role: 'assistant',
+            content: '', // Content is handled by the approval UI
+            timestamp: new Date().toISOString(),
+            approval: {
+                status: 'pending',
+                batch: { tools, count }
+            }
+          };
+          addMessage(sessionId, message);
+          
+          // We don't set pendingApprovals in the global store anymore as the message handles the UI
+          setPendingApprovals(null);
           setProcessing(false);
           break;
         }

frontend/src/store/agentStore.ts

@@ -21,6 +21,7 @@ interface AgentStore {
 
   // Actions
   addMessage: (sessionId: string, message: Message) => void;
+  updateMessage: (sessionId: string, messageId: string, updates: Partial<Message>) => void;
   clearMessages: (sessionId: string) => void;
   setProcessing: (isProcessing: boolean) => void;
   setConnected: (isConnected: boolean) => void;
@@ -57,6 +58,21 @@ export const useAgentStore = create<AgentStore>((set, get) => ({
     });
   },
 
+  updateMessage: (sessionId: string, messageId: string, updates: Partial<Message>) => {
+    set((state) => {
+      const currentMessages = state.messagesBySession[sessionId] || [];
+      const updatedMessages = currentMessages.map((msg) =>
+        msg.id === messageId ? { ...msg, ...updates } : msg
+      );
+      return {
+        messagesBySession: {
+          ...state.messagesBySession,
+          [sessionId]: updatedMessages,
+        },
+      };
+    });
+  },
+
   clearMessages: (sessionId: string) => {
     set((state) => ({
       messagesBySession: {

frontend/src/types/agent.ts

@@ -17,6 +17,12 @@ export interface Message {
   toolName?: string;
   toolCallId?: string;
   trace?: TraceLog[];
+  approval?: {
+    status: 'pending' | 'approved' | 'rejected';
+    batch: ApprovalBatch;
+    decisions?: ToolApproval[];
+  };
+  toolOutput?: string;
 }
 
 export interface ToolCall {

frontend/src/utils/logProcessor.ts

@@ -0,0 +1,81 @@
+export function processLogs(logs: string): string {
+  if (!logs) return '';
+
+  // 1. Handle \r (Carriage Return) for progress bars
+  const rawLines = logs.split('\n');
+  const processedLines: string[] = [];
+  
+  for (const rawLine of rawLines) {
+    // Remove potential trailing \r from \r\n split
+    let line = rawLine;
+    if (line.endsWith('\r')) {
+        line = line.slice(0, -1);
+    }
+
+    if (line.includes('\r')) {
+      const segments = line.split('\r');
+      // Find the last non-empty segment
+      // Iterate backwards
+      let found = false;
+      for (let i = segments.length - 1; i >= 0; i--) {
+        if (segments[i].length > 0) {
+            processedLines.push(segments[i]);
+            found = true;
+            break;
+        }
+      }
+      if (!found) {
+        // If all segments were empty, push empty string (or skip?)
+        processedLines.push("");
+      }
+    } else {
+      processedLines.push(line);
+    }
+  }
+
+  // 2. Compaction (Downloading & TQDM)
+  const finalLines: string[] = [];
+  
+  // Regex for "Downloading <package>" or "Downloaded <package>"
+  const downloadPattern = /^(Downloading|Downloaded)\s+/;
+  
+  // Regex for TQDM-like progress bars
+  // Examples:
+  // "100%|██████████| 10/10 [00:01<00:00,  8.00it/s]"
+  // " 20%|##        | ..."
+  // "Downloading:  10%"
+  const tqdmPattern = /^\s*\d+%\|.*\||^\s*\d+%\s+/;
+
+  for (let i = 0; i < processedLines.length; i++) {
+    const line = processedLines[i];
+    
+    // Check for Download pattern
+    if (downloadPattern.test(line)) {
+      // Look ahead for consecutive download lines
+      let nextIsDownload = false;
+      if (i + 1 < processedLines.length) {
+        nextIsDownload = downloadPattern.test(processedLines[i + 1]);
+      }
+      
+      if (nextIsDownload) {
+        continue; // Skip this line
+      }
+    } 
+    // Check for TQDM pattern
+    else if (tqdmPattern.test(line)) {
+        // Look ahead for consecutive TQDM lines
+        let nextIsTqdm = false;
+        if (i + 1 < processedLines.length) {
+            nextIsTqdm = tqdmPattern.test(processedLines[i + 1]);
+        }
+        
+        if (nextIsTqdm) {
+            continue; // Skip this line
+        }
+    }
+    
+    finalLines.push(line);
+  }
+
+  return finalLines.join('\n');
+}