Timmy-time-dashboard/src/dashboard/templates/swarm_live.html

{% extends "base.html" %}

{% block title %}{{ page_title }}{% endblock %}

{% block extra_styles %}
<style>
  .swarm-container {
    max-width: 1200px;
    margin: 0 auto;
  }
  .swarm-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
  }
  .swarm-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-bright);
    letter-spacing: 0.08em;
  }
  .swarm-log-box {
    height: 200px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(24, 10, 45, 0.6);
    padding: 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    font-family: var(--font);
    font-size: 12px;
  }
  @media (max-width: 768px) {
    .swarm-title { font-size: 1rem; }
    .swarm-log-box { height: 160px; font-size: 11px; }
  }
</style>
{% endblock %}

{% block content %}
<div class="swarm-container py-3">

  <div class="swarm-header-row">
    <div class="swarm-title">LIVE SWARM</div>
    <span class="badge badge-success" id="connection-status">Connecting...</span>
  </div>

  <div class="grid grid-3" style="margin-bottom: 16px;">
    <div class="stat">
      <div class="stat-value" id="stat-agents">-</div>
      <div class="stat-label">Total Agents</div>
    </div>
    <div class="stat">
      <div class="stat-value" id="stat-active">-</div>
      <div class="stat-label">Active</div>
    </div>
    <div class="stat">
      <div class="stat-value" id="stat-tasks">-</div>
      <div class="stat-label">Active Tasks</div>
    </div>
  </div>

  <div class="grid grid-2" style="margin-bottom: 16px;">
    <div class="card mc-panel">
      <div class="card-header mc-panel-header">// AGENTS</div>
      <div class="card-body" id="agents-list">
        <p style="color: var(--text-dim); font-size: 12px;">Loading agents...</p>
      </div>
    </div>
    <div class="card mc-panel">
      <div class="card-header mc-panel-header">// ACTIVE AUCTIONS</div>
      <div class="card-body" id="auctions-list">
        <p style="color: var(--text-dim); font-size: 12px;">Loading auctions...</p>
      </div>
    </div>
  </div>

  <div class="card mc-panel">
    <div class="card-header mc-panel-header">// SWARM LOG</div>
    <div class="card-body p-0">
      <div class="swarm-log-box" id="swarm-log">
        <div style="color: var(--text-dim);">Waiting for updates...</div>
      </div>
    </div>
  </div>

</div>

<script>
let ws = null;
let reconnectInterval = 1000;
const maxReconnectInterval = 30000;

function connect() {
    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
    ws = new WebSocket(protocol + '//' + window.location.host + '/swarm/live');

    ws.onopen = function() {
        console.log('WebSocket connected');
        document.getElementById('connection-status').textContent = 'Live';
        document.getElementById('connection-status').className = 'badge badge-success';
        reconnectInterval = 1000;
        addLog('Connected to swarm', 'success');
    };

    ws.onmessage = function(event) {
        var message = JSON.parse(event.data);
        handleMessage(message);
    };

    ws.onclose = function() {
        console.log('WebSocket disconnected');
        document.getElementById('connection-status').textContent = 'Reconnecting...';
        document.getElementById('connection-status').className = 'badge badge-warning';
        addLog('Disconnected, reconnecting...', 'warning');
        setTimeout(connect, reconnectInterval);
        reconnectInterval = Math.min(reconnectInterval * 2, maxReconnectInterval);
    };

    ws.onerror = function(error) {
        console.error('WebSocket error:', error);
        addLog('Connection error', 'error');
    };
}

function handleMessage(message) {
    if (message.type === 'initial_state' || message.type === 'state_update') {
        var data = message.data;
        document.getElementById('stat-agents').textContent = data.agents.total;
        document.getElementById('stat-active').textContent = data.agents.active;
        document.getElementById('stat-tasks').textContent = data.tasks.active;
        updateAgentsList(data.agents.list);
        updateAuctionsList(data.auctions.list);
        return;
    }

    var evt = message.event || message.type || '';
    var data = message.data || message;

    if (evt === 'agent_joined') {
        addLog('Agent joined: ' + (data.name || data.agent_id || ''), 'success');
        refreshStats();
    } else if (evt === 'agent_left') {
        addLog('Agent left: ' + (data.name || data.agent_id || ''), 'warning');
        refreshStats();
    } else if (evt === 'task_posted') {
        addLog('Task posted: ' + (data.description || data.task_id || '').slice(0, 60), 'info');
        refreshStats();
    } else if (evt === 'bid_submitted') {
        addLog('Bid: ' + (data.agent_id || '').slice(0, 8) + ' bid ' + (data.bid_sats || '?') + ' sats', 'info');
    } else if (evt === 'task_assigned') {
        addLog('Task assigned to ' + (data.agent_id || '').slice(0, 8), 'success');
        refreshStats();
    } else if (evt === 'task_completed') {
        addLog('Task completed by ' + (data.agent_id || '').slice(0, 8), 'success');
        refreshStats();
    }
}

