{% extends "base.html" %}
{% import "_links.html" as links with context %}
{% block title %}Chains — Cairn Dashboard{% endblock %}
{% block content %}
<section class="panel">
  <div id="refresh-region">
  <h1>Session chains</h1>
  <p class="muted">
    Tool calls grouped per session, in call order; a new chain starts after
    {{ gap_minutes }} minutes of inactivity.
  </p>
  {% if chains_truncated %}
  <p class="muted">showing {{ chains | length }} of {{ total_chains }} chains</p>
  {% endif %}
  {% include "window_control.html" %}
  {% if chains %}
  <div class="chain-list">
    {% for chain in chains %}
    <div class="chain" data-session="{{ chain.session_id }}">
      <div class="chain-head">
        <code>{{ chain.session_id }}</code>
        <span class="muted">
          {{ chain.call_count }} call{{ "s" if chain.call_count != 1 }} ·
          {{ chain.started_at | epoch }}{% if chain.call_count > 1 %} → {{ chain.ended_at | epoch }} · span {{ (chain.ended_at - chain.started_at) | span }}{% endif %}
        </span>
      </div>
      <ol class="chain-calls">
        {% for c in chain.calls %}
        <li class="chain-call">
          <span class="call-node">
            <span class="call-tool">{{ c.tool_name }}</span>
            <span class="badge badge-{{ c.status }}">{{ c.status }}</span>
            <span class="muted">{{ c.invoked_at | offset(chain.started_at) }} · {{ c.duration_ms | duration }}</span>
          </span>
        </li>
        {% endfor %}
      </ol>
      {% if chain.truncated_calls %}
      {#- FR-003: the expand anchor keeps the window AND the selected store
          (links.url); empty selection keeps the bare href. -#}
      {% set q = {'expand': chain.session_id} %}
      {%- if window != "all" %}{% set _ = q.update({'window': window}) %}{% endif %}
      <p class="muted">
        showing {{ chain.shown_calls }} of {{ chain.call_count }} calls ·
        <a href="{{ links.url('/chains', q) }}">expand</a>
      </p>
      {% endif %}
    </div>
    {% endfor %}
  </div>
  {% else %}
  <p class="empty-state">No tool calls recorded yet.</p>
  {% endif %}
  </div>
</section>
<style>
  /* CSS-only chain connection — the view itself stays JS-free; app.js
     only drives the shared live-refresh region swap. */
  .chain {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.6rem 1rem;
    margin: 0.7rem 0;
    background: var(--surface);
  }
  .chain-head {
    margin-bottom: 0.4rem;
  }
  .chain-calls {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
  }
  .chain-call {
    display: flex;
    align-items: center;
  }
  .chain-call:not(:last-child)::after {
    content: "→";
    color: var(--accent);
    margin: 0 0.45rem;
    font-weight: 700;
  }
  .call-node {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.12rem 0.7rem;
  }
  .call-tool {
    font-weight: 600;
    font-size: 0.88rem;
  }
</style>
{% endblock %}
{% block scripts %}<script src="{{ url_for('static', path='/app.js') }}?v={{ asset_version }}"></script>{% endblock %}