nexo-brain 2.4.0 → 2.5.1

package/src/dashboard/templates/sentiment.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 %}