{% macro badge_for(ev, view) %}
  <span class="badge-row badge-row-{{ ev.kind }}">{{ ev.badge }}</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, results=None) %}
  {# When rendering subagent events the caller passes its own
     results_by_id so tool_use → tool_result lookups stay scoped to that
     sub-session instead of grabbing an unrelated parent result. #}
  {% set results_by_id = results if results is not none else results_by_id %}
  <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 %}