Improve job approval UX with tabs, job URL, and message ordering

- Add tabbed panel for switching between Script and Logs views
- Show specific job URL from tool output (not generic jobs page link)
- Fix message ordering so final assistant response appears below approval box
- Persist logs in approval messages so users can access previous job logs
- Add View Script/View Logs buttons on completed approval cards
- Show job status and failure indicators in approval flow
- Panel tabs only clear on new job, not during approval continuation

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/components/Chat/ApprovalFlow.tsx

@@ -1,9 +1,10 @@
 import { useState, useCallback, useEffect } from 'react';
-import { Box, Typography, Button, TextField, IconButton } from '@mui/material';
+import { Box, Typography, Button, TextField, IconButton, Link } 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 LaunchIcon from '@mui/icons-material/Launch';
 import { useAgentStore } from '@/store/agentStore';
 import { useLayoutStore } from '@/store/layoutStore';
 import { useSessionStore } from '@/store/sessionStore';
@@ -14,7 +15,7 @@ interface ApprovalFlowProps {
 }
 
 export default function ApprovalFlow({ message }: ApprovalFlowProps) {
-  const { setPanelContent, updateMessage } = useAgentStore();
+  const { setPanelContent, setPanelTab, setActivePanelTab, clearPanelTabs, updateMessage } = useAgentStore();
   const { setRightPanelOpen, setLeftSidebarOpen } = useLayoutStore();
   const { activeSessionId } = useSessionStore();
   const [currentIndex, setCurrentIndex] = useState(0);
@@ -27,19 +28,45 @@ export default function ApprovalFlow({ message }: ApprovalFlowProps) {
 
   const { batch, status } = approvalData;
 
-  // Extract logs from toolOutput if available
+  // Parse toolOutput to extract job info (URL, status, logs)
   let logsContent = '';
   let showLogsButton = false;
-  
-  if (message.toolOutput && message.toolOutput.includes('**Logs:**')) {
-    const parts = message.toolOutput.split('**Logs:**');
-    if (parts.length > 1) {
+  let jobUrl = '';
+  let jobId = '';
+  let jobStatus = '';
+  let jobFailed = false;
+
+  if (message.toolOutput) {
+    // Extract job URL: **View at:** https://...
+    const urlMatch = message.toolOutput.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]+)/);
+    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 (parts.length > 1) {
         const logsPart = parts[1].trim();
         const codeBlockMatch = logsPart.match(/```([\s\S]*?)```/);
         if (codeBlockMatch) {
-            logsContent = codeBlockMatch[1].trim();
-            showLogsButton = true;
+          logsContent = codeBlockMatch[1].trim();
+          showLogsButton = true;
         }
+      }
     }
   }
 
