nexo-brain 5.3.13 → 5.3.15

package/src/dashboard/templates/plugins 2.html

@@ -0,0 +1,185 @@
+{% extends "base.html" %}
+
+{% block title %}Plugins{% endblock %}
+
+{% block page_title %}Plugin Manager{% endblock %}
+{% block page_subtitle %}<span class="text-xs text-slate-500 ml-2">Overview of all loaded plugins</span>{% endblock %}
+
+{% block header_actions %}
+<div class="relative">
+  <svg class="w-3.5 h-3.5 absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
+  <input type="text" id="search-input" placeholder="Search plugins or tools..." onkeyup="applyFilters()"
+    class="text-xs bg-slate-800 border border-slate-700 rounded-md pl-8 pr-3 py-1.5 text-slate-300 placeholder-slate-500 w-48 focus:outline-none focus:border-nexo-500 focus:w-64 transition-all">
+</div>
+<button onclick="loadData()" class="text-xs text-slate-400 hover:text-slate-200 transition-colors px-2 py-1.5 rounded hover:bg-slate-800">
+  <svg class="w-3.5 h-3.5 inline -mt-0.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
+  Refresh
+</button>
+{% endblock %}
+
+{% block content %}
+<!-- Stats row -->
+<div class="grid grid-cols-3 gap-4 mb-6">
+  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
+    <p class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-1">Total Plugins</p>
+    <div class="flex items-baseline gap-2">
+      <p class="text-2xl font-display font-bold text-slate-100" id="stat-plugins">--</p>
+      <span class="text-xs text-slate-500">loaded</span>
+    </div>
+  </div>
+  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
+    <p class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-1">Total Tools</p>
+    <div class="flex items-baseline gap-2">
+      <p class="text-2xl font-display font-bold text-nexo-400" id="stat-tools">--</p>
+      <span class="text-xs text-slate-500">available</span>
+    </div>
+  </div>
+  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
+    <p class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-1">Avg Tools/Plugin</p>
+    <p class="text-2xl font-display font-bold text-slate-100" id="stat-avg">--</p>
+  </div>
+</div>
+
+<!-- Plugin grid -->
+<div id="plugins-grid" class="grid grid-cols-2 gap-4">
+  <div class="col-span-2 py-16 text-center text-sm text-slate-500">Loading plugins...</div>
+</div>
+
+<!-- Empty state -->
+<div id="no-results" class="hidden py-16 text-center">
+  <svg class="w-12 h-12 mx-auto text-slate-700 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z"/></svg>
+  <p class="text-sm text-slate-500">No plugins match your search</p>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<style>
+  @keyframes pluginFadeIn {
+    from { opacity: 0; transform: translateY(12px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  .plugin-card {
+    animation: pluginFadeIn 0.4s ease-out both;
+  }
+</style>
+<script>
+  let allPlugins = [];
+
+  function freshnessBadge(loadedAt) {
+    if (!loadedAt) return '<span class="w-2 h-2 rounded-full bg-slate-600"></span>';
+    const d = new Date(loadedAt);
+    const diffH = (Date.now() - d.getTime()) / 3600000;
+    if (diffH < 1) return '<span class="w-2 h-2 rounded-full bg-emerald-400 glow-dot" style="color:#34D399" title="Loaded recently"></span>';
+    if (diffH < 24) return '<span class="w-2 h-2 rounded-full bg-amber-400" title="Loaded today"></span>';
+    return '<span class="w-2 h-2 rounded-full bg-slate-500" title="Loaded ' + Math.floor(diffH / 24) + 'd ago"></span>';
+  }
+
+  function createdByBadge(author) {
+    if (!author) return '';
+    const colors = {
+      'system': 'bg-slate-700/50 text-slate-400',
+      'user': 'bg-nexo-500/15 text-nexo-400',
+      'nexo': 'bg-nexo-500/15 text-nexo-400',
+      'plugin': 'bg-blue-500/15 text-blue-400',
+    };
+    const c = colors[(author || '').toLowerCase()] || 'bg-slate-700/50 text-slate-400';
+    return `<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold ${c}">${escapeHtml(author)}</span>`;
+  }
+
+  function renderPlugins(plugins) {
+    const grid = document.getElementById('plugins-grid');
+    const noResults = document.getElementById('no-results');
+
+    if (!plugins.length) {
+      grid.innerHTML = '';
+      noResults.classList.remove('hidden');
+      return;
+    }
+
+    noResults.classList.add('hidden');
+
+    grid.innerHTML = plugins.map((p, i) => {
+      const tools = p.tool_names || [];
+      const toolCount = p.tools_count || tools.length || 0;
+      const filename = p.filename || 'unknown';
+      const ext = filename.split('.').pop();
+
+      return `
+        <div class="plugin-card bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card hover:border-nexo-500/30" style="animation-delay: ${i * 60}ms">
+          <!-- Header -->
+          <div class="flex items-start justify-between mb-3">
+            <div class="flex items-center gap-3 min-w-0">
+              <div class="w-10 h-10 rounded-lg bg-nexo-500/10 border border-nexo-500/20 flex items-center justify-center flex-shrink-0">
+                <svg class="w-5 h-5 text-nexo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z"/></svg>
+              </div>
+              <div class="min-w-0">
+                <p class="text-sm font-display font-semibold text-slate-100 truncate">${escapeHtml(filename)}</p>
+                <div class="flex items-center gap-2 mt-0.5">
+                  <span class="text-[10px] font-mono text-slate-500 uppercase">.${escapeHtml(ext)}</span>
+                  ${createdByBadge(p.created_by)}
+                </div>
+              </div>
+            </div>
+            <div class="flex items-center gap-2 flex-shrink-0">
+              ${freshnessBadge(p.loaded_at)}
+              <span class="inline-flex items-center justify-center min-w-[28px] h-6 px-2 rounded-full bg-nexo-500/15 text-nexo-400 text-xs font-bold">${toolCount}</span>
+            </div>
+          </div>
+
+          <!-- Tool tags -->
+          ${tools.length ? `
+            <div class="flex flex-wrap gap-1.5 mb-3">
+              ${tools.slice(0, 12).map(t => `
+                <span class="inline-flex items-center px-2 py-0.5 rounded-md text-[10px] font-mono bg-slate-800/80 text-slate-400 border border-slate-700/30 hover:border-nexo-500/30 hover:text-nexo-400 transition-colors">${escapeHtml(t)}</span>
+              `).join('')}
+              ${tools.length > 12 ? `<span class="inline-flex items-center px-2 py-0.5 rounded-md text-[10px] text-slate-500">+${tools.length - 12} more</span>` : ''}
+            </div>
+          ` : '<p class="text-xs text-slate-600 mb-3">No tools exported</p>'}
+
+          <!-- Footer -->
+          <div class="flex items-center justify-between pt-3 border-t border-slate-800/30">
+            <span class="text-[10px] text-slate-600">${p.loaded_at ? 'Loaded ' + relativeTime(p.loaded_at) : 'Load time unknown'}</span>
+            <span class="text-[10px] text-slate-500 font-mono">${toolCount} tool${toolCount !== 1 ? 's' : ''}</span>
+          </div>
+        </div>
+      `;
+    }).join('');
+  }
+
+  function applyFilters() {
+    const search = (document.getElementById('search-input').value || '').toLowerCase().trim();
+
+    let filtered = allPlugins;
+    if (search) {
+      filtered = filtered.filter(p =>
+        (p.filename || '').toLowerCase().includes(search) ||
+        (p.created_by || '').toLowerCase().includes(search) ||
+        (p.tool_names || []).some(t => t.toLowerCase().includes(search))
+      );
+    }
+
+    renderPlugins(filtered);
+  }
+
+  async function loadData() {
+    const data = await fetchJSON('/api/plugins');
+    if (!data) return;
+
+    allPlugins = data.plugins || [];
+
+    // Stats
+    const totalPlugins = data.total || allPlugins.length;
+    const totalTools = data.total_tools || allPlugins.reduce((sum, p) => sum + (p.tools_count || (p.tool_names || []).length || 0), 0);
+    const avg = totalPlugins > 0 ? (totalTools / totalPlugins).toFixed(1) : '0';
+
+    document.getElementById('stat-plugins').textContent = formatNumber(totalPlugins);
+    document.getElementById('stat-tools').textContent = formatNumber(totalTools);
+    document.getElementById('stat-avg').textContent = avg;
+
+    applyFilters();
+  }
+
+  loadData();
+  setInterval(loadData, 60000);
+</script>
+{% endblock %}

package/src/dashboard/templates/protocol 2.html

@@ -0,0 +1,199 @@
+{% extends "base.html" %}
+
+{% block title %}Protocol Explainability{% endblock %}
+
+{% block page_title %}Protocol Explainability{% endblock %}
+{% block page_subtitle %}
+<span class="text-xs text-slate-500 ml-2">Why the runtime acted, blocked, drifted, or asked for evidence</span>
+{% endblock %}
+
+{% block header_actions %}
+<a href="/api/protocol" class="text-xs text-slate-400 hover:text-slate-200 transition-colors px-2 py-1 rounded hover:bg-slate-800 font-mono">
+  /api/protocol
+</a>
+{% endblock %}
+
+{% block content %}
+{% set compliance = snapshot.protocol_summary or {} %}
+{% set overall = compliance.overall_compliance_pct or 0 %}
+{% set debt = snapshot.debt_summary or {} %}
+{% set workflow = snapshot.workflow_summary or {} %}
+{% set goals = snapshot.goal_summary or {} %}
+{% set conditioned = snapshot.conditioned_learnings or [] %}
+
+<div class="grid grid-cols-5 gap-4 mb-6">
+  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
+    <p class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-1">Compliance 7d</p>
+    <p class="text-2xl font-display font-bold {{ 'text-emerald-400' if overall >= 80 else 'text-amber-400' if overall >= 60 else 'text-red-400' }}">{{ "%.1f"|format(overall) }}%</p>
+  </div>
+  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
+    <p class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-1">Open Debt</p>
+    <p class="text-2xl font-display font-bold {{ 'text-emerald-400' if (debt.open_total or 0) == 0 else 'text-red-400' }}">{{ debt.open_total or 0 }}</p>
+  </div>
+  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
+    <p class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-1">Open Runs</p>
+    <p class="text-2xl font-display font-bold text-slate-100">{{ workflow.open_runs or 0 }}</p>
+  </div>
+  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
+    <p class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-1">Blocked Goals</p>
+    <p class="text-2xl font-display font-bold {{ 'text-red-400' if (goals.blocked or 0) else 'text-emerald-400' }}">{{ goals.blocked or 0 }}</p>
+  </div>
+  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
+    <p class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-1">Conditioned Files</p>
+    <p class="text-2xl font-display font-bold text-nexo-400">{{ conditioned|length }}</p>
+  </div>
+</div>
+
+<div class="grid grid-cols-2 gap-5 mb-6">
+  <section class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
+    <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-4">Protocol Requirements</h2>
+    <div class="space-y-3">
+      {% for key, label in [('guard_check', 'Guard before action'), ('heartbeat', 'Heartbeat with context'), ('change_log', 'Change log after edits'), ('learning_capture', 'Learning capture after correction'), ('done_evidence', 'Evidence before done')] %}
+      {% set item = compliance.get(key, {}) %}
+      <div class="flex items-center justify-between gap-4">
+        <div>
+          <p class="text-sm text-slate-200">{{ label }}</p>
+          <p class="text-[11px] text-slate-500 font-mono">
+            {% if item.required is defined %}required {{ item.required }}{% endif %}
+            {% if item.total is defined %}total {{ item.total }}{% endif %}
+            {% if item.executed is defined %} • executed {{ item.executed }}{% endif %}
+            {% if item.logged is defined %} • logged {{ item.logged }}{% endif %}
+            {% if item.captured is defined %} • captured {{ item.captured }}{% endif %}
+            {% if item.done_tasks is defined %} • done {{ item.done_tasks }}{% endif %}
+          </p>
+        </div>
+        <span class="text-sm font-mono {{ 'text-emerald-400' if (item.compliance_pct or 0) >= 80 else 'text-amber-400' if (item.compliance_pct or 0) >= 60 else 'text-red-400' }}">
+          {{ "%.1f"|format(item.compliance_pct or 0) }}%
+        </span>
+      </div>
+      {% endfor %}
+    </div>
+  </section>
+
+  <section class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
+    <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-4">Debt Pressure</h2>
+    <div class="grid grid-cols-3 gap-3 mb-4">
+      {% for severity in ['error', 'warn', 'info'] %}
+      <div class="rounded-lg border border-slate-800/60 bg-slate-950/50 p-3">
+        <p class="text-[10px] uppercase tracking-wider text-slate-500">{{ severity }}</p>
+        <p class="text-xl font-display font-bold text-slate-100">{{ debt.by_severity.get(severity, 0) }}</p>
+      </div>
+      {% endfor %}
+    </div>
+    <div class="space-y-2 max-h-56 overflow-y-auto pr-1">
+      {% for item in snapshot.recent_debts[:10] %}
+      <div class="rounded-lg border border-slate-800/60 bg-slate-950/50 p-3">
+        <div class="flex items-center justify-between gap-3 mb-1">
+          <span class="text-xs font-semibold {{ 'text-red-400' if item.severity == 'error' else 'text-amber-400' if item.severity == 'warn' else 'text-slate-400' }}">{{ item.debt_type }}</span>
+          <span class="text-[10px] text-slate-500 font-mono">{{ item.status }}</span>
+        </div>
+        <p class="text-xs text-slate-300">{{ item.evidence or 'No evidence summary recorded.' }}</p>
+      </div>
+      {% else %}
+      <p class="text-sm text-slate-500">No protocol debt recorded.</p>
+      {% endfor %}
+    </div>
+  </section>
+</div>
+
+<div class="grid grid-cols-2 gap-5 mb-6">
+  <section class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
+    <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-4">Recent Protocol Tasks</h2>
+    <div class="space-y-3 max-h-[420px] overflow-y-auto pr-1">
+      {% for item in snapshot.recent_tasks[:12] %}
+      <div class="rounded-lg border border-slate-800/60 bg-slate-950/50 p-3">
+        <div class="flex items-center justify-between gap-3 mb-1">
+          <p class="text-sm text-slate-100">{{ item.goal }}</p>
+          <span class="text-[10px] font-mono px-2 py-0.5 rounded bg-slate-800 text-slate-400">{{ item.status }}</span>
+        </div>
+        <p class="text-[11px] text-slate-500 font-mono mb-2">{{ item.task_type }} • cortex={{ item.cortex_mode or 'n/a' }} • response={{ item.response_mode or 'n/a' }}</p>
+        <div class="flex flex-wrap gap-2 text-[10px]">
+          {% if item.guarded_open %}<span class="px-2 py-0.5 rounded bg-nexo-500/15 text-nexo-300">guarded open</span>{% endif %}
+          {% if item.must_verify %}<span class="px-2 py-0.5 rounded bg-amber-500/15 text-amber-300">must verify</span>{% endif %}
+          {% if item.must_change_log %}<span class="px-2 py-0.5 rounded bg-blue-500/15 text-blue-300">must change-log</span>{% endif %}
+          {% if item.has_evidence %}<span class="px-2 py-0.5 rounded bg-emerald-500/15 text-emerald-300">evidence attached</span>{% endif %}
+          {% if item.guard_has_blocking %}<span class="px-2 py-0.5 rounded bg-red-500/15 text-red-300">blocking risk</span>{% endif %}
+        </div>
+      </div>
+      {% else %}
+      <p class="text-sm text-slate-500">No protocol tasks yet.</p>
+      {% endfor %}
+    </div>
+  </section>
+
+  <section class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
+    <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-4">Durable Workflow State</h2>
+    <div class="grid grid-cols-3 gap-3 mb-4">
+      <div class="rounded-lg border border-slate-800/60 bg-slate-950/50 p-3">
+        <p class="text-[10px] uppercase tracking-wider text-slate-500">Open Runs</p>
+        <p class="text-xl font-display font-bold text-slate-100">{{ workflow.open_runs or 0 }}</p>
+      </div>
+      <div class="rounded-lg border border-slate-800/60 bg-slate-950/50 p-3">
+        <p class="text-[10px] uppercase tracking-wider text-slate-500">Blocked Runs</p>
+        <p class="text-xl font-display font-bold {{ 'text-red-400' if (workflow.blocked_runs or 0) else 'text-slate-100' }}">{{ workflow.blocked_runs or 0 }}</p>
+      </div>
+      <div class="rounded-lg border border-slate-800/60 bg-slate-950/50 p-3">
+        <p class="text-[10px] uppercase tracking-wider text-slate-500">Waiting Approval</p>
+        <p class="text-xl font-display font-bold {{ 'text-amber-400' if (workflow.waiting_approval or 0) else 'text-slate-100' }}">{{ workflow.waiting_approval or 0 }}</p>
+      </div>
+    </div>
+    <div class="space-y-3 max-h-[420px] overflow-y-auto pr-1">
+      {% for item in snapshot.recent_runs[:10] %}
+      <div class="rounded-lg border border-slate-800/60 bg-slate-950/50 p-3">
+        <div class="flex items-center justify-between gap-3 mb-1">
+          <p class="text-sm text-slate-100">{{ item.goal }}</p>
+          <span class="text-[10px] font-mono px-2 py-0.5 rounded bg-slate-800 text-slate-400">{{ item.status }}</span>
+        </div>
+        <p class="text-[11px] text-slate-500 font-mono">{{ item.workflow_kind }}{% if item.current_step_key %} • step={{ item.current_step_key }}{% endif %}{% if item.next_action %} • next={{ item.next_action }}{% endif %}</p>
+      </div>
+      {% else %}
+      <p class="text-sm text-slate-500">No workflow runs recorded.</p>
+      {% endfor %}
+    </div>
+  </section>
+</div>
+
+<div class="grid grid-cols-2 gap-5">
+  <section class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
+    <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-4">Conditioned Learnings</h2>
+    <div class="space-y-3 max-h-[420px] overflow-y-auto pr-1">
+      {% for item in conditioned[:12] %}
+      <div class="rounded-lg border border-slate-800/60 bg-slate-950/50 p-3">
+        <div class="flex items-center justify-between gap-3 mb-1">
+          <p class="text-sm text-slate-100">{{ item.title }}</p>
+          <span class="text-[10px] font-mono px-2 py-0.5 rounded bg-slate-800 text-slate-400">{{ item.priority or 'normal' }}</span>
+        </div>
+        <p class="text-xs text-slate-400 break-all">{{ item.applies_to }}</p>
+        <p class="text-[11px] text-slate-500 font-mono mt-1">guard_hits={{ item.guard_hits or 0 }} • weight={{ "%.2f"|format(item.weight or 0) }}</p>
+      </div>
+      {% else %}
+      <p class="text-sm text-slate-500">No conditioned learnings active.</p>
+      {% endfor %}
+    </div>
+  </section>
+
+  <section class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
+    <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-4">Guard Pressure</h2>
+    <div class="grid grid-cols-2 gap-3 mb-4">
+      <div class="rounded-lg border border-slate-800/60 bg-slate-950/50 p-3">
+        <p class="text-[10px] uppercase tracking-wider text-slate-500">Recent Checks</p>
+        <p class="text-xl font-display font-bold text-slate-100">{{ snapshot.guard_summary.recent_checks or 0 }}</p>
+      </div>
+      <div class="rounded-lg border border-slate-800/60 bg-slate-950/50 p-3">
+        <p class="text-[10px] uppercase tracking-wider text-slate-500">Blocking Hits</p>
+        <p class="text-xl font-display font-bold {{ 'text-red-400' if (snapshot.guard_summary.blocking_hits or 0) else 'text-slate-100' }}">{{ snapshot.guard_summary.blocking_hits or 0 }}</p>
+      </div>
+    </div>
+    <div class="space-y-2">
+      {% for area, count in snapshot.guard_summary.areas.items() %}
+      <div class="flex items-center justify-between rounded-lg border border-slate-800/60 bg-slate-950/50 px-3 py-2">
+        <span class="text-sm text-slate-300">{{ area }}</span>
+        <span class="text-xs font-mono text-slate-500">{{ count }} checks</span>
+      </div>
+      {% else %}
+      <p class="text-sm text-slate-500">No guard pressure recorded.</p>
+      {% endfor %}
+    </div>
+  </section>
+</div>
+{% endblock %}

package/src/dashboard/templates/rules 2.html

@@ -0,0 +1,246 @@
+{% extends "base.html" %}
+
+{% block title %}Core Rules{% endblock %}
+
+{% block page_title %}Core Rules Engine{% endblock %}
+{% block page_subtitle %}<span class="text-xs text-slate-500 ml-2">View and understand system rules</span>{% endblock %}
+
+{% block header_actions %}
+<div class="relative">
+  <svg class="w-3.5 h-3.5 absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
+  <input type="text" id="search-input" placeholder="Search rules..." onkeyup="applyFilters()"
+    class="text-xs bg-slate-800 border border-slate-700 rounded-md pl-8 pr-3 py-1.5 text-slate-300 placeholder-slate-500 w-48 focus:outline-none focus:border-nexo-500 focus:w-64 transition-all">
+</div>
+<select id="filter-type" onchange="applyFilters()" class="text-xs bg-slate-800 border border-slate-700 rounded-md px-2 py-1.5 text-slate-300 focus:outline-none focus:border-nexo-500">
+  <option value="">All Types</option>
+  <option value="blocking">Blocking</option>
+  <option value="advisory">Advisory</option>
+</select>
+<select id="filter-importance" onchange="applyFilters()" class="text-xs bg-slate-800 border border-slate-700 rounded-md px-2 py-1.5 text-slate-300 focus:outline-none focus:border-nexo-500">
+  <option value="">All Importance</option>
+  <option value="5">5 Stars</option>
+  <option value="4">4+ Stars</option>
+  <option value="3">3+ Stars</option>
+</select>
+<button onclick="loadData()" class="text-xs text-slate-400 hover:text-slate-200 transition-colors px-2 py-1.5 rounded hover:bg-slate-800">
+  <svg class="w-3.5 h-3.5 inline -mt-0.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
+  Refresh
+</button>
+{% endblock %}
+
+{% block content %}
+<!-- Stats row -->
+<div class="grid grid-cols-4 gap-4 mb-6">
+  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
+    <p class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-1">Total Rules</p>
+    <p class="text-2xl font-display font-bold text-slate-100" id="stat-total">--</p>
+  </div>
+  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
+    <p class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-1">Active</p>
+    <p class="text-2xl font-display font-bold text-emerald-400" id="stat-active">--</p>
+  </div>
+  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
+    <p class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-1">Blocking</p>
+    <p class="text-2xl font-display font-bold text-red-400" id="stat-blocking">--</p>
+  </div>
+  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
+    <p class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-1">Categories</p>
+    <p class="text-2xl font-display font-bold text-nexo-400" id="stat-categories">--</p>
+  </div>
+</div>
+
+<!-- Importance distribution -->
+<div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card mb-6">
+  <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-3">Importance Distribution</h2>
+  <div class="flex items-end gap-3 h-20" id="importance-chart"></div>
+</div>
+
+<!-- Rules by category -->
+<div id="rules-container" class="space-y-4">
+  <div class="py-16 text-center text-sm text-slate-500">Loading rules...</div>
+</div>
+
+<!-- Empty state -->
+<div id="no-results" class="hidden py-16 text-center">
+  <svg class="w-12 h-12 mx-auto text-slate-700 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
+  <p class="text-sm text-slate-500">No rules match your search</p>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+  let allRules = [];
+  let categoriesData = {};
+
+  function importanceStars(n) {
+    const level = n || 1;
+    let stars = '';
+    for (let i = 1; i <= 5; i++) {
+      stars += `<svg class="w-3.5 h-3.5 ${i <= level ? 'text-amber-400' : 'text-slate-700'}" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>`;
+    }
+    return `<div class="flex items-center gap-0.5">${stars}</div>`;
+  }
+
+  function typeBadge(type) {
+    if (type === 'blocking') {
+      return '<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-semibold uppercase bg-red-500/15 text-red-400 border border-red-500/20"><span class="w-1.5 h-1.5 rounded-full bg-red-400"></span>Blocking</span>';
+    }
+    return '<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-semibold uppercase bg-blue-500/15 text-blue-400 border border-blue-500/20"><span class="w-1.5 h-1.5 rounded-full bg-blue-400"></span>Advisory</span>';
+  }
+
+  function toggleCategory(btn) {
+    const section = btn.closest('.rule-category');
+    section.classList.toggle('collapsed');
+    const items = section.querySelector('.category-items');
+    const chevron = section.querySelector('.cat-chevron');
+    if (section.classList.contains('collapsed')) {
+      items.style.maxHeight = '0';
+      chevron.style.transform = 'rotate(0deg)';
+    } else {
+      items.style.maxHeight = items.scrollHeight + 'px';
+      chevron.style.transform = 'rotate(90deg)';
+    }
+  }
+
+  function renderRules(rules, categories) {
+    const container = document.getElementById('rules-container');
+    const noResults = document.getElementById('no-results');
+
+    // Group rules by category
+    const grouped = {};
+    rules.forEach(r => {
+      const cat = r.category || 'Uncategorized';
+      if (!grouped[cat]) grouped[cat] = [];
+      grouped[cat].push(r);
+    });
+
+    const catNames = Object.keys(grouped).sort();
+
+    if (!catNames.length) {
+      container.innerHTML = '';
+      noResults.classList.remove('hidden');
+      return;
+    }
+
+    noResults.classList.add('hidden');
+
+    container.innerHTML = catNames.map(cat => {
+      const catRules = grouped[cat].sort((a, b) => (b.importance || 0) - (a.importance || 0));
+      const blockingCount = catRules.filter(r => r.type === 'blocking').length;
+      return `
+        <div class="rule-category bg-slate-900/50 border border-slate-800/50 rounded-xl overflow-hidden card">
+          <button onclick="toggleCategory(this)"
+            class="w-full flex items-center gap-3 px-5 py-4 hover:bg-slate-800/30 transition-colors text-left">
+            <svg class="w-4 h-4 cat-chevron text-slate-500 transition-transform flex-shrink-0" style="transform:rotate(90deg)" fill="currentColor" viewBox="0 0 20 20">
+              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/>
+            </svg>
+            <span class="text-sm font-display font-semibold text-slate-100">${escapeHtml(cat)}</span>
+            <span class="text-[10px] font-mono text-slate-500 ml-1">${catRules.length} rule${catRules.length !== 1 ? 's' : ''}</span>
+            ${blockingCount > 0 ? `<span class="text-[10px] font-mono text-red-400 ml-auto">${blockingCount} blocking</span>` : ''}
+          </button>
+          <div class="category-items border-t border-slate-800/30 overflow-hidden transition-all duration-300" style="max-height: 2000px">
+            <div class="divide-y divide-slate-800/20">
+              ${catRules.map(r => {
+                const isBlocking = r.type === 'blocking';
+                const borderClass = isBlocking ? 'border-l-2 border-l-red-500/40' : 'border-l-2 border-l-blue-500/20';
+                const inactiveClass = r.is_active === false ? 'opacity-50' : '';
+                return `
+                  <div class="px-5 py-3.5 hover:bg-slate-800/20 transition-colors ${borderClass} ${inactiveClass}">
+                    <div class="flex items-start justify-between gap-4">
+                      <div class="flex-1 min-w-0">
+                        <div class="flex items-center gap-2 mb-1.5">
+                          ${typeBadge(r.type)}
+                          ${importanceStars(r.importance)}
+                          ${r.is_active === false ? '<span class="text-[10px] px-1.5 py-0.5 rounded bg-slate-700/50 text-slate-500">inactive</span>' : ''}
+                          <span class="text-[10px] font-mono text-slate-600 ml-auto">#${r.id || '--'}</span>
+                        </div>
+                        <p class="text-sm text-slate-200 leading-relaxed">${escapeHtml(r.rule || '--')}</p>
+                        ${r.why ? `<p class="text-xs text-slate-500 mt-1 leading-relaxed">${escapeHtml(r.why)}</p>` : ''}
+                      </div>
+                      <div class="flex-shrink-0 mt-1">
+                        <div class="w-8 h-4 rounded-full ${r.is_active !== false ? 'bg-emerald-500/30' : 'bg-slate-700/50'} relative">
+                          <div class="absolute top-0.5 ${r.is_active !== false ? 'right-0.5 bg-emerald-400' : 'left-0.5 bg-slate-500'} w-3 h-3 rounded-full transition-all"></div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                `;
+              }).join('')}
+            </div>
+          </div>
+        </div>
+      `;
+    }).join('');
+  }
+
+  function renderImportanceChart(rules) {
+    const chart = document.getElementById('importance-chart');
+    const counts = [0, 0, 0, 0, 0];
+    rules.forEach(r => {
+      const imp = Math.min(Math.max((r.importance || 1) - 1, 0), 4);
+      counts[imp]++;
+    });
+    const max = Math.max(...counts, 1);
+    const labels = ['1', '2', '3', '4', '5'];
+    const colors = ['bg-slate-600', 'bg-blue-500/60', 'bg-nexo-500/60', 'bg-amber-500/60', 'bg-red-500/60'];
+
+    chart.innerHTML = counts.map((count, i) => {
+      const height = (count / max * 100).toFixed(0);
+      return `
+        <div class="flex-1 flex flex-col items-center gap-1">
+          <span class="text-[10px] font-mono text-slate-400">${count}</span>
+          <div class="w-full rounded-t ${colors[i]} transition-all duration-500 hover:opacity-80" style="height: ${Math.max(height, 6)}%"></div>
+          <div class="flex items-center gap-0.5">
+            <svg class="w-3 h-3 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+            <span class="text-[10px] text-slate-500">${labels[i]}</span>
+          </div>
+        </div>
+      `;
+    }).join('');
+  }
+
+  function applyFilters() {
+    const search = (document.getElementById('search-input').value || '').toLowerCase().trim();
+    const typeFilter = document.getElementById('filter-type').value;
+    const impFilter = parseInt(document.getElementById('filter-importance').value) || 0;
+
+    let filtered = allRules;
+
+    if (search) {
+      filtered = filtered.filter(r =>
+        (r.rule || '').toLowerCase().includes(search) ||
+        (r.category || '').toLowerCase().includes(search) ||
+        (r.why || '').toLowerCase().includes(search)
+      );
+    }
+    if (typeFilter) {
+      filtered = filtered.filter(r => r.type === typeFilter);
+    }
+    if (impFilter) {
+      filtered = filtered.filter(r => (r.importance || 1) >= impFilter);
+    }
+
+    renderRules(filtered, categoriesData);
+  }
+
+  async function loadData() {
+    const data = await fetchJSON('/api/rules');
+    if (!data) return;
+
+    allRules = data.rules || [];
+    categoriesData = data.categories || {};
+
+    // Stats
+    document.getElementById('stat-total').textContent = formatNumber(data.total || allRules.length);
+    document.getElementById('stat-active').textContent = formatNumber(data.active || allRules.filter(r => r.is_active !== false).length);
+    document.getElementById('stat-blocking').textContent = formatNumber(allRules.filter(r => r.type === 'blocking').length);
+    document.getElementById('stat-categories').textContent = Object.keys(categoriesData).length || [...new Set(allRules.map(r => r.category))].filter(Boolean).length;
+
+    renderImportanceChart(allRules);
+    applyFilters();
+  }
+
+  loadData();
+  setInterval(loadData, 60000);
+</script>
+{% endblock %}