nexo-brain 5.3.19 → 5.3.21

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

@@ -0,0 +1,247 @@
+{% 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

@@ -0,0 +1,218 @@
+{% 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 %}