{% from '_pagination.html' import pager %}
{# Render a potentially long text body with an Alpine-driven collapse wrapper.
   When ``needs_collapse`` is false the body renders as a plain <pre>; when
   true, a single <pre> toggles the ``msg-text-clamp`` class and a meta/banner
   line exposes line + char counts. ``extra_class`` appends modifiers like
   ``msg-text-human`` / ``msg-text-error``. Inner Alpine scope uses
   ``expanded`` (not ``open``) to avoid shadowing the outer tool-call scope. #}
{% macro clamp_body(text, needs_collapse, line_count, char_count, extra_class='') %}
    {% if needs_collapse %}
    <div x-data="{ expanded: false }">
        <pre class="msg-text {{ extra_class }}"
             :class="{ 'msg-text-clamp': !expanded }"
             @click="expanded = !expanded">{{ text }}</pre>
        <div class="msg-text-meta" x-show="!expanded" @click="expanded = true">{{ line_count }} lines · {{ char_count }} chars — click to expand</div>
        <button class="tool-btn tool-btn-sm" x-show="expanded" style="display:none;" @click="expanded = false">Collapse</button>
    </div>
    {% else %}
    <pre class="msg-text {{ extra_class }}">{{ text }}</pre>
    {% endif %}
{% endmacro %}

{# ``focus`` is deliberately absent from these links: it exists to jump to
   one block, and keeping it would yank you back to that page on every
   Prev/Next. #}
{% macro messages_page_url(p, ps) -%}
/sessions/{{ session_id }}?tab=messages&page={{ p }}&page_size={{ ps }}
{%- endmacro %}

{# The size picker is the only way back from a large page size, so the pager
   renders whenever the session is big enough for the choice to matter — not
   just when it actually spans pages. #}
{% set show_pager = messages_pagination.total > messages_pagination.page_sizes[0] %}
{% macro messages_pager() %}
{% if show_pager %}
{{ pager(messages_page_url, messages_pagination.page, messages_pagination.total_pages,
         messages_pagination.page_size, messages_pagination.page_sizes) }}
{% endif %}
{% endmacro %}

<h2>Messages ({{ "{:,}".format(messages_pagination.total) }})
    {%- if messages_pagination.total_pages > 1 %}
    <span style="font-weight:normal;font-size:0.85rem;color:#666;">showing {{ "{:,}".format(messages_pagination.start) }}–{{ "{:,}".format(messages_pagination.end) }}</span>
    {%- endif %}
</h2>

{{ messages_pager() }}

<div x-data="{
        hideThinking: localStorage.getItem('introspect.hideThinking') === '1',
        hideTools: localStorage.getItem('introspect.hideTools') === '1',
        onlyHuman: localStorage.getItem('introspect.onlyHuman') === '1',
        save() {
            localStorage.setItem('introspect.hideThinking', this.hideThinking ? '1' : '0');
            localStorage.setItem('introspect.hideTools', this.hideTools ? '1' : '0');
            localStorage.setItem('introspect.onlyHuman', this.onlyHuman ? '1' : '0');
        }
     }"
     x-init="$watch('hideThinking', save); $watch('hideTools', save); $watch('onlyHuman', save)">
<div class="msg-filters">
    <label><input type="checkbox" x-model="hideThinking"> Hide thinking</label>
    <label><input type="checkbox" x-model="hideTools"> Hide tool calls</label>
    <label><input type="checkbox" x-model="onlyHuman"> Only human turns</label>
    <button type="button" class="tool-btn tool-btn-sm"
            @click="$dispatch('tools-expand-all')">Expand all tools</button>
    <button type="button" class="tool-btn tool-btn-sm"
            @click="$dispatch('tools-collapse-all')">Collapse all</button>
</div>

    {% for msg in messages %}
    {%- set show_class = 'kind-' ~ msg.kind -%}
    {# Anchored on the request that paid, so a long-running tool that returns
       after the TTL gets a divider too, not just a human pause. Emitted
       *outside* the msg-row: the row's x-show filters (hide thinking / hide
       tools / only human) would otherwise swallow the divider whenever the
       paying reply happens to open with a thinking or tool_use block. #}
    {% if msg.cache_loss_event %}
    <div class="cache-loss-divider"
         title="{% if msg.cache_loss_recoverable %}The prompt cache expired during this {{ msg.cache_loss_gap_minutes }} min gap, and this reply paid {{ msg.cache_loss_cost }} extra to rebuild it. A {{ msg.cache_loss_max_ttl_minutes }} min cache TTL would have kept it warm.{% else %}This gap ran past {{ msg.cache_loss_max_ttl_minutes }} min, so no prompt-cache TTL would have kept the prefix warm — a break, not avoidable waste. Rebuilding cost {{ msg.cache_loss_cost }}.{% endif %}">
        <span>{% if msg.cache_loss_recoverable %}cache lost · {{ msg.cache_loss_gap_minutes }} min gap · ~{{ msg.cache_loss_cost }} wasted{% else %}break · {{ msg.cache_loss_gap_minutes }} min gap · no TTL recovers this{% endif %}</span>
    </div>
    {% endif %}
    <div {% if msg.is_first_block and msg.uuid %}id="msg-{{ msg.uuid }}"{% endif %} class="msg-row {{ show_class }}{% if msg.is_sidechain %} is-sidechain{% endif %}"
         {% if msg.kind == 'agent_thinking' %}x-show="!hideThinking && !onlyHuman"{% endif %}
         {% if msg.kind == 'agent_tool_call' %}x-show="!hideTools && !onlyHuman"{% endif %}
         {% if msg.kind == 'agent_text' %}x-show="!onlyHuman"{% endif %}
         {% if msg.kind == 'slash_command' %}x-show="!onlyHuman"{% endif %}
         {% if msg.kind == 'subagent_prompt' %}x-show="!onlyHuman"{% endif %}>

        {% if msg.kind == 'human_prompt' %}
            <div class="msg-kind-label">you <span class="msg-time" title="{{ msg.timestamp_full }}">{{ msg.timestamp }}</span></div>
            {{ clamp_body(msg.text, msg.text_needs_collapse, msg.text_line_count, msg.text_char_count, 'msg-text-human') }}

        {% elif msg.kind == 'subagent_prompt' %}
            <div class="msg-kind-label">prompt to subagent <span class="sidechain-badge">subagent</span> <span class="msg-time" title="{{ msg.timestamp_full }}">{{ msg.timestamp }}</span></div>
            {{ clamp_body(msg.text, msg.text_needs_collapse, msg.text_line_count, msg.text_char_count) }}

        {% elif msg.kind == 'slash_command' %}
            <div class="slash-divider">
                <span>{{ msg.command_label }}</span>
            </div>

        {% elif msg.kind == 'agent_text' %}
            <div class="msg-kind-label">assistant{% if msg.is_sidechain %} <span class="sidechain-badge">subagent</span>{% endif %}{% if msg.tokens_summary %} <span class="token-badge" title="{{ msg.tokens_title }}">{{ msg.tokens_summary }}</span>{% endif %} <span class="msg-time" title="{{ msg.timestamp_full }}">{{ msg.timestamp }}</span></div>
            {{ clamp_body(msg.text, msg.text_needs_collapse, msg.text_line_count, msg.text_char_count) }}

        {% elif msg.kind == 'agent_thinking' %}
            <div class="msg-kind-label">thinking{% if msg.is_sidechain %} <span class="sidechain-badge">subagent</span>{% endif %}{% if msg.tokens_summary %} <span class="token-badge" title="{{ msg.tokens_title }}">{{ msg.tokens_summary }}</span>{% endif %} <span class="msg-time" title="{{ msg.timestamp_full }}">{{ msg.timestamp }}</span></div>
            {% if msg.thinking_has_more %}
            <div x-data="{ open: false }">
                <pre class="msg-text" x-show="!open">{{ msg.thinking_preview }}</pre>
                <pre class="msg-text" x-show="open" style="display:none;">{{ msg.thinking_text }}</pre>
                <button @click="open = !open" class="tool-btn tool-btn-sm" x-text="open ? 'Collapse' : 'Expand'"></button>
            </div>
            {% else %}
            <pre class="msg-text">{{ msg.thinking_text }}</pre>
            {% endif %}

        {% elif msg.kind == 'agent_tool_call' %}
            <div id="tc-{{ msg.tool_use_id }}" x-data="{ open: false }"
                 @tools-expand-all.window="open = true"
                 @tools-collapse-all.window="open = false">
                <div class="tool-call-line" @click="open = !open">
                    <strong>{{ msg.tool_name }}</strong>
                    {% if msg.tool_hint %}<span class="tool-hint">{{ msg.tool_hint }}</span>{% endif %}
                    {% if msg.is_error %}<span class="badge badge-error">error</span>{% endif %}
                    {% if msg.exec_time %}<span class="exec-time">{{ msg.exec_time }}</span>{% endif %}
                    {% if msg.is_sidechain %}<span class="sidechain-badge">subagent</span>{% endif %}
                    <span class="msg-time" title="{{ msg.timestamp_full }}">{{ msg.timestamp }}</span>
                    <span class="tool-chevron" x-text="open ? '▾' : '▸'"></span>
                </div>
                <div x-show="open" style="display:none;">
                    <div class="tool-section-label">input</div>
                    {{ clamp_body(msg.tool_input, msg.tool_input_needs_collapse, msg.tool_input_line_count, msg.tool_input_char_count) }}
                    {% if msg.tool_result %}
                    <div class="tool-section-label">result{% if msg.is_error %} (error){% endif %}</div>
                    {{ clamp_body(msg.tool_result, msg.tool_result_needs_collapse, msg.tool_result_line_count, msg.tool_result_char_count, 'msg-text-error' if msg.is_error else '') }}
                    {% endif %}
                </div>
            </div>
        {% endif %}
    </div>
    {% endfor %}
</div>

{{ messages_pager() }}