{% 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="/ui/agents/{{ agent }}/inbox">{{ agent }}</a>{% endif %}
      {% if item %} · item <a href="/ui/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">
    <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="Estimated cost based on {{ stats.model }} list pricing"><strong>~${{ "%.4f"|format(stats.estimated_cost_usd) }}</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="/ui/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 %}
          <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 %}

{% if tool_usage %}
  <div class="tools-used">
    <span class="muted tools-used-label">Tools used</span>
    {% for t in tool_usage %}
      <button type="button" class="tool-chip" data-tool-name="{{ t.name }}" title="Filter events for {{ t.name }}">
        {{ t.name }} <span class="tool-chip-count">×{{ t.count }}</span>
      </button>
    {% endfor %}
  </div>
{% endif %}

<div class="tabs">
  <a href="?tab=conversation" class="{{ 'active' if active_tab == 'conversation' else '' }}">Conversation</a>
  <a href="?tab=transcript" class="{{ 'active' if active_tab == 'transcript' else '' }}">Transcript</a>
  <a href="?tab=debug" class="{{ 'active' if active_tab == 'debug' else '' }}">Debug ({{ debug | length }})</a>
  {% if active_tab in ['transcript', 'debug'] and event_kinds %}
    <span class="tabs-spacer"></span>
    <details class="filter-dropdown">
      <summary><span>All events</span></summary>
      <div class="filter-dropdown-menu">
        {% for kind in event_kinds %}
          <label>
            <input type="checkbox" value="{{ kind }}">
            <span class="badge-row badge-row-{{ kind }}">{{ kind }}</span>
          </label>
        {% endfor %}
        <div class="filter-dropdown-actions">
          <button data-filter-action="all">All</button>
          <button data-filter-action="clear">Clear</button>
        </div>
      </div>
    </details>
  {% endif %}
</div>

{% if active_tab == "conversation" %}
  {% if conversation %}
    <div class="conversation">
      {% for ev in conversation %}
        <div class="bubble bubble-{{ ev.kind }}">
          <div class="bubble-role">{{ ev.kind }} <span class="muted">· {{ ev.ts|fmt_time }}</span></div>
          <div class="bubble-text">{{ ev.text }}</div>
        </div>
      {% endfor %}
    </div>
  {% else %}
    <p class="muted">No conversation messages in this run.</p>
  {% endif %}

{% else %}
  {% set events = transcript if active_tab == 'transcript' else 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 %}