cameleer-server/ui/src/pages/AgentHealth/AgentHealth.tsx

import { useMemo } from 'react';
import { useParams, useNavigate } from 'react-router';
import {
  StatCard, StatusDot, Badge, MonoText,
  GroupCard, EventFeed,
} from '@cameleer/design-system';
import { useAgents, useAgentEvents } from '../../api/queries/agents';
import { useRouteCatalog } from '../../api/queries/catalog';

export default function AgentHealth() {
  const { appId } = useParams();
  const navigate = useNavigate();
  const { data: agents } = useAgents(undefined, appId);
  const { data: catalog } = useRouteCatalog();
  const { data: events } = useAgentEvents(appId);

  const agentsByApp = useMemo(() => {
    const map: Record<string, any[]> = {};
    (agents || []).forEach((a: any) => {
      const g = a.group;
      if (!map[g]) map[g] = [];
      map[g].push(a);
    });
    return map;
  }, [agents]);

  const totalAgents = agents?.length ?? 0;
  const liveCount = (agents || []).filter((a: any) => a.status === 'LIVE').length;
  const staleCount = (agents || []).filter((a: any) => a.status === 'STALE').length;
  const deadCount = (agents || []).filter((a: any) => a.status === 'DEAD').length;

  const feedEvents = useMemo(() =>
    (events || []).map((e: any) => ({
      id: String(e.id),
      severity: e.eventType === 'WENT_DEAD' ? 'error' as const
        : e.eventType === 'WENT_STALE' ? 'warning' as const
        : e.eventType === 'RECOVERED' ? 'success' as const
        : 'running' as const,
      message: `${e.agentId}: ${e.eventType}${e.detail ? ' — ' + e.detail : ''}`,
      timestamp: new Date(e.timestamp),
    })),
    [events],
  );

  const apps = appId ? { [appId]: agentsByApp[appId] || [] } : agentsByApp;

  return (
    <div>
      <div style={{ display: 'flex', gap: '1rem', marginBottom: '1.5rem', flexWrap: 'wrap' }}>
        <StatCard label="Total Agents" value={totalAgents} />
        <StatCard label="Live" value={liveCount} accent="success" />
        <StatCard label="Stale" value={staleCount} accent="warning" />
        <StatCard label="Dead" value={deadCount} accent="error" />
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(400px, 1fr))', gap: '1rem', marginBottom: '1.5rem' }}>
        {Object.entries(apps).map(([group, groupAgents]) => (
          <GroupCard
            key={group}
            title={group}
            headerRight={<Badge label={`${groupAgents?.length ?? 0} instances`} />}
            accent={
              groupAgents?.some((a: any) => a.status === 'DEAD') ? 'error'
                : groupAgents?.some((a: any) => a.status === 'STALE') ? 'warning'
                : 'success'
            }
            onClick={() => navigate(`/agents/${group}`)}
          >
            {(groupAgents || []).map((agent: any) => (
              <div
                key={agent.id}
                style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', padding: '0.5rem 0', cursor: 'pointer' }}
                onClick={(e) => { e.stopPropagation(); navigate(`/agents/${group}/${agent.id}`); }}
              >
                <StatusDot variant={agent.status === 'LIVE' ? 'live' : agent.status === 'STALE' ? 'stale' : 'dead'} />
                <MonoText size="sm">{agent.name}</MonoText>
                <Badge label={agent.status} color={agent.status === 'LIVE' ? 'success' : agent.status === 'STALE' ? 'warning' : 'error'} />
                {agent.tps > 0 && <span style={{ marginLeft: 'auto', fontSize: '0.75rem', color: 'var(--text-tertiary)' }}>{agent.tps.toFixed(1)} tps</span>}
              </div>
            ))}
          </GroupCard>
        ))}
      </div>

      {feedEvents.length > 0 && (
        <div>
          <h3 style={{ marginBottom: '0.75rem' }}>Event Log</h3>
          <EventFeed events={feedEvents} maxItems={100} />
        </div>
      )}
    </div>
  );
}