|
{% extends "admin_base.html" %}
|
|
{% block extra_head %}
|
|
{{ super() }}
|
|
<link rel="stylesheet" href="{{ static_url('/static/css/bots.css') }}">
|
|
{% endblock %}
|
|
{% block admin_content %}
|
|
<div class="admin-toolbar">
|
|
<h2>Bot Monitor</h2>
|
|
<span class="admin-count" id="bots-count">{{ frames|length }} bots</span>
|
|
</div>
|
|
|
|
{% if not enabled %}
|
|
<p class="admin-empty">The Bots service is not enabled. Enable it on <a href="/admin/services">Services</a> to see live screenshots.</p>
|
|
{% endif %}
|
|
|
|
<div class="bots-grid" id="bots-grid" data-endpoint="/admin/bots/data" role="region" aria-label="Live bot screenshots" aria-live="polite">
|
|
{% for frame in frames %}
|
|
<figure class="bot-card {% if frame['active'] %}bot-active{% else %}bot-idle{% endif %}" data-slot="{{ frame['slot'] }}">
|
|
<span class="sr-only">{% if frame['active'] %}active{% else %}idle{% endif %}</span>
|
|
<div class="bot-shot">
|
|
{% if frame['has_image'] %}
|
|
<img src="{{ frame['frame_url'] }}" alt="Screenshot of bot {{ frame['label'] }}" loading="lazy" data-lightbox>
|
|
<span class="bot-shot-age" data-bot-age data-age-seconds="{{ frame['age_seconds'] }}"></span>
|
|
{% else %}
|
|
<div class="bot-shot-empty">no frame yet</div>
|
|
{% endif %}
|
|
</div>
|
|
<figcaption class="bot-meta">
|
|
<span class="bot-name">{{ frame['label'] }}</span>
|
|
<span class="bot-persona">{{ frame['persona'] or '-' }}</span>
|
|
<span class="bot-action">{{ frame['action'] or frame['status'] or 'idle' }}</span>
|
|
</figcaption>
|
|
</figure>
|
|
{% else %}
|
|
<p class="admin-empty" id="bots-empty">No bots running. Launch the fleet on <a href="/admin/services">Services</a>.</p>
|
|
{% endfor %}
|
|
</div>
|
|
{% endblock %}
|
|
{% block extra_js %}
|
|
<script type="module">
|
|
import { BotMonitor } from "{{ static_url('/static/js/BotMonitor.js') }}";
|
|
const grid = document.getElementById("bots-grid");
|
|
const view = new BotMonitor(grid);
|
|
view.init();
|
|
window.app.botMonitor = view;
|
|
</script>
|
|
{% endblock %}
|