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 = [];

const IDLE_COLOR  = '#005500';
const ACTIVE_COLOR = '#00ff41';

export function initUI() {
  renderAgentList();
}

function renderAgentList() {
  const defs = getAgentDefs();
  $agentList.innerHTML = defs.map(a => {
    const css = escapeAttr(colorToCss(a.color));
    const safeLabel = escapeHtml(a.label);
    const safeId = escapeAttr(a.id);
    return `<div class="agent-row">
      <span class="label">[</span>
      <span style="color:${css}">${safeLabel}</span>
      <span class="label">]</span>
      <span id="agent-state-${safeId}" style="color:${IDLE_COLOR}"> 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' ? ACTIVE_COLOR : IDLE_COLOR;
    }
  });
}

/**
 * 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, extraClass) {
  const color = escapeAttr(cssColor || '#00ff41');
  const entry = document.createElement('div');
  entry.className = 'chat-entry' + (extraClass ? ' ' + extraClass : '');
  entry.innerHTML = `<span class="agent-name" style="color:${color}">${escapeHtml(agentLabel)}</span>: ${escapeHtml(message)}`;

  chatEntries.push(entry);

  while (chatEntries.length > MAX_CHAT_ENTRIES) {
    const removed = chatEntries.shift();
    try { $chatPanel.removeChild(removed); } catch { /* already removed */ }
  }

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

/**
 * Escape HTML text content — prevents tag injection.
 */
function escapeHtml(str) {
  return String(str)
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;');
}

/**
 * Escape a value for use inside an HTML attribute (style="...", id="...").
 */
function escapeAttr(str) {
  return String(str)
    .replace(/&/g, '&amp;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;');
}