// ── ARC REACTOR STATUS ────────────────────────────────────────────────
let _arcOnline = false;
let _arcJobs = { queued: 0, running: 0, done: 0, failed: 0 };

async function checkArcStatus() {
  const dot = document.getElementById('bb-arc-dot');
  const sta = document.getElementById('bb-arc-status');
  if (!dot || !sta) return;
  try {
    const d = await api('arc?action=status');
    if (d && d.online) {
      _arcOnline = true;
      dot.className = 'bb-dot online';
      const active = (d.active_jobs || 0) + (d.queued_jobs || 0);
      sta.textContent = active > 0 ? active + ' JOB' + (active !== 1 ? 'S' : '') : 'ONLINE';
      _arcJobs = { queued: d.queued_jobs||0, running: d.running_jobs||0,
                   done: d.jobs_done||0, failed: d.jobs_failed||0 };
    } else {
      _arcOnline = false;
      dot.className = 'bb-dot offline';
      sta.textContent = 'OFFLINE';
    }
  } catch(e) {
    _arcOnline = false;
    dot.className = 'bb-dot offline';
    sta.textContent = 'OFFLINE';
  }
}

// Submit a job to the Arc Reactor and return job_id
async function arcSubmitJob(type, payload, priority) {
  payload  = payload  || {};
  priority = priority || 5;
  const d = await api('arc', { action: 'job_create', type: type, payload: payload, priority: priority });
  return d.job_id || null;
}

// Poll a job until done or failed (max 120s), calling onProgress each tick
async function arcWaitJob(jobId, onProgress) {
  var start = Date.now();
  while (Date.now() - start < 120000) {
    const d = await api('arc?action=job_get&id=' + jobId);
    if (onProgress) onProgress(d);
    if (d.status === 'done')   return d;
    if (d.status === 'failed') throw new Error(d.error || 'Job failed');
    await new Promise(function(r){ setTimeout(r, 1500); });
  }
  throw new Error('Arc Reactor job timed out');
}


// ── INTEL PROTOCOL — HUD panel ────────────────────────────────────────
let _intelPollTimer = null;
let _intelActiveJobs = new Set();
let _intelLastLoad = 0;

async function loadIntel() {
  const el = document.getElementById('intel-list');
  if (!el) return;
  _intelLastLoad = Date.now();

  try {
    // Fetch recent research + tool_loop jobs
    const [resJobs, toolJobs] = await Promise.all([
      api('arc?action=jobs&status=&limit=20').catch(() => []),
      Promise.resolve([]),
    ]);
    const jobs = Array.isArray(resJobs) ? resJobs.filter(j => ['research','tool_loop','llm'].includes(j.job_type)) : [];

    if (!jobs.length) {
      el.innerHTML = '<div class="intel-empty">◈ NO INTEL JOBS<br><span style="opacity:0.5">Say "research [topic]" to activate</span></div>';
      stopIntelPolling();
      return;
    }

    // Check for active jobs
    const hasActive = jobs.some(j => j.status === 'queued' || j.status === 'running');
    if (hasActive) startIntelPolling(); else stopIntelPolling();

    let html = '<button class="intel-new-btn" onclick="intelPrompt()">⚡ NEW RESEARCH</button>';
    for (const job of jobs) {
      const isOpen = _intelActiveJobs.has(job.id) || job.status === 'running';
      const statusClass = job.status === 'done' ? 'done' : job.status === 'failed' ? 'failed' : 'running';
      const statusLabel = job.status === 'queued' ? 'QUEUED' : job.status === 'running' ? '● ACTIVE' : job.status.toUpperCase();
      const typeLabel = job.job_type === 'research' ? '◈ INTEL' : job.job_type === 'tool_loop' ? '⚡ IRON' : '◈ LLM';

      // Get result details if done
      let bodyHtml = '';
      if (job.status === 'done' && job.result) {
        let r = job.result;
        if (typeof r === 'string') { try { r = JSON.parse(r); } catch(e) {} }
        if (typeof r === 'object') {
          const synthesis = (r.synthesis || r.result || r.response || '').trim();
          const sources   = r.sources || [];
          const query     = r.query || r.task || '';
          const provider  = r.provider || '';

          bodyHtml = `<div class="intel-card-body">`;
          if (provider) bodyHtml += `<div style="font-size:0.55rem;color:var(--text-dim);margin:6px 0 2px;font-family:var(--font-mono)">PROVIDER: ${provider.toUpperCase()} · SOURCES: ${r.source_count||sources.length||'—'}</div>`;
          if (synthesis) bodyHtml += `<div class="synthesis">${escHtml(synthesis.substring(0, 1500))}${synthesis.length>1500?'\n\n[...truncated — view in admin]':''}</div>`;
          if (sources.length) {
            bodyHtml += '<div class="intel-sources"><div style="font-size:0.55rem;letter-spacing:2px;color:var(--text-dim);margin-bottom:4px;font-family:var(--font-display)">SOURCES</div>';
            sources.slice(0,5).forEach((s,i) => {
              const title = escHtml((s.title||s.url||'').substring(0,60));
              const url   = escHtml(s.url||'');
              bodyHtml += `<div class="intel-source">${i+1}. <a href="${url}" target="_blank" rel="noopener">${title||url}</a></div>`;
            });
            bodyHtml += '</div>';
          }
          bodyHtml += '</div>';
        }
      } else if (job.status === 'running' || job.status === 'queued') {
        const typeMsg = job.job_type === 'research' ? 'Searching sources and extracting content...' : 'Executing tool loop...';
        bodyHtml = `<div class="intel-card-body"><div style="font-size:0.62rem;color:var(--text-dim);padding:8px 0;font-family:var(--font-mono)">${typeMsg}</div></div>`;
      } else if (job.status === 'failed' && job.error) {
        bodyHtml = `<div class="intel-card-body"><div style="font-size:0.62rem;color:var(--red);padding:8px 0;font-family:var(--font-mono)">${escHtml(job.error.substring(0,200))}</div></div>`;
      }

      const queryText = job.created_by ? job.created_by.replace('chat:', '').replace(/session.*/, '') : '';
      const ts = job.created_at ? new Date(job.created_at).toLocaleTimeString() : '';

      html += `<div class="intel-card${(isOpen && bodyHtml) ? ' open':''}" id="intel-card-${job.id}">
        <div class="intel-card-head" onclick="toggleIntelCard(${job.id})">
          <span style="font-size:0.55rem;color:var(--text-dim);font-family:var(--font-mono);flex-shrink:0">${typeLabel}</span>
          <span class="intel-card-query">#${job.id} ${escHtml((job.created_by||'').replace('chat:','').substring(0,40))}</span>
          <span style="font-size:0.55rem;color:var(--text-dim);flex-shrink:0;font-family:var(--font-mono)">${ts}</span>
          <span class="intel-card-status ${statusClass}">${statusLabel}</span>
        </div>
        ${bodyHtml}
      </div>`;
    }
    el.innerHTML = html;

  } catch(e) {
    if (el) el.innerHTML = '<div class="intel-empty">INTEL OFFLINE</div>';
  }
}

function toggleIntelCard(id) {
  const card = document.getElementById('intel-card-' + id);
  if (!card) return;
  if (_intelActiveJobs.has(id)) _intelActiveJobs.delete(id);
  else _intelActiveJobs.add(id);
  card.classList.toggle('open');
}

function startIntelPolling() {
  if (_intelPollTimer) return;
  _intelPollTimer = setInterval(() => {
    if (document.getElementById('tab-intel')?.classList.contains('active')) {
      loadIntel();
    }
  }, 4000);
}

function stopIntelPolling() {
  if (_intelPollTimer) { clearInterval(_intelPollTimer); _intelPollTimer = null; }
}

function escHtml(s) {
  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}

function intelPrompt() {
  const input = document.getElementById('textInput');
  if (input) { input.value = 'research '; input.focus(); }
}

// Called when arc_job is returned from chat response
function onArcJobStarted(jobId, jobType) {
  const commsTypes = ['arc:gmail_triage', 'arc:send_email', 'arc:compose_email', 'arc:schedule_event', 'arc:meeting_prep'];
  if (commsTypes.includes(jobType)) {
    const commsBtn = document.getElementById('tab-btn-comms');
    if (commsBtn) commsBtn.click();
    startCommsPolling();
  } else {
    _intelActiveJobs.add(jobId);
    const intelTab = document.querySelector('[onclick*="switchTab(\'intel\')"]');
    if (intelTab) intelTab.click();
    startIntelPolling();
  }
}

// ── COMMS PROTOCOL — email triage HUD ────────────────────────────────────
let _commsPollTimer  = null;
let _commsFilter     = 'priority';
let _commsOpenCards  = new Set();

