From a712a2f43b01f41d63fd2113150029c0750daef2 Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Mon, 27 Apr 2026 08:34:50 +0900
Subject: [PATCH] feat(agent-office): add TaskTab component with expandable
 task history

---
 src/pages/agent-office/components/TaskTab.jsx | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 src/pages/agent-office/components/TaskTab.jsx

diff --git a/src/pages/agent-office/components/TaskTab.jsx b/src/pages/agent-office/components/TaskTab.jsx
new file mode 100644
index 0000000..000dff1
--- /dev/null
+++ b/src/pages/agent-office/components/TaskTab.jsx
@@ -0,0 +1,55 @@
+// src/pages/agent-office/components/TaskTab.jsx
+import { useState, useEffect } from 'react';
+import { getAgentTasks } from '../../../api';
+
+const STATUS_STYLE = {
+  succeeded: { bg: '#065f46', fg: '#34d399' },
+  failed:    { bg: '#7f1d1d', fg: '#fca5a5' },
+  working:   { bg: '#1e3a5f', fg: '#60a5fa' },
+  pending:   { bg: '#92400e', fg: '#fbbf24' },
+  approved:  { bg: '#065f46', fg: '#34d399' },
+  rejected:  { bg: '#7f1d1d', fg: '#fca5a5' }
+};
+
+function formatTime(ts) {
+  if (!ts) return '';
+  const d = new Date(ts);
+  const now = new Date();
+  const isToday = d.toDateString() === now.toDateString();
+  const time = d.toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit' });
+  return isToday ? time : `${d.getMonth() + 1}/${d.getDate()} ${time}`;
+}
+
+export default function TaskTab({ agentId, refreshTrigger }) {
+  const [tasks, setTasks] = useState([]);
+  const [expanded, setExpanded] = useState(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    getAgentTasks(agentId, 20).then(data => {
+      if (!cancelled) setTasks(data || []);
+    });
+    return () => { cancelled = true; };
+  }, [agentId, refreshTrigger]);
+
+  return (
+    <div className="ao-task-tab">
+      {tasks.length === 0 && <div className="ao-empty">No tasks yet</div>}
+      {tasks.map(task => {
+        const style = STATUS_STYLE[task.status] || STATUS_STYLE.pending;
+        return (
+          <div key={task.id} className="ao-task-item" onClick={() => setExpanded(expanded === task.id ? null : task.id)}>
+            <div className="ao-task-header">
+              <span className="ao-task-type">{task.task_type}</span>
+              <span className="ao-task-badge" style={{ background: style.bg, color: style.fg }}>{task.status}</span>
+              <span className="ao-task-time">{formatTime(task.created_at)}</span>
+            </div>
+            {expanded === task.id && task.result_data && (
+              <pre className="ao-task-result">{JSON.stringify(JSON.parse(task.result_data), null, 2)}</pre>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}