61 lines
2.4 KiB
JavaScript
61 lines
2.4 KiB
JavaScript
// src/pages/agent-office/components/ActivityItem.jsx
|
|
import { AGENT_META } from '../constants.js';
|
|
|
|
const STATUS_STYLE = {
|
|
succeeded: { bg: '#065f46', fg: '#34d399', label: '✓ 완료' },
|
|
failed: { bg: '#7f1d1d', fg: '#fca5a5', label: '✗ 실패' },
|
|
working: { bg: '#1e3a5f', fg: '#60a5fa', label: '⏳ 진행' },
|
|
pending: { bg: '#92400e', fg: '#fbbf24', label: '⏳ 대기' },
|
|
};
|
|
|
|
const LEVEL_STYLE = {
|
|
error: { icon: '❌', cls: 'level-error' },
|
|
warning: { icon: '⚠️', cls: 'level-warning' },
|
|
info: { icon: '·', cls: 'level-info' },
|
|
};
|
|
|
|
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 ActivityItem({ item, onSelectAgent }) {
|
|
const meta = AGENT_META[item.agent_id];
|
|
const color = meta?.color || '#6b7280';
|
|
const name = meta?.displayName || item.agent_id;
|
|
const isTask = item.type === 'task';
|
|
const status = STATUS_STYLE[item.status] || STATUS_STYLE.pending;
|
|
const level = LEVEL_STYLE[item.level] || LEVEL_STYLE.info;
|
|
const highlight = isTask && (item.status === 'pending' || item.status === 'working');
|
|
|
|
return (
|
|
<div
|
|
className={`ao-activity-item ${isTask ? 'is-task' : 'is-log'} ${highlight ? 'is-highlight' : ''}`}
|
|
onClick={() => onSelectAgent(item.agent_id)}
|
|
role="button"
|
|
tabIndex={0}
|
|
>
|
|
<span className="ao-activity-dot" style={{ background: color }} aria-hidden="true" />
|
|
<div className="ao-activity-body">
|
|
<div className="ao-activity-line">
|
|
<span className="ao-activity-agent" style={{ color }}>{name}</span>
|
|
{isTask
|
|
? <span className="ao-activity-badge" style={{ background: status.bg, color: status.fg }}>{status.label}</span>
|
|
: <span className={`ao-activity-level ${level.cls}`}>{level.icon}</span>}
|
|
</div>
|
|
<div className="ao-activity-msg">{item.message}</div>
|
|
</div>
|
|
<div className="ao-activity-meta">
|
|
<span className="ao-activity-time">{formatTime(item.created_at)}</span>
|
|
{isTask && item.duration_seconds != null && (
|
|
<span className="ao-activity-dur">{item.duration_seconds}s</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|