@@ -125,11 +152,13 @@ export default function ApprovalFlow({ message }: ApprovalFlowProps) {
   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>
+        <Box sx={{ flex: 1 }}>
+          <Typography variant="body2" sx={{ color: 'var(--muted-text)' }}>
+            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>
+        </Box>
       );
     }
     return (
@@ -142,33 +171,60 @@ export default function ApprovalFlow({ message }: ApprovalFlowProps) {
   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
+      // Clear existing tabs and set up script tab (and logs if available)
+      clearPanelTabs();
+      setPanelTab({
+        id: 'script',
+        title: 'Script',
+        content: args.script,
+        language: 'python',
+        parameters: args
+      });
+      // If logs are available (job completed), also add logs tab
+      if (logsContent) {
+        setPanelTab({
+          id: 'logs',
+          title: 'Logs',
+          content: logsContent,
+          language: 'text'
         });
-        setRightPanelOpen(true);
-        setLeftSidebarOpen(false);
+      }
+      setActivePanelTab('script');
+      setRightPanelOpen(true);
+      setLeftSidebarOpen(false);
     } else {
-        setPanelContent({
-            title: `Tool: ${currentTool.tool}`,
-            content: JSON.stringify(args, null, 2),
-            language: 'json',
-            parameters: args
-        });
-        setRightPanelOpen(true);
-        setLeftSidebarOpen(false);
+      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'
+    const args = currentTool.arguments as any;
+    // Set up both tabs so user can switch between script and logs
+    clearPanelTabs();
+    if (currentTool.tool === 'hf_jobs' && args.script) {
+      setPanelTab({
+        id: 'script',
+        title: 'Script',
+        content: args.script,
+        language: 'python',
+        parameters: args
+      });
+    }
+    setPanelTab({
+      id: 'logs',
+      title: 'Logs',
+      content: logsContent,
+      language: 'text'
     });
+    setActivePanelTab('logs');
     setRightPanelOpen(true);
     setLeftSidebarOpen(false);
   };
@@ -221,31 +277,124 @@ 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"
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 0.5,
+                color: 'var(--accent-primary)',
+                fontSize: '0.8rem',
+                textDecoration: 'none',
+                opacity: 0.9,
+                '&:hover': {
+                  opacity: 1,
+                  textDecoration: 'underline',
+                }
+              }}
+            >
+              <LaunchIcon sx={{ fontSize: 14 }} />
+              View job{jobId ? ` (${jobId.substring(0, 8)}...)` : ''} on Hugging Face
+            </Link>
+          ) : (
+            <Link
+              href="https://huggingface.co/settings/jobs"
+              target="_blank"
+              rel="noopener noreferrer"
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 0.5,
+                color: 'var(--muted-text)',
+                fontSize: '0.8rem',
+                textDecoration: 'none',
+                opacity: 0.7,
+                '&:hover': {
+                  opacity: 1,
+                  textDecoration: 'underline',
+                }
+              }}
+            >
+              <LaunchIcon sx={{ fontSize: 14 }} />
+              View all jobs on Hugging Face
+            </Link>
+          )}
+
+          {/* Show job status if available */}
+          {jobStatus && (
+            <Typography
+              variant="caption"
+              sx={{
+                color: jobFailed ? 'var(--accent-red)' : 'var(--accent-green)',
+                fontSize: '0.75rem',
+                fontWeight: 500,
+              }}
+            >
+              Status: {jobStatus}
+            </Typography>
+          )}
+        </Box>
+      )}
+
       {containsPushToHub && (
         <Typography variant="caption" sx={{ color: 'var(--accent-green)', fontSize: '0.75rem', opacity: 0.8, px: 0.5 }}>
           We've detected the result will be pushed to hub.
         </Typography>
       )}
 
