@agenticmail/enterprise 0.5.164 → 0.5.166

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

@@ -1998,13 +1998,37 @@ function MemorySection(props) {
   var filterCategory = _filterCat[0]; var setFilterCategory = _filterCat[1];
   var _filterImp = useState('');
   var filterImportance = _filterImp[0]; var setFilterImportance = _filterImp[1];
+  var _dateFrom = useState('');
+  var dateFrom = _dateFrom[0]; var setDateFrom = _dateFrom[1];
+  var _dateTo = useState('');
+  var dateTo = _dateTo[0]; var setDateTo = _dateTo[1];
+  var _page = useState(1);
+  var page = _page[0]; var setPage = _page[1];
+  var _expanded = useState(null);
+  var expandedId = _expanded[0]; var setExpandedId = _expanded[1];
   var _showCreate = useState(false);
   var showCreateModal = _showCreate[0]; var setShowCreateModal = _showCreate[1];
   var _form = useState({ title: '', content: '', category: 'org_knowledge', importance: 'normal', tags: '' });
   var createForm = _form[0]; var setCreateForm = _form[1];
 
+  var PAGE_SIZE = 10;
+
+  var MEMORY_CATEGORIES = [
+    { value: 'org_knowledge', label: 'Org Knowledge' },
+    { value: 'preference', label: 'Preference' },
+    { value: 'interaction_pattern', label: 'Interaction Pattern' },
+    { value: 'context', label: 'Context' },
+    { value: 'skill', label: 'Skill' },
+    { value: 'processed_email', label: 'Processed Email' },
+    { value: 'procedure', label: 'Procedure' },
+    { value: 'relationship', label: 'Relationship' },
+    { value: 'reflection', label: 'Reflection' },
+    { value: 'domain_expertise', label: 'Domain Expertise' },
+    { value: 'error_pattern', label: 'Error Pattern' }
+  ];
+
   var buildQueryParams = function() {
-    var params = '?limit=50';
+    var params = '?limit=200';
     if (searchQuery) params += '&search=' + encodeURIComponent(searchQuery);
     if (filterCategory) params += '&category=' + filterCategory;
     if (filterImportance) params += '&importance=' + filterImportance;
@@ -2012,9 +2036,8 @@ function MemorySection(props) {
   };
 
   var loadMemories = function() {
-    var params = buildQueryParams();
-    engineCall('/memory/agent/' + agentId + params)
-      .then(function(d) { setMemories(d.memories || []); })
+    engineCall('/memory/agent/' + agentId + buildQueryParams())
+      .then(function(d) { setMemories(d.memories || []); setPage(1); })
       .catch(function() {});
   };
 
@@ -2024,38 +2047,24 @@ function MemorySection(props) {
       .catch(function() {});
   };
 
-  var loadAll = function() {
-    loadMemories();
-    loadStats();
-  };
+  var loadAll = function() { loadMemories(); loadStats(); };
 
-  useEffect(loadAll, []);
+  useEffect(function() { loadAll(); }, [agentId]);
   useEffect(function() { loadMemories(); }, [filterCategory, filterImportance]);
 
-  var handleSearch = function() {
-    loadMemories();
-  };
+  var handleSearch = function() { loadMemories(); };
 
   var createMemory = function() {
-    if (!createForm.title || !createForm.content) { toast('Title and content are required', 'error'); return; }
-    var tagsArray = createForm.tags ? createForm.tags.split(',').map(function(s) { return s.trim(); }).filter(Boolean) : [];
     var body = {
       agentId: agentId,
-      orgId: getOrgId(),
       title: createForm.title,
       content: createForm.content,
       category: createForm.category,
       importance: createForm.importance,
-      source: 'admin',
-      tags: tagsArray
+      tags: createForm.tags ? createForm.tags.split(',').map(function(t) { return t.trim(); }).filter(Boolean) : []
     };
     engineCall('/memory', { method: 'POST', body: JSON.stringify(body) })
-      .then(function() {
-        toast('Memory created', 'success');
-        setShowCreateModal(false);
-        setCreateForm({ title: '', content: '', category: 'org_knowledge', importance: 'normal', tags: '' });
-        loadAll();
-      })
+      .then(function() { toast('Memory created', 'success'); setShowCreateModal(false); setCreateForm({ title: '', content: '', category: 'org_knowledge', importance: 'normal', tags: '' }); loadAll(); })
       .catch(function(e) { toast(e.message, 'error'); });
   };
 
@@ -2063,7 +2072,7 @@ function MemorySection(props) {
     showConfirm({
       title: 'Delete Memory',
       message: 'Are you sure you want to delete this memory entry? This action cannot be undone.',
-      danger: true,
+      warning: true,
       confirmText: 'Delete'
     }).then(function(confirmed) {
       if (!confirmed) return;
@@ -2076,13 +2085,13 @@ function MemorySection(props) {
   var pruneStale = function() {
     showConfirm({
       title: 'Prune Stale Memories',
-      message: 'This will remove expired and stale memory entries for this agent. This action cannot be undone.',
+      message: 'This will remove expired and stale memory entries for this agent.',
       warning: true,
       confirmText: 'Prune'
     }).then(function(confirmed) {
       if (!confirmed) return;
       engineCall('/memory/agent/' + agentId + '/prune', { method: 'POST' })
-        .then(function(d) { toast('Pruned ' + (d.pruned || 0) + ' entries', 'success'); loadAll(); })
+        .then(function(d) { toast('Pruned ' + (d.deleted || 0) + ' entries', 'success'); loadAll(); })
         .catch(function(e) { toast(e.message, 'error'); });
     });
   };
@@ -2090,7 +2099,7 @@ function MemorySection(props) {
   var runDecay = function() {
     showConfirm({
       title: 'Run Confidence Decay',
-      message: 'This will reduce the confidence score of memories that have not been accessed recently. Decay rate: 10%.',
+      message: 'This will reduce confidence of memories not accessed recently. Decay rate: 10%.',
       warning: true,
       confirmText: 'Run Decay'
     }).then(function(confirmed) {
@@ -2101,116 +2110,161 @@ function MemorySection(props) {
     });
   };
 
-  // Derive stats values
+  // Date filter client-side
+  var filtered = memories;
+  if (dateFrom) {
+    var fromTs = new Date(dateFrom).getTime();
+    filtered = filtered.filter(function(m) { return m.createdAt && new Date(m.createdAt).getTime() >= fromTs; });
+  }
+  if (dateTo) {
+    var toTs = new Date(dateTo + 'T23:59:59').getTime();
+    filtered = filtered.filter(function(m) { return m.createdAt && new Date(m.createdAt).getTime() <= toTs; });
+  }
+
+  var totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
+  var paged = filtered.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
+
+  // Stats
   var totalMemories = memoryStats ? (memoryStats.totalEntries || memoryStats.total || 0) : 0;
   var categoriesUsed = memoryStats && memoryStats.byCategory ? Object.keys(memoryStats.byCategory).length : 0;
   var avgConfidence = memoryStats && memoryStats.avgConfidence != null ? ((memoryStats.avgConfidence * 100).toFixed(0) + '%') : '-';
   var sourcesCount = memoryStats && memoryStats.bySource ? Object.keys(memoryStats.bySource).length : 0;
 
+  var catColor = function(c) {
+    var m = { preference: '#8b5cf6', interaction_pattern: '#ec4899', context: '#3b82f6', skill: '#10b981', processed_email: '#6366f1', org_knowledge: '#f59e0b', procedure: '#14b8a6', relationship: '#f43f5e', reflection: '#a855f7', domain_expertise: '#0ea5e9', error_pattern: '#ef4444' };
+    return m[c] || '#64748b';
+  };
+  var impColor = function(i) {
+    var m = { critical: '#ef4444', high: '#f43f5e', normal: '#3b82f6', low: '#64748b' };
+    return m[i] || '#64748b';
+  };
+
+  var fmtDate = function(d) { if (!d) return '-'; var dt = new Date(d); return dt.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' }); };
+  var fmtTime = function(d) { if (!d) return ''; var dt = new Date(d); return dt.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' }); };
+
   return h('div', { className: 'card' },
     h('div', { className: 'card-header', style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' } },
       h('h3', { style: { margin: 0, fontSize: 15, fontWeight: 600 } }, 'Memory'),
-      h('button', { className: 'btn btn-ghost btn-sm', onClick: loadAll }, I.refresh(), ' Refresh')
+      h('div', { style: { display: 'flex', gap: 6 } },
+        h('button', { className: 'btn btn-ghost btn-sm', onClick: pruneStale, title: 'Prune stale entries' }, I.trash()),
+        h('button', { className: 'btn btn-ghost btn-sm', onClick: runDecay, title: 'Run confidence decay' }, I.clock()),
+        h('button', { className: 'btn btn-ghost btn-sm', onClick: loadAll }, I.refresh()),
+        h('button', { className: 'btn btn-primary btn-sm', onClick: function() { setShowCreateModal(true); } }, I.plus(), ' Add')
+      )
     ),
-    h('div', { className: 'card-body' },
-
-      // Stats Row
-      h('div', { className: 'stat-grid', style: { marginBottom: 16 } },
-        h('div', { className: 'stat-card' },
-          h('div', { className: 'stat-value' }, totalMemories),
-          h('div', { className: 'stat-label' }, 'Total Memories')
-        ),
-        h('div', { className: 'stat-card' },
-          h('div', { className: 'stat-value' }, categoriesUsed),
-          h('div', { className: 'stat-label' }, 'Categories Used')
-        ),
-        h('div', { className: 'stat-card' },
-          h('div', { className: 'stat-value' }, avgConfidence),
-          h('div', { className: 'stat-label' }, 'Avg Confidence')
-        ),
-        h('div', { className: 'stat-card' },
-          h('div', { className: 'stat-value' }, sourcesCount),
-          h('div', { className: 'stat-label' }, 'Sources')
-        )
+    h('div', { className: 'card-body', style: { padding: 0 } },
+
+      // Compact stats bar
+      h('div', { style: { display: 'flex', gap: 24, padding: '10px 16px', borderBottom: '1px solid var(--border)', fontSize: 13 } },
+        h('span', { style: { color: 'var(--text-muted)' } }, 'Total: ', h('strong', null, totalMemories)),
+        h('span', { style: { color: 'var(--text-muted)' } }, 'Categories: ', h('strong', null, categoriesUsed)),
+        h('span', { style: { color: 'var(--text-muted)' } }, 'Avg Conf: ', h('strong', null, avgConfidence)),
+        h('span', { style: { color: 'var(--text-muted)' } }, 'Sources: ', h('strong', null, sourcesCount)),
+        h('div', { style: { flex: 1 } }),
+        h('span', { style: { color: 'var(--text-muted)' } }, 'Showing ', h('strong', null, filtered.length), ' of ', totalMemories)
       ),
 
-      // Filter Bar
-      h('div', { style: { display: 'flex', gap: 8, marginBottom: 16, flexWrap: 'wrap', alignItems: 'center' } },
-        h('div', { style: { position: 'relative', flex: 1, minWidth: 180 } },
-          h('input', {
-            className: 'input',
-            placeholder: 'Search memories...',
-            value: searchQuery,
-            onChange: function(e) { setSearchQuery(e.target.value); },
-            onKeyDown: function(e) { if (e.key === 'Enter') handleSearch(); }
-          })
-        ),
-        h('button', { className: 'btn btn-ghost btn-sm', onClick: handleSearch }, I.search()),
-        h('select', { className: 'input', style: { maxWidth: 170 }, value: filterCategory, onChange: function(e) { setFilterCategory(e.target.value); } },
+      // Filter row
+      h('div', { style: { display: 'flex', gap: 6, padding: '8px 16px', borderBottom: '1px solid var(--border)', flexWrap: 'wrap', alignItems: 'center' } },
+        h('input', {
+          className: 'input', style: { flex: 1, minWidth: 140, height: 30, fontSize: 12 },
+          placeholder: 'Search...', value: searchQuery,
+          onChange: function(e) { setSearchQuery(e.target.value); },
+          onKeyDown: function(e) { if (e.key === 'Enter') handleSearch(); }
+        }),
+        h('select', { className: 'input', style: { width: 130, height: 30, fontSize: 12 }, value: filterCategory, onChange: function(e) { setFilterCategory(e.target.value); } },
           h('option', { value: '' }, 'All Categories'),
           MEMORY_CATEGORIES.map(function(c) { return h('option', { key: c.value, value: c.value }, c.label); })
         ),
-        h('select', { className: 'input', style: { maxWidth: 150 }, value: filterImportance, onChange: function(e) { setFilterImportance(e.target.value); } },
-          h('option', { value: '' }, 'All Importance'),
+        h('select', { className: 'input', style: { width: 110, height: 30, fontSize: 12 }, value: filterImportance, onChange: function(e) { setFilterImportance(e.target.value); } },
+          h('option', { value: '' }, 'All Levels'),
           h('option', { value: 'critical' }, 'Critical'),
           h('option', { value: 'high' }, 'High'),
           h('option', { value: 'normal' }, 'Normal'),
           h('option', { value: 'low' }, 'Low')
         ),
-        h('div', { style: { flex: '0 0 auto' } }),
-        h('button', { className: 'btn btn-primary btn-sm', onClick: function() { setShowCreateModal(true); } }, I.plus(), ' Create Memory'),
-        h('button', { className: 'btn btn-ghost btn-sm', style: { color: 'var(--warning)' }, onClick: pruneStale }, I.trash(), ' Prune Stale'),
-        h('button', { className: 'btn btn-ghost btn-sm', style: { color: 'var(--warning)' }, onClick: runDecay }, I.clock(), ' Run Decay')
+        h('input', { type: 'date', className: 'input', style: { width: 120, height: 30, fontSize: 12 }, value: dateFrom, onChange: function(e) { setDateFrom(e.target.value); setPage(1); }, title: 'From date' }),
+        h('span', { style: { fontSize: 11, color: 'var(--text-muted)' } }, '–'),
+        h('input', { type: 'date', className: 'input', style: { width: 120, height: 30, fontSize: 12 }, value: dateTo, onChange: function(e) { setDateTo(e.target.value); setPage(1); }, title: 'To date' }),
+        (dateFrom || dateTo) && h('button', { className: 'btn btn-ghost btn-sm', style: { height: 30, fontSize: 11 }, onClick: function() { setDateFrom(''); setDateTo(''); } }, 'Clear')
       ),
 
-      // Memory Cards List
-      memories.length === 0
-        ? h('div', { style: { padding: 40, textAlign: 'center', color: 'var(--text-muted)' } }, 'No memories found for this agent')
-        : h('div', { style: { display: 'grid', gap: 10 } },
-            memories.map(function(m) {
-              var truncatedContent = m.content && m.content.length > 200 ? m.content.substring(0, 200) + '...' : (m.content || '');
-              var tags = m.tags || [];
-              var confidence = m.confidence != null ? ((m.confidence * 100).toFixed(0) + '%') : '-';
-              var created = m.createdAt ? new Date(m.createdAt).toLocaleDateString() : '-';
-              var lastAccessed = m.lastAccessedAt ? new Date(m.lastAccessedAt).toLocaleDateString() : '-';
-
-              return h('div', { key: m.id, style: { padding: '14px 18px', background: 'var(--bg-tertiary)', borderRadius: 8, border: '1px solid var(--border)' } },
-                // Title
-                h('div', { style: { fontWeight: 600, fontSize: 14, marginBottom: 6 } }, m.title || 'Untitled'),
-
-                // Category + Importance + Source badges row
-                h('div', { style: { display: 'flex', gap: 6, marginBottom: 8, flexWrap: 'wrap' } },
-                  h('span', { style: { display: 'inline-block', padding: '2px 8px', borderRadius: 4, fontSize: 11, fontWeight: 600, color: '#fff', background: memCatColor(m.category) } }, memCatLabel(m.category)),
-                  h('span', { style: { display: 'inline-block', padding: '2px 8px', borderRadius: 4, fontSize: 11, fontWeight: 600, color: '#fff', background: importanceBadgeColor(m.importance) } }, m.importance || 'normal'),
-                  m.source && h('span', { className: 'badge badge-neutral' }, m.source)
+      // Table-style compact list
+      filtered.length === 0
+        ? h('div', { style: { padding: 32, textAlign: 'center', color: 'var(--text-muted)', fontSize: 13 } }, 'No memories found')
+        : h(Fragment, null,
+          // Header row
+          h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 100px 70px 60px 70px 36px', gap: 8, padding: '6px 16px', borderBottom: '1px solid var(--border)', fontSize: 11, fontWeight: 600, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.5px' } },
+            h('span', null, 'Memory'),
+            h('span', null, 'Category'),
+            h('span', null, 'Level'),
+            h('span', null, 'Conf'),
+            h('span', null, 'Date'),
+            h('span', null, '')
+          ),
+          // Rows
+          paged.map(function(m) {
+            var isExpanded = expandedId === m.id;
+            var conf = m.confidence != null ? Math.round(m.confidence * 100) : 0;
+            var confBar = conf >= 80 ? 'var(--success)' : conf >= 50 ? 'var(--warning)' : 'var(--danger)';
+            return h('div', { key: m.id },
+              // Compact row
+              h('div', {
+                style: { display: 'grid', gridTemplateColumns: '1fr 100px 70px 60px 70px 36px', gap: 8, padding: '8px 16px', borderBottom: '1px solid var(--border)', cursor: 'pointer', fontSize: 13, alignItems: 'center', transition: 'background 0.1s', background: isExpanded ? 'var(--bg-tertiary)' : 'transparent' },
+                onClick: function() { setExpandedId(isExpanded ? null : m.id); },
+                onMouseEnter: function(e) { if (!isExpanded) e.currentTarget.style.background = 'var(--bg-secondary)'; },
+                onMouseLeave: function(e) { if (!isExpanded) e.currentTarget.style.background = 'transparent'; }
+              },
+                // Title + preview
+                h('div', { style: { overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' } },
+                  h('span', { style: { fontWeight: 500 } }, m.title || 'Untitled'),
+                  m.content && h('span', { style: { color: 'var(--text-muted)', marginLeft: 8, fontSize: 12 } }, m.content.substring(0, 60) + (m.content.length > 60 ? '...' : ''))
                 ),
-
-                // Content (truncated)
-                h('div', { style: { fontSize: 13, color: 'var(--text-muted)', marginBottom: 8, lineHeight: 1.5, overflow: 'hidden', textOverflow: 'ellipsis' } }, truncatedContent),
-
-                // Tags row
-                tags.length > 0 && h('div', { style: { display: 'flex', gap: 4, marginBottom: 8, flexWrap: 'wrap' } },
-                  tags.map(function(tag, ti) {
-                    return h('span', { key: ti, className: 'badge badge-neutral', style: { fontSize: 10 } }, tag);
-                  })
+                // Category badge
+                h('span', { style: { display: 'inline-block', padding: '1px 6px', borderRadius: 3, fontSize: 10, fontWeight: 600, color: '#fff', background: catColor(m.category), whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, (m.category || '').replace(/_/g, ' ')),
+                // Importance
+                h('span', { style: { fontSize: 11, color: impColor(m.importance), fontWeight: 500 } }, m.importance || 'normal'),
+                // Confidence bar
+                h('div', { style: { display: 'flex', alignItems: 'center', gap: 4 } },
+                  h('div', { style: { flex: 1, height: 4, borderRadius: 2, background: 'var(--border)' } },
+                    h('div', { style: { width: conf + '%', height: '100%', borderRadius: 2, background: confBar } })
+                  ),
+                  h('span', { style: { fontSize: 10, color: 'var(--text-muted)', minWidth: 24 } }, conf + '%')
                 ),
-
-                // Meta row: confidence, created, last accessed, delete button
-                h('div', { style: { display: 'flex', alignItems: 'center', gap: 16, fontSize: 11, color: 'var(--text-muted)' } },
-                  h('span', null, 'Confidence: ', h('strong', null, confidence)),
-                  h('span', null, 'Created: ', created),
-                  h('span', null, 'Last accessed: ', lastAccessed),
+                // Date
+                h('span', { style: { fontSize: 11, color: 'var(--text-muted)', whiteSpace: 'nowrap' } }, fmtDate(m.createdAt)),
+                // Expand indicator
+                h('span', { style: { fontSize: 10, color: 'var(--text-muted)', textAlign: 'center' } }, isExpanded ? '▲' : '▼')
+              ),
+              // Expanded detail
+              isExpanded && h('div', { style: { padding: '10px 16px 12px', background: 'var(--bg-tertiary)', borderBottom: '1px solid var(--border)', fontSize: 12, lineHeight: 1.6 } },
+                h('div', { style: { color: 'var(--text)', marginBottom: 8, whiteSpace: 'pre-wrap', maxHeight: 200, overflow: 'auto' } }, m.content || '(empty)'),
+                h('div', { style: { display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center', fontSize: 11, color: 'var(--text-muted)' } },
+                  h('span', null, 'Source: ', h('strong', null, m.source || '-')),
+                  h('span', null, 'Created: ', h('strong', null, fmtDate(m.createdAt)), ' ', fmtTime(m.createdAt)),
+                  m.lastAccessedAt && h('span', null, 'Last accessed: ', h('strong', null, fmtDate(m.lastAccessedAt))),
+                  m.tags && m.tags.length > 0 && h('span', null, 'Tags: ', m.tags.join(', ')),
                   h('div', { style: { flex: 1 } }),
-                  h('button', { className: 'btn btn-ghost btn-sm', style: { color: 'var(--danger)' }, onClick: function() { deleteMemory(m.id); } }, I.trash(), ' Delete')
+                  h('button', { className: 'btn btn-ghost btn-sm', style: { color: 'var(--danger)', height: 24, fontSize: 11 }, onClick: function(e) { e.stopPropagation(); deleteMemory(m.id); } }, I.trash(), ' Delete')
                 )
-              );
-            })
+              )
+            );
+          }),
+
+          // Pagination
+          totalPages > 1 && h('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4, padding: '10px 16px', borderTop: '1px solid var(--border)' } },
+            h('button', { className: 'btn btn-ghost btn-sm', disabled: page <= 1, onClick: function() { setPage(1); }, style: { fontSize: 11, height: 28 } }, '«'),
+            h('button', { className: 'btn btn-ghost btn-sm', disabled: page <= 1, onClick: function() { setPage(page - 1); }, style: { fontSize: 11, height: 28 } }, '‹'),
+            h('span', { style: { fontSize: 12, color: 'var(--text-muted)', padding: '0 8px' } }, 'Page ', h('strong', null, page), ' of ', h('strong', null, totalPages)),
+            h('button', { className: 'btn btn-ghost btn-sm', disabled: page >= totalPages, onClick: function() { setPage(page + 1); }, style: { fontSize: 11, height: 28 } }, '›'),
+            h('button', { className: 'btn btn-ghost btn-sm', disabled: page >= totalPages, onClick: function() { setPage(totalPages); }, style: { fontSize: 11, height: 28 } }, '»')
           )
+        )
     ),
 
     // Create Memory Modal
     showCreateModal && h('div', { className: 'modal-overlay', onClick: function() { setShowCreateModal(false); } },
-      h('div', { className: 'modal', style: { maxWidth: 540 }, onClick: function(e) { e.stopPropagation(); } },
+      h('div', { className: 'modal', style: { maxWidth: 500 }, onClick: function(e) { e.stopPropagation(); } },
         h('div', { className: 'modal-header' },
           h('h2', null, 'Create Memory'),
           h('button', { className: 'btn btn-ghost btn-icon', onClick: function() { setShowCreateModal(false); } }, I.x())
@@ -2222,7 +2276,7 @@ function MemorySection(props) {
           ),
           h('div', { className: 'form-group' },
             h('label', { className: 'form-label' }, 'Content *'),
-            h('textarea', { className: 'input', style: { minHeight: 120 }, placeholder: 'Memory content...', value: createForm.content, onChange: function(e) { setCreateForm(Object.assign({}, createForm, { content: e.target.value })); } })
+            h('textarea', { className: 'input', style: { minHeight: 100 }, placeholder: 'Memory content...', value: createForm.content, onChange: function(e) { setCreateForm(Object.assign({}, createForm, { content: e.target.value })); } })
           ),
           h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 } },
             h('div', { className: 'form-group' },
@@ -2243,12 +2297,12 @@ function MemorySection(props) {
           ),
           h('div', { className: 'form-group' },
             h('label', { className: 'form-label' }, 'Tags (comma-separated)'),
-            h('input', { className: 'input', placeholder: 'tag1, tag2, tag3', value: createForm.tags, onChange: function(e) { setCreateForm(Object.assign({}, createForm, { tags: e.target.value })); } })
+            h('input', { className: 'input', placeholder: 'tag1, tag2', value: createForm.tags, onChange: function(e) { setCreateForm(Object.assign({}, createForm, { tags: e.target.value })); } })
           )
         ),
         h('div', { className: 'modal-footer' },
           h('button', { className: 'btn btn-ghost', onClick: function() { setShowCreateModal(false); } }, 'Cancel'),
-          h('button', { className: 'btn btn-primary', onClick: createMemory }, 'Create Memory')
+          h('button', { className: 'btn btn-primary', onClick: createMemory }, 'Create')
         )
       )
     )
@@ -2733,14 +2787,14 @@ function GuardrailsSection(props) {
   var agents = props.agents || [];
   var app = useApp();
   var toast = app.toast;
-
   var agentData = buildAgentDataMap(agents);
 
-  var _subTab = useState('status');
+  var _subTab = useState('rules');
   var subTab = _subTab[0]; var setSubTab = _subTab[1];
-
   var _guardrailStatus = useState(null);
   var guardrailStatus = _guardrailStatus[0]; var setGuardrailStatus = _guardrailStatus[1];
+  var _rules = useState([]);
+  var rules = _rules[0]; var setRules = _rules[1];
   var _interventions = useState([]);
   var interventions = _interventions[0]; var setInterventions = _interventions[1];
   var _dlpViolations = useState([]);
@@ -2749,33 +2803,55 @@ function GuardrailsSection(props) {
   var onboardingStatus = _onboardingStatus[0]; var setOnboardingStatus = _onboardingStatus[1];
   var _onboardingProgress = useState([]);
   var onboardingProgress = _onboardingProgress[0]; var setOnboardingProgress = _onboardingProgress[1];
-  var _pendingPolicies = useState([]);
-  var pendingPolicies = _pendingPolicies[0]; var setPendingPolicies = _pendingPolicies[1];
   var _pendingApprovals = useState([]);
   var pendingApprovals = _pendingApprovals[0]; var setPendingApprovals = _pendingApprovals[1];
   var _approvalHistory = useState([]);
   var approvalHistory = _approvalHistory[0]; var setApprovalHistory = _approvalHistory[1];
   var _loading = useState(true);
   var loading = _loading[0]; var setLoading = _loading[1];
+  var _showCreate = useState(false);
+  var showCreate = _showCreate[0]; var setShowCreate = _showCreate[1];
+  var _editRule = useState(null);
+  var editRule = _editRule[0]; var setEditRule = _editRule[1];
+  var _ruleForm = useState({ name: '', category: 'anomaly', ruleType: 'error_rate', action: 'alert', severity: 'medium', enabled: true, threshold: 10, windowMinutes: 60, cooldownMinutes: 30, keywords: '', patterns: '', description: '' });
+  var ruleForm = _ruleForm[0]; var setRuleForm = _ruleForm[1];
+
+  var CATEGORIES = [
+    { value: 'anomaly', label: 'Anomaly Detection', desc: 'Unusual patterns in agent behavior', types: ['error_rate', 'cost_velocity', 'volume_spike', 'off_hours', 'session_anomaly'] },
+    { value: 'policy_compliance', label: 'Policy Compliance', desc: 'Ensure agents follow org policies', types: ['policy_violation', 'escalation_failure'] },
+    { value: 'communication', label: 'Communication', desc: 'Monitor communication quality', types: ['tone_violation', 'keyword_detection'] },
+    { value: 'memory', label: 'Memory', desc: 'Control memory write behavior', types: ['memory_flood'] },
+    { value: 'onboarding', label: 'Onboarding', desc: 'Enforce onboarding requirements', types: ['onboarding_bypass'] },
+    { value: 'security', label: 'Security', desc: 'Detect threats and suspicious patterns', types: ['data_leak_attempt', 'repeated_error', 'prompt_injection'] }
+  ];
+
+  var TYPE_LABELS = {
+    error_rate: 'Error Rate', cost_velocity: 'Cost Velocity', volume_spike: 'Volume Spike',
+    off_hours: 'Off-Hours Activity', session_anomaly: 'Session Anomaly',
+    policy_violation: 'Policy Violation', escalation_failure: 'Escalation Failure',
+    tone_violation: 'Tone Violation', keyword_detection: 'Keyword Detection',
+    memory_flood: 'Memory Flood', onboarding_bypass: 'Onboarding Bypass',
+    data_leak_attempt: 'Data Leak Attempt', repeated_error: 'Repeated Error', prompt_injection: 'Prompt Injection'
+  };
 
   var loadAll = function() {
     setLoading(true);
     Promise.all([
       engineCall('/guardrails/status/' + agentId).catch(function() { return null; }),
+      engineCall('/guardrails/rules?orgId=' + getOrgId()).catch(function() { return { rules: [] }; }),
       engineCall('/guardrails/interventions?agentId=' + agentId).catch(function() { return { interventions: [] }; }),
       engineCall('/dlp/violations?agentId=' + agentId).catch(function() { return { violations: [] }; }),
       engineCall('/onboarding/status/' + agentId).catch(function() { return null; }),
       engineCall('/onboarding/progress/' + agentId).catch(function() { return { progress: [] }; }),
-      engineCall('/onboarding/pending/' + agentId).catch(function() { return { policies: [] }; }),
       engineCall('/approvals/pending?agentId=' + agentId).catch(function() { return { approvals: [] }; }),
       engineCall('/approvals/history?agentId=' + agentId).catch(function() { return { approvals: [] }; })
     ]).then(function(results) {
       setGuardrailStatus(results[0]);
-      setInterventions(results[1]?.interventions || results[1] || []);
-      setDlpViolations(results[2]?.violations || results[2] || []);
-      setOnboardingStatus(results[3]);
-      setOnboardingProgress(results[4]?.progress || results[4] || []);
-      setPendingPolicies(results[5]?.policies || results[5] || []);
+      setRules(results[1]?.rules || []);
+      setInterventions(results[2]?.interventions || results[2] || []);
+      setDlpViolations(results[3]?.violations || results[3] || []);
+      setOnboardingStatus(results[4]);
+      setOnboardingProgress(results[5]?.progress || results[5] || []);
       setPendingApprovals(results[6]?.approvals || results[6] || []);
       setApprovalHistory(results[7]?.approvals || results[7] || []);
       setLoading(false);
@@ -2784,67 +2860,146 @@ function GuardrailsSection(props) {
 
   useEffect(function() { loadAll(); }, [agentId]);
 
+  // Agent-relevant rules: either targets this agent specifically, or applies globally (no agentIds filter)
+  var agentRules = rules.filter(function(r) {
+    if (!r.conditions?.agentIds || r.conditions.agentIds.length === 0) return true;
+    return r.conditions.agentIds.includes(agentId);
+  });
+
   var pauseAgent = function() {
     engineCall('/guardrails/pause/' + agentId, { method: 'POST', body: JSON.stringify({ reason: 'Manual pause from dashboard' }) })
       .then(function() { toast('Agent paused', 'success'); loadAll(); })
       .catch(function(err) { toast(err.message, 'error'); });
   };
-
   var resumeAgent = function() {
     engineCall('/guardrails/resume/' + agentId, { method: 'POST', body: JSON.stringify({ reason: 'Manual resume from dashboard' }) })
       .then(function() { toast('Agent resumed', 'success'); loadAll(); })
       .catch(function(err) { toast(err.message, 'error'); });
   };
-
   var killAgent = function() {
-    showConfirm({
-      title: 'Kill Agent',
-      message: 'Are you sure you want to kill this agent? This will immediately terminate all running processes.',
-      warning: 'This action cannot be undone.',
-      danger: true,
-      confirmText: 'Kill Agent'
-    }).then(function(confirmed) {
-      if (!confirmed) return;
+    showConfirm({ title: 'Kill Agent', message: 'Immediately terminate all running processes?', danger: true, confirmText: 'Kill Agent' }).then(function(ok) {
+      if (!ok) return;
       engineCall('/guardrails/kill/' + agentId, { method: 'POST', body: JSON.stringify({ reason: 'Manual kill from dashboard' }) })
         .then(function() { toast('Agent killed', 'success'); loadAll(); })
         .catch(function(err) { toast(err.message, 'error'); });
     });
   };
 
+  var toggleRule = function(rule) {
+    engineCall('/guardrails/rules/' + rule.id, { method: 'PUT', body: JSON.stringify({ enabled: !rule.enabled }) })
+      .then(function() { toast(rule.enabled ? 'Rule disabled' : 'Rule enabled', 'success'); loadAll(); })
+      .catch(function(err) { toast(err.message, 'error'); });
+  };
+
+  var deleteRule = function(rule) {
+    showConfirm({ title: 'Delete Rule', message: 'Delete "' + rule.name + '"? This cannot be undone.', warning: true, confirmText: 'Delete' }).then(function(ok) {
+      if (!ok) return;
+      engineCall('/guardrails/rules/' + rule.id, { method: 'DELETE' })
+        .then(function() { toast('Rule deleted', 'success'); loadAll(); })
+        .catch(function(err) { toast(err.message, 'error'); });
+    });
+  };
+
+  var openCreateRule = function() {
+    setRuleForm({ name: '', category: 'anomaly', ruleType: 'error_rate', action: 'alert', severity: 'medium', enabled: true, threshold: 10, windowMinutes: 60, cooldownMinutes: 30, keywords: '', patterns: '', description: '' });
+    setEditRule(null);
+    setShowCreate(true);
+  };
+
+  var openEditRule = function(rule) {
+    setRuleForm({
+      name: rule.name || '',
+      category: rule.category || 'anomaly',
+      ruleType: rule.ruleType || 'error_rate',
+      action: rule.action || 'alert',
+      severity: rule.severity || 'medium',
+      enabled: rule.enabled !== false,
+      threshold: rule.conditions?.threshold || 10,
+      windowMinutes: rule.conditions?.windowMinutes || 60,
+      cooldownMinutes: rule.cooldownMinutes || 30,
+      keywords: (rule.conditions?.keywords || []).join(', '),
+      patterns: (rule.conditions?.patterns || []).join(', '),
+      description: rule.description || ''
+    });
+    setEditRule(rule);
+    setShowCreate(true);
+  };
+
+  var saveRule = function() {
+    var body = {
+      orgId: getOrgId(),
+      name: ruleForm.name,
+      description: ruleForm.description,
+      category: ruleForm.category,
+      ruleType: ruleForm.ruleType,
+      action: ruleForm.action,
+      severity: ruleForm.severity,
+      enabled: ruleForm.enabled,
+      cooldownMinutes: parseInt(ruleForm.cooldownMinutes) || 30,
+      conditions: {
+        agentIds: [agentId],
+        threshold: parseFloat(ruleForm.threshold) || undefined,
+        windowMinutes: parseInt(ruleForm.windowMinutes) || undefined,
+        keywords: ruleForm.keywords ? ruleForm.keywords.split(',').map(function(k) { return k.trim(); }).filter(Boolean) : undefined,
+        patterns: ruleForm.patterns ? ruleForm.patterns.split(',').map(function(p) { return p.trim(); }).filter(Boolean) : undefined
+      }
+    };
+    var method = editRule ? 'PUT' : 'POST';
+    var url = editRule ? '/guardrails/rules/' + editRule.id : '/guardrails/rules';
+    engineCall(url, { method: method, body: JSON.stringify(body) })
+      .then(function() { toast(editRule ? 'Rule updated' : 'Rule created', 'success'); setShowCreate(false); loadAll(); })
+      .catch(function(err) { toast(err.message, 'error'); });
+  };
+
   var initiateOnboarding = function() {
     engineCall('/onboarding/initiate/' + agentId, { method: 'POST', body: JSON.stringify({ orgId: getOrgId() }) })
       .then(function() { toast('Onboarding initiated', 'success'); loadAll(); })
       .catch(function(err) { toast(err.message, 'error'); });
   };
-
   var forceComplete = function() {
     engineCall('/onboarding/force-complete/' + agentId, { method: 'POST' })
       .then(function() { toast('Onboarding force completed', 'success'); loadAll(); })
       .catch(function(err) { toast(err.message, 'error'); });
   };
-
   var approveRequest = function(id) {
     engineCall('/approvals/' + id + '/approve', { method: 'POST', body: JSON.stringify({ decidedBy: 'dashboard-admin' }) })
-      .then(function() { toast('Request approved', 'success'); loadAll(); })
+      .then(function() { toast('Approved', 'success'); loadAll(); })
       .catch(function(err) { toast(err.message, 'error'); });
   };
-
   var rejectRequest = function(id) {
     engineCall('/approvals/' + id + '/reject', { method: 'POST', body: JSON.stringify({ decidedBy: 'dashboard-admin' }) })
-      .then(function() { toast('Request rejected', 'success'); loadAll(); })
+      .then(function() { toast('Rejected', 'success'); loadAll(); })
       .catch(function(err) { toast(err.message, 'error'); });
   };
 
-  if (loading) {
-    return h('div', { style: { padding: 40, textAlign: 'center', color: 'var(--text-muted)' } }, 'Loading guardrails data...');
-  }
+  var actionColor = function(a) { return a === 'kill' ? 'var(--danger)' : a === 'pause' ? 'var(--warning)' : a === 'notify' ? 'var(--info)' : 'var(--text-muted)'; };
+  var sevColor = function(s) { return s === 'critical' ? '#ef4444' : s === 'high' ? '#f97316' : s === 'medium' ? '#eab308' : '#64748b'; };
+  var catIcon = function(c) { return c === 'anomaly' ? '⚡' : c === 'security' ? '🛡' : c === 'communication' ? '💬' : c === 'memory' ? '🧠' : c === 'onboarding' ? '📋' : c === 'policy_compliance' ? '📜' : '⚙'; };
+
+  if (loading) return h('div', { style: { padding: 40, textAlign: 'center', color: 'var(--text-muted)' } }, 'Loading guardrails...');
 
   return h(Fragment, null,
 
-    // ─── Sub-Tab Bar ────────────────────────────────────
-    h('div', { style: { borderBottom: '1px solid var(--border)', marginBottom: 20 } },
+    // Status bar
+    h('div', { className: 'card', style: { marginBottom: 16 } },
+      h('div', { style: { display: 'flex', alignItems: 'center', gap: 12, padding: '10px 16px' } },
+        guardrailStatus && guardrailStatus.paused
+          ? h('span', { className: 'badge badge-warning' }, I.pause(), ' Paused')
+          : h('span', { className: 'badge badge-success' }, I.shield(), ' Active'),
+        h('span', { style: { fontSize: 12, color: 'var(--text-muted)' } }, (guardrailStatus?.interventionCount || 0) + ' interventions'),
+        agentRules.length > 0 && h('span', { style: { fontSize: 12, color: 'var(--text-muted)' } }, agentRules.filter(function(r) { return r.enabled; }).length + '/' + agentRules.length + ' rules active'),
+        h('div', { style: { flex: 1 } }),
+        guardrailStatus && !guardrailStatus.paused && h('button', { className: 'btn btn-secondary btn-sm', onClick: pauseAgent }, I.pause(), ' Pause'),
+        guardrailStatus && guardrailStatus.paused && h('button', { className: 'btn btn-primary btn-sm', onClick: resumeAgent }, I.play(), ' Resume'),
+        h('button', { className: 'btn btn-danger btn-sm', onClick: killAgent }, I.stop(), ' Kill'),
+        h('button', { className: 'btn btn-ghost btn-sm', onClick: loadAll }, I.refresh())
+      )
+    ),
+
+    // Sub-tabs
+    h('div', { style: { borderBottom: '1px solid var(--border)', marginBottom: 16 } },
       h('div', { className: 'tabs' },
-        h('div', { className: 'tab' + (subTab === 'status' ? ' active' : ''), onClick: function() { setSubTab('status'); } }, 'Status'),
+        h('div', { className: 'tab' + (subTab === 'rules' ? ' active' : ''), onClick: function() { setSubTab('rules'); } }, 'Rules (' + agentRules.length + ')'),
         h('div', { className: 'tab' + (subTab === 'interventions' ? ' active' : ''), onClick: function() { setSubTab('interventions'); } }, 'Interventions'),
         h('div', { className: 'tab' + (subTab === 'dlp' ? ' active' : ''), onClick: function() { setSubTab('dlp'); } }, 'DLP'),
         h('div', { className: 'tab' + (subTab === 'onboarding' ? ' active' : ''), onClick: function() { setSubTab('onboarding'); } }, 'Onboarding'),
@@ -2852,258 +3007,268 @@ function GuardrailsSection(props) {
       )
     ),
 
-    // ─── Status Tab ─────────────────────────────────────
-    subTab === 'status' && h('div', null,
-      h('div', { className: 'card', style: { marginBottom: 20 } },
-        h('div', { className: 'card-header' }, h('span', null, 'Guardrail Status')),
-        h('div', { className: 'card-body' },
-          guardrailStatus && guardrailStatus.paused
-            ? h('div', { style: { padding: '12px 16px', background: 'rgba(234, 179, 8, 0.1)', border: '1px solid var(--warning)', borderRadius: 8, marginBottom: 16 } },
-                h('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 } },
-                  h('span', { className: 'badge badge-warning' }, I.pause(), ' Paused'),
-                  guardrailStatus.pausedAt && h('span', { style: { fontSize: 12, color: 'var(--text-muted)' } }, 'Since: ' + new Date(guardrailStatus.pausedAt).toLocaleString())
+    // ─── Rules Tab ──────────────────────────────────────
+    subTab === 'rules' && h('div', null,
+      h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 } },
+        h('span', { style: { fontSize: 13, color: 'var(--text-muted)' } }, 'Guardrail rules that apply to this agent (agent-specific + global)'),
+        h('button', { className: 'btn btn-primary btn-sm', onClick: openCreateRule }, I.plus(), ' Add Rule')
+      ),
+
+      // Category groups
+      CATEGORIES.map(function(cat) {
+        var catRules = agentRules.filter(function(r) { return r.category === cat.value; });
+        if (catRules.length === 0) {
+          // Show empty category with "Add" button
+          return h('div', { key: cat.value, className: 'card', style: { marginBottom: 8 } },
+            h('div', { style: { display: 'flex', alignItems: 'center', gap: 8, padding: '10px 16px' } },
+              h('span', { style: { fontSize: 14 } }, catIcon(cat.value)),
+              h('span', { style: { fontWeight: 600, fontSize: 13 } }, cat.label),
+              h('span', { style: { fontSize: 11, color: 'var(--text-muted)', marginLeft: 4 } }, cat.desc),
+              h('div', { style: { flex: 1 } }),
+              h('span', { style: { fontSize: 11, color: 'var(--text-muted)' } }, 'No rules'),
+              h('button', { className: 'btn btn-ghost btn-sm', style: { fontSize: 11 }, onClick: function() { setRuleForm(Object.assign({}, ruleForm, { category: cat.value, ruleType: cat.types[0] })); setEditRule(null); setShowCreate(true); } }, I.plus(), ' Add')
+            )
+          );
+        }
+        return h('div', { key: cat.value, className: 'card', style: { marginBottom: 8 } },
+          h('div', { style: { display: 'flex', alignItems: 'center', gap: 8, padding: '8px 16px', borderBottom: '1px solid var(--border)' } },
+            h('span', { style: { fontSize: 14 } }, catIcon(cat.value)),
+            h('span', { style: { fontWeight: 600, fontSize: 13 } }, cat.label),
+            h('span', { style: { fontSize: 11, color: 'var(--text-muted)', marginLeft: 4 } }, catRules.length + ' rule' + (catRules.length !== 1 ? 's' : '')),
+            h('div', { style: { flex: 1 } }),
+            h('button', { className: 'btn btn-ghost btn-sm', style: { fontSize: 11 }, onClick: function() { setRuleForm(Object.assign({}, ruleForm, { category: cat.value, ruleType: cat.types[0] })); setEditRule(null); setShowCreate(true); } }, I.plus())
+          ),
+          catRules.map(function(rule) {
+            var isGlobal = !rule.conditions?.agentIds || rule.conditions.agentIds.length === 0;
+            return h('div', { key: rule.id, style: { display: 'flex', alignItems: 'center', gap: 10, padding: '8px 16px', borderBottom: '1px solid var(--border)', fontSize: 13 } },
+              // Toggle switch
+              h('div', {
+                style: { width: 36, height: 20, borderRadius: 10, background: rule.enabled ? 'var(--success)' : 'var(--border)', cursor: 'pointer', position: 'relative', flexShrink: 0, transition: 'background 0.2s' },
+                onClick: function() { toggleRule(rule); }
+              },
+                h('div', { style: { width: 16, height: 16, borderRadius: '50%', background: '#fff', position: 'absolute', top: 2, left: rule.enabled ? 18 : 2, transition: 'left 0.2s', boxShadow: '0 1px 3px rgba(0,0,0,0.2)' } })
+              ),
+              // Name + type
+              h('div', { style: { flex: 1, minWidth: 0 } },
+                h('div', { style: { display: 'flex', alignItems: 'center', gap: 6 } },
+                  h('span', { style: { fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, rule.name || TYPE_LABELS[rule.ruleType] || rule.ruleType),
+                  isGlobal && h('span', { style: { fontSize: 10, padding: '1px 5px', borderRadius: 3, background: 'var(--bg-tertiary)', color: 'var(--text-muted)', border: '1px solid var(--border)' } }, 'Global')
                 ),
-                guardrailStatus.pauseReason && h('div', { style: { fontSize: 13, color: 'var(--text-secondary)', marginTop: 4 } }, 'Reason: ' + guardrailStatus.pauseReason)
-              )
-            : h('div', { style: { padding: '12px 16px', background: 'rgba(34, 197, 94, 0.1)', border: '1px solid var(--success)', borderRadius: 8, marginBottom: 16 } },
-                h('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } },
-                  h('span', { className: 'badge badge-success' }, I.shield(), ' Active')
-                )
+                rule.description && h('div', { style: { fontSize: 11, color: 'var(--text-muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, rule.description)
               ),
-          h('div', { style: { display: 'flex', gap: 16, marginBottom: 16, fontSize: 13 } },
-            h('span', { style: { color: 'var(--text-muted)' } }, 'Interventions: ', h('strong', null, String(guardrailStatus?.interventionCount || guardrailStatus?.interventions || 0))),
-            guardrailStatus?.lastIntervention && h('span', { style: { color: 'var(--text-muted)' } }, 'Last: ' + new Date(guardrailStatus.lastIntervention).toLocaleString())
-          ),
-          h('div', { style: { display: 'flex', gap: 8 } },
-            guardrailStatus && !guardrailStatus.paused && h('button', { className: 'btn btn-secondary btn-sm', onClick: pauseAgent }, I.pause(), ' Pause'),
-            guardrailStatus && guardrailStatus.paused && h('button', { className: 'btn btn-primary btn-sm', onClick: resumeAgent }, I.play(), ' Resume'),
-            h('button', { className: 'btn btn-danger btn-sm', onClick: killAgent }, I.stop(), ' Kill')
-          )
-        )
-      )
+              // Type badge
+              h('span', { style: { fontSize: 10, padding: '2px 6px', borderRadius: 3, background: 'var(--bg-tertiary)', color: 'var(--text-secondary)', whiteSpace: 'nowrap' } }, TYPE_LABELS[rule.ruleType] || rule.ruleType),
+              // Severity
+              h('span', { style: { fontSize: 10, padding: '2px 6px', borderRadius: 3, color: '#fff', background: sevColor(rule.severity), whiteSpace: 'nowrap' } }, rule.severity),
+              // Action
+              h('span', { style: { fontSize: 11, color: actionColor(rule.action), fontWeight: 500 } }, rule.action),
+              // Trigger count
+              h('span', { style: { fontSize: 11, color: 'var(--text-muted)', minWidth: 40, textAlign: 'right' } }, (rule.triggerCount || 0) + 'x'),
+              // Edit + Delete
+              h('button', { className: 'btn btn-ghost btn-sm', style: { height: 24, fontSize: 11 }, onClick: function() { openEditRule(rule); } }, I.edit()),
+              h('button', { className: 'btn btn-ghost btn-sm', style: { height: 24, fontSize: 11, color: 'var(--danger)' }, onClick: function() { deleteRule(rule); } }, I.trash())
+            );
+          })
+        );
+      })
     ),
 
     // ─── Interventions Tab ──────────────────────────────
-    subTab === 'interventions' && h('div', { className: 'card', style: { marginBottom: 20 } },
+    subTab === 'interventions' && h('div', { className: 'card' },
       h('div', { className: 'card-header' }, h('span', null, 'Interventions')),
       interventions.length > 0
-        ? h('div', { className: 'card-body-flush' },
-            h('table', { className: 'data-table' },
-              h('thead', null,
-                h('tr', null,
-                  h('th', null, 'Time'),
-                  h('th', null, 'Type'),
-                  h('th', null, 'Severity'),
-                  h('th', null, 'Description'),
-                  h('th', null, 'Resolution')
-                )
-              ),
-              h('tbody', null,
-                interventions.map(function(inv, i) {
-                  var time = inv.timestamp || inv.createdAt;
-                  var invType = inv.type || inv.interventionType || 'unknown';
-                  var severity = inv.severity || 'medium';
-                  var severityColor = severity === 'critical' ? 'badge-danger' : severity === 'high' ? 'badge-warning' : severity === 'medium' ? 'badge-info' : 'badge-neutral';
-                  var typeColor = invType === 'block' ? 'badge-danger' : invType === 'warn' ? 'badge-warning' : invType === 'audit' ? 'badge-info' : 'badge-neutral';
-
-                  return h('tr', { key: inv.id || i },
-                    h('td', { style: { fontSize: 12, color: 'var(--text-muted)', whiteSpace: 'nowrap' } }, time ? new Date(time).toLocaleString() : '-'),
-                    h('td', null, h('span', { className: 'badge ' + typeColor }, invType)),
-                    h('td', null, h('span', { className: 'badge ' + severityColor }, severity)),
-                    h('td', { style: { fontSize: 13, maxWidth: 300, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, inv.description || inv.message || '-'),
-                    h('td', { style: { fontSize: 12, color: 'var(--text-muted)' } }, inv.resolution || inv.action || '-')
-                  );
-                })
-              )
-            )
-          )
-        : h('div', { className: 'card-body' },
-            h('div', { style: { textAlign: 'center', padding: 20, color: 'var(--text-muted)', fontSize: 13 } }, 'No interventions recorded.')
+        ? h('div', { style: { padding: 0 } },
+            interventions.map(function(inv, i) {
+              var time = inv.timestamp || inv.createdAt;
+              var invType = inv.type || inv.interventionType || 'unknown';
+              var severity = inv.severity || 'medium';
+              return h('div', { key: inv.id || i, style: { display: 'flex', gap: 10, padding: '8px 16px', borderBottom: '1px solid var(--border)', fontSize: 12, alignItems: 'center' } },
+                h('span', { style: { color: 'var(--text-muted)', minWidth: 130, whiteSpace: 'nowrap' } }, time ? new Date(time).toLocaleString() : '-'),
+                h('span', { style: { padding: '1px 6px', borderRadius: 3, fontSize: 10, fontWeight: 600, color: '#fff', background: invType === 'block' ? '#ef4444' : invType === 'warn' ? '#eab308' : '#3b82f6' } }, invType),
+                h('span', { style: { padding: '1px 6px', borderRadius: 3, fontSize: 10, fontWeight: 600, color: '#fff', background: sevColor(severity) } }, severity),
+                h('span', { style: { flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', color: 'var(--text-secondary)' } }, inv.description || inv.message || inv.reason || '-'),
+                h('span', { style: { color: 'var(--text-muted)', fontSize: 11 } }, inv.resolution || inv.action || '')
+              );
+            })
           )
+        : h('div', { style: { padding: 32, textAlign: 'center', color: 'var(--text-muted)', fontSize: 13 } }, 'No interventions recorded')
     ),
 
     // ─── DLP Tab ────────────────────────────────────────
-    subTab === 'dlp' && h('div', { className: 'card', style: { marginBottom: 20 } },
+    subTab === 'dlp' && h('div', { className: 'card' },
       h('div', { className: 'card-header' }, h('span', null, 'DLP Violations')),
       dlpViolations.length > 0
-        ? h('div', { className: 'card-body-flush' },
-            h('table', { className: 'data-table' },
-              h('thead', null,
-                h('tr', null,
-                  h('th', null, 'Time'),
-                  h('th', null, 'Rule'),
-                  h('th', null, 'Severity'),
-                  h('th', null, 'Content'),
-                  h('th', null, 'Status')
-                )
-              ),
-              h('tbody', null,
-                dlpViolations.map(function(v, i) {
-                  var time = v.timestamp || v.createdAt || v.detectedAt;
-                  var rule = v.rule || v.ruleName || v.ruleId || 'Unknown';
-                  var severity = v.severity || 'medium';
-                  var severityColor = severity === 'critical' ? 'badge-danger' : severity === 'high' ? 'badge-warning' : severity === 'medium' ? 'badge-info' : 'badge-neutral';
-                  var content = v.content || v.matchedContent || v.snippet || '';
-                  var truncatedContent = content.length > 80 ? content.substring(0, 80) + '...' : content;
-                  var violationStatus = v.status || v.action || 'detected';
-
-                  return h('tr', { key: v.id || i },
-                    h('td', { style: { fontSize: 12, color: 'var(--text-muted)', whiteSpace: 'nowrap' } }, time ? new Date(time).toLocaleString() : '-'),
-                    h('td', null, h('span', { className: 'badge badge-info' }, rule)),
-                    h('td', null, h('span', { className: 'badge ' + severityColor }, severity)),
-                    h('td', { style: { fontSize: 12, fontFamily: 'var(--font-mono, monospace)', maxWidth: 250, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', color: 'var(--text-secondary)' } }, truncatedContent || '-'),
-                    h('td', null, h('span', { className: 'badge badge-neutral' }, violationStatus))
-                  );
-                })
-              )
-            )
-          )
-        : h('div', { className: 'card-body' },
-            h('div', { style: { textAlign: 'center', padding: 20, color: 'var(--text-muted)', fontSize: 13 } }, 'No DLP violations detected.')
+        ? h('div', { style: { padding: 0 } },
+            dlpViolations.map(function(v, i) {
+              var time = v.timestamp || v.createdAt || v.detectedAt;
+              var severity = v.severity || 'medium';
+              return h('div', { key: v.id || i, style: { display: 'flex', gap: 10, padding: '8px 16px', borderBottom: '1px solid var(--border)', fontSize: 12, alignItems: 'center' } },
+                h('span', { style: { color: 'var(--text-muted)', minWidth: 130, whiteSpace: 'nowrap' } }, time ? new Date(time).toLocaleString() : '-'),
+                h('span', { style: { padding: '1px 6px', borderRadius: 3, fontSize: 10, fontWeight: 600, color: '#fff', background: '#3b82f6' } }, v.rule || v.ruleName || 'Unknown'),
+                h('span', { style: { padding: '1px 6px', borderRadius: 3, fontSize: 10, fontWeight: 600, color: '#fff', background: sevColor(severity) } }, severity),
+                h('span', { style: { flex: 1, fontFamily: 'var(--font-mono, monospace)', fontSize: 11, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', color: 'var(--text-secondary)' } }, (v.content || v.matchedContent || v.snippet || '-').substring(0, 100)),
+                h('span', { className: 'badge badge-neutral', style: { fontSize: 10 } }, v.status || v.action || 'detected')
+              );
+            })
           )
+        : h('div', { style: { padding: 32, textAlign: 'center', color: 'var(--text-muted)', fontSize: 13 } }, 'No DLP violations detected')
     ),
 
     // ─── Onboarding Tab ─────────────────────────────────
     subTab === 'onboarding' && h('div', null,
-
-      // Onboarding Status Card
-      h('div', { className: 'card', style: { marginBottom: 20 } },
-        h('div', { className: 'card-header', style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
-          h('span', null, 'Onboarding Status'),
-          h('div', { style: { display: 'flex', gap: 8 } },
-            !onboardingStatus?.onboarded && h('button', { className: 'btn btn-primary btn-sm', onClick: initiateOnboarding }, 'Start Onboarding'),
-            onboardingStatus && onboardingStatus.status === 'in_progress' && h('button', { className: 'btn btn-secondary btn-sm', onClick: forceComplete }, 'Force Complete')
-          )
-        ),
-        h('div', { className: 'card-body' },
-          h('div', { style: { display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 } },
-            onboardingStatus?.onboarded
-              ? h('span', { className: 'badge badge-success' }, I.check(), ' Onboarded')
-              : h('span', { className: 'badge badge-warning' }, 'Not Onboarded'),
-            onboardingStatus?.status && h('span', { style: { fontSize: 12, color: 'var(--text-muted)' } }, 'Status: ' + onboardingStatus.status),
-            onboardingStatus?.completedAt && h('span', { style: { fontSize: 12, color: 'var(--text-muted)' } }, 'Completed: ' + new Date(onboardingStatus.completedAt).toLocaleString())
-          )
+      h('div', { className: 'card', style: { marginBottom: 12 } },
+        h('div', { style: { display: 'flex', alignItems: 'center', gap: 12, padding: '10px 16px' } },
+          onboardingStatus?.onboarded
+            ? h('span', { className: 'badge badge-success' }, I.check(), ' Onboarded')
+            : h('span', { className: 'badge badge-warning' }, 'Not Onboarded'),
+          onboardingStatus?.completedAt && h('span', { style: { fontSize: 12, color: 'var(--text-muted)' } }, 'Completed: ' + new Date(onboardingStatus.completedAt).toLocaleString()),
+          h('div', { style: { flex: 1 } }),
+          !onboardingStatus?.onboarded && h('button', { className: 'btn btn-primary btn-sm', onClick: initiateOnboarding }, 'Start'),
+          onboardingStatus?.status === 'in_progress' && h('button', { className: 'btn btn-secondary btn-sm', onClick: forceComplete }, 'Force Complete')
         )
       ),
-
-      // Progress Table
-      onboardingProgress.length > 0 && h('div', { className: 'card', style: { marginBottom: 20 } },
-        h('div', { className: 'card-header' }, h('span', null, 'Onboarding Progress')),
-        h('div', { className: 'card-body-flush' },
-          h('table', { className: 'data-table' },
-            h('thead', null,
-              h('tr', null,
-                h('th', null, 'Policy'),
-                h('th', null, 'Status'),
-                h('th', null, 'Acknowledged')
-              )
-            ),
-            h('tbody', null,
-              onboardingProgress.map(function(p, i) {
-                var pStatus = p.status || 'pending';
-                var statusColor = pStatus === 'acknowledged' || pStatus === 'completed' ? 'badge-success' : pStatus === 'in_progress' ? 'badge-info' : 'badge-warning';
-
-                return h('tr', { key: p.id || i },
-                  h('td', { style: { fontWeight: 500, fontSize: 13 } }, p.policyName || p.name || p.policyId || '-'),
-                  h('td', null, h('span', { className: 'badge ' + statusColor }, pStatus)),
-                  h('td', { style: { fontSize: 12, color: 'var(--text-muted)' } }, p.acknowledgedAt ? new Date(p.acknowledgedAt).toLocaleString() : '-')
-                );
-              })
-            )
-          )
-        )
-      ),
-
-      // Pending Policies
-      pendingPolicies.length > 0 && h('div', { className: 'card', style: { marginBottom: 20 } },
-        h('div', { className: 'card-header' }, h('span', null, 'Pending Policies')),
-        h('div', { className: 'card-body' },
-          h('div', { style: { display: 'grid', gap: 8 } },
-            pendingPolicies.map(function(p, i) {
-              return h('div', { key: p.id || i, style: { display: 'flex', alignItems: 'center', gap: 12, padding: '10px 14px', background: 'var(--bg-tertiary)', borderRadius: 8, border: '1px solid var(--border)' } },
-                h('span', { className: 'badge badge-warning' }, 'Pending'),
-                h('span', { style: { fontSize: 13, fontWeight: 500 } }, p.name || p.policyName || p.policyId || 'Unnamed Policy'),
-                p.category && h('span', { className: 'badge badge-neutral', style: { fontSize: 11 } }, p.category)
-              );
-            })
-          )
+      onboardingProgress.length > 0 && h('div', { className: 'card' },
+        h('div', { style: { padding: 0 } },
+          onboardingProgress.map(function(p, i) {
+            return h('div', { key: i, style: { display: 'flex', gap: 10, padding: '8px 16px', borderBottom: '1px solid var(--border)', fontSize: 12, alignItems: 'center' } },
+              p.acknowledged
+                ? h('span', { style: { color: 'var(--success)', fontSize: 14 } }, '✓')
+                : h('span', { style: { color: 'var(--text-muted)', fontSize: 14 } }, '○'),
+              h('span', { style: { fontWeight: 500, flex: 1 } }, p.policyName || p.name || 'Policy ' + (i + 1)),
+              p.acknowledgedAt && h('span', { style: { color: 'var(--text-muted)', fontSize: 11 } }, new Date(p.acknowledgedAt).toLocaleDateString())
+            );
+          })
         )
       )
     ),
 
     // ─── Approvals Tab ──────────────────────────────────
     subTab === 'approvals' && h('div', null,
-
-      // Pending Approvals
-      h('div', { className: 'card', style: { marginBottom: 20 } },
-        h('div', { className: 'card-header' }, h('span', null, 'Pending Approvals')),
-        pendingApprovals.length > 0
-          ? h('div', { className: 'card-body' },
-              h('div', { style: { display: 'grid', gap: 12 } },
-                pendingApprovals.map(function(a, i) {
-                  var riskLevel = a.riskLevel || a.risk || 'medium';
-                  return h('div', { key: a.id || i, style: { padding: '14px 18px', background: 'var(--bg-tertiary)', borderRadius: 8, border: '1px solid var(--border)' } },
-                    h('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 } },
-                      h('span', { className: 'badge badge-info' }, a.type || a.actionType || 'action'),
-                      h('span', { className: riskBadgeClass(riskLevel) }, riskLevel),
-                      a.createdAt && h('span', { style: { fontSize: 12, color: 'var(--text-muted)', marginLeft: 'auto' } }, new Date(a.createdAt).toLocaleString())
-                    ),
-                    h('div', { style: { fontSize: 13, color: 'var(--text-secondary)', marginBottom: 12 } }, a.description || a.reason || 'No description'),
-                    h('div', { style: { display: 'flex', gap: 8 } },
-                      h('button', { className: 'btn btn-primary btn-sm', onClick: function() { approveRequest(a.id); } }, I.check(), ' Approve'),
-                      h('button', { className: 'btn btn-danger btn-sm', onClick: function() { rejectRequest(a.id); } }, I.x(), ' Reject')
-                    )
-                  );
-                })
-              )
-            )
-          : h('div', { className: 'card-body' },
-              h('div', { style: { textAlign: 'center', padding: 20, color: 'var(--text-muted)', fontSize: 13 } }, 'No pending approvals.')
-            )
+      pendingApprovals.length > 0 && h('div', { className: 'card', style: { marginBottom: 12 } },
+        h('div', { className: 'card-header' }, h('span', null, 'Pending Approvals (' + pendingApprovals.length + ')')),
+        h('div', { style: { padding: 0 } },
+          pendingApprovals.map(function(a) {
+            return h('div', { key: a.id, style: { display: 'flex', gap: 10, padding: '10px 16px', borderBottom: '1px solid var(--border)', fontSize: 12, alignItems: 'center' } },
+              h('span', { style: { flex: 1 } },
+                h('div', { style: { fontWeight: 500, marginBottom: 2 } }, a.action || a.description || 'Pending approval'),
+                h('div', { style: { color: 'var(--text-muted)', fontSize: 11 } }, a.requestedAt ? new Date(a.requestedAt).toLocaleString() : '')
+              ),
+              h('button', { className: 'btn btn-primary btn-sm', style: { height: 26 }, onClick: function() { approveRequest(a.id); } }, 'Approve'),
+              h('button', { className: 'btn btn-secondary btn-sm', style: { height: 26 }, onClick: function() { rejectRequest(a.id); } }, 'Reject')
+            );
+          })
+        )
       ),
-
-      // Approval History
-      h('div', { className: 'card', style: { marginBottom: 20 } },
+      h('div', { className: 'card' },
         h('div', { className: 'card-header' }, h('span', null, 'Approval History')),
         approvalHistory.length > 0
-          ? h('div', { className: 'card-body-flush' },
-              h('table', { className: 'data-table' },
-                h('thead', null,
-                  h('tr', null,
-                    h('th', null, 'Type'),
-                    h('th', null, 'Decision'),
-                    h('th', null, 'Decided By'),
-                    h('th', null, 'Date')
-                  )
-                ),
-                h('tbody', null,
-                  approvalHistory.map(function(a, i) {
-                    var decision = a.decision || a.status || 'unknown';
-                    var decisionColor = decision === 'approved' ? 'badge-success' : decision === 'rejected' ? 'badge-danger' : 'badge-neutral';
-                    var decidedAt = a.decidedAt || a.updatedAt || a.createdAt;
-
-                    return h('tr', { key: a.id || i },
-                      h('td', null, h('span', { className: 'badge badge-info' }, a.type || a.actionType || 'action')),
-                      h('td', null, h('span', { className: 'badge ' + decisionColor }, decision)),
-                      h('td', { style: { fontSize: 12, color: 'var(--text-muted)' } }, a.decidedBy || a.reviewer || '-'),
-                      h('td', { style: { fontSize: 12, color: 'var(--text-muted)' } }, decidedAt ? new Date(decidedAt).toLocaleString() : '-')
-                    );
-                  })
-                )
+          ? h('div', { style: { padding: 0 } },
+              approvalHistory.map(function(a, i) {
+                var status = a.status || a.decision || 'unknown';
+                return h('div', { key: a.id || i, style: { display: 'flex', gap: 10, padding: '8px 16px', borderBottom: '1px solid var(--border)', fontSize: 12, alignItems: 'center' } },
+                  h('span', { style: { color: 'var(--text-muted)', minWidth: 130 } }, a.decidedAt ? new Date(a.decidedAt).toLocaleString() : '-'),
+                  h('span', { className: 'badge ' + (status === 'approved' ? 'badge-success' : status === 'rejected' ? 'badge-danger' : 'badge-neutral') }, status),
+                  h('span', { style: { flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, a.action || a.description || '-'),
+                  h('span', { style: { color: 'var(--text-muted)' } }, a.decidedBy || '')
+                );
+              })
+            )
+          : h('div', { style: { padding: 32, textAlign: 'center', color: 'var(--text-muted)', fontSize: 13 } }, 'No approval history')
+      )
+    ),
+
+    // ─── Create/Edit Rule Modal ─────────────────────────
+    showCreate && h('div', { className: 'modal-overlay', onClick: function() { setShowCreate(false); } },
+      h('div', { className: 'modal', style: { maxWidth: 520 }, onClick: function(e) { e.stopPropagation(); } },
+        h('div', { className: 'modal-header' },
+          h('h2', null, editRule ? 'Edit Rule' : 'Create Guardrail Rule'),
+          h('button', { className: 'btn btn-ghost btn-icon', onClick: function() { setShowCreate(false); } }, I.x())
+        ),
+        h('div', { className: 'modal-body' },
+          h('div', { className: 'form-group' },
+            h('label', { className: 'form-label' }, 'Name *'),
+            h('input', { className: 'input', placeholder: 'e.g. High Error Rate Alert', value: ruleForm.name, onChange: function(e) { setRuleForm(Object.assign({}, ruleForm, { name: e.target.value })); } })
+          ),
+          h('div', { className: 'form-group' },
+            h('label', { className: 'form-label' }, 'Description'),
+            h('input', { className: 'input', placeholder: 'What this rule monitors...', value: ruleForm.description, onChange: function(e) { setRuleForm(Object.assign({}, ruleForm, { description: e.target.value })); } })
+          ),
+          h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 } },
+            h('div', { className: 'form-group' },
+              h('label', { className: 'form-label' }, 'Category'),
+              h('select', { className: 'input', value: ruleForm.category, onChange: function(e) {
+                var cat = CATEGORIES.find(function(c) { return c.value === e.target.value; });
+                setRuleForm(Object.assign({}, ruleForm, { category: e.target.value, ruleType: cat ? cat.types[0] : ruleForm.ruleType }));
+              } },
+                CATEGORIES.map(function(c) { return h('option', { key: c.value, value: c.value }, c.label); })
+              )
+            ),
+            h('div', { className: 'form-group' },
+              h('label', { className: 'form-label' }, 'Rule Type'),
+              h('select', { className: 'input', value: ruleForm.ruleType, onChange: function(e) { setRuleForm(Object.assign({}, ruleForm, { ruleType: e.target.value })); } },
+                (CATEGORIES.find(function(c) { return c.value === ruleForm.category; })?.types || []).map(function(t) { return h('option', { key: t, value: t }, TYPE_LABELS[t] || t); })
               )
             )
-          : h('div', { className: 'card-body' },
-              h('div', { style: { textAlign: 'center', padding: 20, color: 'var(--text-muted)', fontSize: 13 } }, 'No approval history.')
+          ),
+          h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 } },
+            h('div', { className: 'form-group' },
+              h('label', { className: 'form-label' }, 'Action'),
+              h('select', { className: 'input', value: ruleForm.action, onChange: function(e) { setRuleForm(Object.assign({}, ruleForm, { action: e.target.value })); } },
+                h('option', { value: 'alert' }, 'Alert'),
+                h('option', { value: 'notify' }, 'Notify'),
+                h('option', { value: 'log' }, 'Log'),
+                h('option', { value: 'pause' }, 'Pause Agent'),
+                h('option', { value: 'kill' }, 'Kill Agent')
+              )
+            ),
+            h('div', { className: 'form-group' },
+              h('label', { className: 'form-label' }, 'Severity'),
+              h('select', { className: 'input', value: ruleForm.severity, onChange: function(e) { setRuleForm(Object.assign({}, ruleForm, { severity: e.target.value })); } },
+                h('option', { value: 'low' }, 'Low'),
+                h('option', { value: 'medium' }, 'Medium'),
+                h('option', { value: 'high' }, 'High'),
+                h('option', { value: 'critical' }, 'Critical')
+              )
+            ),
+            h('div', { className: 'form-group' },
+              h('label', { className: 'form-label' }, 'Cooldown (min)'),
+              h('input', { className: 'input', type: 'number', value: ruleForm.cooldownMinutes, onChange: function(e) { setRuleForm(Object.assign({}, ruleForm, { cooldownMinutes: e.target.value })); } })
+            )
+          ),
+          h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 } },
+            h('div', { className: 'form-group' },
+              h('label', { className: 'form-label' }, 'Threshold'),
+              h('input', { className: 'input', type: 'number', placeholder: 'e.g. 10', value: ruleForm.threshold, onChange: function(e) { setRuleForm(Object.assign({}, ruleForm, { threshold: e.target.value })); } })
+            ),
+            h('div', { className: 'form-group' },
+              h('label', { className: 'form-label' }, 'Window (min)'),
+              h('input', { className: 'input', type: 'number', placeholder: 'e.g. 60', value: ruleForm.windowMinutes, onChange: function(e) { setRuleForm(Object.assign({}, ruleForm, { windowMinutes: e.target.value })); } })
+            )
+          ),
+          (ruleForm.category === 'communication' || ruleForm.category === 'security') && h(Fragment, null,
+            h('div', { className: 'form-group' },
+              h('label', { className: 'form-label' }, 'Keywords (comma-separated)'),
+              h('input', { className: 'input', placeholder: 'confidential, secret, password', value: ruleForm.keywords, onChange: function(e) { setRuleForm(Object.assign({}, ruleForm, { keywords: e.target.value })); } })
+            ),
+            h('div', { className: 'form-group' },
+              h('label', { className: 'form-label' }, 'Patterns (comma-separated regex)'),
+              h('input', { className: 'input', placeholder: '\\d{4}-\\d{4}-\\d{4}-\\d{4}', value: ruleForm.patterns, onChange: function(e) { setRuleForm(Object.assign({}, ruleForm, { patterns: e.target.value })); } })
             )
+          ),
+          h('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginTop: 8 } },
+            h('input', { type: 'checkbox', checked: ruleForm.enabled, onChange: function(e) { setRuleForm(Object.assign({}, ruleForm, { enabled: e.target.checked })); } }),
+            h('label', { style: { fontSize: 13 } }, 'Enabled')
+          ),
+          h('div', { style: { fontSize: 11, color: 'var(--text-muted)', marginTop: 8 } }, 'This rule will be scoped to this agent only. To create org-wide rules, use the Guardrails page in the sidebar.')
+        ),
+        h('div', { className: 'modal-footer' },
+          h('button', { className: 'btn btn-ghost', onClick: function() { setShowCreate(false); } }, 'Cancel'),
+          h('button', { className: 'btn btn-primary', onClick: saveRule }, editRule ? 'Update Rule' : 'Create Rule')
+        )
       )
     )
   );
 }
-
-// ════════════════════════════════════════════════════════════
-// CONFIGURATION SECTION — Model, Description, Soul, General
-// ════════════════════════════════════════════════════════════
-
 function ConfigurationSection(props) {
   var agentId = props.agentId;
   var engineAgent = props.engineAgent;