async function loadComms() {
  const el = document.getElementById('comms-list');
  if (!el) return;

  try {
    const res = await api('arc?action=triage&limit=50&filter=' + _commsFilter);
    const items = Array.isArray(res) ? res : (res.items || []);

    if (!items.length) {
      el.innerHTML = '<button class="comms-triage-btn" onclick="commsTriageNow()">◈ TRIAGE INBOX NOW</button>'
        + '<div class="comms-empty">◈ NO TRIAGE DATA<br><span style="opacity:0.5">Say "check my email" to activate</span></div>';
      stopCommsPolling();
      return;
    }

    const catOrder = {urgent:0, action:1, reply:2, meeting:3, info:4, promo:5, spam:6};
    const catIcons = {urgent:'🔴', action:'⚡', reply:'◈', meeting:'📅', info:'ℹ', promo:'📢', spam:'🗑'};

    let html = '<div style="display:flex;gap:5px;margin-bottom:5px">';
    html += '<button class="comms-triage-btn" style="flex:3;margin-bottom:0" onclick="commsTriageNow()">◈ TRIAGE INBOX</button>';
    html += '<button class="comms-compose-btn" style="flex:2;margin-bottom:0" onclick="commsShowCompose()">+ COMPOSE</button>';
    html += '</div>';
    html += '<div class="comms-header-bar">';
    for (const [f, label] of [['priority','PRIORITY'],['urgent','URGENT'],['action','ACTION'],['all','ALL']]) {
      html += `<div class="comms-filter-btn${_commsFilter===f?' active':''}" onclick="commsSetFilter('${f}')">${label}</div>`;
    }
    html += '</div>';

    for (const item of items) {
      const cat      = item.category || 'info';
      const icon     = catIcons[cat] || '◈';
      const prio     = item.priority || 0;
      const isOpen   = _commsOpenCards.has(item.id);
      const hasReply = item.draft_reply && item.draft_reply.trim().length > 5;

      html += `<div class="comms-card${isOpen?' open':''}" id="comms-card-${item.id}">
        <div class="comms-card-head" onclick="toggleCommsCard(${item.id})">
          <span class="comms-card-cat ${cat}">${icon} ${cat.toUpperCase()}</span>
          <span class="comms-card-subject">${escHtml((item.subject||'(no subject)').substring(0,60))}</span>
          <span class="comms-prio">${prio}/10</span>
        </div>
        <div class="comms-card-body">
          <div class="comms-card-from">FROM: ${escHtml((item.from_name||item.from_email||'').substring(0,50))}</div>
          <div class="comms-card-summary">${escHtml(item.summary||'')}</div>
          ${hasReply ? `<div class="comms-draft-label">DRAFT REPLY</div><div class="comms-draft" id="comms-draft-${item.id}">${escHtml(item.draft_reply)}</div>` : ''}
          <div style="display:flex;gap:5px;margin-top:8px">
            ${hasReply ? `<button class="comms-send-btn" id="comms-send-${item.id}" onclick="commsSendReply(${item.id})">◈ SEND REPLY</button>` : ''}
            ${hasReply ? `<button onclick="commsCopyReply(${item.id})" style="flex:1;background:rgba(0,212,255,0.05);border:1px solid var(--panel-border);border-radius:3px;padding:3px 6px;color:var(--text-dim);font-family:var(--font-display);font-size:0.5rem;letter-spacing:1px;cursor:pointer">COPY</button>` : ''}
            <button onclick="commsDismiss(${item.id})" style="flex:1;background:rgba(255,255,255,0.03);border:1px solid var(--panel-border);border-radius:3px;padding:3px 6px;color:var(--text-dim);font-family:var(--font-display);font-size:0.5rem;letter-spacing:1px;cursor:pointer">DISMISS</button>
          </div>
        </div>
      </div>`;
    }

    el.innerHTML = html;

  } catch(e) {
    if (el) el.innerHTML = '<div class="comms-empty">COMMS OFFLINE</div>';
  }
}

function toggleCommsCard(id) {
  const card = document.getElementById('comms-card-' + id);
  if (!card) return;
  if (_commsOpenCards.has(id)) _commsOpenCards.delete(id);
  else _commsOpenCards.add(id);
  card.classList.toggle('open');
}

function commsSetFilter(f) {
  _commsFilter = f;
  loadComms();
}

async function commsDismiss(id) {
  await api('arc?action=triage_action&id=' + id, 'POST', {action: 'dismissed'}).catch(() => {});
  loadComms();
}

async function commsCopyReply(id) {
  const draft = document.querySelector(`#comms-draft-${id}`);
  if (draft) {
    navigator.clipboard.writeText(draft.innerText).catch(() => {});
    const btn = document.querySelector(`#comms-card-${id} [onclick*="commsCopyReply"]`);
    if (btn) { btn.textContent = 'COPIED!'; setTimeout(() => btn.textContent = 'COPY', 1500); }
  }
}

async function commsSendReply(id) {
  const btn  = document.getElementById('comms-send-' + id);
  const draft = document.getElementById('comms-draft-' + id);
  if (!btn || !draft) return;
  btn.disabled = true;
  btn.textContent = '◈ SENDING…';
  try {
    const res = await api('arc', 'POST', {
      action:  'job_create',
      type:    'send_email',
      payload: { triage_id: id, content: draft.innerText },
      priority: 8,
    });
    if (res.job_id) {
      btn.textContent = '◈ SENT ✓';
      btn.style.color = '#00ff88';
      setTimeout(() => loadComms(), 3000);
      loadCommsOutbox();
    } else {
      btn.disabled = false;
      btn.textContent = '◈ SEND REPLY';
      alert('Send failed: ' + (res.error || 'unknown error'));
    }
  } catch(e) {
    btn.disabled = false;
    btn.textContent = '◈ SEND REPLY';
  }
}

function commsShowCompose() {
  const existing = document.getElementById('comms-compose-modal');
  if (existing) existing.remove();
  const modal = document.createElement('div');
  modal.className = 'comms-compose-modal';
  modal.id = 'comms-compose-modal';
  modal.innerHTML = `
    <div class="comms-compose-inner">
      <div class="comms-compose-title">◈ COMPOSE MESSAGE</div>
      <select id="cc-account" class="comms-compose-field" style="cursor:pointer">
        <option value="gmail">Gmail</option>
        <option value="icloud">iCloud</option>
      </select>
      <input id="cc-to" class="comms-compose-field" placeholder="To: email address" type="email">
      <input id="cc-subject" class="comms-compose-field" placeholder="Subject">
      <textarea id="cc-instructions" class="comms-compose-field" rows="4" placeholder="Describe what to say (AI will draft it)"></textarea>
      <div id="cc-preview" style="display:none">
        <div class="comms-draft-label">DRAFTED MESSAGE</div>
        <div class="comms-draft" id="cc-preview-body" style="max-height:200px"></div>
      </div>
      <div class="comms-compose-actions">
        <button class="comms-send-btn" style="flex:1" onclick="commsComposeDraft()">◈ DRAFT</button>
        <button class="comms-send-btn" style="flex:1;display:none" id="cc-send-btn" onclick="commsComposeAndSend()">◈ SEND NOW</button>
        <button onclick="document.getElementById('comms-compose-modal').remove()" style="flex:1;background:rgba(255,255,255,0.03);border:1px solid var(--panel-border);border-radius:3px;padding:3px 6px;color:var(--text-dim);font-family:var(--font-display);font-size:0.5rem;letter-spacing:1px;cursor:pointer">CANCEL</button>
      </div>
      <div id="cc-status" style="font-family:var(--font-mono);font-size:0.55rem;color:var(--cyan);margin-top:6px;min-height:14px"></div>
    </div>`;
  document.body.appendChild(modal);
  modal.addEventListener('click', e => { if (e.target === modal) modal.remove(); });
}

let _ccDraftedBody = '';

async function commsComposeDraft() {
  const to           = document.getElementById('cc-to')?.value.trim();
  const subject      = document.getElementById('cc-subject')?.value.trim();
  const instructions = document.getElementById('cc-instructions')?.value.trim();
  const account      = document.getElementById('cc-account')?.value;
  const status       = document.getElementById('cc-status');
  if (!to || !instructions) { if (status) status.textContent = 'Please fill in To and message description.'; return; }
  if (status) status.textContent = '◈ DRAFTING…';
  try {
    const res = await api('arc', 'POST', {
      action: 'job_create', type: 'compose_email',
      payload: { recipient: to, subject, instructions, account, auto_send: false },
      priority: 7,
    });
    if (!res.job_id) throw new Error(res.error || 'No job');
    // poll for result
    let attempts = 0;
    const poll = async () => {
      const job = await api('arc?action=job_get&id=' + res.job_id);
      if (job.status === 'done' && job.result?.drafted_body) {
        _ccDraftedBody = job.result.drafted_body;
        document.getElementById('cc-preview-body').textContent = _ccDraftedBody;
        document.getElementById('cc-preview').style.display = 'block';
        document.getElementById('cc-send-btn').style.display = '';
        if (status) status.textContent = '◈ DRAFT READY — Review and send';
      } else if (job.status === 'failed') {
        if (status) status.textContent = '✗ Draft failed: ' + (job.error || 'unknown');
      } else if (attempts++ < 20) {
        setTimeout(poll, 1500);
      } else {
        if (status) status.textContent = '◈ Job still running — check INTEL tab';
      }
    };
    setTimeout(poll, 1500);
  } catch(e) {
    if (status) status.textContent = '✗ Error: ' + e.message;
  }
}

