@agenticmail/enterprise 0.5.30 → 0.5.32

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

@@ -2837,6 +2837,355 @@ function GuardrailsSection(props) {
   );
 }
 
+// ════════════════════════════════════════════════════════════
+// CONFIGURATION SECTION — Model, Description, Soul, General
+// ════════════════════════════════════════════════════════════
+
+function ConfigurationSection(props) {
+  var agentId = props.agentId;
+  var engineAgent = props.engineAgent;
+  var reload = props.reload;
+  var toast = useApp().toast;
+
+  var ea = engineAgent || {};
+  var config = ea.config || {};
+  var identity = config.identity || {};
+  var modelObj = typeof config.model === 'object' ? config.model : {};
+  var modelStr = typeof config.model === 'string' ? config.model : null;
+
+  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 _providers = useState([]);
+  var providers = _providers[0]; var setProviders = _providers[1];
+  var _providerModels = useState([]);
+  var providerModels = _providerModels[0]; var setProviderModels = _providerModels[1];
+
+  useEffect(function() {
+    apiCall('/providers').then(function(d) { setProviders(d.providers || []); }).catch(function() {});
+  }, []);
+
+  // Load models when provider changes in edit mode
+  useEffect(function() {
+    if (!editing || !form.provider) return;
+    apiCall('/providers/' + form.provider + '/models').then(function(d) {
+      setProviderModels(d.models || []);
+    }).catch(function() { setProviderModels([]); });
+  }, [editing, form.provider]);
+
+  var startEdit = function() {
+    setForm({
+      provider: modelObj.provider || '',
+      modelId: modelStr || modelObj.modelId || '',
+      thinkingLevel: modelObj.thinkingLevel || 'medium',
+      description: identity.description || config.description || '',
+      soulId: config.soulId || '',
+    });
+    setEditing(true);
+    // Trigger model load
+    if (modelObj.provider) {
+      apiCall('/providers/' + modelObj.provider + '/models').then(function(d) { setProviderModels(d.models || []); }).catch(function() {});
+    }
+  };
+
+  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 = {
+      model: { provider: form.provider, modelId: form.modelId, thinkingLevel: form.thinkingLevel },
+      description: form.description,
+      soulId: form.soulId || null,
+      identity: Object.assign({}, identity, { description: form.description }),
+    };
+    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('Configuration saved', 'success'); setEditing(false); setSaving(false); reload(); })
+      .catch(function(err) { toast('Failed to save: ' + err.message, 'error'); setSaving(false); });
+  };
+
+  var configuredProviders = providers.filter(function(p) { return p.configured; });
+
+  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 };
+
+  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 Configuration'),
+        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')
+        )
+      ),
+
+      // Model Settings
+      h('div', { className: 'card', style: { padding: 20, marginBottom: 20 } },
+        h('h4', { style: { margin: '0 0 16px', fontSize: 14, fontWeight: 600 } }, 'LLM Model'),
+        h('div', { style: rowStyle },
+          h('div', { style: fieldGroupStyle },
+            h('label', { style: labelStyle }, 'Provider'),
+            h('select', { style: Object.assign({}, inputStyle, { cursor: 'pointer' }), value: form.provider, onChange: function(e) {
+              set('provider', e.target.value);
+              // Reset model when provider changes
+              set('modelId', '');
+            } },
+              h('option', { value: '' }, '-- Select provider --'),
+              configuredProviders.length > 0
+                ? configuredProviders.map(function(p) { return h('option', { key: p.id, value: p.id }, p.name + (p.isLocal ? ' (Local)' : '')); })
+                : providers.map(function(p) { return h('option', { key: p.id, value: p.id }, p.name); })
+            )
+          ),
+          h('div', { style: fieldGroupStyle },
+            h('label', { style: labelStyle }, 'Model'),
+            providerModels.length > 0
+              ? h('select', { style: Object.assign({}, inputStyle, { cursor: 'pointer' }), value: form.modelId, onChange: function(e) { set('modelId', e.target.value); } },
+                  h('option', { value: '' }, '-- Select model --'),
+                  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', { style: inputStyle, value: form.modelId, onChange: function(e) { set('modelId', e.target.value); }, placeholder: 'Enter model ID' })
+          )
+        ),
+        h('div', { style: rowStyle },
+          h('div', { style: fieldGroupStyle },
+            h('label', { style: labelStyle }, 'Thinking Level'),
+            h('select', { style: Object.assign({}, inputStyle, { cursor: 'pointer' }), value: form.thinkingLevel, onChange: function(e) { set('thinkingLevel', e.target.value); } },
+              h('option', { value: 'none' }, 'None'),
+              h('option', { value: 'low' }, 'Low'),
+              h('option', { value: 'medium' }, 'Medium'),
+              h('option', { value: 'high' }, 'High')
+            )
+          ),
+          form.modelId === '_custom' && h('div', { style: fieldGroupStyle },
+            h('label', { style: labelStyle }, 'Custom Model ID'),
+            h('input', { style: inputStyle, value: form.customModelId || '', onChange: function(e) { set('customModelId', e.target.value); }, placeholder: 'my-fine-tuned-model-v2' })
+          )
+        )
+      ),
+
+      // Description
+      h('div', { className: 'card', style: { padding: 20, marginBottom: 20 } },
+        h('h4', { style: { margin: '0 0 16px', fontSize: 14, fontWeight: 600 } }, 'Description'),
+        h('div', { style: fieldGroupStyle },
+          h('label', { style: labelStyle }, 'Agent Description'),
+          h('textarea', { style: Object.assign({}, inputStyle, { minHeight: 80, resize: 'vertical' }), value: form.description, onChange: function(e) { set('description', e.target.value); }, placeholder: 'What does this agent do? What are its responsibilities?' })
+        )
+      ),
+
+      // Soul ID
+      config.soulId && h('div', { className: 'card', style: { padding: 20 } },
+        h('h4', { style: { margin: '0 0 16px', fontSize: 14, fontWeight: 600 } }, 'Role Template'),
+        h('div', { style: fieldGroupStyle },
+          h('label', { style: labelStyle }, 'Soul Template ID'),
+          h('input', { style: inputStyle, value: form.soulId || '', onChange: function(e) { set('soulId', e.target.value); } })
+        )
+      )
+    );
+  }
+
+  // View mode
+  var displayProvider = modelObj.provider || 'Not set';
+  var displayModel = modelStr || modelObj.modelId || 'Not set';
+  var displayThinking = modelObj.thinkingLevel || 'medium';
+  var displayDescription = identity.description || config.description || '';
+  var displaySoulId = config.soulId || '';
+
+  var fieldView = function(label, value) {
+    return h('div', { style: fieldGroupStyle },
+      h('div', { style: labelStyle }, label),
+      h('div', { style: { fontSize: 14, color: 'var(--text-primary)' } }, value || '\u2014')
+    );
+  };
+
+  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 } }, 'Configuration'),
+      h('button', { className: 'btn btn-primary btn-sm', onClick: startEdit }, I.journal(), ' Edit Configuration')
+    ),
+
+    // Model Card
+    h('div', { className: 'card', style: { padding: 20, marginBottom: 20 } },
+      h('h4', { style: { margin: '0 0 16px', fontSize: 14, fontWeight: 600 } }, 'LLM Model'),
+      h('div', { style: rowStyle },
+        fieldView('Provider', h('span', { style: { textTransform: 'capitalize' } }, displayProvider)),
+        fieldView('Model ID', h('span', { style: { fontFamily: 'var(--font-mono, monospace)', fontSize: 13 } }, displayModel))
+      ),
+      h('div', { style: rowStyle },
+        fieldView('Thinking Level', h('span', { className: 'badge badge-' + (displayThinking === 'high' ? 'primary' : displayThinking === 'medium' ? 'info' : displayThinking === 'low' ? 'neutral' : 'neutral'), style: { textTransform: 'capitalize' } }, displayThinking)),
+        h('div')
+      )
+    ),
+
+    // Description Card
+    h('div', { className: 'card', style: { padding: 20, marginBottom: 20 } },
+      h('h4', { style: { margin: '0 0 16px', fontSize: 14, fontWeight: 600 } }, 'Description'),
+      h('div', { style: { fontSize: 14, color: displayDescription ? 'var(--text-primary)' : 'var(--text-muted)', lineHeight: 1.6 } }, displayDescription || 'No description set.')
+    ),
+
+    // Soul Template Card
+    displaySoulId && h('div', { className: 'card', style: { padding: 20 } },
+      h('h4', { style: { margin: '0 0 16px', fontSize: 14, fontWeight: 600 } }, 'Role Template'),
+      h('span', { className: 'badge badge-primary' }, displaySoulId.replace(/-/g, ' ').replace(/\b\w/g, function(c) { return c.toUpperCase(); }))
+    )
+  );
+}
+
+// ════════════════════════════════════════════════════════════
+// SKILLS SECTION — View and manage agent skills
+// ════════════════════════════════════════════════════════════
+
+function SkillsSection(props) {
+  var agentId = props.agentId;
+  var engineAgent = props.engineAgent;
+  var reload = props.reload;
+  var toast = useApp().toast;
+
+  var ea = engineAgent || {};
+  var config = ea.config || {};
+  var currentSkills = Array.isArray(config.skills) ? config.skills : [];
+
+  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 _selectedSkills = useState(currentSkills);
+  var selectedSkills = _selectedSkills[0]; var setSelectedSkills = _selectedSkills[1];
+  var _allSkills = useState({});
+  var allSkills = _allSkills[0]; var setAllSkills = _allSkills[1];
+  var _suites = useState([]);
+  var suites = _suites[0]; var setSuites = _suites[1];
+  var _skillSearch = useState('');
+  var skillSearch = _skillSearch[0]; var setSkillSearch = _skillSearch[1];
+
+  useEffect(function() {
+    engineCall('/skills/by-category').then(function(d) { setAllSkills(d.categories || {}); }).catch(function() {});
+    engineCall('/skills/suites').then(function(d) { setSuites(d.suites || []); }).catch(function() {});
+  }, []);
+
+  // Reset selected skills when entering edit mode
+  var startEdit = function() {
+    setSelectedSkills(Array.isArray(config.skills) ? config.skills.slice() : []);
+    setEditing(true);
+  };
+
+  var toggleSkill = function(id) {
+    setSelectedSkills(function(prev) {
+      return prev.includes(id) ? prev.filter(function(s) { return s !== id; }) : prev.concat([id]);
+    });
+  };
+
+  var toggleSuite = function(suite) {
+    setSelectedSkills(function(prev) {
+      var allIn = suite.skills.every(function(id) { return prev.includes(id); });
+      if (allIn) return prev.filter(function(id) { return !suite.skills.includes(id); });
+      var merged = prev.slice();
+      suite.skills.forEach(function(id) { if (!merged.includes(id)) merged.push(id); });
+      return merged;
+    });
+  };
+
+  var save = function() {
+    setSaving(true);
+    var updates = { skills: selectedSkills };
+    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('Skills updated', 'success'); setEditing(false); setSaving(false); reload(); })
+      .catch(function(err) { toast('Failed to save: ' + err.message, 'error'); setSaving(false); });
+  };
+
+  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 Skills'),
+        h('div', { style: { display: 'flex', gap: 8 } },
+          h('span', { className: 'badge badge-primary' }, selectedSkills.length + ' selected'),
+          selectedSkills.length > 0 && h('button', { className: 'btn btn-ghost btn-sm', onClick: function() { setSelectedSkills([]); } }, 'Clear all'),
+          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 Skills')
+        )
+      ),
+
+      // Suites
+      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'),
+        h('div', { className: 'suite-grid' }, suites.map(function(s) {
+          var allIn = s.skills.every(function(id) { return selectedSkills.includes(id); });
+          var someIn = s.skills.some(function(id) { return selectedSkills.includes(id); });
+          return h('div', { key: s.id, className: 'suite-card' + (allIn ? ' selected' : someIn ? ' partial' : ''), onClick: function() { toggleSuite(s); }, style: { cursor: 'pointer' } },
+            h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 } },
+              h('span', { style: { fontSize: 20 } }, s.icon),
+              allIn && h('span', { style: { color: 'var(--accent)' } }, I.check())
+            ),
+            h('div', { className: 'suite-name' }, s.name),
+            h('div', { className: 'suite-desc' }, s.skills.length + ' apps')
+          );
+        }))
+      ),
+
+      // Search
+      h('div', { style: { marginBottom: 14 } },
+        h('input', { className: 'input', type: 'text', placeholder: 'Search skills...', value: skillSearch, onChange: function(e) { setSkillSearch(e.target.value); }, style: { maxWidth: 300 } })
+      ),
+
+      // Skills by category
+      Object.entries(allSkills).map(function(entry) {
+        var cat = entry[0]; var skills = entry[1];
+        var filtered = skillSearch ? skills.filter(function(s) { return 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(function(s) {
+            var isSelected = selectedSkills.includes(s.id);
+            return h('div', { key: s.id, className: 'skill-card' + (isSelected ? ' selected' : ''), onClick: function() { toggleSkill(s.id); }, style: { cursor: 'pointer' } },
+              h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
+                h('span', { className: 'skill-name' }, (s.icon || '') + ' ' + s.name),
+                isSelected && h('span', { style: { color: 'var(--accent)' } }, I.check())
+              ),
+              h('div', { className: 'skill-desc' }, s.description)
+            );
+          }))
+        );
+      })
+    );
+  }
+
+  // View mode
+  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 } }, 'Skills & Capabilities'),
+      h('div', { style: { display: 'flex', gap: 8, alignItems: 'center' } },
+        h('span', { className: 'badge badge-primary' }, currentSkills.length + ' skills'),
+        h('button', { className: 'btn btn-primary btn-sm', onClick: startEdit }, I.journal(), ' Edit Skills')
+      )
+    ),
+
+    currentSkills.length > 0
+      ? h('div', { className: 'card', style: { padding: 20 } },
+          h('div', { style: { display: 'flex', flexWrap: 'wrap', gap: 8 } },
+            currentSkills.map(function(skillId) {
+              return h('div', { key: skillId, style: { display: 'flex', alignItems: 'center', gap: 6, padding: '8px 14px', borderRadius: 8, background: 'var(--accent-soft)', border: '1px solid var(--accent)', fontSize: 13, fontWeight: 500, color: 'var(--accent-text)' } },
+                h('span', null, skillId.replace(/-/g, ' ').replace(/\b\w/g, function(c) { return c.toUpperCase(); }))
+              );
+            })
+          )
+        )
+      : h('div', { className: 'card', style: { padding: 40, textAlign: 'center' } },
+          h('div', { style: { color: 'var(--text-muted)', marginBottom: 12 } }, 'No skills assigned to this agent.'),
+          h('button', { className: 'btn btn-primary btn-sm', onClick: startEdit }, 'Add Skills')
+        )
+  );
+}
+
 // ════════════════════════════════════════════════════════════
 // DEPLOYMENT SECTION
 // ════════════════════════════════════════════════════════════
