<!-- Session header -->
<div class="border-b border-surface-800 px-6 py-4 bg-surface-950 fade-in">
  <div class="flex items-center justify-between">
    <div>
      <div class="flex items-center gap-3">
        <h2 class="text-lg font-semibold text-gray-100">
          {{ session.project_name }}
        </h2>
        <span class="text-xs text-gray-600 font-mono">{{ session.session_id[:8] }}</span>
      </div>
      <div class="flex items-center gap-4 mt-1 text-xs font-mono text-gray-500">
        <span>{{ fmt_time(session.started_at) }}</span>
        {% if session.finished_at %}
          <span>{{ fmt_duration(session.started_at, session.finished_at) }}</span>
        {% else %}
          <span class="text-yellow-400">
            <span class="inline-block w-1.5 h-1.5 rounded-full bg-yellow-400 pulse-dot mr-1"></span>
            active
          </span>
        {% endif %}
        {% if session.message_count %}
          <span>{{ session.message_count }} messages</span>
        {% endif %}
      </div>
      {% if session.first_prompt %}
      <div class="mt-1.5 text-xs text-gray-400 truncate max-w-2xl">
        {{ session.first_prompt }}
      </div>
      {% endif %}
    </div>
  </div>

  <!-- Filter bar -->
  <div class="flex gap-1 mt-3">
    {% for f in filters %}
    <button
      hx-get="/sessions/{{ session.project_path }}/{{ session.session_id }}?filter={{ f }}"
      hx-target="#session-detail"
      hx-swap="innerHTML"
      class="px-3 py-1 rounded-full text-xs font-medium transition-all duration-150
        {% if f == filter %}
          bg-accent-500/20 text-accent-400 ring-1 ring-accent-500/30
        {% else %}
          text-gray-500 hover:text-gray-300 hover:bg-surface-800
        {% endif %}">
      {{ f | capitalize }}
    </button>
    {% endfor %}
  </div>
</div>

