Void-Homelab/public/views/settings.js

// #/settings — API tokens, agents, and a placeholder for Orthos Mode.
import { el, mount } from '../dom.js';
import { api } from '../api.js';
import { iconSetsPanel } from './icon_sets_panel.js';

function section(title, sub, bodyEl) {
  return el('div', { class: 'card settings-card' },
    el('h3', {}, title),
    sub ? el('p', { class: 'settings-sub muted' }, sub) : null,
    bodyEl);
}

async function renderTokens(c) {
  c.replaceChildren(el('div', { class: 'muted' }, 'Loading…'));
  let tokens = [], agents = [];
  try { tokens = await api.get('/api/agent-tokens'); } catch { /* */ }
  try { agents = await api.get('/api/agents'); } catch { /* */ }
  c.replaceChildren();

  const sel = el('select', { class: 'pm-input', style: { maxWidth: '210px' } }, agents.map(a => el('option', { value: a.id }, `${a.name} (${a.slug})`)));
  const label = el('input', { class: 'pm-input', placeholder: 'label (optional)', style: { maxWidth: '170px' } });
  const out = el('div', { class: 'token-out' });
  const mint = el('button', {
    class: 'primary',
    onclick: async () => {
      if (!sel.value) { out.textContent = 'No agents available'; return; }
      try {
        const r = await api.post('/api/agents/' + sel.value + '/tokens', { label: label.value.trim() || undefined });
        out.replaceChildren(el('div', { class: 'token-reveal' }, el('span', {}, 'New token — copy it now, it won’t be shown again: '), el('code', {}, r.token)));
        const list = await api.get('/api/agent-tokens'); tokens = list; paint();
      } catch (e) { out.textContent = 'failed: ' + e.message; }
    }
  }, 'Mint token');

  const listWrap = el('div', {});
  function paint() {
    listWrap.replaceChildren();
    if (!tokens.length) { listWrap.appendChild(el('div', { class: 'muted' }, 'No tokens yet.')); return; }
    for (const t of tokens) {
      listWrap.appendChild(el('div', { class: 'settings-row' + (t.revoked_at ? ' revoked' : '') },
        el('span', { class: 'settings-label' }, t.agent_name || t.agent_slug),
        el('span', { class: 'settings-value muted' }, `${t.label || '—'} · ${t.last_used ? 'used ' + new Date(t.last_used).toLocaleDateString() : 'never used'}`),
        t.revoked_at
          ? el('span', { class: 'muted' }, 'revoked')
          : el('button', { class: 'proj-btn danger', onclick: async () => { if (!confirm('Revoke this token?')) return; try { await api.del('/api/agent-tokens/' + t.id); renderTokens(c); } catch (e) { alert(e.message); } } }, 'Revoke')));
    }
  }

  c.appendChild(el('div', { class: 'settings-row settings-create' }, sel, label, mint));
  c.appendChild(out);
  c.appendChild(listWrap);
  paint();
}

function fileBlock(parent, label, content) {
  parent.appendChild(el('div', { class: 'agent-file-label' }, label));
  parent.appendChild(el('div', { class: 'agent-file-content' }, content));
}

async function renderAgents(c) {
  c.replaceChildren(el('div', { class: 'muted' }, 'Loading…'));
  let agents = [];
  try { agents = await api.get('/api/agents'); } catch { /* */ }
  c.replaceChildren();
  if (!agents.length) { c.appendChild(el('div', { class: 'muted' }, 'No agents.')); return; }
  for (const a of agents) {
    const caps = Object.entries(a.capabilities || {}).filter(([, v]) => v).map(([k]) => k).join(', ') || '—';
    const row = el('div', { class: 'agent-row' });
    const body = el('div', { class: 'agent-body hidden' });
    let loaded = false;
    const hd = el('div', {
      class: 'agent-row-hd',
      onclick: async () => {
        const open = row.classList.toggle('open');
        body.classList.toggle('hidden', !open);
        if (open && !loaded) {
          loaded = true;
          body.replaceChildren(el('div', { class: 'muted' }, 'Loading…'));
          try {
            const p = await api.get('/api/agents/' + a.id + '/profile');
            body.replaceChildren();
            if (p.persona) fileBlock(body, 'Soul · persona', p.persona);
            else body.appendChild(el('div', { class: 'muted' }, 'No persona defined (config-only agent).'));
            fileBlock(body, 'Capabilities', JSON.stringify(p.capabilities || {}, null, 2));
            if (p.scopes && Object.keys(p.scopes).length) fileBlock(body, 'Scopes', JSON.stringify(p.scopes, null, 2));
            body.appendChild(el('div', { class: 'muted', style: { fontSize: '11px', marginTop: '8px' } },
              'Void 2 agents are persona-in-code + DB config — no separate memory files (unlike Void 1).'));
          } catch (e) { body.replaceChildren(el('div', { class: 'err' }, 'Error: ' + e.message)); }
        }
      }
    },
      el('span', { class: 'agent-nm' }, a.name),
      el('span', { class: 'settings-value muted' }, `${a.slug} · ${a.kind} · ${caps}`),
      el('span', { class: 'agent-row-chev' }, '›'));
    row.append(hd, body);
    c.appendChild(row);
  }
}

export async function render(main) {
  const tokensBody = el('div', { class: 'settings-body' });
  const agentsBody = el('div', { class: 'settings-body' });

  // Icon sets — collapsible; panel is lazy-created on first expand so
  // /api/icon-sets is not fetched while the section is collapsed.
  let isPanel = null;
  const iconSetsWrap = el('div', { class: 'settings-body' });
  const isToggle = el('button', { class: 'ghost' }, '▸ Icon sets');
  isToggle.addEventListener('click', () => {
    if (!isPanel) {
      // First expand: create and append the panel.
      isPanel = iconSetsPanel();
      iconSetsWrap.appendChild(isPanel);
    }
    const open = isPanel.style.display !== 'none';
    isPanel.style.display = open ? 'none' : 'block';
    isToggle.textContent = (open ? '▸' : '▾') + ' Icon sets';
  });
  iconSetsWrap.appendChild(isToggle);

  mount(main,
    el('h1', { class: 'view-h1' }, '◆ Settings'),
    section('API Tokens', 'Bearer tokens for agents (e.g. the MCP external-research agent). The secret is shown once at creation.', tokensBody),
    section('Agents', 'Seeded Cradle agents and what each is allowed to do.', agentsBody),
    section('Icon Sets', 'Upload or delete custom icon packs for device and service icons.', iconSetsWrap),
    section('Orthos Mode', 'Local-first answering — Orthos answers first, Claude escalates when needed.',
      el('div', { class: 'muted' }, 'Paused for a future project (arrives with the local-agent layer).'))
  );
  renderTokens(tokensBody);
  renderAgents(agentsBody);
}