plan tool bottom right

agent/tools/jobs_tool.py

@@ -367,17 +367,48 @@ class HfJobsTool:
 
         for _ in range(max_retries):
             try:
-                # Fetch logs - generator streams logs as they arrive
-                logs_gen = self.api.fetch_job_logs(job_id=job_id, namespace=namespace)
+                # Use a queue to bridge sync generator to async consumer
+                queue = asyncio.Queue()
+                loop = asyncio.get_running_loop()
+
+                def log_producer():
+                    try:
+                        # fetch_job_logs is a blocking sync generator
+                        logs_gen = self.api.fetch_job_logs(job_id=job_id, namespace=namespace)
+                        for line in logs_gen:
+                            # Push line to queue thread-safely
+                            loop.call_soon_threadsafe(queue.put_nowait, line)
+                        # Signal EOF
+                        loop.call_soon_threadsafe(queue.put_nowait, None)
+                    except Exception as e:
+                        # Signal error
+                        loop.call_soon_threadsafe(queue.put_nowait, e)
+
+                # Start producer in a background thread so it doesn't block the event loop
+                producer_future = loop.run_in_executor(None, log_producer)
+
+                # Consume logs from the queue as they arrive
+                while True:
+                    item = await queue.get()
+
+                    # EOF sentinel
+                    if item is None:
+                        break
+
+                    # Error occurred in producer
+                    if isinstance(item, Exception):
+                        raise item
 
-                # Stream logs in real-time
-                for log_line in logs_gen:
+                    # Process log line
+                    log_line = item
                     print("\t" + log_line)
                     if self.log_callback:
                         await self.log_callback(log_line)
                     all_logs.append(log_line)
 
