nexo-brain 5.3.26 → 5.3.27

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

@@ -1,321 +0,0 @@
-{% extends "base.html" %}
-
-{% block title %}Cortex Monitor{% endblock %}
-
-{% block page_title %}Cortex Monitor{% endblock %}
-{% block page_subtitle %}
-<span class="text-xs text-slate-500 ml-2">Pre-action gate activity</span>
-<span class="ml-3 flex items-center gap-1.5" id="pulse-indicator">
-  <span class="w-2 h-2 rounded-full bg-emerald-400 glow-dot" style="color: #34D399;"></span>
-  <span class="text-[10px] text-emerald-400 uppercase tracking-wider font-semibold">Live</span>
-</span>
-{% endblock %}
-
-{% block header_actions %}
-<select id="filter-mode" onchange="applyFilters()" class="text-xs bg-slate-800 border border-slate-700 rounded-md px-2 py-1 text-slate-300 focus:outline-none focus:border-nexo-500">
-  <option value="">All Modes</option>
-  <option value="conservative">Conservative</option>
-  <option value="balanced">Balanced</option>
-  <option value="full">Full</option>
-</select>
-<select id="filter-domain" onchange="applyFilters()" class="text-xs bg-slate-800 border border-slate-700 rounded-md px-2 py-1 text-slate-300 focus:outline-none focus:border-nexo-500">
-  <option value="">All Domains</option>
-</select>
-<button onclick="loadData()" class="text-xs text-slate-400 hover:text-slate-200 transition-colors px-2 py-1 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">Alt Evaluations</p>
-    <p class="text-2xl font-display font-bold text-slate-100" id="stat-decisions">--</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">Accept Rate</p>
-    <p class="text-2xl font-display font-bold text-nexo-400" id="stat-confidence">--</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">Linked Outcomes</p>
-    <p class="text-2xl font-display font-bold text-slate-100" id="stat-logs">--</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">Override Rate</p>
-    <p class="text-2xl font-display font-bold text-amber-400" id="stat-success">--</p>
-  </div>
-</div>
-
-<!-- Confidence distribution mini-chart -->
-<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">Confidence Distribution</h2>
-  <div id="confidence-chart" class="flex items-end gap-1 h-16"></div>
-  <div class="flex justify-between mt-1 text-[10px] text-slate-600">
-    <span>0%</span><span>25%</span><span>50%</span><span>75%</span><span>100%</span>
-  </div>
-</div>
-
-<!-- Split view: Logs + Decisions -->
-<div class="grid grid-cols-2 gap-5">
-  <!-- Cortex Logs -->
-  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
-    <div class="flex items-center justify-between mb-4">
-      <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold">Cortex Logs</h2>
-      <span class="text-[10px] text-slate-600 font-mono" id="logs-count">--</span>
-    </div>
-    <div id="cortex-logs" class="space-y-2 max-h-[600px] overflow-y-auto pr-1">
-      <div class="py-12 text-center text-sm text-slate-500">Loading cortex logs...</div>
-    </div>
-  </div>
-
-  <!-- Decisions -->
-  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
-    <div class="flex items-center justify-between mb-4">
-      <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold">Decisions</h2>
-      <span class="text-[10px] text-slate-600 font-mono" id="decisions-count">--</span>
-    </div>
-    <div id="decisions-list" class="space-y-3 max-h-[600px] overflow-y-auto pr-1">
-      <div class="py-12 text-center text-sm text-slate-500">Loading decision support...</div>
-    </div>
-  </div>
-</div>
-{% endblock %}
-
-{% block scripts %}
-<style>
-  @keyframes cortexPulse {
-    0%, 100% { opacity: 0.5; transform: scale(1); }
-    50% { opacity: 1; transform: scale(1.15); }
-  }
-  .cortex-pulse { animation: cortexPulse 2s ease-in-out infinite; }
-</style>
-<script>
-  let allLogs = [];
-  let allDecisions = [];
-  let allEvaluations = [];
-
-  const modeColors = {
-    conservative: { bg: 'bg-blue-500/15', text: 'text-blue-400', border: 'border-blue-500/30' },
-    balanced:     { bg: 'bg-nexo-500/15', text: 'text-nexo-400', border: 'border-nexo-500/30' },
-    full:         { bg: 'bg-amber-500/15', text: 'text-amber-400', border: 'border-amber-500/30' },
-  };
-
-  function getModeBadge(mode) {
-    const c = modeColors[mode] || modeColors.balanced;
-    return `<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold uppercase ${c.bg} ${c.text}">${escapeHtml(mode || 'unknown')}</span>`;
-  }
-
-  function getOutcomeBadge(outcome) {
-    if (!outcome) return '<span class="text-[10px] text-slate-600">pending</span>';
-    const isGood = outcome === 'success' || outcome === 'positive' || outcome === 'good';
-    const isBad = outcome === 'failure' || outcome === 'negative' || outcome === 'bad';
-    if (isGood) return '<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-semibold bg-emerald-500/15 text-emerald-400"><span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>Success</span>';
-    if (isBad) return '<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-semibold bg-red-500/15 text-red-400"><span class="w-1.5 h-1.5 rounded-full bg-red-400"></span>Failed</span>';
-    return `<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold bg-slate-700/50 text-slate-400">${escapeHtml(outcome)}</span>`;
-  }
-
-  function confidenceBadge(confidence) {
-    if (confidence == null) return '';
-    const pct = typeof confidence === 'number' ? (confidence > 1 ? confidence : confidence * 100) : parseFloat(confidence);
-    const color = pct >= 80 ? 'text-emerald-400' : pct >= 50 ? 'text-amber-400' : 'text-red-400';
-    return `<span class="font-mono text-xs font-medium ${color}">${pct.toFixed(0)}%</span>`;
-  }
-
-  function renderLogs(logs) {
-    const container = document.getElementById('cortex-logs');
-    document.getElementById('logs-count').textContent = `${logs.length} entries`;
-
-    if (!logs.length) {
-      container.innerHTML = '<div class="py-12 text-center text-sm text-slate-500">No cortex logs found</div>';
-      return;
-    }
-
-    container.innerHTML = logs.slice(0, 50).map((log, i) => {
-      const hasWarnings = log.warnings && (Array.isArray(log.warnings) ? log.warnings.length > 0 : true);
-      const warningBorder = hasWarnings ? 'border-l-2 border-l-amber-500/50' : 'border-l-2 border-l-transparent';
-      return `
-        <div class="bg-slate-800/30 rounded-lg p-3 ${warningBorder} hover:bg-slate-800/50 transition-colors animate-fade-in" style="animation-delay: ${i * 30}ms">
-          <div class="flex items-center justify-between mb-1.5">
-            ${getModeBadge(log.mode)}
-            <span class="text-[10px] text-slate-600">${relativeTime(log.created_at)}</span>
-          </div>
-          <p class="text-sm text-slate-200 mb-1">${escapeHtml(log.goal || '--')}</p>
-          <div class="flex items-center gap-2 flex-wrap">
-            ${log.task_type ? `<span class="text-[10px] px-1.5 py-0.5 rounded bg-slate-700/50 text-slate-400 font-mono">${escapeHtml(log.task_type)}</span>` : ''}
-            ${log.trust_score != null ? `<span class="text-[10px] font-mono text-slate-500">trust: ${Number(log.trust_score).toFixed(1)}</span>` : ''}
-          </div>
-          ${hasWarnings ? `
-            <div class="mt-2 bg-amber-500/10 rounded px-2 py-1.5">
-              <p class="text-[10px] text-amber-400 font-semibold uppercase tracking-wider mb-0.5">Warnings</p>
-              <p class="text-xs text-amber-300/80">${escapeHtml(Array.isArray(log.warnings) ? log.warnings.join(', ') : String(log.warnings))}</p>
-            </div>
-          ` : ''}
-        </div>
-      `;
-    }).join('');
-  }
-
-  function renderDecisions(evaluations, decisions) {
-    const container = document.getElementById('decisions-list');
-    document.getElementById('decisions-count').textContent = `${evaluations.length} evaluations / ${decisions.length} decisions`;
-
-    if (!evaluations.length && !decisions.length) {
-      container.innerHTML = '<div class="py-12 text-center text-sm text-slate-500">No decision support recorded</div>';
-      return;
-    }
-
-    const evaluationCards = evaluations.slice(0, 25).map((item, i) => {
-      const scores = Array.isArray(item.scores) ? item.scores : JSON.parse(item.scores || '[]');
-      const top = scores[0] || null;
-      const selectedChanged = item.selection_source === 'override';
-      return `
-      <div class="bg-slate-800/30 rounded-lg p-4 hover:bg-slate-800/50 transition-colors border border-transparent hover:border-slate-700/50 animate-fade-in" style="animation-delay: ${i * 35}ms">
-        <div class="flex items-center justify-between mb-2 gap-2">
-          <div class="flex items-center gap-2 flex-wrap">
-            ${item.impact_level ? `<span class="inline-flex items-center px-2 py-0.5 rounded-md text-[10px] font-semibold bg-red-500/15 text-red-300 uppercase tracking-wider">${escapeHtml(item.impact_level)}</span>` : ''}
-            ${item.area ? `<span class="inline-flex items-center px-2 py-0.5 rounded-md text-[10px] font-semibold bg-nexo-500/15 text-nexo-400 uppercase tracking-wider">${escapeHtml(item.area)}</span>` : ''}
-          </div>
-          <span class="text-[10px] text-slate-600">${relativeTime(item.created_at)}</span>
-        </div>
-        <p class="text-sm text-slate-200 mb-2">${escapeHtml(item.goal || '--')}</p>
-        <div class="grid grid-cols-2 gap-2 mb-2">
-          <div class="bg-slate-900/40 rounded-md p-2">
-            <p class="text-[10px] uppercase tracking-wider text-slate-500 mb-1">Recommended</p>
-            <p class="text-xs text-emerald-400 font-semibold">${escapeHtml(item.recommended_choice || '--')}</p>
-          </div>
-          <div class="bg-slate-900/40 rounded-md p-2">
-            <p class="text-[10px] uppercase tracking-wider text-slate-500 mb-1">Selected</p>
-            <p class="text-xs ${selectedChanged ? 'text-amber-400' : 'text-slate-200'} font-semibold">${escapeHtml(item.selected_choice || '--')}</p>
-          </div>
-        </div>
-        ${item.recommended_reasoning ? `<p class="text-xs text-slate-400 mb-2">${escapeHtml(item.recommended_reasoning)}</p>` : ''}
-        ${item.goal_profile_id ? `
-          <div class="mt-2 bg-slate-900/40 rounded px-2 py-1.5">
-            <p class="text-[10px] text-slate-500 uppercase tracking-wider font-semibold mb-0.5">Goal Profile</p>
-            <p class="text-xs text-nexo-300 font-semibold">${escapeHtml(item.goal_profile_id)}</p>
-            ${Array.isArray(item.goal_profile_labels) && item.goal_profile_labels.length ? `<p class="text-[10px] text-slate-400 mt-1">${escapeHtml(item.goal_profile_labels.join(' · '))}</p>` : ''}
-          </div>
-        ` : ''}
-        ${item.linked_outcome_id ? `
-          <div class="mt-2 text-[10px] text-slate-500">
-            outcome #${escapeHtml(String(item.linked_outcome_id))}
-            ${item.linked_outcome?.status ? `· <span class="text-slate-300">${escapeHtml(String(item.linked_outcome.status))}</span>` : ''}
-          </div>
-        ` : ''}
-        ${selectedChanged && item.selection_reason ? `
-          <div class="mt-2 bg-amber-500/10 rounded px-2 py-1.5">
-            <p class="text-[10px] text-amber-400 font-semibold uppercase tracking-wider mb-0.5">Override</p>
-            <p class="text-xs text-amber-200/90">${escapeHtml(item.selection_reason)}</p>
-          </div>
-        ` : ''}
-        ${top ? `
-          <div class="mt-2 text-[10px] text-slate-500 font-mono">
-            top=${Number(top.total_score || 0).toFixed(2)} impact=${Number(top.impact || 0).toFixed(1)} success=${Number(top.success_probability || 0).toFixed(1)} risk=${Number(top.risk_level || 0).toFixed(1)}
-          </div>
-        ` : ''}
-      </div>
-      `;
-    }).join('');
-
-    const decisionCards = decisions.slice(0, 20).map((d, i) => `
-      <div class="bg-slate-800/30 rounded-lg p-4 hover:bg-slate-800/50 transition-colors border border-transparent hover:border-slate-700/50 animate-fade-in" style="animation-delay: ${i * 40}ms">
-        <div class="flex items-center justify-between mb-2">
-          <div class="flex items-center gap-2">
-            ${d.domain ? `<span class="inline-flex items-center px-2 py-0.5 rounded-md text-[10px] font-semibold bg-nexo-500/15 text-nexo-400 uppercase tracking-wider">${escapeHtml(d.domain)}</span>` : ''}
-            ${confidenceBadge(d.confidence)}
-          </div>
-          ${getOutcomeBadge(d.outcome)}
-        </div>
-        <p class="text-sm text-slate-200 mb-2">${escapeHtml(d.decision || '--')}</p>
-        ${d.alternatives ? `
-          <div class="mb-2">
-            <p class="text-[10px] text-slate-500 uppercase tracking-wider mb-1">Alternatives considered</p>
-            <div class="flex flex-wrap gap-1">
-              ${(Array.isArray(d.alternatives) ? d.alternatives : [d.alternatives]).map(a =>
-                `<span class="text-[10px] px-1.5 py-0.5 rounded bg-slate-700/50 text-slate-400">${escapeHtml(String(a))}</span>`
-              ).join('')}
-            </div>
-          </div>
-        ` : ''}
-        <div class="flex items-center justify-between">
-          <span class="text-[10px] text-slate-600">${relativeTime(d.created_at)}</span>
-        </div>
-      </div>
-    `).join('');
-
-    const decisionSection = decisionCards ? `
-      <div class="pt-3 mt-3 border-t border-slate-800/80">
-        <p class="text-[10px] uppercase tracking-wider text-slate-500 font-semibold mb-3">Decision Log</p>
-        <div class="space-y-3">${decisionCards}</div>
-      </div>
-    ` : '';
-
-    container.innerHTML = evaluationCards + decisionSection;
-  }
-
-  function renderConfidenceChart(decisions) {
-    const chart = document.getElementById('confidence-chart');
-    const buckets = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; // 10 buckets: 0-10, 10-20, ...
-    decisions.forEach(d => {
-      if (d.confidence == null) return;
-      const pct = typeof d.confidence === 'number' ? (d.confidence > 1 ? d.confidence : d.confidence * 100) : parseFloat(d.confidence);
-      const idx = Math.min(Math.floor(pct / 10), 9);
-      buckets[idx]++;
-    });
-    const max = Math.max(...buckets, 1);
-    chart.innerHTML = buckets.map((count, i) => {
-      const height = (count / max * 100).toFixed(0);
-      const color = i < 3 ? 'bg-red-500/60' : i < 5 ? 'bg-amber-500/60' : i < 8 ? 'bg-nexo-500/60' : 'bg-emerald-500/60';
-      return `<div class="flex-1 rounded-t ${color} transition-all duration-500 hover:opacity-80 relative group cursor-default" style="height:${Math.max(height, 4)}%" title="${i*10}-${(i+1)*10}%: ${count}">
-        <span class="absolute -top-5 left-1/2 -translate-x-1/2 text-[10px] text-slate-400 opacity-0 group-hover:opacity-100 transition-opacity">${count}</span>
-      </div>`;
-    }).join('');
-  }
-
-  function applyFilters() {
-    const modeFilter = document.getElementById('filter-mode').value;
-    const domainFilter = document.getElementById('filter-domain').value;
-
-    const filteredLogs = modeFilter ? allLogs.filter(l => l.mode === modeFilter) : allLogs;
-    const filteredDecisions = domainFilter ? allDecisions.filter(d => d.domain === domainFilter) : allDecisions;
-    const filteredEvaluations = domainFilter ? allEvaluations.filter(e => e.area === domainFilter) : allEvaluations;
-
-    renderLogs(filteredLogs);
-    renderDecisions(filteredEvaluations, filteredDecisions);
-  }
-
-  async function loadData() {
-    const data = await fetchJSON('/api/cortex');
-    if (!data) return;
-
-    allLogs = data.cortex_logs || [];
-    allDecisions = data.decisions || [];
-    allEvaluations = data.evaluations || [];
-    const summary = data.summary || {};
-
-    // Populate domain filter
-    const domains = [...new Set([
-      ...allDecisions.map(d => d.domain).filter(Boolean),
-      ...allEvaluations.map(e => e.area).filter(Boolean),
-    ])];
-    const domainSelect = document.getElementById('filter-domain');
-    const currentDomain = domainSelect.value;
-    domainSelect.innerHTML = '<option value="">All Domains</option>' +
-      domains.map(d => `<option value="${escapeHtml(d)}" ${d === currentDomain ? 'selected' : ''}>${escapeHtml(d)}</option>`).join('');
-
-    // Stats
-    document.getElementById('stat-decisions').textContent = formatNumber(allEvaluations.length);
-    document.getElementById('stat-confidence').textContent = `${Number(summary.recommendation_accept_rate || 0).toFixed(0)}%`;
-    document.getElementById('stat-logs').textContent = formatNumber(summary.linked_outcomes_total || 0);
-    document.getElementById('stat-success').textContent = `${Number(summary.override_rate || 0).toFixed(0)}%`;
-
-    renderConfidenceChart(allDecisions);
-    applyFilters();
-  }
-
-  loadData();
-  setInterval(loadData, 60000);
-</script>
-{% endblock %}

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

