@agenticmail/enterprise 0.5.327 → 0.5.329

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

@@ -1,261 +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, StatCard, ProgressBar, EmptyState, formatNumber, formatCost, riskBadgeClass, formatTime, MEMORY_CATEGORIES, memCatColor, memCatLabel, importanceBadgeColor } from './shared.js?v=5';
-import { OverviewSection } from './overview.js?v=6';
-import { PersonalDetailsSection } from './personal-details.js?v=5';
-import { PermissionsSection } from './permissions.js?v=5';
-import { BudgetSection } from './budget.js?v=5';
-import { ActivitySection } from './activity.js?v=5';
-import { CommunicationSection } from './communication.js?v=5';
-import { MemorySection } from './memory.js?v=5';
-import { WorkforceSection } from './workforce.js?v=5';
-import { GuardrailsSection } from './guardrails.js?v=5';
-import { ConfigurationSection } from './configuration.js?v=5';
-import { ManagerCatchUpSection } from './manager.js?v=5';
-import { SkillsSection } from './skills-section.js?v=5';
-import { DeploymentSection } from './deployment.js?v=5';
-import { ToolsSection } from './tools.js?v=5';
-import { MeetingCapabilitiesSection, BrowserConfigCard, ToolRestrictionsCard } from './meeting-browser.js?v=5';
-import { EmailSection } from './email.js?v=5';
-import { ToolSecuritySection } from './tool-security.js?v=5';
-import { AgentSecurityTab } from './security.js?v=5';
-import { AutonomySection } from './autonomy.js?v=5';
-import { ChannelsSection } from './channels.js?v=5';
-import { WhatsAppSection } from './whatsapp.js?v=5';
-import { KnowledgeLink, AGENT_TAB_DOCS } from '../../components/knowledge-link.js';
-
-export function AgentDetailPage(props) {
-  var agentId = props.agentId;
-  var onBack = props.onBack;
-
-  var app = useApp();
-  var toast = app.toast;
-
-  var _tab = useState('overview');
-  var tab = _tab[0]; var setTab = _tab[1];
-  var _agent = useState(null);
-  var agent = _agent[0]; var setAgent = _agent[1];
-  var _engineAgent = useState(null);
-  var engineAgent = _engineAgent[0]; var setEngineAgent = _engineAgent[1];
-  var _profile = useState(null);
-  var profile = _profile[0]; var setProfile = _profile[1];
-  var _loading = useState(true);
-  var loading = _loading[0]; var setLoading = _loading[1];
-  var _agents = useState([]);
-  var agents = _agents[0]; var setAgents = _agents[1];
-
-  var ALL_TABS = ['overview', 'personal', 'email', 'whatsapp', 'channels', 'configuration', 'manager', 'tools', 'skills', 'permissions', 'activity', 'communication', 'workforce', 'memory', 'guardrails', 'autonomy', 'budget', 'security', 'tool-security', 'deployment'];
-  var TAB_LABELS = { 'security': 'Security', 'tool-security': 'Tool Security', 'manager': 'Manager', 'email': 'Email', 'whatsapp': 'WhatsApp', 'channels': 'Channels', 'tools': 'Tools', 'autonomy': 'Autonomy' };
-
-  // Filter tabs based on user permissions
-  var app = useApp();
-  var perms = app.permissions || '*';
-  var agentGrant = perms === '*' ? true : (perms.agents || false);
-  var TABS = ALL_TABS.filter(function(t) {
-    if (perms === '*' || agentGrant === true) return true;
-    if (Array.isArray(agentGrant)) return agentGrant.indexOf(t) !== -1;
-    return false;
-  });
-
-  // Check agent-level access
-  var allowedAgents = perms === '*' ? '*' : (perms._allowedAgents || '*');
-  var hasAgentAccess = allowedAgents === '*' || (Array.isArray(allowedAgents) && allowedAgents.indexOf(agentId) >= 0);
-
-  if (!hasAgentAccess) {
-    return h('div', { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: '60vh', textAlign: 'center', padding: 40 } },
-      h('div', { style: { width: 64, height: 64, borderRadius: '50%', background: 'var(--danger-soft, rgba(220,38,38,0.1))', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20 } },
-        h('svg', { width: 32, height: 32, viewBox: '0 0 24 24', fill: 'none', stroke: 'var(--danger, #dc2626)', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round' },
-          h('rect', { x: 3, y: 11, width: 18, height: 11, rx: 2, ry: 2 }),
-          h('path', { d: 'M7 11V7a5 5 0 0 1 10 0v4' })
-        )
-      ),
-      h('h2', { style: { fontSize: 20, fontWeight: 700, marginBottom: 8 } }, 'Agent Access Restricted'),
-      h('p', { style: { fontSize: 14, color: 'var(--text-muted)', maxWidth: 400, lineHeight: 1.6 } },
-        'You don\'t have permission to access this agent. Contact your organization administrator to request access.'
-      ),
-      h('button', { className: 'btn btn-primary', style: { marginTop: 16 }, onClick: onBack }, 'Back to Agents')
-    );
-  }
-
-  var load = function() {
-    setLoading(true);
-    Promise.all([
-      engineCall('/bridge/agents/' + agentId + '/full').catch(function() { return null; }),
-      apiCall('/agents/' + agentId).catch(function() { return null; }),
-      engineCall('/agents?orgId=' + getOrgId()).catch(function() { return { agents: [] }; })
-    ]).then(function(results) {
-      var fullData = results[0];
-      var adminData = results[1];
-      var allAgents = results[2]?.agents || results[2] || [];
-
-      if (fullData) {
-        setEngineAgent(fullData.agent || fullData);
-        setProfile(fullData.permissions || null);
-      }
-      if (adminData) {
-        setAgent(adminData);
-      }
-      setAgents(allAgents);
-      setLoading(false);
-    });
-  };
-
-  useEffect(function() { load(); }, [agentId]);
-
-  // ─── Real-Time Status from Agent Process ────────────────
-  var [liveStatus, setLiveStatus] = useState(null);
-  useEffect(function() {
-    var es = new EventSource('/api/engine/agent-status-stream?agentId=' + encodeURIComponent(agentId));
-    es.onmessage = function(ev) {
-      try {
-        var d = JSON.parse(ev.data);
-        if (d.type === 'status' && d.agentId === agentId) { setLiveStatus(d); }
-      } catch(e) {}
-    };
-    es.onerror = function() { /* reconnects automatically */ };
-    return function() { es.close(); };
-  }, [agentId]);
-
-  // ─── Derived Values ─────────────────────────────────────
-
-  var ea = engineAgent || {};
-  var a = agent || {};
-  var config = ea.config || {};
-  var identity = config.identity || {};
-  // Prefer live process status over DB state
-  var liveState = liveStatus ? liveStatus.status : null;
-  var dbState = ea.state || ea.status || a.status || 'unknown';
-  var state = liveState || dbState;
-  // Map live statuses: online→running, idle→idle, offline→stopped, error→error
-  if (state === 'online') state = 'running';
-  if (state === 'idle') state = 'idle';
-  if (state === 'offline') state = 'stopped';
-  var stateColor = { running: 'success', active: 'success', idle: 'info', deploying: 'info', starting: 'info', provisioning: 'info', degraded: 'warning', error: 'danger', stopped: 'neutral', draft: 'neutral', ready: 'primary' }[state] || 'neutral';
-  var displayName = identity.name || config.name || config.displayName || a.name || 'Unnamed Agent';
-  var displayEmail = identity.email || config.email || a.email || '';
-  var avatarUrl = identity.avatar && identity.avatar.length > 2 ? identity.avatar : null;
-  var avatarInitial = (displayName || '?').charAt(0).toUpperCase();
-  var role = identity.role || config.role || a.role || 'agent';
-  var isPaused = ea.paused || false;
-
-  // ─── Header Actions ─────────────────────────────────────
-
-  var doAction = function(action) {
-    engineCall('/agents/' + agentId + '/' + action, { method: 'POST', body: JSON.stringify({ by: 'dashboard' }) })
-      .then(function() { toast(action.charAt(0).toUpperCase() + action.slice(1) + ' initiated', 'success'); setTimeout(load, 1000); })
-      .catch(function(err) { toast(err.message, 'error'); });
-  };
-
-  var doPause = function() {
-    engineCall('/guardrails/pause/' + agentId, { method: 'POST', body: JSON.stringify({ reason: 'Manual pause from dashboard' }) })
-      .then(function() { toast('Agent paused', 'success'); load(); })
-      .catch(function(err) { toast(err.message, 'error'); });
-  };
-
-  var doResume = function() {
-    engineCall('/guardrails/resume/' + agentId, { method: 'POST', body: JSON.stringify({ reason: 'Manual resume from dashboard' }) })
-      .then(function() { toast('Agent resumed', 'success'); load(); })
-      .catch(function(err) { toast(err.message, 'error'); });
-  };
-
-  if (loading && !agent && !engineAgent) {
-    return h('div', { style: { padding: 40, textAlign: 'center', color: 'var(--text-muted)' } }, 'Loading agent...');
-  }
-
-  return h(Fragment, null,
-
-    // ─── Header Bar (sticky) ────────────────────────────
-    h('div', { style: {
-      position: 'sticky', top: 56, zIndex: 20,
-      background: 'var(--bg-primary)', borderBottom: '1px solid var(--border)',
-      padding: '12px 0', marginBottom: 0,
-      marginLeft: -24, marginRight: -24, paddingLeft: 24, paddingRight: 24,
-    } },
-    h('div', { style: { display: 'flex', alignItems: 'center', gap: 16 } },
-
-      // Back Button
-      h('button', { className: 'btn btn-ghost btn-sm', onClick: onBack, title: 'Back to agents', style: { flexShrink: 0 } },
-        h('svg', { viewBox: '0 0 24 24', width: 16, height: 16, fill: 'none', stroke: 'currentColor', strokeWidth: 2 }, h('polyline', { points: '15 18 9 12 15 6' })),
-        ' Agents'
-      ),
-
-      // Avatar
-      h('div', { style: {
-        width: 44, height: 44, borderRadius: '50%', background: avatarUrl ? 'none' : 'var(--accent)',
-        display: 'flex', alignItems: 'center', justifyContent: 'center',
-        fontSize: avatarUrl ? 22 : 18, fontWeight: 700, color: '#fff', flexShrink: 0,
-        overflow: 'hidden'
-      } },
-        avatarUrl
-          ? h('img', { src: avatarUrl, style: { width: '100%', height: '100%', objectFit: 'cover' } })
-          : avatarInitial
-      ),
-
-      // Name + Info
-      h('div', { style: { flex: 1, minWidth: 0 } },
-        h('div', { style: { display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' } },
-          h('h1', { style: { fontSize: 20, fontWeight: 700, margin: 0 } }, displayName),
-          h('span', { className: 'badge badge-' + stateColor, style: { textTransform: 'capitalize' } }, state),
-          liveStatus && liveStatus.currentActivity && h('span', { style: { fontSize: 11, color: 'var(--text-muted)', fontStyle: 'italic' } }, liveStatus.currentActivity.detail || liveStatus.currentActivity.type)
-        ),
-        h('div', { style: { display: 'flex', alignItems: 'center', gap: 12, marginTop: 4 } },
-          displayEmail && h('span', { style: { fontFamily: 'var(--font-mono, monospace)', fontSize: 12, color: 'var(--text-muted)' } }, displayEmail),
-          h('span', { className: 'badge badge-neutral', style: { textTransform: 'capitalize' } }, role)
-        )
-      ),
-
-      // Action Buttons
-      h('div', { style: { display: 'flex', gap: 6, flexShrink: 0 } },
-        (state !== 'running' && state !== 'active' && state !== 'deploying') && h('button', { className: 'btn btn-primary btn-sm', onClick: function() { doAction('deploy'); } }, I.play(), ' Deploy'),
-        (state === 'running' || state === 'active' || state === 'degraded' || state === 'stopped') && h('button', { className: 'btn btn-secondary btn-sm', onClick: function() { doAction('restart'); } }, I.refresh(), ' Restart'),
-        (state === 'running' || state === 'active' || state === 'degraded') && h('button', { className: 'btn btn-danger btn-sm', onClick: function() { doAction('stop'); } }, I.stop(), ' Stop'),
-        !isPaused && (state === 'running' || state === 'active') && h('button', { className: 'btn btn-secondary btn-sm', onClick: doPause }, I.pause(), ' Pause'),
-        isPaused && h('button', { className: 'btn btn-secondary btn-sm', onClick: doResume }, I.play(), ' Resume')
-      )
-    ), // close header inner flex
-    ), // close header sticky wrapper
-
-    // ─── Tab Bar (sticky, scrollable) ───────────────────
-    h('div', { style: {
-      position: 'sticky', top: 124, zIndex: 19,
-      background: 'var(--bg-primary)', borderBottom: '1px solid var(--border)',
-      marginLeft: -24, marginRight: -24, paddingLeft: 24, paddingRight: 24,
-      marginBottom: 20,
-    } },
-    h('div', { className: 'tabs', style: { marginBottom: 0, overflowX: 'auto', whiteSpace: 'nowrap', WebkitOverflowScrolling: 'touch' } },
-      TABS.map(function(t) {
-        return h('div', { key: t, className: 'tab' + (tab === t ? ' active' : ''), onClick: function() { setTab(t); } }, TAB_LABELS[t] || t.charAt(0).toUpperCase() + t.slice(1));
-      })
-    ),
-    ), // close tab bar sticky wrapper
-
-    // ─── Knowledge Link for current tab ─────────────────
-    AGENT_TAB_DOCS[tab] && h('div', { style: { display: 'flex', justifyContent: 'flex-end', marginBottom: 8 } },
-      h(KnowledgeLink, { page: AGENT_TAB_DOCS[tab], label: (TAB_LABELS[tab] || tab.charAt(0).toUpperCase() + tab.slice(1)) + ' Docs' })
-    ),
-
-    // ─── Tab Content ────────────────────────────────────
-    tab === 'overview' && h(OverviewSection, { agentId: agentId, agent: agent, engineAgent: engineAgent, profile: profile, reload: load, agents: agents, onBack: onBack }),
-    tab === 'personal' && h(PersonalDetailsSection, { agentId: agentId, agent: agent, engineAgent: engineAgent, reload: load }),
-    tab === 'email' && h(EmailSection, { agentId: agentId, engineAgent: engineAgent, reload: load }),
-    tab === 'whatsapp' && h(WhatsAppSection, { agentId: agentId, engineAgent: engineAgent, reload: load, setTab: setTab }),
-    tab === 'channels' && h(ChannelsSection, { agentId: agentId, engineAgent: engineAgent, reload: load }),
-    tab === 'configuration' && h(ConfigurationSection, { agentId: agentId, engineAgent: engineAgent, reload: load }),
-    tab === 'manager' && h(ManagerCatchUpSection, { agentId: agentId, engineAgent: engineAgent, agents: agents, reload: load }),
-    tab === 'tools' && h(ToolsSection, { agentId: agentId, engineAgent: engineAgent, reload: load }),
-    tab === 'skills' && h(SkillsSection, { agentId: agentId, engineAgent: engineAgent, reload: load }),
-    tab === 'permissions' && h(PermissionsSection, { agentId: agentId, engineAgent: engineAgent, profile: profile, reload: load }),
-    tab === 'activity' && h(ActivitySection, { agentId: agentId }),
-    tab === 'communication' && h(CommunicationSection, { agentId: agentId, agents: agents }),
-    tab === 'workforce' && h(WorkforceSection, { agentId: agentId, engineAgent: engineAgent, reload: load }),
-    tab === 'memory' && h(MemorySection, { agentId: agentId, engineAgent: engineAgent, reload: load }),
-    tab === 'guardrails' && h(GuardrailsSection, { agentId: agentId, agents: agents }),
-    tab === 'autonomy' && h(AutonomySection, { agentId: agentId, engineAgent: engineAgent, reload: load }),
-    tab === 'budget' && h(BudgetSection, { agentId: agentId, engineAgent: engineAgent, reload: load }),
-    tab === 'security' && h(AgentSecurityTab, { agentId: agentId, engineAgent: engineAgent, reload: load }),
-    tab === 'tool-security' && h(ToolSecuritySection, { agentId: agentId }),
-    tab === 'deployment' && h(DeploymentSection, { agentId: agentId, engineAgent: engineAgent, agent: agent, reload: load, onBack: onBack })
-  );
-}
-

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

@@ -1,357 +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 { HelpButton } from '../../components/help-button.js';
-import { Badge, EmptyState, formatTime } from './shared.js?v=4';
-
-// ════════════════════════════════════════════════════════════
-// MANAGER & DAILY CATCH-UP SECTION
-// ════════════════════════════════════════════════════════════
-
-var COMMON_TIMEZONES = [
-  'America/New_York', 'America/Chicago', 'America/Denver', 'America/Los_Angeles',
-  'America/Toronto', 'America/Vancouver', 'America/Sao_Paulo', 'America/Mexico_City',
-  'Europe/London', 'Europe/Paris', 'Europe/Berlin', 'Europe/Amsterdam', 'Europe/Madrid',
-  'Europe/Rome', 'Europe/Zurich', 'Europe/Stockholm', 'Europe/Warsaw', 'Europe/Istanbul',
-  'Africa/Lagos', 'Africa/Cairo', 'Africa/Johannesburg', 'Africa/Nairobi',
-  'Asia/Dubai', 'Asia/Kolkata', 'Asia/Singapore', 'Asia/Tokyo', 'Asia/Shanghai',
-  'Asia/Seoul', 'Asia/Hong_Kong', 'Asia/Bangkok', 'Asia/Jakarta',
-  'Australia/Sydney', 'Australia/Melbourne', 'Pacific/Auckland'
-];
-
-export function resolveManager(config, allAgents) {
-  var mgr = config.manager || {};
-  // Legacy: managerId at top level
-  var legacyId = config.managerId;
-  if (mgr.type === 'external') {
-    return { type: 'external', name: mgr.name || '', email: mgr.email || '' };
-  }
-  var internalId = mgr.agentId || legacyId;
-  if (internalId) {
-    var found = (allAgents || []).find(function(a) { return a.id === internalId; });
-    return { type: 'internal', agentId: internalId, name: found ? (found.config?.identity?.name || found.config?.displayName || found.name || internalId) : internalId };
-  }
-  return null;
-}
-
-export function ManagerCatchUpSection(props) {
-  var agentId = props.agentId;
-  var engineAgent = props.engineAgent;
-  var allAgents = props.agents || [];
-  var reload = props.reload;
-  var toast = useApp().toast;
-
-  var ea = engineAgent || {};
-  var config = ea.config || {};
-  var catchUp = config.dailyCatchUp || {};
-
-  var resolved = resolveManager(config, allAgents);
-
-  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({});
-  var form = _form[0]; var setForm = _form[1];
-
-  var startEdit = function() {
-    setForm({
-      managerType: resolved ? resolved.type : 'none',
-      managerAgentId: resolved && resolved.type === 'internal' ? resolved.agentId : '',
-      managerName: resolved && resolved.type === 'external' ? resolved.name : '',
-      managerEmail: resolved && resolved.type === 'external' ? resolved.email : '',
-      managerWhatsApp: (config.messagingChannels?.managerIdentity?.whatsappNumber) || '',
-      managerTelegram: (config.messagingChannels?.managerIdentity?.telegramId) || '',
-      catchUpEnabled: catchUp.enabled !== false && (catchUp.enabled || catchUp.time),
-      catchUpTime: catchUp.time || '09:00',
-      catchUpTimezone: catchUp.timezone || 'America/New_York',
-      catchUpPlatform: catchUp.platform || 'email',
-    });
-    setEditing(true);
-  };
-
-  var set = function(k, v) { setForm(function(f) { var n = Object.assign({}, f); n[k] = v; return n; }); };
-
-  var save = function() {
-    setSaving(true);
-    var updates = {};
-
-    // Build manager object
-    if (form.managerType === 'external') {
-      if (!form.managerName || !form.managerEmail) {
-        toast('Manager name and email are required', 'error');
-        setSaving(false);
-        return;
-      }
-      updates.manager = { type: 'external', name: form.managerName, email: form.managerEmail };
-      updates.managerId = null; // clear legacy
-      // Save messaging platform identities
-      if (form.managerWhatsApp || form.managerTelegram || form.managerIMessage) {
-        updates.messagingChannels = Object.assign({}, config.messagingChannels || {}, {
-          managerIdentity: {
-            whatsappNumber: form.managerWhatsApp || '',
-            telegramId: form.managerTelegram || '',
-          }
-        });
-      }
-    } else if (form.managerType === 'internal') {
-      if (!form.managerAgentId) {
-        toast('Select an agent', 'error');
-        setSaving(false);
-        return;
-      }
-      updates.manager = { type: 'internal', agentId: form.managerAgentId };
-      updates.managerId = form.managerAgentId; // keep legacy compat
-    } else {
-      updates.manager = null;
-      updates.managerId = null;
-    }
-
-    // Build dailyCatchUp
-    if (form.catchUpEnabled) {
-      updates.dailyCatchUp = {
-        enabled: true,
-        time: form.catchUpTime,
-        timezone: form.catchUpTimezone,
-        platform: form.catchUpPlatform || 'email',
-      };
-    } else {
-      updates.dailyCatchUp = { enabled: false };
-    }
-
-    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: updates, updatedBy: 'dashboard' }) })
-      .then(function() { toast('Manager & catch-up saved', 'success'); setEditing(false); setSaving(false); reload(); })
-      .catch(function(err) { toast('Failed to save: ' + err.message, 'error'); setSaving(false); });
-  };
-
-  var labelStyle = { display: 'block', fontSize: 12, fontWeight: 600, color: 'var(--text-secondary)', marginBottom: 4 };
-  var inputStyle = { width: '100%', padding: '8px 10px', borderRadius: 6, border: '1px solid var(--border)', background: 'var(--bg-secondary)', color: 'var(--text-primary)', fontSize: 13 };
-  var fieldGroupStyle = { marginBottom: 16 };
-  var rowStyle = { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 };
-
-  // Other agents this agent could report to (exclude self)
-  var otherAgents = allAgents.filter(function(a) { return a.id !== agentId; });
-
-  if (editing) {
-    return h(Fragment, null,
-      h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 } },
-        h('h3', { style: { margin: 0, fontSize: 16, fontWeight: 600 } }, 'Edit Manager & Daily Catch-Up'),
-        h('div', { style: { display: 'flex', gap: 8 } },
-          h('button', { className: 'btn btn-ghost btn-sm', onClick: function() { setEditing(false); } }, 'Cancel'),
-          h('button', { className: 'btn btn-primary btn-sm', disabled: saving, onClick: save }, saving ? 'Saving...' : 'Save Changes')
-        )
-      ),
-
-      // Manager Card
-      h('div', { className: 'card', style: { padding: 20, marginBottom: 20 } },
-        h('h4', { style: { margin: '0 0 16px', fontSize: 14, fontWeight: 600 } }, 'Manager'),
-        h('p', { style: { fontSize: 13, color: 'var(--text-muted)', marginTop: 0, marginBottom: 16 } }, 'Assign a manager this agent reports to. Can be another agent in the system or an external person (name + email).'),
-
-        h('div', { style: fieldGroupStyle },
-          h('label', { style: labelStyle }, 'Manager Type'),
-          h('select', { style: Object.assign({}, inputStyle, { cursor: 'pointer' }), value: form.managerType, onChange: function(e) {
-            set('managerType', e.target.value);
-            if (e.target.value === 'none') { set('managerAgentId', ''); set('managerName', ''); set('managerEmail', ''); }
-          } },
-            h('option', { value: 'none' }, 'No manager'),
-            h('option', { value: 'internal' }, 'Another agent in this organization'),
-            h('option', { value: 'external' }, 'External person (name + email)')
-          )
-        ),
-
-        form.managerType === 'internal' && h('div', { style: fieldGroupStyle },
-          h('label', { style: labelStyle }, 'Select Agent'),
-          h('select', { style: Object.assign({}, inputStyle, { cursor: 'pointer' }), value: form.managerAgentId, onChange: function(e) { set('managerAgentId', e.target.value); } },
-            h('option', { value: '' }, '-- Select agent --'),
-            otherAgents.map(function(a) {
-              var name = a.config?.identity?.name || a.config?.displayName || a.name || a.id;
-              var role = a.config?.identity?.role || a.config?.role || '';
-              return h('option', { key: a.id, value: a.id }, name + (role ? ' (' + role + ')' : ''));
-            })
-          )
-        ),
-
-        form.managerType === 'external' && h(Fragment, null,
-          h('div', { style: rowStyle },
-            h('div', { style: fieldGroupStyle },
-              h('label', { style: labelStyle }, 'Manager Name'),
-              h('input', { style: inputStyle, type: 'text', value: form.managerName, placeholder: 'e.g. Sarah Johnson', onChange: function(e) { set('managerName', e.target.value); } })
-            ),
-            h('div', { style: fieldGroupStyle },
-              h('label', { style: labelStyle }, 'Manager Email'),
-              h('input', { style: inputStyle, type: 'email', value: form.managerEmail, placeholder: 'e.g. sarah@company.com', onChange: function(e) { set('managerEmail', e.target.value); } })
-            )
-          ),
-          h('p', { style: { fontSize: 12, color: 'var(--text-muted)', marginTop: 0, marginBottom: 16 } }, 'The agent will contact this person for daily catch-ups, status reports, and escalations via the platform you choose below.'),
-
-          // Messaging platform identities
-          h('div', { style: { padding: '16px', background: 'var(--bg-secondary)', borderRadius: 8, border: '1px solid var(--border)' } },
-            h('h5', { style: { margin: '0 0 12px', fontSize: 13, fontWeight: 600, color: 'var(--text-secondary)' } }, 'Manager Identity on Messaging Platforms'),
-            h('p', { style: { fontSize: 12, color: 'var(--text-muted)', margin: '0 0 12px' } }, 'So the agent recognizes the manager across WhatsApp and Telegram with full trust.'),
-            h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 } },
-              h('div', null,
-                h('label', { style: labelStyle }, E.whatsapp(14), ' WhatsApp'),
-                h('input', { style: inputStyle, type: 'text', value: form.managerWhatsApp || '', placeholder: '+1234567890', onChange: function(e) { set('managerWhatsApp', e.target.value); } })
-              ),
-              h('div', null,
-                h('label', { style: labelStyle }, E.telegram(14), ' Telegram'),
-                h('input', { style: inputStyle, type: 'text', value: form.managerTelegram || '', placeholder: 'User ID (from @userinfobot)', onChange: function(e) { set('managerTelegram', e.target.value); } })
-              ),
-            )
-          )
-        )
-      ),
-
-      // Daily Catch-Up Card
-      h('div', { className: 'card', style: { padding: 20 } },
-        h('h4', { style: { margin: '0 0 16px', fontSize: 14, fontWeight: 600 } }, 'Daily Catch-Up'),
-        h('p', { style: { fontSize: 13, color: 'var(--text-muted)', marginTop: 0, marginBottom: 16 } }, 'When enabled, the agent sends a daily status update to its manager with goals, progress, and blockers via the chosen platform.'),
-
-        h('div', { style: { display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 } },
-          h('label', { style: { display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', fontSize: 13, fontWeight: 600 } },
-            h('input', { type: 'checkbox', checked: form.catchUpEnabled, onChange: function(e) { set('catchUpEnabled', e.target.checked); } }),
-            'Enable daily catch-up'
-          )
-        ),
-
-        form.catchUpEnabled && h(Fragment, null,
-          h('div', { style: rowStyle },
-            h('div', { style: fieldGroupStyle },
-              h('label', { style: labelStyle }, 'Time'),
-              h('input', { style: inputStyle, type: 'time', value: form.catchUpTime, onChange: function(e) { set('catchUpTime', e.target.value); } })
-            ),
-            h('div', { style: fieldGroupStyle },
-              h('label', { style: labelStyle }, 'Timezone'),
-              h('select', { style: Object.assign({}, inputStyle, { cursor: 'pointer' }), value: form.catchUpTimezone, onChange: function(e) { set('catchUpTimezone', e.target.value); } },
-                COMMON_TIMEZONES.map(function(tz) { return h('option', { key: tz, value: tz }, tz.replace(/_/g, ' ')); })
-              )
-            )
-          ),
-          h('div', { style: Object.assign({}, fieldGroupStyle, { marginTop: 4 }) },
-            h('label', { style: labelStyle }, 'Send via'),
-            h('div', { style: { display: 'flex', gap: 8, flexWrap: 'wrap' } },
-              (function() {
-                var channels = config.messagingChannels || {};
-                var platforms = [{ id: 'email', label: 'Email', icon: E.email(14), always: true }];
-                if (channels.whatsapp?.enabled || channels.whatsapp?.botToken || form.managerWhatsApp) {
-                  platforms.push({ id: 'whatsapp', label: 'WhatsApp', icon: E.whatsapp(14) });
-                }
-                if (channels.telegram?.enabled || channels.telegram?.botToken) {
-                  platforms.push({ id: 'telegram', label: 'Telegram', icon: E.telegram(14) });
-                }
-                // Always show all three if manager type is external (they might configure later)
-                if (form.managerType === 'external') {
-                  if (!platforms.find(function(p) { return p.id === 'whatsapp'; })) platforms.push({ id: 'whatsapp', label: 'WhatsApp', icon: E.whatsapp(14) });
-                  if (!platforms.find(function(p) { return p.id === 'telegram'; })) platforms.push({ id: 'telegram', label: 'Telegram', icon: E.telegram(14) });
-                }
-                return platforms.map(function(p) {
-                  var selected = form.catchUpPlatform === p.id;
-                  return h('button', {
-                    key: p.id, type: 'button',
-                    className: 'btn btn-sm ' + (selected ? 'btn-primary' : 'btn-ghost'),
-                    style: { display: 'inline-flex', alignItems: 'center', gap: 6, padding: '6px 14px', fontSize: 13, borderRadius: 8 },
-                    onClick: function() { set('catchUpPlatform', p.id); }
-                  }, p.icon, ' ', p.label);
-                });
-              })()
-            ),
-            form.catchUpPlatform === 'whatsapp' && !form.managerWhatsApp && h('div', { style: { fontSize: 12, color: 'var(--warning-text, #b45309)', marginTop: 6 } }, 'Set the manager\'s WhatsApp number above to use this.'),
-            form.catchUpPlatform === 'telegram' && !form.managerTelegram && h('div', { style: { fontSize: 12, color: 'var(--warning-text, #b45309)', marginTop: 6 } }, 'Set the manager\'s Telegram ID above to use this.')
-          )
-        ),
-
-        form.catchUpEnabled && !form.managerType !== 'none' && form.managerType === 'none' && h('div', {
-          style: { padding: '10px 14px', background: 'var(--warning-soft, #fff3cd)', borderRadius: 6, fontSize: 13, color: 'var(--warning-text, #856404)', marginTop: 12 }
-        }, 'Note: Catch-up is enabled but no manager is assigned. The agent won\'t have anyone to report to.')
-      )
-    );
-  }
-
-  // View mode
-  var catchUpEnabled = catchUp.enabled || catchUp.time;
-  var catchUpTime = catchUp.time || '09:00';
-  var catchUpTz = catchUp.timezone || 'America/New_York';
-
-  return h(Fragment, null,
-    h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 } },
-      h('h3', { style: { margin: 0, fontSize: 16, fontWeight: 600, display: 'flex', alignItems: 'center' } }, 'Manager & Daily Catch-Up',
-        h(HelpButton, { label: 'Manager & Daily Catch-Up' },
-          h('p', null, 'Define who this agent reports to and configure automated daily briefings.'),
-          h('h4', { style: { marginTop: 16, marginBottom: 8, fontSize: 14 } }, 'Manager'),
-          h('ul', { style: { paddingLeft: 20, margin: '4px 0 8px' } },
-            h('li', null, h('strong', null, 'Internal Manager'), ' — Another agent in your organization that supervises this one. Escalations and reports go to them.'),
-            h('li', null, h('strong', null, 'External Manager'), ' — A human outside the system (e.g., via email). The agent sends reports and escalations to this email address.'),
-            h('li', null, h('strong', null, 'No Manager'), ' — The agent operates independently. Escalations go to the system admin.')
-          ),
-          h('h4', { style: { marginTop: 16, marginBottom: 8, fontSize: 14 } }, 'Daily Catch-Up'),
-          h('p', null, 'When enabled, the agent sends a daily summary to its manager covering what it did, any issues encountered, and upcoming tasks. You can choose which platforms (email, chat, etc.) receive the catch-up.'),
-          h('div', { style: { marginTop: 12, padding: 12, background: 'var(--bg-secondary, #1e293b)', borderRadius: 'var(--radius, 8px)', fontSize: 13 } }, h('strong', null, 'Tip: '), 'Daily catch-ups help you stay aware of what the agent is doing without manually checking. Start with email summaries, then add chat if you want real-time updates.')
-        )
-      ),
-      h('button', { className: 'btn btn-primary btn-sm', onClick: startEdit }, I.journal(), ' Edit')
-    ),
-
-    // Manager Card
-    h('div', { className: 'card', style: { padding: 20, marginBottom: 20 } },
-      h('h4', { style: { margin: '0 0 16px', fontSize: 14, fontWeight: 600 } }, 'Reports To'),
-      resolved
-        ? h(Fragment, null,
-            h('div', { style: { display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 } },
-              h('div', { style: {
-                width: 40, height: 40, borderRadius: '50%', background: resolved.type === 'external' ? 'var(--accent)' : 'var(--primary)',
-                display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, fontWeight: 700, color: '#fff', flexShrink: 0
-              } }, (resolved.name || '?').charAt(0).toUpperCase()),
-              h('div', null,
-                h('div', { style: { fontSize: 14, fontWeight: 600 } }, resolved.name),
-                resolved.type === 'external'
-                  ? h('div', { style: { fontSize: 13, color: 'var(--text-muted)', fontFamily: 'var(--font-mono, monospace)' } }, resolved.email)
-                  : h('span', { className: 'badge badge-neutral', style: { fontSize: 11 } }, 'Internal Agent')
-              )
-            ),
-            // Show messaging identities if configured
-            (function() {
-              var mi = config.messagingChannels?.managerIdentity || {};
-              var hasAny = mi.whatsappNumber || mi.telegramId;
-              if (!hasAny) return null;
-              return h('div', { style: { display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 4 } },
-                mi.whatsappNumber && h('span', { style: { display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--text-secondary)', padding: '3px 8px', background: 'var(--bg-secondary)', borderRadius: 12 } }, E.whatsapp(14), mi.whatsappNumber),
-                mi.telegramId && h('span', { style: { display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--text-secondary)', padding: '3px 8px', background: 'var(--bg-secondary)', borderRadius: 12 } }, E.telegram(14), mi.telegramId)
-              );
-            })()
-          )
-        : h('div', { style: { fontSize: 14, color: 'var(--text-muted)' } }, 'No manager assigned')
-    ),
-
-    // Daily Catch-Up Card
-    h('div', { className: 'card', style: { padding: 20 } },
-      h('h4', { style: { margin: '0 0 16px', fontSize: 14, fontWeight: 600 } }, 'Daily Catch-Up'),
-      catchUpEnabled
-        ? h('div', null,
-            h('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 } },
-              h('span', { style: { width: 8, height: 8, borderRadius: '50%', background: 'var(--success)', display: 'inline-block' } }),
-              h('span', { style: { fontSize: 14, fontWeight: 600 } }, 'Active')
-            ),
-            h('div', { style: { fontSize: 13, color: 'var(--text-secondary)' } },
-              'Sends daily at ', h('strong', null, catchUpTime), ' ', catchUpTz.replace(/_/g, ' '),
-              ' via ',
-              (function() {
-                var p = catchUp.platform || 'email';
-                var iconMap = { email: E.email(14), whatsapp: E.whatsapp(14), telegram: E.telegram(14) };
-                var labelMap = { email: 'Email', whatsapp: 'WhatsApp', telegram: 'Telegram' };
-                return h('span', { style: { display: 'inline-flex', alignItems: 'center', gap: 4, fontWeight: 600 } }, iconMap[p] || null, ' ', labelMap[p] || p);
-              })()
-            ),
-            !resolved && h('div', { style: { fontSize: 12, color: 'var(--warning-text, #856404)', marginTop: 8 } }, 'Warning: No manager assigned — catch-up emails have no recipient.')
-          )
-        : h('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } },
-            h('span', { style: { width: 8, height: 8, borderRadius: '50%', background: 'var(--text-muted)', display: 'inline-block' } }),
-            h('span', { style: { fontSize: 14, color: 'var(--text-muted)' } }, 'Not configured')
-          )
-    )
-  );
-}
-