timmy-tower/the-matrix/js/ui.js

import { getAgentDefs } from './agents.js';
import { AGENT_DEFS, 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 $clearBtn   = document.getElementById('chat-clear-btn');

const MAX_CHAT_ENTRIES = 12;
const MAX_STORED       = 100;
const STORAGE_PREFIX   = 'matrix:chat:';

const chatEntries = [];
const chatHistory = {};
let uiInitialized = false;

function storageKey(agentId) {
  return STORAGE_PREFIX + agentId;
}

export function loadChatHistory(agentId) {
  try {
    const raw = localStorage.getItem(storageKey(agentId));
    if (!raw) return [];
    const parsed = JSON.parse(raw);
    if (!Array.isArray(parsed)) return [];
    return parsed.filter(m =>
      m && typeof m.agentLabel === 'string' && typeof m.text === 'string'
    );
  } catch {
    return [];
  }
}

export function saveChatHistory(agentId, messages) {
  try {
    localStorage.setItem(storageKey(agentId), JSON.stringify(messages.slice(-MAX_STORED)));
  } catch {
  }
}

function formatTimestamp(ts) {
  const d  = new Date(ts);
  const hh = String(d.getHours()).padStart(2, '0');
  const mm = String(d.getMinutes()).padStart(2, '0');
  return `${hh}:${mm}`;
}

function buildChatEntry(agentLabel, message, cssColor, timestamp) {
  const color = cssColor || '#00ff41';
  const entry = document.createElement('div');
  entry.className = 'chat-entry';
  const ts = timestamp ? `<span class="chat-ts">[${formatTimestamp(timestamp)}]</span> ` : '';
  entry.innerHTML = `${ts}<span class="agent-name" style="color:${color}">${agentLabel}</span>: ${escapeHtml(message)}`;
  return entry;
}

function loadAllHistories() {
  const all = [];

  const agentIds = [...AGENT_DEFS.map(d => d.id), 'sys'];
  for (const id of agentIds) {
    const msgs = loadChatHistory(id);
    chatHistory[id] = msgs;
    all.push(...msgs);
  }

  all.sort((a, b) => (a.timestamp || 0) - (b.timestamp || 0));

  for (const msg of all.slice(-MAX_CHAT_ENTRIES)) {
    const entry = buildChatEntry(msg.agentLabel, msg.text, msg.cssColor, msg.timestamp);
    chatEntries.push(entry);
    $chatPanel.appendChild(entry);
  }

  $chatPanel.scrollTop = $chatPanel.scrollHeight;
}

function clearAllHistories() {
  const agentIds = [...AGENT_DEFS.map(d => d.id), 'sys'];
  for (const id of agentIds) {
    localStorage.removeItem(storageKey(id));
    chatHistory[id] = [];
  }
  while ($chatPanel.firstChild) $chatPanel.removeChild($chatPanel.firstChild);
  chatEntries.length = 0;
}

export function initUI() {
  if (uiInitialized) return;
  uiInitialized = true;

  renderAgentList();
  loadAllHistories();

  if ($clearBtn) {
    $clearBtn.addEventListener('click', clearAllHistories);
  }
}

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 message to the chat panel and optionally persist it.
 * @param {string} agentLabel — display name
 * @param {string} message    — raw text (HTML-escaped before insertion)
 * @param {string} cssColor   — CSS color string e.g. '#00ff88'
 * @param {string} [agentId]  — storage key; omit to skip persistence
 */
export function appendChatMessage(agentLabel, message, cssColor, agentId) {
  const timestamp = Date.now();
  const entry = buildChatEntry(agentLabel, message, cssColor, timestamp);
  chatEntries.push(entry);

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

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

  if (agentId) {
    if (!chatHistory[agentId]) chatHistory[agentId] = [];
    chatHistory[agentId].push({ agentLabel, text: message, cssColor, agentId, timestamp });
    if (chatHistory[agentId].length > MAX_STORED) {
      chatHistory[agentId] = chatHistory[agentId].slice(-MAX_STORED);
    }
    saveChatHistory(agentId, chatHistory[agentId]);
  }
}

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