{#
  What a reply cost. Chips only, no wrapper: the same markup is swapped into
  the live bubble with innerHTML and rendered into the finished one, so the
  numbers cannot change shape when the stream ends.

  A tilde means the endpoint reported no token counts and these were worked out
  at about four characters per token. Nothing here is ever shown as exact when
  it is not.
#}
{# The first chip is what the reply COST and the second is what it OCCUPIES.
   They are different numbers and a multi-round reply makes them very different
   -- it pays for its prompt once per round and only ever sits in the window
   once -- so each title says which it is. Without that, two token counts a few
   centimetres apart just look like one of them is wrong. #}
{% if metrics.has_anything %}
<span class="metric" title="{% if metrics.estimated %}Estimated: this endpoint reports no token counts.
{% endif %}What this reply cost: {{ metrics.prompt_tokens }} in, {{ metrics.completion_tokens }} out{% if metrics.rounds > 1 %}, the prompt paid for once in each of {{ metrics.rounds }} rounds of tool calls{% endif %}">
  {% if metrics.estimated %}~{% endif %}{{ metrics.total_tokens }} tokens
</span>

{% if metrics.context_limit %}
<span class="metric metric--context{{ ' is-' ~ metrics.pressure if metrics.pressure }}"
      title="{% if metrics.estimated %}Estimated. {% endif %}What the conversation now occupies: {{ metrics.context_tokens }} of {{ metrics.context_limit }} tokens">
  <span class="metric__bar">
    {# A width is data, not a design value: it is the measurement itself. #}
    <span class="metric__fill" style="width: {{ metrics.percent }}%"></span>
  </span>
  {% if metrics.estimated %}~{% endif %}{{ metrics.percent }}%
</span>
{% endif %}

{% if metrics.tokens_per_second %}
<span class="metric" title="{% if metrics.estimated %}Estimated. {% endif %}{{ metrics.completion_tokens }} tokens in {{ metrics.elapsed_ms }} ms">
  {% if metrics.estimated %}~{% endif %}{{ '%.1f' | format(metrics.tokens_per_second) }} tok/s
</span>
{% endif %}
{% endif %}