frontend update

agent/context_manager/manager.py

@@ -2,6 +2,7 @@
 Context management for conversation history
 """
 
+import os
 import zoneinfo
 from datetime import datetime
 from pathlib import Path
@@ -53,6 +54,10 @@ class ContextManager:
         current_time = now.strftime("%H:%M:%S.%f")[:-3]
         current_timezone = f"{now.strftime('%Z')} (UTC{now.strftime('%z')[:3]}:{now.strftime('%z')[3:]})"
 
+        # Get HF user info with explicit token from env
+        hf_token = os.environ.get("HF_TOKEN") or os.environ.get("HUGGINGFACE_HUB_TOKEN")
+        hf_user_info = HfApi(token=hf_token).whoami().get("name", "unknown")
+
         template = Template(template_str)
         return template.render(
             tools=tool_specs,
@@ -60,7 +65,7 @@ class ContextManager:
             current_date=current_date,
             current_time=current_time,
             current_timezone=current_timezone,
-            hf_user_info=HfApi().whoami().get("name"),
+            hf_user_info=hf_user_info,
         )
 
     def add_message(self, message: Message, token_count: int = None) -> None:

agent/prompts/system_prompt_v2.yaml

@@ -490,6 +490,29 @@ system_prompt: |
   - One-word answers when appropriate for simple questions
   - For complex tasks, provide structured breakdown
 
+  # ⚠️ CRITICAL: Task Completion Requirements
+
+  **You must FULLY satisfy the user's request before finishing your turn.** Do not stop prematurely.
+
+  **Before ending your turn, verify:**
+  1. ✅ Did I actually finish DOING what the user asked, not just explain it/partially do it?
+  2. ✅ Did I confirm the task succeeded (job submitted, file uploaded, etc.)?
+  3. ✅ If I encountered an error, did I fix it and retry?
+  4. ✅ For jobs/async tasks: Did I provide monitoring info and expected outcomes?
+
+  **Common mistakes to avoid:**
+  - ✗ Stopping after "I'll help you with X" without actually doing X
+  - ✗ Explaining what you WOULD do instead of DOING it
+  - ✗ Ending after a tool call fails without retrying or fixing
+  - ✗ Stopping mid-task because you described what happens next
+  - ✗ Not providing final summary with URLs/results after completing
+
+  **Correct behavior:**
+  - ✓ Continue calling tools until the task is actually complete
+  - ✓ After submitting a job, provide the job URL and monitoring links
+  - ✓ After an error, diagnose and fix it, then retry
+  - ✓ End with a clear summary of what was accomplished and any next steps
+
   # Examples
 
   <example>

agent/tools/jobs_tool.py

@@ -1015,8 +1015,13 @@ async def hf_jobs_handler(
                     Event(event_type="tool_log", data={"tool": "hf_jobs", "log": log})
                 )
 
+        # Get token and namespace from HF token
+        hf_token = os.environ.get("HF_TOKEN") or os.environ.get("HUGGINGFACE_HUB_TOKEN")
+        namespace = HfApi(token=hf_token).whoami().get("name") if hf_token else None
+
         tool = HfJobsTool(
-            namespace=os.environ.get("HF_NAMESPACE", ""),
+            namespace=namespace,
+            hf_token=hf_token,
             log_callback=log_callback if session else None,
         )
         result = await tool.execute(arguments)

configs/main_agent_config.json

@@ -3,8 +3,8 @@
   "save_sessions": true,
   "session_dataset_repo": "akseljoonas/hf-agent-sessions",
   "yolo_mode": false,
-  "confirm_cpu_jobs": true,
-  "auto_file_upload": false,
+  "confirm_cpu_jobs": false,
+  "auto_file_upload": true,
   "mcpServers": {
     "hf-mcp-server": {
       "transport": "http",

frontend/src/components/Chat/ApprovalFlow.tsx

@@ -28,37 +28,33 @@ export default function ApprovalFlow({ message }: ApprovalFlowProps) {
 
   const { batch, status } = approvalData;
 
-  // Parse toolOutput to extract job info (URL, status, logs)
+  // Parse toolOutput to extract job info (URL, status, logs, errors)
   let logsContent = '';
   let showLogsButton = false;
   let jobUrl = '';
-  let jobId = '';
   let jobStatus = '';
   let jobFailed = false;
+  let errorMessage = '';
 
   if (message.toolOutput) {
+    const output = message.toolOutput;
+
     // Extract job URL: **View at:** https://...
-    const urlMatch = message.toolOutput.match(/\*\*View at:\*\*\s*(https:\/\/[^\s\n]+)/);
+    const urlMatch = output.match(/\*\*View at:\*\*\s*(https:\/\/[^\s\n]+)/);
     if (urlMatch) {
       jobUrl = urlMatch[1];
     }
 
-    // Extract job ID: **Job ID:** ...
-    const idMatch = message.toolOutput.match(/\*\*Job ID:\*\*\s*([^\s\n]+)/);
-    if (idMatch) {
-      jobId = idMatch[1];
-    }
-
     // Extract job status: **Final Status:** ...
-    const statusMatch = message.toolOutput.match(/\*\*Final Status:\*\*\s*([^\n]+)/);
+    const statusMatch = output.match(/\*\*Final Status:\*\*\s*([^\n]+)/);
     if (statusMatch) {
       jobStatus = statusMatch[1].trim();
       jobFailed = jobStatus.toLowerCase().includes('error') || jobStatus.toLowerCase().includes('failed');
     }
 
     // Extract logs
-    if (message.toolOutput.includes('**Logs:**')) {
-      const parts = message.toolOutput.split('**Logs:**');
+    if (output.includes('**Logs:**')) {
+      const parts = output.split('**Logs:**');
       if (parts.length > 1) {
         const logsPart = parts[1].trim();
         const codeBlockMatch = logsPart.match(/```([\s\S]*?)```/);
@@ -68,6 +64,20 @@ export default function ApprovalFlow({ message }: ApprovalFlowProps) {
         }
       }
     }
+
+    // Detect errors - if output exists but doesn't have the expected job completion format
+    // This catches early failures (validation errors, API errors, etc.)
+    const isExpectedFormat = output.includes('**Job ID:**') || output.includes('**View at:**');
+    const looksLikeError = output.toLowerCase().includes('error') ||
+                          output.toLowerCase().includes('failed') ||
+                          output.toLowerCase().includes('exception') ||
+                          output.includes('Traceback');
+
+    if (!isExpectedFormat || (looksLikeError && !logsContent)) {
+      // This is likely an error message - show it
+      errorMessage = output;
+      jobFailed = true;
+    }
   }
 
   // Sync right panel with current tool
@@ -277,44 +287,68 @@ export default function ApprovalFlow({ message }: ApprovalFlowProps) {
         <OpenInNewIcon sx={{ fontSize: 16, color: 'var(--muted-text)', opacity: 0.7 }} />
       </Box>
 
-      {currentTool.tool === 'hf_jobs' && (
-        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
-          {/* Show specific job URL if available (after execution), otherwise generic link */}
-          {jobUrl ? (
-            <Link
-              href={jobUrl}
-              target="_blank"
-              rel="noopener noreferrer"
+      {/* Script/Logs buttons for hf_jobs - always show when we have a script */}
+      {currentTool.tool === 'hf_jobs' && args.script && (
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+          <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
+            <Button
+              variant="outlined"
+              size="small"
+              onClick={showCode}
               sx={{
-                display: 'flex',
-                alignItems: 'center',
-                gap: 0.5,
-                color: 'var(--accent-primary)',
-                fontSize: '0.8rem',
-                textDecoration: 'none',
-                opacity: 0.9,
+                textTransform: 'none',
+                borderColor: 'rgba(255,255,255,0.1)',
+                color: 'var(--muted-text)',
+                fontSize: '0.75rem',
+                py: 0.5,
                 '&:hover': {
-                  opacity: 1,
-                  textDecoration: 'underline',
+                  borderColor: 'var(--accent-primary)',
+                  color: 'var(--accent-primary)',
+                  bgcolor: 'rgba(255,255,255,0.03)'
                 }
               }}
             >
-              <LaunchIcon sx={{ fontSize: 14 }} />
-              View job{jobId ? ` (${jobId.substring(0, 8)}...)` : ''} on Hugging Face
-            </Link>
-          ) : (
+              View Script
+            </Button>
+            <Button
+              variant="outlined"
+              size="small"
+              onClick={handleViewLogs}
+              disabled={!logsContent && status === 'pending'}
+              sx={{
+                textTransform: 'none',
+                borderColor: 'rgba(255,255,255,0.1)',
+                color: logsContent ? 'var(--accent-primary)' : 'var(--muted-text)',
+                fontSize: '0.75rem',
+                py: 0.5,
+                '&:hover': {
+                  borderColor: 'var(--accent-primary)',
+                  bgcolor: 'rgba(255,255,255,0.03)'
+                },
+                '&.Mui-disabled': {
+                  color: 'rgba(255,255,255,0.3)',
+                  borderColor: 'rgba(255,255,255,0.05)',
+                }
+              }}
+            >
+              {logsContent ? 'View Logs' : 'Logs (waiting for job...)'}
+            </Button>
+          </Box>
+
+          {/* Job URL - only show when we have a specific URL */}
+          {jobUrl && (
             <Link
-              href="https://huggingface.co/settings/jobs"
+              href={jobUrl}
               target="_blank"
               rel="noopener noreferrer"
               sx={{
                 display: 'flex',
                 alignItems: 'center',
                 gap: 0.5,
-                color: 'var(--muted-text)',
-                fontSize: '0.8rem',
+                color: 'var(--accent-primary)',
+                fontSize: '0.75rem',
                 textDecoration: 'none',
-                opacity: 0.7,
+                opacity: 0.9,
                 '&:hover': {
                   opacity: 1,
                   textDecoration: 'underline',
@@ -322,7 +356,7 @@ export default function ApprovalFlow({ message }: ApprovalFlowProps) {
               }}
             >
               <LaunchIcon sx={{ fontSize: 14 }} />
-              View all jobs on Hugging Face
+              View Job on Hugging Face
             </Link>
           )}
 
@@ -348,55 +382,46 @@ export default function ApprovalFlow({ message }: ApprovalFlowProps) {
         </Typography>
       )}
 
-      {/* Show script/logs buttons for completed jobs */}
-      {status !== 'pending' && currentTool.tool === 'hf_jobs' && (args.script || showLogsButton) && (
-        <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
-          {args.script && (
-            <Button
-              variant="outlined"
-              size="small"
-              startIcon={<OpenInNewIcon />}
-              onClick={showCode}
-              sx={{
-                textTransform: 'none',
-                borderColor: 'rgba(255,255,255,0.1)',
-                color: 'var(--muted-text)',
-                fontSize: '0.75rem',
-                py: 0.5,
-                '&:hover': {
-                  borderColor: 'var(--accent-primary)',
-                  color: 'var(--accent-primary)',
-                  bgcolor: 'rgba(255,255,255,0.03)'
-                }
-              }}
-            >
-              View Script
-            </Button>
-          )}
-          {showLogsButton && (
-            <Button
-              variant="outlined"
-              size="small"
-              startIcon={<OpenInNewIcon />}
-              onClick={handleViewLogs}
-              sx={{
-                textTransform: 'none',
-                borderColor: 'rgba(255,255,255,0.1)',
-                color: 'var(--accent-primary)',
-                fontSize: '0.75rem',
-                py: 0.5,
-                '&:hover': {
-                  borderColor: 'var(--accent-primary)',
-                  bgcolor: 'rgba(255,255,255,0.03)'
-                }
-              }}
-            >
-              View Logs
-            </Button>
-          )}
+      {/* Show error message if job failed */}
+      {errorMessage && status !== 'pending' && (
+        <Box
+          sx={{
+            p: 1.5,
+            borderRadius: '8px',
+            bgcolor: 'rgba(224, 90, 79, 0.1)',
+            border: '1px solid rgba(224, 90, 79, 0.3)',
+          }}
+        >
+          <Typography
+            variant="caption"
+            sx={{
+              color: 'var(--accent-red)',
+              fontWeight: 600,
+              display: 'block',
+              mb: 0.5,
+            }}
+          >
+            Error
+          </Typography>
+          <Typography
+            component="pre"
+            sx={{
+              color: 'var(--text)',
+              fontSize: '0.75rem',
+              fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, monospace',
+              whiteSpace: 'pre-wrap',
+              wordBreak: 'break-word',
+              m: 0,
+              maxHeight: '150px',
+              overflow: 'auto',
+            }}
+          >
+            {errorMessage.length > 500 ? errorMessage.substring(0, 500) + '...' : errorMessage}
+          </Typography>
         </Box>
       )}
 
+
       {status === 'pending' && (
       <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
         <Box sx={{ display: 'flex', gap: 1 }}>

frontend/src/components/Chat/MessageBubble.tsx

@@ -1,26 +1,180 @@
-import { Box, Paper, Typography, Chip } from '@mui/material';
+import { Box, Paper, Typography } from '@mui/material';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import ApprovalFlow from './ApprovalFlow';
-import type { Message } from '@/types/agent';
+import type { Message, TraceLog } from '@/types/agent';
+import { useAgentStore } from '@/store/agentStore';
+import { useLayoutStore } from '@/store/layoutStore';
 
 interface MessageBubbleProps {
   message: Message;
 }
 
+// Render a tools segment with clickable tool calls
+function ToolsSegment({ tools }: { tools: TraceLog[] }) {
+  const { showToolOutput } = useAgentStore();
+  const { setRightPanelOpen } = useLayoutStore();
+
+  const handleToolClick = (log: TraceLog) => {
+    if (log.completed && log.output) {
+      showToolOutput(log);
+      setRightPanelOpen(true);
+    }
+  };
+
+  return (
+    <Box
+      sx={{
+        bgcolor: 'rgba(0,0,0,0.3)',
+        borderRadius: 1,
+        p: 1.5,
+        border: 1,
+        borderColor: 'rgba(255,255,255,0.05)',
+        my: 1.5,
+      }}
+    >
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
+        {tools.map((log) => {
+          const isClickable = log.completed && log.output;
+          return (
+            <Typography
+              key={log.id}
+              variant="caption"
+              component="div"
+              onClick={() => handleToolClick(log)}
+              sx={{
+                color: 'var(--muted-text)',
+                fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, monospace',
+                fontSize: '0.75rem',
+                display: 'flex',
+                alignItems: 'center',
+                gap: 0.5,
+                cursor: isClickable ? 'pointer' : 'default',
+                borderRadius: 0.5,
+                px: 0.5,
+                mx: -0.5,
+                transition: 'background-color 0.15s ease',
+                '&:hover': isClickable ? {
+                  bgcolor: 'rgba(255,255,255,0.05)',
+                } : {},
+              }}
+            >
+              <span style={{
+                color: log.completed
+                  ? (log.success === false ? '#F87171' : '#FDB022')
+                  : 'inherit',
+                fontSize: '0.85rem',
+              }}>
+                {log.completed ? (log.success === false ? '✗' : '✓') : '•'}
+              </span>
+              <span style={{
+                fontWeight: 600,
+                color: isClickable ? 'rgba(255, 255, 255, 0.9)' : 'inherit',
+                textDecoration: isClickable ? 'underline' : 'none',
+                textDecorationColor: 'rgba(255,255,255,0.3)',
+                textUnderlineOffset: '2px',
+              }}>
+                {log.tool}
+              </span>
+              {!log.completed && <span style={{ opacity: 0.6 }}>...</span>}
+              {isClickable && (
+                <span style={{
+                  opacity: 0.4,
+                  fontSize: '0.65rem',
+                  marginLeft: 'auto',
+                }}>
+                  click to view
+                </span>
+              )}
+            </Typography>
+          );
+        })}
+      </Box>
+    </Box>
+  );
+}
+
+// Markdown styles
+const markdownStyles = {
+  '& p': { m: 0, mb: 1, '&:last-child': { mb: 0 } },
+  '& pre': {
+    bgcolor: 'rgba(0,0,0,0.5)',
+    p: 1.5,
+    borderRadius: 1,
+    overflow: 'auto',
+    fontSize: '0.85rem',
+    border: '1px solid rgba(255,255,255,0.05)',
+  },
+  '& code': {
+    bgcolor: 'rgba(255,255,255,0.05)',
+    px: 0.5,
+    py: 0.25,
+    borderRadius: 0.5,
+    fontSize: '0.85rem',
+    fontFamily: '"JetBrains Mono", monospace',
+  },
+  '& pre code': { bgcolor: 'transparent', p: 0 },
+  '& a': {
+    color: 'var(--accent-yellow)',
+    textDecoration: 'none',
+    '&:hover': { textDecoration: 'underline' },
+  },
+  '& ul, & ol': { pl: 2, my: 1 },
+  '& table': {
+    borderCollapse: 'collapse',
+    width: '100%',
+    my: 2,
+    fontSize: '0.875rem',
+  },
+  '& th': {
+    borderBottom: '1px solid rgba(255,255,255,0.1)',
+    textAlign: 'left',
+    p: 1,
+    bgcolor: 'rgba(255,255,255,0.02)',
+  },
+  '& td': {
+    borderBottom: '1px solid rgba(255,255,255,0.05)',
+    p: 1,
+  },
+};
+
 export default function MessageBubble({ message }: MessageBubbleProps) {
   const isUser = message.role === 'user';
-  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>
+      <Box sx={{ width: '100%', maxWidth: '880px', mx: 'auto', my: 2 }}>
+        <ApprovalFlow message={message} />
+      </Box>
     );
   }
 
+  // Render segments chronologically if available, otherwise fall back to content
+  const renderContent = () => {
+    if (message.segments && message.segments.length > 0) {
+      return message.segments.map((segment, idx) => {
+        if (segment.type === 'text' && segment.content) {
+          return (
+            <Box key={idx} sx={markdownStyles}>
+              <ReactMarkdown remarkPlugins={[remarkGfm]}>{segment.content}</ReactMarkdown>
+            </Box>
+          );
+        }
+        if (segment.type === 'tools' && segment.tools && segment.tools.length > 0) {
+          return <ToolsSegment key={idx} tools={segment.tools} />;
+        }
+        return null;
+      });
+    }
+    // Fallback: just render content
+    return (
+      <Box sx={markdownStyles}>
+        <ReactMarkdown remarkPlugins={[remarkGfm]}>{message.content}</ReactMarkdown>
+      </Box>
+    );
+  };
+
   return (
     <Box
       sx={{
@@ -37,7 +191,6 @@ export default function MessageBubble({ message }: MessageBubbleProps) {
         sx={{
           p: '14px 18px',
           margin: '10px 0',
-          width: isTool ? '100%' : 'auto',
           maxWidth: '100%',
           borderRadius: 'var(--radius-lg)',
           borderTopLeftRadius: isAssistant ? '6px' : undefined,
@@ -47,130 +200,14 @@ export default function MessageBubble({ message }: MessageBubbleProps) {
           background: 'linear-gradient(180deg, rgba(255,255,255,0.015), transparent)',
         }}
       >
-        {isTool && (
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
-            <Typography variant="caption" color="text.secondary">
-              Tool
-            </Typography>
-            {message.toolName && (
-              <Chip
-                label={message.toolName}
-                size="small"
-                variant="outlined"
-                sx={{ ml: 1, height: 20, fontSize: '0.7rem' }}
-              />
-            )}
-          </Box>
-        )}
+        {renderContent()}
 
-        <Box
-          sx={{
-            '& p': { m: 0, color: isUser ? 'var(--text)' : 'var(--text)' }, // User might want different text color? Defaults to --text
-            '& pre': {
-              bgcolor: 'rgba(0,0,0,0.5)',
-              p: 1.5,
-              borderRadius: 1,
-              overflow: 'auto',
-              fontSize: '0.85rem',
-              border: '1px solid rgba(255,255,255,0.05)',
-            },
-            '& code': {
-              bgcolor: 'rgba(255,255,255,0.05)',
-              px: 0.5,
-              py: 0.25,
-              borderRadius: 0.5,
-              fontSize: '0.85rem',
-              fontFamily: '"JetBrains Mono", monospace',
-            },
-            '& pre code': {
-              bgcolor: 'transparent',
-              p: 0,
-            },
-            '& a': {
-              color: 'var(--accent-yellow)',
-              textDecoration: 'none',
-              '&:hover': {
-                textDecoration: 'underline',
-              },
-            },
-            '& ul, & ol': {
-              pl: 2,
-              my: 1,
-            },
-            '& table': {
-              borderCollapse: 'collapse',
-              width: '100%',
-              my: 2,
-              fontSize: '0.875rem',
-            },
-            '& th': {
-              borderBottom: '1px solid',
-              borderColor: 'rgba(255,255,255,0.1)',
-              textAlign: 'left',
-              p: 1,
-              bgcolor: 'rgba(255,255,255,0.02)',
-            },
-            '& td': {
-              borderBottom: '1px solid',
-              borderColor: 'rgba(255,255,255,0.05)',
-              p: 1,
-            },
-          }}
+        <Typography
+          className="meta"
+          variant="caption"
+          sx={{ display: 'block', textAlign: 'right', mt: 1, fontSize: '11px', opacity: 0.5 }}
         >
-          <ReactMarkdown remarkPlugins={[remarkGfm]}>{message.content}</ReactMarkdown>
-        </Box>
-
-        {/* Persisted Trace Logs - Now at the bottom */}
-        {message.trace && message.trace.length > 0 && (
-          <Box
-            sx={{
-              bgcolor: 'rgba(0,0,0,0.3)',
-              borderRadius: 1,
-              p: 1.5,
-              border: 1,
-              borderColor: 'rgba(255,255,255,0.05)',
-              width: '100%',
-              mt: 2,
-            }}
-          >
-            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
-              {message.trace.map((log) => {
-                // Extract tool name from text "Agent is executing {toolName}..."
-                const match = log.text.match(/Agent is executing (.+)\.\.\./);
-                const toolName = match ? match[1] : log.tool;
-
-                return (
-                  <Typography
-                    key={log.id}
-                    variant="caption"
-                    component="div"
-                    sx={{
-                      color: 'var(--muted-text)',
-                      fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, monospace',
-                      fontSize: '0.75rem',
-                      display: 'flex',
-                      alignItems: 'center',
-                      gap: 0.5,
-                    }}
-                  >
-                    <span style={{ color: log.completed ? '#FDB022' : 'inherit' }}>*</span>
-                    <span>Agent is executing </span>
-                    <span style={{
-                      fontWeight: 600,
-                      color: 'rgba(255, 255, 255, 0.9)',
-                    }}>
-                      {toolName}
-                    </span>
-                    <span>...</span>
-                  </Typography>
-                );
-              })}
-            </Box>
-          </Box>
-        )}
-
-        <Typography className="meta" variant="caption" sx={{ display: 'block', textAlign: 'right', mt: 1, fontSize: '11px', opacity: 0.5 }}>
-            {new Date(message.timestamp).toLocaleTimeString()}
+          {new Date(message.timestamp).toLocaleTimeString()}
         </Typography>
       </Paper>
     </Box>

frontend/src/components/CodePanel/CodePanel.tsx

@@ -1,19 +1,22 @@
 import { useRef, useEffect, useMemo } from 'react';
-import { Box, Typography, IconButton, Tabs, Tab } from '@mui/material';
+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';
 import PlayCircleOutlineIcon from '@mui/icons-material/PlayCircleOutline';
 import CodeIcon from '@mui/icons-material/Code';
 import TerminalIcon from '@mui/icons-material/Terminal';
+import ArticleIcon from '@mui/icons-material/Article';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 import { useAgentStore } from '@/store/agentStore';
 import { useLayoutStore } from '@/store/layoutStore';
 import { processLogs } from '@/utils/logProcessor';
 
 export default function CodePanel() {
-  const { panelContent, panelTabs, activePanelTab, setActivePanelTab, plan } = useAgentStore();
+  const { panelContent, panelTabs, activePanelTab, setActivePanelTab, removePanelTab, plan } = useAgentStore();
   const { setRightPanelOpen } = useLayoutStore();
   const scrollRef = useRef<HTMLDivElement>(null);
 
@@ -51,40 +54,72 @@ export default function CodePanel() {
         borderBottom: '1px solid rgba(255,255,255,0.03)'
       }}>
         {hasTabs ? (
-          <Tabs
-            value={activePanelTab || panelTabs[0]?.id}
-            onChange={(_, newValue) => setActivePanelTab(newValue)}
-            sx={{
-              minHeight: 36,
-              '& .MuiTabs-indicator': {
-                backgroundColor: 'var(--accent-primary)',
-              },
-              '& .MuiTab-root': {
-                minHeight: 36,
-                minWidth: 'auto',
-                px: 2,
-                py: 0.5,
-                fontSize: '0.75rem',
-                fontWeight: 600,
-                textTransform: 'uppercase',
-                letterSpacing: '0.05em',
-                color: 'var(--muted-text)',
-                '&.Mui-selected': {
-                  color: 'var(--text)',
-                },
-              },
-            }}
-          >
-            {panelTabs.map((tab) => (
-              <Tab
-                key={tab.id}
-                value={tab.id}
-                label={tab.title}
-                icon={tab.id === 'script' ? <CodeIcon sx={{ fontSize: 16 }} /> : <TerminalIcon sx={{ fontSize: 16 }} />}
-                iconPosition="start"
-              />
-            ))}
-          </Tabs>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexWrap: 'wrap' }}>
+            {panelTabs.map((tab) => {
+              const isActive = activePanelTab === tab.id;
+              // Choose icon based on tab type
+              let icon = <TerminalIcon sx={{ fontSize: 14 }} />;
+              if (tab.id === 'script' || tab.language === 'python') {
+                icon = <CodeIcon sx={{ fontSize: 14 }} />;
+              } else if (tab.id === 'tool_output' || tab.language === 'markdown' || tab.language === 'json') {
+                icon = <ArticleIcon sx={{ fontSize: 14 }} />;
+              }
+              return (
+                <Box
+                  key={tab.id}
+                  onClick={() => setActivePanelTab(tab.id)}
+                  sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 0.5,
+                    px: 1.5,
+                    py: 0.75,
+                    borderRadius: 1,
+                    cursor: 'pointer',
+                    fontSize: '0.7rem',
+                    fontWeight: 600,
+                    textTransform: 'uppercase',
+                    letterSpacing: '0.05em',
+                    color: isActive ? 'var(--text)' : 'var(--muted-text)',
+                    bgcolor: isActive ? 'rgba(255,255,255,0.08)' : 'transparent',
+                    border: '1px solid',
+                    borderColor: isActive ? 'rgba(255,255,255,0.1)' : 'transparent',
+                    transition: 'all 0.15s ease',
+                    '&:hover': {
+                      bgcolor: 'rgba(255,255,255,0.05)',
+                    },
+                  }}
+                >
+                  {icon}
+                  <span>{tab.title}</span>
+                  <Box
+                    component="span"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      removePanelTab(tab.id);
+                    }}
+                    sx={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      ml: 0.5,
+                      width: 16,
+                      height: 16,
+                      borderRadius: '50%',
+                      fontSize: '0.65rem',
+                      opacity: 0.5,
+                      '&:hover': {
+                        opacity: 1,
+                        bgcolor: 'rgba(255,255,255,0.1)',
+                      },
+                    }}
+                  >
+                    ✕
+                  </Box>
+                </Box>
+              );
+            })}
+          </Box>
         ) : (
           <Typography variant="caption" sx={{ fontWeight: 600, color: 'var(--muted-text)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
             {currentContent?.title || 'Code Panel'}
@@ -137,6 +172,86 @@ export default function CodePanel() {
                   >
                     {displayContent}
                   </SyntaxHighlighter>
+                ) : currentContent.language === 'json' ? (
+                  <SyntaxHighlighter
+                    language="json"
+                    style={vscDarkPlus}
+                    customStyle={{
+                      margin: 0,
+                      padding: 0,
+                      background: 'transparent',
+                      fontSize: '13px',
+                      fontFamily: 'inherit',
+                    }}
+                    wrapLines={true}
+                    wrapLongLines={true}
+                  >
+                    {displayContent}
+                  </SyntaxHighlighter>
+                ) : currentContent.language === 'markdown' ? (
+                  <Box sx={{
+                    color: 'var(--text)',
+                    fontSize: '13px',
+                    lineHeight: 1.6,
+                    '& p': { m: 0, mb: 1.5, '&:last-child': { mb: 0 } },
+                    '& pre': {
+                      bgcolor: 'rgba(0,0,0,0.4)',
+                      p: 1.5,
+                      borderRadius: 1,
+                      overflow: 'auto',
+                      fontSize: '12px',
+                      border: '1px solid rgba(255,255,255,0.05)',
+                    },
+                    '& code': {
+                      bgcolor: 'rgba(255,255,255,0.05)',
+                      px: 0.5,
+                      py: 0.25,
+                      borderRadius: 0.5,
+                      fontSize: '12px',
+                      fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, monospace',
+                    },
+                    '& pre code': { bgcolor: 'transparent', p: 0 },
+                    '& a': {
+                      color: 'var(--accent-yellow)',
+                      textDecoration: 'none',
+                      '&:hover': { textDecoration: 'underline' },
+                    },
+                    '& ul, & ol': { pl: 2.5, my: 1 },
+                    '& li': { mb: 0.5 },
+                    '& table': {
+                      borderCollapse: 'collapse',
+                      width: '100%',
+                      my: 2,
+                      fontSize: '12px',
+                      fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, monospace',
+                    },
+                    '& th': {
+                      borderBottom: '2px solid rgba(255,255,255,0.15)',
+                      textAlign: 'left',
+                      p: 1,
+                      fontWeight: 600,
+                    },
+                    '& td': {
+                      borderBottom: '1px solid rgba(255,255,255,0.05)',
+                      p: 1,
+                    },
+                    '& h1, & h2, & h3, & h4': {
+                      mt: 2,
+                      mb: 1,
+                      fontWeight: 600,
+                    },
+                    '& h1': { fontSize: '1.25rem' },
+                    '& h2': { fontSize: '1.1rem' },
+                    '& h3': { fontSize: '1rem' },
+                    '& blockquote': {
+                      borderLeft: '3px solid rgba(255,255,255,0.2)',
+                      pl: 2,
+                      ml: 0,
+                      color: 'var(--muted-text)',
+                    },
+                  }}>
+                    <ReactMarkdown remarkPlugins={[remarkGfm]}>{displayContent}</ReactMarkdown>
+                  </Box>
                 ) : (
                   <Box component="pre" sx={{
                     m: 0,

frontend/src/hooks/useAgentWebSocket.ts

@@ -72,26 +72,51 @@ export function useAgentWebSocket({
           const currentTurnMsgId = useAgentStore.getState().currentTurnMessageId;
 
           if (currentTurnMsgId) {
-            // Update existing message - append content and update trace
+            // Update existing message - add segments chronologically
             const messages = useAgentStore.getState().getMessages(sessionId);
             const existingMsg = messages.find(m => m.id === currentTurnMsgId);
 
             if (existingMsg) {
-              const newContent = existingMsg.content ? existingMsg.content + '\n\n' + content : content;
+              const segments = existingMsg.segments ? [...existingMsg.segments] : [];
+
+              // If there are pending traces, add them as a tools segment first
+              if (currentTrace.length > 0) {
+                segments.push({ type: 'tools', tools: [...currentTrace] });
+                clearTraceLogs();
+              }
+
+              // Add the new text segment
+              if (content) {
+                segments.push({ type: 'text', content });
+              }
+
               updateMessage(sessionId, currentTurnMsgId, {
-                content: newContent,
-                trace: currentTrace.length > 0 ? [...currentTrace] : undefined,
+                content: existingMsg.content + '\n\n' + content,
+                segments,
               });
             }
           } else {
             // Create new message
             const messageId = `msg_${Date.now()}`;
+            const segments: Array<{ type: 'text' | 'tools'; content?: string; tools?: typeof currentTrace }> = [];
+
+            // Add any pending traces first
+            if (currentTrace.length > 0) {
+              segments.push({ type: 'tools', tools: [...currentTrace] });
+              clearTraceLogs();
+            }
+
+            // Add the text
+            if (content) {
+              segments.push({ type: 'text', content });
+            }
+
             const message: Message = {
               id: messageId,
               role: 'assistant',
               content,
               timestamp: new Date().toISOString(),
-              trace: currentTrace.length > 0 ? [...currentTrace] : undefined,
+              segments,
             };
             addMessage(sessionId, message);
             setCurrentTurnMessageId(messageId);
@@ -112,6 +137,8 @@ export function useAgentWebSocket({
               tool: toolName,
               timestamp: new Date().toISOString(),
               completed: false,
+              // Store args for auto-exec message creation later
+              args: toolName === 'hf_jobs' ? args : undefined,
             };
             addTraceLog(log);
             // Update the current turn message's trace in real-time
@@ -153,26 +180,54 @@ export function useAgentWebSocket({
           const output = (event.data?.output as string) || '';
           const success = event.data?.success as boolean;
 
-          // Mark the corresponding trace log as completed
-          updateTraceLog(toolName, { completed: true });
+          // Mark the corresponding trace log as completed and store the output
+          updateTraceLog(toolName, { completed: true, output, success });
           // Update the current turn message's trace in real-time
           updateCurrentTurnTrace(sessionId);
 
-          // Special handling for hf_jobs - update the approval message with output
+          // Special handling for hf_jobs - update or create job message with output
           if (toolName === 'hf_jobs') {
             const messages = useAgentStore.getState().getMessages(sessionId);
-            const lastApprovalMsg = [...messages].reverse().find(m => m.approval);
-
-            if (lastApprovalMsg) {
-                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);
+            const traceLogs = useAgentStore.getState().traceLogs;
+
+            // Find existing approval message for this job
+            let jobMsg = [...messages].reverse().find(m => m.approval);
+
+            if (!jobMsg) {
+              // No approval message exists - this was an auto-executed job
+              // Create a job execution message so user can see results
+              const jobTrace = [...traceLogs].reverse().find(t => t.tool === 'hf_jobs');
+              const args = jobTrace?.args || {};
+
+              const autoExecMessage: Message = {
+                id: `msg_auto_${Date.now()}`,
+                role: 'assistant',
+                content: '',
+                timestamp: new Date().toISOString(),
+                approval: {
+                  status: 'approved', // Auto-approved (no user action needed)
+                  batch: {
+                    tools: [{
+                      tool: toolName,
+                      arguments: args,
+                      tool_call_id: `auto_${Date.now()}`
+                    }],
+                    count: 1
+                  }
+                },
+                toolOutput: output
+              };
+              addMessage(sessionId, autoExecMessage);
+              console.log('Created auto-exec message with tool output:', toolName);
             } else {
-                console.warn('Received hf_jobs output but no approval message found to update.');
+              // Update existing approval message
+              const currentOutput = jobMsg.toolOutput || '';
+              const newOutput = currentOutput ? currentOutput + '\n\n' + output : output;
+
+              useAgentStore.getState().updateMessage(sessionId, jobMsg.id, {
+                toolOutput: newOutput
+              });
+              console.log('Updated job message with tool output:', toolName);
             }
           }
 
@@ -241,6 +296,49 @@ export function useAgentWebSocket({
           };
           addMessage(sessionId, message);
 
+          // Show the first tool's content in the panel so users see what they're approving
+          if (tools && tools.length > 0) {
+            const firstTool = tools[0];
+            const args = firstTool.arguments as Record<string, any>;
+
+            clearPanelTabs();
+
+            if (firstTool.tool === 'hf_jobs' && args.script) {
+              setPanelTab({
+                id: 'script',
+                title: 'Script',
+                content: args.script,
+                language: 'python',
+                parameters: args
+              });
+              setActivePanelTab('script');
+            } else if (firstTool.tool === 'hf_repo_files' && args.content) {
+              const filename = args.path || 'file';
+              const isPython = filename.endsWith('.py');
+              setPanelTab({
+                id: 'content',
+                title: filename.split('/').pop() || 'Content',
+                content: args.content,
+                language: isPython ? 'python' : 'text',
+                parameters: args
+              });
+              setActivePanelTab('content');
+            } else {
+              // For other tools, show args as JSON
+              setPanelTab({
+                id: 'args',
+                title: firstTool.tool,
+                content: JSON.stringify(args, null, 2),
+                language: 'json',
+                parameters: args
+              });
+              setActivePanelTab('args');
+            }
+
+            setRightPanelOpen(true);
+            setLeftSidebarOpen(false);
+          }
+
           // Clear currentTurnMessageId so subsequent assistant_message events create a new message below the approval
           setCurrentTurnMessageId(null);
 

frontend/src/store/agentStore.ts

@@ -47,9 +47,11 @@ interface AgentStore {
   setPanelTab: (tab: PanelTab) => void;
   setActivePanelTab: (tabId: string) => void;
   clearPanelTabs: () => void;
+  removePanelTab: (tabId: string) => void;
   setPlan: (plan: PlanItem[]) => void;
   setCurrentTurnMessageId: (id: string | null) => void;
   updateCurrentTurnTrace: (sessionId: string) => void;
+  showToolOutput: (log: TraceLog) => void;
 }
 
 export const useAgentStore = create<AgentStore>((set, get) => ({
@@ -181,6 +183,21 @@ export const useAgentStore = create<AgentStore>((set, get) => ({
     set({ panelTabs: [], activePanelTab: null });
   },
 
+  removePanelTab: (tabId: string) => {
+    set((state) => {
+      const newTabs = state.panelTabs.filter(t => t.id !== tabId);
+      // If we removed the active tab, switch to another tab or null
+      let newActiveTab = state.activePanelTab;
+      if (state.activePanelTab === tabId) {
+        newActiveTab = newTabs.length > 0 ? newTabs[newTabs.length - 1].id : null;
+      }
+      return {
+        panelTabs: newTabs,
+        activePanelTab: newActiveTab,
+      };
+    });
+  },
+
   setPlan: (plan: PlanItem[]) => {
     set({ plan });
   },
@@ -206,4 +223,38 @@ export const useAgentStore = create<AgentStore>((set, get) => ({
       });
     }
   },
+
+  showToolOutput: (log: TraceLog) => {
+    // Show tool output in the right panel - only ONE tool output tab at a time
+    const state = get();
+
+    // Determine language based on content
+    let language = 'text';
+    const content = log.output || '';
+
+    // Check if content looks like JSON
+    if (content.trim().startsWith('{') || content.trim().startsWith('[') || content.includes('```json')) {
+      language = 'json';
+    }
+    // Check if content has markdown tables or formatting
+    else if (content.includes('|') && content.includes('---') || content.includes('```')) {
+      language = 'markdown';
+    }
+
+    // Remove any existing tool output tab (only keep one)
+    const otherTabs = state.panelTabs.filter(t => t.id !== 'tool_output');
+
+    // Create/replace the single tool output tab
+    const newTab = {
+      id: 'tool_output',
+      title: log.tool,
+      content: content || 'No output available',
+      language,
+    };
+
+    set({
+      panelTabs: [...otherTabs, newTab],
+      activePanelTab: 'tool_output',
+    });
+  },
 }));

frontend/src/types/agent.ts

@@ -9,14 +9,18 @@ export interface SessionMeta {
   isActive: boolean;
 }
 
+export interface MessageSegment {
+  type: 'text' | 'tools';
+  content?: string;
+  tools?: TraceLog[];
+}
+
 export interface Message {
   id: string;
   role: 'user' | 'assistant' | 'tool';
   content: string;
   timestamp: string;
-  toolName?: string;
-  tool_call_id?: string;
-  trace?: TraceLog[];
+  segments?: MessageSegment[];
   approval?: {
     status: 'pending' | 'approved' | 'rejected';
     batch: ApprovalBatch;
@@ -55,6 +59,9 @@ export interface TraceLog {
   tool: string;
   timestamp: string;
   completed?: boolean;
+  args?: Record<string, unknown>; // Store args for auto-exec jobs
+  output?: string; // Store tool output for display
+  success?: boolean; // Whether the tool call succeeded
 }
 
 export interface User {