nexo-brain 5.3.26 → 5.3.28

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

@@ -1,356 +0,0 @@
-{% extends "base.html" %}
-
-{% block title %}NEXO Chat{% endblock %}
-{% block page_title %}NEXO Chat{% endblock %}
-{% block page_subtitle %}
-<span class="text-[10px] px-1.5 py-0.5 bg-nexo-500/20 text-nexo-400 rounded font-bold uppercase ml-2">Beta</span>
-{% endblock %}
-
-{% block content %}
-<div class="flex flex-col" style="height: calc(100vh - 7.5rem);">
-
-  <!-- Chat messages area -->
-  <div id="chat-messages" class="flex-1 overflow-y-auto px-2 py-4 space-y-4 scroll-smooth">
-    <!-- Welcome message rendered by JS -->
-  </div>
-
-  <!-- Suggested prompts -->
-  <div id="suggestions" class="flex items-center gap-2 px-2 py-3 overflow-x-auto flex-shrink-0">
-    <button onclick="sendSuggestion(this)" class="suggestion-pill whitespace-nowrap px-3 py-1.5 rounded-lg text-xs transition-all">
-      What happened last night?
-    </button>
-    <button onclick="sendSuggestion(this)" class="suggestion-pill whitespace-nowrap px-3 py-1.5 rounded-lg text-xs transition-all">
-      Trust status
-    </button>
-    <button onclick="sendSuggestion(this)" class="suggestion-pill whitespace-nowrap px-3 py-1.5 rounded-lg text-xs transition-all">
-      Active skills
-    </button>
-    <button onclick="sendSuggestion(this)" class="suggestion-pill whitespace-nowrap px-3 py-1.5 rounded-lg text-xs transition-all">
-      Recent crons
-    </button>
-    <button onclick="sendSuggestion(this)" class="suggestion-pill whitespace-nowrap px-3 py-1.5 rounded-lg text-xs transition-all">
-      Pending followups
-    </button>
-  </div>
-
-  <!-- Input bar -->
-  <div class="flex-shrink-0 border-t border-slate-800/50 bg-slate-900/30 backdrop-blur-sm rounded-b-xl px-3 py-3">
-    <div class="flex items-end gap-2 max-w-3xl mx-auto">
-      <div class="flex-1 relative">
-        <textarea
-          id="chat-input"
-          rows="1"
-          placeholder="Ask me anything..."
-          class="w-full bg-slate-900/80 border border-slate-700/50 rounded-xl px-4 py-3 text-sm text-slate-200 placeholder-slate-600 resize-none focus:outline-none focus:border-nexo-500/50 focus:ring-1 focus:ring-nexo-500/20 transition-all"
-          onkeydown="handleKeydown(event)"
-          oninput="autoResize(this)"
-        ></textarea>
-      </div>
-      <button
-        id="send-btn"
-        onclick="sendMessage()"
-        class="w-10 h-10 rounded-xl bg-nexo-500 hover:bg-nexo-600 text-white flex items-center justify-center transition-all duration-200 hover:scale-105 active:scale-95 disabled:opacity-30 disabled:hover:scale-100 flex-shrink-0"
-        disabled
-      >
-        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19V5m0 0l-7 7m7-7l7 7"/></svg>
-      </button>
-    </div>
-  </div>
-</div>
-
-<style>
-  #chat-messages::-webkit-scrollbar { width: 4px; }
-  #chat-messages::-webkit-scrollbar-thumb { background: #334155; border-radius: 2px; }
-
-  .suggestion-pill {
-    background: rgba(30, 41, 59, 0.6);
-    border: 1px solid rgba(51, 65, 85, 0.4);
-    color: #94a3b8;
-  }
-  .suggestion-pill:hover {
-    background: rgba(124, 58, 237, 0.12);
-    border-color: rgba(124, 58, 237, 0.3);
-    color: #c4b5fd;
-  }
-
-  .bubble-user {
-    background: rgba(124, 58, 237, 0.2);
-    border: 1px solid rgba(124, 58, 237, 0.25);
-    border-radius: 16px 16px 4px 16px;
-  }
-  .bubble-nexo {
-    background: rgba(30, 41, 59, 0.6);
-    border: 1px solid rgba(51, 65, 85, 0.4);
-    border-radius: 16px 16px 16px 4px;
-  }
-
-  @keyframes bubbleIn {
-    0% { opacity: 0; transform: translateY(8px) scale(0.97); }
-    100% { opacity: 1; transform: translateY(0) scale(1); }
-  }
-  .chat-bubble { animation: bubbleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
-
-  @keyframes typingDot {
-    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
-    30% { opacity: 1; transform: translateY(-4px); }
-  }
-  .typing-dot {
-    width: 6px; height: 6px; border-radius: 50%; background: #7C3AED;
-    display: inline-block;
-  }
-  .typing-dot:nth-child(1) { animation: typingDot 1.4s ease-in-out infinite; }
-  .typing-dot:nth-child(2) { animation: typingDot 1.4s ease-in-out infinite 0.2s; }
-  .typing-dot:nth-child(3) { animation: typingDot 1.4s ease-in-out infinite 0.4s; }
-
-  .data-table-toggle {
-    cursor: pointer;
-    transition: color 0.15s;
-  }
-  .data-table-toggle:hover { color: #c4b5fd; }
-
-  .data-section {
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height 0.3s ease;
-  }
-  .data-section.open {
-    max-height: 500px;
-    overflow-y: auto;
-  }
-
-  #chat-input {
-    max-height: 120px;
-    line-height: 1.5;
-  }
-
-  .nexo-avatar {
-    width: 28px; height: 28px;
-    background: linear-gradient(135deg, #7C3AED, #EC4899);
-    border-radius: 8px;
-    display: flex; align-items: center; justify-content: center;
-    font-size: 11px; font-weight: 700; color: white;
-    flex-shrink: 0;
-  }
-</style>
-{% endblock %}
-
-{% block scripts %}
-<script>
-const STORAGE_KEY = 'nexo-chat-history';
-let chatHistory = [];
-let isWaiting = false;
-
-function loadHistory() {
-  try {
-    const stored = sessionStorage.getItem(STORAGE_KEY);
-    if (stored) chatHistory = JSON.parse(stored);
-  } catch {}
-}
-
-function saveHistory() {
-  try {
-    sessionStorage.setItem(STORAGE_KEY, JSON.stringify(chatHistory.slice(-100)));
-  } catch {}
-}
-
-function autoResize(el) {
-  el.style.height = 'auto';
-  el.style.height = Math.min(el.scrollHeight, 120) + 'px';
-  document.getElementById('send-btn').disabled = !el.value.trim();
-}
-
-function handleKeydown(e) {
-  if (e.key === 'Enter' && !e.shiftKey) {
-    e.preventDefault();
-    sendMessage();
-  }
-}
-
-function scrollToBottom() {
-  const container = document.getElementById('chat-messages');
-  requestAnimationFrame(() => { container.scrollTop = container.scrollHeight; });
-}
-
-function renderMessage(msg) {
-  if (msg.role === 'user') {
-    return `
-      <div class="flex justify-end chat-bubble">
-        <div class="bubble-user px-4 py-2.5 max-w-lg">
-          <p class="text-sm text-slate-200 leading-relaxed">${escapeHtml(msg.content)}</p>
-        </div>
-      </div>
-    `;
-  }
-
-  // NEXO response
-  let dataHtml = '';
-  if (msg.data && msg.data.length > 0) {
-    const cols = Object.keys(msg.data[0]);
-    dataHtml = `
-      <div class="mt-3">
-        <button class="data-table-toggle text-[10px] uppercase tracking-wider text-slate-500 font-semibold flex items-center gap-1" onclick="toggleDataSection(this)">
-          <svg class="w-3 h-3 transition-transform duration-200 data-chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
-          ${msg.data.length} results
-        </button>
-        <div class="data-section mt-2">
-          <div class="bg-slate-950/50 rounded-lg border border-slate-800/30 overflow-x-auto">
-            <table class="w-full text-xs">
-              <thead>
-                <tr class="border-b border-slate-800/40">
-                  ${cols.map(c => `<th class="px-3 py-2 text-left text-[10px] uppercase tracking-wider text-slate-600 font-semibold">${escapeHtml(c)}</th>`).join('')}
-                </tr>
-              </thead>
-              <tbody class="divide-y divide-slate-800/20">
-                ${msg.data.slice(0, 20).map(row => `
-                  <tr class="hover:bg-slate-800/20 transition-colors">
-                    ${cols.map(c => `<td class="px-3 py-1.5 font-mono text-slate-400 whitespace-nowrap">${escapeHtml(String(row[c] ?? '--'))}</td>`).join('')}
-                  </tr>
-                `).join('')}
-              </tbody>
-            </table>
-            ${msg.data.length > 20 ? `<div class="px-3 py-2 text-[10px] text-slate-600 border-t border-slate-800/30">+ ${msg.data.length - 20} more rows</div>` : ''}
-          </div>
-        </div>
-      </div>
-    `;
-  }
-
-  return `
-    <div class="flex items-start gap-2.5 chat-bubble">
-      <div class="nexo-avatar">N</div>
-      <div class="bubble-nexo px-4 py-2.5 max-w-2xl">
-        <div class="text-sm text-slate-300 leading-relaxed chat-answer">${formatAnswer(msg.content)}</div>
-        ${dataHtml}
-        ${msg.query_type ? `<div class="mt-2 text-[9px] text-slate-600 font-mono">query: ${escapeHtml(msg.query_type)}</div>` : ''}
-      </div>
-    </div>
-  `;
-}
-
-function formatAnswer(text) {
-  if (!text) return '';
-  // Basic markdown-like formatting
-  let html = escapeHtml(text);
-  html = html.replace(/\*\*(.*?)\*\*/g, '<strong class="text-slate-100 font-semibold">$1</strong>');
-  html = html.replace(/`(.*?)`/g, '<code class="text-xs bg-slate-800/60 px-1 py-0.5 rounded text-nexo-300 font-mono">$1</code>');
-  html = html.replace(/\n/g, '<br>');
-  return html;
-}
-
-function toggleDataSection(btn) {
-  const section = btn.nextElementSibling;
-  const chevron = btn.querySelector('.data-chevron');
-  section.classList.toggle('open');
-  chevron.style.transform = section.classList.contains('open') ? 'rotate(90deg)' : '';
-}
-
-function showTyping() {
-  const container = document.getElementById('chat-messages');
-  const typingEl = document.createElement('div');
-  typingEl.id = 'typing-indicator';
-  typingEl.className = 'flex items-start gap-2.5 chat-bubble';
-  typingEl.innerHTML = `
-    <div class="nexo-avatar">N</div>
-    <div class="bubble-nexo px-4 py-3">
-      <div class="flex items-center gap-1.5">
-        <div class="typing-dot"></div>
-        <div class="typing-dot"></div>
-        <div class="typing-dot"></div>
-      </div>
-    </div>
-  `;
-  container.appendChild(typingEl);
-  scrollToBottom();
-}
-
-function hideTyping() {
-  const el = document.getElementById('typing-indicator');
-  if (el) el.remove();
-}
-
-function renderAllMessages() {
-  const container = document.getElementById('chat-messages');
-  if (chatHistory.length === 0) {
-    container.innerHTML = `
-      <div class="flex items-start gap-2.5 chat-bubble">
-        <div class="nexo-avatar">N</div>
-        <div class="bubble-nexo px-4 py-3 max-w-xl">
-          <p class="text-sm text-slate-300 leading-relaxed">I'm <strong class="text-nexo-400">NEXO Chat</strong>. Ask me anything about the system.</p>
-          <p class="text-xs text-slate-500 mt-2">I can query diaries, crons, trust, skills, followups, and more.</p>
-        </div>
-      </div>
-    `;
-    return;
-  }
-  container.innerHTML = chatHistory.map(renderMessage).join('');
-  scrollToBottom();
-}
-
-function sendSuggestion(btn) {
-  const text = btn.textContent.trim();
-  document.getElementById('chat-input').value = text;
-  document.getElementById('send-btn').disabled = false;
-  sendMessage();
-}
-
-async function sendMessage() {
-  const input = document.getElementById('chat-input');
-  const text = input.value.trim();
-  if (!text || isWaiting) return;
-
-  // Add user message
-  chatHistory.push({ role: 'user', content: text });
-  saveHistory();
-  renderAllMessages();
-
-  // Clear input
-  input.value = '';
-  input.style.height = 'auto';
-  document.getElementById('send-btn').disabled = true;
-
-  // Hide suggestions after first message
-  document.getElementById('suggestions').style.display = chatHistory.filter(m => m.role === 'user').length > 1 ? 'none' : '';
-
-  // Show typing
-  isWaiting = true;
-  showTyping();
-
-  try {
-    const res = await fetch('/api/chat', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ message: text })
-    });
-
-    hideTyping();
-
-    if (!res.ok) {
-      const errText = await res.text().catch(() => 'Error');
-      chatHistory.push({ role: 'nexo', content: `Error: ${res.status} - ${errText}` });
-    } else {
-      const data = await res.json();
-      chatHistory.push({
-        role: 'nexo',
-        content: data.answer || 'Sin respuesta.',
-        data: data.data || null,
-        query_type: data.query_type || null
-      });
-    }
-  } catch (err) {
-    hideTyping();
-    chatHistory.push({ role: 'nexo', content: `Error de conexion: ${err.message}` });
-  }
-
-  isWaiting = false;
-  saveHistory();
-  renderAllMessages();
-}
-
-// Initialize
-loadHistory();
-renderAllMessages();
-
-// Focus input
-document.getElementById('chat-input').focus();
-</script>
-{% endblock %}

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