function refreshStats() {
    fetch('/swarm').then(function(r) { return r.json(); }).then(function(data) {
        document.getElementById('stat-agents').textContent = data.agents || 0;
        document.getElementById('stat-active').textContent = data.agents_busy || 0;
        document.getElementById('stat-tasks').textContent = (data.tasks_pending || 0) + (data.tasks_running || 0);
    }).catch(function() {});
}

function _t(el, text) { el.textContent = text; return el; }
function _el(tag, cls) { var e = document.createElement(tag); if (cls) e.className = cls; return e; }

function updateAgentsList(agents) {
    var container = document.getElementById('agents-list');
    container.innerHTML = '';

    if (!agents || agents.length === 0) {
        var p = _el('p'); p.style.color = 'var(--text-dim)';
        _t(p, 'No agents registered');
        container.appendChild(p);
        return;
    }

    agents.forEach(function(agent) {
        var card = _el('div', 'agent-card');
        var avatar = _el('div', 'agent-avatar');
        _t(avatar, (agent.name || '?').charAt(0).toUpperCase());
        var info = _el('div', 'agent-info');
        var name = _el('div', 'agent-name');
        _t(name, agent.name || '');
        var desc = _el('div', 'agent-meta');
        _t(desc, agent.description || 'No description');
        var meta = _el('div', 'agent-meta');
        var badge = _el('span', 'badge badge-' + (agent.status === 'active' ? 'success' : agent.status === 'busy' ? 'warning' : 'danger'));
        _t(badge, agent.status || '');
        var stats = _el('span');
        stats.style.marginLeft = '6px';
        _t(stats, (agent.min_bid || 0) + ' sats min | ' + (agent.tasks_completed || 0) + ' tasks | ' + (agent.total_earned || 0) + ' earned');
        meta.appendChild(badge);
        meta.appendChild(stats);
        info.appendChild(name);
        info.appendChild(desc);
        info.appendChild(meta);
        card.appendChild(avatar);
        card.appendChild(info);
        container.appendChild(card);
    });
}

function updateAuctionsList(auctions) {
    var container = document.getElementById('auctions-list');
    container.innerHTML = '';

    if (!auctions || auctions.length === 0) {
        var p = _el('p'); p.style.color = 'var(--text-dim)';
        _t(p, 'No active auctions');
        container.appendChild(p);
        return;
    }

    auctions.forEach(function(auction) {
        var card = _el('div', 'agent-card');
        var info = _el('div', 'agent-info');
        var name = _el('div', 'agent-name');
        _t(name, 'Task ' + String(auction.task_id || '').slice(0, 8));
        var meta = _el('div', 'agent-meta');
        _t(meta, Math.round(auction.time_remaining || 0) + 's remaining | ' + (auction.bid_count || 0) + ' bids');
        info.appendChild(name);
        info.appendChild(meta);
        card.appendChild(info);
        container.appendChild(card);
    });
}

function addLog(message, type) {
    type = type || 'info';
    var log = document.getElementById('swarm-log');
    var timestamp = new Date().toLocaleTimeString();
    var color = type === 'error' ? 'var(--red)' : type === 'warning' ? 'var(--amber)' : type === 'success' ? 'var(--green)' : 'var(--text-dim)';

    var entry = document.createElement('div');
    entry.style.marginBottom = '4px';
    var tsSpan = _el('span');
    tsSpan.style.color = 'var(--text-dim)';
    _t(tsSpan, '[' + timestamp + '] ');
    var msgSpan = _el('span');
    msgSpan.style.color = color;
    _t(msgSpan, message);
    entry.appendChild(tsSpan);
    entry.appendChild(msgSpan);

    log.appendChild(entry);
    log.scrollTop = log.scrollHeight;
}

connect();
</script>
{% endblock %}