the-matrix/js/ui.js

import { getAgentDefs } from './agents.js';
import { colorToCss } from './agent-defs.js';

const $agentCount  = document.getElementById('agent-count');
const $activeJobs  = document.getElementById('active-jobs');
const $fps         = document.getElementById('fps');
const $agentList   = document.getElementById('agent-list');
const $connStatus  = document.getElementById('connection-status');
const $chatPanel   = document.getElementById('chat-panel');

const MAX_CHAT_ENTRIES = 12;
const chatEntries = [];

export function initUI() {
  renderAgentList();
}

function renderAgentList() {
  const defs = getAgentDefs();
  $agentList.innerHTML = defs.map(a => {
    const css = colorToCss(a.color);
    return `<div class="agent-row">
      <span class="label">[</span>
      <span style="color:${css}">${a.label}</span>
      <span class="label">]</span>
      <span id="agent-state-${a.id}" style="color:#003300"> IDLE</span>
    </div>`;
  }).join('');
}

export function updateUI({ fps, agentCount, jobCount, connectionState }) {
  $fps.textContent        = `FPS: ${fps}`;
  $agentCount.textContent = `AGENTS: ${agentCount}`;
  $activeJobs.textContent = `JOBS: ${jobCount}`;

  if (connectionState === 'connected') {
    $connStatus.textContent = '● CONNECTED';
    $connStatus.className   = 'connected';
  } else if (connectionState === 'connecting') {
    $connStatus.textContent = '◌ CONNECTING...';
    $connStatus.className   = '';
  } else {
    $connStatus.textContent = '○ OFFLINE';
    $connStatus.className   = '';
  }

  const defs = getAgentDefs();
  defs.forEach(a => {
    const el = document.getElementById(`agent-state-${a.id}`);
    if (el) {
      el.textContent = ` ${a.state.toUpperCase()}`;
      el.style.color = a.state === 'active' ? '#00ff41' : '#003300';
    }
  });
}

/**
 * Append a line to the chat panel.
 * @param {string} agentLabel  — display name
 * @param {string} message     — message text (HTML-escaped before insertion)
 * @param {string} cssColor    — CSS color string, e.g. '#00ff88'
 */
export function appendChatMessage(agentLabel, message, cssColor) {
  const color = cssColor || '#00ff41';
  const entry = document.createElement('div');
  entry.className = 'chat-entry';
  entry.innerHTML = `<span class="agent-name" style="color:${color}">${agentLabel}</span>: ${escapeHtml(message)}`;
  chatEntries.push(entry);

  if (chatEntries.length > MAX_CHAT_ENTRIES) {
    const removed = chatEntries.shift();
    $chatPanel.removeChild(removed);
  }

  $chatPanel.appendChild(entry);
  $chatPanel.scrollTop = $chatPanel.scrollHeight;
}

function escapeHtml(str) {
  return str
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;');
}