async function commsComposeAndSend() {
  const to      = document.getElementById('cc-to')?.value.trim();
  const subject = document.getElementById('cc-subject')?.value.trim();
  const account = document.getElementById('cc-account')?.value;
  const status  = document.getElementById('cc-status');
  const btn     = document.getElementById('cc-send-btn');
  if (!to || !_ccDraftedBody) return;
  if (btn) { btn.disabled = true; btn.textContent = '◈ SENDING…'; }
  if (status) status.textContent = '◈ TRANSMITTING…';
  try {
    const res = await api('arc', 'POST', {
      action: 'job_create', type: 'send_email',
      payload: { to_email: to, subject, body: _ccDraftedBody, account },
      priority: 9,
    });
    if (res.job_id) {
      if (status) status.textContent = '◈ SENT ✓ (Job #' + res.job_id + ')';
      setTimeout(() => {
        document.getElementById('comms-compose-modal')?.remove();
        loadCommsOutbox();
      }, 1500);
    } else {
      if (btn) { btn.disabled = false; btn.textContent = '◈ SEND NOW'; }
      if (status) status.textContent = '✗ Send failed: ' + (res.error || 'unknown');
    }
  } catch(e) {
    if (btn) { btn.disabled = false; btn.textContent = '◈ SEND NOW'; }
    if (status) status.textContent = '✗ Error: ' + e.message;
  }
}

async function loadCommsOutbox() {
  const el = document.getElementById('comms-outbox');
  if (!el) return;
  try {
    const data = await api('arc?action=comms_sent&limit=20');
    const sent = Array.isArray(data) ? data : (data.sent || []);
    if (!sent.length) {
      el.innerHTML = '<div class="comms-empty" style="padding:10px">No sent messages yet</div>';
      return;
    }
    const statusColor = {sent:'#00ff88', failed:'#ff2244', queued:'#ffd700'};
    let html = '';
    for (const m of sent) {
      const ts = m.sent_at ? new Date(m.sent_at + 'Z').toLocaleString() : '—';
      const sc = m.status || 'sent';
      html += `<div class="comms-outbox-card">
        <div style="display:flex;justify-content:space-between;align-items:center">
          <div class="comms-outbox-to">TO: ${escHtml((m.to_email||'').substring(0,40))}</div>
          <span class="comms-outbox-status ${sc}">${sc.toUpperCase()}</span>
        </div>
        <div class="comms-outbox-subj">${escHtml((m.subject||'(no subject)').substring(0,60))}</div>
        <div style="font-family:var(--font-mono);font-size:0.48rem;color:var(--text-dim)">${ts} · ${m.account||'gmail'}</div>
      </div>`;
    }
    el.innerHTML = html;
  } catch(e) {
    el.innerHTML = '<div class="comms-empty" style="padding:10px">OUTBOX OFFLINE</div>';
  }
}

function commsTriageNow() {
  const input = document.getElementById('textInput');
  if (input) { input.value = 'check my email'; input.dispatchEvent(new KeyboardEvent('keydown', {key:'Enter',keyCode:13,bubbles:true})); }
}

function startCommsPolling() {
  if (_commsPollTimer) return;
  _commsPollTimer = setInterval(() => {
    if (document.getElementById('tab-comms')?.classList.contains('active')) { loadComms(); loadCommsOutbox(); }
  }, 8000);
}

function stopCommsPolling() {
  if (_commsPollTimer) { clearInterval(_commsPollTimer); _commsPollTimer = null; }
}

// ── GUARDIAN MODE ─────────────────────────────────────────────────────────────
let _guardianPollTimer   = null;
let _guardianChatTimer   = null;
let _guardianLastChat    = '';
let _guardianUnread      = 0;

async function loadGuardian() {
  const el = document.getElementById('guardian-list');
  if (!el) return;

  try {
    const [statusData, eventsData] = await Promise.all([
      api('arc?action=guardian_status').catch(() => ({})),
      api('arc?action=guardian_events&limit=40').catch(() => []),
    ]);

    const events  = Array.isArray(eventsData) ? eventsData : [];
    const status  = statusData || {};
    const counts  = status.counts || {};
    const unread  = parseInt(counts.unread || 0);
    const critU   = parseInt(counts.critical_unread || 0);

    _guardianUnread = unread;
    _updateGuardianBadge(unread, critU);

    const lastScan = status.last_scan
      ? new Date(status.last_scan + 'Z').toLocaleTimeString()
      : '—';

    let html = `<div style="padding:6px 10px 4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap">
      <span style="font-family:var(--font-display);font-size:0.5rem;letter-spacing:2px;color:var(--cyan)">◈ GUARDIAN MODE</span>
      <span style="font-family:var(--font-mono);font-size:0.5rem;color:${status.enabled?'var(--green)':'var(--red)'}">
        ${status.enabled ? '● ACTIVE' : '○ INACTIVE'}
      </span>
      <span style="font-family:var(--font-mono);font-size:0.5rem;color:var(--text-dim)">SCAN: ${lastScan}</span>
      ${unread ? `<button onclick="guardianAckAll()" class="guardian-ack-btn" style="margin-left:auto">ACK ALL (${unread})</button>` : '<span style="margin-left:auto"></span>'}
      <button onclick="guardianSitrep()" style="background:rgba(0,212,255,0.08);border:1px solid var(--panel-border);color:var(--cyan);padding:3px 7px;border-radius:3px;font-family:var(--font-display);font-size:0.48rem;letter-spacing:1px;cursor:pointer">◈ SITREP</button>
    </div>`;

    if (!events.length) {
      html += '<div style="text-align:center;padding:24px 10px;font-family:var(--font-mono);font-size:0.6rem;color:var(--text-dim);letter-spacing:1px">◈ ALL CLEAR<br><span style="opacity:0.5">Guardian is watching...</span></div>';
    } else {
      for (const ev of events) {
        const sev    = ev.severity || 'info';
        const acked  = ev.acknowledged;
        const ts     = ev.created_at ? new Date(ev.created_at).toLocaleTimeString() : '';
        const typeIco = {agent_offline:'⚠',agent_online:'✓',cpu_high:'⚡',
                          mem_high:'⚡',disk_high:'💾',service_down:'✗',
                          service_recovered:'✓',sitrep:'◈',anomaly:'◈'}[ev.event_type] || '◈';
        html += `<div class="guardian-event ${sev}${acked?' acked':''}" id="gev-${ev.id}">
          <span class="guardian-sev ${sev}">${sev.toUpperCase()}</span>
          <div style="flex:1">
            <div class="guardian-msg">${typeIco} ${escHtml(ev.message||'')}</div>
            ${ev.ai_analysis ? `<div class="guardian-ai">${escHtml(ev.ai_analysis.substring(0,200))}</div>` : ''}
          </div>
          <div style="display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0">
            <span class="guardian-time">${ts}</span>
            ${!acked ? `<button class="guardian-ack-btn" onclick="guardianAck(${ev.id})">ACK</button>` : ''}
          </div>
        </div>`;
      }
    }
    el.innerHTML = html;
    startGuardianPolling();

  } catch(e) {
    if (el) el.innerHTML = '<div style="text-align:center;padding:20px;font-family:var(--font-mono);font-size:0.6rem;color:var(--text-dim)">GUARDIAN OFFLINE</div>';
  }
}

function _updateGuardianBadge(unread, critical) {
  const dot    = document.getElementById('bb-guardian-dot');
  const badge  = document.getElementById('bb-guardian-badge');
  const status = document.getElementById('bb-guardian-status');
  if (!dot) return;
  dot.className = 'bb-dot';
  if (critical > 0) {
    dot.classList.add('critical'); status.textContent = 'ALERT'; status.style.color = 'var(--red)';
  } else if (unread > 0) {
    dot.classList.add('warning'); status.textContent = 'WARNING'; status.style.color = '#f5a623';
  } else {
    dot.classList.add('all-clear'); status.textContent = 'CLEAR'; status.style.color = 'var(--green)';
  }
  if (unread > 0) {
    badge.textContent = unread; badge.style.display = 'inline';
  } else {
    badge.style.display = 'none';
  }
}

async function guardianAck(id) {
  await api('arc?action=guardian_ack&id=' + id).catch(() => {});
  const ev = document.getElementById('gev-' + id);
  if (ev) ev.classList.add('acked');
  _guardianUnread = Math.max(0, _guardianUnread - 1);
  _updateGuardianBadge(_guardianUnread, 0);
}

async function guardianAckAll() {
  await api('arc?action=guardian_ack').catch(() => {});
  loadGuardian();
}

function guardianSitrep() {
  const input = document.getElementById('textInput');
  if (input) { input.value = 'sitrep'; input.dispatchEvent(new KeyboardEvent('keydown', {key:'Enter',keyCode:13,bubbles:true})); }
}

function switchGuardianTab() {
  const btn = document.getElementById('tab-btn-guardian');
  if (btn) btn.click();
}

function startGuardianPolling() {
  if (_guardianPollTimer) return;
  _guardianPollTimer = setInterval(() => {
    if (document.getElementById('tab-guardian')?.classList.contains('active')) loadGuardian();
    else _refreshGuardianBadge();
  }, 30000);
}

