{% for s in sessions %}
<div class="px-3 py-3 cursor-pointer transition-all duration-150
            {% if s.session_id == selected_id %}bg-surface-800 border-l-2 border-accent-400{% else %}border-l-2 border-transparent hover:bg-surface-900 hover:border-surface-700{% endif %}"
     hx-get="/sessions/{{ s.project_path }}/{{ s.session_id }}"
     hx-target="#session-detail"
     hx-swap="innerHTML"
     hx-on::after-request="document.getElementById('session-list-container').dataset.selectedSession = '{{ s.session_id }}'; history.replaceState(null, '', '/?session={{ s.session_id }}');">

  <div class="flex items-center gap-2 mb-1">
    {% if s.is_live %}
      <span class="w-1.5 h-1.5 rounded-full bg-yellow-400 pulse-dot"></span>
      <span class="text-xs font-medium text-yellow-400 uppercase tracking-wider">Live</span>
    {% else %}
      <span class="w-1.5 h-1.5 rounded-full bg-gray-600"></span>
    {% endif %}
    <span class="text-xs text-gray-600 ml-auto font-mono">
      {{ fmt_relative(s.started_at) }}
      {% if s.finished_at %}
        &middot; {{ fmt_duration(s.started_at, s.finished_at) }}
      {% endif %}
    </span>
  </div>

  <div class="text-sm text-gray-300 font-medium truncate">
    {{ s.project_name }}
  </div>

  {% if s.first_prompt %}
  <div class="text-xs text-gray-500 mt-0.5 truncate font-mono">
    {{ s.first_prompt }}
  </div>
  {% endif %}

  <div class="flex items-center gap-2 mt-0.5">
    <span class="text-xs text-gray-600 font-mono">{{ s.session_id[:8] }}</span>
    {% if s.message_count %}
      <span class="text-xs text-gray-600">{{ s.message_count }} msgs</span>
    {% endif %}
  </div>

</div>
{% endfor %}

{% if not sessions %}
<div class="px-5 py-12 text-center">
  <p class="text-gray-600 text-sm">No sessions found</p>
  <p class="text-gray-700 text-xs mt-1 font-mono">Waiting for Claude Code sessions...</p>
</div>
{% endif %}