{% from "_event_macros.html" import badge_for, meta_for, copyable, detail_panel with context %}

<div class="session-head">
  <div>
    <h1>Run
      <span class="muted session-id-text">{{ run_id }}</span>
      <button type="button" class="inline-copy-btn" data-copy-value="{{ run_id }}"
              title="Copy run id">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"
             stroke-linecap="round" stroke-linejoin="round"
             width="13" height="13" aria-hidden="true">
          <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
        </svg>
      </button>
    </h1>
    <div class="session-sub muted">
      {% if agent %}<a href="/agents/{{ agent }}/inbox">{{ agent }}</a>{% endif %}
      {% if item %} · item <a href="/agents/{{ agent }}/inbox">#{{ item.id }}</a>
        <span class="badge badge-{{ item.status.value }}">{{ item.status.value }}</span>
      {% endif %}
      · {{ sub_sessions | length }} session{{ '' if sub_sessions | length == 1 else 's' }}
    </div>
  </div>
  <div class="session-stats">
    {% if stats.model %}
      <span title="Model used by Claude during this run"><strong>{{ stats.model }}</strong></span>
    {% endif %}
    <span><strong>{{ stats.turns }}</strong> turns</span>
    <span><strong>{{ stats.wall_ms|fmt_duration or '—' }}</strong></span>
    <span><strong>{{ stats.input_tokens|fmt_tokens or '0' }}</strong> in / <strong>{{ stats.output_tokens|fmt_tokens or '0' }}</strong> out</span>
    {% if stats.estimated_cost_usd is not none %}
      <span title="{% if stats.cost_source == 'reported' %}Cost reported by Claude SDK{% else %}Estimated cost based on {{ stats.model }} list pricing{% endif %}"><strong>{{ stats.estimated_cost_usd|fmt_cost }}</strong></span>
    {% endif %}
    <span><strong>{{ stats.raw_count }}</strong> lines</span>
  </div>
</div>

{% if sub_sessions %}
  <details class="session-invocation" open>
    <summary>
      <span class="muted tools-used-label">Sessions in this run</span>
      <span class="meta-chip">{{ sub_sessions | length }}</span>
    </summary>
    <div class="session-invocation-body">
      {% for s in sub_sessions %}
        <div class="invocation-row" style="align-items: center;">
          <a href="/sessions/{{ s.session_id }}" class="session-link" style="font-family: monospace;">
            {{ s.session_id[:8] }}…{{ s.session_id[-4:] }}
          </a>
          {% if s.is_phase_only %}
            <span class="meta-chip" title="Synthetic session for non-Claude phase events">phase</span>
          {% endif %}
          {% if s.ai_title %}
            <span class="session-row-title" title="AI-generated session title">{{ s.ai_title }}</span>
          {% endif %}
          <span class="muted">{{ s.event_count }} event{{ '' if s.event_count == 1 else 's' }}</span>
          <span class="muted">·</span>
          <span class="muted">{{ s.first_seen | fmt_time }} → {{ s.last_seen | fmt_time }}</span>
        </div>
      {% endfor %}
    </div>
  </details>
{% endif %}

{# Tools-used chips moved into the filter dropdown next to Events
   (see the .tabs row below) — same pattern as _session_body.html. #}

<div class="tabs">
  <a href="?tab=conversation" class="{{ 'active' if active_tab == 'conversation' else '' }}">Conversation</a>
  <a href="?tab=debug" class="{{ 'active' if active_tab == 'debug' else '' }}">Debug ({{ debug | length }})</a>
  {% if active_tab == 'debug' %}
    <span class="tabs-spacer"></span>
    {% if tool_usage %}
      <details class="filter-dropdown" data-filter="tools">
        <summary><span>All tools</span></summary>
        <div class="filter-dropdown-menu">
          {% for t in tool_usage %}
            <label>
              <span>{{ t.name }} <span class="tool-chip-count">×{{ t.count }}</span></span>
              <span class="toggle-pill">
                <input type="checkbox" value="{{ t.name }}">
                <span class="toggle-pill-track"></span>
              </span>
            </label>
          {% endfor %}
          <div class="filter-dropdown-actions">
            <button data-filter-action="tools-all">All</button>
            <button data-filter-action="tools-clear">Clear</button>
          </div>
        </div>
      </details>
    {% endif %}
    {% if event_kinds %}
      <details class="filter-dropdown" data-filter="kinds">
        <summary><span>All events</span></summary>
        <div class="filter-dropdown-menu">
          {% for kind in event_kinds %}
            <label>
              <span class="badge-row badge-row-{{ kind }}">{{ kind }}</span>
              <span class="toggle-pill">
                <input type="checkbox" value="{{ kind }}">
                <span class="toggle-pill-track"></span>
              </span>
            </label>
          {% endfor %}
          <div class="filter-dropdown-actions">
            <button data-filter-action="kinds-all">All</button>
            <button data-filter-action="kinds-clear">Clear</button>
          </div>
        </div>
      </details>
    {% endif %}
  {% endif %}
</div>

{% if active_tab == "conversation" %}
  {% if conversation %}
    <div class="conversation">
      {% for ev in conversation %}
        <div class="bubble bubble-{{ ev.kind }}" aria-label="{{ ev.kind }}">
          {% if ev.kind == 'thinking' %}
            <div class="bubble-thinking-label muted">Thinking</div>
          {% endif %}
          <div class="bubble-text markdown-body">{{ ev.text|markdown }}</div>
          {% if ev.ts and ev.kind != 'thinking' %}<div class="bubble-time muted">{{ ev.ts|fmt_hm }}</div>{% endif %}
        </div>
      {% endfor %}
    </div>
  {% else %}
    <p class="muted">No conversation messages in this run.</p>
  {% endif %}

{% else %}
  {% set events = debug %}
  {% if events %}
    <div class="session-body">
      <div class="event-list">
        {% for ev in events %}
          {% set did = loop.index0 %}
          <div class="row" data-detail-id="detail-{{ did }}" data-event-kind="{{ ev.kind }}"
               {% if ev.tool_label %}data-tool-name="{{ ev.tool_label }}"{% endif %}>
            {{ badge_for(ev, active_tab) }}
            <span class="row-content">{{ ev.label }}</span>
            {{ meta_for(ev) }}
          </div>
        {% endfor %}
      </div>
      <div class="event-detail" id="event-detail">
        <div class="detail-empty muted">Select an event to inspect its data. <br><br><span style="font-size: 11px;">Tip: use <kbd>j</kbd> / <kbd>k</kbd> to navigate, <kbd>Esc</kbd> to close.</span></div>
        {% for ev in events %}
          {{ detail_panel(ev, loop.index0) }}
        {% endfor %}
      </div>
    </div>
  {% else %}
    <p class="muted">No events in this view.</p>
  {% endif %}
{% endif %}