async function _refreshGuardianBadge() {
  const s = await api('arc?action=guardian_status').catch(() => null);
  if (!s) return;
  const counts = s.counts || {};
  _updateGuardianBadge(parseInt(counts.unread||0), parseInt(counts.critical_unread||0));
}

// Proactive chat polling — checks for guardian-injected messages every 30s
let _proactiveChatLastId = 0;
async function _pollProactiveChat() {
  try {
    const rows = await api('arc?action=guardian_chat').catch(() => []);
    if (!Array.isArray(rows)) return;
    for (const row of rows) {
      if (row.id > _proactiveChatLastId) {
        _proactiveChatLastId = row.id;
        // Don't spam on first load — only show messages from last 5 min
        const age = Date.now() - new Date(row.created_at + 'Z').getTime();
        if (age < 300000) {
          addMessage('jarvis', row.message);
          speak(row.message);
        }
      }
    }
  } catch(e) {}
}

// ── MISSION OPS HUD ───────────────────────────────────────────────────────────
let _missionsOpenCards = new Set();

async function loadMissionsHud() {
  const el = document.getElementById('missions-hud');
  if (!el) return;
  try {
    const missions = await api('arc?action=missions');
    const list = Array.isArray(missions) ? missions : [];

    let html = '<button class="mission-new-btn" onclick="window.open(\'/admin#missions\',\'_blank\')">◈ MANAGE MISSIONS IN ADMIN</button>';

    if (!list.length) {
      html += '<div class="comms-empty">◈ NO MISSIONS<br><span style="opacity:0.5">Create workflows in Admin → Mission Ops</span></div>';
      el.innerHTML = html;
      return;
    }

    const trigIcons = {manual:'🖐', schedule:'⏱', guardian_event:'🛡', email_keyword:'📧'};
    for (const m of list) {
      const isOpen  = _missionsOpenCards.has(m.id);
      const icon    = trigIcons[m.trigger_type] || '◈';
      const enabled = m.enabled;
      const lastRun = m.last_run_at ? new Date(m.last_run_at+'Z').toLocaleTimeString() : 'never';
      html += `<div class="mission-card${isOpen?' open':''}" id="mission-card-${m.id}">
        <div class="mission-card-head" onclick="toggleMissionCard(${m.id})">
          <span style="opacity:${enabled?1:0.35}">${icon}</span>
          <span class="mission-card-name" style="opacity:${enabled?1:0.45}">${escHtml(m.name)}</span>
          <span class="mission-card-trigger">${m.trigger_type.replace('_',' ').toUpperCase()}</span>
          <span style="font-family:var(--font-mono);font-size:0.48rem;color:var(--text-dim)">${m.run_count||0} runs</span>
        </div>
        <div class="mission-card-body">
          ${m.description ? `<div style="font-size:0.58rem;color:var(--text-dim);margin:6px 0">${escHtml(m.description)}</div>` : ''}
          <div style="font-family:var(--font-mono);font-size:0.52rem;color:var(--text-dim);margin:4px 0">Last run: ${lastRun} · ${m.run_count||0} total runs</div>
          <div class="mission-run-bar">
            <button class="mission-run-btn" id="mission-run-btn-${m.id}" onclick="hudRunMission(${m.id})"${!enabled?' disabled title="Mission disabled"':''}>▶ RUN NOW</button>
          </div>
          <div id="mission-run-result-${m.id}" style="font-family:var(--font-mono);font-size:0.52rem;margin-top:6px;min-height:12px"></div>
        </div>
      </div>`;
    }
    el.innerHTML = html;
  } catch(e) {
    if (el) el.innerHTML = '<div class="comms-empty">MISSIONS OFFLINE</div>';
  }
}

function toggleMissionCard(id) {
  const card = document.getElementById('mission-card-' + id);
  if (!card) return;
  if (_missionsOpenCards.has(id)) _missionsOpenCards.delete(id);
  else _missionsOpenCards.add(id);
  card.classList.toggle('open');
}

async function hudRunMission(id) {
  const btn = document.getElementById('mission-run-btn-' + id);
  const res = document.getElementById('mission-run-result-' + id);
  if (btn) { btn.disabled = true; btn.textContent = '◈ RUNNING…'; }
  if (res) res.textContent = '';
  try {
    const data = await api('arc?action=mission_run&id=' + id, 'POST', {trigger_source: 'hud'});
    const s = data.status || 'done';
    const color = s === 'done' ? '#00ff88' : s === 'failed' ? '#ff2244' : '#ffd700';
    if (res) res.style.color = color;
    if (res) res.textContent = `◈ ${s.toUpperCase()} — Run #${data.run_id||'?'} · ${data.steps||0} steps completed`;
    if (btn) { btn.disabled = false; btn.textContent = '▶ RUN NOW'; }
    setTimeout(loadMissionsHud, 2000);
  } catch(e) {
    if (btn) { btn.disabled = false; btn.textContent = '▶ RUN NOW'; }
    if (res) res.textContent = '✗ Run failed';
  }
}

// ── DIRECTIVES HUD ────────────────────────────────────────────────────────────
let _dirOpenCards = new Set();

async function loadDirectivesHud() {
  const el = document.getElementById('directives-hud');
  if (!el) return;
  try {
    const d    = await api('directives/list?status=active');
    const list = (d.directives || []);

    let html = '<button class="dir-admin-btn" onclick="window.open(\'/admin#directives\',\'_blank\')">◈ MANAGE IN ADMIN</button>';

    if (!list.length) {
      html += '<div class="comms-empty">◈ NO ACTIVE DIRECTIVES<br><span style="opacity:0.5">Create objectives in Admin → Directives</span></div>';
      el.innerHTML = html;
      return;
    }

    const catColors = {work:'var(--cyan)',personal:'#a78bfa',health:'#00ff88',finance:'#ffd700',home:'var(--panel-border)',other:'var(--text-dim)'};
    for (const dir of list) {
      const pct      = Math.min(100, Math.round(dir.progress || 0));
      const isOpen   = _dirOpenCards.has(dir.id);
      const color    = catColors[dir.category] || 'var(--cyan)';
      const fillColor = pct >= 80 ? '#00ff88' : pct >= 40 ? '#ffd700' : '#ff6644';
      const daysLeft  = dir.target_date
        ? Math.ceil((new Date(dir.target_date) - new Date()) / 86400000) : null;
      const dueTxt = daysLeft !== null
        ? (daysLeft < 0 ? `OVERDUE ${Math.abs(daysLeft)}d` : `${daysLeft}d left`)
        : '';
      const dueColor = daysLeft !== null && daysLeft < 0 ? '#ff2244' : daysLeft < 14 ? '#ffd700' : 'var(--text-dim)';

      html += `<div class="dir-card${isOpen?' open':''}" id="dir-card-${dir.id}">
        <div class="dir-card-head" onclick="toggleDirCard(${dir.id})">
          <span style="font-family:var(--font-mono);font-size:0.55rem;color:${color};flex-shrink:0">${dir.category.toUpperCase()}</span>
          <span class="dir-card-title" style="color:${color}">${escHtml(dir.title)}</span>
          <span style="font-family:var(--font-mono);font-size:0.55rem;color:${fillColor};flex-shrink:0">${pct}%</span>
          ${dueTxt ? `<span style="font-family:var(--font-mono);font-size:0.48rem;color:${dueColor};flex-shrink:0">${dueTxt}</span>` : ''}
        </div>
        <div class="dir-card-body">
          <div class="dir-progress-bar"><div class="dir-progress-fill" style="width:${pct}%;background:${fillColor}"></div></div>
          <div style="font-family:var(--font-mono);font-size:0.5rem;color:var(--text-dim);margin-bottom:6px">${dir.kr_count||0} KEY RESULTS · ${dir.link_count||0} LINKED ITEMS</div>
          <button onclick="hudDirectiveReview(${dir.id})" style="background:rgba(0,212,255,0.06);border:1px solid rgba(0,212,255,0.2);border-radius:3px;padding:3px 8px;color:var(--cyan);font-family:var(--font-display);font-size:0.48rem;letter-spacing:1px;cursor:pointer">◈ AI REVIEW</button>
        </div>
      </div>`;
    }
    el.innerHTML = html;
  } catch(e) {
    if (el) el.innerHTML = '<div class="comms-empty">DIRECTIVES OFFLINE</div>';
  }
}

function toggleDirCard(id) {
  const card = document.getElementById('dir-card-' + id);
  if (!card) return;
  if (_dirOpenCards.has(id)) _dirOpenCards.delete(id);
  else _dirOpenCards.add(id);
  card.classList.toggle('open');
}

async function hudDirectiveReview(id) {
  const res = await api('arc?action=job_create', 'POST', {
    type: 'directive_review', payload: {directive_id: id, provider: 'claude'}, priority: 6,
  });
  if (res.job_id) {
    addMessage('jarvis', `◈ DIRECTIVE REVIEW initiated (Job #${res.job_id}). Analyzing objectives and key results now. Results will appear here shortly.`);
    speak(`Directive review underway. I'll brief you on your progress in a moment.`);
  }
}

