@agenticmail/enterprise 0.5.208 → 0.5.210

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agenticmail/enterprise",
-  "version": "0.5.208",
+  "version": "0.5.210",
   "description": "AgenticMail Enterprise — cloud-hosted AI agent identity, email, auth & compliance for organizations",
   "type": "module",
   "bin": {

package/src/dashboard/components/icons.js

@@ -43,7 +43,7 @@ export const I = {
   link: () => h('svg', S, h('path', { d: 'M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71' }), h('path', { d: 'M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71' })),
   folder: () => h('svg', S, h('path', { d: 'M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z' })),
   globe: () => h('svg', S, h('circle', { cx: 12, cy: 12, r: 10 }), h('line', { x1: 2, y1: 12, x2: 22, y2: 12 }), h('path', { d: 'M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z' })),
-  workflow: () => h('svg', S, h('rect', { x: 3, y: 3, width: 6, height: 6, rx: 1 }), h('rect', { x: 15, y: 3, width: 6, height: 6, rx: 1 }), h('rect', { x: 9, y: 15, width: 6, height: 6, rx: 1 }), h('line', { x1: 9, y1: 6, x2: 15, y2: 6 }), h('line', { x1: 12, y1: 9, x2: 12, y2: 15 }), h('line', { x1: 6, y1: 9, x2: 6, y2: 18 }), h('line', { x1: 6, y1: 18, x2: 9, y2: 18 }), h('line', { x1: 18, y1: 9, x2: 18, y2: 18 }), h('line', { x1: 18, y1: 18, x2: 15, y2: 18 })),
+  workflow: () => h('svg', Object.assign({}, S, { width: 16, height: 16 }), h('circle', { cx: 4, cy: 12, r: 2.5, fill: 'currentColor', stroke: 'none' }), h('circle', { cx: 12, cy: 7, r: 2.5, fill: 'currentColor', stroke: 'none' }), h('circle', { cx: 12, cy: 17, r: 2.5, fill: 'currentColor', stroke: 'none' }), h('circle', { cx: 20, cy: 12, r: 2.5, fill: 'currentColor', stroke: 'none' }), h('path', { d: 'M6.5 11L9.5 8M6.5 13L9.5 16M14.5 8L17.5 11M14.5 16L17.5 13', stroke: 'currentColor', strokeWidth: 1.5, fill: 'none' })),
   orgChart: () => h('svg', S, h('rect', { x: 8, y: 2, width: 8, height: 5, rx: 1 }), h('rect', { x: 1, y: 17, width: 8, height: 5, rx: 1 }), h('rect', { x: 15, y: 17, width: 8, height: 5, rx: 1 }), h('line', { x1: 12, y1: 7, x2: 12, y2: 12 }), h('line', { x1: 5, y1: 12, x2: 19, y2: 12 }), h('line', { x1: 5, y1: 12, x2: 5, y2: 17 }), h('line', { x1: 19, y1: 12, x2: 19, y2: 17 })),
   terminal: () => h('svg', S, h('polyline', { points: '4 17 10 11 4 5' }), h('line', { x1: 12, y1: 19, x2: 20, y2: 19 })),
   chart: () => h('svg', S, h('line', { x1: 18, y1: 20, x2: 18, y2: 10 }), h('line', { x1: 12, y1: 20, x2: 12, y2: 4 }), h('line', { x1: 6, y1: 20, x2: 6, y2: 14 })),

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

@@ -205,6 +205,380 @@ function RoutingRowEditor(props) {
   );
 }
 
+// ─── Model Cost Estimates (per 1K tokens, approximate USD) ───
+
+var MODEL_COSTS = {
+  'claude-opus-4-20250514': { input: 0.015, output: 0.075 },
+  'claude-sonnet-4-20250514': { input: 0.003, output: 0.015 },
+  'claude-haiku-3-20250414': { input: 0.00025, output: 0.00125 },
+  'gpt-4o': { input: 0.005, output: 0.015 },
+  'gpt-4o-mini': { input: 0.00015, output: 0.0006 },
+  'gemini-2.0-flash': { input: 0.0001, output: 0.0004 },
+  'gemini-2.5-pro': { input: 0.00125, output: 0.01 },
+};
+
+function estimateHeartbeatCost(modelId, intervalMin, tokensPerBeat) {
+  tokensPerBeat = tokensPerBeat || 3000; // ~3K tokens per heartbeat round-trip
+  var key = Object.keys(MODEL_COSTS).find(function(k) { return modelId && modelId.indexOf(k) !== -1; });
+  var cost = key ? MODEL_COSTS[key] : { input: 0.003, output: 0.015 }; // default to sonnet pricing
+  var beatsPerDay = (24 * 60) / intervalMin;
+  var dailyCost = beatsPerDay * tokensPerBeat * ((cost.input + cost.output) / 2) / 1000;
+  return { beatsPerDay: Math.round(beatsPerDay), dailyCost: dailyCost, monthlyCost: dailyCost * 30 };
+}
+
+// ─── Model Fallback Card ───
+
+function ModelFallbackCard(props) {
+  var config = props.config;
+  var saving = props.saving;
+  var providers = props.providers;
+  var saveUpdates = props.saveUpdates;
+
+  var fb = config.modelFallback || {};
+  var _editing = useState(false);
+  var editing = _editing[0]; var setEditing = _editing[1];
+  var _form = useState({});
+  var form = _form[0]; var setForm = _form[1];
+
+  function startEdit() {
+    setForm({
+      enabled: fb.enabled !== false,
+      fallbacks: (fb.fallbacks || []).slice(),
+      maxRetries: fb.maxRetries || 2,
+      retryDelayMs: fb.retryDelayMs || 1000,
+    });
+    setEditing(true);
+  }
+
+  function addFallback() {
+    setForm(function(f) { return Object.assign({}, f, { fallbacks: f.fallbacks.concat(['']) }); });
+  }
+
+  function removeFallback(idx) {
+    setForm(function(f) {
+      var next = f.fallbacks.slice();
+      next.splice(idx, 1);
+      return Object.assign({}, f, { fallbacks: next });
+    });
+  }
+
+  function updateFallback(idx, val) {
+    setForm(function(f) {
+      var next = f.fallbacks.slice();
+      next[idx] = val;
+      return Object.assign({}, f, { fallbacks: next });
+    });
+  }
+
+  function save() {
+    saveUpdates({
+      modelFallback: {
+        enabled: form.enabled,
+        fallbacks: form.fallbacks.filter(Boolean),
+        maxRetries: parseInt(form.maxRetries) || 2,
+        retryDelayMs: parseInt(form.retryDelayMs) || 1000,
+      }
+    }, function() { setEditing(false); });
+  }
+
+  var configuredProviders = providers.filter(function(p) { return p.configured; });
+
+  // Build flat list of all models from all configured providers for the dropdown
+  var _allModels = useState([]);
+  var allModels = _allModels[0]; var setAllModels = _allModels[1];
+  useEffect(function() {
+    if (!configuredProviders.length) return;
+    Promise.all(configuredProviders.map(function(p) {
+      return apiCall('/providers/' + p.id + '/models').then(function(d) {
+        return (d.models || []).map(function(m) { return { id: p.id + '/' + (m.id || m.name), label: p.name + ' / ' + (m.name || m.id) }; });
+      }).catch(function() { return []; });
+    })).then(function(results) {
+      setAllModels([].concat.apply([], results));
+    });
+  }, [providers]);
+
+  return h('div', { className: 'card', style: { padding: 20, marginBottom: 20 } },
+    h(CardHeader, {
+      title: 'Backup Model Providers',
+      help: h(HelpButton, { label: 'Backup Model Providers' },
+        h('p', null, 'Configure fallback models that activate automatically when the primary model fails (rate limits, outages, auth errors).'),
+        h('h4', { style: _h4 }, 'How It Works'),
+        h('ul', { style: _ul },
+          h('li', null, 'When the primary model returns an error, the system tries the next model in the chain.'),
+          h('li', null, h('strong', null, 'Rate limit / overload errors'), ' — retries the same model first (up to Max Retries), then moves to the next fallback.'),
+          h('li', null, h('strong', null, 'Auth / invalid model errors'), ' — skips immediately to the next fallback (no retry).'),
+          h('li', null, 'The chain is tried in order from top to bottom.')
+        ),
+        h('h4', { style: _h4 }, 'Settings'),
+        h('ul', { style: _ul },
+          h('li', null, h('strong', null, 'Max Retries'), ' — How many times to retry a single model before moving to the next one.'),
+          h('li', null, h('strong', null, 'Retry Delay'), ' — Wait time (ms) between retries. Increases with each attempt (exponential backoff).')
+        ),
+        h('div', { style: _tip }, h('strong', null, 'Tip: '), 'A good chain mixes providers — e.g., Anthropic primary → OpenAI fallback → Google fallback. This protects against single-provider outages.')
+      ),
+      editing: editing,
+      saving: saving,
+      onEdit: startEdit,
+      onSave: save,
+      onCancel: function() { setEditing(false); }
+    }),
+
+    editing
+      ? h(Fragment, null,
+          // Enable toggle
+          h('div', { style: { display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 } },
+            h('label', { style: { display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', fontSize: 13 } },
+              h('input', { type: 'checkbox', checked: form.enabled, onChange: function(e) { setForm(function(f) { return Object.assign({}, f, { enabled: e.target.checked }); }); } }),
+              'Enable model fallback'
+            )
+          ),
+
+          form.enabled && h(Fragment, null,
+            // Fallback chain
+            h('label', { style: labelStyle }, 'Fallback Chain (in priority order)'),
+            h('div', { style: { display: 'grid', gap: 8, marginBottom: 16 } },
+              form.fallbacks.map(function(fb, idx) {
+                return h('div', { key: idx, style: { display: 'flex', gap: 8, alignItems: 'center' } },
+                  h('span', { style: { fontSize: 11, color: 'var(--text-muted)', width: 20, textAlign: 'center', flexShrink: 0 } }, '#' + (idx + 1)),
+                  allModels.length > 0
+                    ? h('select', { style: Object.assign({}, inputStyle, { flex: 1, cursor: 'pointer' }), value: fb, onChange: function(e) { updateFallback(idx, e.target.value); } },
+                        h('option', { value: '' }, '-- Select model --'),
+                        allModels.map(function(m) { return h('option', { key: m.id, value: m.id }, m.label); })
+                      )
+                    : h('input', { style: Object.assign({}, inputStyle, { flex: 1 }), value: fb, placeholder: 'provider/model-id (e.g. openai/gpt-4o)', onChange: function(e) { updateFallback(idx, e.target.value); } }),
+                  h('button', { className: 'btn btn-ghost btn-sm', style: { color: 'var(--danger)', flexShrink: 0 }, onClick: function() { removeFallback(idx); } }, '\u2715')
+                );
+              }),
+              h('button', { className: 'btn btn-ghost btn-sm', onClick: addFallback, style: { justifySelf: 'start' } }, '+ Add Fallback Model')
+            ),
+
+            // Settings row
+            h('div', { style: rowStyle },
+              h('div', { style: fieldGroupStyle },
+                h('label', { style: labelStyle }, 'Max Retries per Model'),
+                h('select', { style: Object.assign({}, inputStyle, { cursor: 'pointer' }), value: form.maxRetries, onChange: function(e) { setForm(function(f) { return Object.assign({}, f, { maxRetries: e.target.value }); }); } },
+                  h('option', { value: 1 }, '1'),
+                  h('option', { value: 2 }, '2 (recommended)'),
+                  h('option', { value: 3 }, '3'),
+                  h('option', { value: 5 }, '5')
+                )
+              ),
+              h('div', { style: fieldGroupStyle },
+                h('label', { style: labelStyle }, 'Retry Delay (ms)'),
+                h('select', { style: Object.assign({}, inputStyle, { cursor: 'pointer' }), value: form.retryDelayMs, onChange: function(e) { setForm(function(f) { return Object.assign({}, f, { retryDelayMs: e.target.value }); }); } },
+                  h('option', { value: 500 }, '500ms'),
+                  h('option', { value: 1000 }, '1,000ms (recommended)'),
+                  h('option', { value: 2000 }, '2,000ms'),
+                  h('option', { value: 5000 }, '5,000ms')
+                )
+              )
+            )
+          )
+        )
+      : h(Fragment, null,
+          fb.enabled === false
+            ? h('span', { style: { fontSize: 13, color: 'var(--text-muted)' } }, 'Model fallback is disabled.')
+            : (fb.fallbacks || []).length > 0
+              ? h(Fragment, null,
+                  h('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 } },
+                    h('span', { className: 'badge badge-success', style: { fontSize: 11 } }, 'Enabled'),
+                    h('span', { style: { fontSize: 12, color: 'var(--text-muted)' } }, (fb.fallbacks.length) + ' fallback' + (fb.fallbacks.length > 1 ? 's' : '') + ' \u00B7 ' + (fb.maxRetries || 2) + ' retries \u00B7 ' + (fb.retryDelayMs || 1000) + 'ms delay')
+                  ),
+                  h('div', { style: { display: 'grid', gap: 6 } },
+                    fb.fallbacks.map(function(m, i) {
+                      return h('div', { key: i, style: { display: 'flex', alignItems: 'center', gap: 8, padding: '8px 12px', background: 'var(--bg-secondary)', borderRadius: 'var(--radius)' } },
+                        h('span', { style: { fontSize: 11, color: 'var(--text-muted)', width: 20 } }, '#' + (i + 1)),
+                        h('span', { className: 'badge badge-info', style: { fontSize: 11, fontFamily: 'var(--font-mono)' } }, m.split('/').pop()),
+                        h('span', { style: { fontSize: 11, color: 'var(--text-muted)' } }, m.split('/')[0])
+                      );
+                    })
+                  )
+                )
+              : h('span', { style: { fontSize: 13, color: 'var(--text-muted)' } }, 'No fallback models configured \u2014 if the primary model fails, requests will error.')
+        )
+  );
+}
+
+// ─── Heartbeat Configuration Card ───
+
+function HeartbeatCard(props) {
+  var config = props.config;
+  var saving = props.saving;
+  var modelObj = props.modelObj;
+  var modelStr = props.modelStr;
+  var saveUpdates = props.saveUpdates;
+
+  var hb = config.heartbeat || {};
+  var _editing = useState(false);
+  var editing = _editing[0]; var setEditing = _editing[1];
+  var _form = useState({});
+  var form = _form[0]; var setForm = _form[1];
+
+  function startEdit() {
+    setForm({
+      enabled: hb.enabled !== false,
+      intervalMinutes: hb.intervalMinutes || 30,
+      activeHoursStart: hb.activeHoursStart != null ? hb.activeHoursStart : 8,
+      activeHoursEnd: hb.activeHoursEnd != null ? hb.activeHoursEnd : 23,
+      prompt: hb.prompt || '',
+      tokensPerBeat: hb.tokensPerBeat || 3000,
+    });
+    setEditing(true);
+  }
+
+  function save() {
+    saveUpdates({
+      heartbeat: {
+        enabled: form.enabled,
+        intervalMinutes: parseInt(form.intervalMinutes) || 30,
+        activeHoursStart: parseInt(form.activeHoursStart),
+        activeHoursEnd: parseInt(form.activeHoursEnd),
+        prompt: form.prompt || '',
+        tokensPerBeat: parseInt(form.tokensPerBeat) || 3000,
+      }
+    }, function() { setEditing(false); });
+  }
+
+  var modelId = modelStr || modelObj.modelId || '';
+  var est = estimateHeartbeatCost(modelId, editing ? (parseInt(form.intervalMinutes) || 30) : (hb.intervalMinutes || 30), editing ? (parseInt(form.tokensPerBeat) || 3000) : (hb.tokensPerBeat || 3000));
+
+  var INTERVAL_OPTIONS = [
+    { value: 5, label: 'Every 5 minutes' },
+    { value: 10, label: 'Every 10 minutes' },
+    { value: 15, label: 'Every 15 minutes' },
+    { value: 30, label: 'Every 30 minutes (recommended)' },
+    { value: 60, label: 'Every 1 hour' },
+    { value: 120, label: 'Every 2 hours' },
+    { value: 360, label: 'Every 6 hours' },
+    { value: 720, label: 'Every 12 hours' },
+    { value: 1440, label: 'Once a day' },
+  ];
+
+  var hours = [];
+  for (var i = 0; i < 24; i++) { hours.push({ value: i, label: (i === 0 ? '12' : i > 12 ? '' + (i - 12) : '' + i) + ':00 ' + (i < 12 ? 'AM' : 'PM') }); }
+
+  return h('div', { className: 'card', style: { padding: 20, marginBottom: 20 } },
+    h(CardHeader, {
+      title: 'Heartbeat',
+      help: h(HelpButton, { label: 'Heartbeat Configuration' },
+        h('p', null, 'Heartbeats are periodic check-ins where the agent wakes up, checks for pending work (emails, calendar, notifications), and takes proactive action.'),
+        h('h4', { style: _h4 }, 'Settings'),
+        h('ul', { style: _ul },
+          h('li', null, h('strong', null, 'Interval'), ' — How often the agent checks in. Shorter = more responsive but more expensive.'),
+          h('li', null, h('strong', null, 'Active Hours'), ' — Only run heartbeats during these hours (agent\'s timezone). Saves cost overnight.'),
+          h('li', null, h('strong', null, 'Custom Prompt'), ' — Override the default heartbeat prompt. Use this to tell the agent what to check during heartbeats.'),
+          h('li', null, h('strong', null, 'Tokens per Beat'), ' — Estimated tokens consumed per heartbeat cycle (used for cost projection).')
+        ),
+        h('h4', { style: _h4 }, 'Cost Impact'),
+        h('p', null, 'Each heartbeat is a full LLM call. A 30-minute interval = 48 calls/day. The cost estimate below uses your current default model\'s pricing.'),
+        h('div', { style: _tip }, h('strong', null, 'Tip: '), 'Use a cheaper model for heartbeats via Model Routing (set the "Scheduling" context). A 30-min interval with Haiku costs ~$0.10/day vs ~$5/day with Opus.')
+      ),
+      editing: editing,
+      saving: saving,
+      onEdit: startEdit,
+      onSave: save,
+      onCancel: function() { setEditing(false); }
+    }),
+
+    // Cost estimate banner (always visible)
+    h('div', { style: { display: 'flex', gap: 16, padding: '12px 16px', background: 'var(--bg-secondary)', borderRadius: 'var(--radius)', marginBottom: 16, alignItems: 'center' } },
+      h('div', { style: { flex: 1 } },
+        h('div', { style: { fontSize: 11, color: 'var(--text-muted)', marginBottom: 2 } }, 'Estimated Cost'),
+        h('div', { style: { fontSize: 16, fontWeight: 700 } }, '$' + est.dailyCost.toFixed(2) + '/day'),
+        h('div', { style: { fontSize: 11, color: 'var(--text-muted)' } }, '\u2248 $' + est.monthlyCost.toFixed(2) + '/month')
+      ),
+      h('div', { style: { flex: 1 } },
+        h('div', { style: { fontSize: 11, color: 'var(--text-muted)', marginBottom: 2 } }, 'Beats/Day'),
+        h('div', { style: { fontSize: 16, fontWeight: 700 } }, '' + est.beatsPerDay)
+      ),
+      h('div', { style: { flex: 1 } },
+        h('div', { style: { fontSize: 11, color: 'var(--text-muted)', marginBottom: 2 } }, 'Model'),
+        h('div', { style: { fontSize: 12, fontFamily: 'var(--font-mono)' } }, modelId ? modelId.split('/').pop() : 'Not set')
+      )
+    ),
+
+    editing
+      ? h(Fragment, null,
+          // Enable toggle
+          h('div', { style: { display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 } },
+            h('label', { style: { display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', fontSize: 13 } },
+              h('input', { type: 'checkbox', checked: form.enabled, onChange: function(e) { setForm(function(f) { return Object.assign({}, f, { enabled: e.target.checked }); }); } }),
+              'Enable heartbeat'
+            )
+          ),
+
+          form.enabled && h(Fragment, null,
+            // Interval
+            h('div', { style: fieldGroupStyle },
+              h('label', { style: labelStyle }, 'Interval'),
+              h('select', { style: Object.assign({}, inputStyle, { cursor: 'pointer' }), value: form.intervalMinutes, onChange: function(e) { setForm(function(f) { return Object.assign({}, f, { intervalMinutes: e.target.value }); }); } },
+                INTERVAL_OPTIONS.map(function(o) { return h('option', { key: o.value, value: o.value }, o.label); })
+              )
+            ),
+
+            // Active hours
+            h('div', { style: rowStyle },
+              h('div', { style: fieldGroupStyle },
+                h('label', { style: labelStyle }, 'Active From'),
+                h('select', { style: Object.assign({}, inputStyle, { cursor: 'pointer' }), value: form.activeHoursStart, onChange: function(e) { setForm(function(f) { return Object.assign({}, f, { activeHoursStart: e.target.value }); }); } },
+                  hours.map(function(hr) { return h('option', { key: hr.value, value: hr.value }, hr.label); })
+                )
+              ),
+              h('div', { style: fieldGroupStyle },
+                h('label', { style: labelStyle }, 'Active Until'),
+                h('select', { style: Object.assign({}, inputStyle, { cursor: 'pointer' }), value: form.activeHoursEnd, onChange: function(e) { setForm(function(f) { return Object.assign({}, f, { activeHoursEnd: e.target.value }); }); } },
+                  hours.map(function(hr) { return h('option', { key: hr.value, value: hr.value }, hr.label); })
+                )
+              )
+            ),
+            h('p', { style: { fontSize: 11, color: 'var(--text-muted)', marginTop: -8, marginBottom: 16 } },
+              'Heartbeats only run between these hours. Set to 12:00 AM \u2013 12:00 AM for 24/7.'
+            ),
+
+            // Tokens per beat
+            h('div', { style: fieldGroupStyle },
+              h('label', { style: labelStyle }, 'Estimated Tokens per Beat'),
+              h('select', { style: Object.assign({}, inputStyle, { cursor: 'pointer' }), value: form.tokensPerBeat, onChange: function(e) { setForm(function(f) { return Object.assign({}, f, { tokensPerBeat: e.target.value }); }); } },
+                h('option', { value: 1000 }, '~1K (minimal — just HEARTBEAT_OK)'),
+                h('option', { value: 3000 }, '~3K (typical — light checks)'),
+                h('option', { value: 5000 }, '~5K (moderate — email/calendar checks)'),
+                h('option', { value: 10000 }, '~10K (heavy — full inbox scan + actions)')
+              )
+            ),
+
+            // Custom prompt
+            h('div', { style: fieldGroupStyle },
+              h('label', { style: labelStyle }, 'Custom Heartbeat Prompt (optional)'),
+              h('textarea', {
+                style: Object.assign({}, inputStyle, { minHeight: 60, resize: 'vertical', fontFamily: 'var(--font-mono)', fontSize: 12 }),
+                value: form.prompt,
+                onChange: function(e) { setForm(function(f) { return Object.assign({}, f, { prompt: e.target.value }); }); },
+                placeholder: 'Leave empty for default. E.g.: Check emails, calendar events in next 2h, and Slack mentions.'
+              }),
+              h('p', { style: { fontSize: 11, color: 'var(--text-muted)', marginTop: 4 } }, 'This prompt is sent to the agent each heartbeat cycle. The agent can reply HEARTBEAT_OK if nothing needs attention.')
+            )
+          )
+        )
+      : h(Fragment, null,
+          hb.enabled === false
+            ? h('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } },
+                h('span', { className: 'badge badge-neutral', style: { fontSize: 11 } }, 'Disabled'),
+                h('span', { style: { fontSize: 13, color: 'var(--text-muted)' } }, 'Heartbeat is turned off. Agent won\'t check in proactively.')
+              )
+            : h(Fragment, null,
+                h('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 } },
+                  h('span', { className: 'badge badge-success', style: { fontSize: 11 } }, 'Enabled'),
+                  h('span', { style: { fontSize: 12, color: 'var(--text-muted)' } },
+                    'Every ' + (hb.intervalMinutes || 30) + ' min' +
+                    (hb.activeHoursStart != null ? ' \u00B7 ' + (hb.activeHoursStart === 0 ? '12' : hb.activeHoursStart > 12 ? (hb.activeHoursStart - 12) : hb.activeHoursStart) + ':00' + (hb.activeHoursStart < 12 ? 'AM' : 'PM') + '\u2013' + (hb.activeHoursEnd === 0 ? '12' : hb.activeHoursEnd > 12 ? (hb.activeHoursEnd - 12) : hb.activeHoursEnd) + ':00' + (hb.activeHoursEnd < 12 ? 'AM' : 'PM') : ' \u00B7 24/7')
+                  )
+                ),
+                hb.prompt && h('div', { style: { padding: '8px 12px', background: 'var(--bg-secondary)', borderRadius: 'var(--radius)', fontSize: 12, fontFamily: 'var(--font-mono)', color: 'var(--text-secondary)', whiteSpace: 'pre-wrap', maxHeight: 80, overflow: 'auto' } }, hb.prompt)
+              )
+        )
+  );
+}
+
 // ─── Main Component ───
 
 export function ConfigurationSection(props) {
@@ -422,7 +796,13 @@ export function ConfigurationSection(props) {
           )
     ),
 
-    // ═══ Card 3: Meeting Voice ═══
+    // ═══ Card 3: Model Fallback / Backup Providers ═══
+    h(ModelFallbackCard, { config: config, saving: saving, providers: providers, saveUpdates: saveUpdates }),
+
+    // ═══ Card 4: Heartbeat Configuration ═══
+    h(HeartbeatCard, { config: config, saving: saving, modelObj: modelObj, modelStr: modelStr, saveUpdates: saveUpdates }),
+
+    // ═══ Card 5: Meeting Voice ═══
     h('div', { className: 'card', style: { padding: 20, marginBottom: 20 } },
       h(CardHeader, {
         title: 'Meeting Voice (ElevenLabs)',
@@ -465,7 +845,7 @@ export function ConfigurationSection(props) {
           : h('span', { style: { fontSize: 13, color: 'var(--text-muted)' } }, 'No voice configured \u2014 agent uses text only in meetings')
     ),
 
-    // ═══ Card 4: Description ═══
+    // ═══ Card 6: Description ═══
     h('div', { className: 'card', style: { padding: 20, marginBottom: 20 } },
       h(CardHeader, {
         title: 'Description',
@@ -493,7 +873,7 @@ export function ConfigurationSection(props) {
         : h('div', { style: { fontSize: 14, color: displayDescription ? 'var(--text-primary)' : 'var(--text-muted)', lineHeight: 1.6 } }, displayDescription || 'No description set.')
     ),
 
-    // ═══ Card 5: Soul Template (only if set) ═══
+    // ═══ Card 7: Soul Template (only if set) ═══
     config.soulId && h('div', { className: 'card', style: { padding: 20 } },
       h('h4', { style: { margin: '0 0 16px', fontSize: 14, fontWeight: 600 } }, 'Role Template'),
       h('span', { className: 'badge badge-primary' }, config.soulId.replace(/-/g, ' ').replace(/\b\w/g, function(c) { return c.toUpperCase(); }))