<!-- #region AgentChat.ConnectionIndicator [C:1] [TYPE Component] [SEMANTICS agent,connection,indicator,ui] -->
<!-- @ingroup AgentChat -->
<!-- @BRIEF Green/red dot for agent connection status. -->
<!-- @RELATION BINDS_TO -> AgentChat.Model -->
<!-- @UX_STATE connected → bg-success w-2 h-2 rounded-full -->
<!-- @UX_STATE disconnected → bg-destructive w-2 h-2 rounded-full -->
<!-- @UX_STATE reconnecting → bg-warning w-2 h-2 rounded-full animate-pulse -->
<script lang="ts">
  let {
    color = "destructive",
    title = "",
  }: {
    color: "success" | "warning" | "destructive";
    title?: string;
  } = $props();
</script>

<span
  class="w-2 h-2 rounded-full inline-block shrink-0
    {color === 'success' ? 'bg-success' : color === 'warning' ? 'bg-warning animate-pulse' : 'bg-destructive'}"
  title={title}
  role="status"
  aria-label={title}
></span>
<!-- #endregion AgentChat.ConnectionIndicator -->
