{#- Run-health panels shared by the overview and the fleet monitor.
    Import "with context" so the formatting helpers are visible. -#}
{% from '_ui.html' import empty_state %}

{#- The time range: preset windows, or a custom start and end in UTC.
    ``keep`` holds the page's other query parameters. -#}
{% macro range_picker(base, window, windows, span, keep={}, labels={}) -%}
{% set kept = keep|urlencode %}
<nav class="segmented range-picker" aria-label="Time range">
    {% for key in windows %}<a class="segmented-item" href="{{ base }}?window={{ key }}{% if kept %}&amp;{{ kept }}{% endif %}"{% if key == window %} aria-current="page"{% endif %}>{{ labels.get(key, key) }}</a>{% endfor %}
    <details class="range-custom"{% if span.error %} open{% endif %}>
        <summary class="segmented-item"{% if window == 'custom' %} aria-current="page"{% endif %} title="Choose a start and an end">{% if window == 'custom' %}{{ fmt_range(span) }}{% else %}Custom{% endif %}</summary>
        <form class="range-custom-form" method="get" action="{{ base }}">
            <input type="hidden" name="window" value="custom">
            {% for key, value in keep.items() %}<input type="hidden" name="{{ key }}" value="{{ value }}">{% endfor %}
            <label>From <small>UTC</small><input type="datetime-local" name="start" value="{{ span.start.strftime('%Y-%m-%dT%H:%M') }}" required></label>
            <label>To <small>UTC</small><input type="datetime-local" name="end" value="{{ span.end.strftime('%Y-%m-%dT%H:%M') }}"></label>
            {% if span.error %}<p class="range-custom-error" role="alert">{{ span.error }} Showing the last 7 days.</p>{% endif %}
            <button class="btn btn-primary" type="submit">Apply</button>
        </form>
    </details>
</nav>
{%- endmacro %}

{#- ``zoom`` is the page's URL up to its query, e.g. "/dashboard?load=1&":
    a bar opens that page for its own time span, or a lone run's trace. -#}
{% macro runs_chart(overview, window, window_label, title='Runs over time', prefix='ov', zoom='') -%}
{% set t = overview.totals %}
{% set series = overview.series %}
<section class="panel ov-activity" aria-labelledby="{{ prefix }}-activity-title">
    <div class="panel-header">
        <h2 class="panel-title" id="{{ prefix }}-activity-title">{{ title }}</h2>
        <span class="ov-legend"><span class="ov-key ov-key--ok"></span>Succeeded <span class="ov-key ov-key--failed"></span>Failed</span>
    </div>
    {% if t.runs %}
    {% set peak = [series|map(attribute='runs')|max, 1]|max %}
    {% set span_seconds = (overview.window_end - overview.window_start).total_seconds() %}
    {% set time_format = '%H:%M' if span_seconds <= 86400 else ('%b %d %H:%M' if overview.bucket_seconds < 86400 else '%b %d') %}
    {% set bucket_format = '%b %d %H:%M' if overview.bucket_seconds < 86400 else '%b %d' %}
    <div class="ov-chart" role="group" aria-label="{{ t.runs }} runs in the {{ window_label }}, {{ t.failed }} failed. Each bar is one period; open one to see its runs.">
        <div class="ov-chart-axis" aria-hidden="true"><span>{{ peak }}</span><span>0</span></div>
        <div class="ov-bars">
            {% for bucket in series %}
            {% set ends = [bucket.end, overview.window_end]|min %}
            {% set when = bucket.start.strftime(bucket_format) ~ ' – ' ~ ('now' if ends >= overview.window_end else ends.strftime('%H:%M' if bucket.start.date() == ends.date() and overview.bucket_seconds < 86400 else bucket_format)) ~ ' UTC' %}
            {% set summary = bucket.runs ~ ' run' ~ ('' if bucket.runs == 1 else 's') ~ (' · ' ~ bucket.failed ~ ' failed' if bucket.failed else '') %}
            {% set edge = ' ov-bar--start' if loop.index0 < series|length * 0.2 else (' ov-bar--end' if loop.index0 >= series|length * 0.8 else '') %}
            {% if bucket.runs %}
            {% set href = bucket.trace_url if bucket.trace_url else zoom ~ 'window=custom&start=' ~ bucket.start.strftime('%Y-%m-%dT%H:%M') ~ '&end=' ~ ends.strftime('%Y-%m-%dT%H:%M:%S') %}
            {% set fill = (100 * bucket.runs / peak)|round(1) %}
            <a class="ov-bar{{ edge }}" href="{{ href }}" style="--fill: {{ fill }}%" aria-label="{{ when }}: {{ summary }}. {{ 'Open the run' if bucket.trace_url else 'See these runs' }}.">
                <span class="ov-bar-fill" style="height: {{ fill }}%">
                    {% if bucket.failed %}<span class="ov-bar-failed" style="height: {{ (100 * bucket.failed / bucket.runs)|round(1) }}%"></span>{% endif %}
                </span>
                <span class="ov-tip" aria-hidden="true">
                    <strong>{{ when }}</strong>
                    {% set unfinished = bucket.runs - bucket.succeeded - bucket.failed %}
                    <span>{{ bucket.runs }} run{{ '' if bucket.runs == 1 else 's' }}: {{ bucket.succeeded }} succeeded{% if bucket.failed %} · <b class="ov-failed">{{ bucket.failed }} failed</b>{% endif %}{% if unfinished %} · {{ unfinished }} without a result{% endif %}</span>
                    <span>{% if bucket.tokens %}{{ fmt_compact(bucket.tokens) }} tokens · {{ fmt_usd(bucket.cost_usd) }}{% else %}No token usage recorded{% endif %}</span>
                    <em>{{ 'Click to open this run' if bucket.trace_url else 'Click to see these ' ~ bucket.runs ~ ' runs' }}</em>
                </span>
            </a>
            {% else %}
            <span class="ov-bar ov-bar--empty{{ edge }}"><span class="ov-tip" aria-hidden="true"><strong>{{ when }}</strong><span>No runs</span></span></span>
            {% endif %}
            {% endfor %}
        </div>
        <div class="ov-chart-labels" aria-hidden="true">
            <span>{{ series[0].start.strftime(time_format) }}</span>
            <span>{{ series[series|length // 2].start.strftime(time_format) }}</span>
            <span>{{ 'Now' if generated_at is not defined or (generated_at - overview.window_end).total_seconds() < 60 else overview.window_end.strftime(time_format) }}</span>
        </div>
    </div>
    {% else %}
    {{ empty_state('No runs in this window', 'Send a message in the playground or run an automation to see activity here.', '/playground', 'Open the playground') }}
    {% endif %}
</section>
{%- endmacro %}

{% macro attention_panel(items, prefix='ov', limit=8) -%}
<section class="panel" aria-labelledby="{{ prefix }}-attention-title">
    <div class="panel-header">
        <h2 class="panel-title" id="{{ prefix }}-attention-title">Needs attention</h2>
        <span class="panel-meta">{{ items|length }}</span>
    </div>
    {% if items %}
    <ul class="ov-attention">
        {% for item in items[:limit] %}
        {% set actions = item.actions if item.actions is defined else ([{'label': 'Open', 'href': item.href}] if item.href else []) %}
        <li class="ov-attention-item ov-attention-item--{{ item.severity }}">
            <span class="ov-attention-title">{% if actions %}<a href="{{ actions[0].href }}">{{ item.title }}</a>{% else %}{{ item.title }}{% endif %}</span>
            <span class="ov-attention-detail">{{ item.detail }}</span>
            {% if actions %}<span class="ov-attention-actions">{% for action in actions %}<a href="{{ action.href }}"{% if loop.first %} class="is-primary"{% endif %}>{{ action.label }}</a>{% endfor %}</span>{% endif %}
        </li>
        {% endfor %}
    </ul>
    {% else %}
    <p class="ov-all-clear"><span class="pill pill--success">All clear</span> No failed runs, failing tools or cache regressions in this window.</p>
    {% endif %}
</section>
{%- endmacro %}

{% macro recent_runs(runs, agent_names, title='Recent runs', prefix='ov') -%}
<section class="panel" aria-labelledby="{{ prefix }}-recent-title">
    <div class="panel-header">
        <h2 class="panel-title" id="{{ prefix }}-recent-title">{{ title }}</h2>
        <a class="panel-meta" href="/traces">View all in Observability</a>
    </div>
    {% if runs %}
    <div class="table-scroll">
        <table class="data-table ov-runs">
            <thead>
                <tr>
                    <th scope="col">Started</th>
                    <th scope="col">Agent</th>
                    <th scope="col">Status</th>
                    <th scope="col" class="num">Duration</th>
                    <th scope="col" class="num ov-col-calls">Model calls</th>
                    <th scope="col" class="ov-col-tools">Tools</th>
                    <th scope="col" class="num">Tokens</th>
                    <th scope="col" class="num ov-col-cache">From cache</th>
                    <th scope="col" class="num">Cost</th>
                    <th scope="col"><span class="visually-hidden">Trace</span></th>
                </tr>
            </thead>
            <tbody>
                {% for run in runs %}
                <tr>
                    <td title="{{ run.started_at.strftime('%Y-%m-%d %H:%M:%S') }} UTC">{{ relative_time(run.started_at, generated_at) }}</td>
                    <td>{% if run.agent_id %}<a href="/agents/{{ run.agent_id }}/playground">{{ agent_names.get(run.agent_id, run.agent_id[:12]) }}</a>{% else %}—{% endif %}</td>
                    <td>
                        {% if run.status == 'success' %}<span class="pill pill--success">Succeeded</span>
                        {% elif run.status == 'failed' %}<span class="pill pill--danger" title="{{ run.error_code }}">Failed</span>
                        {% elif run.status == 'running' %}<span class="pill pill--info">Running</span>
                        {% else %}<span class="pill" title="No result was recorded for this run.">Incomplete</span>{% endif %}
                    </td>
                    <td class="num">{{ fmt_duration(run.duration_ms) }}</td>
                    <td class="num ov-col-calls">{{ run.model_calls }}</td>
                    <td class="ov-tools ov-col-tools">
                        {% if run.tool_calls %}{{ run.tool_calls }}{% if run.tool_failures %} <span class="ov-failed">· {{ run.tool_failures }} failed</span>{% endif %}
                        <span class="ov-tool-names">{{ run.tools|map(attribute='name')|unique|join(', ') }}</span>
                        {% else %}—{% endif %}
                    </td>
                    <td class="num">{{ fmt_compact(run.input_tokens + run.output_tokens) }}</td>
                    <td class="num ov-col-cache">{% if run.input_tokens %}{{ '%.0f'|format(100 * run.cached_tokens / run.input_tokens) }}%{% else %}—{% endif %}</td>
                    <td class="num">{% if run.unpriced_calls and not run.cost_usd %}<span title="No price for this model">—</span>{% else %}{{ fmt_usd(run.cost_usd) }}{% endif %}</td>
                    <td><a href="{{ run.trace_url }}">Trace</a></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    {{ empty_state('No recorded runs yet', 'Runs appear here as soon as an agent answers a message.') }}
    {% endif %}
</section>
{%- endmacro %}