From 4c930c2cf819648a81e8a78310363d7610ef0d7b Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Mon, 27 Apr 2026 08:34:56 +0900
Subject: [PATCH] feat(agent-office): add LogTab with auto-scroll and level
 coloring

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

diff --git a/src/pages/agent-office/components/LogTab.jsx b/src/pages/agent-office/components/LogTab.jsx
new file mode 100644
index 0000000..447c180
--- /dev/null
+++ b/src/pages/agent-office/components/LogTab.jsx
@@ -0,0 +1,45 @@
+// src/pages/agent-office/components/LogTab.jsx
+import { useState, useEffect, useRef } from 'react';
+import { getAgentLogs } from '../../../api';
+
+const LEVEL_STYLE = {
+  info:    { color: '#60a5fa' },
+  warning: { color: '#fbbf24' },
+  error:   { color: '#ef4444' }
+};
+
+export default function LogTab({ agentId, refreshTrigger }) {
+  const [logs, setLogs] = useState([]);
+  const scrollRef = useRef(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    getAgentLogs(agentId, 50).then(data => {
+      if (!cancelled) setLogs(data || []);
+    });
+    return () => { cancelled = true; };
+  }, [agentId, refreshTrigger]);
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [logs]);
+
+  return (
+    <div className="ao-log-tab" ref={scrollRef}>
+      {logs.length === 0 && <div className="ao-empty">No logs yet</div>}
+      {logs.map((log, i) => {
+        const style = LEVEL_STYLE[log.level] || LEVEL_STYLE.info;
+        const time = new Date(log.created_at).toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+        return (
+          <div key={log.id || i} className="ao-log-item">
+            <span className="ao-log-time">{time}</span>
+            <span className="ao-log-level" style={style}>[{log.level}]</span>
+            <span className="ao-log-msg">{log.message}</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}