@agenticmail/enterprise 0.5.326 → 0.5.328

package/src/dashboard/pages/agents.js

@@ -1,1242 +0,0 @@
-import { h, useState, useEffect, useCallback, Fragment, useApp, apiCall, engineCall, DEPLOY_PHASES, DEPLOY_PHASE_LABELS, showConfirm, getOrgId } from '../components/utils.js';
-import { I } from '../components/icons.js';
-import { E } from '../assets/icons/emoji-icons.js';
-import { CULTURES, LANGUAGES, PersonaForm, LanguageSelect, getLanguageName } from '../components/persona-fields.js';
-import { HelpButton } from '../components/help-button.js';
-import { useOrgContext } from '../components/org-switcher.js';
-import { KnowledgeLink } from '../components/knowledge-link.js';
-
-// ════════════════════════════════════════════════════════════
-// DEPLOY MODAL
-// ════════════════════════════════════════════════════════════
-
-export function DeployModal({ agentId, agentConfig, onClose, onDeployed, toast }) {
-  const [step, setStep] = useState(0);
-  const [targetType, setTargetType] = useState('docker');
-  const [credentials, setCredentials] = useState([]);
-  const [selectedCred, setSelectedCred] = useState('');
-  const [config, setConfig] = useState({ imageTag: 'latest', ports: '3000', memory: '512m', cpu: '0.5', installPath: '/opt/agent', systemd: true, region: 'iad' });
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState('');
-
-  useEffect(() => {
-    engineCall('/deploy-credentials?orgId=' + getOrgId()).then(d => setCredentials(d.credentials || [])).catch(() => {});
-  }, []);
-
-  const targets = [
-    { id: 'docker', name: 'Docker', desc: 'Run in an isolated Docker container' },
-    { id: 'vps', name: 'VPS / Server', desc: 'Deploy via SSH to a remote server' },
-    { id: 'fly', name: 'Fly.io', desc: 'Deploy to Fly.io edge network' },
-    { id: 'railway', name: 'Railway', desc: 'Deploy to Railway platform' },
-  ];
-
-  const filteredCreds = credentials.filter(c => c.targetType === targetType || c.targetType === 'ssh' && targetType === 'vps');
-
-  const doDeploy = async () => {
-    setError(''); setLoading(true);
-    try {
-      await apiCall('/agents/' + agentId + '/deploy', { method: 'POST', body: JSON.stringify({ targetType: targetType, credentialId: selectedCred || undefined, config: config, deployedBy: 'dashboard' }) });
-      if (toast) toast('Deployment started', 'success');
-      if (onDeployed) onDeployed();
-      onClose();
-    } catch (err) { setError(err.message); if (toast) toast(err.message, 'error'); }
-    setLoading(false);
-  };
-
-  return h('div', { className: 'modal-overlay', onClick: e => { if (e.target === e.currentTarget) onClose(); } },
-    h('div', { className: 'modal modal-lg' },
-      h('div', { className: 'modal-header' },
-        h('h2', null, 'Deploy Agent'),
-        h('button', { className: 'btn btn-ghost btn-icon', onClick: onClose }, I.x())
-      ),
-      h('div', { className: 'modal-body' },
-        h('div', { className: 'wizard-steps' }, [0, 1, 2].map(i =>
-          h('div', { key: i, className: 'wizard-step' + (i === step ? ' active' : '') + (i < step ? ' done' : '') })
-        )),
-
-        step === 0 && h(Fragment, null,
-          h('h4', { style: { fontSize: 14, fontWeight: 600, marginBottom: 12 } }, 'Select Target'),
-          h('div', { className: 'target-grid' }, targets.map(t =>
-            h('div', { key: t.id, className: 'target-card' + (targetType === t.id ? ' selected' : ''), onClick: () => setTargetType(t.id) },
-              h('h4', null, t.name),
-              h('p', null, t.desc)
-            )
-          ))
-        ),
-
-        step === 1 && h(Fragment, null,
-          h('h4', { style: { fontSize: 14, fontWeight: 600, marginBottom: 12 } }, 'Configure Deployment'),
-          filteredCreds.length > 0 && h('div', { className: 'form-group' },
-            h('label', { className: 'form-label' }, 'Credential'),
-            h('select', { className: 'input', value: selectedCred, onChange: e => setSelectedCred(e.target.value) },
-              h('option', { value: '' }, '-- Select credential --'),
-              filteredCreds.map(c => h('option', { key: c.id, value: c.id }, c.name))
-            )
-          ),
-          filteredCreds.length === 0 && h('div', { style: { padding: 12, background: 'var(--warning-soft)', borderRadius: 'var(--radius)', fontSize: 13, color: 'var(--warning)', marginBottom: 16 } }, 'No credentials found for this target type. Add one in Settings > Deployments.'),
-
-          targetType === 'docker' && h(Fragment, null,
-            h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 } },
-              h('div', { className: 'form-group' },
-                h('label', { className: 'form-label' }, 'Image Tag'),
-                h('input', { className: 'input', value: config.imageTag, onChange: e => setConfig(c => ({ ...c, imageTag: e.target.value })) })
-              ),
-              h('div', { className: 'form-group' },
-                h('label', { className: 'form-label' }, 'Ports'),
-                h('input', { className: 'input', value: config.ports, onChange: e => setConfig(c => ({ ...c, ports: e.target.value })), placeholder: '3000' })
-              )
-            ),
-            h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 } },
-              h('div', { className: 'form-group' },
-                h('label', { className: 'form-label' }, 'Memory'),
-                h('input', { className: 'input', value: config.memory, onChange: e => setConfig(c => ({ ...c, memory: e.target.value })), placeholder: '512m' })
-              ),
-              h('div', { className: 'form-group' },
-                h('label', { className: 'form-label' }, 'CPU'),
-                h('input', { className: 'input', value: config.cpu, onChange: e => setConfig(c => ({ ...c, cpu: e.target.value })), placeholder: '0.5' })
-              )
-            )
-          ),
-
-          targetType === 'vps' && h(Fragment, null,
-            h('div', { className: 'form-group' },
-              h('label', { className: 'form-label' }, 'Install Path'),
-              h('input', { className: 'input', value: config.installPath, onChange: e => setConfig(c => ({ ...c, installPath: e.target.value })), placeholder: '/opt/agent' })
-            ),
-            h('div', { style: { display: 'flex', alignItems: 'center', gap: 12, marginTop: 8 } },
-              h('div', { className: 'toggle' + (config.systemd ? ' on' : ''), onClick: () => setConfig(c => ({ ...c, systemd: !c.systemd })) }),
-              h('span', { style: { fontSize: 13 } }, 'Create systemd service')
-            )
-          ),
-
-          targetType === 'fly' && h('div', { className: 'form-group' },
-            h('label', { className: 'form-label' }, 'Region'),
-            h('select', { className: 'input', value: config.region, onChange: e => setConfig(c => ({ ...c, region: e.target.value })) },
-              h('option', { value: 'iad' }, 'Ashburn (iad)'), h('option', { value: 'ord' }, 'Chicago (ord)'), h('option', { value: 'lax' }, 'Los Angeles (lax)'), h('option', { value: 'lhr' }, 'London (lhr)'), h('option', { value: 'ams' }, 'Amsterdam (ams)'), h('option', { value: 'nrt' }, 'Tokyo (nrt)')
-            )
-          ),
-
-          targetType === 'railway' && h('div', { className: 'form-group' },
-            h('label', { className: 'form-label' }, 'Region'),
-            h('select', { className: 'input', value: config.region, onChange: e => setConfig(c => ({ ...c, region: e.target.value })) },
-              h('option', { value: 'us-west1' }, 'US West'), h('option', { value: 'us-east4' }, 'US East'), h('option', { value: 'europe-west4' }, 'Europe West'), h('option', { value: 'asia-southeast1' }, 'Asia Southeast')
-            )
-          )
-        ),
-
-        step === 2 && h(Fragment, null,
-          h('h4', { style: { fontSize: 14, fontWeight: 600, marginBottom: 12 } }, 'Review Deployment'),
-          h('div', { style: { background: 'var(--bg-tertiary)', borderRadius: 'var(--radius-lg)', padding: 20 } },
-            h('div', { style: { display: 'grid', gridTemplateColumns: '120px 1fr', gap: '8px 16px', fontSize: 13 } },
-              h('span', { style: { color: 'var(--text-muted)' } }, 'Agent'), h('span', { style: { fontWeight: 600 } }, agentConfig?.name || agentConfig?.email?.address || agentId),
-              h('span', { style: { color: 'var(--text-muted)' } }, 'Target'), h('span', null, targets.find(t => t.id === targetType)?.name || targetType),
-              h('span', { style: { color: 'var(--text-muted)' } }, 'Credential'), h('span', null, selectedCred ? (filteredCreds.find(c => c.id === selectedCred)?.name || selectedCred) : 'None'),
-              targetType === 'docker' && h(Fragment, null,
-                h('span', { style: { color: 'var(--text-muted)' } }, 'Image Tag'), h('span', null, config.imageTag),
-                h('span', { style: { color: 'var(--text-muted)' } }, 'Resources'), h('span', null, config.memory + ' / ' + config.cpu + ' CPU')
-              ),
-              (targetType === 'fly' || targetType === 'railway') && h(Fragment, null,
-                h('span', { style: { color: 'var(--text-muted)' } }, 'Region'), h('span', null, config.region)
-              ),
-              targetType === 'vps' && h(Fragment, null,
-                h('span', { style: { color: 'var(--text-muted)' } }, 'Install Path'), h('span', null, config.installPath),
-                h('span', { style: { color: 'var(--text-muted)' } }, 'Systemd'), h('span', null, config.systemd ? 'Yes' : 'No')
-              )
-            )
-          ),
-          error && h('div', { style: { color: 'var(--danger)', fontSize: 13, marginTop: 12 } }, error)
-        )
-      ),
-      h('div', { className: 'modal-footer' },
-        step > 0 && h('button', { className: 'btn btn-secondary', onClick: () => setStep(step - 1) }, 'Back'),
-        h('div', { style: { flex: 1 } }),
-        step < 2 && h('button', { className: 'btn btn-primary', onClick: () => setStep(step + 1) }, 'Next'),
-        step === 2 && h('button', { className: 'btn btn-primary', disabled: loading, onClick: doDeploy }, loading ? 'Deploying...' : 'Deploy')
-      )
-    )
-  );
-}
-
-// ════════════════════════════════════════════════════════════
-// DEPLOYMENT PROGRESS
-// ════════════════════════════════════════════════════════════
-
-export function DeploymentProgress({ agentId, onComplete }) {
-  const [phases, setPhases] = useState({});
-
-  useEffect(() => {
-    var es = new EventSource('/api/engine/activity/stream');
-    es.onmessage = function(e) {
-      try {
-        var data = JSON.parse(e.data);
-        if (data.agentId && data.agentId !== agentId) return;
-        if (data.type === 'deploy-phase' || data.type === 'deploy_phase') {
-          setPhases(function(prev) {
-            var next = Object.assign({}, prev);
-            next[data.phase] = { status: data.status, message: data.message || '', timestamp: data.timestamp || new Date().toISOString() };
-            return next;
-          });
-          if (data.phase === 'complete') {
-            if (onComplete) onComplete(data.status === 'completed' || data.status === 'success');
-          }
-          if (data.status === 'failed' || data.status === 'error') {
-            if (onComplete) onComplete(false);
-          }
-        }
-      } catch (err) {}
-    };
-    es.onerror = function() { es.close(); };
-    return function() { es.close(); };
-  }, [agentId]);
-
-  var currentPhaseIndex = -1;
-  DEPLOY_PHASES.forEach(function(p, i) {
-    if (phases[p]) currentPhaseIndex = i;
-  });
-
-  return h('div', { className: 'deploy-timeline' },
-    DEPLOY_PHASES.map(function(phase, i) {
-      var info = phases[phase];
-      var status = 'pending';
-      if (info) {
-        if (info.status === 'completed' || info.status === 'success' || info.status === 'done') status = 'completed';
-        else if (info.status === 'failed' || info.status === 'error') status = 'failed';
-        else status = 'active';
-      } else if (i <= currentPhaseIndex) {
-        status = 'completed';
-      }
-      // Mark first un-completed phase after current as active if nothing explicitly active
-      if (status === 'pending' && i === currentPhaseIndex + 1 && currentPhaseIndex >= 0) {
-        var prevInfo = phases[DEPLOY_PHASES[currentPhaseIndex]];
-        if (prevInfo && (prevInfo.status === 'completed' || prevInfo.status === 'success' || prevInfo.status === 'done')) {
-          status = 'active';
-        }
-      }
-
-      var icon = '-';
-      if (status === 'completed') icon = h('svg', { viewBox: '0 0 24 24', width: 12, height: 12, fill: 'none', stroke: 'currentColor', strokeWidth: 3 }, h('polyline', { points: '20 6 9 17 4 12' }));
-      else if (status === 'active') icon = h('svg', { viewBox: '0 0 24 24', width: 12, height: 12, fill: 'none', stroke: 'currentColor', strokeWidth: 2 }, h('path', { d: 'M12 2v4m0 12v4m-7.07-14.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4m-14.93-7.07l2.83 2.83m8.48 8.48l2.83 2.83' }));
-      else if (status === 'failed') icon = h('svg', { viewBox: '0 0 24 24', width: 12, height: 12, fill: 'none', stroke: 'currentColor', strokeWidth: 3 }, h('line', { x1: 18, y1: 6, x2: 6, y2: 18 }), h('line', { x1: 6, y1: 6, x2: 18, y2: 18 }));
-
-      return h('div', { key: phase, className: 'deploy-phase ' + status },
-        h('div', { className: 'deploy-phase-icon' }, icon),
-        h('div', { className: 'deploy-phase-content' },
-          h('div', { className: 'deploy-phase-title' }, DEPLOY_PHASE_LABELS[phase] || phase),
-          info && info.message && h('div', { className: 'deploy-phase-msg' }, info.message),
-          info && info.timestamp && h('div', { className: 'deploy-phase-msg' }, new Date(info.timestamp).toLocaleTimeString())
-        )
-      );
-    })
-  );
-}
-
-// ════════════════════════════════════════════════════════════
-// AGENT CREATION WIZARD
-// ════════════════════════════════════════════════════════════
-
-export function CreateAgentWizard({ onClose, onCreated, toast }) {
-  const [step, setStep] = useState(0);
-  const steps = ['Role', 'Basics', 'Persona', 'Skills', 'Permissions', 'Deployment', 'Review'];
-  const [form, setForm] = useState({ name: '', email: '', role: 'assistant', description: '', personality: '', skills: [], preset: null, customTools: { allowed: [], blocked: [] }, deployTarget: 'fly', knowledgeBases: [], provider: '', model: '', approvalRequired: true, soulId: null, avatar: null, gender: '', dateOfBirth: '', maritalStatus: '', culturalBackground: '', language: 'en-us', autoOnboard: true, maxRiskLevel: 'medium', blockedSideEffects: ['runs-code', 'deletes-data', 'financial', 'controls-device'], approvalForRiskLevels: ['high', 'critical'], approvalForSideEffects: ['sends-email', 'sends-message'], rateLimits: { toolCallsPerMinute: 30, toolCallsPerHour: 500, toolCallsPerDay: 5000, externalActionsPerHour: 50 }, constraints: { maxConcurrentTasks: 5, maxSessionDurationMinutes: 480, sandboxMode: false }, traits: { communication: 'direct', detail: 'detail-oriented', energy: 'calm', humor: 'warm', formality: 'adaptive', empathy: 'moderate', patience: 'patient', creativity: 'creative' } });
-  const [allSkills, setAllSkills] = useState({});
-  const [providers, setProviders] = useState([]);
-  const [providerModels, setProviderModels] = useState([]);
-  const [presets, setPresets] = useState([]);
-  const [soulCategories, setSoulCategories] = useState({});
-  const [soulMeta, setSoulMeta] = useState({});
-  const [soulSearch, setSoulSearch] = useState('');
-  const [selectedSoul, setSelectedSoul] = useState(null);
-  const [previewOpen, setPreviewOpen] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [showSetupGuide, setShowSetupGuide] = useState(false);
-  const [draftSaved, setDraftSaved] = useState(false);
-
-  // Load draft from localStorage on mount
-  useEffect(function() {
-    try {
-      var draft = localStorage.getItem('em_agent_draft');
-      if (draft) {
-        var parsed = JSON.parse(draft);
-        setForm(function(f) { return Object.assign({}, f, parsed); });
-        if (parsed._step) setStep(parsed._step);
-      }
-    } catch {}
-  }, []);
-
-  // Save draft function
-  var saveDraft = useCallback(function() {
-    try {
-      localStorage.setItem('em_agent_draft', JSON.stringify(Object.assign({}, form, { _step: step })));
-      setDraftSaved(true);
-      setTimeout(function() { setDraftSaved(false); }, 2000);
-    } catch {}
-  }, [form, step]);
-
-  // Auto-save draft on step change
-  useEffect(function() {
-    if (form.name) {
-      try { localStorage.setItem('em_agent_draft', JSON.stringify(Object.assign({}, form, { _step: step }))); } catch {}
-    }
-  }, [step]);
-
-  // Clear draft after successful creation
-  var clearDraft = function() { try { localStorage.removeItem('em_agent_draft'); } catch {} };
-  const [setupChecked, setSetupChecked] = useState(false);
-
-  useEffect(() => {
-    engineCall('/skills/by-category').then(d => setAllSkills(d.categories || {})).catch(() => {});
-    engineCall('/profiles/presets').then(d => setPresets(d.presets || [])).catch(() => {});
-    engineCall('/souls/by-category?orgId=' + (getOrgId() || '')).then(d => { setSoulCategories(d.categories || {}); setSoulMeta(d.categoryMeta || {}); }).catch(() => {});
-    apiCall('/providers').then(function(d) {
-      var provList = d.providers || [];
-      setProviders(provList);
-      var configuredProviders = provList.filter(function(p) { return p.configured; });
-      if (configuredProviders.length === 0) { setShowSetupGuide(true); }
-      else {
-        // Auto-select first configured provider if none set
-        setForm(function(f) {
-          if (!f.provider) {
-            return Object.assign({}, f, { provider: configuredProviders[0].id });
-          }
-          return f;
-        });
-      }
-      setSetupChecked(true);
-    }).catch(function() { setShowSetupGuide(true); setSetupChecked(true); });
-  }, []);
-
-  // Fetch models when provider changes
-  useEffect(function() {
-    var p = form.provider;
-    if (!p) return;
-    apiCall('/providers/' + p + '/models').then(function(d) {
-      var models = d.models || [];
-      setProviderModels(models);
-      // Auto-select first model if current model doesn't belong to this provider
-      if (models.length > 0) {
-        var currentValid = models.some(function(m) { return m.id === form.model; });
-        if (!currentValid) {
-          set('model', models[0].id);
-        }
-      }
-    }).catch(function() { setProviderModels([]); });
-  }, [form.provider]);
-
-  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
-  const toggleSkill = (id) => setForm(f => ({ ...f, skills: f.skills.includes(id) ? f.skills.filter(s => s !== id) : [...f.skills, id] }));
-  const [suites, setSuites] = useState([]);
-  const [skillSearch, setSkillSearch] = useState('');
-
-  // Load suites
-  useEffect(() => {
-    engineCall('/skills/suites').then(d => setSuites(d.suites || [])).catch(() => {});
-  }, []);
-
-  // Toggle an entire suite — adds all its skills at once, or removes them all
-  const toggleSuite = (suite) => {
-    setForm(f => {
-      const allIn = suite.skills.every(id => f.skills.includes(id));
-      if (allIn) {
-        return { ...f, skills: f.skills.filter(id => !suite.skills.includes(id)) };
-      } else {
-        const merged = [...new Set([...f.skills, ...suite.skills])];
-        return { ...f, skills: merged };
-      }
-    });
-  };
-
-  const selectSoul = (tpl) => {
-    if (form.soulId === tpl.id) {
-      setForm(f => ({ ...f, soulId: null }));
-      setSelectedSoul(null);
-      setPreviewOpen(false);
-      return;
-    }
-    setForm(f => ({
-      ...f,
-      soulId: tpl.id,
-      role: tpl.identity.role || tpl.name || f.role,
-      personality: tpl.personality,
-      description: tpl.description,
-      skills: tpl.suggestedSkills || [],
-      preset: tpl.suggestedPreset || f.preset,
-    }));
-    setSelectedSoul(tpl);
-    setPreviewOpen(true);
-  };
-
-  // Parse personality markdown into named sections
-  const parseSections = (text) => {
-    if (!text) return {};
-    const sections = {};
-    const parts = text.split(/^## /m);
-    for (const part of parts) {
-      if (!part.trim()) continue;
-      const nl = part.indexOf('\n');
-      if (nl === -1) continue;
-      sections[part.slice(0, nl).trim()] = part.slice(nl + 1).trim();
-    }
-    return sections;
-  };
-
-  // Rewrite "You are..." personality text into user-facing "This agent..." descriptions
-  const rewriteForUser = (text) => {
-    if (!text) return '';
-    return text
-      // Sentence-start patterns (after . or start of string)
-      .replace(/(^|[.!?]\s+)You are /g, '$1This agent is ')
-      .replace(/(^|[.!?]\s+)You do not /g, '$1This agent does not ')
-      .replace(/(^|[.!?]\s+)You don't /g, '$1This agent won\'t ')
-      .replace(/(^|[.!?]\s+)You never /g, '$1This agent never ')
-      .replace(/(^|[.!?]\s+)You always /g, '$1This agent always ')
-      .replace(/(^|[.!?]\s+)You can /g, '$1This agent can ')
-      .replace(/(^|[.!?]\s+)You will /g, '$1This agent will ')
-      .replace(/(^|[.!?]\s+)You have /g, '$1This agent has ')
-      .replace(/(^|[.!?]\s+)You treat /g, '$1This agent treats ')
-      .replace(/(^|[.!?]\s+)You use /g, '$1This agent uses ')
-      .replace(/(^|[.!?]\s+)You apply /g, '$1This agent applies ')
-      .replace(/(^|[.!?]\s+)You rely /g, '$1This agent relies ')
-      .replace(/(^|[.!?]\s+)You prioritize /g, '$1This agent prioritizes ')
-      .replace(/(^|[.!?]\s+)You write /g, '$1This agent writes ')
-      .replace(/(^|[.!?]\s+)You keep /g, '$1This agent keeps ')
-      .replace(/(^|[.!?]\s+)You work /g, '$1This agent works ')
-      .replace(/(^|[.!?]\s+)You gather /g, '$1This agent gathers ')
-      .replace(/(^|[.!?]\s+)You begin /g, '$1This agent begins ')
-      .replace(/(^|[.!?]\s+)You maintain /g, '$1This agent maintains ')
-      .replace(/(^|[.!?]\s+)You watch /g, '$1This agent watches ')
-      .replace(/(^|[.!?]\s+)You guard /g, '$1This agent guards ')
-      .replace(/(^|[.!?]\s+)You distinguish /g, '$1This agent distinguishes ')
-      // Generic catch-all for remaining "You [verb]" at sentence start
-      .replace(/(^|[.!?]\s+)You (\w)/g, (m, pre, c) => pre + 'This agent ' + c.toLowerCase())
-      // Mid-sentence
-      .replace(/ you /g, ' this agent ')
-      .replace(/ your /g, ' this agent\'s ')
-      .replace(/ Your /g, ' This agent\'s ')
-      // Possessive at start
-      .replace(/(^|[.!?]\s+)Your /g, '$1This agent\'s ');
-  };
-
-  // Extract first N sentences from a prose paragraph, rewritten for user
-  const firstSentences = (text, n) => {
-    if (!text) return '';
-    const rewritten = rewriteForUser(text);
-    const sentences = rewritten.match(/[^.!?]+[.!?]+/g) || [rewritten];
-    return sentences.slice(0, n).join(' ').trim();
-  };
-
-  // Rewrite bullet/list items for user-facing language
-  const extractItems = (text) => {
-    if (!text) return [];
-    const bullets = text.split('\n').filter(l => l.trim().startsWith('- ')).map(l => rewriteForUser(l.trim().slice(2).trim()));
-    if (bullets.length > 0) return bullets;
-    if (text.includes(',')) return text.split(',').map(s => s.trim()).filter(Boolean);
-    return [rewriteForUser(text)];
-  };
-
-  // Filter souls by search
-  const filteredCategories = {};
-  for (const [cat, templates] of Object.entries(soulCategories)) {
-    if (!soulSearch) { filteredCategories[cat] = templates; continue; }
-    const q = soulSearch.toLowerCase();
-    const filtered = templates.filter(t => t.name.toLowerCase().includes(q) || t.description.toLowerCase().includes(q) || (t.tags || []).some(tag => tag.includes(q)));
-    if (filtered.length > 0) filteredCategories[cat] = filtered;
-  }
-
-  const doCreate = async () => {
-    setLoading(true);
-    try {
-      const result = await engineCall('/bridge/agents', { method: 'POST', body: JSON.stringify({
-        orgId: getOrgId(),
-        name: form.name,
-        displayName: form.name,
-        email: form.email || form.name.toLowerCase().replace(/\s+/g, '.') + '@agenticmail.local',
-        role: form.role,
-        description: form.description || '',
-        soulId: form.soulId || null,
-        model: { provider: form.provider || 'anthropic', modelId: form.model === 'custom' ? (form.customModelId || form.model) : form.model },
-        deployment: { target: form.deployTarget },
-        deployTarget: form.deployTarget,
-        skills: form.skills || [],
-        knowledgeBases: form.knowledgeBases || [],
-        presetName: form.preset || undefined,
-        permissions: {
-          maxRiskLevel: form.maxRiskLevel,
-          blockedSideEffects: form.blockedSideEffects,
-          requireApproval: {
-            enabled: form.approvalRequired,
-            forRiskLevels: form.approvalForRiskLevels,
-            forSideEffects: form.approvalForSideEffects,
-            approvers: [],
-            timeoutMinutes: 60,
-          },
-          rateLimits: form.rateLimits,
-          constraints: form.constraints,
-        },
-        persona: {
-          avatar: form.avatar || undefined,
-          gender: form.gender || undefined,
-          dateOfBirth: form.dateOfBirth || undefined,
-          maritalStatus: form.maritalStatus || undefined,
-          culturalBackground: form.culturalBackground || undefined,
-          language: form.language,
-          personality: form.personality || undefined,
-          description: form.description || undefined,
-          traits: form.traits,
-        },
-      }) });
-
-      const agentId = result?.agentId || result?.agent?.id;
-
-      if (form.autoOnboard && agentId) {
-        try {
-          await engineCall('/onboarding/initiate/' + agentId, { method: 'POST', body: JSON.stringify({ orgId: getOrgId() }) });
-          toast('Agent "' + form.name + '" created and onboarding started', 'success');
-        } catch (e) {
-          toast('Agent created but onboarding failed: ' + e.message, 'warning');
-        }
-      } else {
-        toast('Agent "' + form.name + '" created successfully', 'success');
-      }
-
-      clearDraft();
-      onCreated();
-      onClose();
-    } catch (err) { toast(err.message, 'error'); }
-    setLoading(false);
-  };
-
-  const canNext = () => {
-    if (step === 1) return form.name.trim().length > 0;
-    return true;
-  };
-
-  const lastStep = steps.length - 1;
-
-  const stepIcons = ['soul', 'basics', 'skills', 'perms', 'deploy', 'review'];
-
-  // ─── Setup Guide Modal ───────────────────────────────────
-  if (showSetupGuide) {
-    return h('div', { className: 'modal-overlay', onClick: e => { if (e.target === e.currentTarget) onClose(); } },
-      h('div', { className: 'modal', style: { maxWidth: 600 } },
-        h('div', { className: 'modal-header' },
-          h('div', null,
-            h('h2', { style: { display: 'flex', alignItems: 'center', gap: 8 } }, E.bolt(22), ' Setup Required'),
-            h('p', { style: { fontSize: 12, color: 'var(--text-muted)', margin: '2px 0 0', fontWeight: 400 } }, 'Complete these steps before creating your first agent')
-          ),
-          h('button', { className: 'btn btn-ghost btn-icon', onClick: onClose }, I.x())
-        ),
-        h('div', { className: 'modal-body', style: { padding: '24px' } },
-          h('p', { style: { marginBottom: 20, color: 'var(--text-secondary)', lineHeight: 1.6 } },
-            'Your agents need an LLM provider (like Anthropic or OpenAI) to think and act. Set up at least one provider with an API key before creating agents.'
-          ),
-          h('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
-            h('div', { style: { padding: 16, borderRadius: 'var(--radius-lg)', border: '1px solid var(--border)', background: 'var(--bg-secondary)' } },
-              h('div', { style: { display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8 } },
-                h('div', { style: { width: 28, height: 28, borderRadius: '50%', background: 'var(--accent)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 14, flexShrink: 0 } }, '1'),
-                h('strong', null, 'Add an LLM Provider API Key')
-              ),
-              h('p', { style: { margin: 0, color: 'var(--text-muted)', fontSize: 13, paddingLeft: 40, lineHeight: 1.5 } },
-                'Go to Settings → LLM Providers and add your API key for at least one provider. Recommended: Anthropic (Claude) or OpenAI (GPT).'
-              )
-            ),
-            h('div', { style: { padding: 16, borderRadius: 'var(--radius-lg)', border: '1px solid var(--border)', background: 'var(--bg-secondary)' } },
-              h('div', { style: { display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8 } },
-                h('div', { style: { width: 28, height: 28, borderRadius: '50%', background: 'var(--accent)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 14, flexShrink: 0 } }, '2'),
-                h('strong', null, 'Configure Email Domain (Optional)')
-              ),
-              h('p', { style: { margin: 0, color: 'var(--text-muted)', fontSize: 13, paddingLeft: 40, lineHeight: 1.5 } },
-                'Set up your email domain in Settings → Domain so agents can send and receive emails as agent@yourdomain.com.'
-              )
-            ),
-            h('div', { style: { padding: 16, borderRadius: 'var(--radius-lg)', border: '1px solid var(--border)', background: 'var(--bg-secondary)' } },
-              h('div', { style: { display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8 } },
-                h('div', { style: { width: 28, height: 28, borderRadius: '50%', background: 'var(--accent)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 14, flexShrink: 0 } }, '3'),
-                h('strong', null, 'Set Security Policies (Optional)')
-              ),
-              h('p', { style: { margin: 0, color: 'var(--text-muted)', fontSize: 13, paddingLeft: 40, lineHeight: 1.5 } },
-                'Review Settings → Guardrails to set tool approval policies, rate limits, and data loss prevention rules.'
-              )
-            )
-          ),
-          h('div', { style: { display: 'flex', gap: 12, marginTop: 24, justifyContent: 'flex-end' } },
-            h('button', { className: 'btn btn-ghost', onClick: function() { setShowSetupGuide(false); } }, 'Skip for Now'),
-            h('a', { href: '#/settings', className: 'btn btn-primary', onClick: function() { onClose(); } }, 'Go to Settings')
-          )
-        )
-      )
-    );
-  }
-
-  return h('div', { className: 'modal-overlay', onClick: e => { if (e.target === e.currentTarget) onClose(); } },
-    h('div', { className: 'modal modal-xl' },
-      h('div', { className: 'modal-header' },
-        h('div', null,
-          h('h2', null, 'Create Agent'),
-          h('p', { style: { fontSize: 12, color: 'var(--text-muted)', margin: '2px 0 0', fontWeight: 400 } }, 'Configure your new AI agent step by step')
-        ),
-        h('button', { className: 'btn btn-ghost btn-icon', onClick: onClose }, I.x())
-      ),
-      h('div', { className: 'modal-body', style: { padding: 0 } },
-        h('div', { className: 'wizard-layout' },
-          // ─── Sidebar stepper ───
-          h('div', { className: 'wizard-sidebar' },
-            steps.map((s, i) =>
-              h('div', {
-                key: i,
-                className: 'wizard-sidebar-step' + (i === step ? ' active' : '') + (i < step ? ' done' : ''),
-                onClick: () => { if (i < step || (i === step + 1 && canNext())) setStep(i); },
-                style: { cursor: i <= step || (i === step + 1 && canNext()) ? 'pointer' : 'default', opacity: i > step + 1 ? 0.5 : 1 }
-              },
-                h('div', { className: 'wizard-sidebar-num' }, i < step ? I.check() : i + 1),
-                h('span', null, s)
-              )
-            )
-          ),
-          // ─── Step content ───
-          h('div', { className: 'wizard-content' },
-
-            // Step 0: Role (Soul Template Selector)
-            step === 0 && h(Fragment, null,
-              h('h3', { style: { fontSize: 15, fontWeight: 700, marginBottom: 4 } }, 'Choose a Role Template'),
-              h('p', { style: { color: 'var(--text-secondary)', marginBottom: 16, fontSize: 13 } }, 'Select a pre-built role to auto-configure skills, permissions, and personality. Or skip to configure from scratch.'),
-
-              // ── Role Resume Card (shown when a soul is selected) ──
-              selectedSoul && form.soulId && (() => {
-                const ps = parseSections(selectedSoul.personality || '');
-                const identity = selectedSoul.identity || {};
-                const skills = selectedSoul.suggestedSkills || [];
-                const toneLabels = { formal: 'Formal & structured', casual: 'Casual & conversational', professional: 'Professional & clear', friendly: 'Friendly & warm' };
-                const expertiseItems = extractItems(ps['Expertise'] || '');
-                const principleItems = extractItems(ps['Principles'] || '');
-                const boundaryItems = extractItems(ps['Boundaries'] || '');
-
-                const sectionHead = (title) => h('div', { style: { marginBottom: 8, paddingBottom: 6, borderBottom: '1px solid var(--border)' } },
-                  h('span', { style: { fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--text-muted)' } }, title)
-                );
-
-                const prose = (text, sentences) => h('p', { style: { fontSize: 13, lineHeight: 1.6, color: 'var(--text-secondary)', margin: 0 } }, firstSentences(text, sentences));
-
-                return h('div', { style: { marginBottom: 16, border: '2px solid var(--accent)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', background: 'var(--bg-primary)' } },
-
-                  // ── Resume header ──
-                  h('div', { style: { padding: '16px 20px', background: 'var(--accent-soft)', display: 'flex', alignItems: 'flex-start', gap: 14 } },
-                    h('div', { style: { width: 44, height: 44, borderRadius: '50%', background: 'var(--accent)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 18, flexShrink: 0 } },
-                      selectedSoul.name.charAt(0)
-                    ),
-                    h('div', { style: { flex: 1, minWidth: 0 } },
-                      h('div', { style: { fontWeight: 800, fontSize: 16 } }, selectedSoul.name),
-                      h('div', { style: { fontSize: 13, color: 'var(--text-secondary)', marginTop: 2 } }, selectedSoul.description),
-                      h('div', { style: { display: 'flex', flexWrap: 'wrap', gap: 5, marginTop: 8 } },
-                        h('span', { className: 'badge badge-primary' }, identity.role || selectedSoul.name),
-                        h('span', { className: 'badge badge-neutral' }, toneLabels[identity.tone] || 'Professional'),
-                        h('span', { className: 'badge badge-neutral' }, 'Language: ' + getLanguageName(identity.language || 'en-us')),
-                        selectedSoul.suggestedPreset && h('span', { className: 'badge badge-info' }, 'Preset: ' + selectedSoul.suggestedPreset)
-                      )
-                    ),
-                    h('div', { style: { display: 'flex', alignItems: 'center', gap: 6, flexShrink: 0 } },
-                      h('button', { className: 'btn btn-ghost btn-sm', onClick: () => selectSoul(selectedSoul) }, 'Clear'),
-                      h('button', {
-                        className: 'btn btn-ghost btn-sm',
-                        onClick: () => setPreviewOpen(o => !o),
-                        title: previewOpen ? 'Collapse' : 'Expand'
-                      },
-                        h('svg', { viewBox: '0 0 24 24', width: 14, height: 14, fill: 'none', stroke: 'currentColor', strokeWidth: 2, style: { transition: 'transform 150ms', transform: previewOpen ? 'rotate(180deg)' : 'rotate(0)' } },
-                          h('polyline', { points: '6 9 12 15 18 9' })
-                        )
-                      )
-                    )
-                  ),
-
-                  // ── Expandable resume body ──
-                  previewOpen && h('div', { style: { padding: '16px 20px 20px' } },
-
-                    // What this agent does
-                    ps['Identity'] && h('div', { style: { marginBottom: 18 } },
-                      sectionHead('What this agent does'),
-                      prose(ps['Identity'], 3)
-                    ),
-
-                    // How it works
-                    ps['Approach'] && h('div', { style: { marginBottom: 18 } },
-                      sectionHead('How it works'),
-                      prose(ps['Approach'], 3)
-                    ),
-
-                    // Two-column: Thinking + Decision making
-                    (ps['Mental Models'] || ps['Decision Framework']) && h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 18 } },
-                      ps['Mental Models'] && h('div', null,
-                        sectionHead('How it thinks'),
-                        prose(ps['Mental Models'], 3)
-                      ),
-                      ps['Decision Framework'] && h('div', null,
-                        sectionHead('How it prioritizes'),
-                        prose(ps['Decision Framework'], 3)
-                      )
-                    ),
-
-                    // Communication style
-                    ps['Communication Style'] && h('div', { style: { marginBottom: 18 } },
-                      sectionHead('How it communicates'),
-                      prose(ps['Communication Style'], 3)
-                    ),
-
-                    // Expertise — pill tags
-                    expertiseItems.length > 0 && h('div', { style: { marginBottom: 18 } },
-                      sectionHead('Areas of expertise'),
-                      h('div', { style: { display: 'flex', flexWrap: 'wrap', gap: 6 } },
-                        expertiseItems.map((item, i) =>
-                          h('span', { key: i, style: { padding: '4px 12px', fontSize: 12, background: 'var(--bg-tertiary)', borderRadius: 20, color: 'var(--text-primary)', border: '1px solid var(--border)' } }, item)
-                        )
-                      )
-                    ),
-
-                    // Skills auto-enabled
-                    skills.length > 0 && h('div', { style: { marginBottom: 18 } },
-                      sectionHead('Tools this agent will use (' + skills.length + ')'),
-                      h('div', { style: { display: 'flex', flexWrap: 'wrap', gap: 6 } },
-                        skills.map(s => h('span', { key: s, style: { padding: '4px 12px', fontSize: 12, background: 'var(--accent-soft)', borderRadius: 20, color: 'var(--accent-text)', border: '1px solid var(--accent)', fontWeight: 500 } }, s.replace(/-/g, ' ')))
-                      )
-                    ),
-
-                    // Core principles
-                    principleItems.length > 0 && h('div', { style: { marginBottom: 18 } },
-                      sectionHead('Operating principles'),
-                      h('ol', { style: { margin: 0, paddingLeft: 20, fontSize: 13, lineHeight: 1.7, color: 'var(--text-secondary)' } },
-                        principleItems.slice(0, 6).map((p, i) => h('li', { key: i, style: { marginBottom: 2 } }, p))
-                      )
-                    ),
-
-                    // Limitations
-                    boundaryItems.length > 0 && h('div', { style: { padding: '12px 14px', background: 'rgba(239,68,68,0.06)', borderRadius: 'var(--radius)', border: '1px solid rgba(239,68,68,0.15)' } },
-                      sectionHead('Limitations'),
-                      h('ul', { style: { margin: 0, paddingLeft: 18, fontSize: 13, lineHeight: 1.7, color: 'var(--text-secondary)' } },
-                        boundaryItems.map((b, i) => h('li', { key: i, style: { marginBottom: 2 } }, b))
-                      )
-                    )
-                  )
-                );
-              })(),
-
-              h('div', { style: { marginBottom: 14 } },
-                h('input', { className: 'input', value: soulSearch, onChange: e => setSoulSearch(e.target.value), placeholder: 'Search roles (e.g., support, engineer, analyst...)' })
-              ),
-              h('div', null,
-                Object.entries(filteredCategories).map(([cat, templates]) =>
-                  h('div', { key: cat, style: { marginBottom: 20 } },
-                    h('h4', { style: { fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--text-muted)', marginBottom: 8, display: 'flex', alignItems: 'center', gap: 6 } },
-                      soulMeta[cat]?.icon || '',
-                      ' ',
-                      soulMeta[cat]?.name || cat,
-                      h('span', { style: { fontWeight: 400, opacity: 0.6, marginLeft: 4 } }, '(' + templates.length + ')')
-                    ),
-                    h('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 8 } },
-                      templates.map(tpl =>
-                        h('div', {
-                          key: tpl.id,
-                          className: 'preset-card' + (form.soulId === tpl.id ? ' selected' : ''),
-                          onClick: () => selectSoul(tpl),
-                          style: { cursor: 'pointer', padding: '10px 14px' }
-                        },
-                          h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
-                            h('h4', { style: { fontSize: 13, fontWeight: 600, margin: 0 } }, tpl.name),
-                            form.soulId === tpl.id && h('span', { style: { color: 'var(--accent)' } }, I.check())
-                          ),
-                          h('p', { style: { fontSize: 11, color: 'var(--text-muted)', margin: '4px 0 0', lineHeight: 1.4 } }, tpl.description)
-                        )
-                      )
-                    )
-                  )
-                ),
-                Object.keys(filteredCategories).length === 0 && h('div', { style: { textAlign: 'center', padding: 40, color: 'var(--text-muted)', fontSize: 13 } }, 'No roles match your search.')
-              )
-            ),
-
-            // Step 1: Basics
-            step === 1 && h(Fragment, null,
-              h('h3', { style: { fontSize: 15, fontWeight: 700, marginBottom: 4 } }, 'Basic Information'),
-              h('p', { style: { color: 'var(--text-secondary)', marginBottom: 20, fontSize: 13 } }, 'Give your agent their real identity — this is how they\'ll introduce themselves and be known.'),
-              form.soulId && h('div', { style: { marginBottom: 16, padding: '8px 12px', background: 'var(--accent-soft)', borderRadius: 'var(--radius)', fontSize: 12, display: 'flex', alignItems: 'center', gap: 6 } },
-                h('span', { className: 'badge badge-primary' }, 'Role Template'),
-                h('span', null, form.soulId.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase()))
-              ),
-              h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 } },
-                h('div', { className: 'form-group' },
-                  h('label', { className: 'form-label' }, 'Full Name *'),
-                  h('input', { className: 'input', value: form.name, onChange: e => set('name', e.target.value), placeholder: 'e.g., Sarah Chen, Marcus Johnson' }),
-                  h('p', { className: 'form-help' }, 'Their real human name — how they\'ll introduce themselves')
-                ),
-                h('div', { className: 'form-group' },
-                  h('label', { className: 'form-label' }, 'Email Address'),
-                  h('input', { className: 'input', value: form.email, onChange: e => set('email', e.target.value), placeholder: form.name ? form.name.toLowerCase().replace(/\s+/g, '.') + '@yourdomain.com' : 'first.last@yourdomain.com' }),
-                  h('p', { className: 'form-help' }, 'The email address created for this agent in your email system. Configure credentials in the Email tab after creation.')
-                )
-              ),
-              h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 } },
-                h('div', { className: 'form-group' },
-                  h('label', { className: 'form-label' }, 'Role / Job Title'),
-                  h('input', { className: 'input', value: form.role, onChange: e => set('role', e.target.value), placeholder: 'e.g., Customer Support Lead' }),
-                  h('p', { className: 'form-help' }, 'Pre-filled from role template — edit to customize')
-                ),
-                h('div', { className: 'form-group' },
-                  h('label', { className: 'form-label' }, 'LLM Provider'),
-                  h('select', {
-                    className: 'input',
-                    value: form.provider || 'anthropic',
-                    onChange: function(e) { setForm(Object.assign({}, form, { provider: e.target.value })); },
-                  },
-                    providers.length > 0 && providers.some(function(p) { return p.configured; })
-                      ? providers.filter(function(p) { return p.configured; }).map(function(p) {
-                          return h('option', { key: p.id, value: p.id }, p.name + (p.isLocal ? ' (Local)' : ''));
-                        })
-                      : [
-                          h('option', { value: 'anthropic' }, 'Anthropic (Claude)'),
-                          h('option', { value: 'openai' }, 'OpenAI (GPT)'),
-                          h('option', { value: 'google' }, 'Google (Gemini)'),
-                          h('option', { value: 'deepseek' }, 'DeepSeek'),
-                          h('option', { value: 'xai' }, 'xAI (Grok)'),
-                          h('option', { value: 'mistral' }, 'Mistral'),
-                          h('option', { value: 'groq' }, 'Groq'),
-                          h('option', { value: 'ollama' }, 'Ollama (Local)'),
-                        ]
-                  )
-                )
-              ),
-              h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 } },
-                h('div', { className: 'form-group' },
-                  h('label', { className: 'form-label' }, 'Model'),
-                  providerModels.length > 0
-                    ? h('select', { className: 'input', value: form.model, onChange: e => set('model', e.target.value) },
-                        providerModels.map(function(m) {
-                          return h('option', { key: m.id, value: m.id }, m.name || m.id);
-                        }),
-                        h('option', { value: 'custom' }, 'Custom (enter manually)')
-                      )
-                    : h('input', { className: 'input', value: form.model, onChange: e => set('model', e.target.value), placeholder: 'Enter model ID (e.g. claude-opus-4-6)' })
-                ),
-                form.model === 'custom' && h('div', { className: 'form-group' },
-                  h('label', { className: 'form-label' }, 'Custom Model ID'),
-                  h('input', { className: 'input', value: form.customModelId || '', onChange: e => set('customModelId', e.target.value), placeholder: 'e.g. my-fine-tuned-model-v2' })
-                )
-              ),
-              h('div', { className: 'form-group' },
-                h('label', { className: 'form-label' }, 'Description'),
-                h('textarea', { className: 'input', value: form.description, onChange: e => set('description', e.target.value), placeholder: 'What does this agent do? What are its responsibilities?', rows: 3 })
-              )
-            ),
-
-            // Step 2: Persona — uses shared PersonaForm component
-            step === 2 && h(Fragment, null,
-              h('h3', { style: { fontSize: 15, fontWeight: 700, marginBottom: 4 } }, 'Persona & Identity'),
-              h('p', { style: { color: 'var(--text-secondary)', marginBottom: 20, fontSize: 13 } }, 'Upload a photo, set their birthday, and customize their background — they\'ll age naturally over time.'),
-              h(PersonaForm, { form: form, set: set, toast: toast })
-            ),
-
-            // Step 3: Skills
-            step === 3 && h(Fragment, null,
-              h('h3', { style: { fontSize: 15, fontWeight: 700, marginBottom: 4 } }, 'Skills & Capabilities'),
-              h('p', { style: { color: 'var(--text-secondary)', marginBottom: 16, fontSize: 13 } }, 'Select the skills this agent should have. Skills determine what tools and actions are available.'),
-              h('div', { style: { marginBottom: 14, display: 'flex', alignItems: 'center', gap: 10 } },
-                h('span', { className: 'badge badge-primary' }, form.skills.length + ' selected'),
-                form.skills.length > 0 && h('button', { className: 'btn btn-ghost btn-sm', onClick: () => set('skills', []) }, 'Clear all')
-              ),
-
-              // Suites — one-click to add an entire platform
-              suites.length > 0 && h('div', { style: { marginBottom: 24 } },
-                h('h4', { style: { fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--text-muted)', marginBottom: 8 } }, 'Suites — select a platform to add all its apps'),
-                h('div', { className: 'suite-grid' }, suites.map(s =>
-                  h('div', { key: s.id, className: 'suite-card' + (s.skills.every(id => form.skills.includes(id)) ? ' selected' : s.skills.some(id => form.skills.includes(id)) ? ' partial' : ''), onClick: () => toggleSuite(s) },
-                    h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 } },
-                      h('span', { style: { fontSize: 20 } }, s.icon),
-                      s.skills.every(id => form.skills.includes(id)) && h('span', { style: { color: 'var(--accent)' } }, I.check())
-                    ),
-                    h('div', { className: 'suite-name' }, s.name),
-                    h('div', { className: 'suite-desc' }, s.skills.length + ' apps included'),
-                    s.skills.some(id => form.skills.includes(id)) && !s.skills.every(id => form.skills.includes(id)) && h('div', { className: 'badge badge-warning', style: { marginTop: 6, fontSize: 10 } }, s.skills.filter(id => form.skills.includes(id)).length + '/' + s.skills.length + ' selected')
-                  )
-                ))
-              ),
-
-              // Search bar for filtering individual skills
-              h('div', { style: { marginBottom: 14 } },
-                h('input', { className: 'input', type: 'text', placeholder: 'Search skills...', value: skillSearch, onChange: e => setSkillSearch(e.target.value), style: { maxWidth: 300 } })
-              ),
-
-              // Individual skills by category
-              Object.entries(allSkills).map(([cat, skills]) => {
-                const filtered = skillSearch ? skills.filter(s => s.name.toLowerCase().includes(skillSearch.toLowerCase()) || s.description.toLowerCase().includes(skillSearch.toLowerCase())) : skills;
-                if (filtered.length === 0) return null;
-                return h('div', { key: cat, style: { marginBottom: 20 } },
-                  h('h4', { style: { fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--text-muted)', marginBottom: 8 } }, cat.replace(/-/g, ' ')),
-                  h('div', { className: 'skill-grid' }, filtered.map(s =>
-                    h('div', { key: s.id, className: 'skill-card' + (form.skills.includes(s.id) ? ' selected' : ''), onClick: () => toggleSkill(s.id) },
-                      h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
-                        h('span', { className: 'skill-name' }, (s.icon || '') + ' ' + s.name),
-                        form.skills.includes(s.id) && h('span', { style: { color: 'var(--accent)' } }, I.check())
-                      ),
-                      h('div', { className: 'skill-desc' }, s.description)
-                    )
-                  ))
-                );
-              })
-            ),
-
-            // Step 4: Permissions
-            step === 4 && h(Fragment, null,
-              h('h3', { style: { fontSize: 15, fontWeight: 700, marginBottom: 4 } }, 'Permissions & Security'),
-              h('p', { style: { color: 'var(--text-secondary)', marginBottom: 16, fontSize: 13 } }, 'Start with a preset, then fine-tune individual controls below.'),
-
-              // Preset cards
-              h('div', { className: 'preset-grid' }, presets.map(p =>
-                h('div', { key: p.name, className: 'preset-card' + (form.preset === p.name ? ' selected' : ''), onClick: () => {
-                  if (form.preset === p.name) { set('preset', null); return; }
-                  setForm(f => ({ ...f, preset: p.name, maxRiskLevel: p.maxRiskLevel || 'medium', blockedSideEffects: p.blockedSideEffects || [], approvalRequired: p.requireApproval?.enabled ?? true, approvalForRiskLevels: p.requireApproval?.forRiskLevels || ['high', 'critical'], approvalForSideEffects: p.requireApproval?.forSideEffects || [], rateLimits: p.rateLimits || f.rateLimits, constraints: p.constraints || f.constraints }));
-                } },
-                  h('h4', null, p.name),
-                  h('p', null, p.description),
-                  p.maxRiskLevel && h('div', { style: { marginTop: 6 } }, h('span', { className: 'badge badge-' + (p.maxRiskLevel === 'low' ? 'success' : p.maxRiskLevel === 'medium' ? 'warning' : 'danger') }, 'Risk: ' + p.maxRiskLevel))
-                )
-              )),
-
-              // Max Risk Level
-              h('div', { style: { marginTop: 24 } },
-                h('h4', { style: { fontSize: 13, fontWeight: 600, marginBottom: 8 } }, 'Maximum Risk Level'),
-                h('p', { style: { fontSize: 12, color: 'var(--text-muted)', marginBottom: 10 } }, 'The highest risk level of tools this agent is allowed to use.'),
-                h('div', { style: { display: 'flex', gap: 8 } },
-                  ['low', 'medium', 'high', 'critical'].map(level =>
-                    h('button', { key: level, className: 'btn' + (form.maxRiskLevel === level ? ' btn-primary' : ' btn-secondary'), onClick: () => set('maxRiskLevel', level), style: { textTransform: 'capitalize' } }, level)
-                  )
-                )
-              ),
-
-              // Blocked Side Effects
-              h('div', { style: { marginTop: 20 } },
-                h('h4', { style: { fontSize: 13, fontWeight: 600, marginBottom: 8 } }, 'Blocked Side Effects'),
-                h('p', { style: { fontSize: 12, color: 'var(--text-muted)', marginBottom: 10 } }, 'Actions this agent is never allowed to perform, regardless of tool permissions.'),
-                h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 6 } },
-                  [
-                    { id: 'sends-email', label: 'Send Emails' },
-                    { id: 'sends-message', label: 'Send Messages' },
-                    { id: 'sends-sms', label: 'Send SMS' },
-                    { id: 'posts-social', label: 'Post to Social Media' },
-                    { id: 'runs-code', label: 'Execute Code' },
-                    { id: 'modifies-files', label: 'Modify Files' },
-                    { id: 'deletes-data', label: 'Delete Data' },
-                    { id: 'controls-device', label: 'Control Devices' },
-                    { id: 'financial', label: 'Financial Actions' },
-                  ].map(se =>
-                    h('label', { key: se.id, style: { display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, padding: '6px 8px', borderRadius: 'var(--radius)', background: form.blockedSideEffects.includes(se.id) ? 'var(--danger-soft, rgba(239,68,68,0.08))' : 'var(--bg-tertiary)', cursor: 'pointer', border: '1px solid ' + (form.blockedSideEffects.includes(se.id) ? 'var(--danger)' : 'transparent') } },
-                      h('input', { type: 'checkbox', checked: form.blockedSideEffects.includes(se.id), onChange: () => {
-                        const cur = form.blockedSideEffects;
-                        set('blockedSideEffects', cur.includes(se.id) ? cur.filter(x => x !== se.id) : [...cur, se.id]);
-                      }, style: { accentColor: 'var(--danger)' } }),
-                      se.label
-                    )
-                  )
-                )
-              ),
-
-              // Approval Settings
-              h('div', { style: { marginTop: 20 } },
-                h('h4', { style: { fontSize: 13, fontWeight: 600, marginBottom: 8 } }, 'Approval Requirements'),
-                h('div', { style: { display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 } },
-                  h('div', { className: 'toggle' + (form.approvalRequired ? ' on' : ''), onClick: () => set('approvalRequired', !form.approvalRequired) }),
-                  h('div', null,
-                    h('div', { style: { fontWeight: 500, fontSize: 12 } }, 'Require human approval for sensitive actions'),
-                    h('div', { style: { fontSize: 11, color: 'var(--text-muted)' } }, 'Agent pauses and waits for approval before executing flagged operations')
-                  )
-                ),
-                form.approvalRequired && h(Fragment, null,
-                  h('div', { style: { marginLeft: 4, paddingLeft: 16, borderLeft: '2px solid var(--border)' } },
-                    h('div', { style: { marginBottom: 10 } },
-                      h('div', { style: { fontSize: 12, fontWeight: 500, marginBottom: 6 } }, 'Require approval for risk levels:'),
-                      h('div', { style: { display: 'flex', gap: 6 } },
-                        ['low', 'medium', 'high', 'critical'].map(level =>
-                          h('label', { key: level, style: { display: 'flex', alignItems: 'center', gap: 4, fontSize: 11, padding: '4px 8px', borderRadius: 'var(--radius)', background: form.approvalForRiskLevels.includes(level) ? 'var(--accent-soft)' : 'var(--bg-tertiary)', cursor: 'pointer', textTransform: 'capitalize' } },
-                            h('input', { type: 'checkbox', checked: form.approvalForRiskLevels.includes(level), onChange: () => {
-                              const cur = form.approvalForRiskLevels;
-                              set('approvalForRiskLevels', cur.includes(level) ? cur.filter(x => x !== level) : [...cur, level]);
-                            } }),
-                            level
-                          )
-                        )
-                      )
-                    ),
-                    h('div', null,
-                      h('div', { style: { fontSize: 12, fontWeight: 500, marginBottom: 6 } }, 'Require approval for side effects:'),
-                      h('div', { style: { display: 'flex', gap: 6, flexWrap: 'wrap' } },
-                        ['sends-email', 'sends-message', 'sends-sms', 'posts-social', 'runs-code', 'financial'].map(se =>
-                          h('label', { key: se, style: { display: 'flex', alignItems: 'center', gap: 4, fontSize: 11, padding: '4px 8px', borderRadius: 'var(--radius)', background: form.approvalForSideEffects.includes(se) ? 'var(--accent-soft)' : 'var(--bg-tertiary)', cursor: 'pointer' } },
-                            h('input', { type: 'checkbox', checked: form.approvalForSideEffects.includes(se), onChange: () => {
-                              const cur = form.approvalForSideEffects;
-                              set('approvalForSideEffects', cur.includes(se) ? cur.filter(x => x !== se) : [...cur, se]);
-                            } }),
-                            se.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase())
-                          )
-                        )
-                      )
-                    )
-                  )
-                )
-              ),
-
-              // Rate Limits
-              h('div', { style: { marginTop: 20 } },
-                h('h4', { style: { fontSize: 13, fontWeight: 600, marginBottom: 8 } }, 'Rate Limits'),
-                h('p', { style: { fontSize: 12, color: 'var(--text-muted)', marginBottom: 10 } }, 'Maximum number of tool calls the agent can make within each time window.'),
-                h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 } },
-                  [
-                    { key: 'toolCallsPerMinute', label: 'Calls / Minute' },
-                    { key: 'toolCallsPerHour', label: 'Calls / Hour' },
-                    { key: 'toolCallsPerDay', label: 'Calls / Day' },
-                    { key: 'externalActionsPerHour', label: 'External Actions / Hour' },
-                  ].map(rl =>
-                    h('div', { key: rl.key, className: 'form-group' },
-                      h('label', { style: { fontSize: 11, fontWeight: 500, color: 'var(--text-secondary)', display: 'block', marginBottom: 4 } }, rl.label),
-                      h('input', { className: 'input', type: 'number', min: 0, value: form.rateLimits[rl.key], onChange: e => setForm(f => ({ ...f, rateLimits: { ...f.rateLimits, [rl.key]: parseInt(e.target.value) || 0 } })), style: { fontSize: 12 } })
-                    )
-                  )
-                )
-              ),
-
-              // Constraints
-              h('div', { style: { marginTop: 20 } },
-                h('h4', { style: { fontSize: 13, fontWeight: 600, marginBottom: 8 } }, 'Execution Constraints'),
-                h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 } },
-                  h('div', { className: 'form-group' },
-                    h('label', { style: { fontSize: 11, fontWeight: 500, color: 'var(--text-secondary)', display: 'block', marginBottom: 4 } }, 'Max Concurrent Tasks'),
-                    h('input', { className: 'input', type: 'number', min: 1, max: 50, value: form.constraints.maxConcurrentTasks, onChange: e => setForm(f => ({ ...f, constraints: { ...f.constraints, maxConcurrentTasks: parseInt(e.target.value) || 1 } })), style: { fontSize: 12 } })
-                  ),
-                  h('div', { className: 'form-group' },
-                    h('label', { style: { fontSize: 11, fontWeight: 500, color: 'var(--text-secondary)', display: 'block', marginBottom: 4 } }, 'Max Session (minutes)'),
-                    h('input', { className: 'input', type: 'number', min: 1, value: form.constraints.maxSessionDurationMinutes, onChange: e => setForm(f => ({ ...f, constraints: { ...f.constraints, maxSessionDurationMinutes: parseInt(e.target.value) || 60 } })), style: { fontSize: 12 } })
-                  ),
-                  h('div', { style: { display: 'flex', alignItems: 'center', gap: 8, paddingTop: 18 } },
-                    h('div', { className: 'toggle' + (form.constraints.sandboxMode ? ' on' : ''), onClick: () => setForm(f => ({ ...f, constraints: { ...f.constraints, sandboxMode: !f.constraints.sandboxMode } })) }),
-                    h('div', null,
-                      h('div', { style: { fontWeight: 500, fontSize: 12 } }, 'Sandbox Mode'),
-                      h('div', { style: { fontSize: 11, color: 'var(--text-muted)' } }, 'Simulate actions only')
-                    )
-                  )
-                )
-              )
-            ),
-
-            // Step 5: Deployment
-            step === 5 && h(Fragment, null,
-              h('h3', { style: { fontSize: 15, fontWeight: 700, marginBottom: 4 } }, 'Deployment Target'),
-              h('p', { style: { color: 'var(--text-secondary)', marginBottom: 16, fontSize: 13 } }, 'Choose where and how this agent will run.'),
-              h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 } },
-                ['fly', 'docker', 'railway', 'vps', 'local'].map(t =>
-                  h('div', { key: t, className: 'preset-card' + (form.deployTarget === t ? ' selected' : ''), onClick: () => set('deployTarget', t), style: { padding: '16px 18px' } },
-                    h('h4', { style: { marginBottom: 6 } }, { fly: 'Fly.io', docker: 'Docker Container', railway: 'Railway', vps: 'VPS / Dedicated Server', local: 'Local Machine' }[t]),
-                    h('p', null, { fly: 'Deploy to Fly.io with auto-scaling, TLS, and health checks. Recommended for production.', docker: 'Run in an isolated Docker container with resource limits.', railway: 'Deploy to Railway with zero-config builds and auto-deploys.', vps: 'Deploy to a VPS or dedicated server via SSH. Full control.', local: 'Run on the current machine. Best for development and testing.' }[t])
-                  )
-                )
-              )
-            ),
-
-            // Step 6: Review
-            step === 6 && h(Fragment, null,
-              h('h3', { style: { fontSize: 15, fontWeight: 700, marginBottom: 4 } }, 'Review & Create'),
-              h('p', { style: { color: 'var(--text-secondary)', marginBottom: 20, fontSize: 13 } }, 'Review your agent configuration before creating.'),
-
-              // Agent identity card
-              h('div', { style: { background: 'var(--bg-tertiary)', borderRadius: 'var(--radius-lg)', padding: 24, display: 'flex', gap: 20, alignItems: 'flex-start' } },
-                // Avatar
-                h('div', { style: { width: 64, height: 64, borderRadius: '50%', background: 'var(--accent)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 24, flexShrink: 0, overflow: 'hidden' } },
-                  form.avatar ? h('img', { src: form.avatar, style: { width: '100%', height: '100%', objectFit: 'cover' } }) : (form.name ? form.name.charAt(0).toUpperCase() : '?')
-                ),
-                h('div', { style: { flex: 1 } },
-                  h('div', { style: { display: 'grid', gridTemplateColumns: '140px 1fr', gap: '10px 20px', fontSize: 13 } },
-                    h('span', { style: { color: 'var(--text-muted)' } }, 'Name'), h('span', { style: { fontWeight: 600 } }, form.name),
-                    h('span', { style: { color: 'var(--text-muted)' } }, 'Email'), h('span', null, form.email || form.name.toLowerCase().replace(/\s+/g, '.') + '@agenticmail.local'),
-                    form.soulId && h(Fragment, null, h('span', { style: { color: 'var(--text-muted)' } }, 'Role Template'), h('span', null, h('span', { className: 'badge badge-primary' }, form.soulId.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase())))),
-                    h('span', { style: { color: 'var(--text-muted)' } }, 'Role'), h('span', null, form.role),
-                    h('span', { style: { color: 'var(--text-muted)' } }, 'Provider'), h('span', null, (form.provider || 'anthropic').charAt(0).toUpperCase() + (form.provider || 'anthropic').slice(1)),
-                    h('span', { style: { color: 'var(--text-muted)' } }, 'Model'), h('span', null, form.model),
-                    // Persona fields
-                    form.gender && h(Fragment, null, h('span', { style: { color: 'var(--text-muted)' } }, 'Gender'), h('span', null, form.gender.charAt(0).toUpperCase() + form.gender.slice(1))),
-                    form.dateOfBirth && (() => {
-                      const dob = new Date(form.dateOfBirth);
-                      const today = new Date();
-                      let age = today.getFullYear() - dob.getFullYear();
-                      const m = today.getMonth() - dob.getMonth();
-                      if (m < 0 || (m === 0 && today.getDate() < dob.getDate())) age--;
-                      return h(Fragment, null,
-                        h('span', { style: { color: 'var(--text-muted)' } }, 'Date of Birth'), h('span', null, dob.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }) + ' (' + age + ' years old)')
-                      );
-                    })(),
-                    form.maritalStatus && h(Fragment, null, h('span', { style: { color: 'var(--text-muted)' } }, 'Marital Status'), h('span', null, form.maritalStatus.charAt(0).toUpperCase() + form.maritalStatus.slice(1))),
-                    form.culturalBackground && h(Fragment, null, h('span', { style: { color: 'var(--text-muted)' } }, 'Background'), h('span', null, CULTURES.find(c => c.id === form.culturalBackground)?.name || form.culturalBackground)),
-                    h('span', { style: { color: 'var(--text-muted)' } }, 'Language'), h('span', null, getLanguageName(form.language)),
-                    h('span', { style: { color: 'var(--text-muted)' } }, 'Traits'), h('span', { style: { display: 'flex', flexWrap: 'wrap', gap: 4 } },
-                      h('span', { className: 'badge badge-neutral' }, form.traits.communication),
-                      h('span', { className: 'badge badge-neutral' }, form.traits.detail),
-                      h('span', { className: 'badge badge-neutral' }, form.traits.energy),
-                      h('span', { className: 'badge badge-neutral' }, form.traits.humor),
-                      h('span', { className: 'badge badge-neutral' }, form.traits.formality),
-                      h('span', { className: 'badge badge-neutral' }, form.traits.empathy),
-                      h('span', { className: 'badge badge-neutral' }, form.traits.patience),
-                      h('span', { className: 'badge badge-neutral' }, form.traits.creativity)
-                    ),
-                    h('span', { style: { color: 'var(--text-muted)' } }, 'Skills'), h('span', null, form.skills.length + ' selected'),
-                    h('span', { style: { color: 'var(--text-muted)' } }, 'Permission Preset'), h('span', null, form.preset || 'Custom'),
-                    h('span', { style: { color: 'var(--text-muted)' } }, 'Max Risk Level'), h('span', null, h('span', { className: 'badge badge-' + (form.maxRiskLevel === 'low' ? 'success' : form.maxRiskLevel === 'medium' ? 'warning' : 'danger'), style: { textTransform: 'capitalize' } }, form.maxRiskLevel)),
-                    h('span', { style: { color: 'var(--text-muted)' } }, 'Blocked Side Effects'), h('span', null, form.blockedSideEffects.length > 0 ? form.blockedSideEffects.length + ' blocked' : 'None'),
-                    h('span', { style: { color: 'var(--text-muted)' } }, 'Approvals'), h('span', null, form.approvalRequired ? 'Required (risk: ' + form.approvalForRiskLevels.join(', ') + ')' : 'Not required'),
-                    h('span', { style: { color: 'var(--text-muted)' } }, 'Rate Limits'), h('span', null, form.rateLimits.toolCallsPerMinute + '/min, ' + form.rateLimits.toolCallsPerHour + '/hr, ' + form.rateLimits.toolCallsPerDay + '/day'),
-                    h('span', { style: { color: 'var(--text-muted)' } }, 'Constraints'), h('span', null, form.constraints.maxConcurrentTasks + ' tasks, ' + form.constraints.maxSessionDurationMinutes + 'min max' + (form.constraints.sandboxMode ? ', sandbox' : '')),
-                    h('span', { style: { color: 'var(--text-muted)' } }, 'Deployment'), h('span', null, { fly: 'Fly.io', docker: 'Docker Container', railway: 'Railway', vps: 'VPS / Dedicated Server', local: 'Local Machine' }[form.deployTarget] || form.deployTarget),
-                    h('span', { style: { color: 'var(--text-muted)' } }, 'Onboarding'), h('span', null, form.autoOnboard ? h('span', { className: 'badge badge-success' }, 'Auto-start') : h('span', { className: 'badge badge-neutral' }, 'Manual'))
-                  )
-                )
-              ),
-              form.description && h('div', { style: { marginTop: 14, fontSize: 13, color: 'var(--text-secondary)', padding: '12px 16px', background: 'var(--bg-tertiary)', borderRadius: 'var(--radius)' } }, h('strong', null, 'Description: '), form.description),
-
-              // Onboarding toggle
-              h('div', { style: { marginTop: 20, padding: '16px 20px', background: 'var(--bg-tertiary)', borderRadius: 'var(--radius-lg)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' } },
-                h('div', null,
-                  h('div', { style: { fontWeight: 600, fontSize: 14 } }, 'Start Onboarding Immediately'),
-                  h('p', { style: { fontSize: 12, color: 'var(--text-muted)', margin: '4px 0 0' } }, form.autoOnboard ? 'Agent will go through all compliance policies and guardrails pipeline after creation.' : 'You can manually trigger onboarding later from the Guardrails page.')
-                ),
-                h('label', { style: { position: 'relative', display: 'inline-block', width: 44, height: 24, flexShrink: 0, cursor: 'pointer' } },
-                  h('input', { type: 'checkbox', checked: form.autoOnboard, onChange: e => set('autoOnboard', e.target.checked), style: { opacity: 0, width: 0, height: 0 } }),
-                  h('span', { style: { position: 'absolute', inset: 0, borderRadius: 12, background: form.autoOnboard ? 'var(--accent)' : 'var(--border)', transition: 'background 0.2s' } },
-                    h('span', { style: { position: 'absolute', top: 2, left: form.autoOnboard ? 22 : 2, width: 20, height: 20, borderRadius: '50%', background: '#fff', transition: 'left 0.2s', boxShadow: '0 1px 3px rgba(0,0,0,0.2)' } })
-                  )
-                )
-              )
-            )
-          )
-        )
-      ),
-      h('div', { className: 'modal-footer' },
-        step > 0 && h('button', { className: 'btn btn-secondary', onClick: () => setStep(step - 1) }, 'Back'),
-        step === 0 && !form.soulId && h('button', { className: 'btn btn-ghost', onClick: () => setStep(1) }, 'Skip — Configure Manually'),
-        h('button', { className: 'btn btn-ghost', onClick: saveDraft, style: { fontSize: 12 } }, draftSaved ? '\u2713 Draft Saved' : 'Save Draft'),
-        h('div', { style: { flex: 1 } }),
-        step < lastStep && h('button', { className: 'btn btn-primary', disabled: !canNext(), onClick: () => setStep(step + 1) }, 'Next'),
-        step === lastStep && h('button', { className: 'btn btn-primary', disabled: loading, onClick: doCreate }, loading ? 'Creating...' : 'Create Agent')
-      )
-    )
-  );
-}
-
-// ════════════════════════════════════════════════════════════
-// AGENTS PAGE
-// ════════════════════════════════════════════════════════════
-
-export function AgentsPage({ onSelectAgent }) {
-  const app = useApp();
-  const toast = app.toast;
-  var orgCtx = useOrgContext();
-  const [agents, setAgents] = useState([]);
-  const [creating, setCreating] = useState(false);
-  const [liveStatuses, setLiveStatuses] = useState({});
-
-  // Subscribe to real-time agent status
-  useEffect(function() {
-    var es = new EventSource('/api/engine/agent-status-stream');
-    es.onmessage = function(ev) {
-      try {
-        var d = JSON.parse(ev.data);
-        if (d.type === 'status' && d.agentId) {
-          setLiveStatuses(function(prev) {
-            var next = Object.assign({}, prev);
-            next[d.agentId] = d;
-            return next;
-          });
-        }
-      } catch(e) {}
-    };
-    return function() { es.close(); };
-  }, []);
-
-  const perms = app.permissions || '*';
-  const allowedAgents = perms === '*' ? '*' : (perms._allowedAgents || '*');
-
-  const load = () => apiCall('/agents').then(d => {
-    console.log('[agents] response type:', typeof d, 'keys:', d ? Object.keys(d) : 'null', 'agents type:', typeof d?.agents);
-    var all = Array.isArray(d?.agents) ? d.agents : Array.isArray(d) ? d : [];
-    if (allowedAgents !== '*' && Array.isArray(allowedAgents)) {
-      all = all.filter(a => allowedAgents.indexOf(a.id) >= 0);
-    }
-    // Filter by selected org context
-    if (orgCtx.selectedOrgId) {
-      all = all.filter(a => a.client_org_id === orgCtx.selectedOrgId);
-    }
-    setAgents(all);
-  }).catch(() => {});
-  useEffect(() => { load(); }, [orgCtx.selectedOrgId]);
-
-  // Delete moved to agent detail overview tab with triple confirmation
-
-  var _h4 = { marginTop: 16, marginBottom: 8, fontSize: 14 };
-  var _ul = { paddingLeft: 20, margin: '4px 0 8px' };
-  var _tip = { marginTop: 12, padding: 12, background: 'var(--bg-secondary, #1e293b)', borderRadius: 'var(--radius, 8px)', fontSize: 13 };
-
-  return h(Fragment, null,
-    h(orgCtx.Switcher),
-    h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 } },
-      h('div', null, h('h1', { style: { fontSize: 20, fontWeight: 700, display: 'flex', alignItems: 'center' } }, 'Agents', h(KnowledgeLink, { page: 'agents' }), h(HelpButton, { label: 'Agents' },
-        h('p', null, 'Your AI workforce. Each agent has its own email identity, personality, skills, permissions, and deployment target.'),
-        h('h4', { style: _h4 }, 'Agent lifecycle'),
-        h('ul', { style: _ul },
-          h('li', null, h('strong', null, 'Create'), ' — Use the wizard to pick a role template, configure skills and permissions.'),
-          h('li', null, h('strong', null, 'Deploy'), ' — Send the agent to Fly.io, Docker, Railway, VPS, or run locally.'),
-          h('li', null, h('strong', null, 'Monitor'), ' — Click any agent to see their activity, emails, sessions, and journal.')
-        ),
-        h('div', { style: _tip }, h('strong', null, 'Tip: '), 'Click an agent\'s name to access their full detail page with logs, email, workforce schedule, and more.')
-      )), h('p', { style: { color: 'var(--text-muted)', fontSize: 13 } }, 'Manage your AI agents — create, configure, deploy, and monitor')),
-      h('button', { className: 'btn btn-primary', onClick: () => setCreating(true) }, I.plus(), ' Create Agent')
-    ),
-    creating && h(CreateAgentWizard, { onClose: () => setCreating(false), onCreated: load, toast }),
-    agents.length === 0
-      ? h('div', { className: 'card' }, h('div', { className: 'card-body' },
-          h('div', { className: 'empty-state' },
-            I.agents(),
-            h('h3', null, 'No agents yet'),
-            h('p', null, 'Create your first agent to give it an email identity, skills, and deploy it to start working autonomously.'),
-            h('button', { className: 'btn btn-primary', onClick: () => setCreating(true) }, I.plus(), ' Create Your First Agent')
-          )
-        ))
-      : h('div', { className: 'card' },
-          h('div', { className: 'card-body-flush' },
-            h('table', null,
-              h('thead', null, h('tr', null, h('th', null, 'Name'), h('th', null, 'Email'), h('th', null, 'Role'), h('th', null, 'Status'), h('th', null, 'Created'), h('th', { style: { width: 180 } }, 'Actions'))),
-              h('tbody', null, agents.map(a =>
-                h('tr', { key: a.id },
-                  h('td', null, h('strong', { style: { cursor: 'pointer', color: 'var(--accent-text)' }, onClick: () => onSelectAgent && onSelectAgent(a.id) }, a.name)),
-                  h('td', null, h('span', { style: { fontFamily: 'var(--font-mono)', fontSize: 12 } }, a.email || '-')),
-                  h('td', null, h('span', { className: 'badge badge-neutral' }, a.role || 'agent')),
-                  h('td', null, (function() {
-                    var live = liveStatuses[a.id];
-                    var st = live ? live.status : null;
-                    var label = st === 'online' ? 'running' : st === 'idle' ? 'idle' : st === 'offline' ? 'stopped' : st === 'error' ? 'error' : (a.status || 'active');
-                    var color = { running: 'success', idle: 'info', stopped: 'neutral', error: 'danger', active: 'success', archived: 'neutral' }[label] || 'warning';
-                    var activity = live && live.currentActivity ? live.currentActivity.detail || live.currentActivity.type : null;
-                    return h(Fragment, null,
-                      h('span', { className: 'badge badge-' + color, style: { textTransform: 'capitalize' } }, label),
-                      activity && h('span', { style: { fontSize: 10, color: 'var(--text-muted)', marginLeft: 6, fontStyle: 'italic' } }, activity)
-                    );
-                  })()),
-                  h('td', { style: { fontSize: 12, color: 'var(--text-muted)' } }, a.createdAt ? new Date(a.createdAt).toLocaleDateString() : '-'),
-                  h('td', null,
-                    h('div', { style: { display: 'flex', gap: 4 } },
-                      h('button', { className: 'btn btn-primary btn-sm', onClick: () => onSelectAgent && onSelectAgent(a.id) }, 'View Details'),
-                      h('button', { className: 'btn btn-ghost btn-sm', title: 'Restart', onClick: () => engineCall('/agents/' + a.id + '/restart', { method: 'POST', body: JSON.stringify({ restartedBy: 'dashboard' }) }).then(() => toast('Restarting...', 'info')).catch(e => toast(e.message, 'error')) }, I.refresh())
-                    )
-                  )
-                )
-              ))
-            )
-          )
-        )
-  );
-}
-
-// ════════════════════════════════════════════════════════════
-// AGENT DETAIL PAGE — Re-exported from agent-detail.js
-// ════════════════════════════════════════════════════════════
-
-export { AgentDetailPage } from './agent-detail/index.js?v=6';