// ── MEMORY CORE — bottom bar count ────────────────────────────────────────────
async function updateMemoryCount() {
  try {
    const stats = await api('memory?action=stats');
    const el    = document.getElementById('bb-memory-count');
    const dot   = document.getElementById('bb-memory-dot');
    if (el && stats) {
      const total = stats.total || 0;
      el.textContent = total + ' FACTS';
      if (dot) dot.style.background = total > 0 ? 'var(--cyan)' : 'rgba(0,212,255,0.3)';
    }
  } catch(e) {}
}

// ── CLEARANCE PROTOCOL HUD ─────────────────────────────────────────────────────
const _clrOpenCards = new Set();

async function updateClearanceBanner() {
  try {
    const pending = await api('arc?action=clearance_pending');
    const list    = Array.isArray(pending) ? pending : [];
    const count   = list.length;
    const banner  = document.getElementById('clearance-banner');
    const badge   = document.getElementById('clr-tab-badge');
    const bcount  = document.getElementById('clr-banner-count');
    if (banner) {
      if (count > 0) {
        banner.classList.add('active');
        if (bcount) bcount.textContent = count;
      } else {
        banner.classList.remove('active');
      }
    }
    if (badge) {
      if (count > 0) { badge.style.display = 'inline'; badge.textContent = count; }
      else badge.style.display = 'none';
    }
  } catch(e) {}
}

async function loadClearanceHud() {
  const el = document.getElementById('clearance-hud');
  if (!el) return;
  try {
    const [pendingRes, rulesRes, historyRes] = await Promise.all([
      api('arc?action=clearance_pending'),
      api('arc?action=clearance_rules'),
      api('arc?action=clearance_history&limit=20')
    ]);
    const pending = Array.isArray(pendingRes) ? pendingRes : [];
    const rules   = Array.isArray(rulesRes)   ? rulesRes   : [];
    const history = Array.isArray(historyRes) ? historyRes : [];

    let html = '<button class="clr-admin-btn" onclick="window.open(\'/admin#clearance\',\'_blank\')">◈ MANAGE CLEARANCE RULES IN ADMIN</button>';

    // Pending requests
    html += `<div style="font-family:var(--font-display);font-size:0.55rem;letter-spacing:2px;color:#ff6680;margin:8px 0 4px">PENDING AUTHORIZATION (${pending.length})</div>`;
    if (!pending.length) {
      html += '<div class="comms-empty" style="color:rgba(255,255,255,0.3);margin-bottom:10px">◈ NO PENDING CLEARANCE REQUESTS</div>';
    } else {
      for (const cr of pending) {
        const isOpen = _clrOpenCards.has(cr.id);
        const pl = typeof cr.job_payload === 'string' ? JSON.parse(cr.job_payload || '{}') : (cr.job_payload || {});
        const created = cr.created_at ? new Date(cr.created_at).toLocaleString() : '';
        const expires = cr.expires_at ? new Date(cr.expires_at).toLocaleString() : '';
        html += `<div class="clr-card${isOpen?' open':''}" id="clr-card-${cr.id}">
          <div class="clr-card-head" onclick="toggleClrCard(${cr.id})">
            <span class="clr-card-type">${escHtml(cr.job_type.toUpperCase().replace(/_/g,' '))}</span>
            <span class="clr-card-risk ${cr.risk_level}">${cr.risk_level.toUpperCase()}</span>
            <span style="font-family:var(--font-mono);font-size:0.48rem;color:var(--text-dim)">#${cr.id}</span>
          </div>
          <div class="clr-card-body">
            <div class="clr-card-desc">${escHtml(cr.description || 'No description')}</div>
            <div style="font-family:var(--font-mono);font-size:0.48rem;color:var(--text-dim);margin-bottom:4px">
              Requested: ${created}${expires ? ' · Expires: ' + expires : ''}
            </div>
            <div style="font-family:var(--font-mono);font-size:0.48rem;color:var(--text-dim);margin-bottom:6px;word-break:break-all">
              Payload: ${escHtml(JSON.stringify(pl))}
            </div>
            <div class="clr-action-bar">
              <button class="clr-approve-btn" onclick="hudClearanceDecide(${cr.id},'approve')">◈ AUTHORIZE</button>
              <button class="clr-deny-btn" onclick="hudClearanceDecide(${cr.id},'deny')">✕ DENY</button>
            </div>
          </div>
        </div>`;
      }
    }

    // Rules
    html += `<div style="font-family:var(--font-display);font-size:0.55rem;letter-spacing:2px;color:var(--text-dim);margin:12px 0 4px">CLEARANCE RULES</div>`;
    if (!rules.length) {
      html += '<div class="comms-empty" style="color:rgba(255,255,255,0.3);margin-bottom:10px">No rules configured</div>';
    } else {
      html += '<div style="background:rgba(0,0,0,0.2);border-radius:var(--r);padding:6px 10px;margin-bottom:8px">';
      for (const r of rules) {
        const enClass = r.enabled ? 'clr-rule-enabled' : 'clr-rule-disabled';
        const enLabel = r.enabled ? 'ON' : 'OFF';
        const reqLabel = r.require_approval ? 'REQUIRES APPROVAL' : 'AUTO-ALLOW';
        const autoTxt = r.auto_approve_after_min ? ` · AUTO ${r.auto_approve_after_min}m` : '';
        html += `<div class="clr-rule-row">
          <span class="clr-rule-type">${r.job_type.replace(/_/g,' ').toUpperCase()}</span>
          <span class="clr-card-risk ${r.risk_level}" style="font-family:var(--font-mono);font-size:0.48rem;padding:1px 4px;border-radius:2px;border:1px solid">${r.risk_level.toUpperCase()}</span>
          <span style="font-family:var(--font-mono);font-size:0.48rem;color:var(--text-dim)">${reqLabel}${autoTxt}</span>
          <button class="clr-rule-toggle ${enClass}" onclick="hudClearanceRuleToggle(${r.id},${r.enabled?0:1})">${enLabel}</button>
        </div>`;
      }
      html += '</div>';
    }

    // Recent history
    html += `<div style="font-family:var(--font-display);font-size:0.55rem;letter-spacing:2px;color:var(--text-dim);margin:8px 0 4px">RECENT HISTORY</div>`;
    const recentDecided = history.filter(h => h.status !== 'pending').slice(0, 10);
    if (!recentDecided.length) {
      html += '<div class="comms-empty" style="color:rgba(255,255,255,0.3)">No history yet</div>';
    } else {
      html += '<div style="background:rgba(0,0,0,0.2);border-radius:var(--r);padding:6px 10px">';
      for (const h of recentDecided) {
        const ts = h.decided_at ? new Date(h.decided_at).toLocaleString() : '';
        html += `<div class="clr-history-row">
          <span class="clr-status-${h.status}">◈</span>
          <span style="flex:1">${h.job_type.replace(/_/g,' ').toUpperCase()}</span>
          <span class="clr-status-${h.status}">${h.status.toUpperCase()}</span>
          <span style="color:rgba(255,255,255,0.3)">${ts}</span>
        </div>`;
      }
      html += '</div>';
    }

    el.innerHTML = html;
    await updateClearanceBanner();
  } catch(e) {
    if (el) el.innerHTML = '<div class="comms-empty">CLEARANCE SYSTEM OFFLINE</div>';
  }
}

function toggleClrCard(id) {
  const card = document.getElementById('clr-card-' + id);
  if (!card) return;
  if (_clrOpenCards.has(id)) _clrOpenCards.delete(id);
  else _clrOpenCards.add(id);
  card.classList.toggle('open');
}

async function hudClearanceDecide(id, action) {
  const label = action === 'approve' ? 'AUTHORIZE' : 'DENY';
  if (!confirm(`${label} clearance request #${id}?`)) return;
  const note = action === 'deny' ? (prompt('Reason for denial (optional):') || '') : '';
  try {
    const res = await api(`arc?action=clearance_${action}&id=${id}`, 'POST', { decided_by: 'admin', note });
    const msg = action === 'approve'
      ? `◈ Clearance #${id} authorized. Job dispatched.`
      : `◈ Clearance #${id} denied${note ? ': ' + note : ''}.`;
    addMessage('jarvis', msg);
    speak(action === 'approve' ? 'Clearance granted. Job dispatched.' : 'Request denied.');
    await loadClearanceHud();
  } catch(e) {
    addMessage('system', 'Clearance action failed.');
  }
}

async function hudClearanceRuleToggle(id, newEnabled) {
  try {
    await api(`arc?action=clearance_rule_update&id=${id}`, 'POST', { enabled: newEnabled });
    await loadClearanceHud();
  } catch(e) {}
}

async function loadAgents() {
  const [listData, metricsData] = await Promise.all([
    api('agent/list'),
    api('agent/status')
  ]);
  const agents  = listData.agents  || [];
  const metrics = metricsData.metrics || {};
  // Fetch sparkline data (non-blocking)
  api('metrics').then(d => { _sparkData = d || {}; renderAgentsTab(agents, metrics); }).catch(() => {});
  renderAgentsTab(agents, metrics);
}