@@ -2882,6 +3231,57 @@ function DeploymentSection(props) {
   var deploymentTarget = deployment.target || config.deploymentTarget || '-';
   var modelDisplay = typeof config.model === 'string' ? config.model : (config.model ? (config.model.modelId || config.model.provider || '-') : '-');
 
+  // ─── Deployment Edit State ──────────────────────────────
+  var _editingDeploy = useState(false);
+  var editingDeploy = _editingDeploy[0]; var setEditingDeploy = _editingDeploy[1];
+  var _savingDeploy = useState(false);
+  var savingDeploy = _savingDeploy[0]; var setSavingDeploy = _savingDeploy[1];
+  var _deployForm = useState({});
+  var deployForm = _deployForm[0]; var setDeployForm = _deployForm[1];
+
+  var startDeployEdit = function() {
+    setDeployForm({
+      target: deployment.target || 'docker',
+      region: deployment.region || 'iad',
+      imageTag: (deployment.config?.docker?.tag) || deployment.imageTag || 'latest',
+      memory: (deployment.config?.docker?.memory) || deployment.memory || '512m',
+      cpu: (deployment.config?.docker?.cpu) || deployment.cpu || '0.5',
+      ports: (deployment.config?.docker?.ports || [3000]).join(', '),
+    });
+    setEditingDeploy(true);
+  };
+
+  var saveDeploy = function() {
+    setSavingDeploy(true);
+    var updates = {
+      deployment: {
+        target: deployForm.target,
+        region: deployForm.region,
+        imageTag: deployForm.imageTag,
+        memory: deployForm.memory,
+        cpu: deployForm.cpu,
+        config: {
+          docker: {
+            image: 'agenticmail/agent',
+            tag: deployForm.imageTag,
+            ports: deployForm.ports.split(',').map(function(p) { return parseInt(p.trim()) || 3000; }),
+            memory: deployForm.memory,
+            cpu: deployForm.cpu,
+            restart: 'unless-stopped',
+          }
+        }
+      }
+    };
+    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('Deployment config saved', 'success'); setEditingDeploy(false); setSavingDeploy(false); reload(); })
+      .catch(function(err) { toast('Failed to save: ' + err.message, 'error'); setSavingDeploy(false); });
+  };
+
+  var setDf = function(k, v) { setDeployForm(function(f) { var n = Object.assign({}, f); n[k] = v; return n; }); };
+
   // ─── Actions ────────────────────────────────────────────
 
   var deploy = function() {
@@ -2923,9 +3323,66 @@ function DeploymentSection(props) {
 
   return h(Fragment, null,
 
+    // ─── Deployment Edit Card ─────────────────────────────
+    editingDeploy && h('div', { className: 'card', style: { marginBottom: 20, border: '2px solid var(--accent)' } },
+      h('div', { className: 'card-header', style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
+        h('span', null, 'Edit Deployment Configuration'),
+        h('div', { style: { display: 'flex', gap: 8 } },
+          h('button', { className: 'btn btn-ghost btn-sm', onClick: function() { setEditingDeploy(false); } }, 'Cancel'),
+          h('button', { className: 'btn btn-primary btn-sm', disabled: savingDeploy, onClick: saveDeploy }, savingDeploy ? 'Saving...' : 'Save')
+        )
+      ),
+      h('div', { className: 'card-body' },
+        h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 16 } },
+          h('div', { className: 'form-group' },
+            h('label', { style: { display: 'block', fontSize: 12, fontWeight: 600, color: 'var(--text-secondary)', marginBottom: 4 } }, 'Target'),
+            h('select', { className: 'input', value: deployForm.target, onChange: function(e) { setDf('target', e.target.value); } },
+              h('option', { value: 'fly' }, 'Fly.io'),
+              h('option', { value: 'docker' }, 'Docker'),
+              h('option', { value: 'railway' }, 'Railway'),
+              h('option', { value: 'vps' }, 'VPS / Server'),
+              h('option', { value: 'local' }, 'Local')
+            )
+          ),
+          (deployForm.target === 'fly' || deployForm.target === 'railway') && h('div', { className: 'form-group' },
+            h('label', { style: { display: 'block', fontSize: 12, fontWeight: 600, color: 'var(--text-secondary)', marginBottom: 4 } }, 'Region'),
+            h('select', { className: 'input', value: deployForm.region, onChange: function(e) { setDf('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)')
+            )
+          )
+        ),
+        (deployForm.target === 'docker' || deployForm.target === 'fly') && h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 16 } },
+          h('div', { className: 'form-group' },
+            h('label', { style: { display: 'block', fontSize: 12, fontWeight: 600, color: 'var(--text-secondary)', marginBottom: 4 } }, 'Image Tag'),
+            h('input', { className: 'input', value: deployForm.imageTag, onChange: function(e) { setDf('imageTag', e.target.value); } })
+          ),
+          h('div', { className: 'form-group' },
+            h('label', { style: { display: 'block', fontSize: 12, fontWeight: 600, color: 'var(--text-secondary)', marginBottom: 4 } }, 'Memory'),
+            h('input', { className: 'input', value: deployForm.memory, onChange: function(e) { setDf('memory', e.target.value); }, placeholder: '512m' })
+          ),
+          h('div', { className: 'form-group' },
+            h('label', { style: { display: 'block', fontSize: 12, fontWeight: 600, color: 'var(--text-secondary)', marginBottom: 4 } }, 'CPU'),
+            h('input', { className: 'input', value: deployForm.cpu, onChange: function(e) { setDf('cpu', e.target.value); }, placeholder: '0.5' })
+          ),
+          h('div', { className: 'form-group' },
+            h('label', { style: { display: 'block', fontSize: 12, fontWeight: 600, color: 'var(--text-secondary)', marginBottom: 4 } }, 'Ports'),
+            h('input', { className: 'input', value: deployForm.ports, onChange: function(e) { setDf('ports', e.target.value); }, placeholder: '3000' })
+          )
+        )
+      )
+    ),
+
     // ─── Deployment Status Card ─────────────────────────
     h('div', { className: 'card', style: { marginBottom: 20 } },
-      h('div', { className: 'card-header' }, h('span', null, 'Deployment Status')),
+      h('div', { className: 'card-header', style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
+        h('span', null, 'Deployment Status'),
+        !editingDeploy && h('button', { className: 'btn btn-ghost btn-sm', onClick: startDeployEdit }, I.journal(), ' Edit')
+      ),
       h('div', { className: 'card-body' },
         h('div', { style: { display: 'flex', alignItems: 'center', gap: 16, marginBottom: 16, flexWrap: 'wrap' } },
           h('span', { className: 'status-dot ' + state }),
@@ -3440,7 +3897,7 @@ function AgentDetailPage(props) {
   var _agents = useState([]);
   var agents = _agents[0]; var setAgents = _agents[1];
 
-  var TABS = ['overview', 'personal', 'permissions', 'activity', 'communication', 'workforce', 'memory', 'guardrails', 'budget', 'tool-security', 'deployment'];
+  var TABS = ['overview', 'personal', 'configuration', 'skills', 'permissions', 'activity', 'communication', 'workforce', 'memory', 'guardrails', 'budget', 'tool-security', 'deployment'];
   var TAB_LABELS = { 'tool-security': 'Tool Security' };
 
   var load = function() {
@@ -3562,6 +4019,8 @@ function AgentDetailPage(props) {
     // ─── 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 === 'configuration' && h(ConfigurationSection, { agentId: agentId, engineAgent: engineAgent, reload: load }),
+    tab === 'skills' && h(SkillsSection, { agentId: agentId, engineAgent: engineAgent, reload: load }),
     tab === 'permissions' && h(PermissionsSection, { agentId: agentId, profile: profile, reload: load }),
     tab === 'activity' && h(ActivitySection, { agentId: agentId }),
     tab === 'communication' && h(CommunicationSection, { agentId: agentId, agents: agents }),

package/src/dashboard/pages/agents.js

@@ -447,8 +447,13 @@ export function CreateAgentWizard({ onClose, onCreated, toast }) {
         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,
@@ -470,6 +475,8 @@ export function CreateAgentWizard({ onClose, onCreated, toast }) {
           maritalStatus: form.maritalStatus || undefined,
           culturalBackground: form.culturalBackground || undefined,
           language: form.language,
+          personality: form.personality || undefined,
+          description: form.description || undefined,
           traits: form.traits,
         },
       }) });

package/src/engine/agent-routes.ts

@@ -209,7 +209,7 @@ export function createAgentRoutes(opts: {
    * Returns both IDs and the full agent object.
    */
   router.post('/bridge/agents', async (c) => {
-    const { orgId, name, email, displayName, role, model, deployment, permissionProfile, presetName, createdBy, persona, permissions: permissionsData } = await c.req.json();
+    const { orgId, name, email, displayName, role, model, deployment, permissionProfile, presetName, createdBy, persona, permissions: permissionsData, skills, knowledgeBases, description, soulId, deployTarget } = await c.req.json();
 
     if (!name || !orgId) {
       return c.json({ error: 'name and orgId are required' }, 400);
@@ -218,29 +218,43 @@ export function createAgentRoutes(opts: {
     const actor = c.req.header('X-User-Id') || createdBy || 'system';
     const agentId = crypto.randomUUID();
 
-    // Build the engine AgentConfig
+    // Build the engine AgentConfig — store EVERYTHING from the wizard
+    const agentEmail = email || `${name.toLowerCase().replace(/\s+/g, '-')}@agenticmail.local`;
+    const agentRole = role || 'assistant';
+    const agentDescription = description || persona?.description || '';
+
     const config: any = {
       id: agentId,
       name,
       displayName: displayName || name,
+      email: agentEmail,
+      role: agentRole,
+      description: agentDescription,
+      soulId: soulId || null,
       identity: {
-        role: role || 'assistant',
-        personality: 'professional',
-        ...(persona?.avatar && { avatar: persona.avatar }),
-        ...(persona?.gender && { gender: persona.gender }),
-        ...(persona?.dateOfBirth && { dateOfBirth: persona.dateOfBirth }),
-        ...(persona?.maritalStatus && { maritalStatus: persona.maritalStatus }),
-        ...(persona?.culturalBackground && { culturalBackground: persona.culturalBackground }),
-        ...(persona?.language && { language: persona.language }),
-        ...(persona?.traits && { traits: persona.traits }),
+        name,
+        displayName: displayName || name,
+        email: agentEmail,
+        role: agentRole,
+        personality: persona?.personality || 'professional',
+        description: agentDescription,
+        avatar: persona?.avatar || null,
+        gender: persona?.gender || '',
+        dateOfBirth: persona?.dateOfBirth || '',
+        maritalStatus: persona?.maritalStatus || '',
+        culturalBackground: persona?.culturalBackground || '',
+        language: persona?.language || 'en-us',
+        traits: persona?.traits || {},
       },
       model: model || {
         provider: 'anthropic',
         modelId: 'claude-sonnet-4-5-20250929',
         thinkingLevel: 'medium',
       },
+      skills: Array.isArray(skills) ? skills : [],
+      knowledgeBases: Array.isArray(knowledgeBases) ? knowledgeBases : [],
       deployment: deployment || {
-        target: 'docker',
+        target: deployTarget || 'docker',
         config: { docker: { image: 'agenticmail/agent', tag: 'latest', ports: [3000], env: {}, volumes: [], restart: 'unless-stopped' } },
       },
       permissionProfileId: permissionProfile || 'default',
@@ -277,9 +291,9 @@ export function createAgentRoutes(opts: {
         adminAgent = await _adminDb.createAgent({
           id: agentId,
           name,
-          email: email || `${name.toLowerCase().replace(/\s+/g, '-')}@agenticmail.local`,
-          role: role || 'assistant',
-          metadata: { engineLinked: true, orgId },
+          email: agentEmail,
+          role: agentRole,
+          metadata: { engineLinked: true, orgId, soulId: soulId || undefined },
           createdBy: actor,
         });
       }

package/src/engine/knowledge.ts

@@ -244,7 +244,8 @@ export class KnowledgeBaseEngine {
     // Find all KBs this agent has access to
     const kbs = Array.from(this.knowledgeBases.values()).filter(kb => {
       if (opts?.kbIds?.length) return opts.kbIds.includes(kb.id);
-      return kb.agentIds.includes(agentId) || kb.agentIds.length === 0; // Empty = all agents
+      const ids = Array.isArray(kb.agentIds) ? kb.agentIds : [];
+      return ids.includes(agentId) || ids.length === 0; // Empty = all agents
     });
 
     if (kbs.length === 0) return [];
@@ -329,9 +330,10 @@ export class KnowledgeBaseEngine {
   }
 
   getKnowledgeBasesForAgent(agentId: string): KnowledgeBase[] {
-    return Array.from(this.knowledgeBases.values()).filter(kb =>
-      kb.agentIds.includes(agentId) || kb.agentIds.length === 0
-    );
+    return Array.from(this.knowledgeBases.values()).filter(kb => {
+      const ids = Array.isArray(kb.agentIds) ? kb.agentIds : [];
+      return ids.includes(agentId) || ids.length === 0;
+    });
   }
 
   deleteDocument(kbId: string, docId: string): boolean {