nexo-brain 5.3.26 → 5.3.28

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

@@ -1,247 +0,0 @@
-{% extends "base.html" %}
-
-{% block title %}Sentiment Timeline{% endblock %}
-{% block page_title %}Sentiment Timeline{% endblock %}
-
-{% block content %}
-<div class="space-y-5">
-  <!-- Summary cards -->
-  <div class="grid grid-cols-5 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">Avg Intensity</div>
-      <div class="text-xl font-mono font-semibold text-violet-400" id="avg-intensity">--</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">Positive</div>
-      <div class="text-xl font-mono font-semibold text-emerald-400" id="total-positive">--</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">Neutral</div>
-      <div class="text-xl font-mono font-semibold text-slate-300" id="total-neutral">--</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">Negative</div>
-      <div class="text-xl font-mono font-semibold text-red-400" id="total-negative">--</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">Urgent</div>
-      <div class="text-xl font-mono font-semibold text-amber-400" id="total-urgent">--</div>
-    </div>
-  </div>
-
-  <!-- Charts row -->
-  <div class="grid grid-cols-2 gap-5">
-    <!-- Timeline chart -->
-    <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">Daily Sentiment</div>
-      <div style="min-height: 280px;" class="relative">
-        <canvas id="timeline-canvas" class="w-full" style="height: 260px;"></canvas>
-      </div>
-    </div>
-
-    <!-- Intensity heatmap -->
-    <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">Intensity Heatmap</div>
-      <div id="heatmap" class="grid gap-1" style="min-height: 260px;">
-        <div class="text-xs text-slate-600 py-12 text-center">loading...</div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Bottom row -->
-  <div class="grid grid-cols-2 gap-5">
-    <!-- Signal word cloud -->
-    <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">Signal Words</div>
-      <div id="word-cloud" class="flex flex-wrap gap-2 items-center justify-center min-h-[180px]">
-        <div class="text-xs text-slate-600">loading...</div>
-      </div>
-    </div>
-
-    <!-- Recent sentiment logs -->
-    <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">Recent Logs</div>
-      <div class="space-y-2 max-h-[320px] overflow-y-auto" id="sentiment-logs">
-        <div class="text-xs text-slate-600 py-4 text-center">loading...</div>
-      </div>
-    </div>
-  </div>
-</div>
-{% endblock %}
-
-{% block scripts %}
-<script>
-const SENT_COLORS = { positive: '#10B981', negative: '#EF4444', neutral: '#64748b', urgent: '#F59E0B' };
-
-function drawTimeline(daily) {
-  const canvas = document.getElementById('timeline-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;
-  const pad = { t: 10, r: 10, b: 30, l: 35 };
-
-  ctx.clearRect(0, 0, w, h);
-
-  const dates = Object.keys(daily).sort();
-  if (!dates.length) { ctx.fillStyle = '#475569'; ctx.font = '12px system-ui'; ctx.textAlign = 'center'; ctx.fillText('No data', w/2, h/2); return; }
-
-  const chartW = w - pad.l - pad.r;
-  const chartH = h - pad.t - pad.b;
-  const maxVal = Math.max(...dates.map(d => Math.max(daily[d].positive || 0, daily[d].negative || 0, daily[d].neutral || 0)), 1);
-  const xStep = chartW / Math.max(dates.length - 1, 1);
-
-  // Grid
-  for (let i = 0; i <= 4; i++) {
-    const y = pad.t + (chartH / 4) * i;
-    ctx.beginPath(); ctx.moveTo(pad.l, y); ctx.lineTo(w - pad.r, y);
-    ctx.strokeStyle = 'rgba(51,65,85,0.3)'; ctx.lineWidth = 1; ctx.stroke();
-    ctx.fillStyle = '#475569'; ctx.font = '10px monospace'; ctx.textAlign = 'right';
-    ctx.fillText(Math.round(maxVal - (maxVal / 4) * i), pad.l - 4, y + 3);
-  }
-
-  // Lines
-  ['positive', 'negative', 'neutral'].forEach(type => {
-    ctx.beginPath();
-    dates.forEach((date, i) => {
-      const x = pad.l + i * xStep;
-      const val = daily[date][type] || 0;
-      const y = pad.t + chartH - (val / maxVal) * chartH;
-      if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
-    });
-    ctx.strokeStyle = SENT_COLORS[type];
-    ctx.lineWidth = 2;
-    ctx.stroke();
-
-    // Area fill
-    ctx.lineTo(pad.l + (dates.length - 1) * xStep, pad.t + chartH);
-    ctx.lineTo(pad.l, pad.t + chartH);
-    ctx.closePath();
-    ctx.fillStyle = SENT_COLORS[type] + '15';
-    ctx.fill();
-  });
-
-  // X labels
-  const labelInterval = Math.max(1, Math.floor(dates.length / 7));
-  ctx.fillStyle = '#475569'; ctx.font = '10px monospace'; ctx.textAlign = 'center';
-  dates.forEach((date, i) => {
-    if (i % labelInterval === 0 || i === dates.length - 1) {
-      const x = pad.l + i * xStep;
-      ctx.fillText(date.substring(5), x, h - 8);
-    }
-  });
-}
-
-function renderHeatmap(daily) {
-  const container = document.getElementById('heatmap');
-  const dates = Object.keys(daily).sort().slice(-28);
-  if (!dates.length) { container.innerHTML = '<div class="text-xs text-slate-600 py-12 text-center">No data</div>'; return; }
-
-  const maxIntensity = Math.max(...dates.map(d => daily[d].avg_intensity || 0), 0.1);
-
-  // Group by weeks
-  const weeks = [];
-  for (let i = 0; i < dates.length; i += 7) {
-    weeks.push(dates.slice(i, i + 7));
-  }
-
-  container.innerHTML = `<div class="space-y-1.5">
-    ${weeks.map(week => `<div class="flex gap-1">
-      ${week.map(d => {
-        const intensity = (daily[d].avg_intensity || 0) / maxIntensity;
-        const alpha = Math.max(0.1, intensity);
-        const dominant = (daily[d].positive || 0) >= (daily[d].negative || 0) ? '#10B981' : '#EF4444';
-        return `<div class="w-8 h-8 rounded-md flex items-center justify-center cursor-default group relative" style="background: ${dominant}; opacity: ${alpha}" title="${d}: intensity ${(daily[d].avg_intensity || 0).toFixed(2)}">
-          <span class="text-[8px] font-mono text-white/70">${d.substring(8)}</span>
-        </div>`;
-      }).join('')}
-      ${week.length < 7 ? `<div class="flex-1"></div>` : ''}
-    </div>`).join('')}
-  </div>
-  <div class="flex items-center gap-3 mt-3 text-[10px] text-slate-500">
-    <span class="flex items-center gap-1"><span class="w-3 h-3 rounded bg-emerald-500/50"></span>Positive</span>
-    <span class="flex items-center gap-1"><span class="w-3 h-3 rounded bg-red-500/50"></span>Negative</span>
-    <span>Opacity = intensity</span>
-  </div>`;
-}
-
-function renderWordCloud(logs) {
-  const container = document.getElementById('word-cloud');
-  const signalCounts = {};
-  (logs || []).forEach(l => {
-    const signals = l.signals || [];
-    (Array.isArray(signals) ? signals : (typeof signals === 'string' ? signals.split(',') : [])).forEach(s => {
-      const word = s.trim().toLowerCase();
-      if (word) signalCounts[word] = (signalCounts[word] || 0) + 1;
-    });
-  });
-
-  const entries = Object.entries(signalCounts).sort((a, b) => b[1] - a[1]).slice(0, 30);
-  if (!entries.length) { container.innerHTML = '<div class="text-xs text-slate-600">No signals detected</div>'; return; }
-
-  const maxCount = entries[0][1];
-  const colors = ['text-violet-400', 'text-pink-400', 'text-emerald-400', 'text-amber-400', 'text-blue-400', 'text-slate-300'];
-
-  container.innerHTML = entries.map(([word, count], i) => {
-    const size = 0.7 + (count / maxCount) * 0.8;
-    const color = colors[i % colors.length];
-    return `<span class="${color} font-display cursor-default hover:opacity-80 transition-opacity" style="font-size:${size}rem" title="${count} occurrences">${escapeHtml(word)}</span>`;
-  }).join(' ');
-}
-
-function renderLogs(logs) {
-  const container = document.getElementById('sentiment-logs');
-  if (!logs || !logs.length) { container.innerHTML = '<div class="text-xs text-slate-600 py-4 text-center">No logs</div>'; return; }
-
-  container.innerHTML = logs.slice(0, 30).map(l => {
-    const sent = l.sentiment || 'neutral';
-    const color = SENT_COLORS[sent] || SENT_COLORS.neutral;
-    const intensity = l.intensity != null ? l.intensity.toFixed(2) : '--';
-    return `<div class="flex items-start gap-3 py-2 border-b border-slate-800/30 last:border-0">
-      <span class="w-2 h-2 rounded-full mt-1 flex-shrink-0" style="background:${color}"></span>
-      <div class="flex-1 min-w-0">
-        <div class="flex items-center gap-2">
-          <span class="text-xs text-slate-300 capitalize">${escapeHtml(sent)}</span>
-          <span class="text-[10px] font-mono text-slate-500">i:${intensity}</span>
-          <span class="text-[10px] text-slate-600 ml-auto">${relativeTime(l.created_at)}</span>
-        </div>
-        ${l.signals ? `<div class="text-[10px] text-slate-500 mt-0.5">${escapeHtml(Array.isArray(l.signals) ? l.signals.join(', ') : l.signals)}</div>` : ''}
-      </div>
-    </div>`;
-  }).join('');
-}
-
-async function loadSentiment() {
-  const data = await fetchJSON('/api/sentiment');
-  if (!data) return;
-
-  const logs = data.logs || [];
-  const daily = data.daily || {};
-
-  // Summary
-  let totalPos = 0, totalNeg = 0, totalNeu = 0, totalUrg = 0, totalInt = 0, count = 0;
-  Object.values(daily).forEach(d => {
-    totalPos += d.positive || 0; totalNeg += d.negative || 0;
-    totalNeu += d.neutral || 0; totalUrg += d.urgent || 0;
-    if (d.avg_intensity) { totalInt += d.avg_intensity; count++; }
-  });
-
-  document.getElementById('avg-intensity').textContent = count ? (totalInt / count).toFixed(2) : '--';
-  document.getElementById('total-positive').textContent = totalPos;
-  document.getElementById('total-neutral').textContent = totalNeu;
-  document.getElementById('total-negative').textContent = totalNeg;
-  document.getElementById('total-urgent').textContent = totalUrg;
-
-  drawTimeline(daily);
-  renderHeatmap(daily);
-  renderWordCloud(logs);
-  renderLogs(logs);
-}
-
-loadSentiment();
-setInterval(loadSentiment, 60000);
-window.addEventListener('resize', () => loadSentiment());
-</script>
-{% endblock %}

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

@@ -1,218 +0,0 @@
-{% extends "base.html" %}
-
-{% block title %}Session Replay{% endblock %}
-{% block page_title %}Session Replay{% endblock %}
-
-{% block content %}
-<div class="space-y-5">
-  <!-- Active sessions -->
-  <div>
-    <div class="text-xs uppercase tracking-wider text-slate-400 font-medium mb-3">Active Sessions</div>
-    <div class="grid grid-cols-3 gap-4" id="active-sessions">
-      <div class="text-xs text-slate-600 py-4 text-center col-span-3">loading...</div>
-    </div>
-  </div>
-
-  <!-- Main content: Diaries + Checkpoints -->
-  <div class="grid grid-cols-3 gap-5">
-    <!-- Diary timeline -->
-    <div class="col-span-2 bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
-      <div class="flex items-center justify-between mb-4">
-        <div class="text-xs uppercase tracking-wider text-slate-400 font-medium">Session Diaries</div>
-        <button onclick="loadMore()" id="load-more-btn" class="text-xs px-2.5 py-1 rounded-md bg-slate-800/50 text-slate-400 hover:bg-slate-700 transition-colors hidden">Load more</button>
-      </div>
-      <div class="space-y-3" id="diaries">
-        <div class="text-xs text-slate-600 py-4 text-center">loading...</div>
-      </div>
-    </div>
-
-    <!-- Sidebar: Checkpoints + Mental states -->
-    <div class="space-y-5">
-      <!-- Mental State -->
-      <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-3">Mental States</div>
-        <div class="space-y-2" id="mental-states">
-          <div class="text-xs text-slate-600">loading...</div>
-        </div>
-      </div>
-
-      <!-- Checkpoints -->
-      <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-3">Checkpoints</div>
-        <div class="space-y-2" id="checkpoints">
-          <div class="text-xs text-slate-600">loading...</div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<style>
-  @keyframes livePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.4); } 50% { box-shadow: 0 0 0 6px rgba(16,185,129,0); } }
-  .live-pulse { animation: livePulse 2s ease-in-out infinite; }
-</style>
-{% endblock %}
-
-{% block scripts %}
-<script>
-let diaryOffset = 0;
-const PAGE_SIZE = 15;
-let exhausted = false;
-
-const STATE_BADGES = {
-  focused: 'bg-violet-500/15 text-violet-400 border-violet-500/30',
-  energized: 'bg-emerald-500/15 text-emerald-400 border-emerald-500/30',
-  tired: 'bg-amber-500/15 text-amber-400 border-amber-500/30',
-  frustrated: 'bg-red-500/15 text-red-400 border-red-500/30',
-  calm: 'bg-blue-500/15 text-blue-400 border-blue-500/30',
-  flow: 'bg-pink-500/15 text-pink-400 border-pink-500/30',
-};
-
-function renderActiveSession(s) {
-  const sid = s.session_id || s.id || '';
-  const shortId = String(sid).substring(0, 12);
-  const lastHB = s.last_heartbeat || s.created_at;
-  const cutoff = Date.now() - 15 * 60 * 1000;
-  const isLive = new Date(lastHB).getTime() > cutoff;
-
-  return `<div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 card ${isLive ? 'live-pulse' : ''}">
-    <div class="flex items-center gap-2 mb-2">
-      <span class="relative flex h-2 w-2">
-        ${isLive ? `<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 ${isLive ? 'bg-emerald-500' : 'bg-slate-600'}"></span>
-      </span>
-      <span class="text-xs font-mono text-violet-400">${escapeHtml(shortId)}</span>
-      <span class="ml-auto text-[10px] text-slate-500">${isLive ? 'LIVE' : 'idle'}</span>
-    </div>
-    <div class="text-[10px] text-slate-500">Started ${relativeTime(s.created_at)}</div>
-    ${lastHB ? `<div class="text-[10px] text-slate-600">Last heartbeat: ${relativeTime(lastHB)}</div>` : ''}
-  </div>`;
-}
-
-function renderDiary(d) {
-  const sid = d.session_id || d.id || '';
-  const state = d.mental_state || '';
-  const stateLower = state.toLowerCase();
-  const badgeClass = STATE_BADGES[stateLower] || 'bg-slate-500/15 text-slate-400 border-slate-500/30';
-
-  return `<div class="bg-slate-800/30 border border-slate-800/30 rounded-lg p-4 hover:border-slate-700/50 transition-colors">
-    <div class="flex items-center gap-2 mb-2 flex-wrap">
-      <span class="text-xs font-mono text-violet-400">${escapeHtml(String(sid).substring(0, 12))}</span>
-      <span class="text-[10px] text-slate-500">${escapeHtml(d.created_at || '')}</span>
-      ${d.domain ? `<span class="text-[10px] px-1.5 py-0.5 rounded bg-slate-800 text-slate-400">${escapeHtml(d.domain)}</span>` : ''}
-      ${state ? `<span class="text-[10px] px-1.5 py-0.5 rounded border ${badgeClass}">${escapeHtml(state)}</span>` : ''}
-    </div>
-    ${d.summary ? `<p class="text-sm text-slate-200 leading-relaxed mb-2 whitespace-pre-wrap">${escapeHtml(d.summary)}</p>` : ''}
-    ${d.self_critique ? `<div class="border-l-2 border-amber-500/30 pl-3 mb-2"><p class="text-xs text-amber-300/80 leading-relaxed whitespace-pre-wrap">${escapeHtml(d.self_critique)}</p></div>` : ''}
-  </div>`;
-}
-
-async function loadMore() {
-  if (exhausted) return;
-  const btn = document.getElementById('load-more-btn');
-  btn.textContent = 'Loading...'; btn.disabled = true;
-
-  try {
-    const data = await fetchJSON(`/api/sessions?limit=${PAGE_SIZE}&offset=${diaryOffset}`);
-    if (!data) throw new Error('No data');
-    const diaries = data.diaries || data.sessions || [];
-
-    if (diaries.length > 0) {
-      document.getElementById('diaries').insertAdjacentHTML('beforeend', diaries.map(renderDiary).join(''));
-      diaryOffset += diaries.length;
-    }
-    if (diaries.length < PAGE_SIZE) {
-      exhausted = true; btn.classList.add('hidden');
-    } else {
-      btn.textContent = 'Load more'; btn.disabled = false;
-    }
-  } catch (err) {
-    btn.textContent = 'Error -- retry'; btn.disabled = false;
-  }
-}
-
-async function loadSessions() {
-  const data = await fetchJSON('/api/sessions?limit=' + PAGE_SIZE);
-  if (!data) return;
-
-  // Active sessions
-  const sessions = data.sessions || [];
-  const activeContainer = document.getElementById('active-sessions');
-  const cutoff = Date.now() - 15 * 60 * 1000;
-  const activeSessions = sessions.filter(s => new Date(s.last_heartbeat || s.created_at || 0).getTime() > cutoff);
-
-  if (activeSessions.length > 0) {
-    activeContainer.innerHTML = activeSessions.map(renderActiveSession).join('');
-  } else {
-    activeContainer.innerHTML = '<div class="col-span-3 bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 text-xs text-slate-500 text-center">No active sessions</div>';
-  }
-
-  // Diaries
-  const diaries = data.diaries || sessions;
-  const diaryContainer = document.getElementById('diaries');
-  if (diaries.length > 0) {
-    diaryContainer.innerHTML = diaries.map(renderDiary).join('');
-    diaryOffset = diaries.length;
-    if (diaries.length >= PAGE_SIZE) {
-      document.getElementById('load-more-btn').classList.remove('hidden');
-    }
-  } else {
-    diaryContainer.innerHTML = '<div class="text-xs text-slate-600 py-4 text-center">No session diaries found</div>';
-  }
-
-  // Mental states
-  const mentalContainer = document.getElementById('mental-states');
-  const states = {};
-  diaries.forEach(d => {
-    if (d.mental_state) {
-      const s = d.mental_state.toLowerCase();
-      states[s] = (states[s] || 0) + 1;
-    }
-  });
-  const stateEntries = Object.entries(states).sort((a, b) => b[1] - a[1]);
-  if (stateEntries.length) {
-    mentalContainer.innerHTML = stateEntries.map(([state, count]) => {
-      const badgeClass = STATE_BADGES[state] || 'bg-slate-500/15 text-slate-400 border-slate-500/30';
-      return `<div class="flex items-center justify-between">
-        <span class="text-xs px-2 py-0.5 rounded border ${badgeClass}">${escapeHtml(state)}</span>
-        <span class="text-xs font-mono text-slate-500">${count}</span>
-      </div>`;
-    }).join('');
-  } else {
-    mentalContainer.innerHTML = '<div class="text-xs text-slate-600">No mental state data</div>';
-  }
-
-  // Checkpoints
-  const checkpoints = data.checkpoints || [];
-  const cpContainer = document.getElementById('checkpoints');
-  if (checkpoints.length) {
-    cpContainer.innerHTML = checkpoints.slice(0, 10).map(cp => {
-      return `<div class="flex items-center gap-2 py-1.5 border-b border-slate-800/30 last:border-0">
-        <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="2" d="M5 13l4 4L19 7"/></svg>
-        <span class="text-xs text-slate-400 truncate flex-1">${escapeHtml(cp.label || cp.session_id || 'checkpoint')}</span>
-        <span class="text-[10px] text-slate-600 font-mono">${relativeTime(cp.created_at)}</span>
-      </div>`;
-    }).join('');
-  } else {
-    cpContainer.innerHTML = '<div class="text-xs text-slate-600">No checkpoints</div>';
-  }
-}
-
-loadSessions();
-setInterval(() => {
-  // Refresh active sessions only
-  fetchJSON('/api/sessions?limit=5').then(data => {
-    if (!data) return;
-    const sessions = data.sessions || [];
-    const activeContainer = document.getElementById('active-sessions');
-    const cutoff = Date.now() - 15 * 60 * 1000;
-    const activeSessions = sessions.filter(s => new Date(s.last_heartbeat || s.created_at || 0).getTime() > cutoff);
-    if (activeSessions.length > 0) {
-      activeContainer.innerHTML = activeSessions.map(renderActiveSession).join('');
-    } else {
-      activeContainer.innerHTML = '<div class="col-span-3 bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 text-xs text-slate-500 text-center">No active sessions</div>';
-    }
-  });
-}, 60000);
-</script>
-{% endblock %}