neoagent 3.0.1-beta.8 → 3.1.0

package/server/admin/billing.js

@@ -12,7 +12,6 @@ async function loadBilling() {
       document.getElementById('billing-plans-content').innerHTML =
         '<div class="empty">Billing is not enabled on this server. Set <code>NEOAGENT_BILLING_ENABLED=1</code> to enable it.</div>';
       document.getElementById('billing-subs-content').innerHTML = '';
-      document.getElementById('nav-billing').style.display = '';
       return;
     }
     const data = await r.json();
@@ -38,18 +37,18 @@ function planRowHtml(plan) {
   const id = escAttr(plan.id);
   const intervalLabel = plan.interval ? `/ ${plan.interval}` : '';
   const price = plan.price_cents === 0 ? 'Free' : `${(plan.price_cents / 100).toFixed(2)} ${(plan.currency || 'usd').toUpperCase()} ${intervalLabel}`;
-  const status = plan.is_active ? '<span style="color:var(--success)">Active</span>' : '<span style="color:var(--muted)">Inactive</span>';
+  const status = plan.is_active ? '<span style="color:var(--success)">Active</span>' : '<span style="color:var(--text-muted)">Inactive</span>';
   return `
     <tr data-plan-id="${id}">
-      <td><strong>${esc(plan.name)}</strong><br><small style="color:var(--muted)">${esc(plan.id)}</small></td>
+      <td><strong>${esc(plan.name)}</strong><br><small style="color:var(--text-muted)">${esc(plan.id)}</small></td>
       <td>${esc(price)}</td>
-      <td>${plan.token_limit_4h != null ? fmtTokens(plan.token_limit_4h) : '<span style="color:var(--muted)">Default</span>'}</td>
-      <td>${plan.token_limit_weekly != null ? fmtTokens(plan.token_limit_weekly) : '<span style="color:var(--muted)">Default</span>'}</td>
+      <td>${plan.token_limit_4h != null ? fmtTokens(plan.token_limit_4h) : '<span style="color:var(--text-muted)">Default</span>'}</td>
+      <td>${plan.token_limit_weekly != null ? fmtTokens(plan.token_limit_weekly) : '<span style="color:var(--text-muted)">Default</span>'}</td>
       <td><code style="font-size:11px">${esc(plan.stripe_price_id || '—')}</code></td>
       <td>${status}</td>
       <td>
-        <button class="btn btn-sm" onclick="billingEditPlan('${id}')">Edit</button>
-        <button class="btn btn-sm btn-danger" onclick="billingDeletePlan('${id}')">Delete</button>
+        <button class="btn btn-sm" data-action="edit" data-plan-id="${id}">Edit</button>
+        <button class="btn btn-sm btn-danger" data-action="delete" data-plan-id="${id}">Delete</button>
       </td>
     </tr>`;
 }
