@agenticmail/enterprise 0.5.326 → 0.5.328

package/src/dashboard/pages/agent-detail/autonomy.js

@@ -1,244 +0,0 @@
-import { h, useState, useEffect, useCallback, Fragment, useApp, apiCall, engineCall, formatUptime, buildAgentDataMap, renderAgentBadge, showConfirm, getOrgId } from '../../components/utils.js';
-import { I } from '../../components/icons.js';
-import { E } from '../../assets/icons/emoji-icons.js';
-import { Badge, EmptyState } from './shared.js?v=4';
-import { HelpButton } from '../../components/help-button.js';
-
-// ════════════════════════════════════════════════════════════
-// AGENT DETAIL PAGE  (Main Orchestrator)
-// ════════════════════════════════════════════════════════════
-
-// ─── Autonomy Settings Section ──────────────────────────
-
-export function AutonomySection(props) {
-  var agentId = props.agentId;
-  var engineAgent = props.engineAgent;
-  var reload = props.reload;
-  var app = useApp();
-  var toast = app.toast;
-
-  var defaults = {
-    enabled: true,
-    clockEnabled: true,
-    dailyCatchupEnabled: true, dailyCatchupHour: 9, dailyCatchupMinute: 0,
-    weeklyCatchupEnabled: true, weeklyCatchupDay: 1, weeklyCatchupHour: 9, weeklyCatchupMinute: 0,
-    goalCheckEnabled: true, goalCheckHours: [14, 17],
-    knowledgeContribEnabled: true, knowledgeContribDay: 5, knowledgeContribHour: 15,
-    escalationEnabled: true, guardrailEnforcementEnabled: true, driveAccessRequestEnabled: true,
-  };
-
-  var existing = (engineAgent?.config?.autonomy) || {};
-  var _form = useState(Object.assign({}, defaults, existing));
-  var form = _form[0]; var setForm = _form[1];
-  var _saving = useState(false);
-  var saving = _saving[0]; var setSaving = _saving[1];
-  var _dirty = useState(false);
-  var dirty = _dirty[0]; var setDirty = _dirty[1];
-
-  var set = function(key, val) {
-    var u = Object.assign({}, form);
-    u[key] = val;
-    setForm(u);
-    setDirty(true);
-  };
-
-  var save = function() {
-    setSaving(true);
-    var ea = engineAgent || {};
-    var isRunning = ea.state === 'running' || ea.state === 'active' || ea.state === 'degraded';
-    var endpoint = isRunning ? '/agents/' + agentId + '/hot-update' : '/agents/' + agentId + '/config';
-    var method = isRunning ? 'POST' : 'PATCH';
-    engineCall(endpoint, {
-      method: method,
-      body: JSON.stringify({ updates: { autonomy: form }, updatedBy: 'dashboard' })
-    }).then(function() {
-      toast('Autonomy settings saved' + (isRunning ? ' (agent will reload within 10 min)' : ''), 'success');
-      setDirty(false);
-      setSaving(false);
-      if (reload) reload();
-    }).catch(function(err) {
-      toast(err.message, 'error');
-      setSaving(false);
-    });
-  };
-
-  var DAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
-
-  var toggleStyle = function(on) {
-    return {
-      width: 40, height: 22, borderRadius: 11,
-      background: on ? 'var(--success)' : 'var(--border)',
-      cursor: 'pointer', position: 'relative', flexShrink: 0,
-      transition: 'background 0.2s', display: 'inline-block',
-    };
-  };
-  var knobStyle = function(on) {
-    return {
-      width: 18, height: 18, borderRadius: '50%', background: '#fff',
-      position: 'absolute', top: 2, left: on ? 20 : 2,
-      transition: 'left 0.2s', boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
-    };
-  };
-
-  var Toggle = function(p) {
-    return h('div', { style: { display: 'flex', alignItems: 'center', gap: 10 } },
-      h('div', { style: toggleStyle(p.value), onClick: function() { set(p.field, !p.value); } },
-        h('div', { style: knobStyle(p.value) })
-      ),
-      h('span', { style: { fontSize: 13, fontWeight: 500 } }, p.label),
-      p.desc && h('span', { style: { fontSize: 11, color: 'var(--text-muted)' } }, p.desc)
-    );
-  };
-
-  var TimeSelect = function(p) {
-    return h('div', { style: { display: 'flex', gap: 8, alignItems: 'center' } },
-      h('select', { className: 'input', style: { width: 80 }, value: p.hour, onChange: function(e) { set(p.hourField, parseInt(e.target.value)); } },
-        Array.from({length: 24}, function(_, i) {
-          var label = i === 0 ? '12 AM' : i < 12 ? i + ' AM' : i === 12 ? '12 PM' : (i - 12) + ' PM';
-          return h('option', { key: i, value: i }, label);
-        })
-      ),
-      h('span', null, ':'),
-      h('select', { className: 'input', style: { width: 65 }, value: p.minute, onChange: function(e) { set(p.minuteField, parseInt(e.target.value)); } },
-        [0, 15, 30, 45].map(function(m) { return h('option', { key: m, value: m }, String(m).padStart(2, '0')); })
-      )
-    );
-  };
-
-  var DaySelect = function(p) {
-    return h('select', { className: 'input', style: { width: 130 }, value: p.value, onChange: function(e) { set(p.field, parseInt(e.target.value)); } },
-      DAYS.map(function(d, i) { return h('option', { key: i, value: i }, d); })
-    );
-  };
-
-  var cardStyle = { marginBottom: 12 };
-  var rowStyle = { display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px 16px', borderBottom: '1px solid var(--border)' };
-  var configRow = { display: 'flex', gap: 12, alignItems: 'center', padding: '8px 16px 8px 48px', borderBottom: '1px solid var(--border)', fontSize: 13 };
-
-  return h(Fragment, null,
-    // Header
-    h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 } },
-      h('div', null,
-        h('div', { style: { fontSize: 15, fontWeight: 600, display: 'flex', alignItems: 'center' } }, 'Agent Autonomy Settings',
-          h(HelpButton, { label: 'Autonomy Settings' },
-            h('p', null, 'Autonomy settings control what the agent does automatically without being asked. Think of it as the agent\'s daily routine.'),
-            h('h4', { style: { marginTop: 16, marginBottom: 8, fontSize: 14 } }, 'Automated Behaviors'),
-            h('ul', { style: { paddingLeft: 20, margin: '4px 0 8px' } },
-              h('li', null, h('strong', null, 'Auto Clock-In/Out'), ' — Agent automatically starts and stops work based on its schedule in the Workforce tab.'),
-              h('li', null, h('strong', null, 'Daily Catch-up'), ' — At a set time each day, the agent reviews unread emails, messages, and pending tasks to stay on top of things.'),
-              h('li', null, h('strong', null, 'Weekly Catch-up'), ' — A deeper weekly review that may include summaries, reports, or planning.'),
-              h('li', null, h('strong', null, 'Goal Check'), ' — Periodic check-ins against assigned goals/OKRs.'),
-              h('li', null, h('strong', null, 'Knowledge Contributions'), ' — Agent periodically contributes learnings to the organization\'s knowledge base.'),
-              h('li', null, h('strong', null, 'Escalation'), ' — Automatically escalates issues it can\'t handle to its manager.'),
-              h('li', null, h('strong', null, 'Guardrail Enforcement'), ' — Self-monitors for compliance with organizational policies.')
-            ),
-            h('div', { style: { marginTop: 12, padding: 12, background: 'var(--bg-secondary, #1e293b)', borderRadius: 'var(--radius, 8px)', fontSize: 13 } }, h('strong', null, 'Tip: '), 'Start with daily catch-up enabled and add more behaviors as the agent proves reliable. The master switch lets you disable all autonomy instantly.')
-          )
-        ),
-        h('div', { style: { fontSize: 12, color: 'var(--text-muted)' } }, 'Configure automated behaviors — all times use agent timezone')
-      ),
-      h('div', { style: { display: 'flex', gap: 8 } },
-        dirty && h('span', { style: { fontSize: 11, color: 'var(--warning)', alignSelf: 'center' } }, 'Unsaved changes'),
-        h('button', { className: 'btn btn-primary btn-sm', disabled: !dirty || saving, onClick: save }, saving ? 'Saving...' : 'Save')
-      )
-    ),
-
-    // Master switch
-    h('div', { className: 'card', style: cardStyle },
-      h('div', { style: rowStyle },
-        h(Toggle, { field: 'enabled', value: form.enabled, label: 'Enable Autonomy System', desc: 'Master switch for all automated agent behaviors' })
-      )
-    ),
-
-    // Clock In/Out
-    h('div', { className: 'card', style: Object.assign({}, cardStyle, { opacity: form.enabled ? 1 : 0.5 }) },
-      h('div', { style: rowStyle },
-        h(Toggle, { field: 'clockEnabled', value: form.clockEnabled, label: 'Auto Clock-In/Out', desc: 'Clock in/out based on work schedule' })
-      ),
-      form.clockEnabled && h('div', { style: configRow },
-        h('span', { style: { color: 'var(--text-muted)' } }, 'Uses times from the Workforce tab schedule')
-      )
-    ),
-
-    // Daily Catchup
-    h('div', { className: 'card', style: Object.assign({}, cardStyle, { opacity: form.enabled ? 1 : 0.5 }) },
-      h('div', { style: rowStyle },
-        h(Toggle, { field: 'dailyCatchupEnabled', value: form.dailyCatchupEnabled, label: 'Daily Manager Catchup', desc: 'Email summary to manager each workday' })
-      ),
-      form.dailyCatchupEnabled && h('div', { style: configRow },
-        h('span', { style: { color: 'var(--text-muted)', fontSize: 12 } }, 'Time configured in Manager & Catch-Up tab')
-      )
-    ),
-
-    // Weekly Catchup
-    h('div', { className: 'card', style: Object.assign({}, cardStyle, { opacity: form.enabled ? 1 : 0.5 }) },
-      h('div', { style: rowStyle },
-        h(Toggle, { field: 'weeklyCatchupEnabled', value: form.weeklyCatchupEnabled, label: 'Weekly Manager Catchup', desc: 'Broader weekly summary + goals, uses same time as daily' })
-      ),
-      form.weeklyCatchupEnabled && h('div', { style: configRow },
-        h('span', null, 'Send on'),
-        h(DaySelect, { value: form.weeklyCatchupDay, field: 'weeklyCatchupDay' }),
-        h('span', { style: { color: 'var(--text-muted)', fontSize: 12 } }, '(same time as daily catchup)')
-      )
-    ),
-
-    // Goal Check
-    h('div', { className: 'card', style: Object.assign({}, cardStyle, { opacity: form.enabled ? 1 : 0.5 }) },
-      h('div', { style: rowStyle },
-        h(Toggle, { field: 'goalCheckEnabled', value: form.goalCheckEnabled, label: 'Goal Progress Checks', desc: 'Reviews Google Tasks at set hours (last = end-of-day review)' })
-      ),
-      form.goalCheckEnabled && h('div', { style: configRow },
-        h('span', null, 'Check at hours:'),
-        h('input', { className: 'input', style: { width: 150 },
-          value: (form.goalCheckHours || [14, 17]).join(', '),
-          placeholder: '14, 17',
-          onChange: function(e) {
-            var hrs = e.target.value.split(',').map(function(s) { return parseInt(s.trim()); }).filter(function(n) { return !isNaN(n) && n >= 0 && n <= 23; });
-            set('goalCheckHours', hrs.length > 0 ? hrs : [14, 17]);
-          }
-        }),
-        h('span', { style: { fontSize: 11, color: 'var(--text-muted)' } }, '(24h format, comma-separated)')
-      )
-    ),
-
-    // Knowledge Contribution
-    h('div', { className: 'card', style: Object.assign({}, cardStyle, { opacity: form.enabled ? 1 : 0.5 }) },
-      h('div', { style: rowStyle },
-        h(Toggle, { field: 'knowledgeContribEnabled', value: form.knowledgeContribEnabled, label: 'Weekly Knowledge Contribution', desc: 'Agent reviews learnings and contributes to role-based knowledge base' })
-      ),
-      form.knowledgeContribEnabled && h('div', { style: configRow },
-        h('span', null, 'Contribute on'),
-        h(DaySelect, { value: form.knowledgeContribDay, field: 'knowledgeContribDay' }),
-        h('span', null, 'at'),
-        h('select', { className: 'input', style: { width: 80 }, value: form.knowledgeContribHour, onChange: function(e) { set('knowledgeContribHour', parseInt(e.target.value)); } },
-          Array.from({length: 24}, function(_, i) {
-            var label = i === 0 ? '12 AM' : i < 12 ? i + ' AM' : i === 12 ? '12 PM' : (i - 12) + ' PM';
-            return h('option', { key: i, value: i }, label);
-          })
-        )
-      )
-    ),
-
-    // Smart Escalation
-    h('div', { className: 'card', style: Object.assign({}, cardStyle, { opacity: form.enabled ? 1 : 0.5 }) },
-      h('div', { style: rowStyle },
-        h(Toggle, { field: 'escalationEnabled', value: form.escalationEnabled, label: 'Smart Answer Escalation', desc: 'Search memory → Drive → escalate to manager when unsure' })
-      )
-    ),
-
-    // Guardrail Enforcement
-    h('div', { className: 'card', style: Object.assign({}, cardStyle, { opacity: form.enabled ? 1 : 0.5 }) },
-      h('div', { style: rowStyle },
-        h(Toggle, { field: 'guardrailEnforcementEnabled', value: form.guardrailEnforcementEnabled, label: 'Runtime Guardrail Enforcement', desc: 'Evaluate guardrail rules on inbound emails and tool calls' })
-      )
-    ),
-
-    // Drive Access Requests
-    h('div', { className: 'card', style: Object.assign({}, cardStyle, { opacity: form.enabled ? 1 : 0.5 }) },
-      h('div', { style: rowStyle },
-        h(Toggle, { field: 'driveAccessRequestEnabled', value: form.driveAccessRequestEnabled, label: 'Drive Access Requests', desc: 'When agent cannot access a file, it requests access from manager instead of failing silently' })
-      )
-    )
-  );
-}
-

