const monitor = document.getElementById('monitor');

const addLog = (type, content) => {
  const div = document.createElement('div');
  div.className = `log-entry log-${type}`;
  div.innerHTML = `
    <small style="opacity: 0.5;">${type.toUpperCase()}</small>
    <div style="margin-top: 5px;">${content}</div>
  `;
  monitor.prepend(div);
};

// Simulation of real-time reasoning events from the Python kernel
const simulateReasoning = () => {
  const events = [
    { type: 'thought', msg: 'System initialized. Analyzing workspace request...' },
    { type: 'action', msg: 'DISCOVERING tools via MCP Connector...' },
    { type: 'thought', msg: 'Found [sqlite, filesystem]. Searching for "financial_records.db"' },
    { type: 'action', msg: 'EXECUTING query: SELECT * FROM transactions LIMIT 5' },
    { type: 'fama', msg: 'CRITICAL: Failure detected in syntax. Injecting SQL Sub-Agent mitigation...' },
    { type: 'thought', msg: 'Refining reasoning based on failure trajectory...' }
  ];

  let i = 0;
  const interval = setInterval(() => {
    if (i < events.length) {
      addLog(events[i].type, events[i].msg);
      i++;
    } else {
      clearInterval(interval);
    }
  }, 2000);
};

window.onload = simulateReasoning;