@@ -1,128 +0,0 @@
-{% extends "base.html" %}
-
-{% block title %}Credential Vault{% endblock %}
-{% block page_title %}Credential Vault{% endblock %}
-
-{% block content %}
-<div class="space-y-5">
-  <!-- Header info -->
-  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
-    <div class="flex items-center gap-3">
-      <div class="w-10 h-10 rounded-lg bg-violet-500/10 flex items-center justify-center">
-        <svg class="w-5 h-5 text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
-      </div>
-      <div>
-        <div class="text-sm font-display font-semibold text-slate-200">Credential Vault</div>
-        <div class="text-xs text-slate-500">Names and keys only. Values are never exposed in the dashboard.</div>
-      </div>
-      <div class="ml-auto flex items-center gap-4">
-        <div class="text-center">
-          <div class="text-lg font-mono font-semibold text-slate-200" id="total-creds">--</div>
-          <div class="text-[10px] text-slate-500">credentials</div>
-        </div>
-        <div class="text-center">
-          <div class="text-lg font-mono font-semibold text-violet-400" id="total-services">--</div>
-          <div class="text-[10px] text-slate-500">services</div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Search -->
-  <div class="flex items-center gap-3">
-    <input type="text" id="cred-search" placeholder="Search services or keys..." class="flex-1 px-3 py-2 rounded-lg bg-slate-800/50 border border-slate-700/50 text-sm text-slate-200 placeholder-slate-600 focus:outline-none focus:ring-1 focus:ring-violet-500" oninput="searchCredentials(this.value)">
-  </div>
-
-  <!-- Credentials grouped by service -->
-  <div class="space-y-4" id="cred-groups">
-    <div class="text-xs text-slate-600 py-8 text-center">loading...</div>
-  </div>
-</div>
-{% endblock %}
-
-{% block scripts %}
-<script>
-let allCredentials = [];
-let serviceGroups = {};
-
-function searchCredentials(query) {
-  const q = query.toLowerCase();
-  document.querySelectorAll('#cred-groups .cred-group').forEach(group => {
-    const items = group.querySelectorAll('.cred-item');
-    let anyVisible = false;
-    items.forEach(item => {
-      const match = item.textContent.toLowerCase().includes(q);
-      item.style.display = match ? '' : 'none';
-      if (match) anyVisible = true;
-    });
-    // Also check the group title
-    const title = group.querySelector('.group-title');
-    if (title && title.textContent.toLowerCase().includes(q)) {
-      items.forEach(item => item.style.display = '');
-      anyVisible = true;
-    }
-    group.style.display = anyVisible ? '' : 'none';
-  });
-}
-
-function renderCredentials() {
-  const container = document.getElementById('cred-groups');
-
-  const groups = {};
-  allCredentials.forEach(c => {
-    const svc = c.service || 'unknown';
-    if (!groups[svc]) groups[svc] = [];
-    groups[svc].push(c);
-  });
-
-  const sortedServices = Object.keys(groups).sort();
-  document.getElementById('total-creds').textContent = allCredentials.length;
-  document.getElementById('total-services').textContent = sortedServices.length;
-
-  if (!sortedServices.length) {
-    container.innerHTML = '<div class="text-xs text-slate-600 py-8 text-center">No credentials stored</div>';
-    return;
-  }
-
-  container.innerHTML = sortedServices.map(svc => {
-    const creds = groups[svc];
-    return `<div class="cred-group bg-slate-900/50 border border-slate-800/50 rounded-xl overflow-hidden card">
-      <div class="flex items-center gap-3 px-5 py-3 border-b border-slate-800/30 bg-slate-800/20">
-        <svg class="w-4 h-4 text-violet-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/></svg>
-        <span class="group-title text-sm font-display font-medium text-slate-200">${escapeHtml(svc)}</span>
-        <span class="ml-auto text-xs font-mono text-slate-500">${creds.length} key${creds.length !== 1 ? 's' : ''}</span>
-      </div>
-      <div class="divide-y divide-slate-800/20">
-        ${creds.map(c => `<div class="cred-item flex items-center gap-3 px-5 py-2.5 hover:bg-slate-800/20 transition-colors">
-          <svg class="w-3.5 h-3.5 text-slate-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
-          <span class="text-xs font-mono text-slate-300">${escapeHtml(c.key || '--')}</span>
-          ${c.notes ? `<span class="text-[10px] text-slate-500 ml-auto truncate max-w-[200px]">${escapeHtml(c.notes)}</span>` : ''}
-        </div>`).join('')}
-      </div>
-    </div>`;
-  }).join('');
-}
-
-async function loadCredentials() {
-  const data = await fetchJSON('/api/credentials');
-  if (!data) return;
-
-  allCredentials = data.credentials || [];
-  serviceGroups = data.services || {};
-
-  // If only services grouping provided, flatten
-  if (!allCredentials.length && Object.keys(serviceGroups).length) {
-    Object.entries(serviceGroups).forEach(([svc, keys]) => {
-      (Array.isArray(keys) ? keys : []).forEach(k => {
-        allCredentials.push({ service: svc, key: typeof k === 'string' ? k : k.key, notes: typeof k === 'object' ? k.notes : '' });
-      });
-    });
-  }
-
-  renderCredentials();
-}
-
-loadCredentials();
-setInterval(loadCredentials, 60000);
-</script>
-{% endblock %}