Create frontend/src/components/BackgroundTasks.tsx

frontend/src/components/BackgroundTasks.tsx

@@ -5,12 +5,14 @@ const BackgroundTasks: React.FC = () => {
   const [tasks, setTasks] = useState<string[]>([]);
 
   const pollTasks = async () => {
-    // We need an endpoint to list background tasks. We'll add it to main.py.
-    const res = await axios.get('/api/agent/tasks');
-    setTasks(res.data.tasks || []);
+    try {
+      const res = await axios.get('/api/agent/tasks');
+      setTasks(res.data.tasks || []);
+    } catch (e) {}
   };
 
   useEffect(() => {
+    pollTasks();
     const interval = setInterval(pollTasks, 3000);
     return () => clearInterval(interval);
   }, []);
@@ -20,7 +22,7 @@ const BackgroundTasks: React.FC = () => {
       <div style={{ fontWeight: 600, marginBottom: 8 }}>Background Agents</div>
       {tasks.length === 0 && <div style={{ color: 'var(--text-secondary)', fontSize: 12 }}>No running tasks</div>}
       {tasks.map(task => (
-        <div key={task} style={{ background: 'var(--bg-tertiary)', padding: 4, borderRadius: 4, marginBottom: 4, fontSize: 12 }}>
+        <div key={task} style={{ background: 'var(--bg-tertiary)', padding: '4px 8px', borderRadius: 4, marginBottom: 4, fontSize: 12 }}>
           {task} – running
         </div>
       ))}