@@ -1,259 +0,0 @@
-{% extends "base.html" %}
-
-{% block title %}Claims Network{% endblock %}
-{% block page_title %}Claims Network{% endblock %}
-
-{% block content %}
-<div class="space-y-5">
-  <!-- Status counts -->
-  <div class="grid grid-cols-4 gap-4" id="status-cards">
-    <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 Claims</div>
-      <div class="text-xl font-mono font-semibold text-slate-200" id="total-claims">--</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-emerald-400/70 font-medium mb-2">Verified</div>
-      <div class="text-xl font-mono font-semibold text-emerald-400" id="verified-claims">--</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-amber-400/70 font-medium mb-2">Pending</div>
-      <div class="text-xl font-mono font-semibold text-amber-400" id="pending-claims">--</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-red-400/70 font-medium mb-2">Disputed</div>
-      <div class="text-xl font-mono font-semibold text-red-400" id="disputed-claims">--</div>
-    </div>
-  </div>
-
-  <!-- Filter bar -->
-  <div class="flex items-center gap-2 flex-wrap">
-    <span class="text-xs text-slate-500">Filter:</span>
-    <button onclick="filterClaims('all')" class="filter-btn active px-2.5 py-1 rounded-md text-xs bg-slate-800 text-slate-300 hover:bg-slate-700 transition-colors" data-filter="all">All</button>
-    <button onclick="filterClaims('verified')" class="filter-btn px-2.5 py-1 rounded-md text-xs bg-slate-800/50 text-slate-400 hover:bg-slate-700 transition-colors" data-filter="verified">Verified</button>
-    <button onclick="filterClaims('pending')" class="filter-btn px-2.5 py-1 rounded-md text-xs bg-slate-800/50 text-slate-400 hover:bg-slate-700 transition-colors" data-filter="pending">Pending</button>
-    <button onclick="filterClaims('disputed')" class="filter-btn px-2.5 py-1 rounded-md text-xs bg-slate-800/50 text-slate-400 hover:bg-slate-700 transition-colors" data-filter="disputed">Disputed</button>
-    <div class="flex-1"></div>
-    <input type="text" id="claim-search" placeholder="Search claims..." class="px-3 py-1.5 rounded-lg bg-slate-800/50 border border-slate-700/50 text-xs text-slate-200 placeholder-slate-600 focus:outline-none focus:ring-1 focus:ring-violet-500 w-48" oninput="searchClaims(this.value)">
-  </div>
-
-  <div class="grid grid-cols-3 gap-5">
-    <!-- Network visualization -->
-    <div class="col-span-2 bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
-      <div class="text-xs uppercase tracking-wider text-slate-400 font-medium mb-4">Claim Network</div>
-      <canvas id="network-canvas" class="w-full rounded-lg" style="height: 420px; background: rgba(15,23,42,0.5);"></canvas>
-    </div>
-
-    <!-- Claim detail panel -->
-    <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
-      <div class="text-xs uppercase tracking-wider text-slate-400 font-medium mb-4">Claim Details</div>
-      <div id="claim-detail" class="text-xs text-slate-600 text-center py-12">
-        Click a node to see details
-      </div>
-    </div>
-  </div>
-
-  <!-- Claims list -->
-  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
-    <div class="text-xs uppercase tracking-wider text-slate-400 font-medium mb-4">All Claims</div>
-    <div class="space-y-2" id="claims-list">
-      <div class="text-xs text-slate-600 py-4 text-center">loading...</div>
-    </div>
-  </div>
-</div>
-{% endblock %}
-
-{% block scripts %}
-<script>
-let allClaims = [];
-let allLinks = [];
-let currentFilter = 'all';
-let nodes = [];
-let selectedNode = null;
-
-const STATUS_COLORS = {
-  verified: { bg: 'bg-emerald-500/10', text: 'text-emerald-400', fill: '#10B981' },
-  pending: { bg: 'bg-amber-500/10', text: 'text-amber-400', fill: '#F59E0B' },
-  disputed: { bg: 'bg-red-500/10', text: 'text-red-400', fill: '#EF4444' },
-  unknown: { bg: 'bg-slate-500/10', text: 'text-slate-400', fill: '#64748b' },
-};
-
-function filterClaims(status) {
-  currentFilter = status;
-  document.querySelectorAll('.filter-btn').forEach(b => {
-    b.classList.toggle('active', b.dataset.filter === status);
-    b.classList.toggle('bg-slate-800', b.dataset.filter === status);
-    b.classList.toggle('text-slate-300', b.dataset.filter === status);
-    b.classList.toggle('bg-slate-800/50', b.dataset.filter !== status);
-    b.classList.toggle('text-slate-400', b.dataset.filter !== status);
-  });
-  renderClaimsList();
-  drawNetwork();
-}
-
-function searchClaims(query) {
-  const q = query.toLowerCase();
-  document.querySelectorAll('#claims-list .claim-item').forEach(el => {
-    const text = el.textContent.toLowerCase();
-    el.style.display = text.includes(q) ? '' : 'none';
-  });
-}
-
-function getFilteredClaims() {
-  if (currentFilter === 'all') return allClaims;
-  return allClaims.filter(c => (c.verification_status || 'pending') === currentFilter);
-}
-
-function renderClaimsList() {
-  const container = document.getElementById('claims-list');
-  const claims = getFilteredClaims();
-  if (!claims.length) { container.innerHTML = '<div class="text-xs text-slate-600 py-4 text-center">No claims found</div>'; return; }
-
-  container.innerHTML = claims.map(c => {
-    const status = c.verification_status || 'pending';
-    const sc = STATUS_COLORS[status] || STATUS_COLORS.unknown;
-    const conf = c.confidence != null ? (c.confidence * 100).toFixed(0) + '%' : '--';
-    return `<div class="claim-item flex items-start gap-3 py-2.5 px-3 rounded-lg hover:bg-slate-800/30 transition-colors cursor-pointer border border-transparent hover:border-slate-800/50" onclick="selectClaim(${c.id})">
-      <span class="w-1.5 h-1.5 rounded-full mt-1.5 flex-shrink-0" style="background:${sc.fill}"></span>
-      <div class="flex-1 min-w-0">
-        <div class="text-xs text-slate-300 leading-relaxed">${escapeHtml(c.text || '--')}</div>
-        <div class="flex items-center gap-2 mt-1">
-          <span class="px-1.5 py-0.5 rounded text-[10px] font-medium ${sc.bg} ${sc.text}">${status}</span>
-          ${c.domain ? `<span class="text-[10px] text-slate-500">${escapeHtml(c.domain)}</span>` : ''}
-          <span class="text-[10px] text-slate-600 font-mono">conf: ${conf}</span>
-        </div>
-      </div>
-    </div>`;
-  }).join('');
-}
-
-function selectClaim(id) {
-  const c = allClaims.find(x => x.id === id);
-  if (!c) return;
-  selectedNode = id;
-
-  const status = c.verification_status || 'pending';
-  const sc = STATUS_COLORS[status] || STATUS_COLORS.unknown;
-  const linkedClaims = allLinks.filter(l => l.source_claim_id === id || l.target_claim_id === id);
-
-  document.getElementById('claim-detail').innerHTML = `
-    <div class="space-y-4 text-left">
-      <div>
-        <span class="px-1.5 py-0.5 rounded text-[10px] font-medium ${sc.bg} ${sc.text}">${status}</span>
-        ${c.domain ? `<span class="ml-2 text-[10px] text-slate-500">${escapeHtml(c.domain)}</span>` : ''}
-      </div>
-      <p class="text-sm text-slate-200 leading-relaxed">${escapeHtml(c.text || '--')}</p>
-      <div class="grid grid-cols-2 gap-3">
-        <div><div class="text-[10px] text-slate-500 uppercase">Confidence</div><div class="text-sm font-mono text-slate-300">${c.confidence != null ? (c.confidence * 100).toFixed(1) + '%' : '--'}</div></div>
-        <div><div class="text-[10px] text-slate-500 uppercase">ID</div><div class="text-sm font-mono text-slate-300">#${c.id}</div></div>
-      </div>
-      ${linkedClaims.length ? `
-        <div class="border-t border-slate-800/50 pt-3">
-          <div class="text-[10px] text-slate-500 uppercase mb-2">Linked Claims (${linkedClaims.length})</div>
-          <div class="space-y-1.5">${linkedClaims.map(l => {
-            const otherId = l.source_claim_id === id ? l.target_claim_id : l.source_claim_id;
-            const other = allClaims.find(x => x.id === otherId);
-            return `<div class="text-xs text-slate-400 flex items-center gap-2">
-              <span class="text-[10px] text-violet-400 font-mono">${escapeHtml(l.relation || 'related')}</span>
-              <span class="truncate">${other ? escapeHtml((other.text || '').substring(0, 60)) : '#' + otherId}</span>
-            </div>`;
-          }).join('')}</div>
-        </div>` : ''}
-    </div>`;
-
-  drawNetwork();
-}
-
-function drawNetwork() {
-  const canvas = document.getElementById('network-canvas');
-  const ctx = canvas.getContext('2d');
-  const rect = canvas.getBoundingClientRect();
-  canvas.width = rect.width * window.devicePixelRatio;
-  canvas.height = rect.height * window.devicePixelRatio;
-  ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
-  const w = rect.width, h = rect.height;
-
-  ctx.clearRect(0, 0, w, h);
-
-  const filtered = getFilteredClaims();
-  const idSet = new Set(filtered.map(c => c.id));
-
-  if (!nodes.length) {
-    nodes = filtered.map((c, i) => {
-      const angle = (2 * Math.PI * i) / filtered.length;
-      const r = Math.min(w, h) * 0.35;
-      return { id: c.id, x: w / 2 + r * Math.cos(angle) + (Math.random() - 0.5) * 40, y: h / 2 + r * Math.sin(angle) + (Math.random() - 0.5) * 40, claim: c };
-    });
-  }
-
-  // Draw links
-  const visLinks = allLinks.filter(l => idSet.has(l.source_claim_id) && idSet.has(l.target_claim_id));
-  visLinks.forEach(l => {
-    const src = nodes.find(n => n.id === l.source_claim_id);
-    const tgt = nodes.find(n => n.id === l.target_claim_id);
-    if (!src || !tgt) return;
-    ctx.beginPath();
-    ctx.moveTo(src.x, src.y);
-    ctx.lineTo(tgt.x, tgt.y);
-    ctx.strokeStyle = (selectedNode === src.id || selectedNode === tgt.id) ? 'rgba(124,58,237,0.5)' : 'rgba(51,65,85,0.3)';
-    ctx.lineWidth = (selectedNode === src.id || selectedNode === tgt.id) ? 2 : 1;
-    ctx.stroke();
-  });
-
-  // Draw nodes
-  nodes.forEach(n => {
-    if (!idSet.has(n.id)) return;
-    const status = n.claim.verification_status || 'pending';
-    const color = (STATUS_COLORS[status] || STATUS_COLORS.unknown).fill;
-    const isSelected = selectedNode === n.id;
-    const radius = isSelected ? 8 : 5;
-
-    ctx.beginPath();
-    ctx.arc(n.x, n.y, radius, 0, 2 * Math.PI);
-    ctx.fillStyle = color;
-    ctx.fill();
-    if (isSelected) {
-      ctx.strokeStyle = '#fff';
-      ctx.lineWidth = 2;
-      ctx.stroke();
-    }
-  });
-}
-
-canvas_click: {
-  const canvas = document.getElementById('network-canvas');
-  canvas.addEventListener('click', e => {
-    const rect = canvas.getBoundingClientRect();
-    const x = e.clientX - rect.left;
-    const y = e.clientY - rect.top;
-    let closest = null, minDist = 20;
-    nodes.forEach(n => {
-      const d = Math.hypot(n.x - x, n.y - y);
-      if (d < minDist) { minDist = d; closest = n; }
-    });
-    if (closest) selectClaim(closest.id);
-  });
-}
-
-async function loadClaims() {
-  const data = await fetchJSON('/api/claims');
-  if (!data) return;
-
-  allClaims = data.claims || [];
-  allLinks = data.links || [];
-  const counts = data.status_counts || {};
-
-  document.getElementById('total-claims').textContent = allClaims.length;
-  document.getElementById('verified-claims').textContent = counts.verified || 0;
-  document.getElementById('pending-claims').textContent = counts.pending || 0;
-  document.getElementById('disputed-claims').textContent = counts.disputed || 0;
-
-  nodes = [];
-  renderClaimsList();
-  drawNetwork();
-}
-
-loadClaims();
-setInterval(loadClaims, 60000);
-window.addEventListener('resize', () => { if (allClaims.length) { nodes = []; drawNetwork(); } });
-</script>
-{% endblock %}