{% extends "base.html" %}
{% block title %}Session {{ session.id[:8] }} — Bento{% endblock %}
{% block content %}
{% set av = agent_avatar(session.agent_slug or '?') %}
<header class="session-head">
  <div class="session-id-row">
    <span class="session-kicker">SESSION</span>
    <code class="session-id" id="session-id">#{{ session.id[:8] }}</code>
    <button class="icon-btn" id="copy-id" title="Copy full session id" data-copy="{{ session.id }}">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></svg>
    </button>
  </div>

  <h1 class="session-title" id="session-title">{{ session_title(session, 120) }}</h1>

  <div class="session-meta">
    <span id="status-badge" class="badge {% if session.status == 'running' %}working{% elif session.reason == 'errored' %}error{% elif session.reason == 'cancelled' %}cancelled{% else %}done{% endif %}">
      {%- if session.status == 'running' -%}working
      {%- elif session.reason == 'errored' -%}errored
      {%- elif session.reason == 'cancelled' -%}cancelled
      {%- else -%}done{%- endif -%}
    </span>
    <a href="/p/{{ session.project_slug or current_project.slug }}/agents/{{ session.agent_slug }}" class="agent-pill">
      <span class="avatar-mini" style="background: {{ av.color }}">{{ av.abbr }}</span>
      {{ session.agent_name or '—' }}
    </a>
    <span class="meta-sep">·</span>
    <span class="muted">{{ session.project_slug or current_project.slug }}</span>
    <span class="meta-sep">·</span>
    <code class="model-pill">{{ session.model or '—' }}</code>
    {% if session.version_pin %}
    <span class="meta-sep">·</span>
    <code class="version-pill" title="{{ session.version_sha[:8] if session.version_sha else '' }}">{{ session.version_pin }}</code>
    {% endif %}
    <span class="meta-sep">·</span>
    <span class="muted small">started <time class="rel-time" datetime="{{ session.created_at }}" title="{{ fmt_ts(session.created_at) }}">{{ fmt_ago(session.created_at) }}</time></span>
  </div>

  {% if session.cc_session_id %}
  <div class="session-resume">
    <span class="muted small">Resume in Claude Code:</span>
    <code class="resume-cmd" id="resume-cmd">claude --resume {{ session.cc_session_id }}</code>
    <button class="icon-btn" id="copy-resume" title="Copy resume command"
            data-copy="claude --resume {{ session.cc_session_id }}">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></svg>
    </button>
  </div>
  {% endif %}
</header>

<section class="stat-row session-stats">
  <div class="stat-card">
    <div class="stat-label">Duration</div>
    <div class="stat-value" id="m-duration">{{ fmt_duration_ms(session.duration_ms) }}</div>
  </div>
  <div class="stat-card">
    <div class="stat-label">Tokens</div>
    <div class="stat-value"><span id="m-tokens-in">{{ fmt_tokens(session.tokens_in) }}</span> <span class="muted stat-sub">in</span> <span class="muted stat-sep">/</span> <span id="m-tokens-out">{{ fmt_tokens(session.tokens_out) }}</span> <span class="muted stat-sub">out</span></div>
  </div>
  <div class="stat-card">
    <div class="stat-label">Cost</div>
    <div class="stat-value" id="m-cost">{{ fmt_cost(session.cost_usd) }}</div>
  </div>
</section>

<div class="tabs">
  <button class="tab active" data-tab="debug">Debug <span class="tab-count" id="event-count">{{ events|length }}</span></button>
  <button class="tab" data-tab="flow">Flow</button>
  <div class="tabs-spacer"></div>
  <div class="filter-group" id="filter-group">
    <div class="filter-wrap">
      <button class="filter-button" id="filter-tools-btn" data-popover="tools">All tools</button>
      <div class="filter-popover" id="filter-tools-popover" hidden></div>
    </div>
    <div class="filter-wrap">
      <button class="filter-button" id="filter-events-btn" data-popover="events">All events</button>
      <div class="filter-popover" id="filter-events-popover" hidden></div>
    </div>
  </div>
</div>

<section id="tab-debug" class="tab-pane active">
  <div class="debug-layout">
    <div class="event-list">
      <ol id="timeline" class="event-rows">
        {% for e in events %}
        <li class="event-row {{ event_pill_class(e.type) }}{% if e.type == 'tool_result_block' and e.is_error %} is-error{% endif %}"
            data-seq="{{ e.seq }}">
          <span class="event-pill {{ event_pill_class(e.type) }}{% if e.type == 'tool_result_block' and e.is_error %} is-error{% endif %}">{{ event_pill_label(e.type) }}</span>
          <span class="event-summary">{{ event_summary(e) }}</span>
          <span class="event-delta">{{ event_delta(e, loop.previtem) }}</span>
          <span class="event-time">{{ fmt_clock(e.ts) }}</span>
        </li>
        {% endfor %}
      </ol>
    </div>
    <aside class="event-detail-card" id="event-detail">
      <div class="empty-detail">
        <p class="muted">Select an event to inspect its data.</p>
        <p class="muted small">Use ↑ / ↓ to navigate.</p>
      </div>
    </aside>
  </div>
</section>

<section id="tab-flow" class="tab-pane">
  <div id="flow" class="flow"><div class="muted">building diagram…</div></div>
</section>
{% endblock %}

{% block scripts %}
<script id="initial-events" type="application/json">{{ events|tojson }}</script>
<script>
  const SESSION_ID = "{{ session.id }}";
  const STATUS_IS_RUNNING = {{ 'true' if session.status == 'running' else 'false' }};
</script>
<script src="/static/session.js"></script>
<script>
  document.querySelectorAll("[data-copy]").forEach(btn => {
    btn.addEventListener("click", (e) => {
      const text = e.currentTarget.dataset.copy;
      navigator.clipboard.writeText(text);
      e.currentTarget.classList.add("copied");
      setTimeout(() => e.currentTarget.classList.remove("copied"), 600);
    });
  });
</script>
{% endblock %}