@@ -67,6 +66,13 @@ function renderPlansTable(plans) {
       </tr></thead>
       <tbody>${plans.map(planRowHtml).join('')}</tbody>
     </table>`;
+  el.querySelector('tbody').addEventListener('click', (e) => {
+    const btn = e.target.closest('[data-action]');
+    if (!btn) return;
+    const planId = btn.dataset.planId;
+    if (btn.dataset.action === 'edit') billingEditPlan(planId);
+    else if (btn.dataset.action === 'delete') billingDeletePlan(planId);
+  });
 }
 
 function billingShowNewPlanForm() {
@@ -78,32 +84,88 @@ function billingEditPlan(planId) {
   billingOpenPlanModal(plan);
 }
 
-function billingOpenPlanModal(plan) {
+async function billingOpenPlanModal(plan) {
   const isNew = !plan;
   const title = isNew ? 'New Plan' : `Edit Plan: ${plan.name}`;
+  const allowedSet = new Set(plan?.allowed_models || []);
+
+  // Fetch available models to render the picker
+  let modelPickerHtml = '<div style="color:var(--text-muted);font-size:12px;padding:8px 0;">Loading models…</div>';
+  let fetchedModels = [];
+  try {
+    const r = await fetch('/admin/api/models');
+    if (r.ok) {
+      const data = await r.json();
+      fetchedModels = (data.models || []).sort((a, b) => {
+        if (a.provider !== b.provider) return a.provider.localeCompare(b.provider);
+        return (a.label || a.id).localeCompare(b.label || b.id);
+      });
+    }
+  } catch {}
+
+  if (fetchedModels.length) {
+    const rows = fetchedModels.map((m) => {
+      const checked = allowedSet.has(m.id) ? 'checked' : '';
+      return `
+        <tr class="bp-model-row" style="opacity:${checked ? '1' : '0.55'}" onclick="billingModelRowClick(this)">
+          <td style="width:36px;text-align:center;pointer-events:none;">
+            <input type="checkbox" class="bp-model-cb" value="${escAttr(m.id)}" ${checked}
+              onchange="this.closest('tr').style.opacity=this.checked?'1':'0.55'" onclick="event.stopPropagation()">
+          </td>
+          <td style="pointer-events:none;">
+            <div style="font-weight:600;color:var(--text);font-size:13px;">${esc(m.label || m.id)}</div>
+            <div style="font-size:11px;color:var(--text-muted);font-family:var(--font-mono);margin-top:1px;">${esc(m.id)}</div>
+          </td>
+          <td style="font-size:12px;text-transform:capitalize;color:var(--text-secondary);pointer-events:none;">${esc(m.provider)}</td>
+        </tr>`;
+    }).join('');
+
+    modelPickerHtml = `
+      <div style="border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;max-height:200px;overflow-y:auto;">
+        <table class="data-table" style="margin:0;">
+          <thead><tr>
+            <th style="width:36px;position:sticky;top:0;background:var(--bg-secondary);z-index:1;"></th>
+            <th style="position:sticky;top:0;background:var(--bg-secondary);z-index:1;">Model</th>
+            <th style="position:sticky;top:0;background:var(--bg-secondary);z-index:1;">Provider</th>
+          </tr></thead>
+          <tbody>${rows}</tbody>
+        </table>
+      </div>
+      <div style="font-size:11px;color:var(--text-muted);margin-top:5px;">Check models to restrict this plan. Leave all unchecked to allow every model.</div>`;
+  } else {
+    modelPickerHtml = `
+      <input class="form-input" id="bp-models-fallback" value="${escAttr((plan?.allowed_models || []).join(', '))}" placeholder="claude-opus-4-8, gpt-4o (comma-separated, or blank for all)">
+      <div style="font-size:11px;color:var(--text-muted);margin-top:5px;">Configure providers first to use the model picker.</div>`;
+  }
+
   const html = `
-    <div id="billing-plan-modal" style="position:fixed;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:1000">
-      <div style="background:var(--card-bg);border-radius:12px;padding:28px;width:540px;max-height:90vh;overflow-y:auto;box-shadow:0 8px 32px rgba(0,0,0,0.3)">
-        <h2 style="margin:0 0 20px">${esc(title)}</h2>
+    <div id="billing-plan-modal" style="position:fixed;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:1000" onclick="if(event.target===this)billingClosePlanModal()">
+      <div style="background:var(--bg-card);border-radius:12px;padding:28px;width:560px;max-height:90vh;overflow-y:auto;box-shadow:0 8px 32px rgba(0,0,0,0.3)">
+        <h2 style="margin:0 0 20px;font-size:16px;font-weight:700;color:var(--text);">${esc(title)}</h2>
         <form id="billing-plan-form" onsubmit="billingPlanFormSubmit(event)">
-          <input type="hidden" id="bp-id" value="${esc(plan?.id || '')}">
+          <input type="hidden" id="bp-id" value="${escAttr(plan?.id || '')}">
+
           <label class="form-label">Plan ID <small>(set once, used as identifier)</small></label>
-          <input class="form-input" id="bp-slug" value="${esc(plan?.id || '')}" ${isNew ? '' : 'disabled'} placeholder="plan_pro" style="margin-bottom:12px">
+          <input class="form-input" id="bp-slug" value="${escAttr(plan?.id || '')}" ${isNew ? '' : 'disabled'} placeholder="plan_pro" style="margin-bottom:14px">
+
           <label class="form-label">Name</label>
-          <input class="form-input" id="bp-name" value="${esc(plan?.name || '')}" required placeholder="Pro" style="margin-bottom:12px">
+          <input class="form-input" id="bp-name" value="${escAttr(plan?.name || '')}" required placeholder="Pro" style="margin-bottom:14px">
+
           <label class="form-label">Description</label>
-          <input class="form-input" id="bp-desc" value="${esc(plan?.description || '')}" placeholder="Optional description" style="margin-bottom:12px">
-          <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px">
+          <input class="form-input" id="bp-desc" value="${escAttr(plan?.description || '')}" placeholder="Optional description" style="margin-bottom:14px">
+
+          <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px">
             <div>
               <label class="form-label">Price (cents)</label>
               <input class="form-input" id="bp-price" type="number" min="0" value="${plan?.price_cents ?? 0}" required>
             </div>
             <div>
               <label class="form-label">Currency</label>
-              <input class="form-input" id="bp-currency" value="${esc(plan?.currency || 'usd')}" placeholder="usd">
+              <input class="form-input" id="bp-currency" value="${escAttr(plan?.currency || 'usd')}" placeholder="usd">
             </div>
           </div>
-          <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px">
+
+          <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px">
             <div>
               <label class="form-label">Billing interval</label>
               <select class="form-input" id="bp-interval">
@@ -117,9 +179,11 @@ function billingOpenPlanModal(plan) {
               <input class="form-input" id="bp-sort" type="number" value="${plan?.sort_order ?? 0}">
             </div>
           </div>
+
           <label class="form-label">Stripe Price ID</label>
-          <input class="form-input" id="bp-stripe-price" value="${esc(plan?.stripe_price_id || '')}" placeholder="price_..." style="margin-bottom:12px">
-          <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px">
+          <input class="form-input" id="bp-stripe-price" value="${escAttr(plan?.stripe_price_id || '')}" placeholder="price_..." style="margin-bottom:14px">
+
+          <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px">
             <div>
               <label class="form-label">4h token limit <small>(blank = default)</small></label>
               <input class="form-input" id="bp-tok-4h" type="number" min="0" value="${plan?.token_limit_4h ?? ''}" placeholder="2500000">
@@ -129,16 +193,20 @@ function billingOpenPlanModal(plan) {
               <input class="form-input" id="bp-tok-weekly" type="number" min="0" value="${plan?.token_limit_weekly ?? ''}" placeholder="10000000">
             </div>
           </div>
-          <label class="form-label">Allowed model IDs <small>(comma-separated; blank = all)</small></label>
-          <input class="form-input" id="bp-models" value="${esc((plan?.allowed_models || []).join(', '))}" placeholder="claude-opus-4-8, gpt-4o" style="margin-bottom:12px">
+
+          <label class="form-label" style="margin-bottom:8px;">Allowed models <small>(unchecked = not allowed on this plan)</small></label>
+          <div id="bp-models-wrap" style="margin-bottom:14px">${modelPickerHtml}</div>
+
           <label class="form-label">Features <small>(comma-separated, shown on pricing page)</small></label>
-          <input class="form-input" id="bp-features" value="${esc((plan?.features || []).join(', '))}" placeholder="Unlimited agents, Priority support" style="margin-bottom:16px">
-          <label style="display:flex;align-items:center;gap:8px;margin-bottom:20px;cursor:pointer">
+          <input class="form-input" id="bp-features" value="${escAttr((plan?.features || []).join(', '))}" placeholder="Unlimited agents, Priority support" style="margin-bottom:14px">
+
+          <label style="display:flex;align-items:center;gap:8px;margin-bottom:20px;cursor:pointer;font-size:13px;color:var(--text-secondary);text-transform:none;letter-spacing:0;font-weight:500;">
             <input type="checkbox" id="bp-active" ${!plan || plan.is_active ? 'checked' : ''}> Active
           </label>
+
           <div style="display:flex;gap:8px;justify-content:flex-end">
-            <button type="button" class="btn" onclick="billingClosePlanModal()">Cancel</button>
-            <button type="submit" class="btn btn-primary">${isNew ? 'Create' : 'Save'}</button>
+            <button type="button" class="btn btn-ghost" onclick="billingClosePlanModal()">Cancel</button>
+            <button type="submit" class="btn btn-primary">${isNew ? 'Create plan' : 'Save changes'}</button>
           </div>
         </form>
       </div>
@@ -146,6 +214,12 @@ function billingOpenPlanModal(plan) {
   document.body.insertAdjacentHTML('beforeend', html);
 }
 
+function billingModelRowClick(row) {
+  const cb = row.querySelector('.bp-model-cb');
+  cb.checked = !cb.checked;
+  row.style.opacity = cb.checked ? '1' : '0.55';
+}
+
 function billingClosePlanModal() {
   document.getElementById('billing-plan-modal')?.remove();
 }
@@ -160,7 +234,12 @@ async function billingPlanFormSubmit(e) {
     const n = parseInt(val, 10);
     return isNaN(n) || val === '' ? null : n;
   };
-  const parseModels = (val) => val.split(',').map((s) => s.trim()).filter(Boolean);
+  const parseModels = () => {
+    const cbs = document.querySelectorAll('.bp-model-cb');
+    if (cbs.length) return Array.from(cbs).filter(cb => cb.checked).map(cb => cb.value);
+    const fallback = document.getElementById('bp-models-fallback');
+    return fallback ? fallback.value.split(',').map((s) => s.trim()).filter(Boolean) : [];
+  };
   const parseFeatures = (val) => val.split(',').map((s) => s.trim()).filter(Boolean);
 
   const body = {
@@ -173,7 +252,7 @@ async function billingPlanFormSubmit(e) {
     stripe_price_id: document.getElementById('bp-stripe-price').value.trim() || null,
     token_limit_4h: parseTokenLimit(document.getElementById('bp-tok-4h').value),
     token_limit_weekly: parseTokenLimit(document.getElementById('bp-tok-weekly').value),
-    allowed_models: parseModels(document.getElementById('bp-models').value),
+    allowed_models: parseModels(),
     features: parseFeatures(document.getElementById('bp-features').value),
     sort_order: parseInt(document.getElementById('bp-sort').value, 10) || 0,
     is_active: document.getElementById('bp-active').checked,
@@ -184,22 +263,27 @@ async function billingPlanFormSubmit(e) {
     const method = isNew ? 'POST' : 'PUT';
     const r = await fetch(url, { method, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
     const data = await r.json();
-    if (!r.ok) { alert(data.error || 'Failed to save plan.'); return; }
+    if (!r.ok) { showToast(data.error || 'Failed to save plan.', 'error'); return; }
     billingClosePlanModal();
     await loadBilling();
   } catch (err) {
-    alert('Error: ' + err.message);
+    showToast('Error: ' + err.message, 'error');
   }
 }
 
 async function billingDeletePlan(planId) {
-  if (!confirm(`Delete plan "${planId}"? It will be deactivated (not hard-deleted).`)) return;
+  if (!await showConfirmModal({
+    title: `Delete plan "${esc(planId)}"?`,
+    body: 'The plan will be deactivated (not hard-deleted). Existing subscribers will keep access until their period ends.',
+    confirmLabel: 'Delete Plan',
+    confirmClass: 'btn-danger',
+  })) return;
   try {
     const r = await fetch(`/admin/api/billing/plans/${encodeURIComponent(planId)}`, { method: 'DELETE' });
-    if (!r.ok) { const d = await r.json(); alert(d.error || 'Failed.'); return; }
+    if (!r.ok) { const d = await r.json(); showToast(d.error || 'Failed.', 'error'); return; }
     await loadBilling();
   } catch (err) {
-    alert('Error: ' + err.message);
+    showToast('Error: ' + err.message, 'error');
   }
 }
 
@@ -234,15 +318,15 @@ function renderSubsTable(rows, total) {
   const hasPrev = _billingSubsOffset > 0;
   const hasNext = _billingSubsOffset + BILLING_SUBS_LIMIT < total;
   pag.innerHTML = `
-    <span style="color:var(--muted);font-size:13px">${total} total</span>
+    <span style="color:var(--text-muted);font-size:13px">${total} total</span>
     ${hasPrev ? `<button class="btn btn-sm" onclick="_billingSubsOffset-=${BILLING_SUBS_LIMIT};loadBillingSubscriptions()">← Prev</button>` : ''}
     ${hasNext ? `<button class="btn btn-sm" onclick="_billingSubsOffset+=${BILLING_SUBS_LIMIT};loadBillingSubscriptions()">Next →</button>` : ''}`;
 }
 
 function subRowHtml(sub) {
   const userLabel = esc(sub.display_name || sub.username || String(sub.user_id));
-  const email = sub.email ? `<br><small style="color:var(--muted)">${esc(sub.email)}</small>` : '';
-  const statusColor = { active: 'var(--success)', trialing: 'var(--warning, #f59e0b)', past_due: 'var(--error)', canceled: 'var(--muted)' }[sub.status] || 'var(--muted)';
+  const email = sub.email ? `<br><small style="color:var(--text-muted)">${esc(sub.email)}</small>` : '';
+  const statusColor = { active: 'var(--success)', trialing: 'var(--warning)', past_due: 'var(--danger)', canceled: 'var(--text-muted)' }[sub.status] || 'var(--text-muted)';
   const periodEnd = sub.current_period_end ? sub.current_period_end.slice(0, 10) : '—';
   return `
     <tr>
@@ -255,9 +339,9 @@ function subRowHtml(sub) {
 }
 
 async function billingOverrideSub(userId) {
-  if (!_billingPlans.length) { alert('No plans available.'); return; }
-  const options = _billingPlans.filter((p) => p.is_active).map((p) => `${p.id} — ${p.name}`).join('\n');
-  const planId = prompt(`Enter plan ID to assign:\n\n${options}`);
+  if (!_billingPlans.length) { showToast('No plans available.', 'error'); return; }
+  const activePlans = _billingPlans.filter((p) => p.is_active);
+  const planId = await billingPromptPlan(activePlans);
   if (!planId) return;
   try {
     const r = await fetch(`/admin/api/billing/users/${userId}/subscription`, {
@@ -266,13 +350,50 @@ async function billingOverrideSub(userId) {
       body: JSON.stringify({ planId: planId.trim() }),
     });
     const data = await r.json();
-    if (!r.ok) { alert(data.error || 'Failed.'); return; }
+    if (!r.ok) { showToast(data.error || 'Failed.', 'error'); return; }
     await loadBillingSubscriptions();
   } catch (err) {
-    alert('Error: ' + err.message);
+    showToast('Error: ' + err.message, 'error');
   }
 }
 
+function billingPromptPlan(plans) {
+  return new Promise((resolve) => {
+    const overlay = document.createElement('div');
+    overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;z-index:99990;backdrop-filter:blur(2px);';
+    const optionsHtml = plans.map((p) => `<option value="${escAttr(p.id)}">${esc(p.id)} — ${esc(p.name)}</option>`).join('');
+    const modal = document.createElement('div');
+    modal.style.cssText = 'width:400px;max-width:calc(100vw - 32px);background:var(--bg-primary,#1a1a1a);border:1px solid var(--border,#2a2a2a);border-radius:12px;padding:28px;box-shadow:0 16px 48px rgba(0,0,0,0.6);';
+    modal.innerHTML = `
+      <div style="font-size:16px;font-weight:700;color:var(--text);margin-bottom:12px;">Assign plan</div>
+      <div style="margin-bottom:16px;">
+        <select id="billing-plan-select" style="width:100%;padding:8px 10px;background:var(--bg-input,#111);border:1px solid var(--border,#2a2a2a);border-radius:6px;color:var(--text,#fff);font-size:13px;">
+          ${optionsHtml}
+        </select>
+      </div>
+      <div style="display:flex;gap:10px;justify-content:flex-end;">
+        <button class="btn btn-ghost" id="billing-plan-cancel" style="padding:8px 16px;">Cancel</button>
+        <button class="btn btn-primary" id="billing-plan-confirm" style="padding:8px 16px;">Assign</button>
+      </div>
+    `;
+    overlay.appendChild(modal);
+    document.body.appendChild(overlay);
+    const cancel = () => { overlay.remove(); resolve(null); };
+    const confirm = () => {
+      const val = modal.querySelector('#billing-plan-select').value;
+      overlay.remove();
+      resolve(val || null);
+    };
+    modal.querySelector('#billing-plan-cancel').onclick = cancel;
+    modal.querySelector('#billing-plan-confirm').onclick = confirm;
+    overlay.addEventListener('click', (e) => { if (e.target === overlay) cancel(); });
+    document.addEventListener('keydown', function handler(e) {
+      if (e.key === 'Escape') { cancel(); document.removeEventListener('keydown', handler); }
+    });
+    modal.querySelector('#billing-plan-confirm').focus();
+  });
+}
+
 // ── Helpers ───────────────────────────────────────────────────────────────────
 
 function esc(str) {
@@ -282,7 +403,9 @@ function esc(str) {
 }
 
 function escAttr(str) {
-  return esc(str);
+  // JSON.stringify gives us a properly quoted JS string; strip the outer quotes
+  // so it can be embedded in an HTML attribute value (already inside quotes).
+  return JSON.stringify(String(str ?? '')).slice(1, -1).replace(/"/g, '&quot;');
 }
 
 function fmtTokens(n) {

package/server/admin/index.html

@@ -63,6 +63,7 @@
       width: 100%;
       text-align: left;
       text-decoration: none;
+      position: relative;
     }
 
     .nav-item:hover { background: var(--row-hover); color: var(--text); }
@@ -82,7 +83,10 @@
     .nav-item.active svg { opacity: 1; }
 
     .nav-badge {
-      margin-left: auto;
+      position: absolute;
+      right: 10px;
+      top: 50%;
+      transform: translateY(-50%);
       min-width: 18px;
       padding: 1px 6px;
       border-radius: 999px;
@@ -835,6 +839,27 @@
       font-size: 12px;
       flex-shrink: 0;
     }
+
+    /* ── Integration sections ──────────────────────────────────────── */
+    .integration-section {
+      border-bottom: 1px solid var(--border);
+      padding: 16px 0;
+    }
+
+    .integration-section:last-child { border-bottom: none; }
+
+    .integration-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 14px;
+    }
+
+    .integration-name {
+      font-size: 13px;
+      font-weight: 700;
+      color: var(--text);
+    }
   </style>
 </head>
 <body>
@@ -871,7 +896,7 @@
 
       <button class="nav-item" data-page="issues" onclick="showPage('issues',this)">
         <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-          <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
+          <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
         </svg>
         Issues
         <span class="nav-badge" id="issues-badge" hidden>0</span>
@@ -938,6 +963,13 @@
         Models
       </button>
 
+      <button class="nav-item" data-page="integrations" onclick="showPage('integrations',this)">
+        <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path fill-rule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" clip-rule="evenodd"/>
+        </svg>
+        Integrations
+      </button>
+
       <button class="nav-item" data-page="config" onclick="showPage('config',this)">
         <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
           <path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"/>
@@ -1177,15 +1209,53 @@
       </div>
     </section>
 
+    <!-- Integrations -->
+    <section id="page-integrations" class="page" aria-label="Integrations">
+      <div class="page-header">
+        <div>
+          <h1 class="page-title">Integrations</h1>
+          <p class="page-subtitle">OAuth client credentials for official integrations — saved to .env, applied immediately</p>
+        </div>
+      </div>
+      <div class="content">
+        <div class="card" style="margin-bottom:20px;">
+          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;">
+            <div class="card-title" style="margin-bottom:0;">OAuth Integrations</div>
+            <button class="btn btn-primary" onclick="saveIntegrationsConfig(this)">Save All</button>
+          </div>
+          <div style="font-size:12px;color:var(--text-muted);margin-bottom:18px;line-height:1.5;">
+            Redirect URIs should match <code style="font-family:var(--font-mono);font-size:11px;background:var(--bg-secondary);padding:1px 5px;border-radius:4px;color:var(--accent);">&lt;PUBLIC_URL&gt;/api/integrations/oauth/callback</code>
+          </div>
+          <div id="integrations-config-content"><div class="empty"><span class="spinner"></span></div></div>
+        </div>
+        <div class="card">
+          <div class="card-title">Deepgram Configuration</div>
+          <div id="deepgram-config-content"><div class="empty"><span class="spinner"></span></div></div>
+        </div>
+      </div>
+    </section>
+
     <!-- Configuration -->
     <section id="page-config" class="page" aria-label="Configuration">
       <div class="page-header">
         <div>
           <h1 class="page-title">Configuration</h1>
-          <p class="page-subtitle">Current environment settings (non-secret values only)</p>
+          <p class="page-subtitle">Server and runtime settings — saved to .env, applied immediately</p>
         </div>
       </div>
       <div class="content">
+        <div class="card" style="margin-bottom:20px;">
+          <div class="card-title">General Settings</div>
+          <div id="general-config-content"><div class="empty"><span class="spinner"></span></div></div>
+        </div>
+        <div class="card" style="margin-bottom:20px;">
+          <div class="card-title">VM Runtime</div>
+          <div id="vm-config-content"><div class="empty"><span class="spinner"></span></div></div>
+        </div>
+        <div class="card" style="margin-bottom:20px;">
+          <div class="card-title">Stripe / Billing</div>
+          <div id="billing-setup-content"><div class="empty"><span class="spinner"></span></div></div>
+        </div>
         <div class="card" style="margin-bottom:20px;">
           <div class="card-title">Service Email</div>
           <div id="email-config-content"><div class="empty"><span class="spinner"></span></div></div>
@@ -1198,8 +1268,13 @@
     </section>
 
     <section id="page-billing" class="page" aria-label="Billing">
-      <div class="page-header"><h1>Billing</h1></div>
-      <div class="cards">
+      <div class="page-header">
+        <div>
+          <h1 class="page-title">Billing</h1>
+          <p class="page-subtitle">Subscription plans and user billing management</p>
+        </div>
+      </div>
+      <div class="content">
         <div class="card">
           <div class="card-title">Subscription Plans</div>
           <div style="margin-bottom:12px">

package/server/admin/users.js

@@ -31,9 +31,9 @@ async function saveDefaultRateLimits(btn) {
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ rate_limit_4h: parse(v4h), rate_limit_weekly: parse(vw) }),
     });
-    if (!res.ok) { const b = await res.json().catch(() => ({})); alert(b.error || 'Failed'); }
+    if (!res.ok) { const b = await res.json().catch(() => ({})); showToast(b.error || 'Failed', 'error'); }
     else { btn.textContent = 'Saved!'; setTimeout(() => { btn.textContent = orig; btn.disabled = false; }, 2000); return; }
-  } catch (_) { alert('Network error'); }
+  } catch (_) { showToast('Network error', 'error'); }
   btn.disabled = false;
   btn.textContent = orig;
 }
@@ -132,7 +132,7 @@ function renderUsersTable(el, users) {
 }
 
 async function forceLogout(id, username, btn) {
-  if (!confirm(`Force logout ${username}?\n\nThis will revoke all active sessions. They can log back in.`)) return;
+  if (!await showConfirmModal({ title: `Force logout @${esc(username)}?`, body: 'This will revoke all active sessions. They can log back in.', confirmLabel: 'Force Logout', confirmClass: 'btn-danger' })) return;
   btn.disabled = true;
   try {
     const res = await api(`/admin/api/users/${id}/sessions`, { method: 'DELETE' });
@@ -141,22 +141,22 @@ async function forceLogout(id, username, btn) {
       setTimeout(loadUsers, 800);
     } else {
       const b = await res.json().catch(() => ({}));
-      alert(b.error || 'Failed');
+      showToast(b.error || 'Failed', 'error');
       btn.disabled = false;
     }
   } catch (err) {
-    if (err.message !== 'unauthorized') alert('Network error');
+    if (err.message !== 'unauthorized') showToast('Network error', 'error');
     btn.disabled = false;
   }
 }
 
 async function deleteUser(id, displayName, btn) {
-  if (!confirm(
-    `⚠ GDPR Erasure — permanently delete "${displayName}"?\n\n` +
-    'This will delete the account and ALL associated data:\n' +
-    '• Agent runs, steps, and messages\n• Memories and conversations\n• Integrations and platform connections\n• Artifacts and files on disk\n• All sessions\n\n' +
-    'This action CANNOT be undone.'
-  )) return;
+  if (!await showConfirmModal({
+    title: `Delete "${esc(displayName)}"?`,
+    body: `<strong>GDPR Erasure</strong> — permanently deletes the account and <strong>all</strong> associated data:<br><br>• Agent runs, steps, and messages<br>• Memories and conversations<br>• Integrations and platform connections<br>• Artifacts and files on disk<br>• All sessions<br><br><span style="color:var(--danger)">This action cannot be undone.</span>`,
+    confirmLabel: 'Delete User',
+    confirmClass: 'btn-danger',
+  })) return;
   btn.disabled = true;
   btn.textContent = 'Deleting…';
   try {
@@ -170,12 +170,12 @@ async function deleteUser(id, displayName, btn) {
       }
     } else {
       const b = await res.json().catch(() => ({}));
-      alert(b.error || 'Failed to delete user');
+      showToast(b.error || 'Failed to delete user', 'error');
       btn.disabled = false;
       btn.textContent = 'Delete';
     }
   } catch (err) {
-    if (err.message !== 'unauthorized') alert('Network error');
+    if (err.message !== 'unauthorized') showToast('Network error', 'error');
     btn.disabled = false;
     btn.textContent = 'Delete';
   }
@@ -266,12 +266,12 @@ async function editRateLimits(id, username) {
         overlay.remove();
         await fetchUsers(document.getElementById('user-search')?.value?.trim() || '');
       } catch (_) {
-        alert('Failed to save rate limits');
+        showToast('Failed to save rate limits', 'error');
         bSave.disabled = false;
         bSave.textContent = 'Save';
       }
     };
   } catch (_) {
-    alert('Failed to fetch rate limits');
+    showToast('Failed to fetch rate limits', 'error');
   }
 }