Create frontend/src/components/BackgroundTasks.tsx

frontend/src/components/BackgroundTasks.tsx

@@ -0,0 +1,33 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+const BackgroundTasks: React.FC = () => {
+  const [tasks, setTasks] = useState<string[]>([]);
+
+  const pollTasks = async () => {
+    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);
+  }, []);
+
+  return (
+    <div style={{ padding: 12 }}>
+      <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: '4px 8px', borderRadius: 4, marginBottom: 4, fontSize: 12 }}>
+          {task} – running
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default BackgroundTasks;