{% macro badge_for(ev, view) %}
  {%- set label = ev.badge -%}
  {%- if view == 'transcript' and ev.kind == 'tool_use' and ev.name -%}
    {%- set label = ev.name|upper -%}
  {%- endif -%}
  <span class="badge-row badge-row-{{ ev.kind }}">{{ label }}</span>
{% endmacro %}

{% macro meta_for(ev) %}
  <span class="row-meta">
    {%- if ev.in_tokens or ev.out_tokens -%}
      <span class="meta-tokens">{{ ev.in_tokens|fmt_tokens }} / {{ ev.out_tokens }}</span>
    {%- endif -%}
    {%- if ev.duration_ms -%}
      <span class="meta-duration">{{ ev.duration_ms|fmt_duration }}</span>
    {%- endif -%}
    <span class="meta-ts">{{ ev.ts|fmt_time or (ev.received_at|fmt_time) }}</span>
  </span>
{% endmacro %}

{% macro copyable(content, hl="json") %}
<div class="pre-wrap">
  <button class="copy-btn" type="button">copy</button>
  <pre class="{{ 'json-hl' if hl == 'json' else '' }}">{{ content }}</pre>
</div>
{% endmacro %}

{% macro detail_panel(ev, did) %}
  <div class="detail-pane" id="detail-{{ did }}" hidden>
    <div class="detail-header">
      {{ badge_for(ev, active_tab) }}
      <span class="muted">{{ ev.ts|fmt_time or (ev.received_at|fmt_time) }}</span>
      {% if ev.duration_ms %}<span class="muted">· {{ ev.duration_ms|fmt_duration }}</span>{% endif %}
      {% if ev.in_tokens or ev.out_tokens %}<span class="muted">· {{ ev.in_tokens|fmt_tokens }} in / {{ ev.out_tokens|fmt_tokens or ev.out_tokens }} out</span>{% endif %}
    </div>

    {% if ev.kind == 'tool_use' %}
      <div class="detail-section-title">INPUT</div>
      {{ copyable(ev.input | pretty_json) }}
      {% set result = results_by_id.get(ev.tool_use_id) %}
      {% if result %}
        <div class="detail-section-title {{ 'is-error' if result.is_error else '' }}">
          {{ "ERROR · " if result.is_error else "TOOL RESULT · " }}{{ result.duration_ms|fmt_duration or "—" }}
        </div>
        {{ copyable(result.text, hl="text") }}
      {% endif %}
    {% elif ev.kind == 'tool_result' or ev.kind == 'tool_result_error' %}
      {% if ev.text is defined %}
        {{ copyable(ev.text, hl="text") }}
      {% else %}
        {{ copyable(ev.data | pretty_json) }}
      {% endif %}
    {% elif ev.kind == 'user' or ev.kind == 'assistant' or ev.kind == 'thinking' %}
      {% if ev.text is defined %}
        {{ copyable(ev.text, hl="text") }}
      {% else %}
        {{ copyable(ev.label, hl="text") }}
      {% endif %}
    {% else %}
      <div class="detail-section-title">RAW</div>
      {{ copyable(ev.data | pretty_json) }}
    {% endif %}
  </div>
{% endmacro %}

<div class="session-head">
  <div>
    <h1>Session
      <span class="muted session-id-text">{{ session_id }}</span>
      <button type="button" class="inline-copy-btn" data-copy-value="{{ session_id }}"
              title="Copy session 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 %}
    </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 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 %}

{% if invocation %}
  <details class="session-invocation">
    <summary>
      <span class="muted tools-used-label">Invocation</span>
      {% if invocation.permission_mode %}
        <span class="meta-chip"><span class="muted">permissions</span> {{ invocation.permission_mode }}</span>
      {% endif %}
      {% if invocation.sdk_version %}
        <span class="meta-chip"><span class="muted">sdk</span> {{ invocation.sdk_version }}</span>
      {% endif %}
      {% if invocation.entrypoint %}
        <span class="meta-chip"><span class="muted">entrypoint</span> {{ invocation.entrypoint }}</span>
      {% endif %}
      {% if invocation.mcp_servers %}
        <span class="meta-chip" title="MCP servers loaded at session start"><span class="muted">mcp</span> {{ invocation.mcp_servers | length }}</span>
      {% endif %}
    </summary>
    <div class="session-invocation-body">
      {% if invocation.cwd %}
        <div class="invocation-row"><span class="muted">cwd</span><code>{{ invocation.cwd }}</code></div>
      {% endif %}
      {% if invocation.mcp_servers %}
        <div class="invocation-row">
          <span class="muted">mcp servers</span>
          <div style="display: flex; gap: 6px; flex-wrap: wrap;">
            {% for name in invocation.mcp_servers %}
              <span class="meta-chip">{{ name }}</span>
            {% endfor %}
          </div>
        </div>
        {% if invocation.mcp_instructions %}
          <details style="margin-top: 6px;">
            <summary class="muted" style="font-size: 12px; cursor: pointer;">show MCP instructions</summary>
            {% for mcp in invocation.mcp_instructions %}
              <div class="detail-section-title" style="font-size: 10px;">{{ mcp.name }}</div>
              <div class="pre-wrap"><pre>{{ mcp.preview }}</pre></div>
            {% endfor %}
          </details>
        {% endif %}
      {% endif %}
    </div>
  </details>
{% 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 session.</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 %}