// AgentCircle — a single agent or tool dot that fans out under an active phase.

function AgentCircle({ agent, i, total, isSelected, onSelect, isMore }) {
  const { React } = window;
  // Lay out in an arc under the phase pill.
  const spread = Math.min(360, total * 42);
  const step   = total > 1 ? spread / (total - 1) : 0;
  const angle  = -spread / 2 + step * i; // degrees, 0 = down
  const r = 76;
  const rad = (angle - 90) * Math.PI / 180;
  const dx = Math.cos(rad + Math.PI / 2) * r;  // fan DOWN
  const dy = Math.sin(rad + Math.PI / 2) * r * 0.55 + 28;

  const label = agent.id === '__more__' ? agent.role : agent.id;
  const shortLabel = agent.id === '__more__' ? '+' + (agent.role.match(/\d+/)?.[0] || '') : agent.id.split('-')[0];

  return (
    <button
      className={`agent-circle ${isSelected ? 'is-selected' : ''} ${isMore ? 'is-more' : ''} kind-${agent.kind}`}
      style={{ transform: `translate(${dx}px, ${dy}px)` }}
      onClick={() => onSelect(agent)}
      title={label}
      data-agent={agent.id}
    >
      <span className="agent-circle-dot" />
      <span className="agent-circle-label">{shortLabel}</span>
    </button>
  );
}
window.AgentCircle = AgentCircle;