{% if meta %}
<!-- Analytics panel (collapsed by default) -->
<details class="border-b border-surface-800 bg-surface-900/50 fade-in group">
  <summary class="px-6 py-2 cursor-pointer text-xs text-gray-500 hover:text-gray-300 select-none flex items-center gap-2 transition-colors">
    <svg class="w-3 h-3 transition-transform group-open:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
    </svg>
    analytics
    <span class="text-gray-600 font-mono">{{ "{:,}".format(meta.input_tokens + meta.output_tokens) }} tokens / {{ meta.tool_calls }} tools{% if meta.tool_errors %} <span class="text-red-400">({{ meta.tool_errors }} err)</span>{% endif %}</span>
  </summary>
  <div class="px-6 pb-3">
    {% if meta.codeflash %}
    <div class="flex items-center gap-2 mb-2">
      <span class="px-2 py-0.5 rounded text-xs font-medium bg-accent-500/20 text-accent-400 ring-1 ring-accent-500/30">
        codeflash
      </span>
      {% if meta.codeflash.language %}
      <span class="px-2 py-0.5 rounded text-xs font-medium bg-blue-500/20 text-blue-400 ring-1 ring-blue-500/30">
        {{ meta.codeflash.language }}
      </span>
      {% endif %}
      {% if meta.codeflash.optimization_domain %}
      <span class="px-2 py-0.5 rounded text-xs font-medium bg-purple-500/20 text-purple-400 ring-1 ring-purple-500/30">
        {{ meta.codeflash.optimization_domain }}
      </span>
      {% endif %}
      {% if meta.codeflash.has_researcher %}
      <span class="px-1.5 py-0.5 rounded text-xs text-gray-500 bg-surface-800">researcher</span>
      {% endif %}
      {% if meta.codeflash.has_reviewer %}
      <span class="px-1.5 py-0.5 rounded text-xs text-gray-500 bg-surface-800">reviewer</span>
      {% endif %}
      {% if meta.codeflash.has_ci_handler %}
      <span class="px-1.5 py-0.5 rounded text-xs text-gray-500 bg-surface-800">CI</span>
      {% endif %}
      {% if meta.codeflash.has_pr_prep %}
      <span class="px-1.5 py-0.5 rounded text-xs text-gray-500 bg-surface-800">PR prep</span>
      {% endif %}
    </div>
    {% endif %}

    <div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-x-6 gap-y-2 text-xs font-mono">
      <div>
        <span class="text-gray-600">tokens</span>
        <div class="text-gray-300">{{ "{:,}".format(meta.input_tokens) }} in / {{ "{:,}".format(meta.output_tokens) }} out</div>
      </div>
      <div>
        <span class="text-gray-600">tools</span>
        <div class="text-gray-300">{{ meta.tool_calls }} calls
          {% if meta.tool_errors %}<span class="text-red-400">({{ meta.tool_errors }} errors)</span>{% endif %}
        </div>
      </div>
      <div>
        <span class="text-gray-600">messages</span>
        <div class="text-gray-300">{{ meta.user_messages }} user / {{ meta.assistant_messages }} assistant</div>
      </div>
      {% if meta.files_modified %}
      <div>
        <span class="text-gray-600">files</span>
        <div class="text-gray-300">{{ meta.files_modified }} modified <span class="text-green-400">+{{ meta.lines_added }}</span>/<span class="text-red-400">-{{ meta.lines_removed }}</span></div>
      </div>
      {% endif %}
      {% if meta.git_commits %}
      <div>
        <span class="text-gray-600">git</span>
        <div class="text-gray-300">{{ meta.git_commits }} commits{% if meta.git_branch %} on {{ meta.git_branch }}{% endif %}</div>
      </div>
      {% endif %}
      {% if meta.cache_read_tokens %}
      <div>
        <span class="text-gray-600">cache</span>
        <div class="text-gray-300">{{ "{:.0%}".format(meta.cache_hit_rate) }} hit rate</div>
      </div>
      {% endif %}
      {% if meta.compactions %}
      <div>
        <span class="text-gray-600">compactions</span>
        <div class="text-yellow-400">{{ meta.compactions }}</div>
      </div>
      {% endif %}
      {% if meta.thinking_blocks %}
      <div>
        <span class="text-gray-600">thinking</span>
        <div class="text-gray-300">{{ meta.thinking_blocks }} blocks</div>
      </div>
      {% endif %}
      {% if meta.subagents_spawned %}
      <div>
        <span class="text-gray-600">subagents</span>
        <div class="text-gray-300">{{ meta.subagents_spawned }}</div>
      </div>
      {% endif %}
      {% if meta.web_searches or meta.web_fetches %}
      <div>
        <span class="text-gray-600">web</span>
        <div class="text-gray-300">{{ meta.web_searches }} searches / {{ meta.web_fetches }} fetches</div>
      </div>
      {% endif %}
      {% if meta.user_interruptions %}
      <div>
        <span class="text-gray-600">interruptions</span>
        <div class="text-yellow-400">{{ meta.user_interruptions }}</div>
      </div>
      {% endif %}
      {% if meta.permission_mode %}
      <div>
        <span class="text-gray-600">mode</span>
        <div class="text-gray-300">{{ meta.permission_mode }}</div>
      </div>
      {% endif %}
    </div>

    {% if meta.tool_counts %}
    <div class="mt-2 flex flex-wrap gap-1.5">
      {% for tool, count in meta.tool_counts|dictsort(by='value', reverse=true) %}
      {% if loop.index <= 8 %}
      <span class="px-1.5 py-0.5 rounded text-xs font-mono
        {% if tool in ['Edit', 'Write', 'NotebookEdit'] %}text-green-400 bg-green-500/10
        {% elif tool == 'Bash' %}text-orange-400 bg-orange-500/10
        {% elif tool == 'Agent' %}text-purple-400 bg-purple-500/10
        {% elif tool in ['Read', 'Grep', 'Glob'] %}text-blue-400 bg-blue-500/10
        {% else %}text-gray-400 bg-surface-800
        {% endif %}">
        {{ tool }}={{ count }}
      </span>
      {% endif %}
      {% endfor %}
    </div>
    {% endif %}
  </div>
</details>
{% endif %}

<!-- Log stream -->
<div id="log-container"
     data-sse-url="/sessions/{{ session.project_path }}/{{ session.session_id }}/logs?filter={{ filter }}"
     class="flex-1 overflow-y-auto px-4 py-3 font-mono text-sm space-y-0 bg-surface-950">
</div>