package/src/dashboard/pages/agent-detail/budget.js

@@ -1,269 +0,0 @@
-import { h, useState, useEffect, useCallback, Fragment, useApp, apiCall, engineCall, formatUptime, buildAgentDataMap, renderAgentBadge, showConfirm, getOrgId } from '../../components/utils.js';
-import { I } from '../../components/icons.js';
-import { StatCard, ProgressBar, formatNumber, formatCost } from './shared.js?v=4';
-import { HelpButton } from '../../components/help-button.js';
-
-// ════════════════════════════════════════════════════════════
-// BUDGET SECTION
-// ════════════════════════════════════════════════════════════
-
-export function BudgetSection(props) {
-  var agentId = props.agentId;
-  var engineAgent = props.engineAgent;
-
-  var app = useApp();
-  var toast = app.toast;
-
-  var _usage = useState(null);
-  var usageData = _usage[0]; var setUsageData = _usage[1];
-  var _budget = useState(null);
-  var budgetConfig = _budget[0]; var setBudgetConfig = _budget[1];
-  var _alerts = useState([]);
-  var budgetAlerts = _alerts[0]; var setBudgetAlerts = _alerts[1];
-  var _loading = useState(true);
-  var loading = _loading[0]; var setLoading = _loading[1];
-  // Organization context
-  var _orgInfo = useState(null);
-  var orgInfo = _orgInfo[0]; var setOrgInfo = _orgInfo[1];
-
-  useEffect(function() {
-    if (engineAgent && engineAgent.client_org_id) {
-      apiCall('/client-orgs/' + engineAgent.client_org_id).then(function(d) { setOrgInfo(d.org || d); }).catch(function() {});
-    }
-  }, [engineAgent && engineAgent.client_org_id]);
-
-  var _editing = useState(false);
-  var editing = _editing[0]; var setEditing = _editing[1];
-  var _saving = useState(false);
-  var saving = _saving[0]; var setSaving = _saving[1];
-  var _form = useState({ dailyTokens: 0, dailyCost: 0, monthlyTokens: 0, monthlyCost: 0 });
-  var form = _form[0]; var setForm = _form[1];
-
-  var loadData = function() {
-    setLoading(true);
-    Promise.all([
-      engineCall('/agents/' + agentId + '/usage').catch(function() { return null; }),
-      engineCall('/agents/' + agentId + '/budget').catch(function() { return null; }),
-      engineCall('/budget/alerts?agentId=' + agentId).catch(function() { return { alerts: [] }; })
-    ]).then(function(results) {
-      setUsageData(results[0]);
-      // Unwrap: GET /agents/:id/budget returns { budgetConfig: {...} }
-      var bc = results[1]?.budgetConfig || results[1] || null;
-      setBudgetConfig(bc);
-      setBudgetAlerts(results[2]?.alerts || results[2] || []);
-      if (bc) {
-        setForm({
-          dailyTokens: bc.dailyTokens || bc.daily_tokens || bc.limits?.dailyTokens || 0,
-          dailyCost: bc.dailyCost || bc.daily_cost || bc.limits?.dailyCost || 0,
-          monthlyTokens: bc.monthlyTokens || bc.monthly_tokens || bc.limits?.monthlyTokens || 0,
-          monthlyCost: bc.monthlyCost || bc.monthly_cost || bc.limits?.monthlyCost || 0
-        });
-      }
-      setLoading(false);
-    });
-  };
-
-  useEffect(function() { loadData(); }, [agentId]);
-
-  // ─── Derived Usage Values ───────────────────────────────
-
-  var bu = usageData?.usage || usageData || {};
-  var tokensToday = bu.tokensToday || bu.today?.tokens || 0;
-  var tokensMonth = bu.tokensThisMonth || bu.tokensMonth || bu.month?.tokens || 0;
-  var costToday = bu.costToday || bu.today?.cost || 0;
-  var costMonth = bu.costThisMonth || bu.costMonth || bu.month?.cost || 0;
-  var sessionsToday = bu.sessionsToday || bu.today?.sessions || 0;
-  var errorsToday = bu.errorsToday || bu.today?.errors || 0;
-
-  // ─── Budget Limits ──────────────────────────────────────
-
-  var limits = budgetConfig?.limits || budgetConfig || null;
-  var hasBudget = limits && (limits.dailyTokens || limits.daily_tokens || limits.dailyCost || limits.daily_cost || limits.monthlyTokens || limits.monthly_tokens || limits.monthlyCost || limits.monthly_cost || form.dailyTokens || form.dailyCost || form.monthlyTokens || form.monthlyCost);
-  var budgetDailyTokens = limits?.dailyTokens || limits?.daily_tokens || form.dailyTokens || 0;
-  var budgetDailyCost = limits?.dailyCost || limits?.daily_cost || form.dailyCost || 0;
-  var budgetMonthlyTokens = limits?.monthlyTokens || limits?.monthly_tokens || form.monthlyTokens || 0;
-  var budgetMonthlyCost = limits?.monthlyCost || limits?.monthly_cost || form.monthlyCost || 0;
-
-  // ─── Save Budget ────────────────────────────────────────
-
-  var saveBudget = function() {
-    setSaving(true);
-    engineCall('/agents/' + agentId + '/budget', {
-      method: 'PUT',
-      body: JSON.stringify({
-        dailyTokens: Number(form.dailyTokens) || 0,
-        dailyCost: Number(form.dailyCost) || 0,
-        monthlyTokens: Number(form.monthlyTokens) || 0,
-        monthlyCost: Number(form.monthlyCost) || 0
-      })
-    })
-      .then(function() { toast('Budget updated', 'success'); setEditing(false); loadData(); })
-      .catch(function(err) { toast(err.message, 'error'); })
-      .finally(function() { setSaving(false); });
-  };
-
-  // ─── Acknowledge Alert ──────────────────────────────────
-
-  var acknowledgeAlert = function(alertId) {
-    engineCall('/budget/alerts/' + alertId + '/acknowledge', { method: 'POST' })
-      .then(function() { toast('Alert acknowledged', 'success'); loadData(); })
-      .catch(function(err) { toast(err.message, 'error'); });
-  };
-
-  if (loading) {
-    return h('div', { style: { padding: 40, textAlign: 'center', color: 'var(--text-muted)' } }, 'Loading budget data...');
-  }
-
-  return h(Fragment, null,
-
-    // ─── Organization Context Banner ────────────────────
-    engineAgent && engineAgent.client_org_id && h('div', { style: { padding: '10px 16px', marginBottom: 16, background: 'var(--info-bg, rgba(59,130,246,0.1))', border: '1px solid var(--info-border, rgba(59,130,246,0.3))', borderRadius: 'var(--radius, 8px)', fontSize: 13, color: 'var(--text)', display: 'flex', alignItems: 'center', gap: 8 } },
-      I.info && I.info(),
-      h('span', null, 'Budget limits follow ', h('strong', null, orgInfo ? orgInfo.name : 'organization'), ' allocation.'),
-      orgInfo && orgInfo.budgetCap && h('span', { style: { marginLeft: 8, color: 'var(--text-muted)' } }, 'Org budget cap: $' + orgInfo.budgetCap)
-    ),
-
-    // ─── Usage Stats Grid ───────────────────────────────
-    h('div', { className: 'stat-grid', style: { marginBottom: 20 } },
-      h(StatCard, { label: 'Tokens Today', value: formatNumber(tokensToday) }),
-      h(StatCard, { label: 'Tokens This Month', value: formatNumber(tokensMonth) }),
-      h(StatCard, { label: 'Cost Today', value: formatCost(costToday) }),
-      h(StatCard, { label: 'Cost This Month', value: formatCost(costMonth) }),
-      h(StatCard, { label: 'Sessions Today', value: String(sessionsToday) }),
-      h(StatCard, { label: 'Errors Today', value: String(errorsToday), color: errorsToday > 0 ? 'var(--danger)' : undefined })
-    ),
-
-    // ─── Budget Limits Card ─────────────────────────────
-    h('div', { className: 'card', style: { marginBottom: 20 } },
-      h('div', { className: 'card-header', style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
-        h('span', { style: { display: 'flex', alignItems: 'center' } }, 'Budget Limits',
-          h(HelpButton, { label: 'Budget Limits' },
-            h('p', null, 'Set spending caps to prevent this agent from exceeding your API budget. When a limit is reached, the agent is automatically paused.'),
-            h('h4', { style: { marginTop: 16, marginBottom: 8, fontSize: 14 } }, 'Limit Types'),
-            h('ul', { style: { paddingLeft: 20, margin: '4px 0 8px' } },
-              h('li', null, h('strong', null, 'Daily Limit'), ' — Maximum spend per day (resets at midnight UTC). Prevents runaway costs from a single day\'s usage.'),
-              h('li', null, h('strong', null, 'Monthly Limit'), ' — Maximum spend per calendar month. Your overall budget control.'),
-              h('li', null, h('strong', null, 'Per-Request Limit'), ' — Maximum cost for a single API call. Prevents accidentally using expensive models or very long prompts.')
-            ),
-            h('p', null, 'Set to 0 or leave blank for no limit. The progress bars show current usage against each limit.'),
-            h('div', { style: { marginTop: 12, padding: 12, background: 'var(--bg-secondary, #1e293b)', borderRadius: 'var(--radius, 8px)', fontSize: 13 } }, h('strong', null, 'Tip: '), 'Start with a conservative daily limit, monitor usage for a week, then adjust. It\'s easier to raise limits than to deal with a surprise $500 bill.')
-          )
-        ),
-        !editing && h('button', { className: 'btn btn-secondary btn-sm', onClick: function() { setEditing(true); } }, 'Edit Budget')
-      ),
-      h('div', { className: 'card-body' },
-
-        // Edit Mode
-        editing ? h('div', null,
-          h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 20 } },
-            h('div', { className: 'form-group' },
-              h('label', { className: 'form-label' }, 'Daily Token Limit'),
-              h('input', {
-                className: 'input', type: 'number', value: form.dailyTokens,
-                onChange: function(e) { setForm(function(f) { return Object.assign({}, f, { dailyTokens: e.target.value }); }); }
-              })
-            ),
-            h('div', { className: 'form-group' },
-              h('label', { className: 'form-label' }, 'Daily Cost Limit ($)'),
-              h('input', {
-                className: 'input', type: 'number', step: '0.01', value: form.dailyCost,
-                onChange: function(e) { setForm(function(f) { return Object.assign({}, f, { dailyCost: e.target.value }); }); }
-              })
-            ),
-            h('div', { className: 'form-group' },
-              h('label', { className: 'form-label' }, 'Monthly Token Limit'),
-              h('input', {
-                className: 'input', type: 'number', value: form.monthlyTokens,
-                onChange: function(e) { setForm(function(f) { return Object.assign({}, f, { monthlyTokens: e.target.value }); }); }
-              })
-            ),
-            h('div', { className: 'form-group' },
-              h('label', { className: 'form-label' }, 'Monthly Cost Limit ($)'),
-              h('input', {
-                className: 'input', type: 'number', step: '0.01', value: form.monthlyCost,
-                onChange: function(e) { setForm(function(f) { return Object.assign({}, f, { monthlyCost: e.target.value }); }); }
-              })
-            )
-          ),
-          h('div', { style: { display: 'flex', gap: 10 } },
-            h('button', { className: 'btn btn-primary btn-sm', disabled: saving, onClick: saveBudget }, saving ? 'Saving...' : 'Save Budget'),
-            h('button', { className: 'btn btn-ghost btn-sm', onClick: function() { setEditing(false); } }, 'Cancel')
-          )
-        )
-
-        // Display Mode
-        : hasBudget ? h('div', null,
-            budgetDailyTokens > 0 && h(ProgressBar, { label: 'Daily Tokens', value: tokensToday, total: budgetDailyTokens, unit: 'tokens' }),
-            budgetDailyCost > 0 && h(ProgressBar, { label: 'Daily Cost', value: costToday, total: budgetDailyCost, unit: '$' }),
-            budgetMonthlyTokens > 0 && h(ProgressBar, { label: 'Monthly Tokens', value: tokensMonth, total: budgetMonthlyTokens, unit: 'tokens' }),
-            budgetMonthlyCost > 0 && h(ProgressBar, { label: 'Monthly Cost', value: costMonth, total: budgetMonthlyCost, unit: '$' }),
-            !budgetDailyTokens && !budgetDailyCost && !budgetMonthlyTokens && !budgetMonthlyCost && h('div', { style: { color: 'var(--text-muted)', fontSize: 13 } }, 'No budget limits configured.')
-          )
-        : h('div', { style: { textAlign: 'center', padding: 20 } },
-            h('div', { style: { color: 'var(--text-muted)', fontSize: 13, marginBottom: 12 } }, 'No budget limits configured.'),
-            h('button', { className: 'btn btn-primary btn-sm', onClick: function() { setEditing(true); } }, I.plus(), ' Set Budget')
-          )
-      )
-    ),
-
-    // ─── Budget Alerts Table ────────────────────────────
-    h('div', { className: 'card', style: { marginBottom: 20 } },
-      h('div', { className: 'card-header' }, h('span', { style: { display: 'flex', alignItems: 'center' } }, 'Budget Alerts',
-        h(HelpButton, { label: 'Budget Alerts' },
-          h('p', null, 'Get notified when the agent approaches or exceeds budget thresholds.'),
-          h('ul', { style: { paddingLeft: 20, margin: '4px 0 8px' } },
-            h('li', null, h('strong', null, 'Warning'), ' — Sent when usage reaches a percentage of the limit (e.g., 80%). Agent continues running.'),
-            h('li', null, h('strong', null, 'Critical'), ' — Sent when usage is very close to the limit (e.g., 95%). Consider pausing non-essential tasks.'),
-            h('li', null, h('strong', null, 'Exceeded'), ' — The limit was hit and the agent was automatically paused. Requires manual resume or limit increase.')
-          ),
-          h('div', { style: { marginTop: 12, padding: 12, background: 'var(--bg-secondary, #1e293b)', borderRadius: 'var(--radius, 8px)', fontSize: 13 } }, h('strong', null, 'Tip: '), 'Alerts are sent to the agent\'s manager (if configured) and to the admin email.')
-        )
-      )),
-      budgetAlerts.length > 0
-        ? h('div', { className: 'card-body-flush' },
-            h('table', { className: 'data-table' },
-              h('thead', null,
-                h('tr', null,
-                  h('th', null, 'Time'),
-                  h('th', null, 'Type'),
-                  h('th', null, 'Budget Type'),
-                  h('th', null, 'Current'),
-                  h('th', null, 'Limit'),
-                  h('th', null, 'Status'),
-                  h('th', null, '')
-                )
-              ),
-              h('tbody', null,
-                budgetAlerts.map(function(alert, i) {
-                  var alertType = alert.type || alert.alertType || 'warning';
-                  var budgetType = alert.budgetType || alert.budget_type || 'tokens';
-                  var current = alert.currentValue || alert.current || 0;
-                  var limit = alert.limitValue || alert.limit || 0;
-                  var acknowledged = alert.acknowledged || alert.acked || false;
-                  var time = alert.createdAt || alert.created_at || alert.timestamp;
-                  var typeColor = alertType === 'critical' ? 'badge-danger' : alertType === 'warning' ? 'badge-warning' : 'badge-info';
-
-                  return h('tr', { key: alert.id || i },
-                    h('td', { style: { fontSize: 12 } }, time ? new Date(time).toLocaleString() : '-'),
-                    h('td', null, h('span', { className: 'badge ' + typeColor }, alertType)),
-                    h('td', null, h('span', { className: 'badge badge-neutral' }, budgetType)),
-                    h('td', { style: { fontFamily: 'monospace', fontSize: 12 } }, budgetType === 'cost' ? formatCost(current) : formatNumber(current)),
-                    h('td', { style: { fontFamily: 'monospace', fontSize: 12 } }, budgetType === 'cost' ? formatCost(limit) : formatNumber(limit)),
-                    h('td', null, h('span', { className: acknowledged ? 'badge badge-neutral' : 'badge badge-warning' }, acknowledged ? 'Acknowledged' : 'Pending')),
-                    h('td', null,
-                      !acknowledged && h('button', {
-                        className: 'btn btn-ghost btn-sm',
-                        onClick: function() { acknowledgeAlert(alert.id); }
-                      }, I.check(), ' Ack')
-                    )
-                  );
-                })
-              )
-            )
-          )
-        : h('div', { className: 'card-body' },
-            h('div', { style: { textAlign: 'center', padding: 20, color: 'var(--text-muted)', fontSize: 13 } }, 'No budget alerts.')
-          )
-    )
-  );
-}