-      {showLogsButton && (
-        <Button
-            variant="outlined"
-            size="small"
-            startIcon={<OpenInNewIcon />}
-            onClick={handleViewLogs}
-            sx={{
-                alignSelf: 'flex-start',
+      {/* 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)'
+                  borderColor: 'var(--accent-primary)',
+                  bgcolor: 'rgba(255,255,255,0.03)'
                 }
-            }}
-        >
-            View Logs
-        </Button>
+              }}
+            >
+              View Logs
+            </Button>
+          )}
+        </Box>
       )}
 
       {status === 'pending' && (

frontend/src/components/CodePanel/CodePanel.tsx

@@ -1,9 +1,11 @@
 import { useRef, useEffect, useMemo } from 'react';
-import { Box, Typography, IconButton } from '@mui/material';
+import { Box, Typography, IconButton, Tabs, Tab } 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 { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import { useAgentStore } from '@/store/agentStore';
@@ -11,39 +13,83 @@ import { useLayoutStore } from '@/store/layoutStore';
 import { processLogs } from '@/utils/logProcessor';
 
 export default function CodePanel() {
-  const { panelContent, plan } = useAgentStore();
+  const { panelContent, panelTabs, activePanelTab, setActivePanelTab, plan } = useAgentStore();
   const { setRightPanelOpen } = useLayoutStore();
   const scrollRef = useRef<HTMLDivElement>(null);
 
+  // Get the active tab content, or fall back to panelContent for backwards compatibility
+  const activeTab = panelTabs.find(t => t.id === activePanelTab);
+  const currentContent = activeTab || panelContent;
+
   const displayContent = useMemo(() => {
-    if (!panelContent?.content) return '';
+    if (!currentContent?.content) return '';
     // Apply log processing only for text/logs, not for code/json
-    if (!panelContent.language || panelContent.language === 'text') {
-        return processLogs(panelContent.content);
+    if (!currentContent.language || currentContent.language === 'text') {
+      return processLogs(currentContent.content);
     }
-    return panelContent.content;
-  }, [panelContent?.content, panelContent?.language]);
+    return currentContent.content;
+  }, [currentContent?.content, currentContent?.language]);
 
   useEffect(() => {
-    if (scrollRef.current) {
+    // Auto-scroll only for logs tab
+    if (scrollRef.current && activePanelTab === 'logs') {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }
-  }, [displayContent]);
+  }, [displayContent, activePanelTab]);
+
+  const hasTabs = panelTabs.length > 0;
 
   return (
     <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column', bgcolor: 'var(--panel)' }}>
       {/* Header - Fixed 60px to align */}
-      <Box sx={{ 
-        height: '60px', 
-        display: 'flex', 
-        alignItems: 'center', 
-        justifyContent: 'space-between', 
+      <Box sx={{
+        height: '60px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
         px: 2,
         borderBottom: '1px solid rgba(255,255,255,0.03)'
       }}>
-        <Typography variant="caption" sx={{ fontWeight: 600, color: 'var(--muted-text)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
-          {panelContent?.title || 'Code Panel'}
-        </Typography>
+        {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>
+        ) : (
+          <Typography variant="caption" sx={{ fontWeight: 600, color: 'var(--muted-text)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+            {currentContent?.title || 'Code Panel'}
+          </Typography>
+        )}
         <IconButton size="small" onClick={() => setRightPanelOpen(false)} sx={{ color: 'var(--muted-text)' }}>
           <CloseIcon fontSize="small" />
         </IconButton>
@@ -51,66 +97,66 @@ export default function CodePanel() {
 
       {/* Main Content Area */}
       <Box sx={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
-        {!panelContent ? (
-            <Box sx={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', p: 4 }}>
+        {!currentContent ? (
+          <Box sx={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', p: 4 }}>
             <Typography variant="body2" color="text.secondary" sx={{ opacity: 0.5 }}>
-                NO DATA LOADED
+              NO DATA LOADED
             </Typography>
-            </Box>
+          </Box>
         ) : (
-            <Box sx={{ flex: 1, overflow: 'hidden', p: 2 }}>
-            <Box 
-                ref={scrollRef}
-                className="code-panel"
-                sx={{
-                    background: '#0A0B0C',
-                    borderRadius: 'var(--radius-md)',
-                    padding: '18px',
-                    border: '1px solid rgba(255,255,255,0.03)',
-                    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace',
-                    fontSize: '13px',
-                    lineHeight: 1.55,
-                    height: '100%',
-                    overflow: 'auto',
-                }}
+          <Box sx={{ flex: 1, overflow: 'hidden', p: 2 }}>
+            <Box
+              ref={scrollRef}
+              className="code-panel"
+              sx={{
+                background: '#0A0B0C',
+                borderRadius: 'var(--radius-md)',
+                padding: '18px',
+                border: '1px solid rgba(255,255,255,0.03)',
+                fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace',
+                fontSize: '13px',
+                lineHeight: 1.55,
+                height: '100%',
+                overflow: 'auto',
+              }}
             >
-                {panelContent.content ? (
-                    panelContent.language === 'python' ? (
-                    <SyntaxHighlighter
-                        language="python"
-                        style={vscDarkPlus}
-                        customStyle={{
-                        margin: 0,
-                        padding: 0,
-                        background: 'transparent',
-                        fontSize: '13px',
-                        fontFamily: 'inherit',
-                        }}
-                        wrapLines={true}
-                        wrapLongLines={true}
-                    >
-                        {displayContent}
-                    </SyntaxHighlighter>
-                    ) : (
-                    <Box component="pre" sx={{ 
-                        m: 0, 
-                        fontFamily: 'inherit', 
-                        color: 'var(--text)',
-                        whiteSpace: 'pre-wrap',
-                        wordBreak: 'break-all'
-                    }}>
-                        <code>{displayContent}</code>
-                    </Box>
-                    )
+              {currentContent.content ? (
+                currentContent.language === 'python' ? (
+                  <SyntaxHighlighter
+                    language="python"
+                    style={vscDarkPlus}
+                    customStyle={{
+                      margin: 0,
+                      padding: 0,
+                      background: 'transparent',
+                      fontSize: '13px',
+                      fontFamily: 'inherit',
+                    }}
+                    wrapLines={true}
+                    wrapLongLines={true}
+                  >
+                    {displayContent}
+                  </SyntaxHighlighter>
                 ) : (
-                    <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', opacity: 0.5 }}>
-                    <Typography variant="caption">
-                        NO CONTENT TO DISPLAY
-                    </Typography>
-                    </Box>
-                )}
-            </Box>
+                  <Box component="pre" sx={{
+                    m: 0,
+                    fontFamily: 'inherit',
+                    color: 'var(--text)',
+                    whiteSpace: 'pre-wrap',
+                    wordBreak: 'break-all'
+                  }}>
+                    <code>{displayContent}</code>
+                  </Box>
+                )
+              ) : (
+                <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', opacity: 0.5 }}>
+                  <Typography variant="caption">
+                    NO CONTENT TO DISPLAY
+                  </Typography>
+                </Box>
+              )}
             </Box>
+          </Box>
         )}
       </Box>
 

frontend/src/hooks/useAgentWebSocket.ts

@@ -34,6 +34,9 @@ export function useAgentWebSocket({
     updateTraceLog,
     clearTraceLogs,
     setPanelContent,
+    setPanelTab,
+    setActivePanelTab,
+    clearPanelTabs,
     setPlan,
     setCurrentTurnMessageId,
     updateCurrentTurnTrace,
@@ -58,6 +61,8 @@ export function useAgentWebSocket({
         case 'processing':
           setProcessing(true);
           clearTraceLogs();
+          // Don't clear panel tabs here - they should persist during approval flow
+          // Tabs will be cleared when a new tool_call sets up new content
           setCurrentTurnMessageId(null); // Start a new turn
           break;
 
@@ -115,23 +120,29 @@ export function useAgentWebSocket({
 
           // Auto-expand Right Panel for specific tools
           if (toolName === 'hf_jobs' && (args.operation === 'run' || args.operation === 'scheduled run') && args.script) {
-            setPanelContent({
-              title: 'Compute Job Script',
+            // Clear any existing tabs from previous jobs before setting new script
+            clearPanelTabs();
+            // Use tab system for jobs - add script tab immediately
+            setPanelTab({
+              id: 'script',
+              title: 'Script',
               content: args.script,
-              language: 'python'
+              language: 'python',
+              parameters: args
             });
+            setActivePanelTab('script');
             setRightPanelOpen(true);
             setLeftSidebarOpen(false);
-                    } else if (toolName === 'hf_repo_files' && args.operation === 'upload' && args.content) {
-                      setPanelContent({
-                        title: `File Upload: ${args.path || 'unnamed'} `,
-                        content: args.content,
-                        parameters: args,
-                        language: args.path?.endsWith('.py') ? 'python' : undefined
-                      });
-                      setRightPanelOpen(true);
-                      setLeftSidebarOpen(false);
-                    }
+          } else if (toolName === 'hf_repo_files' && args.operation === 'upload' && args.content) {
+            setPanelContent({
+              title: `File Upload: ${args.path || 'unnamed'}`,
+              content: args.content,
+              parameters: args,
+              language: args.path?.endsWith('.py') ? 'python' : undefined
+            });
+            setRightPanelOpen(true);
+            setLeftSidebarOpen(false);
+          }
 
           console.log('Tool call:', toolName, args);
           break;
@@ -175,29 +186,26 @@ export function useAgentWebSocket({
           const log = (event.data?.log as string) || '';
 
           if (toolName === 'hf_jobs') {
-            const currentPanel = useAgentStore.getState().panelContent;
-            
-            // If we are already showing logs, append
-            // If we are showing "Compute Job Script", overwrite/switch to logs
-            // Otherwise, initialize
-            
-            let newContent = log;
-            if (currentPanel?.title === 'Job Logs') {
-              newContent = currentPanel.content + '\n' + log;
-            } else if (currentPanel?.title === 'Compute Job Script') {
-               // We were showing the script, now logs start.
-               // Maybe we want to clear and start showing logs.
-               newContent = '--- Starting execution ---\n' + log;
-            }
+            const currentTabs = useAgentStore.getState().panelTabs;
+            const logsTab = currentTabs.find(t => t.id === 'logs');
 
-            setPanelContent({
-              title: 'Job Logs',
+            // Append to existing logs tab or create new one
+            const newContent = logsTab
+              ? logsTab.content + '\n' + log
+              : '--- Job execution started ---\n' + log;
+
+            setPanelTab({
+              id: 'logs',
+              title: 'Logs',
               content: newContent,
               language: 'text'
             });
-            
+
+            // Auto-switch to logs tab when logs start streaming
+            setActivePanelTab('logs');
+
             if (!useLayoutStore.getState().isRightPanelOpen) {
-                 setRightPanelOpen(true);
+              setRightPanelOpen(true);
             }
           }
           break;
@@ -219,7 +227,7 @@ export function useAgentWebSocket({
             tool_call_id: string;
           }>;
           const count = (event.data?.count as number) || 0;
-          
+
           // Create a persistent message for the approval request
           const message: Message = {
             id: `msg_approval_${Date.now()}`,
@@ -232,7 +240,10 @@ export function useAgentWebSocket({
             }
           };
           addMessage(sessionId, message);
-          
+
+          // Clear currentTurnMessageId so subsequent assistant_message events create a new message below the approval
+          setCurrentTurnMessageId(null);
+
           // We don't set pendingApprovals in the global store anymore as the message handles the UI
           setPendingApprovals(null);
           setProcessing(false);

frontend/src/store/agentStore.ts

@@ -7,6 +7,14 @@ export interface PlanItem {
   status: 'pending' | 'in_progress' | 'completed';
 }
 
+interface PanelTab {
+  id: string;
+  title: string;
+  content: string;
+  language?: string;
+  parameters?: any;
+}
+
 interface AgentStore {
   // State per session (keyed by session ID)
   messagesBySession: Record<string, Message[]>;
@@ -17,6 +25,8 @@ interface AgentStore {
   error: string | null;
   traceLogs: TraceLog[];
   panelContent: { title: string; content: string; language?: string; parameters?: any } | null;
+  panelTabs: PanelTab[];
+  activePanelTab: string | null;
   plan: PlanItem[];
   currentTurnMessageId: string | null; // Track the current turn's assistant message
 
@@ -34,6 +44,9 @@ interface AgentStore {
   updateTraceLog: (toolName: string, updates: Partial<TraceLog>) => void;
   clearTraceLogs: () => void;
   setPanelContent: (content: { title: string; content: string; language?: string; parameters?: any } | null) => void;
+  setPanelTab: (tab: PanelTab) => void;
+  setActivePanelTab: (tabId: string) => void;
+  clearPanelTabs: () => void;
   setPlan: (plan: PlanItem[]) => void;
   setCurrentTurnMessageId: (id: string | null) => void;
   updateCurrentTurnTrace: (sessionId: string) => void;
@@ -48,6 +61,8 @@ export const useAgentStore = create<AgentStore>((set, get) => ({
   error: null,
   traceLogs: [],
   panelContent: null,
+  panelTabs: [],
+  activePanelTab: null,
   plan: [],
   currentTurnMessageId: null,
 
@@ -139,6 +154,33 @@ export const useAgentStore = create<AgentStore>((set, get) => ({
     set({ panelContent: content });
   },
 
+  setPanelTab: (tab: PanelTab) => {
+    set((state) => {
+      const existingIndex = state.panelTabs.findIndex(t => t.id === tab.id);
+      let newTabs: PanelTab[];
+      if (existingIndex >= 0) {
+        // Update existing tab
+        newTabs = [...state.panelTabs];
+        newTabs[existingIndex] = tab;
+      } else {
+        // Add new tab
+        newTabs = [...state.panelTabs, tab];
+      }
+      return {
+        panelTabs: newTabs,
+        activePanelTab: state.activePanelTab || tab.id, // Auto-select first tab
+      };
+    });
+  },
+
+  setActivePanelTab: (tabId: string) => {
+    set({ activePanelTab: tabId });
+  },
+
+  clearPanelTabs: () => {
+    set({ panelTabs: [], activePanelTab: null });
+  },
+
   setPlan: (plan: PlanItem[]) => {
     set({ plan });
   },