{% import "components.html" as c with context %}
<div hx-get="/agents/{{ ref(agent.computer_id) }}/{{ ref(agent.id) }}/activity" hx-trigger="poll-refresh" x-poll data-poll-hover data-poll='{{ poll("activity", agent, seen=poll_state)|tojson }}' x-data="agentStatus" data-agent='{{ dict(poll("agent-status", agent), labels=status_labels)|tojson }}' hx-target="closest .card" hx-swap="innerMorph">
  <div class="h">{{ c.avatar(agent.name, small=true) }}{{ agent.name }}{{ c.dot(agent.status, reactive=true) }}</div>
  <div class="st">
    {% if agent.working_on %}{% set words = t.text("activity.working_on", {"target": agent.working_on, "since": "{since}"}).split("{since}") %}{{ words[0] }}{{ c.time(agent.working_since_ms, "clock") }}{{ words[1] }}{% else %}<span x-text="labels[status]"></span>{% endif %}
  </div>
  <div class="ev">
    {% for item in activity %}<div>{% if loop.first %}<span class="live" x-show="status === 'busy'"></span>{% endif %}<span class="t">{{ c.time(item.at_ms, "clock") }}</span>{{ item.text }}</div>{% endfor %}
    {% if not activity %}<div class="st">{{ t.text("activity.none") }}</div>{% endif %}
  </div>
  {# a runtime that does not price its tokens leaves the cost out #}
  {% if usage %}<div class="more">{{ t.text("activity.usage_today", {"input": usage.input, "output": usage.output, "cached": usage.cached}) }}{% if usage.cost %} · ${{ usage.cost }}{% endif %}</div>{% endif %}
</div>