gahusb
e6742e06ba
Backend returns {"tasks": [...]} and {"logs": [...]} but TaskTab and
LogTab stored the raw object and called .map on it, throwing
'l.map is not a function' the moment a user opened the Tasks or
Logs tab. Unwrap via Array.isArray check (also covers theoretical
bare-array responses).
Regression test for TaskTab covers all three response shapes:
wrapped object, bare array, and empty.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
46 lines
1.5 KiB
JavaScript
46 lines
1.5 KiB
JavaScript
// 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(Array.isArray(data) ? data : (data?.logs || []));
|
|
});
|
|
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>
|
|
);
|
|
}
|