{% 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>
  {# `json-maybe` on text blocks: the tree renders only when JSON.parse
     succeeds, so tool_result output that happens to be JSON gets the
     collapsible view while plain prose stays untouched. #}
  <pre class="{{ 'json-hl' if hl == 'json' else 'json-maybe' }}">{{ 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' %}
      {% if ev.name == 'TodoWrite' and ev.input.todos is iterable %}
        <div class="detail-section-title">TODOS</div>
        <ul class="todo-list">
          {% for t in ev.input.todos %}
            {% set status = t.status or 'pending' %}
            <li class="todo-item todo-{{ status }}">
              <span class="todo-icon" aria-hidden="true">
                {%- if status == 'completed' -%}☑{%- elif status == 'in_progress' -%}◐{%- else -%}☐{%- endif -%}
              </span>
              <span class="todo-text">{{ (t.activeForm if status == 'in_progress' else t.content) or t.content }}</span>
            </li>
          {% endfor %}
        </ul>
        <details class="todo-raw">
          <summary class="muted" style="font-size: 11px; cursor: pointer;">show raw input</summary>
          {{ copyable(ev.input | pretty_json) }}
        </details>
      {% else %}
        <div class="detail-section-title">INPUT</div>
        {{ copyable(ev.input | pretty_json) }}
      {% endif %}
      {% 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 %}
    {% elif ev.kind == 'attachment' %}
      {% set sub = ev.attachment_subtype %}
      {% set att = ev.attachment %}
      <div class="detail-section-title">{{ sub }}</div>

      {% if sub == 'mcp_instructions_delta' %}
        {% if att.addedNames %}
          <div class="muted" style="font-size: 11px; margin-top: 4px;">added servers</div>
          <div class="page-head-meta" style="margin: 4px 0 8px;">
            {% for n in att.addedNames %}<span class="meta-chip">{{ n }}</span>{% endfor %}
          </div>
        {% endif %}
        {% if att.removedNames %}
          <div class="muted" style="font-size: 11px;">removed servers</div>
          <div class="page-head-meta" style="margin: 4px 0 8px;">
            {% for n in att.removedNames %}<span class="meta-chip" style="color: var(--error);">{{ n }}</span>{% endfor %}
          </div>
        {% endif %}
        {% if att.addedBlocks %}
          <details style="margin-top: 6px;">
            <summary class="muted" style="font-size: 12px; cursor: pointer;">show instructions</summary>
            {% for block in att.addedBlocks %}
              <div class="detail-section-title" style="font-size: 10px;">{{ att.addedNames[loop.index0] if att.addedNames and att.addedNames | length > loop.index0 else 'server-' ~ loop.index }}</div>
              <div class="pre-wrap"><pre>{{ block }}</pre></div>
            {% endfor %}
          </details>
        {% endif %}

      {% elif sub == 'deferred_tools_delta' %}
        {% if att.addedNames %}
          <div class="muted" style="font-size: 11px;">added ({{ att.addedNames | length }})</div>
          <div class="page-head-meta" style="margin: 4px 0 8px;">
            {% for n in att.addedNames %}<span class="meta-chip" style="color: var(--success);">{{ n }}</span>{% endfor %}
          </div>
        {% endif %}
        {% if att.removedNames %}
          <div class="muted" style="font-size: 11px;">removed ({{ att.removedNames | length }})</div>
          <div class="page-head-meta" style="margin: 4px 0 8px;">
            {% for n in att.removedNames %}<span class="meta-chip" style="color: var(--error);">{{ n }}</span>{% endfor %}
          </div>
        {% endif %}

      {% elif sub == 'skill_listing' %}
        <div class="muted" style="font-size: 12px; margin-bottom: 6px;">
          {{ att.skillCount or 0 }} skills{% if att.isInitial %} · initial listing{% endif %}
        </div>
        {% if att.content %}
          <div class="pre-wrap"><button class="copy-btn" type="button">copy</button><pre>{{ att.content }}</pre></div>
        {% endif %}

      {% elif sub == 'command_permissions' %}
        {% if att.allowedTools %}
          <div class="muted" style="font-size: 11px;">{{ att.allowedTools | length }} allowed</div>
          <div class="page-head-meta" style="margin: 4px 0;">
            {% for t in att.allowedTools %}<span class="meta-chip">{{ t }}</span>{% endfor %}
          </div>
        {% else %}
          <div class="muted" style="font-size: 12px;">no tools allowed yet</div>
        {% endif %}

      {% elif sub == 'todo_reminder' %}
        <div class="muted" style="font-size: 12px;">{{ att.itemCount or 0 }} items at this point</div>
        {% if att.content %}
          <div class="pre-wrap"><button class="copy-btn" type="button">copy</button><pre class="json-hl">{{ att.content | pretty_json }}</pre></div>
        {% endif %}

      {% elif sub == 'structured_output' %}
        <div class="pre-wrap"><button class="copy-btn" type="button">copy</button><pre class="json-hl">{{ att.data | pretty_json }}</pre></div>

      {% else %}
        <div class="pre-wrap"><button class="copy-btn" type="button">copy</button><pre class="json-hl">{{ att | pretty_json }}</pre></div>
      {% 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 %}