-                # If we get here, streaming completed normally
+                # If we get here, streaming completed normally (EOF received)
+                # Wait for thread to cleanup (should be done)
+                await producer_future
                 break
 
             except (

agent/tools/plan_tool.py

@@ -1,5 +1,6 @@
 from typing import Any, Dict, List
 
+from agent.core.session import Event
 from agent.utils.terminal_display import format_plan_tool_output
 
 from .types import ToolResult
@@ -11,8 +12,8 @@ _current_plan: List[Dict[str, str]] = []
 class PlanTool:
     """Tool for managing a list of todos with status tracking."""
 
-    def __init__(self):
-        pass
+    def __init__(self, session: Any = None):
+        self.session = session
 
     async def execute(self, params: Dict[str, Any]) -> ToolResult:
         """
@@ -56,6 +57,15 @@ class PlanTool:
         # Store the raw todos structure in memory
         _current_plan = todos
 
+        # Emit plan update event if session is available
+        if self.session:
+            await self.session.send_event(
+                Event(
+                    event_type="plan_update",
+                    data={"plan": todos},
+                )
+            )
+
         # Format only for display using terminal_display utility
         formatted_output = format_plan_tool_output(todos)
 
@@ -120,7 +130,9 @@ PLAN_TOOL_SPEC = {
 }
 
 
-async def plan_tool_handler(arguments: Dict[str, Any]) -> tuple[str, bool]:
-    tool = PlanTool()
+async def plan_tool_handler(
+    arguments: Dict[str, Any], session: Any = None
+) -> tuple[str, bool]:
+    tool = PlanTool(session=session)
     result = await tool.execute(arguments)
     return result["formatted"], not result.get("isError", False)

frontend/src/components/CodePanel/CodePanel.tsx

@@ -1,12 +1,15 @@
-import { Box, Typography, IconButton } from '@mui/material';
+import { Box, Typography, IconButton, Checkbox } 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 { 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';
 
 export default function CodePanel() {
-  const { panelContent } = useAgentStore();
+  const { panelContent, plan } = useAgentStore();
   const { setRightPanelOpen } = useLayoutStore();
 
   return (
@@ -28,64 +31,107 @@ export default function CodePanel() {
         </IconButton>
       </Box>
 
-      {!panelContent ? (
-        <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
-          </Typography>
-        </Box>
-      ) : (
-        <Box sx={{ flex: 1, overflow: 'auto', p: 2 }}>
-          <Box 
-            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',
+      {/* 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 }}>
+            <Typography variant="body2" color="text.secondary" sx={{ opacity: 0.5 }}>
+                NO DATA LOADED
+            </Typography>
+            </Box>
+        ) : (
+            <Box sx={{ flex: 1, overflow: 'auto', p: 2 }}>
+            <Box 
+                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',
-                    fontFamily: 'inherit',
-                    }}
-                    wrapLines={true}
-                    wrapLongLines={true}
-                >
-                    {panelContent.content}
-                </SyntaxHighlighter>
+                    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}
+                    >
+                        {panelContent.content}
+                    </SyntaxHighlighter>
+                    ) : (
+                    <Box component="pre" sx={{ 
+                        m: 0, 
+                        fontFamily: 'inherit', 
+                        color: 'var(--text)',
+                        whiteSpace: 'pre-wrap',
+                        wordBreak: 'break-all'
+                    }}>
+                        <code>{panelContent.content}</code>
+                    </Box>
+                    )
                 ) : (
-                <Box component="pre" sx={{ 
-                    m: 0, 
-                    fontFamily: 'inherit', 
-                    color: 'var(--text)',
-                    whiteSpace: 'pre-wrap',
-                    wordBreak: 'break-all'
-                }}>
-                    <code>{panelContent.content}</code>
-                </Box>
-                )
-            ) : (
-                <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', opacity: 0.5 }}>
-                <Typography variant="caption">
-                    NO CONTENT TO DISPLAY
+                    <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>
+
+      {/* Plan Display at Bottom */}
+      {plan && plan.length > 0 && (
+        <Box sx={{ 
+            borderTop: '1px solid rgba(255,255,255,0.03)',
+            bgcolor: 'rgba(0,0,0,0.2)',
+            maxHeight: '30%',
+            display: 'flex',
+            flexDirection: 'column'
+        }}>
+            <Box sx={{ p: 1.5, borderBottom: '1px solid rgba(255,255,255,0.03)', display: 'flex', alignItems: 'center', gap: 1 }}>
+                <Typography variant="caption" sx={{ fontWeight: 600, color: 'var(--muted-text)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+                    CURRENT PLAN
                 </Typography>
-                </Box>
-            )}
-          </Box>
+            </Box>
+            <Box sx={{ p: 2, overflow: 'auto', display: 'flex', flexDirection: 'column', gap: 1 }}>
+                {plan.map((item) => (
+                    <Box key={item.id} sx={{ display: 'flex', alignItems: 'flex-start', gap: 1.5 }}>
+                        <Box sx={{ mt: 0.2 }}>
+                            {item.status === 'completed' && <CheckCircleIcon sx={{ fontSize: 16, color: 'var(--accent-green)' }} />}
+                            {item.status === 'in_progress' && <PlayCircleOutlineIcon sx={{ fontSize: 16, color: 'var(--accent-yellow)' }} />}
+                            {item.status === 'pending' && <RadioButtonUncheckedIcon sx={{ fontSize: 16, color: 'var(--muted-text)', opacity: 0.5 }} />}
+                        </Box>
+                        <Typography 
+                            variant="body2" 
+                            sx={{ 
+                                fontSize: '13px', 
+                                fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, monospace',
+                                color: item.status === 'completed' ? 'var(--muted-text)' : 'var(--text)',
+                                textDecoration: item.status === 'completed' ? 'line-through' : 'none',
+                                opacity: item.status === 'pending' ? 0.7 : 1
+                            }}
+                        >
+                            {item.content}
+                        </Typography>
+                    </Box>
+                ))}
+            </Box>
         </Box>
       )}
     </Box>

frontend/src/hooks/useAgentWebSocket.ts

@@ -32,6 +32,7 @@ export function useAgentWebSocket({
     addTraceLog,
     clearTraceLogs,
     setPanelContent,
+    setPlan,
     traceLogs,
   } = useAgentStore();
 
@@ -148,6 +149,15 @@ export function useAgentWebSocket({
           break;
         }
 
+        case 'plan_update': {
+          const plan = (event.data?.plan as any[]) || [];
+          setPlan(plan);
+          if (!useLayoutStore.getState().isRightPanelOpen) {
+            setRightPanelOpen(true);
+          }
+          break;
+        }
+
         case 'approval_required': {
           const tools = event.data?.tools as Array<{
             tool: string;

frontend/src/store/agentStore.ts

@@ -1,6 +1,12 @@
 import { create } from 'zustand';
 import type { Message, ApprovalBatch, User, TraceLog } from '@/types/agent';
 
+export interface PlanItem {
+  id: string;
+  content: string;
+  status: 'pending' | 'in_progress' | 'completed';
+}
+
 interface AgentStore {
   // State per session (keyed by session ID)
   messagesBySession: Record<string, Message[]>;
@@ -11,6 +17,7 @@ interface AgentStore {
   error: string | null;
   traceLogs: TraceLog[];
   panelContent: { title: string; content: string; language?: string; parameters?: any } | null;
+  plan: PlanItem[];
 
   // Actions
   addMessage: (sessionId: string, message: Message) => void;
@@ -24,6 +31,7 @@ interface AgentStore {
   addTraceLog: (log: TraceLog) => void;
   clearTraceLogs: () => void;
   setPanelContent: (content: { title: string; content: string; language?: string; parameters?: any } | null) => void;
+  setPlan: (plan: PlanItem[]) => void;
 }
 
 export const useAgentStore = create<AgentStore>((set, get) => ({
@@ -35,6 +43,7 @@ export const useAgentStore = create<AgentStore>((set, get) => ({
   error: null,
   traceLogs: [],
   panelContent: null,
+  plan: [],
 
   addMessage: (sessionId: string, message: Message) => {
     set((state) => {
@@ -94,4 +103,8 @@ export const useAgentStore = create<AgentStore>((set, get) => ({
   setPanelContent: (content) => {
     set({ panelContent: content });
   },
+
+  setPlan: (plan: PlanItem[]) => {
+    set({ plan });
+  },
 }));

frontend/src/types/events.ts

@@ -15,7 +15,8 @@ export type EventType =
   | 'error'
   | 'shutdown'
   | 'interrupted'
-  | 'undo_complete';
+  | 'undo_complete'
+  | 'plan_update';
 
 export interface AgentEvent {
   event_type: EventType;
@@ -50,6 +51,10 @@ export interface ToolLogEventData {
   log: string;
 }
 
+export interface PlanUpdateEventData {
+  plan: Array<{ id: string; content: string; status: 'pending' | 'in_progress' | 'completed' }>;
+}
+
 export interface ApprovalRequiredEventData {
   tools: ApprovalToolItem[];
   count: number;