{% if not cost_ctx.has_data %}
<div class="card"><p>No assistant messages yet — nothing to cost.</p></div>
{% else %}

<div class="card">
    <h2>Estimated cost: {{ cost_ctx.total_cost }}</h2>
    <p style="color:#888;margin:0;">Prices are 2026-04-21 list rates per Anthropic's pricing page. Synthetic / unknown models bill as $0.</p>
</div>

<h2>Per-model breakdown</h2>
<div class="card">
    <table>
        <thead>
            <tr>
                <th>Model</th>
                <th style="text-align:right;">Messages</th>
                <th style="text-align:right;">Input</th>
                <th style="text-align:right;">Output</th>
                <th style="text-align:right;">Cache read</th>
                <th style="text-align:right;">Cache write 5m</th>
                <th style="text-align:right;">Cache write 1h</th>
                <th style="text-align:right;">Cost</th>
            </tr>
        </thead>
        <tbody>
            {% for m in cost_ctx.per_model %}
            <tr>
                <td>{{ m.model }}</td>
                <td style="text-align:right;">{{ "{:,}".format(m.messages) }}</td>
                <td style="text-align:right;">{{ "{:,}".format(m.input) }}</td>
                <td style="text-align:right;">{{ "{:,}".format(m.output) }}</td>
                <td style="text-align:right;">{{ "{:,}".format(m.cache_read) }}</td>
                <td style="text-align:right;">{{ "{:,}".format(m.cache_creation_5m) }}</td>
                <td style="text-align:right;">{{ "{:,}".format(m.cache_creation_1h) }}</td>
                <td style="text-align:right;">{{ m.cost }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<h2>Cumulative cost over time</h2>
<div class="card">
    {% if cost_ctx.chart_error %}
    <div style="background:#fff0f0;border-left:4px solid #c62828;padding:0.6rem 0.9rem;color:#742;">
        <strong>Chart unavailable.</strong> Per-model breakdown and bloat tables below are still computed.
        <details style="margin-top:0.4rem;"><summary style="cursor:pointer;color:#999;font-size:0.85rem;">Details</summary><pre style="margin:0.4rem 0 0;font-size:0.8rem;color:#a44;">{{ cost_ctx.chart_error }}</pre></details>
    </div>
    {% elif cost_ctx.chart.messages %}
    <p style="color:#666;margin:0 0 0.6rem;font-size:0.85rem;">Drag to box-select a range or click a marker to filter the bloat tables below. Toggle which series are visible with the buttons.</p>
    <div id="session-cost-chart"
         class="cost-chart"
         data-figure-id="session-cost-chart-data"
         data-on-click="session-cost-marker"
         data-session-id="{{ session_id }}"
         data-modebar="hover"
         data-view-map='{{ cost_ctx.chart.view_map | tojson }}'
         data-annotation-view-map='{{ cost_ctx.chart.annotation_view_map | tojson }}'
         data-marker-trace="{{ cost_ctx.chart.marker_trace }}"
         data-has-subagents="{{ '1' if cost_ctx.chart.has_subagents else '0' }}"
         data-height="280"
         style="width:100%;min-height:280px;"></div>
    <script type="application/json" id="session-cost-chart-data">{{ cost_ctx.chart.figure_json|safe }}</script>
    <p style="color:#888;margin:0.35rem 0 0;font-size:0.85rem;">{{ cost_ctx.chart.messages }} messages{% if cost_ctx.chart.points != cost_ctx.chart.messages %} (bucketed to {{ cost_ctx.chart.points }} points, {{ cost_ctx.chart.bucket_size }} per bucket — selection rounds to bucket edges){% endif %}</p>
    {% else %}
    <p>No cost data to chart.</p>
    {% endif %}
</div>

{% if cost_ctx.chart.invocation_summary %}
<h2>Subagent invocations by cost</h2>
<div class="card">
    <p style="color:#888;margin:0 0 0.6rem;">One row per Task/Agent call, ranked by cost. The top {{ cost_ctx.chart.invocation_summary | length if cost_ctx.chart.invocation_summary | length < 12 else 12 }} also appear as individual lines in the chart's <em>By invocation</em> view — outliers here are the "bad apples" to investigate.</p>
    <table>
        <thead>
            <tr>
                <th style="text-align:right;">#</th>
                <th></th>
                <th>Subagent type</th>
                <th style="text-align:right;">Messages</th>
                <th style="text-align:right;">Cost</th>
            </tr>
        </thead>
        <tbody>
            {% for inv in cost_ctx.chart.invocation_summary %}
            <tr>
                <td style="text-align:right;">{{ inv.rank }}</td>
                <td><span style="display:inline-block;width:10px;height:10px;background:{{ inv.color }};"></span></td>
                <td>
                    {% if inv.first_uuid %}
                    <a href="/sessions/{{ session_id }}?tab=messages#msg-{{ inv.first_uuid }}">{{ inv.subagent_type }}</a>
                    {% else %}
                    {{ inv.subagent_type }}
                    {% endif %}
                </td>
                <td style="text-align:right;">{{ "{:,}".format(inv.messages) }}</td>
                <td style="text-align:right;">{{ inv.cost }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}

{% include "_session_cost_bloat.html" %}

{% endif %}