async function addNetworkDevice() {
  const ip   = prompt('IP address (e.g. 10.48.200.43):');
  if (!ip) return;
  const name = prompt('Device name (e.g. Yealink Phone):');
  if (!name) return;
  const type = prompt('Type (server, voip, nas, printer, device):', 'device') || 'device';
  const r = await api('network/add', 'POST', {ip, alias: name, type});
  if (r.error) { alert('Error: ' + r.error); return; }
  loadNetwork();
}

async function deleteNetworkDevice(ip, evt) {
  evt.stopPropagation();
  if (!confirm('Remove ' + ip + ' from the network list?')) return;
  const r = await api('network/delete', 'POST', {ip});
  if (r.error) { alert('Error: ' + r.error); return; }
  loadNetwork();
}

let _agentSparkData = {};
function sparkline(points, width=80, height=20, color='var(--cyan)') {
  if (!points || points.length < 2) return '';
  const max = Math.max(...points, 1);
  const min = Math.min(...points);
  const range = max - min || 1;
  const step = width / (points.length - 1);
  const pts = points.map((v, i) => {
    const x = i * step;
    const y = height - ((v - min) / range) * (height - 2) - 1;
    return `${x.toFixed(1)},${y.toFixed(1)}`;
  }).join(' ');
  return `<svg width="${width}" height="${height}" style="overflow:visible;display:block">
    <polyline points="${pts}" fill="none" stroke="${color}" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round" opacity="0.8"/>
    <circle cx="${((points.length-1)*step).toFixed(1)}" cy="${(height - ((points[points.length-1]-min)/range)*(height-2)-1).toFixed(1)}" r="2" fill="${color}"/>
  </svg>`;
}

function renderAgentsTab(agents, metrics) {
  const el = document.getElementById('agents-list');
  if (!el) return;
  if (!agents.length) {
    el.innerHTML = '<div style="font-family:var(--font-mono);font-size:0.75rem;color:var(--text-dim);text-align:center;margin-top:20px">NO AGENTS REGISTERED</div>';
    return;
  }
  el.innerHTML = agents.map(ag => {
    const m   = metrics[ag.agent_id] || {};
    const sys = m.system || {};
    const alive = ag.status === 'online';
    const cpu  = sys.cpu_percent != null ? Math.round(sys.cpu_percent) : '--';
    const mem  = sys.memory ? Math.round(sys.memory.percent) : '--';
    const memUsed = sys.memory ? Math.round(sys.memory.used_mb / 1024 * 10) / 10 + 'GB' : '--';
    const memTot  = sys.memory ? Math.round(sys.memory.total_mb / 1024 * 10) / 10 + 'GB' : '--';
    const disks = sys.disk || [];
    const maxDisk = disks.length ? Math.max(...disks.map(d => parseInt(d.percent)||0)) : null;
    const uptime = sys.uptime ? sys.uptime.human : (alive ? 'ONLINE' : 'OFFLINE');
    const since  = ag.last_seen ? ag.last_seen.replace('T',' ').replace(/\.\d+Z$/,'') : '--';

    const gauge = (val, unit='%', warn=80, crit=90) => {
      const v = typeof val === 'number' ? val : parseInt(val);
      if (isNaN(v)) return `<span style="color:var(--text-dim)">--</span>`;
      const col = v >= crit ? 'var(--red)' : v >= warn ? '#f5a623' : 'var(--green)';
      return `<div style="display:flex;align-items:center;gap:4px">
        <div style="width:50px;height:5px;background:rgba(255,255,255,0.1);border-radius:3px;flex-shrink:0">
          <div style="width:${Math.min(v,100)}%;height:100%;background:${col};border-radius:3px;transition:width 0.5s"></div>
        </div>
        <span style="color:${col};font-size:0.65rem">${v}${unit}</span>
      </div>`;
    };

    const svcs = (sys.services || []).filter(s => s.status !== 'inactive' || true)
      .map(s => `<span style="color:${s.status==='active'?'var(--green)':'var(--red)'};font-size:0.58rem;margin-right:6px">${s.service}: ${s.status}</span>`)
      .join('');

    const ctxKey = 'agent_' + ag.agent_id;
    _panelCtx[ctxKey] = {type:'agent', label: ag.hostname, agent_id: ag.agent_id,
      hostname: ag.hostname, status: ag.status, cpu, mem};

    return `<div class="alert-item ${alive ? '' : 'critical'}" data-ctx-key="${ctxKey}" onclick="selectContext('${ctxKey}')"
      style="flex-direction:column;align-items:stretch;border-left:3px solid ${alive ? 'var(--green)' : 'var(--red)'}">
      <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px">
        <div style="width:8px;height:8px;border-radius:50%;background:${alive ? 'var(--green)' : 'var(--red)'};box-shadow:${alive ? '0 0 6px var(--green)' : 'none'};flex-shrink:0"></div>
        <span style="font-family:var(--font-mono);font-size:0.72rem;color:var(--text);flex:1">${ag.hostname}</span>
        <span style="font-size:0.58rem;color:var(--text-dim)">${ag.agent_type.toUpperCase()} · ${ag.ip_address}</span>
        <span style="font-size:0.58rem;color:${alive ? 'var(--green)' : 'var(--red)'};">${alive ? 'ONLINE' : 'OFFLINE'}</span>
      </div>
      ${alive ? `<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:4px">
        <div><div style="font-size:0.58rem;color:var(--text-dim);margin-bottom:2px">CPU</div>${gauge(cpu)}</div>
        <div><div style="font-size:0.58rem;color:var(--text-dim);margin-bottom:2px">MEM ${memUsed}/${memTot}</div>${gauge(mem)}</div>
        <div><div style="font-size:0.58rem;color:var(--text-dim);margin-bottom:2px">DISK</div>${maxDisk != null ? gauge(maxDisk) : '<span style="color:var(--text-dim)">--</span>'}</div>
      </div>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:4px">
        <div>
          <div style="font-size:0.52rem;color:var(--text-dim);margin-bottom:2px">CPU 2H</div>
          ${sparkline((_agentSparkData[ag.agent_id]||[]).map(p=>p.cpu), 100, 18, 'rgba(0,212,255,0.7)')}
        </div>
        <div>
          <div style="font-size:0.52rem;color:var(--text-dim);margin-bottom:2px">MEM 2H</div>
          ${sparkline((_agentSparkData[ag.agent_id]||[]).map(p=>p.mem), 100, 18, 'rgba(0,255,136,0.7)')}
        </div>
      </div>` : ''}
      <div style="display:flex;align-items:center;justify-content:space-between">
        <div style="font-size:0.58rem;color:var(--text-dim)">UP: ${uptime} · SEEN: ${since}</div>
        ${svcs ? `<div style="font-size:0.58rem">${svcs}</div>` : ''}
      </div>
      ${alive ? `<div style="display:flex;gap:5px;margin-top:6px">
        <button onclick="event.stopPropagation();agentScreenshot('${ag.hostname}')" style="flex:1;background:rgba(0,212,255,0.06);border:1px solid var(--panel-border);border-radius:3px;padding:3px 6px;color:var(--cyan);font-family:var(--font-display);font-size:0.48rem;letter-spacing:1px;cursor:pointer">◈ SCREENSHOT</button>
        <button onclick="event.stopPropagation();agentSysinfo('${ag.hostname}')" style="flex:1;background:rgba(0,212,255,0.06);border:1px solid var(--panel-border);border-radius:3px;padding:3px 6px;color:var(--text-dim);font-family:var(--font-display);font-size:0.48rem;letter-spacing:1px;cursor:pointer">⚡ SYSINFO</button>
      </div>` : ''}
    </div>`;
  }).join('');
}

