nexo-brain 5.3.19 → 5.3.21

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

@@ -0,0 +1,329 @@
+{% extends "base.html" %}
+
+{% block title %}Skills Lab{% endblock %}
+{% block page_title %}Skills Lab{% endblock %}
+
+{% block head %}
+<style>
+  .kanban-col {
+    min-height: 300px;
+    transition: background 0.2s;
+  }
+  .kanban-col:hover {
+    background: rgba(30, 41, 59, 0.3);
+  }
+  .skill-card {
+    transition: all 0.25s ease;
+    cursor: pointer;
+    animation: slideIn 0.3s ease-out forwards;
+  }
+  .skill-card:hover {
+    border-color: rgba(124, 58, 237, 0.4);
+    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.1);
+    transform: translateY(-1px);
+  }
+  .skill-card .detail-panel {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.4s ease, opacity 0.3s ease;
+    opacity: 0;
+  }
+  .skill-card.expanded .detail-panel {
+    max-height: 600px;
+    opacity: 1;
+  }
+  .tag-pill {
+    transition: transform 0.15s;
+  }
+  .tag-pill:hover {
+    transform: scale(1.05);
+  }
+  .trust-bar-fill {
+    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
+  }
+  .level-badge-trace { background: rgba(148, 163, 184, 0.1); color: #94a3b8; border-color: rgba(148, 163, 184, 0.2); }
+  .level-badge-draft { background: rgba(251, 191, 36, 0.1); color: #fbbf24; border-color: rgba(251, 191, 36, 0.2); }
+  .level-badge-candidate { background: rgba(96, 165, 250, 0.1); color: #60a5fa; border-color: rgba(96, 165, 250, 0.2); }
+  .level-badge-published { background: rgba(52, 211, 153, 0.1); color: #34d399; border-color: rgba(52, 211, 153, 0.2); }
+  .level-badge-archived { background: rgba(107, 114, 128, 0.1); color: #6b7280; border-color: rgba(107, 114, 128, 0.2); }
+  .drag-hint {
+    cursor: grab;
+    opacity: 0.3;
+    transition: opacity 0.2s;
+  }
+  .skill-card:hover .drag-hint {
+    opacity: 0.6;
+  }
+  @keyframes slideIn {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+</style>
+{% endblock %}
+
+{% block header_actions %}
+<div class="flex items-center gap-2">
+  <input type="text" id="skill-search" placeholder="Filter skills..."
+    class="bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-xs text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-violet-500 w-52"
+    oninput="filterSkills()">
+</div>
+{% endblock %}
+
+{% block content %}
+<!-- Stats Header -->
+<div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-3 mb-6" id="stats-row">
+  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 text-center">
+    <div class="text-[10px] uppercase tracking-wider text-slate-500 font-semibold mb-1">Total Skills</div>
+    <div class="text-2xl font-display font-bold text-slate-200" id="stat-total">--</div>
+  </div>
+  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 text-center">
+    <div class="text-[10px] uppercase tracking-wider text-slate-500 font-semibold mb-1">Trace</div>
+    <div class="text-2xl font-display font-bold text-slate-400" id="stat-trace">--</div>
+  </div>
+  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 text-center">
+    <div class="text-[10px] uppercase tracking-wider text-slate-500 font-semibold mb-1">Draft</div>
+    <div class="text-2xl font-display font-bold text-amber-400" id="stat-draft">--</div>
+  </div>
+  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 text-center">
+    <div class="text-[10px] uppercase tracking-wider text-slate-500 font-semibold mb-1">Candidate</div>
+    <div class="text-2xl font-display font-bold text-blue-400" id="stat-candidate">--</div>
+  </div>
+  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 text-center">
+    <div class="text-[10px] uppercase tracking-wider text-slate-500 font-semibold mb-1">Published</div>
+    <div class="text-2xl font-display font-bold text-emerald-400" id="stat-published">--</div>
+  </div>
+  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 text-center">
+    <div class="text-[10px] uppercase tracking-wider text-slate-500 font-semibold mb-1">Archived</div>
+    <div class="text-2xl font-display font-bold text-gray-500" id="stat-archived">--</div>
+  </div>
+</div>
+
+<!-- Top Skills by Usage -->
+<div class="mb-6">
+  <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-3">Top Skills by Usage</h2>
+  <div class="flex gap-3 overflow-x-auto pb-2" id="top-skills">
+    <div class="text-xs text-slate-600 py-3">Loading...</div>
+  </div>
+</div>
+
+<!-- Kanban Board -->
+<div class="mb-6">
+  <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-3">Skill Lifecycle</h2>
+  <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-3" id="kanban-board">
+    <!-- Columns generated by JS -->
+  </div>
+</div>
+
+<!-- Recent Usage Timeline -->
+<div>
+  <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-3">Recent Usage</h2>
+  <div class="space-y-2" id="usage-timeline">
+    <div class="text-xs text-slate-600 text-center py-6">Loading usage data...</div>
+  </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+  const REFRESH_MS = 60000;
+  const LEVELS = ['trace', 'draft', 'candidate', 'published', 'archived'];
+  const LEVEL_COLORS = {
+    trace: { bg: 'bg-slate-500/10', border: 'border-slate-500/20', text: 'text-slate-400', dot: 'bg-slate-400' },
+    draft: { bg: 'bg-amber-500/10', border: 'border-amber-500/20', text: 'text-amber-400', dot: 'bg-amber-400' },
+    candidate: { bg: 'bg-blue-500/10', border: 'border-blue-500/20', text: 'text-blue-400', dot: 'bg-blue-400' },
+    published: { bg: 'bg-emerald-500/10', border: 'border-emerald-500/20', text: 'text-emerald-400', dot: 'bg-emerald-400' },
+    archived: { bg: 'bg-gray-500/10', border: 'border-gray-500/20', text: 'text-gray-500', dot: 'bg-gray-500' },
+  };
+
+  let allSkills = [];
+
+  const TAG_COLORS = [
+    'bg-violet-500/15 text-violet-300', 'bg-cyan-500/15 text-cyan-300',
+    'bg-pink-500/15 text-pink-300', 'bg-emerald-500/15 text-emerald-300',
+    'bg-amber-500/15 text-amber-300', 'bg-blue-500/15 text-blue-300',
+    'bg-rose-500/15 text-rose-300', 'bg-indigo-500/15 text-indigo-300',
+  ];
+
+  function tagColor(tag) {
+    let hash = 0;
+    for (let i = 0; i < tag.length; i++) hash = tag.charCodeAt(i) + ((hash << 5) - hash);
+    return TAG_COLORS[Math.abs(hash) % TAG_COLORS.length];
+  }
+
+  function trustColor(score) {
+    if (score >= 0.8) return 'bg-emerald-500';
+    if (score >= 0.5) return 'bg-violet-500';
+    if (score >= 0.3) return 'bg-amber-500';
+    return 'bg-red-500';
+  }
+
+  function renderSkillCard(skill) {
+    const level = (skill.level || 'trace').toLowerCase();
+    const colors = LEVEL_COLORS[level] || LEVEL_COLORS.trace;
+    const trust = skill.trust_score != null ? skill.trust_score : 0;
+    const tags = skill.tags || [];
+    const useCount = skill.use_count || 0;
+    const steps = skill.steps || [];
+    const gotchas = skill.gotchas || [];
+    const desc = skill.description || '';
+
+    const tagsHtml = tags.slice(0, 5).map(t =>
+      `<span class="tag-pill text-[10px] px-1.5 py-0.5 rounded-full ${tagColor(t)}">${escapeHtml(t)}</span>`
+    ).join('');
+
+    const stepsHtml = steps.length > 0
+      ? `<div class="mt-3"><div class="text-[10px] uppercase tracking-wider text-slate-500 font-semibold mb-1">Steps</div><ol class="list-decimal list-inside space-y-0.5">${steps.map(s => `<li class="text-xs text-slate-400">${escapeHtml(typeof s === 'string' ? s : s.description || JSON.stringify(s))}</li>`).join('')}</ol></div>`
+      : '';
+
+    const gotchasHtml = gotchas.length > 0
+      ? `<div class="mt-3"><div class="text-[10px] uppercase tracking-wider text-amber-500/60 font-semibold mb-1">Gotchas</div><ul class="space-y-0.5">${gotchas.map(g => `<li class="text-xs text-amber-300/70">&#x26A0; ${escapeHtml(typeof g === 'string' ? g : JSON.stringify(g))}</li>`).join('')}</ul></div>`
+      : '';
+
+    return `<div class="skill-card bg-slate-900/50 border border-slate-800/50 rounded-xl p-3 mb-2" data-name="${escapeHtml(skill.name || '')}" data-level="${level}" onclick="this.classList.toggle('expanded')">
+      <div class="flex items-start justify-between mb-1.5">
+        <div class="flex items-center gap-1.5 min-w-0">
+          <svg class="w-3 h-3 drag-hint text-slate-600 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><circle cx="6" cy="5" r="1.5"/><circle cx="14" cy="5" r="1.5"/><circle cx="6" cy="10" r="1.5"/><circle cx="14" cy="10" r="1.5"/><circle cx="6" cy="15" r="1.5"/><circle cx="14" cy="15" r="1.5"/></svg>
+          <span class="text-sm font-medium text-slate-200 truncate">${escapeHtml(skill.name || 'Unnamed')}</span>
+        </div>
+        <span class="text-[10px] font-mono text-slate-600 flex-shrink-0 ml-2">#${skill.id || '?'}</span>
+      </div>
+
+      <!-- Trust score bar -->
+      <div class="flex items-center gap-2 mb-2">
+        <div class="flex-1 h-1.5 bg-slate-800 rounded-full overflow-hidden">
+          <div class="trust-bar-fill h-full rounded-full ${trustColor(trust)}" style="width:${(trust * 100).toFixed(0)}%"></div>
+        </div>
+        <span class="text-[10px] font-mono text-slate-500">${trust.toFixed(2)}</span>
+      </div>
+
+      <div class="flex items-center gap-2 flex-wrap">
+        <span class="text-[10px] font-mono text-slate-500">${useCount} uses</span>
+        ${tagsHtml}
+      </div>
+
+      <!-- Expandable detail -->
+      <div class="detail-panel">
+        <div class="mt-3 pt-3 border-t border-slate-800/50">
+          ${desc ? `<p class="text-xs text-slate-400 leading-relaxed mb-2">${escapeHtml(desc)}</p>` : ''}
+          ${stepsHtml}
+          ${gotchasHtml}
+        </div>
+      </div>
+    </div>`;
+  }
+
+  function renderKanban(skills) {
+    const board = document.getElementById('kanban-board');
+    const grouped = {};
+    LEVELS.forEach(l => grouped[l] = []);
+    skills.forEach(s => {
+      const level = (s.level || 'trace').toLowerCase();
+      if (grouped[level]) grouped[level].push(s);
+      else grouped.trace.push(s);
+    });
+
+    board.innerHTML = LEVELS.map(level => {
+      const colors = LEVEL_COLORS[level];
+      const items = grouped[level];
+      return `<div class="kanban-col ${colors.bg} border ${colors.border} rounded-xl p-3">
+        <div class="flex items-center gap-2 mb-3 pb-2 border-b ${colors.border}">
+          <span class="w-2 h-2 rounded-full ${colors.dot}"></span>
+          <span class="text-xs uppercase tracking-wider ${colors.text} font-semibold">${level}</span>
+          <span class="text-[10px] font-mono text-slate-600 ml-auto">${items.length}</span>
+        </div>
+        <div class="space-y-0">
+          ${items.length === 0
+            ? `<div class="text-[10px] text-slate-600 text-center py-4">No skills</div>`
+            : items.map(renderSkillCard).join('')}
+        </div>
+      </div>`;
+    }).join('');
+  }
+
+  function renderTopSkills(skills) {
+    const container = document.getElementById('top-skills');
+    const sorted = [...skills].sort((a, b) => (b.use_count || 0) - (a.use_count || 0)).slice(0, 8);
+    if (sorted.length === 0) {
+      container.innerHTML = '<div class="text-xs text-slate-600 py-3">No skill usage data</div>';
+      return;
+    }
+    const maxUse = sorted[0].use_count || 1;
+    container.innerHTML = sorted.map(s => {
+      const pct = ((s.use_count || 0) / maxUse * 100).toFixed(0);
+      const level = (s.level || 'trace').toLowerCase();
+      const colors = LEVEL_COLORS[level] || LEVEL_COLORS.trace;
+      return `<div class="flex-shrink-0 bg-slate-900/50 border border-slate-800/50 rounded-xl p-3 w-44">
+        <div class="text-sm font-medium text-slate-200 truncate mb-1">${escapeHtml(s.name || 'Unnamed')}</div>
+        <div class="flex items-center gap-2 mb-1">
+          <div class="flex-1 h-1 bg-slate-800 rounded-full overflow-hidden">
+            <div class="h-full rounded-full bg-violet-500" style="width:${pct}%"></div>
+          </div>
+        </div>
+        <div class="flex items-center justify-between">
+          <span class="text-[10px] font-mono text-slate-500">${s.use_count || 0} uses</span>
+          <span class="text-[10px] px-1 py-0.5 rounded level-badge-${level}">${level}</span>
+        </div>
+      </div>`;
+    }).join('');
+  }
+
+  function renderUsageTimeline(usage) {
+    const container = document.getElementById('usage-timeline');
+    if (!usage || usage.length === 0) {
+      container.innerHTML = '<div class="text-xs text-slate-600 text-center py-6">No recent usage</div>';
+      return;
+    }
+    container.innerHTML = usage.slice(0, 20).map(u => {
+      const skillName = u.skill_name || u.name || `Skill #${u.skill_id || '?'}`;
+      const when = u.created_at ? relativeTime(u.created_at) : '';
+      const result = u.result || u.outcome || '';
+      return `<div class="flex items-center gap-3 bg-slate-900/30 border border-slate-800/30 rounded-lg px-3 py-2">
+        <div class="w-1.5 h-1.5 rounded-full bg-violet-500 flex-shrink-0"></div>
+        <span class="text-xs text-slate-300 font-medium">${escapeHtml(skillName)}</span>
+        ${result ? `<span class="text-[10px] px-1.5 py-0.5 rounded ${result === 'success' ? 'bg-emerald-500/10 text-emerald-400' : 'bg-red-500/10 text-red-400'}">${escapeHtml(result)}</span>` : ''}
+        <span class="text-[10px] text-slate-600 font-mono ml-auto">${escapeHtml(when)}</span>
+      </div>`;
+    }).join('');
+  }
+
+  function filterSkills() {
+    const q = document.getElementById('skill-search').value.trim().toLowerCase();
+    const filtered = q ? allSkills.filter(s =>
+      (s.name || '').toLowerCase().includes(q) ||
+      (s.description || '').toLowerCase().includes(q) ||
+      (s.tags || []).some(t => t.toLowerCase().includes(q))
+    ) : allSkills;
+    renderKanban(filtered);
+  }
+
+  async function loadSkills() {
+    const data = await fetchJSON('/api/skills');
+    if (!data) return;
+
+    allSkills = data.skills || [];
+    const usage = data.usage || [];
+    const levels = data.levels || {};
+
+    // Stats
+    document.getElementById('stat-total').textContent = formatNumber(allSkills.length);
+    const countByLevel = {};
+    LEVELS.forEach(l => countByLevel[l] = 0);
+    allSkills.forEach(s => {
+      const l = (s.level || 'trace').toLowerCase();
+      if (countByLevel[l] !== undefined) countByLevel[l]++;
+    });
+    LEVELS.forEach(l => {
+      const el = document.getElementById(`stat-${l}`);
+      if (el) el.textContent = formatNumber(levels[l] != null ? levels[l] : countByLevel[l]);
+    });
+
+    renderKanban(allSkills);
+    renderTopSkills(allSkills);
+    renderUsageTimeline(usage);
+  }
+
+  // Init
+  loadSkills();
+  setInterval(loadSkills, REFRESH_MS);
+</script>
+{% endblock %}

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

@@ -0,0 +1,73 @@
+{% extends "base.html" %}
+
+{% block title %}Somatic Markers{% endblock %}
+{% block page_title %}Somatic Markers{% endblock %}
+
+{% block content %}
+<div class="max-w-3xl">
+  <p class="text-sm text-slate-400 mb-6">Risk associations from past errors. Higher scores indicate areas needing extra caution.</p>
+  <div id="risks" class="space-y-2"></div>
+  <div id="empty" class="p-12 text-center text-slate-500 text-sm hidden">No somatic markers recorded</div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+  function barColor(score) {
+    if (score > 5) return 'bg-red-500';
+    if (score > 2) return 'bg-amber-500';
+    return 'bg-emerald-500';
+  }
+
+  function scoreColor(score) {
+    if (score > 5) return 'text-red-400';
+    if (score > 2) return 'text-amber-400';
+    return 'text-emerald-400';
+  }
+
+  function loadData() {
+    fetch('/api/somatic')
+      .then(r => r.json())
+      .then(data => {
+        const risks = (data.risks || []).slice().sort((a, b) => {
+          const sa = Math.abs(a.cumulative_score || a.score || 0);
+          const sb = Math.abs(b.cumulative_score || b.score || 0);
+          return sb - sa;
+        });
+
+        const container = document.getElementById('risks');
+        const empty = document.getElementById('empty');
+
+        if (!risks.length) {
+          empty.classList.remove('hidden');
+          return;
+        }
+
+        const max = Math.max(...risks.map(r => Math.abs(r.cumulative_score || r.score || 0)), 1);
+
+        container.innerHTML = risks.map(r => {
+          const score = Math.abs(r.cumulative_score || r.score || 0);
+          const pct = Math.min((score / max) * 100, 100);
+          const target_type = r.target_type || r.type || '';
+          const target = (r.target || r.name || '').replace(/</g, '&lt;');
+          const bc = barColor(score);
+          const sc = scoreColor(score);
+
+          return `<div class="flex items-center gap-3 py-1">
+<span class="text-xs w-20 text-right text-slate-400 flex-shrink-0 font-medium">${target_type}</span>
+<span class="text-sm w-56 truncate text-slate-200 flex-shrink-0">${target}</span>
+<div class="flex-1 h-2.5 bg-slate-800 rounded-full overflow-hidden">
+  <div class="h-full rounded-full ${bc}" style="width:${pct.toFixed(1)}%"></div>
+</div>
+<span class="text-sm font-mono ${sc} w-12 text-right font-medium">${score.toFixed(1)}</span>
+</div>`;
+        }).join('');
+      })
+      .catch(err => {
+        document.getElementById('risks').innerHTML = `<p class="text-xs text-red-400">Failed to load: ${err.message}</p>`;
+      });
+  }
+
+  loadData();
+</script>
+{% endblock %}

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

@@ -0,0 +1,133 @@
+{% extends "base.html" %}
+
+{% block title %}Prospective Triggers{% endblock %}
+{% block page_title %}Prospective Triggers{% endblock %}
+
+{% block content %}
+<div class="space-y-5">
+  <!-- Stats -->
+  <div class="grid grid-cols-3 gap-4">
+    <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 card">
+      <div class="text-xs uppercase tracking-wider text-slate-400 font-medium mb-2">Total Triggers</div>
+      <div class="text-xl font-mono font-semibold text-slate-200" id="total-triggers">--</div>
+    </div>
+    <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 card">
+      <div class="flex items-center gap-2 mb-2">
+        <span class="w-2 h-2 rounded-full bg-emerald-500 glow-dot" style="color: #10B981;"></span>
+        <div class="text-xs uppercase tracking-wider text-emerald-400/70 font-medium">Armed</div>
+      </div>
+      <div class="text-xl font-mono font-semibold text-emerald-400" id="armed-count">--</div>
+    </div>
+    <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 card">
+      <div class="text-xs uppercase tracking-wider text-slate-400 font-medium mb-2">Fired</div>
+      <div class="text-xl font-mono font-semibold text-slate-400" id="fired-count">--</div>
+    </div>
+  </div>
+
+  <!-- Triggers grid -->
+  <div>
+    <div class="flex items-center gap-3 mb-3">
+      <div class="text-xs uppercase tracking-wider text-slate-400 font-medium">Armed Triggers</div>
+      <span class="w-2 h-2 rounded-full bg-emerald-500 glow-dot" style="color: #10B981;"></span>
+    </div>
+    <div class="grid grid-cols-2 gap-4" id="armed-triggers">
+      <div class="text-xs text-slate-600 py-4 text-center col-span-2">loading...</div>
+    </div>
+  </div>
+
+  <div>
+    <div class="text-xs uppercase tracking-wider text-slate-400 font-medium mb-3">Fired / Inactive</div>
+    <div class="grid grid-cols-2 gap-4" id="fired-triggers">
+      <div class="text-xs text-slate-600 py-4 text-center col-span-2">loading...</div>
+    </div>
+  </div>
+</div>
+
+<style>
+  @keyframes triggerPulse {
+    0%, 100% { border-color: rgba(16,185,129,0.2); }
+    50% { border-color: rgba(16,185,129,0.5); }
+  }
+  .trigger-armed { animation: triggerPulse 3s ease-in-out infinite; }
+</style>
+{% endblock %}
+
+{% block scripts %}
+<script>
+function renderTrigger(t, isArmed) {
+  const pattern = t.trigger_pattern || t.pattern || '--';
+  const action = t.action || '--';
+  const context = t.context || '';
+  const status = t.status || 'armed';
+  const firedAt = t.fired_at;
+
+  if (isArmed) {
+    return `<div class="bg-slate-900/50 border border-emerald-500/20 rounded-xl p-5 card trigger-armed">
+      <div class="flex items-center gap-2 mb-3">
+        <span class="relative flex h-2 w-2">
+          <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
+          <span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
+        </span>
+        <span class="text-xs font-medium text-emerald-400 uppercase tracking-wider">Armed</span>
+      </div>
+      <div class="mb-3">
+        <div class="text-[10px] text-slate-500 uppercase mb-1">Pattern</div>
+        <div class="text-sm text-slate-200 font-mono bg-slate-800/50 rounded-lg px-3 py-2">${escapeHtml(pattern)}</div>
+      </div>
+      <div class="mb-3">
+        <div class="text-[10px] text-slate-500 uppercase mb-1">Action</div>
+        <div class="text-xs text-slate-300">${escapeHtml(action)}</div>
+      </div>
+      ${context ? `<div class="text-[10px] text-slate-500 mt-2">${escapeHtml(context)}</div>` : ''}
+    </div>`;
+  } else {
+    return `<div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card opacity-60 hover:opacity-80 transition-opacity">
+      <div class="flex items-center gap-2 mb-3">
+        <span class="w-2 h-2 rounded-full bg-slate-600"></span>
+        <span class="text-xs font-medium text-slate-500 uppercase tracking-wider">${escapeHtml(status)}</span>
+        ${firedAt ? `<span class="ml-auto text-[10px] text-slate-600">${relativeTime(firedAt)}</span>` : ''}
+      </div>
+      <div class="mb-3">
+        <div class="text-[10px] text-slate-600 uppercase mb-1">Pattern</div>
+        <div class="text-xs text-slate-400 font-mono bg-slate-800/30 rounded-lg px-3 py-2">${escapeHtml(pattern)}</div>
+      </div>
+      <div>
+        <div class="text-[10px] text-slate-600 uppercase mb-1">Action</div>
+        <div class="text-xs text-slate-500">${escapeHtml(action)}</div>
+      </div>
+      ${context ? `<div class="text-[10px] text-slate-600 mt-2">${escapeHtml(context)}</div>` : ''}
+    </div>`;
+  }
+}
+
+async function loadTriggers() {
+  const data = await fetchJSON('/api/triggers');
+  if (!data) return;
+
+  const triggers = data.triggers || [];
+  const armed = triggers.filter(t => t.status === 'armed' || t.status === 'active');
+  const fired = triggers.filter(t => t.status !== 'armed' && t.status !== 'active');
+
+  document.getElementById('total-triggers').textContent = triggers.length;
+  document.getElementById('armed-count').textContent = data.armed ?? armed.length;
+  document.getElementById('fired-count').textContent = data.fired ?? fired.length;
+
+  const armedContainer = document.getElementById('armed-triggers');
+  if (armed.length) {
+    armedContainer.innerHTML = armed.map(t => renderTrigger(t, true)).join('');
+  } else {
+    armedContainer.innerHTML = '<div class="col-span-2 bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 text-xs text-slate-500 text-center">No armed triggers</div>';
+  }
+
+  const firedContainer = document.getElementById('fired-triggers');
+  if (fired.length) {
+    firedContainer.innerHTML = fired.map(t => renderTrigger(t, false)).join('');
+  } else {
+    firedContainer.innerHTML = '<div class="col-span-2 bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 text-xs text-slate-500 text-center">No fired triggers</div>';
+  }
+}
+
+loadTriggers();
+setInterval(loadTriggers, 60000);
+</script>
+{% endblock %}