{#
  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.
#}
{% if metrics.has_anything %}
<span class="metric" title="{% if metrics.estimated %}Estimated: this endpoint reports no token counts.
{% endif %}{{ metrics.prompt_tokens }} in, {{ metrics.completion_tokens }} out{% if metrics.rounds > 1 %}, over {{ 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 %}{{ metrics.context_tokens }} of {{ metrics.context_limit }} tokens of context used">
  <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 %}