Function EventRow

studio/src/pages/Events.tsx:416–486

({ event }: EventRowProps)

}

function EventRow({ event }: EventRowProps) {
  const [expanded, setExpanded] = useState(false);

  const eventType = event.event_type || event.type || 'unknown';
  const typeColor = getEventTypeColor(eventType);
  const channelColor = getChannelColor(event.channel);

  return (
    <div
      className={cn(
        'p-2 rounded hover:bg-[var(--color-surface)] cursor-pointer transition-colors',
        expanded && 'bg-[var(--color-surface)]'
      )}
      onClick={() => setExpanded(!expanded)}
    >
      <div className="flex items-center gap-3">
        {/* Expand icon */}
        <span className="text-[var(--color-text-muted)] w-4">
          {expanded ? (
            <ChevronDown className="w-4 h-4" />
          ) : (
            <ChevronRight className="w-4 h-4" />
          )}
        </span>

        {/* Timestamp */}
        <span className="text-[var(--color-text-muted)] text-xs w-20 flex-shrink-0">
          {formatRelativeTime(event.timestamp)}
        </span>

        {/* Channel badge */}
        {event.channel && (
          <span
            className="px-1.5 py-0.5 rounded text-xs flex-shrink-0"
            style={{ backgroundColor: `${channelColor}15`, color: channelColor }}
          >
            {event.channel}
          </span>
        )}

        {/* Event type badge */}
        <span
          className="px-1.5 py-0.5 rounded text-xs flex-shrink-0"
          style={{ backgroundColor: `${typeColor}20`, color: typeColor }}
        >
          {eventType}
        </span>

        {/* Agent ID */}
        {event.agent_id && (
          <span className="text-xs text-[var(--color-text-muted)] flex-shrink-0">
            @{event.agent_id.slice(0, 8)}
          </span>
        )}

        {/* Summary */}
        <span className="text-[var(--color-text-secondary)] truncate">
          {getSummary(event)}