function openAgentModal() {
  const os = detectOS();
  const title   = document.getElementById('agentModalTitle');
  const content = document.getElementById('agentModalContent');
  const modal   = document.getElementById('agentModal');
  const regKey  = 'f846a9aaf7ce9a61742c63c87c4186052a71d2a580c65518';
  const baseUrl = 'https://jarvis.orbishosting.com/agent';
  const jUrl    = 'https://jarvis.orbishosting.com';

  if (os === 'tablet') {
    title.textContent = '● JARVIS — TABLET / MOBILE';
    content.innerHTML =
      '<div style="color:var(--cyan);font-size:0.75rem;margin-bottom:12px">✓ You\'re viewing JARVIS on a tablet or mobile device.</div>' +
      '<div style="color:var(--text-dim);font-size:0.65rem;line-height:1.6">The JARVIS Agent runs on desktop and server platforms (Windows, macOS, Linux).<br><br>' +
      'Tablets and phones can browse the full JARVIS dashboard but do not need an agent installed — all data comes from your other monitored machines.</div>';
  } else if (_agentOnline) {
    title.textContent = '● AGENT CONNECTED';
    content.innerHTML =
      '<div style="color:var(--green);font-size:0.75rem;margin-bottom:12px">✓ JARVIS Agent is active on this machine.</div>' +
      '<div style="color:var(--text-dim);font-size:0.65rem;line-height:1.8">' +
      '<b style="color:var(--text)">Host:</b> ' + (_myAgent?.hostname||'—') + '<br>' +
      '<b style="color:var(--text)">IP:</b> ' + (_myAgent?.ip_address||'—') + '<br>' +
      '<b style="color:var(--text)">Type:</b> ' + (_myAgent?.agent_type||'—').toUpperCase() + '<br>' +
      '<b style="color:var(--text)">Reporting:</b> CPU · Memory · Disk · Services · Uptime</div>';
  } else {
    const inst = {
      windows: {
        label:'Windows',
        cmd:'# Run PowerShell as Administrator:\nSet-ExecutionPolicy Bypass -Scope Process -Force\nInvoke-WebRequest -Uri "'+baseUrl+'/install-windows.ps1" -OutFile "$env:TEMP\\install.ps1"\n& "$env:TEMP\\install.ps1" -JarvisUrl '+jUrl+' -Key '+regKey,
        dl: baseUrl+'/install-windows.ps1',
        note:'Run PowerShell as Administrator. Installs as a Windows Task Scheduler service.'
      },
      mac: {
        label:'macOS',
        cmd:'bash <(curl -sSL '+baseUrl+'/install-mac.sh) \\\n  --jarvis-url '+jUrl+' \\\n  --key '+regKey,
        dl: baseUrl+'/install-mac.sh',
        note:'Run in Terminal. Installs as a launchd background service.'
      },
      linux: {
        label:'Linux',
        cmd:'curl -sSL '+baseUrl+'/install.sh | sudo bash -s -- \\\n  --jarvis-url '+jUrl+' \\\n  --key '+regKey,
        dl: baseUrl+'/install.sh',
        note:'Run in terminal. Installs as a systemd service.'
      },
      unknown: {
        label:'Your System',
        cmd:'# Browse installers:\nhttps://jarvis.orbishosting.com/agent/',
        dl: 'https://jarvis.orbishosting.com/agent/',
        note:'Choose your platform installer from the JARVIS agent directory.'
      }
    };
    const i = inst[os] || inst.unknown;
    const osBadge = {windows:'🪟 WINDOWS', mac:'🍎 MACOS', linux:'🐧 LINUX', unknown:'❓ UNKNOWN'}[os] || os.toUpperCase();
    title.textContent = '● INSTALL AGENT · ' + (inst[os] ? inst[os].label.toUpperCase() : 'YOUR SYSTEM');
    content.innerHTML =
      '<div style="color:var(--cyan);font-size:0.65rem;letter-spacing:1px;margin-bottom:8px">DETECTED: ' + osBadge + '</div>' +
      '<div style="color:var(--text-dim);font-size:0.65rem;margin-bottom:12px">'+i.note+'</div>' +
      '<pre id="agentCmdPre">'+i.cmd+'</pre>' +
      '<a class="agent-dl-btn" href="'+i.dl+'" target="_blank">↓ DOWNLOAD INSTALLER</a>' +
      '<div style="color:var(--text-dim);font-size:0.6rem;margin-top:16px;opacity:0.7">After install, the AGENT indicator turns green within 30 seconds.</div>';
  }
  modal.classList.add('open');
}

document.addEventListener('click', function(e) {
  if (e.target === document.getElementById('agentModal'))
    document.getElementById('agentModal').classList.remove('open');
});




// ── SITES MANAGER ────────────────────────────────────────────────────
let sitesData = {};

function openSitesModal() {
  document.getElementById('sitesModal').style.display = 'flex';
  loadSites();
}
function closeSitesModal() {
  document.getElementById('sitesModal').style.display = 'none';
}
// Close on backdrop click
document.getElementById('sitesModal').addEventListener('click', function(e) {
  if (e.target === this) closeSitesModal();
});

async function loadSites() {
  document.getElementById('sites-grid').innerHTML = '<div style="grid-column:1/-1;color:var(--text-dim);font-size:0.65rem;letter-spacing:2px">LOADING SITE SETTINGS...</div>';
  const res = await api('sites');
  if (!res.success) {
    document.getElementById('sites-grid').innerHTML = '<div style="grid-column:1/-1;color:#f44;font-size:0.65rem">FAILED TO LOAD SETTINGS</div>';
    return;
  }
  sitesData = res.sites;
  // Pre-fill global key from first site
  const firstKey = Object.values(res.sites)[0]?.api_key || '';
  document.getElementById('global-api-key').value = firstKey;
  renderSiteCards();
}

function renderSiteCards() {
  const grid = document.getElementById('sites-grid');
  let html = '';
  for (const [id, s] of Object.entries(sitesData)) {
    html += `
    <div style="background:rgba(0,212,255,0.02);border:1px solid rgba(0,212,255,0.12);padding:16px">
      <div style="margin-bottom:12px">
        <div style="color:var(--cyan);font-size:0.65rem;letter-spacing:2px;margin-bottom:2px">${s.name.toUpperCase()}</div>
        <div style="color:var(--text-dim);font-size:0.58rem">${s.url}</div>
      </div>
      <div style="margin-bottom:10px">
        <div style="color:var(--text-dim);font-size:0.58rem;letter-spacing:1px;margin-bottom:4px">FROM EMAIL</div>
        <input id="${id}-from_email" type="text" value="${s.from_email || ''}"
          style="width:100%;background:#0a0f1a;border:1px solid rgba(0,212,255,0.15);color:var(--text);font-family:var(--font-mono);font-size:0.65rem;padding:6px 10px;outline:none;box-sizing:border-box">
      </div>
      <div style="margin-bottom:10px">
        <div style="color:var(--text-dim);font-size:0.58rem;letter-spacing:1px;margin-bottom:4px">FROM NAME</div>
        <input id="${id}-from_name" type="text" value="${s.from_name || ''}"
          style="width:100%;background:#0a0f1a;border:1px solid rgba(0,212,255,0.15);color:var(--text);font-family:var(--font-mono);font-size:0.65rem;padding:6px 10px;outline:none;box-sizing:border-box">
      </div>
      <div style="margin-bottom:12px">
        <div style="color:var(--text-dim);font-size:0.58rem;letter-spacing:1px;margin-bottom:4px">ADMIN NOTIFICATION EMAIL</div>
        <input id="${id}-admin_email" type="text" value="${s.admin_email || ''}"
          style="width:100%;background:#0a0f1a;border:1px solid rgba(0,212,255,0.15);color:var(--text);font-family:var(--font-mono);font-size:0.65rem;padding:6px 10px;outline:none;box-sizing:border-box">
      </div>
      <div style="display:flex;align-items:center;gap:10px">
        <button onclick="saveSite('${id}')"
          style="background:rgba(0,212,255,0.08);border:1px solid rgba(0,212,255,0.3);color:var(--cyan);font-family:var(--font-mono);font-size:0.58rem;letter-spacing:2px;padding:6px 16px;cursor:pointer">
          SAVE
        </button>
        <span id="${id}-status" style="font-size:0.58rem;color:var(--text-dim)"></span>
      </div>
    </div>`;
  }
  grid.innerHTML = html;
}

async function pushApiKey() {
  const key = document.getElementById('global-api-key').value.trim();
  const status = document.getElementById('push-status');
  if (!key) { status.style.color='#f44'; status.textContent='✗ API KEY REQUIRED'; return; }
  status.style.color='var(--text-dim)'; status.textContent='PUSHING TO ALL SITES...';
  const res = await api('sites', 'POST', {action:'push_key', api_key:key});
  if (res.success) {
    const ok = Object.values(res.results).filter(Boolean).length;
    const total = Object.keys(res.results).length;
    status.style.color = ok === total ? 'var(--cyan)' : '#fa0';
    status.textContent = `✓ PUSHED TO ${ok}/${total} SITES`;
    for (const id of Object.keys(sitesData)) sitesData[id].api_key = key;
  } else {
    status.style.color='#f44'; status.textContent='✗ ' + (res.error || 'FAILED');
  }
}

async function saveSite(id) {
  const status = document.getElementById(id + '-status');
  status.style.color='var(--text-dim)'; status.textContent='SAVING...';
  const res = await api('sites', 'POST', {
    action:      'save',
    site:        id,
    from_email:  document.getElementById(id+'-from_email').value.trim(),
    from_name:   document.getElementById(id+'-from_name').value.trim(),
    admin_email: document.getElementById(id+'-admin_email').value.trim(),
  });
  if (res.success) {
    status.style.color='var(--cyan)'; status.textContent='✓ SAVED';
    setTimeout(() => { status.textContent=''; }, 3000);
  } else {
    status.style.color='#f44'; status.textContent='✗ ' + (res.error || 'FAILED');
  }
}

// ── VISION PROTOCOL — screenshot lightbox ────────────────────────────────────
function openVisionLightbox(title) {
  const lb = document.getElementById('vision-lightbox');
  document.getElementById('vision-lb-title').textContent = title || '◈ VISION PROTOCOL';
  document.getElementById('vision-lb-img').style.display = 'none';
  document.getElementById('vision-lb-img').src = '';
  document.getElementById('vision-lb-analysis').textContent = '';
  document.getElementById('vision-lb-spinner').style.display = 'block';
  lb.classList.add('open');
}

function closeVisionLightbox() {
  document.getElementById('vision-lightbox').classList.remove('open');
}

