@roxy-agent/agents 0.1.0

package/dist/dashboard/client.js

@@ -0,0 +1,2057 @@
+// Browser-side dashboard app. This runs in the served HTML page, not in Node.
+export const DASHBOARD_JS = String.raw `
+// ─── Helpers ────────────────────────────────────────────────────────────
+const $ = (id) => document.getElementById(id);
+const escapeHtml = (s) => String(s ?? '').replace(/[&<>"]/g, (c) =>
+  ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));
+const fmtTime = (s) => {
+  if (!s) return '—';
+  const d = new Date(s.replace(' ', 'T') + 'Z');
+  return d.toLocaleTimeString([], { hour12: false });
+};
+const fmtRel = (s) => {
+  if (!s) return '—';
+  const ms = Date.now() - new Date(s.replace(' ', 'T') + 'Z').getTime();
+  if (ms < 0) return 'now';
+  const sec = Math.floor(ms / 1000);
+  if (sec < 60) return sec + 's ago';
+  const min = Math.floor(sec / 60);
+  if (min < 60) return min + 'm ago';
+  const h = Math.floor(min / 60);
+  if (h < 24) return h + 'h ago';
+  return Math.floor(h / 24) + 'd ago';
+};
+const fmtUptime = (s) => {
+  if (s == null) return '—';
+  if (s < 60) return s + 's';
+  if (s < 3600) return Math.floor(s/60) + 'm ' + (s%60) + 's';
+  return Math.floor(s/3600) + 'h ' + Math.floor((s%3600)/60) + 'm';
+};
+const fmtNum = (n) => (n == null ? '—' : Number(n).toLocaleString());
+const summarize = (e) => {
+  let p = {};
+  try { p = JSON.parse(e.payload); } catch {}
+  if (e.tool === 'bash')       return p.command ?? '';
+  if (e.tool === 'filesystem') return p.path ?? '';
+  if (e.tool === 'network')    return (p.method || 'GET') + '  ' + (p.url || '');
+  return e.payload || '';
+};
+const verdictHTML = (e) =>
+  '<span class="verdict"><span class="risk-dot ' + e.risk_level + '"></span>' +
+  '<span class="dec ' + e.decision + '">' + e.decision + '</span></span>';
+
+const ICON_PATHS = {
+  activity: '<path d="M5 4.5v15l13-7.5-13-7.5Z" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/>',
+  alert: '<path d="M12 4 21 19H3L12 4Z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/><path d="M12 9v4" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/><path d="M12 16.5h.01" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/>',
+  'arrow-right': '<path d="M5 12h13" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><path d="m13 6 6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>',
+  block: '<circle cx="12" cy="12" r="7.5" fill="none" stroke="currentColor" stroke-width="1.7"/><path d="m7 17 10-10" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>',
+  'chevron-down': '<path d="m7 9 5 5 5-5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>',
+  docs: '<path d="M7 4.5h7l3 3v12H7v-15Z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/><path d="M14 4.5v3h3" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/><path d="M9.5 11h5M9.5 14h5M9.5 17h3" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>',
+  events: '<path d="M6 5h12M6 12h12M6 19h12" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><path d="M4 5h.01M4 12h.01M4 19h.01" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/>',
+  search: '<circle cx="11" cy="11" r="6" fill="none" stroke="currentColor" stroke-width="1.7"/><path d="m16 16 4 4" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>',
+  sessions: '<path d="M7.5 8a4.5 4.5 0 0 1 8.1-2.7" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><path d="M16.5 16a4.5 4.5 0 0 1-8.1 2.7" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><path d="M15.5 5.3h3v-3" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M8.5 18.7h-3v3" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>',
+  trash: '<path d="M5 7h14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><path d="M9 7V5h6v2" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 10v8h8v-8" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/><path d="M10.5 11.5v5M13.5 11.5v5" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>'
+};
+const icon = (name, cls = 'svg-icon') =>
+  '<svg class="' + cls + '" viewBox="0 0 24 24" fill="none" aria-hidden="true">' +
+    (ICON_PATHS[name] || '') +
+  '</svg>';
+
+// ─── Routing ────────────────────────────────────────────────────────────
+const TABS = ['overview', 'activity', 'policies', 'approvals', 'insights', 'docs', 'settings'];
+
+function currentTab() {
+  const m = location.hash.match(/^#\/(\w+)/);
+  return TABS.includes(m && m[1]) ? m[1] : 'overview';
+}
+
+function navigate(tab) {
+  if (location.hash !== '#/' + tab) location.hash = '#/' + tab;
+}
+
+window.addEventListener('hashchange', renderTab);
+document.addEventListener('click', (ev) => {
+  const dropdownOption = ev.target.closest('[data-dropdown-option]');
+  if (dropdownOption) {
+    ev.preventDefault();
+    const dropdown = dropdownOption.closest('[data-dropdown]');
+    const input = dropdown.querySelector('input[type=hidden]');
+    const label = dropdown.querySelector('.custom-select-label');
+    input.value = dropdownOption.dataset.value;
+    label.textContent = dropdownOption.dataset.label;
+    dropdown.querySelectorAll('[data-dropdown-option]').forEach((option) => {
+      option.setAttribute('aria-selected', String(option === dropdownOption));
+    });
+    closeCustomDropdowns();
+    if (input.id === 'activity-field') {
+      state.searchField = input.value;
+      renderActivity();
+      return;
+    }
+    if (input.id === 'activity-operator') {
+      state.searchOperator = input.value;
+      renderActivity();
+      return;
+    }
+    return;
+  }
+
+  const dropdownTrigger = ev.target.closest('[data-dropdown-trigger]');
+  if (dropdownTrigger) {
+    ev.preventDefault();
+    const dropdown = dropdownTrigger.closest('[data-dropdown]');
+    const willOpen = !dropdown.classList.contains('open');
+    closeCustomDropdowns(dropdown);
+    dropdown.classList.toggle('open', willOpen);
+    dropdownTrigger.setAttribute('aria-expanded', String(willOpen));
+    return;
+  }
+
+  if (!ev.target.closest('[data-dropdown]')) closeCustomDropdowns();
+
+  const a = ev.target.closest('a[data-tab]');
+  if (!a) return;
+  ev.preventDefault();
+  navigate(a.dataset.tab);
+});
+
+function setActiveTab() {
+  const t = currentTab();
+  document.querySelectorAll('nav.tabs a').forEach((a) => {
+    a.classList.toggle('active', a.dataset.tab === t);
+  });
+}
+
+function closeCustomDropdowns(except) {
+  document.querySelectorAll('[data-dropdown].open').forEach((dropdown) => {
+    if (dropdown === except) return;
+    dropdown.classList.remove('open');
+    dropdown.querySelector('[data-dropdown-trigger]')?.setAttribute('aria-expanded', 'false');
+  });
+}
+
+// ─── Global state ───────────────────────────────────────────────────────
+const state = {
+  events: new Map(),
+  charts: new Map(),
+  chartSigs: new Map(),
+  maxId: 0,
+  search: '',
+  searchField: 'any',
+  searchOperator: 'contains',
+  range: localStorage.getItem('ap-range') || '1d',
+  health: { ml_ready: false, uptime_s: 0 },
+  stats: null,
+  insights: null,
+  policies: [],
+  license: null,
+  builtinRules: null,
+  builtinExpand: { deny: false, high: false, medium: false },
+  welcomeDismissed: localStorage.getItem('ap-welcome-dismissed') === '1',
+  approvals: { pending_count: 0, slack_configured: false, approvals: [] },
+  appSettings: null,
+};
+
+const RANGE_OPTIONS = [
+  { value: 'all', label: 'All',  full: 'all time'    },
+  { value: '30d', label: '30d',  full: 'last 30 days' },
+  { value: '7d',  label: '7d',   full: 'last 7 days'  },
+  { value: '3d',  label: '3d',   full: 'last 3 days'  },
+  { value: '1d',  label: '1d',   full: 'last 24 hours' },
+  { value: '12h', label: '12h',  full: 'last 12 hours' },
+  { value: '1h',  label: '1h',   full: 'last hour'     },
+];
+
+const RANGE_HOURS = { all: null, '30d': 720, '7d': 168, '3d': 72, '1d': 24, '12h': 12, '1h': 1 };
+
+function currentRange() {
+  return RANGE_OPTIONS.find(r => r.value === state.range) || RANGE_OPTIONS[4];
+}
+
+function rangeHours(range = state.range) {
+  return RANGE_HOURS[range] ?? null;
+}
+
+function rangeLabel(range = state.range) {
+  return (RANGE_OPTIONS.find(r => r.value === range) || RANGE_OPTIONS[4]).full;
+}
+
+// ─── API ────────────────────────────────────────────────────────────────
+const api = {
+  events: (since) => fetch('/api/events' + (since ? '?since=' + since : '?limit=200')).then(r => r.json()),
+  event: (id) => fetch('/api/events/' + id).then(r => r.json()),
+  session: (sid) => fetch('/api/events/session/' + sid).then(r => r.json()),
+  stats: (range = state.range) => fetch('/api/stats?range=' + encodeURIComponent(range)).then(r => r.json()),
+  health: () => fetch('/api/health').then(r => r.json()),
+  insights: (range = state.range) => fetch('/api/insights?range=' + encodeURIComponent(range)).then(r => r.json()),
+  policies: () => fetch('/api/policies').then(r => r.json()),
+  createPolicy: (data) => fetch('/api/policies', { method: 'POST', headers: {'content-type':'application/json'}, body: JSON.stringify(data) }),
+  updatePolicy: (id, data) => fetch('/api/policies/' + id, { method: 'PATCH', headers: {'content-type':'application/json'}, body: JSON.stringify(data) }),
+  deletePolicy: (id) => fetch('/api/policies/' + id, { method: 'DELETE' }),
+  testPolicy: (text, tool) => fetch('/api/policies/test', { method: 'POST', headers: {'content-type':'application/json'}, body: JSON.stringify({ text, tool }) }).then(r => r.json()),
+  license: () => fetch('/api/license').then(r => r.json()),
+  signInStart: () => fetch('/api/license/sign-in/start', { method: 'POST' }).then(r => r.json()),
+  signInPoll: (code) => fetch('/api/license/sign-in/poll', { method: 'POST', headers: {'content-type':'application/json'}, body: JSON.stringify({ code }) }).then(r => r.json()),
+  signOut: () => fetch('/api/license/sign-out', { method: 'POST' }).then(r => r.json()),
+  syncLicense: () => fetch('/api/license/sync', { method: 'POST' }).then(r => r.json()),
+  patchLicense: (data) => fetch('/api/license', { method: 'PATCH', headers: {'content-type':'application/json'}, body: JSON.stringify(data) }).then(r => r.json()),
+  builtinRules: () => fetch('/api/builtin-rules').then(r => r.json()),
+  setBuiltinRule: (id, enabled) => fetch('/api/builtin-rules/' + encodeURIComponent(id), { method: 'PATCH', headers: {'content-type':'application/json'}, body: JSON.stringify({ enabled }) }).then(r => r.json()),
+  approvals: () => fetch('/api/approvals?status=all&limit=200').then(r => r.json()),
+  decideApproval: (id, decision) => fetch('/api/approvals/' + id + '/decide', { method: 'POST', headers: {'content-type':'application/json'}, body: JSON.stringify({ decision }) }).then(r => r.json()),
+  appSettings: () => fetch('/api/settings').then(r => r.json()),
+  patchAppSettings: (data) => fetch('/api/settings', { method: 'PATCH', headers: {'content-type':'application/json'}, body: JSON.stringify(data) }).then(r => r.json()),
+  testSlack: () => fetch('/api/settings/slack/test', { method: 'POST' }).then(r => r.json()),
+};
+
+// ─── Live status ────────────────────────────────────────────────────────
+async function tickHealth() {
+  try {
+    const h = await api.health();
+    state.health = h;
+  } catch {
+    state.health = { ml_ready: false, uptime_s: 0 };
+  }
+}
+
+async function tickEvents() {
+  try {
+    const sinceParam = state.maxId > 0 ? state.maxId : null;
+    const [events, stats] = await Promise.all([api.events(sinceParam), api.stats()]);
+    let changed = false;
+    const statsChanged = JSON.stringify(state.stats) !== JSON.stringify(stats);
+    state.stats = stats;
+    if (statsChanged) changed = true;
+    if (state.maxId === 0) {
+      state.events.clear();
+      for (const e of events) state.events.set(e.id, e);
+      if (events.length) changed = true;
+    } else {
+      for (const e of events) { e._flash = true; state.events.set(e.id, e); changed = true; }
+    }
+    // Backfill in-flight events (those without a duration_ms yet)
+    const inflight = [...state.events.values()].filter(e => e.duration_ms == null).slice(0, 12);
+    if (inflight.length) {
+      await Promise.all(inflight.map(async (e) => {
+        try {
+          const u = await api.event(e.id);
+          if (u && u.id && JSON.stringify(u) !== JSON.stringify(e)) {
+            state.events.set(u.id, u);
+            changed = true;
+          }
+        } catch {}
+      }));
+    }
+    for (const e of state.events.values()) if (e.id > state.maxId) state.maxId = e.id;
+    if (state.events.size > 600) {
+      const trimmed = [...state.events.values()].sort((a,b) => b.id - a.id).slice(0, 600);
+      state.events = new Map(trimmed.map(e => [e.id, e]));
+      changed = true;
+    }
+    if (changed) refreshCurrent({ source: 'events' });
+    requestAnimationFrame(() => { for (const e of state.events.values()) e._flash = false; });
+  } catch {}
+}
+
+async function tickPolicies() {
+  try {
+    const policies = await api.policies();
+    if (JSON.stringify(state.policies) === JSON.stringify(policies)) return;
+    state.policies = policies;
+    refreshCurrent({ source: 'policies' });
+  } catch {}
+}
+
+async function tickBuiltinRules() {
+  try {
+    const data = await api.builtinRules();
+    if (JSON.stringify(state.builtinRules) === JSON.stringify(data)) return;
+    state.builtinRules = data;
+    refreshCurrent({ source: 'builtin' });
+  } catch {}
+}
+
+async function tickApprovals() {
+  try {
+    const data = await api.approvals();
+    const changed = JSON.stringify(state.approvals) !== JSON.stringify(data);
+    state.approvals = data;
+    paintApprovalsBadge();
+    if (changed) refreshCurrent({ source: 'approvals' });
+  } catch {}
+}
+
+async function tickAppSettings() {
+  try {
+    const data = await api.appSettings();
+    if (JSON.stringify(state.appSettings) === JSON.stringify(data)) return;
+    state.appSettings = data;
+    refreshCurrent({ source: 'settings' });
+  } catch {}
+}
+
+function paintApprovalsBadge() {
+  const el = document.getElementById('nav-approvals-badge');
+  if (!el) return;
+  const n = state.approvals?.pending_count || 0;
+  if (n <= 0) { el.hidden = true; el.textContent = ''; return; }
+  el.hidden = false;
+  el.textContent = String(n > 99 ? '99+' : n);
+}
+
+async function tickLicense() {
+  try {
+    const lic = await api.license();
+    const same = JSON.stringify(state.license) === JSON.stringify(lic);
+    state.license = lic;
+    paintSidebarUsage();
+    if (same) return;
+    refreshCurrent({ source: 'license' });
+  } catch {}
+}
+
+function paintSidebarUsage() {
+  const el = $('sidebar-usage');
+  if (!el) return;
+  const lic = state.license;
+  if (!lic) { el.hidden = true; return; }
+  const pct = lic.quota > 0 ? Math.min(100, Math.round((lic.used / lic.quota) * 100)) : 0;
+  el.hidden = false;
+  el.className = 'sidebar-usage' + (pct >= 100 ? ' over' : pct >= 80 ? ' warn' : '');
+  el.title = lic.plan + ' plan · resets ' + lic.period;
+  el.innerHTML =
+    '<div class="label"><span>Usage</span><span class="plan">' + escapeHtml(lic.plan) + '</span></div>' +
+    '<div class="num">' + lic.used + '<span class="of"> / ' + lic.quota + '</span></div>' +
+    '<div class="bar"><span style="width:' + pct + '%"></span></div>';
+}
+
+async function tickInsights() {
+  if (currentTab() !== 'insights' && currentTab() !== 'overview') return;
+  try {
+    const insights = await api.insights(state.range);
+    if (JSON.stringify(state.insights) === JSON.stringify(insights)) return;
+    state.insights = insights;
+    refreshCurrent({ source: 'insights' });
+  } catch {}
+}
+
+async function setRange(next) {
+  if (state.range === next) return;
+  state.range = next;
+  try { localStorage.setItem('ap-range', next); } catch {}
+  state.insights = null;
+  await Promise.all([tickInsights(), tickEvents()]);
+  refreshCurrent({ source: 'range', full: true });
+}
+
+function refreshCurrent(options = {}) {
+  // Light re-render — only the parts of the current tab that are data-driven.
+  const tab = currentTab();
+  const source = options.source;
+  // Skip re-renders for tabs the source doesn't affect (so e.g. typing in the
+  // policy form doesn't get nuked by an unrelated events poll).
+  if (!options.full && source) {
+    const affects = {
+      events:   ['overview', 'activity', 'insights', 'settings'],
+      policies: ['overview', 'policies'],
+      insights: ['overview', 'insights'],
+      license:  ['overview', 'settings'],
+      builtin:  ['policies'],
+      approvals:['approvals', 'overview'],
+      settings: ['settings'],
+      range:    ['overview', 'activity', 'insights'],
+    }[source];
+    if (affects && !affects.includes(tab)) return;
+  }
+  if (!options.full && tab === 'overview' && $('overview-hourly-chart') &&
+      (source === 'events' || source === 'insights' || source === 'license')) {
+    mountOverviewCharts(state.insights);
+    return;
+  }
+  if (!options.full && tab === 'insights' && $('insights-activity-chart')) {
+    mountInsightsCharts(state.insights);
+    return;
+  }
+  // Don't blow away the policy form mid-typing when the user is actively in it.
+  if (!options.full && tab === 'policies' && document.activeElement?.closest('#policy-form, #tester-input')) return;
+  // Don't blow away the settings forms while the user is editing them.
+  if (!options.full && tab === 'settings' && document.activeElement?.closest('#slack-form, #settings-api-form')) return;
+  if (tab === 'overview') renderOverview();
+  if (tab === 'activity' && !document.querySelector('.run-search [data-dropdown].open')) renderActivity();
+  if (tab === 'policies') renderPolicies();
+  if (tab === 'approvals') renderApprovals();
+  if (tab === 'insights') renderInsights();
+  if (tab === 'docs') renderDocs();
+  if (tab === 'settings') renderSettings();
+}
+
+// ─── Helpers: filters ───────────────────────────────────────────────────
+function filteredEvents() {
+  let list = [...state.events.values()].sort((a, b) => b.id - a.id);
+  const hours = rangeHours();
+  if (hours != null) {
+    const cutoff = Date.now() - hours * 60 * 60 * 1000;
+    list = list.filter((e) => parseEventTimestamp(e.timestamp) >= cutoff);
+  }
+  if (state.search) {
+    const q = state.search.toLowerCase();
+    list = list.filter((e) => {
+      const value = activitySearchValue(e, state.searchField).toLowerCase();
+      return state.searchOperator === 'equals' ? value === q : value.includes(q);
+    });
+  }
+  return list;
+}
+
+function parseEventTimestamp(ts) {
+  if (!ts) return 0;
+  // SQLite stores "YYYY-MM-DD HH:MM:SS" in UTC; ISO strings are also accepted.
+  const iso = String(ts).includes('T') ? String(ts) : String(ts).replace(' ', 'T') + 'Z';
+  const t = new Date(iso).getTime();
+  return Number.isNaN(t) ? 0 : t;
+}
+
+function activitySearchValue(e, field) {
+  if (field === 'tool') return e.tool || '';
+  if (field === 'action') return e.action_type || '';
+  if (field === 'session') return e.session_id || '';
+  if (field === 'reason') return e.reason || '';
+  if (field === 'summary') return summarize(e);
+  return [e.tool, e.action_type, e.session_id, summarize(e), e.payload, e.reason].join(' ');
+}
+
+// ─── Tab: OVERVIEW ──────────────────────────────────────────────────────
+function renderOverview() {
+  const ranged = state.stats?.ranged ?? { total: 0, flagged: 0, denied: 0, sessions: 0 };
+  const allTime = state.stats?.all_time ?? { total: 0 };
+  const ins = state.insights;
+  const recent = [...state.events.values()].sort((a,b) => b.id - a.id).slice(0, 10);
+  const rangeLbl = currentRange().full;
+
+  const approvalsData = state.approvals || { pending_count: 0, approvals: [] };
+  const approvals = approvalsData.approvals || [];
+  const pending = approvals.filter(a => a.status === 'pending');
+  const decided = approvals.filter(a => a.status !== 'pending');
+
+  const flagPct = ranged.total > 0 ? Math.round(100 * ranged.flagged / ranged.total) + '%' : '—';
+  const denyPct = ranged.total > 0 ? Math.round(100 * ranged.denied / ranged.total) + '%' : '—';
+  const avgPerSession = ranged.sessions > 0 ? (ranged.total / ranged.sessions).toFixed(1) : '—';
+  const pendingCount = approvalsData.pending_count || pending.length;
+  const pendingDelta = pendingCount > 0 ? 'awaiting review' : 'all clear';
+
+  const html =
+  '<div class="page-head">' +
+    '<div><h1>Overview</h1></div>' +
+    '<div class="actions">' + renderRangePicker() + '</div>' +
+  '</div>' +
+
+  '<div class="kpi-grid five">' +
+    '<div class="kpi"><div class="label">Events</div><div class="num">' + fmtNum(ranged.total) + '</div><div class="delta">of ' + fmtNum(allTime.total) + ' all-time</div></div>' +
+    '<div class="kpi"><div class="label">Flagged</div><div class="num">' + fmtNum(ranged.flagged) + '</div><div class="delta">' + flagPct + ' of events</div></div>' +
+    '<div class="kpi"><div class="label">Blocked</div><div class="num">' + fmtNum(ranged.denied) + '</div><div class="delta">' + denyPct + ' of events</div></div>' +
+    '<div class="kpi"><div class="label">Sessions</div><div class="num">' + fmtNum(ranged.sessions) + '</div><div class="delta">' + avgPerSession + ' avg / session</div></div>' +
+    '<a href="#/approvals" data-tab="approvals" class="kpi kpi-link' + (pendingCount > 0 ? ' alert' : '') + '">' +
+      '<div class="label">Pending</div>' +
+      '<div class="num">' + fmtNum(pendingCount) + '</div>' +
+      '<div class="delta">' + pendingDelta + '</div>' +
+    '</a>' +
+  '</div>' +
+
+  '<div class="card" style="margin-bottom:14px">' +
+    '<div class="head"><h3>Activity</h3><span class="meta">' + escapeHtml(rangeLbl) + '</span></div>' +
+    '<div class="body">' + renderHourlyChart('overview-hourly-chart', ins?.hourly ?? [], { height: 'compact' }) + '</div>' +
+  '</div>' +
+
+  '<div class="two-col">' +
+    '<div class="card">' +
+      '<div class="head">' +
+        '<h3>Pending approvals</h3>' +
+        '<a href="#/approvals" data-tab="approvals" class="meta link-with-icon">manage ' + icon('arrow-right') + '</a>' +
+      '</div>' +
+      '<div class="body flush">' +
+        (pending.length
+          ? pending.slice(0, 4).map(renderOverviewApprovalRow).join('')
+          : emptyHTML('Nothing pending', 'Approve-policy hits and high-risk regex matches show up here for review.')) +
+      '</div>' +
+    '</div>' +
+    '<div class="card">' +
+      '<div class="head">' +
+        '<h3>Approvals history</h3>' +
+        '<span class="meta">last ' + Math.min(decided.length, 6) + '</span>' +
+      '</div>' +
+      '<div class="body flush">' +
+        (decided.length
+          ? decided.slice(0, 6).map(renderOverviewApprovalRow).join('')
+          : emptyHTML('No history yet', 'Resolved approvals will show up here.')) +
+      '</div>' +
+    '</div>' +
+  '</div>' +
+
+  '<div class="three-col" style="margin-top:14px">' +
+    '<div class="card">' +
+      '<div class="head"><h3>By tool</h3><span class="meta">' + escapeHtml(rangeLbl) + '</span></div>' +
+      '<div class="body">' +
+        (ins && ins.tools && ins.tools.length
+          ? renderEChart('overview-tool-chart', 'echart mini')
+          : emptyHTML('—', 'No tool calls yet.')) +
+      '</div>' +
+    '</div>' +
+    '<div class="card">' +
+      '<div class="head"><h3>By decision</h3><span class="meta">' + escapeHtml(rangeLbl) + '</span></div>' +
+      '<div class="body">' +
+        (ins && ins.hourly && ins.hourly.length
+          ? renderEChart('overview-decision-chart', 'echart mini')
+          : emptyHTML('—', 'No decisions yet.')) +
+      '</div>' +
+    '</div>' +
+    '<div class="card">' +
+      '<div class="head">' +
+        '<h3>Top denied</h3>' +
+        '<a href="#/insights" data-tab="insights" class="meta link-with-icon">more ' + icon('arrow-right') + '</a>' +
+      '</div>' +
+      '<div class="body flush">' +
+        (ins && ins.top_denied && ins.top_denied.length
+          ? renderActionRanking(ins.top_denied.slice(0, 5))
+          : emptyHTML('All clear', 'Nothing denied in this window.')) +
+      '</div>' +
+    '</div>' +
+  '</div>' +
+
+  '<div class="card" style="margin-top:14px">' +
+    '<div class="head"><h3>Recent actions</h3><a href="#/activity" data-tab="activity" class="meta link-with-icon">view all ' + icon('arrow-right') + '</a></div>' +
+    '<div class="body flush">' + (recent.length ? renderRecentList(recent) : emptyHTML('Nothing yet', 'Run a tool through the proxy and it will show up here.')) + '</div>' +
+  '</div>';
+
+  disposeCharts();
+  $('page').innerHTML = html;
+  mountOverviewCharts(ins);
+  bindRangePicker();
+  bindOverviewApprovals();
+}
+
+function renderOverviewApprovalRow(a) {
+  const isPending = a.status === 'pending';
+  const tagCls = a.status === 'pending' ? 'block' : a.status === 'approved' ? 'allow' : 'block';
+  const decidedLine = isPending
+    ? 'requested ' + fmtRel(a.requested_at)
+    : a.status + (a.decided_by ? ' by ' + escapeHtml(a.decided_by) : '') + ' · ' + fmtRel(a.decided_at || a.requested_at);
+  return '<div class="approval-row compact ' + a.status + '" data-approval-row="' + a.id + '">' +
+    '<div class="approval-main">' +
+      '<div class="approval-title">' +
+        '<span class="tag ' + tagCls + '">' + a.status + '</span>' +
+        '<span class="approval-tool">' + escapeHtml(a.tool) + '</span>' +
+        '<span class="approval-reason">' + escapeHtml(a.reason) + '</span>' +
+      '</div>' +
+      '<code class="approval-summary one-line">' + escapeHtml(a.summary) + '</code>' +
+      '<div class="approval-meta">#' + a.id + ' · ' + escapeHtml(decidedLine) + '</div>' +
+    '</div>' +
+    (isPending
+      ? '<div class="approval-actions">' +
+          '<button class="btn primary sm" data-approval-action="approved" data-approval-id="' + a.id + '">Approve</button>' +
+          '<button class="btn ghost danger sm" data-approval-action="denied" data-approval-id="' + a.id + '">Deny</button>' +
+        '</div>'
+      : '') +
+  '</div>';
+}
+
+function bindOverviewApprovals() {
+  document.querySelectorAll('[data-approval-action]').forEach((btn) => {
+    btn.addEventListener('click', async (ev) => {
+      ev.stopPropagation();
+      const id = Number(btn.getAttribute('data-approval-id'));
+      const action = btn.getAttribute('data-approval-action');
+      if (!id || (action !== 'approved' && action !== 'denied')) return;
+      btn.setAttribute('disabled', 'true');
+      try {
+        await api.decideApproval(id, action);
+        await tickApprovals();
+      } finally {
+        btn.removeAttribute('disabled');
+      }
+    });
+  });
+}
+
+function renderRecentList(events) {
+  return '<div class="recent-list">' + events.map((e) => {
+    const cls = ['recent-item', e.decision].join(' ');
+    return '<div class="' + cls + '" data-event-id="' + e.id + '">' +
+      '<span class="time">' + fmtTime(e.timestamp) + '</span>' +
+      '<span class="tool">' + e.tool + '</span>' +
+      '<span class="summary">' + escapeHtml(summarize(e)) + '</span>' +
+      verdictHTML(e) +
+    '</div>';
+  }).join('') + '</div>';
+}
+
+function renderTopPolicies(list) {
+  return '<div class="action-list">' + list.map((p, i) =>
+    '<div class="action-item" onclick="navigate(\'policies\')">' +
+      '<span class="rank">' + (i+1).toString().padStart(2,'0') + '</span>' +
+      '<span class="cmd">' + escapeHtml(p.description) + '<small>' + p.kind + ' · ' + (p.applies_to === '*' ? 'all tools' : p.applies_to) + '</small></span>' +
+      '<span class="count">' + p.match_count + ' hits</span>' +
+    '</div>'
+  ).join('') + '</div>';
+}
+
+function renderEChart(id, className = 'echart') {
+  return '<div id="' + escapeHtml(id) + '" class="' + className + '"></div>';
+}
+
+function renderHourlyChart(id, hourly, opts = {}) {
+  if (!hourly || !hourly.length) return emptyHTML('No data', 'Charts populate as events come in.');
+  return renderEChart(id, opts.height === 'compact' ? 'echart compact' : 'echart');
+}
+
+function disposeCharts() {
+  state.charts.forEach((chart) => chart.dispose());
+  state.charts.clear();
+  state.chartSigs.clear();
+}
+
+function cssVar(name, fallback) {
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
+}
+
+function chartPalette() {
+  return {
+    bg: cssVar('--bg-1', '#ffffff'),
+    text: cssVar('--text', '#151821'),
+    muted: cssVar('--muted', '#667085'),
+    dim: cssVar('--dim', '#98a2b3'),
+    line: cssVar('--line', '#e2e4ea'),
+    accent: cssVar('--accent', '#3f63f2'),
+    amber: cssVar('--amber', '#d97706'),
+    red: cssVar('--red', '#d92d20'),
+    green: cssVar('--green', '#12b76a'),
+    blue: cssVar('--blue', '#2e90fa'),
+    purple: cssVar('--purple', '#7a5af8'),
+  };
+}
+
+function formatHourLabel(hour) {
+  const s = String(hour || '');
+  if (s.length === 10) {
+    const d = new Date(s + 'T00:00:00Z');
+    if (Number.isNaN(d.getTime())) return s;
+    return d.toLocaleDateString([], { month: 'short', day: 'numeric' });
+  }
+  const d = new Date(s.replace(' ', 'T') + 'Z');
+  if (Number.isNaN(d.getTime())) return s;
+  return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+}
+
+function formatChartDate(hour) {
+  const s = String(hour || '');
+  if (s.length === 10) {
+    const d = new Date(s + 'T00:00:00Z');
+    if (Number.isNaN(d.getTime())) return s;
+    return d.toLocaleDateString([], { weekday: 'short', month: 'short', day: 'numeric' });
+  }
+  const d = new Date(s.replace(' ', 'T') + 'Z');
+  if (Number.isNaN(d.getTime())) return s;
+  return d.toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
+}
+
+function baseChartOption() {
+  const c = chartPalette();
+  return {
+    grid: { left: 44, right: 16, top: 24, bottom: 34, containLabel: false },
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: c.text,
+      borderWidth: 0,
+      padding: 0,
+      textStyle: { color: '#ffffff', fontSize: 12, fontFamily: 'Geist, sans-serif' },
+      extraCssText: 'box-shadow:0 1px 6px rgba(0,0,0,0.18);border-radius:2px;',
+      axisPointer: { lineStyle: { color: c.dim, width: 1, opacity: 0.35 } },
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      axisLine: { show: false },
+      axisTick: { show: false },
+      axisLabel: { color: c.muted, fontSize: 12, fontFamily: 'Geist Mono, monospace', margin: 10 },
+      splitLine: { show: true, lineStyle: { color: c.line, type: 'solid', opacity: 0.85 } },
+    },
+    yAxis: {
+      type: 'value',
+      min: 0,
+      max: (value) => value.max <= 0 ? 1 : undefined,
+      axisLine: { show: false },
+      axisTick: { show: false },
+      axisLabel: { color: c.muted, fontSize: 12, fontFamily: 'Geist Mono, monospace', margin: 8 },
+      splitLine: { show: true, lineStyle: { color: c.line, type: 'solid', opacity: 0.85 } },
+    },
+  };
+}
+
+function tooltipRows(title, rows) {
+  return '<div style="padding:5px 7px">' +
+    '<div style="margin-bottom:3px;color:#fff;font-size:12px">' + escapeHtml(title) + '</div>' +
+    rows.map((row) =>
+      '<div style="display:flex;align-items:center;gap:5px;margin-top:1px;">' +
+        '<span style="width:6px;height:6px;border-radius:50%;background:' + row.color + ';display:inline-block"></span>' +
+        '<span style="min-width:44px;color:#fff">' + escapeHtml(row.value) + '</span>' +
+        '<span style="color:#b7bdc9">' + escapeHtml(row.label) + '</span>' +
+      '</div>'
+    ).join('') +
+  '</div>';
+}
+
+function emptyHTML(title, body) {
+  return '<div class="empty"><h4>' + escapeHtml(title) + '</h4><p>' + body + '</p></div>';
+}
+
+window.dismissWelcome = function() {
+  localStorage.setItem('ap-welcome-dismissed', '1');
+  state.welcomeDismissed = true;
+  renderOverview();
+};
+
+// ─── Tab: ACTIVITY ──────────────────────────────────────────────────────
+const ACTIVITY_FIELD_OPTIONS = [
+  { value: 'any', label: 'Any field' },
+  { value: 'summary', label: 'Summary' },
+  { value: 'tool', label: 'Tool' },
+  { value: 'action', label: 'Action' },
+  { value: 'session', label: 'Session' },
+  { value: 'reason', label: 'Reason' },
+];
+const ACTIVITY_OPERATOR_OPTIONS = [
+  { value: 'contains', label: 'Contains' },
+  { value: 'equals', label: 'Equals' },
+];
+
+function renderActivity() {
+  const events = filteredEvents();
+  const html =
+    '<div class="page-head">' +
+      '<div><h1>Actions</h1></div>' +
+      '<div class="actions">' + renderRangePicker() + '<span class="muted-stat">' + events.length + ' / ' + state.events.size + '</span></div>' +
+    '</div>' +
+
+    '<form class="run-search" id="activity-search-form" autocomplete="off">' +
+      '<div class="run-search-row">' +
+        '<span class="condition-joiner">AND</span>' +
+        '<div class="run-search-controls">' +
+          renderDropdown({ id: 'activity-field', value: state.searchField, options: ACTIVITY_FIELD_OPTIONS }) +
+          renderDropdown({ id: 'activity-operator', value: state.searchOperator, options: ACTIVITY_OPERATOR_OPTIONS, compact: true }) +
+          '<input class="search" type="text" id="activity-search" placeholder="Any" value="' + escapeHtml(state.search) + '" />' +
+        '</div>' +
+        '<button class="run-search-clear" type="button" id="activity-search-clear" aria-label="Clear search">×</button>' +
+      '</div>' +
+      '<div class="run-search-footer">' +
+        '<button class="add-condition" type="button" id="activity-add-condition">+ Add Condition</button>' +
+        '<button class="run-search-submit" type="submit">' + icon('search', 'svg-icon') + '<span>Search</span></button>' +
+      '</div>' +
+    '</form>' +
+
+    '<div class="card"><div class="body flush">' +
+      (events.length ?
+        '<table class="events">' +
+          '<thead><tr>' +
+            '<th class="time">Time</th>' +
+            '<th class="session">Session</th>' +
+            '<th class="tool">Tool</th>' +
+            '<th>Summary</th>' +
+            '<th class="verdict-cell">Verdict</th>' +
+            '<th class="dur">ms</th>' +
+          '</tr></thead>' +
+          '<tbody>' +
+            events.slice(0, 300).map((e) => {
+              const summary = escapeHtml(summarize(e));
+              return '<tr class="' + e.decision + (e._flash ? ' flash' : '') + '" data-event-id="' + e.id + '">' +
+                '<td class="time">' + fmtTime(e.timestamp) + '</td>' +
+                '<td class="session">' + escapeHtml(e.session_id.slice(0,7)) + '</td>' +
+                '<td class="tool">' + e.tool + '</td>' +
+                '<td class="summary" title="' + summary + '">' + summary + '</td>' +
+                '<td class="verdict-cell">' + verdictHTML(e) + '</td>' +
+                '<td class="dur">' + (e.duration_ms != null ? e.duration_ms : '·') + '</td>' +
+              '</tr>';
+            }).join('') +
+          '</tbody>' +
+        '</table>' :
+        emptyHTML(
+          state.search
+            ? 'No events match these filters'
+            : 'No events yet',
+          state.search
+            ? 'Try clearing your filters or widening the time range.'
+            : 'Run any tool through the proxy and it will appear here.'
+        )
+      ) +
+    '</div></div>';
+
+  disposeCharts();
+  $('page').innerHTML = html;
+  const form = $('activity-search-form');
+  const search = $('activity-search');
+  if (form) {
+    form.addEventListener('submit', (ev) => {
+      ev.preventDefault();
+      state.search = search?.value.trim() || '';
+      renderActivity();
+    });
+  }
+  if (search) {
+    search.addEventListener('input', (ev) => {
+      state.search = ev.target.value;
+      state._focusSearchOnNextRender = true;
+      renderActivity();
+    });
+    if (document.activeElement === document.body && state._focusSearchOnNextRender) {
+      search.focus();
+      search.setSelectionRange(search.value.length, search.value.length);
+      state._focusSearchOnNextRender = false;
+    }
+  }
+  $('activity-search-clear')?.addEventListener('click', () => {
+    state.search = '';
+    renderActivity();
+  });
+  $('activity-add-condition')?.addEventListener('click', () => $('activity-search')?.focus());
+  bindRangePicker();
+}
+
+// ─── Tab: POLICIES ──────────────────────────────────────────────────────
+const POLICY_THRESHOLD = 0.40;
+const POLICY_KIND_OPTIONS = [
+  { value: 'block',   label: 'Block' },
+  { value: 'approve', label: 'Approve' },
+  { value: 'allow',   label: 'Allow' },
+];
+const POLICY_TOOL_OPTIONS = [
+  { value: '*', label: 'All tools' },
+  { value: 'bash', label: 'Bash' },
+  { value: 'filesystem', label: 'FS' },
+  { value: 'network', label: 'Network' },
+];
+const TESTER_TOOL_OPTIONS = [
+  { value: 'bash', label: 'bash' },
+  { value: 'filesystem', label: 'fs' },
+  { value: 'network', label: 'net' },
+];
+
+function renderPolicies() {
+  const enabled = state.policies.filter(p => p.enabled);
+  const allHits = state.policies.reduce((s, p) => s + (p.match_count || 0), 0);
+  const blockPolicies = state.policies.filter(p => p.kind === 'block');
+  const approvePolicies = state.policies.filter(p => p.kind === 'approve');
+  const allowPolicies = state.policies.filter(p => p.kind === 'allow');
+
+  const html =
+    '<div class="page-head">' +
+      '<div><h1>Policies</h1></div>' +
+      '<div class="actions">' +
+        state.policies.length + ' total · ' + enabled.length + ' active · ' + allHits + ' hits' +
+      '</div>' +
+    '</div>' +
+
+    '<form class="policy-form" id="policy-form" autocomplete="off">' +
+      renderDropdown({ name: 'kind', value: 'block', options: POLICY_KIND_OPTIONS }) +
+      renderDropdown({ name: 'applies_to', value: '*', options: POLICY_TOOL_OPTIONS }) +
+      '<input type="text" name="description" placeholder="Describe what should be allowed or blocked, in plain English…" required />' +
+      '<button type="submit" class="btn primary">Add policy</button>' +
+    '</form>' +
+
+    '<div class="policy-split three">' +
+      renderPolicyList('block', 'Block list', blockPolicies) +
+      renderPolicyList('approve', 'Approve list', approvePolicies) +
+      renderPolicyList('allow', 'Allow list', allowPolicies) +
+    '</div>' +
+
+    '<div class="tester">' +
+      '<div class="head">' +
+        '<h3>Test</h3>' +
+        '<span class="meta">threshold ' + POLICY_THRESHOLD + '</span>' +
+      '</div>' +
+      '<div class="form">' +
+        '<input id="tester-input" type="text" placeholder="Type a command to score against every policy…" />' +
+        renderDropdown({ id: 'tester-tool', value: 'bash', options: TESTER_TOOL_OPTIONS, compact: true }) +
+        '<button class="btn primary" id="tester-btn">Test</button>' +
+      '</div>' +
+      '<div class="tester-results" id="tester-results">' +
+        '<div style="padding:24px; color:var(--dim); font-size:12px; text-align:center">Press Enter to score.</div>' +
+      '</div>' +
+    '</div>' +
+
+    renderBuiltinRules();
+
+  $('page').innerHTML = html;
+
+  const form = $('policy-form');
+  form.addEventListener('submit', async (ev) => {
+    ev.preventDefault();
+    const data = {
+      kind: form.kind.value,
+      applies_to: form.applies_to.value,
+      description: form.description.value.trim(),
+      scope: 'global',
+    };
+    if (!data.description) return;
+    const btn = form.querySelector('button[type=submit]');
+    btn.disabled = true;
+    const original = btn.textContent;
+    btn.textContent = 'Embedding…';
+    try {
+      const r = await api.createPolicy(data);
+      if (!r.ok) {
+        const err = await r.json().catch(() => ({}));
+        alert('Could not add policy: ' + (err.error ?? r.status));
+      } else {
+        form.description.value = '';
+        await tickPolicies();
+      }
+    } finally {
+      btn.disabled = false;
+      btn.textContent = original;
+    }
+  });
+
+  document.querySelectorAll('.policy-row').forEach((row) => {
+    row.addEventListener('click', async (ev) => {
+      const action = ev.target.dataset.action;
+      if (!action) return;
+      const id = Number(row.dataset.id);
+      if (action === 'delete') {
+        if (!confirm('Delete this policy?')) return;
+        await api.deletePolicy(id);
+        await tickPolicies();
+      } else if (action === 'toggle') {
+        const isEnabled = !row.classList.contains('disabled');
+        await api.updatePolicy(id, { enabled: !isEnabled });
+        await tickPolicies();
+      }
+    });
+  });
+
+  $('tester-btn').addEventListener('click', runTester);
+  $('tester-input').addEventListener('keydown', (ev) => { if (ev.key === 'Enter') runTester(); });
+
+  document.querySelectorAll('[data-builtin-section]').forEach((head) => {
+    head.addEventListener('click', (ev) => {
+      if (ev.target.closest('.switch')) return;
+      const key = head.dataset.builtinSection;
+      state.builtinExpand[key] = !state.builtinExpand[key];
+      refreshCurrent({ source: 'builtin' });
+    });
+  });
+
+  document.querySelectorAll('[data-builtin-row]').forEach((row) => {
+    row.addEventListener('click', async (ev) => {
+      const target = ev.target.closest('[data-action="toggle-builtin"]');
+      if (!target) return;
+      ev.stopPropagation();
+      const id = row.dataset.builtinRow;
+      const enabled = !row.classList.contains('disabled');
+      const next = !enabled;
+      if (!next && row.dataset.kind === 'deny') {
+        if (!confirm('Disable hard-deny rule "' + row.dataset.reason + '"?\n\nThis built-in guardrail blocks catastrophic commands. Disabling it removes that protection.')) return;
+      }
+      row.classList.toggle('disabled', !next);
+      try {
+        await api.setBuiltinRule(id, next);
+        await tickBuiltinRules();
+      } catch {
+        row.classList.toggle('disabled', next); // revert
+      }
+    });
+  });
+}
+
+function renderRangePicker() {
+  return '<div class="range-picker" role="tablist" aria-label="Time range">' +
+    RANGE_OPTIONS.map((r) =>
+      '<button type="button" class="range-pill ' + (state.range === r.value ? 'active' : '') + '"' +
+        ' data-range-pill="' + r.value + '"' +
+        ' role="tab"' +
+        ' aria-selected="' + (state.range === r.value ? 'true' : 'false') + '"' +
+        ' title="' + escapeHtml(r.full) + '">' +
+        escapeHtml(r.label) +
+      '</button>'
+    ).join('') +
+  '</div>';
+}
+
+function bindRangePicker() {
+  document.querySelectorAll('[data-range-pill]').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      const next = btn.getAttribute('data-range-pill');
+      if (next) setRange(next);
+    });
+  });
+}
+
+function renderDropdown({ name, id, value, options, compact = false }) {
+  const selected = options.find(o => o.value === value) || options[0];
+  const inputAttrs =
+    (name ? ' name="' + escapeHtml(name) + '"' : '') +
+    (id ? ' id="' + escapeHtml(id) + '"' : '');
+  return '<div class="custom-select ' + (compact ? 'compact' : '') + '" data-dropdown>' +
+    '<input type="hidden"' + inputAttrs + ' value="' + escapeHtml(selected.value) + '" />' +
+    '<button type="button" class="custom-select-trigger" data-dropdown-trigger aria-haspopup="listbox" aria-expanded="false">' +
+      '<span class="custom-select-label">' + escapeHtml(selected.label) + '</span>' +
+      icon('chevron-down', 'svg-icon select-chevron') +
+    '</button>' +
+    '<div class="custom-select-menu" role="listbox">' +
+      options.map(o =>
+        '<button type="button" role="option" data-dropdown-option data-value="' + escapeHtml(o.value) + '" data-label="' + escapeHtml(o.label) + '" aria-selected="' + (o.value === selected.value ? 'true' : 'false') + '">' +
+          escapeHtml(o.label) +
+        '</button>'
+      ).join('') +
+    '</div>' +
+  '</div>';
+}
+
+function renderPolicyList(kind, title, policies) {
+  const emptyTitle = kind === 'block' ? 'No block rules' : kind === 'approve' ? 'No approve rules' : 'No allow rules';
+  const emptyBody =
+    kind === 'block'   ? 'Add a block rule above to stop unsafe or unwanted actions.' :
+    kind === 'approve' ? 'Add an approve rule above to require human review for matching actions.' :
+                         'Add an allow rule above to de-escalate trusted workflows.';
+  return '<div class="card">' +
+    '<div class="head"><h3>' + title + '</h3><span class="meta">' + policies.length + ' rules</span></div>' +
+    '<div class="body flush">' +
+      (policies.length
+        ? policies.map(renderPolicyRow).join('')
+        : emptyHTML(emptyTitle, emptyBody)) +
+    '</div>' +
+  '</div>';
+}
+
+function renderBuiltinRules() {
+  const data = state.builtinRules;
+  if (!data) {
+    return '<div class="card" style="margin-top:16px"><div class="head"><h3>Built-in guardrails</h3></div><div class="body" style="padding:18px; color:var(--dim); font-size:12px">Loading…</div></div>';
+  }
+  const sections = [
+    { key: 'deny',   label: 'Hard-deny',  rules: data.hard_deny,   note: 'Always blocked. Disable only if you understand the risk.' },
+    { key: 'high',   label: 'High-risk',  rules: data.high_risk,   note: 'Allowed but flagged in the activity log.' },
+    { key: 'medium', label: 'Medium-risk', rules: data.medium_risk, note: 'Allowed; informational signal only.' },
+  ];
+  const totalEnabled = sections.reduce((sum, s) => sum + s.rules.filter(r => r.enabled).length, 0);
+  const totalAll = sections.reduce((sum, s) => sum + s.rules.length, 0);
+
+  return '<div class="card builtin-card" style="margin-top:16px">' +
+    '<div class="head">' +
+      '<h3>Built-in guardrails</h3>' +
+      '<span class="meta">' + totalEnabled + ' / ' + totalAll + ' enabled</span>' +
+    '</div>' +
+    '<div class="body flush">' +
+      sections.map(renderBuiltinSection).join('') +
+    '</div>' +
+  '</div>';
+}
+
+function renderBuiltinSection(section) {
+  const expanded = !!state.builtinExpand[section.key];
+  const enabledCount = section.rules.filter(r => r.enabled).length;
+  return '<div class="builtin-section ' + (expanded ? 'open' : '') + '">' +
+    '<button type="button" class="builtin-section-head" data-builtin-section="' + section.key + '">' +
+      '<span class="builtin-chevron">' + icon('chevron-down') + '</span>' +
+      '<span class="builtin-section-title">' +
+        '<span class="tag ' + (section.key === 'deny' ? 'block' : section.key === 'high' ? 'block' : 'allow') + '">' + escapeHtml(section.label) + '</span>' +
+        '<span class="builtin-section-note">' + escapeHtml(section.note) + '</span>' +
+      '</span>' +
+      '<span class="builtin-section-count">' + enabledCount + ' / ' + section.rules.length + '</span>' +
+    '</button>' +
+    (expanded
+      ? '<div class="builtin-rows">' + section.rules.map(renderBuiltinRow).join('') + '</div>'
+      : '') +
+  '</div>';
+}
+
+function renderBuiltinRow(r) {
+  return '<div class="builtin-row ' + (r.enabled ? '' : 'disabled') + '"' +
+    ' data-builtin-row="' + escapeHtml(r.id) + '"' +
+    ' data-kind="' + escapeHtml(r.kind) + '"' +
+    ' data-reason="' + escapeHtml(r.reason) + '">' +
+    '<div class="builtin-row-main">' +
+      '<div class="builtin-row-reason">' + escapeHtml(r.reason) + '</div>' +
+      '<code class="builtin-row-pattern">' + escapeHtml(r.pattern) + '</code>' +
+    '</div>' +
+    '<span class="switch" data-action="toggle-builtin" title="Enable / disable"></span>' +
+  '</div>';
+}
+
+function renderPolicyRow(p) {
+  return '<div class="policy-row ' + (p.enabled ? '' : 'disabled') + '" data-id="' + p.id + '">' +
+    '<span class="tag ' + p.kind + '">' + p.kind + '</span>' +
+    '<div class="desc">' + escapeHtml(p.description) +
+      '<small>scope: ' + escapeHtml(p.scope) + ' · last update ' + fmtRel(p.updated_at) + '</small>' +
+    '</div>' +
+    '<span class="tag ' + (p.applies_to === '*' ? 'all' : p.applies_to) + '">' + (p.applies_to === '*' ? 'all' : p.applies_to) + '</span>' +
+    '<span class="hits"><b>' + (p.match_count || 0) + '</b> hits</span>' +
+    '<span class="switch" data-action="toggle" title="Enable / disable"></span>' +
+    '<button class="btn ghost danger icon-btn" data-action="delete" title="Delete" aria-label="Delete policy">' + icon('trash') + '</button>' +
+  '</div>';
+}
+
+async function runTester() {
+  const text = $('tester-input').value.trim();
+  if (!text) return;
+  const tool = $('tester-tool').value;
+  const out = $('tester-results');
+  out.innerHTML = '<div style="padding:24px 18px; color:var(--dim); font-family:var(--mono); font-size:11px; text-align:center">scoring…</div>';
+  try {
+    const data = await api.testPolicy(text, tool);
+    if (!data.scores || !data.scores.length) {
+      out.innerHTML = '<div style="padding:30px 18px; color:var(--dim); font-family:var(--mono); font-size:11px; text-align:center">no policies apply to <strong>' + escapeHtml(tool) + '</strong>. Add one above and try again.</div>';
+      return;
+    }
+    out.innerHTML = data.scores.slice(0, 8).map((s) => {
+      const meets = s.similarity >= POLICY_THRESHOLD && s.policy.enabled;
+      const matchCls = meets ? ('match ' + s.policy.kind) : '';
+      const verdict = !s.policy.enabled
+        ? 'off'
+        : meets ? (s.policy.kind === 'block' ? 'BLOCK' : 'ALLOW') : 'under';
+      return '<div class="tester-result-row ' + matchCls + '">' +
+        '<span class="sim">' + s.similarity.toFixed(3) + '</span>' +
+        '<div class="sim-bar" style="--w:' + Math.round(s.similarity * 100) + '%"></div>' +
+        '<span class="desc" title="' + escapeHtml(s.policy.description) + '">' + escapeHtml(s.policy.description) + '</span>' +
+        '<span class="verdict-pill">' + verdict + '</span>' +
+      '</div>';
+    }).join('');
+  } catch (err) {
+    out.innerHTML = '<div style="padding:18px; color:var(--red); font-family:var(--mono); font-size:11px;">' + escapeHtml(String(err)) + '</div>';
+  }
+}
+
+// ─── Tab: APPROVALS ─────────────────────────────────────────────────────
+function renderApprovals() {
+  const data = state.approvals || { pending_count: 0, slack_configured: false, approvals: [] };
+  const list = data.approvals || [];
+  const pending = list.filter(a => a.status === 'pending');
+  const decided = list.filter(a => a.status !== 'pending');
+  const slackOk = !!data.slack_configured;
+
+  const html =
+    '<div class="page-head">' +
+      '<div><h1>Approvals</h1></div>' +
+      '<div class="actions">' +
+        '<span class="muted-stat">' + pending.length + ' pending</span>' +
+        (slackOk
+          ? '<span class="badge slack ok" title="Slack notifications enabled">Slack ✓</span>'
+          : '<a href="#/settings" data-tab="settings" class="badge slack" title="Configure Slack">Slack ·</a>') +
+      '</div>' +
+    '</div>' +
+
+    (!slackOk
+      ? '<div class="banner subtle" style="margin-bottom:14px">' +
+          '<div><b>No Slack webhook configured.</b><br/><span class="muted-stat">Approvals still work — reviewers just need to open this dashboard. Add a webhook in <a href="#/settings" data-tab="settings" class="link">Settings</a> to get a Slack ping for every pending request.</span></div>' +
+        '</div>'
+      : '') +
+
+    '<div class="card" style="margin-bottom:18px">' +
+      '<div class="head"><h3>Pending</h3><span class="meta">' + pending.length + '</span></div>' +
+      '<div class="body flush">' +
+        (pending.length
+          ? pending.map(renderApprovalRow).join('')
+          : emptyHTML('Nothing pending', 'High-risk actions and approve-policy matches will land here for human review.')) +
+      '</div>' +
+    '</div>' +
+
+    '<div class="card">' +
+      '<div class="head"><h3>History</h3><span class="meta">last ' + Math.min(decided.length, 50) + '</span></div>' +
+      '<div class="body flush">' +
+        (decided.length
+          ? decided.slice(0, 50).map(renderApprovalRow).join('')
+          : emptyHTML('No history yet', 'Approved, denied, and timed-out requests appear here.')) +
+      '</div>' +
+    '</div>';
+
+  disposeCharts();
+  $('page').innerHTML = html;
+  document.querySelectorAll('[data-approval-action]').forEach((btn) => {
+    btn.addEventListener('click', async () => {
+      const id = Number(btn.getAttribute('data-approval-id'));
+      const action = btn.getAttribute('data-approval-action');
+      if (!id || (action !== 'approved' && action !== 'denied')) return;
+      btn.setAttribute('disabled', 'true');
+      try {
+        await api.decideApproval(id, action);
+        await tickApprovals();
+      } finally {
+        btn.removeAttribute('disabled');
+      }
+    });
+  });
+}
+
+function renderApprovalRow(a) {
+  const isPending = a.status === 'pending';
+  const decidedLine = isPending
+    ? 'requested ' + fmtRel(a.requested_at)
+    : a.status + (a.decided_by ? ' by ' + escapeHtml(a.decided_by) : '') + ' · ' + fmtRel(a.decided_at || a.requested_at);
+  return '<div class="approval-row ' + a.status + '" data-approval-row="' + a.id + '">' +
+    '<div class="approval-main">' +
+      '<div class="approval-title">' +
+        '<span class="tag ' + (a.status === 'pending' ? 'block' : a.status === 'approved' ? 'allow' : 'block') + '">' + a.status + '</span>' +
+        '<span class="approval-tool">' + escapeHtml(a.tool) + '</span>' +
+        '<span class="approval-reason">' + escapeHtml(a.reason) + '</span>' +
+      '</div>' +
+      '<code class="approval-summary">' + escapeHtml(a.summary) + '</code>' +
+      '<div class="approval-meta">#' + a.id + ' · ' + escapeHtml(decidedLine) + '</div>' +
+    '</div>' +
+    (isPending
+      ? '<div class="approval-actions">' +
+          '<button class="btn primary" data-approval-action="approved" data-approval-id="' + a.id + '">Approve</button>' +
+          '<button class="btn ghost danger" data-approval-action="denied" data-approval-id="' + a.id + '">Deny</button>' +
+        '</div>'
+      : '') +
+  '</div>';
+}
+
+// ─── Tab: INSIGHTS ──────────────────────────────────────────────────────
+function renderInsights() {
+  const ins = state.insights;
+  if (!ins) {
+    disposeCharts();
+    $('page').innerHTML =
+      '<div class="page-head"><div><h1>Insights</h1><div class="subtitle">Loading…</div></div></div>';
+    return;
+  }
+
+  const rangeLbl = currentRange().full;
+  const html =
+    '<div class="page-head">' +
+      '<div><h1>Insights</h1></div>' +
+      '<div class="actions">' + renderRangePicker() + '</div>' +
+    '</div>' +
+
+    '<div class="card" style="margin-bottom:18px">' +
+      '<div class="head"><h3>Activity over time</h3><span class="meta">' + escapeHtml(rangeLbl) + '</span></div>' +
+      '<div class="body">' + renderStackedChart(ins.hourly) + '</div>' +
+    '</div>' +
+
+    '<div class="three-col">' +
+      '<div class="card"><div class="head"><h3>By tool</h3><span class="meta">' + escapeHtml(rangeLbl) + '</span></div><div class="body">' +
+        renderToolDist(ins.tools) +
+      '</div></div>' +
+      '<div class="card"><div class="head"><h3>By decision</h3><span class="meta">' + escapeHtml(rangeLbl) + '</span></div><div class="body">' +
+        renderDecisionDist(ins.hourly) +
+      '</div></div>' +
+      '<div class="card"><div class="head"><h3>ML classifier</h3><span class="meta">' + (ins.ml.ready ? 'ready' : 'loading') + '</span></div><div class="body">' +
+        renderMLStats(ins.ml) +
+      '</div></div>' +
+    '</div>' +
+
+    '<div class="two-col" style="margin-top:18px">' +
+      '<div class="card"><div class="head"><h3>Top denied actions</h3><span class="meta">' + escapeHtml(rangeLbl) + '</span></div><div class="body flush">' +
+        (ins.top_denied.length ? renderActionRanking(ins.top_denied) :
+          emptyHTML('All clear', 'Nothing has been denied in this window.')) +
+      '</div></div>' +
+      '<div class="card"><div class="head"><h3>Top flagged actions</h3><span class="meta">' + escapeHtml(rangeLbl) + '</span></div><div class="body flush">' +
+        (ins.top_flagged.length ? renderActionRanking(ins.top_flagged) :
+          emptyHTML('Nothing flagged', 'No high-risk actions in this window.')) +
+      '</div></div>' +
+    '</div>' +
+
+    '<div class="card" style="margin-top:18px">' +
+      '<div class="head"><h3>Recent sessions</h3><span class="meta">last 10</span></div>' +
+      '<div class="body flush">' +
+        (ins.sessions.length ? renderSessionList(ins.sessions) : emptyHTML('No sessions yet', 'Sessions appear here as agents make tool calls.')) +
+      '</div>' +
+    '</div>';
+
+  disposeCharts();
+  $('page').innerHTML = html;
+  mountInsightsCharts(ins);
+  bindRangePicker();
+}
+
+function renderStackedChart(hourly) {
+  return renderHourlyChart('insights-activity-chart', hourly);
+}
+
+function renderToolDist(tools) {
+  if (!tools.length) return '<div class="empty"><h4>—</h4><p>No tool calls yet.</p></div>';
+  return renderEChart('tool-dist-chart', 'echart mini');
+}
+
+function renderDecisionDist(hourly) {
+  const totals = hourly.reduce((acc, h) => {
+    acc.allowed += h.allowed; acc.flagged += h.flagged; acc.denied += h.denied;
+    return acc;
+  }, { allowed: 0, flagged: 0, denied: 0 });
+  const sum = totals.allowed + totals.flagged + totals.denied;
+  if (sum === 0) return '<div class="empty"><h4>—</h4><p>No decisions yet.</p></div>';
+  return renderEChart('decision-dist-chart', 'echart mini');
+}
+
+function renderMLStats(ml) {
+  if (!ml.ready) return '<div style="font-family:var(--mono); font-size:12px; color:var(--muted)">' +
+    (ml.error ? '<span style="color:var(--red)">Error: ' + escapeHtml(ml.error) + '</span>' : 'Embedding model is loading. The classifier falls back to deterministic regex rules until ready.') +
+  '</div>';
+  const total = ml.prototype_total;
+  return renderEChart('ml-prototype-chart', 'echart mini') +
+  '<div style="margin-top:14px; padding-top:14px; border-top:1px solid var(--line); font-family:var(--mono); font-size:11px; color:var(--muted); line-height:1.7;">' +
+    'Total prototypes: <span style="color:var(--accent); font-weight:500">' + total + '</span><br/>' +
+    'Top-1 trust: 0.85 sim<br/>' +
+    'Defer floor: 0.45 sim' +
+  '</div>';
+}
+
+function mountOverviewCharts(ins) {
+  if (!ins) return;
+  mountHourlyLineChart('overview-hourly-chart', ins.hourly, { mode: 'decisions' });
+  mountToolChart(ins.tools);
+  mountDecisionChart(ins.hourly);
+  mountMLChart(ins.ml);
+  mountOverviewToolChart(ins.tools);
+  mountOverviewDecisionChart(ins.hourly);
+}
+
+function mountOverviewToolChart(tools) {
+  if (!$('overview-tool-chart') || !tools?.length) return;
+  const c = chartPalette();
+  const colorByTool = { bash: c.purple, filesystem: c.blue, network: c.amber };
+  mountHorizontalBarChart('overview-tool-chart', {
+    labels: tools.map((t) => t.tool),
+    values: tools.map((t) => t.count),
+    colors: tools.map((t) => colorByTool[t.tool] || c.accent),
+    tooltipLabel: 'calls',
+  });
+}
+
+function mountOverviewDecisionChart(hourly) {
+  if (!$('overview-decision-chart') || !hourly?.length) return;
+  const totals = hourly.reduce((acc, h) => {
+    acc.allowed += h.allowed; acc.flagged += h.flagged; acc.denied += h.denied;
+    return acc;
+  }, { allowed: 0, flagged: 0, denied: 0 });
+  const c = chartPalette();
+  mountHorizontalBarChart('overview-decision-chart', {
+    labels: ['allowed', 'flagged', 'denied'],
+    values: [totals.allowed, totals.flagged, totals.denied],
+    colors: [c.green, c.amber, c.red],
+    tooltipLabel: 'events',
+  });
+}
+
+function mountInsightsCharts(ins) {
+  mountHourlyLineChart('insights-activity-chart', ins.hourly, { mode: 'total' });
+  mountToolChart(ins.tools);
+  mountDecisionChart(ins.hourly);
+  mountMLChart(ins.ml);
+}
+
+function mountChart(id, option) {
+  const el = $(id);
+  if (!el) return;
+  if (!window.echarts) {
+    el.innerHTML = '<div class="empty"><h4>Chart unavailable</h4><p>Apache ECharts did not load.</p></div>';
+    return;
+  }
+  const prev = state.charts.get(id);
+  const sig = JSON.stringify(option, (_key, value) => typeof value === 'function' ? String(value) : value);
+  if (prev && state.chartSigs.get(id) === sig) {
+    prev.resize();
+    return;
+  }
+  if (prev) {
+    prev.setOption(option, true);
+    state.chartSigs.set(id, sig);
+    prev.resize();
+    return;
+  }
+  const chart = window.echarts.init(el, null, { renderer: 'canvas' });
+  chart.setOption(option);
+  state.charts.set(id, chart);
+  state.chartSigs.set(id, sig);
+}
+
+function mountHourlyLineChart(id, hourly, opts) {
+  if (!hourly || !hourly.length) return;
+  const c = chartPalette();
+  const labels = hourly.map((h) => formatHourLabel(h.hour));
+  const option = baseChartOption();
+  option.grid = {
+    left: 44,
+    right: 16,
+    top: opts.mode === 'decisions' ? 36 : 24,
+    bottom: 34,
+    containLabel: false,
+  };
+  option.xAxis.data = labels;
+  if (opts.mode === 'decisions') {
+    option.legend = {
+      top: 0,
+      right: 0,
+      itemWidth: 10,
+      itemHeight: 4,
+      textStyle: { color: c.dim, fontSize: 11, fontFamily: 'Geist Mono, monospace' },
+    };
+    option.tooltip.formatter = (params) => {
+      const idx = params[0]?.dataIndex ?? 0;
+      return tooltipRows(formatChartDate(hourly[idx]?.hour), params.map((p) => ({
+        color: p.color,
+        value: String(p.value),
+        label: p.seriesName,
+      })));
+    };
+    option.series = [
+      chartLineSeries('allowed', hourly.map((h) => h.allowed), c.accent, false),
+      chartLineSeries('flagged', hourly.map((h) => h.flagged), c.amber, false),
+      chartLineSeries('denied', hourly.map((h) => h.denied), c.red, false),
+    ];
+  } else {
+    option.tooltip.formatter = (params) => {
+      const p = params[0];
+      return tooltipRows(formatChartDate(hourly[p.dataIndex]?.hour), [{
+        color: c.accent,
+        value: String(p.value),
+        label: 'events',
+      }]);
+    };
+    option.series = [chartLineSeries('events', hourly.map((h) => h.total), c.accent, false)];
+  }
+  mountChart(id, option);
+}
+
+function chartLineSeries(name, data, color, stacked) {
+  return {
+    name,
+    type: 'line',
+    data,
+    smooth: true,
+    symbol: 'circle',
+    symbolSize: 3,
+    stack: stacked ? 'decisions' : undefined,
+    itemStyle: { color, borderColor: color },
+    lineStyle: { width: 1.4, color },
+    areaStyle: { opacity: stacked ? 0.08 : 0.06, color },
+  };
+}
+
+function mountToolChart(tools) {
+  if (!$('tool-dist-chart') || !tools?.length) return;
+  const c = chartPalette();
+  const colorByTool = { bash: c.purple, filesystem: c.blue, network: c.amber };
+  mountHorizontalBarChart('tool-dist-chart', {
+    labels: tools.map((t) => t.tool),
+    values: tools.map((t) => t.count),
+    colors: tools.map((t) => colorByTool[t.tool] || c.accent),
+    tooltipLabel: 'calls',
+  });
+}
+
+function mountDecisionChart(hourly) {
+  if (!$('decision-dist-chart') || !hourly?.length) return;
+  const totals = hourly.reduce((acc, h) => {
+    acc.allowed += h.allowed; acc.flagged += h.flagged; acc.denied += h.denied;
+    return acc;
+  }, { allowed: 0, flagged: 0, denied: 0 });
+  const c = chartPalette();
+  mountHorizontalBarChart('decision-dist-chart', {
+    labels: ['allowed', 'flagged', 'denied'],
+    values: [totals.allowed, totals.flagged, totals.denied],
+    colors: [c.green, c.amber, c.red],
+    tooltipLabel: 'events',
+  });
+}
+
+function mountMLChart(ml) {
+  if (!$('ml-prototype-chart') || !ml?.ready) return;
+  const c = chartPalette();
+  mountHorizontalBarChart('ml-prototype-chart', {
+    labels: ['high-risk', 'medium', 'low'],
+    values: [ml.prototypes.high_flag, ml.prototypes.medium, ml.prototypes.low],
+    colors: [c.red, c.amber, c.accent],
+    tooltipLabel: 'prototypes',
+  });
+}
+
+function mountHorizontalBarChart(id, cfg) {
+  const c = chartPalette();
+  const option = {
+    grid: { left: 4, right: 22, top: 8, bottom: 4, containLabel: true },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'shadow', shadowStyle: { color: 'rgba(63,99,242,0.05)' } },
+      backgroundColor: c.text,
+      borderWidth: 0,
+      padding: 0,
+      textStyle: { color: '#ffffff', fontSize: 12, fontFamily: 'Geist, sans-serif' },
+      extraCssText: 'box-shadow:0 1px 6px rgba(0,0,0,0.18);border-radius:2px;',
+      formatter: (params) => {
+        const p = params[0];
+        return tooltipRows(p.name, [{
+          color: p.color,
+          value: String(p.value),
+          label: cfg.tooltipLabel,
+        }]);
+      },
+    },
+    xAxis: {
+      type: 'value',
+      axisLine: { show: false },
+      axisTick: { show: false },
+      axisLabel: { color: c.dim, fontSize: 11, fontFamily: 'Geist Mono, monospace' },
+      splitLine: { show: true, lineStyle: { color: c.line, type: 'solid', opacity: 0.7 } },
+    },
+    yAxis: {
+      type: 'category',
+      inverse: true,
+      data: cfg.labels,
+      axisLine: { show: false },
+      axisTick: { show: false },
+      axisLabel: { color: c.muted, fontSize: 11, fontFamily: 'Geist Mono, monospace' },
+    },
+    series: [{
+      type: 'bar',
+      data: cfg.values,
+      barWidth: 10,
+      label: {
+        show: true,
+        position: 'right',
+        color: c.muted,
+        fontFamily: 'Geist Mono, monospace',
+        fontSize: 11,
+      },
+      itemStyle: {
+        borderRadius: [2, 2, 2, 2],
+        color: (params) => cfg.colors[params.dataIndex] || c.accent,
+      },
+    }],
+  };
+  mountChart(id, option);
+}
+
+function renderActionRanking(actions) {
+  return '<div class="action-list">' + actions.map((a, i) =>
+    '<div class="action-item" onclick="(()=>{state.search=' + JSON.stringify(a.summary || '') + '; navigate(\'activity\');})()">' +
+      '<span class="rank">' + (i+1).toString().padStart(2,'0') + '</span>' +
+      '<span class="cmd">' + escapeHtml((a.summary || '').slice(0, 90)) + '<small>' + a.tool + ' · ' + a.risk_level + '</small></span>' +
+      '<span class="count">' + a.count + '</span>' +
+    '</div>'
+  ).join('') + '</div>';
+}
+
+function renderSessionList(sessions) {
+  return '<div class="action-list">' + sessions.map((s) =>
+    '<div class="action-item session-item" onclick="(()=>{state.search=' + JSON.stringify(s.session_id) + '; navigate(\'activity\');})()">' +
+      '<span class="rank">' + escapeHtml(s.session_id.slice(0, 7)) + '</span>' +
+      '<span class="cmd">' + s.events + ' events · ' +
+        (s.flagged ? '<span style="color:var(--amber)">' + s.flagged + ' flagged</span> · ' : '') +
+        (s.denied ? '<span style="color:var(--red)">' + s.denied + ' denied</span> · ' : '') +
+        '<small>' + escapeHtml(s.tools || '') + ' · ' + fmtRel(s.last_event) + '</small>' +
+      '</span>' +
+      '<span class="count" style="color:var(--muted)">' + icon('arrow-right') + '</span>' +
+    '</div>'
+  ).join('') + '</div>';
+}
+
+// ─── Tab: DOCS ──────────────────────────────────────────────────────────
+function renderDocs() {
+  const npxConfig = [
+    '{',
+    '  "mcpServers": {',
+    '    "agent-proxy": {',
+    '      "command": "npx",',
+      '      "args": ["-y", "@roxy-agent/agents"]',
+    '    }',
+    '  }',
+    '}'
+  ].join('\\n');
+
+  const localConfig = [
+    '{',
+    '  "mcpServers": {',
+    '    "agent-proxy": {',
+    '      "command": "node",',
+    '      "args": ["/absolute/path/to/agent-proxy/dist/index.js"]',
+    '    }',
+    '  }',
+    '}'
+  ].join('\\n');
+
+  const html =
+    '<div class="page-head">' +
+      '<div><h1>Setup</h1></div>' +
+    '</div>' +
+
+    '<div class="docs-layout">' +
+      '<div class="docs-main">' +
+        '<section class="doc-card">' +
+          '<div class="doc-eyebrow">Quick start</div>' +
+          '<h2>1. Add the MCP config</h2>' +
+          '<p>Paste this into your MCP host config — <code>~/.cursor/mcp.json</code> for Cursor, <code>~/Library/Application Support/Claude/claude_desktop_config.json</code> for Claude Desktop, the equivalent for Codex. No clone, no build, no path editing.</p>' +
+          '<pre><code>' + escapeHtml(npxConfig) + '</code></pre>' +
+          '<p class="doc-note">On first launch <code>npx</code> downloads the package, the audit DB is created at <code>~/.agent-proxy/audit.db</code>, and the embedding model (~25 MB) is cached at <code>~/.agent-proxy/models/</code>.</p>' +
+        '</section>' +
+
+        '<section class="doc-card">' +
+          '<div class="doc-eyebrow">Reload</div>' +
+          '<h2>2. Restart or reload MCP</h2>' +
+          '<p>Reload MCP servers from your host\\u2019s settings, or restart the host process. MCP servers are spawned at host startup, so a reload is required after editing the config.</p>' +
+        '</section>' +
+
+        '<section class="doc-card">' +
+          '<div class="doc-eyebrow">Verify</div>' +
+          '<h2>3. Confirm it is working</h2>' +
+          '<p>Once connected, the host should expose the agent-proxy tools. A simple low-risk command through the proxy should return an audit event id and show up in <strong>Activity</strong> immediately.</p>' +
+          '<pre><code>bash: echo "agent-proxy active"</code></pre>' +
+          '<p>The dashboard is at <code>http://localhost:4242</code> (override with <code>AGENT_PROXY_PORT</code>).</p>' +
+        '</section>' +
+
+        '<section class="doc-card">' +
+          '<div class="doc-eyebrow">Local checkout</div>' +
+          '<h2>Running from source</h2>' +
+          '<p>If you\\u2019re developing the proxy itself or want to run a local fork, point your host at the built file directly:</p>' +
+          '<pre><code>' + escapeHtml(localConfig) + '</code></pre>' +
+          '<p class="doc-note">From a source checkout the audit DB and model cache stay in <code>&lt;repo&gt;/data/</code> so the dev install doesn\\u2019t collide with the user-level install at <code>~/.agent-proxy/</code>.</p>' +
+        '</section>' +
+
+        '<section class="doc-card">' +
+          '<div class="doc-eyebrow">Tools</div>' +
+          '<h2>What Cursor gets</h2>' +
+          '<div class="tool-grid">' +
+            docTool('bash', 'Run shell commands through risk classification and audit logging.') +
+            docTool('read_file', 'Read files with sensitive path detection.') +
+            docTool('write_file', 'Write or append files with policy checks.') +
+            docTool('delete_file', 'Delete files. Always treated as high-signal and audited.') +
+            docTool('list_directory', 'List folders without shelling out to ls.') +
+            docTool('fetch_url', 'Make HTTP requests with URL classification.') +
+            docTool('classify', 'Preview what the proxy would decide without executing.') +
+            docTool('recent_events', 'Read recent audit events for self-review.') +
+            docTool('add_policy', 'Persist natural-language allow/block rules.') +
+            docTool('list_policies', 'Inspect active guardrails and score hypothetical actions.') +
+          '</div>' +
+        '</section>' +
+      '</div>' +
+
+      '<aside class="docs-aside">' +
+        '<div class="doc-card compact">' +
+          '<div class="doc-eyebrow">Environment</div>' +
+          '<h3>Useful variables</h3>' +
+          '<dl class="env-list">' +
+            '<dt>AGENT_PROXY_PORT</dt><dd>Dashboard port. Defaults to <code>4242</code>.</dd>' +
+            '<dt>AGENT_PROXY_DATA_DIR</dt><dd>Override where the audit DB, license, and model cache live. Defaults to <code>~/.agent-proxy</code>.</dd>' +
+            '<dt>AGENT_PROXY_ML</dt><dd>Set to <code>0</code> to disable the local ML classifier.</dd>' +
+            '<dt>AGENT_PROXY_POLICY_THRESHOLD</dt><dd>Similarity threshold for natural-language policies.</dd>' +
+            '<dt>AGENT_PROXY_SCOPES</dt><dd>Comma-separated policy scopes to enforce.</dd>' +
+          '</dl>' +
+        '</div>' +
+        '<div class="doc-card compact">' +
+          '<div class="doc-eyebrow">Operational model</div>' +
+          '<h3>What runs locally</h3>' +
+          '<p>The MCP server, SQLite audit log, dashboard, policy matching, and embedding model all run on this machine. No hosted classifier is required.</p>' +
+        '</div>' +
+      '</aside>' +
+    '</div>';
+
+  disposeCharts();
+  $('page').innerHTML = html;
+}
+
+function docTool(name, body) {
+  return '<div class="tool-chip"><code>' + escapeHtml(name) + '</code><span>' + escapeHtml(body) + '</span></div>';
+}
+
+// ─── Usage chip + Settings tab ──────────────────────────────────────────
+function renderUsageChip() {
+  const lic = state.license;
+  if (!lic) return '';
+  const pct = lic.quota > 0 ? Math.min(100, Math.round((lic.used / lic.quota) * 100)) : 0;
+  const cls = pct >= 100 ? ' over' : pct >= 80 ? ' warn' : '';
+  return '<a href="#/settings" data-tab="settings" class="usage-chip' + cls + '" title="' + lic.plan + ' plan · resets ' + escapeHtml(lic.period) + '">' +
+    '<span class="bar"><span style="width:' + pct + '%"></span></span>' +
+    '<span class="num">' + lic.used + ' / ' + lic.quota + '</span>' +
+  '</a>';
+}
+
+function renderSlackSettings() {
+  const s = state.appSettings || {};
+  const masked = s.slack_webhook_url || '';
+  const configured = !!s.slack_configured;
+  const requireApproval = s.require_approval_high_risk !== false;
+  return '<div class="card" style="margin-top:14px">' +
+    '<div class="head"><h3>Human-in-the-loop</h3>' +
+      '<span class="meta">' + (configured ? '<span class="badge slack ok">Slack ✓</span>' : 'no Slack webhook') + '</span>' +
+    '</div>' +
+    '<div class="body">' +
+      '<form id="slack-form" class="hitl-form" autocomplete="off">' +
+        '<div class="hitl-field">' +
+          '<label for="hitl-webhook">Slack incoming webhook URL</label>' +
+          '<input id="hitl-webhook" type="text" name="slack_webhook_url" placeholder="https://hooks.slack.com/services/T…/B…/…" value="' + escapeHtml(masked) + '" />' +
+        '</div>' +
+        '<label class="hitl-toggle">' +
+          '<input type="checkbox" name="require_approval_high_risk" ' + (requireApproval ? 'checked' : '') + ' />' +
+          '<span class="hitl-toggle-text">' +
+            '<span class="hitl-toggle-title">Require human approval for high-risk actions</span>' +
+            '<span class="hitl-toggle-sub">Built-in regex hits like <code>rm -rf &lt;dir&gt;</code> and <code>git push --force</code> will pause for review instead of being silently flagged.</span>' +
+          '</span>' +
+        '</label>' +
+        '<div class="hitl-actions">' +
+          '<button class="btn primary" type="submit">Save</button>' +
+          '<button class="btn" type="button" id="slack-test"' + (configured ? '' : ' disabled') + '>Send test message</button>' +
+          '<span class="hitl-help">Pending approvals always work via the Approvals tab. <a href="https://api.slack.com/messaging/webhooks" target="_blank" rel="noopener">How to get a webhook URL →</a></span>' +
+        '</div>' +
+      '</form>' +
+    '</div>' +
+  '</div>';
+}
+
+function bindSlackSettings() {
+  const form = $('slack-form');
+  if (!form) return;
+  form.addEventListener('submit', async (ev) => {
+    ev.preventDefault();
+    const data = new FormData(form);
+    const webhook = String(data.get('slack_webhook_url') || '').trim();
+    const requireApproval = !!data.get('require_approval_high_risk');
+    const btn = form.querySelector('button[type=submit]');
+    btn.disabled = true;
+    const orig = btn.textContent;
+    btn.textContent = 'Saving…';
+    try {
+      // Don't overwrite the webhook with the masked version we just rendered.
+      const payload = { require_approval_high_risk: requireApproval };
+      if (webhook && !webhook.includes('•')) payload.slack_webhook_url = webhook;
+      else if (webhook === '') payload.slack_webhook_url = '';
+      await api.patchAppSettings(payload);
+      await tickAppSettings();
+    } finally {
+      btn.disabled = false;
+      btn.textContent = orig;
+    }
+  });
+  $('slack-test')?.addEventListener('click', async (ev) => {
+    const btn = ev.currentTarget;
+    btn.disabled = true;
+    const orig = btn.textContent;
+    btn.textContent = 'Sending…';
+    try {
+      const r = await api.testSlack();
+      if (r.ok) alert('Test message sent. Check your Slack channel.');
+      else alert('Test failed: ' + (r.error || 'unknown error'));
+    } finally {
+      btn.disabled = false;
+      btn.textContent = orig;
+    }
+  });
+}
+
+function renderSettings() {
+  const lic = state.license;
+  if (!lic) {
+    disposeCharts();
+    $('page').innerHTML = '<div class="page-head"><div><h1>Settings</h1></div></div>' +
+      '<div class="card"><div class="body"><div class="empty"><h4>Loading</h4><p>Fetching license status…</p></div></div></div>';
+    return;
+  }
+
+  const pct = lic.quota > 0 ? Math.min(100, Math.round((lic.used / lic.quota) * 100)) : 0;
+  const remaining = Math.max(0, lic.quota - lic.used);
+  const planLabel = lic.plan.charAt(0).toUpperCase() + lic.plan.slice(1);
+  const signedIn = lic.signed_in;
+
+  const html =
+    '<div class="page-head">' +
+      '<div><h1>Settings</h1></div>' +
+      '<div class="actions">user ' + escapeHtml(lic.user_id) + '</div>' +
+    '</div>' +
+
+    '<div class="card" style="margin-bottom:14px">' +
+      '<div class="head"><h3>Usage</h3><span class="meta">resets ' + escapeHtml(lic.period) + ' · billable: bash, write_file, delete_file, fetch_url</span></div>' +
+      '<div class="body">' +
+        '<div class="usage-large">' +
+          '<div class="row">' +
+            '<div class="num">' + lic.used + '<span class="of"> / ' + lic.quota + '</span></div>' +
+            '<div class="meta">' +
+              '<div class="plan-tag">' + escapeHtml(planLabel) + ' plan</div>' +
+              '<div>' + remaining + ' actions remaining</div>' +
+            '</div>' +
+          '</div>' +
+          '<div class="usage-bar' + (pct >= 100 ? ' over' : pct >= 80 ? ' warn' : '') + '"><span style="width:' + pct + '%"></span></div>' +
+          '<div class="footnote">' + (lic.plan === 'free'
+            ? 'Free plan: ' + lic.quota + ' billable actions per month. Read-only / introspection tools (read_file, list_directory, classify, recent_events) are always free.'
+            : planLabel + ' plan: unlimited billable actions. Quota shown for analytics.') + '</div>' +
+        '</div>' +
+      '</div>' +
+    '</div>' +
+
+    '<div class="two-col">' +
+      '<div class="card">' +
+        '<div class="head"><h3>Account</h3></div>' +
+        '<div class="body">' +
+          '<dl class="kv">' +
+            '<dt>Email</dt><dd>' + (lic.email ? escapeHtml(lic.email) : '<span style="color:var(--dim)">— not signed in —</span>') + '</dd>' +
+            '<dt>Plan</dt><dd>' + escapeHtml(planLabel) + '</dd>' +
+            '<dt>User</dt><dd class="mono">' + escapeHtml(lic.user_id) + '</dd>' +
+            '<dt>Device</dt><dd class="mono">' + escapeHtml(lic.device_id) + '</dd>' +
+          '</dl>' +
+          '<div class="settings-actions">' +
+            (signedIn
+              ? '<button class="btn" id="settings-sync">Sync now</button>' +
+                '<a class="btn" href="' + escapeHtml(lic.upgrade_url) + '" target="_blank" rel="noopener">Manage billing</a>' +
+                '<button class="btn ghost" id="settings-signout">Sign out</button>'
+              : '<button class="btn primary" id="settings-signin">Sign in</button>' +
+                '<a class="btn" href="' + escapeHtml(lic.upgrade_url) + '" target="_blank" rel="noopener">Upgrade</a>') +
+          '</div>' +
+        '</div>' +
+      '</div>' +
+
+      '<div class="card">' +
+        '<div class="head"><h3>API endpoint</h3><span class="meta">cloud sync</span></div>' +
+        '<div class="body">' +
+          '<form id="settings-api-form" class="settings-form">' +
+            '<label>Base URL <input type="text" name="api_url" value="' + escapeHtml(lic.api_url || '') + '" placeholder="http://localhost:8787" /></label>' +
+            '<button class="btn" type="submit">Save</button>' +
+          '</form>' +
+          '<p class="footnote">Override with the <code>AGENT_PROXY_API_URL</code> environment variable, or run the worker locally: <code>cd worker &amp;&amp; npm run dev</code>.</p>' +
+        '</div>' +
+      '</div>' +
+    '</div>' +
+
+    renderSlackSettings() +
+
+    '<div class="card" style="margin-top:14px">' +
+      '<div class="head"><h3>Recent months</h3></div>' +
+      '<div class="body flush">' +
+        (lic.history && lic.history.length
+          ? '<table class="kv-table"><thead><tr><th>Period</th><th>Actions</th><th>Last action</th><th>Synced</th></tr></thead><tbody>' +
+              lic.history.map(h =>
+                '<tr><td>' + escapeHtml(h.period) + '</td>' +
+                '<td class="num">' + h.used + '</td>' +
+                '<td class="dim">' + (h.last_event ? fmtRel(h.last_event) : '—') + '</td>' +
+                '<td class="dim">' + (h.synced_at ? fmtRel(h.synced_at) : '—') + '</td></tr>'
+              ).join('') +
+            '</tbody></table>'
+          : '<div class="empty"><h4>No history yet</h4><p>Make some billable calls and they will show up here.</p></div>') +
+      '</div>' +
+    '</div>';
+
+  disposeCharts();
+  $('page').innerHTML = html;
+  bindSlackSettings();
+
+  $('settings-signin')?.addEventListener('click', settingsSignIn);
+  $('settings-signout')?.addEventListener('click', async () => {
+    if (!confirm('Sign out and return to the free tier?')) return;
+    await api.signOut();
+    await tickLicense();
+  });
+  $('settings-sync')?.addEventListener('click', async (ev) => {
+    const btn = ev.currentTarget;
+    btn.disabled = true;
+    const orig = btn.textContent;
+    btn.textContent = 'Syncing…';
+    try {
+      const r = await api.syncLicense();
+      if (r.error) alert('Sync failed: ' + r.error);
+      await tickLicense();
+    } finally {
+      btn.disabled = false;
+      btn.textContent = orig;
+    }
+  });
+  $('settings-api-form')?.addEventListener('submit', async (ev) => {
+    ev.preventDefault();
+    const form = ev.currentTarget;
+    const url = form.api_url.value.trim();
+    await api.patchLicense({ api_url: url });
+    await tickLicense();
+  });
+}
+
+async function settingsSignIn() {
+  const r = await api.signInStart();
+  if (r.error) {
+    alert('Could not start sign-in: ' + r.error);
+    return;
+  }
+  if (r.auth_url) window.open(r.auth_url, '_blank', 'noopener');
+  let attempts = 0;
+  const max = 60;
+  const tick = async () => {
+    attempts += 1;
+    const poll = await api.signInPoll(r.code);
+    if (poll && poll.jwt) {
+      await tickLicense();
+      return;
+    }
+    if (attempts >= max) return;
+    setTimeout(tick, 2000);
+  };
+  setTimeout(tick, 2000);
+}
+
+// ─── Drawer ─────────────────────────────────────────────────────────────
+async function openDrawer(id) {
+  const e = state.events.get(id) || await api.event(id);
+  if (!e) return;
+  let payload = e.payload;
+  try { payload = JSON.stringify(JSON.parse(e.payload), null, 2); } catch {}
+  $('drawer-title').innerHTML = e.tool + ' · ' + e.action_type + ' <span class="id">#' + e.id + '</span>';
+  const fields = [];
+  fields.push(['Time', e.timestamp + ' · ' + fmtRel(e.timestamp)]);
+  fields.push(['Session', e.session_id]);
+  fields.push(['Verdict', verdictHTML(e) + (e.duration_ms != null ? ' <span style="color:var(--dim); font-family:var(--mono); margin-left:10px">' + e.duration_ms + ' ms</span>' : '')]);
+  if (e.reason) fields.push(['Why', escapeHtml(e.reason)]);
+  fields.push(['Payload', payload, 'mono']);
+  if (e.result) fields.push(['Result', e.result, 'mono']);
+  if (e.error)  fields.push(['Error',  e.error, 'mono']);
+
+  // Session context — show 6 surrounding events
+  let sessionRows = '';
+  try {
+    const sib = await api.session(e.session_id);
+    const idx = sib.findIndex(x => x.id === e.id);
+    const start = Math.max(0, idx - 3);
+    const slice = sib.slice(start, start + 7);
+    if (slice.length > 1) {
+      sessionRows = '<div class="session-mini">' + slice.map(x =>
+        '<div class="row ' + (x.id === e.id ? 'current' : '') + '">' +
+          '<span>' + fmtTime(x.timestamp) + '</span>' +
+          '<span>' + x.tool + '</span>' +
+          '<span class="summary">' + escapeHtml(summarize(x)) + '</span>' +
+          '<span style="color:var(--' + (x.decision === 'denied' ? 'red' : x.decision === 'flagged' ? 'amber' : 'dim') + ')">' + x.decision + '</span>' +
+        '</div>'
+      ).join('') + '</div>';
+    }
+  } catch {}
+
+  $('drawer-body').innerHTML =
+    fields.map(([label, val, mode]) =>
+      '<div class="field">' +
+        '<div class="field-label">' + label + '</div>' +
+        '<div class="field-value' + (mode === 'mono' ? ' mono' : '') + '">' + (mode === 'mono' ? '<pre style="margin:0">' + escapeHtml(val) + '</pre>' : val) + '</div>' +
+      '</div>'
+    ).join('') +
+    (sessionRows ?
+      '<div class="field"><div class="field-label">Session context</div>' + sessionRows + '</div>' : '');
+
+  $('drawer').classList.add('open');
+  $('scrim').classList.add('open');
+}
+
+function closeDrawer() {
+  $('drawer').classList.remove('open');
+  $('scrim').classList.remove('open');
+}
+
+window.closeDrawer = closeDrawer;
+
+$('scrim').addEventListener('click', closeDrawer);
+
+// Click delegations (event rows + recent items)
+document.addEventListener('click', (ev) => {
+  const eventRow = ev.target.closest('[data-event-id]');
+  if (eventRow) {
+    if (ev.target.closest('button, a, input, select, .switch')) return;
+    openDrawer(Number(eventRow.dataset.eventId));
+    return;
+  }
+});
+
+// ─── Command palette ────────────────────────────────────────────────────
+const PALETTE_ITEMS = () => [
+  { kind: 'tab', label: 'Go to Overview', target: 'overview' },
+  { kind: 'tab', label: 'Go to Actions', target: 'activity' },
+  { kind: 'tab', label: 'Go to Policies', target: 'policies' },
+  { kind: 'tab', label: 'Go to Insights', target: 'insights' },
+  { kind: 'tab', label: 'Go to Docs', target: 'docs' },
+  { kind: 'tab', label: 'Go to Settings', target: 'settings' },
+  { kind: 'action', label: 'Add a new policy', target: 'policies' },
+];
+
+let paletteIdx = 0;
+function openPalette() {
+  $('palette-scrim').classList.add('open');
+  paletteIdx = 0;
+  renderPalette('');
+  $('palette-input').value = '';
+  $('palette-input').focus();
+}
+function closePalette() { $('palette-scrim').classList.remove('open'); }
+
+function renderPalette(q) {
+  const items = PALETTE_ITEMS().filter(i => !q || i.label.toLowerCase().includes(q.toLowerCase()));
+  if (paletteIdx >= items.length) paletteIdx = items.length - 1;
+  if (paletteIdx < 0) paletteIdx = 0;
+  $('palette-list').innerHTML = items.map((it, i) =>
+    '<li class="' + (i === paletteIdx ? 'active' : '') + '" data-i="' + i + '"><span>' + escapeHtml(it.label) + '</span><span class="nav">' + it.kind + '</span></li>'
+  ).join('');
+  $('palette-list').querySelectorAll('li').forEach((li) => {
+    li.addEventListener('click', () => activatePalette(items[Number(li.dataset.i)]));
+    li.addEventListener('mouseenter', () => { paletteIdx = Number(li.dataset.i); renderPalette($('palette-input').value); });
+  });
+}
+
+function activatePalette(item) {
+  if (!item) return;
+  closePalette();
+  navigate(item.target);
+}
+
+$('palette-scrim').addEventListener('click', (ev) => {
+  if (ev.target === $('palette-scrim')) closePalette();
+});
+$('palette-input').addEventListener('input', (ev) => renderPalette(ev.target.value));
+$('palette-input').addEventListener('keydown', (ev) => {
+  const items = PALETTE_ITEMS().filter(i => !$('palette-input').value || i.label.toLowerCase().includes($('palette-input').value.toLowerCase()));
+  if (ev.key === 'ArrowDown') { ev.preventDefault(); paletteIdx = Math.min(paletteIdx + 1, items.length - 1); renderPalette($('palette-input').value); }
+  if (ev.key === 'ArrowUp')   { ev.preventDefault(); paletteIdx = Math.max(paletteIdx - 1, 0); renderPalette($('palette-input').value); }
+  if (ev.key === 'Enter')     { ev.preventDefault(); activatePalette(items[paletteIdx]); }
+  if (ev.key === 'Escape')    { closePalette(); }
+});
+
+// Keyboard shortcuts
+document.addEventListener('keydown', (ev) => {
+  if (ev.metaKey || ev.ctrlKey) {
+    if (ev.key === 'k' || ev.key === 'K') { ev.preventDefault(); openPalette(); return; }
+  }
+  if (ev.key === 'Escape') {
+    closeDrawer();
+    closePalette();
+    closeCustomDropdowns();
+    return;
+  }
+  if (ev.target.tagName === 'INPUT' || ev.target.tagName === 'TEXTAREA' || ev.target.tagName === 'SELECT') return;
+  if (ev.key === '/') {
+    if (currentTab() !== 'activity') { state._focusSearchOnNextRender = true; navigate('activity'); }
+    else { ev.preventDefault(); $('activity-search')?.focus(); }
+  }
+  if (ev.key === 'g') {
+    document.addEventListener('keydown', (next) => {
+      if (next.key === 'o') navigate('overview');
+      else if (next.key === 'a') navigate('activity');
+      else if (next.key === 'p') navigate('policies');
+      else if (next.key === 'i') navigate('insights');
+      else if (next.key === 'd') navigate('docs');
+    }, { once: true });
+  }
+});
+
+window.addEventListener('resize', () => {
+  state.charts.forEach((chart) => chart.resize());
+});
+
+// ─── Tab dispatcher ─────────────────────────────────────────────────────
+function renderTab() {
+  setActiveTab();
+  refreshCurrent({ full: true });
+  if (currentTab() === 'insights' || currentTab() === 'overview') tickInsights();
+}
+
+// ─── Boot ───────────────────────────────────────────────────────────────
+async function boot() {
+  if (!location.hash) location.hash = '#/overview';
+  setActiveTab();
+  await Promise.all([tickHealth(), tickEvents(), tickPolicies(), tickInsights(), tickLicense(), tickBuiltinRules(), tickApprovals(), tickAppSettings()]);
+  renderTab();
+  setInterval(tickHealth, 3000);
+  setInterval(tickEvents, 1500);
+  setInterval(tickPolicies, 5000);
+  setInterval(tickInsights, 10000);
+  setInterval(tickLicense, 5000);
+  setInterval(tickBuiltinRules, 30000);
+  setInterval(tickApprovals, 2000);
+  setInterval(tickAppSettings, 30000);
+}
+boot();
+`;
+//# sourceMappingURL=client.js.map