{% for agent in agents %}
<button
    data-open-agent="{{ agent.name }}"
    data-agent-status="{{ agent.status }}"
    data-session-id="{{ agent.session_id or '' }}"
    class="sidebar-agent w-full flex items-center gap-2 px-3 py-2 text-left cursor-pointer
        hover:bg-gray-100 dark:hover:bg-gray-800/60 transition-colors"
    data-agent-state="{{ agent.agent_state or 'idle' }}"
    title="{{ agent.name }} — {{ agent.agent_state or agent.status }}"
>
    <span class="relative shrink-0">
        <span class="block w-2 h-2 rounded-full status-{{ agent.agent_state or agent.status }}"></span>
        {% if agent.unread > 0 %}
        <span class="absolute -top-1 -right-1.5 min-w-[14px] h-[14px] rounded-full bg-blue-500 text-white text-[9px] font-bold flex items-center justify-center px-0.5">{{ agent.unread }}</span>
        {% endif %}
    </span>
    <span class="min-w-0 flex-1 sidebar-text">
        <span class="text-sm font-mono block truncate">{{ agent.name }}</span>
    </span>
    {% if agent.session_id %}
    <span class="text-[10px] text-gray-400 dark:text-gray-600 shrink-0 sidebar-text" title="Terminal available">&#9638;</span>
    {% endif %}
</button>
{% else %}
<div class="px-3 py-8 text-center sidebar-text">
    <p class="text-xs text-gray-400 dark:text-gray-600">No agents</p>
    <p class="text-[10px] text-gray-400/60 dark:text-gray-700 mt-1.5 leading-relaxed">
        Launch a session from<br>
        the dashboard to begin
    </p>
</div>
{% endfor %}