async function agentScreenshot(hostname) {
  openVisionLightbox('◈ VISION PROTOCOL — ' + hostname.toUpperCase());
  const arcRes = await api('arc?action=job_create', 'POST', {
    type: 'screenshot',
    payload: {agent: hostname, analyze: true},
    priority: 8,
  }).catch(() => null);

  if (!arcRes || !arcRes.job_id) {
    document.getElementById('vision-lb-spinner').style.display = 'none';
    document.getElementById('vision-lb-analysis').textContent = 'Failed to submit screenshot job — Arc Reactor may be offline.';
    return;
  }

  // Poll for result
  const jobId = arcRes.job_id;
  let tries = 0;
  const poll = async () => {
    tries++;
    const job = await api('arc?action=job_get&id=' + jobId).catch(() => null);
    if (job && job.status === 'done') {
      const r = job.result || {};
      document.getElementById('vision-lb-spinner').style.display = 'none';
      if (r.has_image && r.screenshot_id) {
        // Fetch full screenshot with image
        const full = await api('arc?action=screenshot_get&id=' + r.screenshot_id).catch(() => null);
        if (full && full.image_b64) {
          const img = document.getElementById('vision-lb-img');
          img.src = 'data:image/png;base64,' + full.image_b64;
          img.style.display = 'block';
        }
      }
      document.getElementById('vision-lb-analysis').textContent =
        r.analysis || (r.has_image ? 'Screenshot captured — no analysis available.' : JSON.stringify(r.snapshot || r, null, 2));
    } else if (job && job.status === 'failed') {
      document.getElementById('vision-lb-spinner').style.display = 'none';
      document.getElementById('vision-lb-analysis').textContent = 'Screenshot failed: ' + (job.error || 'Unknown error');
    } else if (tries < 30) {
      setTimeout(poll, 2000);
    } else {
      document.getElementById('vision-lb-spinner').style.display = 'none';
      document.getElementById('vision-lb-analysis').textContent = 'Timed out waiting for screenshot.';
    }
  };
  setTimeout(poll, 2000);
}

async function agentSysinfo(hostname) {
  openVisionLightbox('⚡ FIELD SYSINFO — ' + hostname.toUpperCase());
  const arcRes = await api('arc?action=job_create', 'POST', {
    type: 'sysinfo',
    payload: {agent: hostname, analyze: true},
    priority: 7,
  }).catch(() => null);

  if (!arcRes || !arcRes.job_id) {
    document.getElementById('vision-lb-spinner').style.display = 'none';
    document.getElementById('vision-lb-analysis').textContent = 'Failed to submit sysinfo job.';
    return;
  }

  const jobId = arcRes.job_id;
  let tries = 0;
  const poll = async () => {
    tries++;
    const job = await api('arc?action=job_get&id=' + jobId).catch(() => null);
    if (job && job.status === 'done') {
      const r = job.result || {};
      document.getElementById('vision-lb-spinner').style.display = 'none';
      const snap = r.snapshot || {};
      const snapText = Object.entries(snap)
        .filter(([k]) => !['success','screenshot_available','snapshot_type'].includes(k))
        .map(([k,v]) => `${k.toUpperCase().replace(/_/g,' ')}: ${Array.isArray(v) ? v.join('\n  ') : v}`)
        .join('\n');
      document.getElementById('vision-lb-analysis').textContent =
        (r.analysis ? r.analysis + '\n\n─────────────────────\n\n' : '') + (snapText || JSON.stringify(r, null, 2));
    } else if (job && job.status === 'failed') {
      document.getElementById('vision-lb-spinner').style.display = 'none';
      document.getElementById('vision-lb-analysis').textContent = 'Sysinfo failed: ' + (job.error || 'Unknown error');
    } else if (tries < 20) {
      setTimeout(poll, 2000);
    } else {
      document.getElementById('vision-lb-spinner').style.display = 'none';
      document.getElementById('vision-lb-analysis').textContent = 'Timed out.';
    }
  };
  setTimeout(poll, 2000);
}

document.addEventListener('keydown', e => {
  if (e.key === 'Escape') closeVisionLightbox();
});

// ── CHAT HISTORY SEARCH ───────────────────────────────────────────────────────
function openSearchModal() {
  document.getElementById('searchModal').style.display = 'flex';
  document.getElementById('searchInput').focus();
}
function closeSearchModal() {
  document.getElementById('searchModal').style.display = 'none';
  document.getElementById('searchResults').innerHTML = '<div style="color:var(--text-dim);font-size:0.65rem;text-align:center;padding:20px">Type to search your JARVIS conversations</div>';
  document.getElementById('searchInput').value = '';
}
async function runSearch() {
  const q = document.getElementById('searchInput').value.trim();
  if (!q) return;
  const el = document.getElementById('searchResults');
  el.innerHTML = '<div style="color:var(--text-dim);font-size:0.65rem;text-align:center;padding:20px">Searching...</div>';
  try {
    const d = await api('history?q=' + encodeURIComponent(q));
    if (!d.results || !d.results.length) {
      el.innerHTML = '<div style="color:var(--text-dim);font-size:0.65rem;text-align:center;padding:20px">No results for "' + q + '"</div>';
      return;
    }
    el.innerHTML = d.results.map(r => {
      const role = r.role === 'user' ? '👤' : '🤖';
      const ts = new Date(r.created_at).toLocaleString('en-US', {month:'short',day:'numeric',hour:'2-digit',minute:'2-digit'});
      const snippet = r.content.length > 200 ? r.content.slice(0,197) + '…' : r.content;
      return `<div style="background:rgba(0,212,255,0.04);border:1px solid var(--panel-border);border-radius:4px;padding:10px 12px">
        <div style="display:flex;justify-content:space-between;margin-bottom:4px">
          <span style="font-family:var(--font-display);font-size:0.55rem;letter-spacing:1px;color:var(--cyan)">${role} ${r.role.toUpperCase()}</span>
          <span style="font-size:0.52rem;color:var(--text-dim)">${ts}</span>
        </div>
        <div style="font-size:0.68rem;color:var(--text-primary);line-height:1.4">${snippet.replace(/</g,'&lt;')}</div>
      </div>`;
    }).join('');
  } catch(e) {
    el.innerHTML = '<div style="color:var(--red);font-size:0.65rem;text-align:center;padding:20px">Search failed</div>';
  }
}
document.getElementById('searchModal')?.addEventListener('click', e => {
  if (e.target === document.getElementById('searchModal')) closeSearchModal();
});

// ── PROACTIVE SUGGESTIONS ────────────────────────────────────────────────────
const _shownSuggestions = new Set();
async function checkSuggestions() {
  const d = await api('suggestions').catch(() => null);
  if (!d || !d.suggestions || !d.suggestions.length) return;
  for (const s of d.suggestions) {
    const key = s.intent + ':' + d.hour + ':' + d.dow;
    if (_shownSuggestions.has(key)) continue;
    _shownSuggestions.add(key);
    // Show as a soft suggestion chip in chat
    const log = document.getElementById('chatLog');
    const chip = document.createElement('div');
    chip.style.cssText = 'display:flex;justify-content:flex-end;margin:4px 0';
    chip.innerHTML = `<button onclick="sendSuggestion('${s.intent}',this)" style="background:rgba(0,212,255,0.06);border:1px solid rgba(0,212,255,0.25);border-radius:12px;color:var(--cyan);font-family:var(--font-display);font-size:0.52rem;letter-spacing:1px;padding:4px 12px;cursor:pointer;transition:all 0.2s" onmouseover="this.style.background='rgba(0,212,255,0.12)'" onmouseout="this.style.background='rgba(0,212,255,0.06)'">◈ ${s.prompt}</button>`;
    log.appendChild(chip);
    log.scrollTop = log.scrollHeight;
    break; // show max one suggestion at a time
  }
}

function sendSuggestion(intent, btn) {
  btn.closest('div').remove();
  const prompts = {
    'network_scan': 'run a network scan',
    'jellyfin_now_playing': 'what is playing on Jellyfin',
    'ha_scene': 'what scenes are available',
    'planner:briefing': 'daily briefing',
    'vm_suggestions': 'VM resource suggestions',
    'focus_mode': 'focus mode',
  };
  const msg = prompts[intent] || intent.replace(/_/g,' ');
  document.getElementById('textInput').value = msg;
  sendMessage();
}

// ── MOBILE PANEL SWITCHER ─────────────────────────────────────────────────────
function mobSwitch(which) {
  if (window.innerWidth > 900) return;
  const panels = {left:'leftPanel', center:'centerPanel', right:'rightPanel'};
  Object.entries(panels).forEach(([k, id]) => {
    document.getElementById(id)?.classList.toggle('mob-active', k === which);
  });
  document.querySelectorAll('.mob-nav-btn').forEach(b => b.classList.remove('active'));
  document.getElementById('mob-btn-' + which)?.classList.add('active');
  if (which === 'right') loadNews();
}
function initMobile() {
  if (window.innerWidth > 900) return;
  ['leftPanel','centerPanel','rightPanel'].forEach(id =>
    document.getElementById(id)?.classList.remove('mob-active'));
  document.getElementById('leftPanel')?.classList.add('mob-active');
  document.querySelectorAll('.mob-nav-btn').forEach(b => b.classList.remove('active'));
  document.getElementById('mob-btn-left')?.classList.add('active');
}
window.addEventListener('resize', initMobile);