| 451 | /* ────── Recent Activity Feed ────── */ |
| 452 | |
| 453 | function ActivityFeed({ activities, agents }: { activities: any[]; agents: Agent[] }) { |
| 454 | const { t } = useTranslation(); |
| 455 | const agentMap = new Map(agents.map(a => [a.id, a])); |
| 456 | |
| 457 | if (activities.length === 0) { |
| 458 | return ( |
| 459 | <div style={{ textAlign: 'center', padding: '32px', color: 'var(--text-tertiary)', fontSize: '13px' }}> |
| 460 | {t('dashboard.noActivity')} |
| 461 | </div> |
| 462 | ); |
| 463 | } |
| 464 | |
| 465 | return ( |
| 466 | <div style={{ display: 'flex', flexDirection: 'column' }}> |
| 467 | {activities.map((act, i) => { |
| 468 | const agent = agentMap.get(act.agent_id); |
| 469 | return ( |
| 470 | <div key={act.id || i} style={{ |
| 471 | display: 'flex', gap: '12px', padding: '7px 12px', |
| 472 | fontSize: '13px', alignItems: 'flex-start', |
| 473 | }}> |
| 474 | <span style={{ |
| 475 | color: 'var(--text-tertiary)', whiteSpace: 'nowrap', |
| 476 | fontFamily: 'var(--font-mono)', fontSize: '11px', |
| 477 | minWidth: '52px', paddingTop: '2px', |
| 478 | }}> |
| 479 | {timeAgo(act.created_at, t)} |
| 480 | </span> |
| 481 | <span style={{ |
| 482 | fontSize: '11px', padding: '1px 6px', |
| 483 | borderRadius: 'var(--radius-sm)', background: 'var(--bg-tertiary)', |
| 484 | color: 'var(--text-secondary)', whiteSpace: 'nowrap', flexShrink: 0, |
| 485 | fontWeight: 500, |
| 486 | }}> |
| 487 | {agent?.name || act.agent_id?.slice(0, 6)} |
| 488 | </span> |
| 489 | <span style={{ |
| 490 | color: 'var(--text-secondary)', flex: 1, |
| 491 | overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', |
| 492 | }}> |
| 493 | {act.summary} |
| 494 | </span> |
| 495 | </div> |
| 496 | ); |
| 497 | })} |
| 498 | </div> |
| 499 | ); |
| 500 | } |
| 501 | |
| 502 | /* ────── Main Dashboard ────── */ |
| 503 | |