agentacta 2026.3.12 → 2026.3.27

package/public/app.js

@@ -239,6 +239,16 @@ function updateNavActive(view) {
   $$('.nav-item').forEach(i => i.classList.remove('active'));
   const navItem = $(`.nav-item[data-view="${view}"]`);
   if (navItem) navItem.classList.add('active');
+  // Settings gear buttons
+  const isSettings = view === 'stats';
+  document.getElementById('settings-btn')?.classList.toggle('active', isSettings);
+  document.getElementById('settings-btn-mobile')?.classList.toggle('active', isSettings);
+}
+
+function updateMobileNavActive(view) {
+  $$('.mobile-nav-btn').forEach(b => b.classList.remove('active'));
+  const btn = $(`.mobile-nav-btn[data-view="${view}"]`);
+  if (btn) btn.classList.add('active');
 }
 
 function handleRoute() {
@@ -253,13 +263,15 @@ function handleRoute() {
   }
 
   const normalized = raw === 'search' ? 'overview' : raw;
-  const view = normalized === 'overview' || normalized === 'sessions' || normalized === 'timeline' || normalized === 'files' || normalized === 'stats' ? normalized : 'overview';
+  const view = normalized === 'overview' || normalized === 'sessions' || normalized === 'timeline' || normalized === 'files' || normalized === 'stats' || normalized === 'insights' ? normalized : 'overview';
   window._lastView = view;
   updateNavActive(view);
+  updateMobileNavActive(view);
   if (view === 'overview') viewOverview();
   else if (view === 'sessions') viewSessions();
   else if (view === 'files') viewFiles();
   else if (view === 'timeline') viewTimeline();
+  else if (view === 'insights') viewInsights();
   else viewStats();
 }
 
@@ -647,7 +659,9 @@ async function viewSession(id) {
   if (data._error || data.error) { content.innerHTML = `<div class="empty"><h2>${escHtml(data.error || 'Unable to load')}</h2></div>`; return; }
 
   const s = data.session;
-  const cost = fmtCost(s.total_cost);
+  const projectFilters = Array.isArray(data.projectFilters)
+    ? data.projectFilters.filter(p => p && p.project && Number.isFinite(Number(p.eventCount)))
+    : [];
   let html = `
     <div class="back-btn" id="backBtn">\u2190 Back</div>
     <div class="page-title">Session</div>
@@ -667,7 +681,6 @@ async function viewSession(id) {
       <div class="session-header" style="margin-bottom:12px">
         <span class="session-time">${fmtDate(s.start_time)} \u00b7 ${fmtTimeShort(s.start_time)} \u2013 ${fmtTimeShort(s.end_time)}</span>
         <span style="display:flex;gap:6px;align-items:center;flex-wrap:wrap">
-          ${renderProjectTags(s)}
           ${s.agent && s.agent !== 'main' ? `<span class="session-agent">${escHtml(normalizeAgentLabel(s.agent))}</span>` : ''}
           ${s.session_type && s.session_type !== normalizeAgentLabel(s.agent || '') ? `<span class="session-type">${escHtml(s.session_type)}</span>` : ''}
           ${renderModelTags(s)}
@@ -678,16 +691,63 @@ async function viewSession(id) {
         <span><span class="detail-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg></span> ${s.tool_count} tools</span>
         ${s.output_tokens ? `<span><span class="detail-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/></svg></span> ${fmtTokens(s.output_tokens)} output</span><span><span class="detail-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg></span> ${fmtTokens(s.input_tokens + s.cache_read_tokens)} input</span>` : s.total_tokens ? `<span><span class="detail-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7V4h16v3"/><path d="M9 20h6"/><path d="M12 4v16"/></svg></span> ${fmtTokens(s.total_tokens)} tokens</span><span></span>` : '<span></span><span></span>'}
       </div>
+      ${projectFilters.length ? `
+        <div class="section-label" style="margin-top:14px">Project Filter</div>
+        <div class="filters" id="sessionProjectFilters" style="margin-bottom:4px">
+          <span class="filter-chip active" data-project-filter="all">All</span>
+          ${projectFilters.map(p => `<span class="filter-chip" data-project-filter="${escHtml(p.project)}">${escHtml(p.project)} · ${p.eventCount}</span>`).join('')}
+        </div>
+      ` : ''}
     </div>
-    <div class="section-label">Events</div>
+    <div class="section-label" id="sessionEventsLabel">Events</div>
+    <div id="eventsContainer"></div>
+    <div class="empty" id="sessionEventsEmpty" style="display:none"><h2>No events</h2><p>This session has no events to display.</p></div>
+    <div id="sessionInsightsPanel" class="loading" style="margin-top:var(--space-xl)">Loading insights...</div>
   `;
 
   const PAGE_SIZE = 50;
-  const allEvents = data.events;
+  const allEvents = Array.isArray(data.events) ? [...data.events] : [];
+  let activeProjectFilter = 'all';
   let rendered = 0;
+  let onScroll = null;
+  let pendingNewCount = 0;
+
+  const getFilteredEvents = () => {
+    if (activeProjectFilter === 'all') return allEvents;
+    return allEvents.filter(ev => ev.project === activeProjectFilter);
+  };
+
+  const updateEventsLabel = () => {
+    const el = $('#sessionEventsLabel');
+    if (!el) return;
+    const count = getFilteredEvents().length;
+    if (activeProjectFilter === 'all') {
+      el.textContent = `Events (${count})`;
+      return;
+    }
+    el.textContent = `Events (${count}) · ${activeProjectFilter}`;
+  };
+
+  const updateEventsEmptyState = () => {
+    const empty = $('#sessionEventsEmpty');
+    if (!empty) return;
+    empty.style.display = getFilteredEvents().length ? 'none' : 'block';
+  };
+
+  const setProjectFilter = (nextFilter) => {
+    if (nextFilter === activeProjectFilter) return;
+    activeProjectFilter = nextFilter;
+    const chips = $$('#sessionProjectFilters .filter-chip');
+    chips.forEach(node => node.classList.toggle('active', node.dataset.projectFilter === activeProjectFilter));
+    pendingNewCount = 0;
+    const indicator = document.getElementById('newEventsIndicator');
+    if (indicator) indicator.remove();
+    resetRenderedEvents();
+  };
 
   function renderBatch() {
-    const batch = allEvents.slice(rendered, rendered + PAGE_SIZE);
+    const filtered = getFilteredEvents();
+    const batch = filtered.slice(rendered, rendered + PAGE_SIZE);
     if (!batch.length) return;
     const frag = document.createElement('div');
     frag.innerHTML = batch.map(renderEvent).join('');
@@ -696,33 +756,61 @@ async function viewSession(id) {
       while (frag.firstChild) container.appendChild(frag.firstChild);
     }
     rendered += batch.length;
-
   }
 
-  html += '<div id="eventsContainer">' + allEvents.slice(0, PAGE_SIZE).map(renderEvent).join('') + '</div>';
-  rendered = Math.min(PAGE_SIZE, allEvents.length);
   content.innerHTML = html;
   transitionView();
 
-  let onScroll = null;
-  if (allEvents.length > PAGE_SIZE) {
+  const syncScrollHandler = () => {
+    const total = getFilteredEvents().length;
+    if (total <= rendered) {
+      if (onScroll) {
+        window.removeEventListener('scroll', onScroll);
+        onScroll = null;
+      }
+      return;
+    }
+
+    if (onScroll) return;
+
     let loading = false;
     onScroll = () => {
-      if (loading || rendered >= allEvents.length) return;
+      if (loading || rendered >= getFilteredEvents().length) return;
       const scrollBottom = window.innerHeight + window.scrollY;
       const threshold = document.body.offsetHeight - 300;
       if (scrollBottom >= threshold) {
         loading = true;
         renderBatch();
         loading = false;
-        if (rendered >= allEvents.length) {
+        if (rendered >= getFilteredEvents().length) {
           window.removeEventListener('scroll', onScroll);
           onScroll = null;
         }
       }
     };
     window.addEventListener('scroll', onScroll, { passive: true });
-  }
+  };
+
+  const resetRenderedEvents = () => {
+    const container = document.getElementById('eventsContainer');
+    if (!container) return;
+    container.innerHTML = '';
+    rendered = 0;
+    renderBatch();
+    syncScrollHandler();
+    updateEventsLabel();
+    updateEventsEmptyState();
+  };
+
+  resetRenderedEvents();
+
+  const filterChips = $$('#sessionProjectFilters .filter-chip');
+  filterChips.forEach(chip => {
+    chip.addEventListener('click', () => {
+      const nextFilter = chip.dataset.projectFilter || 'all';
+      setProjectFilter(nextFilter);
+    });
+  });
 
   $('#backBtn').addEventListener('click', () => {
     clearJumpUi();
@@ -778,22 +866,35 @@ async function viewSession(id) {
   if (jumpBtn) {
     jumpBtn.addEventListener('click', async () => {
       const fromY = window.scrollY || window.pageYOffset || 0;
+      const firstMessageId = s.first_message_id;
 
       jumpBtn.classList.add('jumping');
       jumpBtn.disabled = true;
 
+      if (!firstMessageId) {
+        jumpBtn.classList.remove('jumping');
+        jumpBtn.disabled = false;
+        return;
+      }
+
+      // Resolve from full session context, not just project-filtered events.
+      const inCurrentFilter = getFilteredEvents().some(ev => ev.id === firstMessageId);
+      if (!inCurrentFilter && activeProjectFilter !== 'all') {
+        setProjectFilter('all');
+      }
+
       // Let button state paint before heavy DOM work.
       await new Promise(requestAnimationFrame);
 
       // Load remaining events in chunks so UI stays responsive.
       let loops = 0;
-      while (rendered < allEvents.length) {
+      while (rendered < getFilteredEvents().length) {
         renderBatch();
         loops += 1;
         if (loops % 2 === 0) await new Promise(requestAnimationFrame);
       }
 
-      const firstMessage = document.querySelector(`[data-event-id="${s.first_message_id}"]`);
+      const firstMessage = document.querySelector(`[data-event-id="${firstMessageId}"]`);
       if (!firstMessage) {
         jumpBtn.classList.remove('jumping');
         jumpBtn.disabled = false;
@@ -838,9 +939,8 @@ async function viewSession(id) {
     });
   }
 
-    // --- Lightweight realtime updates (polling fallback first) ---
+  // --- Lightweight realtime updates (polling fallback first) ---
   const knownIds = new Set(allEvents.map(e => e.id));
-  let pendingNewCount = 0;
 
   const applyIncomingEvents = (incoming) => {
     const container = document.getElementById('eventsContainer');
@@ -850,8 +950,22 @@ async function viewSession(id) {
     if (!fresh.length) return;
     fresh.forEach(e => knownIds.add(e.id));
 
+    // Delta endpoint returns oldest -> newest, and view is newest-first.
+    for (const ev of fresh) allEvents.unshift(ev);
+
+    const visibleFresh = activeProjectFilter === 'all'
+      ? fresh
+      : fresh.filter(ev => ev.project === activeProjectFilter);
+
+    if (!visibleFresh.length) {
+      updateEventsLabel();
+      updateEventsEmptyState();
+      syncScrollHandler();
+      return;
+    }
+
     const isAtTop = window.scrollY < 100;
-    for (const ev of fresh) {
+    for (const ev of visibleFresh) {
       const div = document.createElement('div');
       div.innerHTML = renderEvent(ev);
       const el = div.firstElementChild;
@@ -859,9 +973,13 @@ async function viewSession(id) {
       container.insertBefore(el, container.firstChild);
       setTimeout(() => el.classList.remove('event-highlight'), 2000);
     }
+    rendered += visibleFresh.length;
+    updateEventsLabel();
+    updateEventsEmptyState();
+    syncScrollHandler();
 
     if (!isAtTop) {
-      pendingNewCount += fresh.length;
+      pendingNewCount += visibleFresh.length;
       let indicator = document.getElementById('newEventsIndicator');
       if (!indicator) {
         indicator = document.createElement('div');
@@ -913,6 +1031,12 @@ async function viewSession(id) {
     const ind = document.getElementById('newEventsIndicator');
     if (ind) ind.remove();
   };
+
+  // Load insights panel
+  api(`/insights/session/${id}`).then(insights => {
+    const panel = document.getElementById('sessionInsightsPanel');
+    if (panel) panel.outerHTML = renderInsightsPanel(insights._error ? null : insights);
+  });
 }
 
 async function viewTimeline(date) {
@@ -1091,7 +1215,7 @@ async function viewStats() {
       <div class="config-card"><div class="config-label">Storage Mode</div><div class="config-value">${escHtml(data.storageMode || 'reference')}</div></div>
       <div class="config-card"><div class="config-label">DB Size</div><div class="config-value" id="dbSizeValue">${escHtml(data.dbSize?.display || 'N/A')}</div></div>
     </div>
-    <p class="settings-help" style="margin-bottom:var(--space-sm)">Date range: ${fmtDate(data.dateRange?.earliest)} — ${fmtDate(data.dateRange?.latest)}</p>
+    <p class="settings-help" style="margin-bottom:var(--space-sm)">Date range: ${fmtDate(data.dateRange?.earliest)} to ${fmtDate(data.dateRange?.latest)}</p>
     <div class="settings-maintenance">
       <button class="export-btn" id="optimizeDbBtn">Optimize Database</button>
       <span id="optimizeDbStatus" class="settings-maintenance-status"></span>
@@ -1419,6 +1543,166 @@ async function viewFileDetail(filePath) {
   });
 }
 
+// --- Insights helpers ---
+const SIGNAL_LABELS = {
+  tool_retry_loop: 'Repeated Actions',
+  session_bail: 'No Output Produced',
+  high_error_rate: 'Frequent Errors',
+  long_prompt_short_session: 'Vague Instructions',
+  no_completion: 'Incomplete Session'
+};
+
+const SIGNAL_DESCRIPTIONS = {
+  tool_retry_loop: 'The agent called the same tool many times in a row, suggesting it was stuck in a retry loop',
+  session_bail: 'The agent ran many actions but never wrote or edited any files',
+  high_error_rate: 'More than 30% of tool calls returned errors',
+  long_prompt_short_session: 'A very short prompt led to a long session, suggesting the agent lacked sufficient context',
+  no_completion: 'The session ended mid-action instead of finishing with a response'
+};
+
+const SIGNAL_COLORS = {
+  tool_retry_loop: 'amber',
+  high_error_rate: 'red',
+  no_completion: 'purple',
+  session_bail: 'teal',
+  long_prompt_short_session: 'accent'
+};
+
+function renderSignalTag(sig) {
+  const label = SIGNAL_LABELS[sig.type] || sig.type;
+  const color = SIGNAL_COLORS[sig.type] || 'muted';
+  const desc = SIGNAL_DESCRIPTIONS[sig.type] || '';
+  return `<span class="signal-tag signal-${color}"${desc ? ` title="${escHtml(desc)}"` : ''}><span class="signal-dot"></span>${escHtml(label)}</span>`;
+}
+
+function renderReliabilityBadge(score) {
+  const reliability = 100 - score;
+  return `<span class="insight-score-value" title="Reliability score: higher means fewer errors">${reliability}</span>`;
+}
+
+function renderIssueRateBadge(signals) {
+  const TOTAL_SIGNAL_TYPES = 5;
+  const uniqueTypes = new Set((signals || []).map(s => s.type)).size;
+  const rate = Math.round((uniqueTypes / TOTAL_SIGNAL_TYPES) * 100);
+  return `<span class="insight-score-value" title="${uniqueTypes} of ${TOTAL_SIGNAL_TYPES} issue types detected">${rate}%</span>`;
+}
+
+function renderInsightsPanel(insights) {
+  if (!insights || !insights.signals || !insights.signals.length) {
+    return `<div class="insights-panel insights-clean"><span style="color:var(--text-tertiary);font-size:13px">No issues detected</span></div>`;
+  }
+  return `<div class="insights-panel">
+    <div class="section-label" style="margin-top:0">Session Health ${renderReliabilityBadge(insights.confusion_score)}</div>
+    <div class="insights-signals">
+      ${insights.signals.map(sig => {
+        let detail = '';
+        if (sig.type === 'tool_retry_loop') detail = `${escHtml(sig.tool)} called ${sig.count}x consecutively`;
+        else if (sig.type === 'session_bail') detail = `${sig.tool_calls} tool calls with no file writes`;
+        else if (sig.type === 'high_error_rate') detail = `${sig.rate}% error rate (${sig.error_count}/${sig.total})`;
+        else if (sig.type === 'long_prompt_short_session') detail = `${sig.prompt_words} word prompt, ${sig.tool_calls} tool calls`;
+        else if (sig.type === 'no_completion') detail = `Ended on ${escHtml(sig.last_event_type)}${sig.last_tool ? ': ' + escHtml(sig.last_tool) : ''}`;
+        return `<div class="insight-callout">
+          ${renderSignalTag(sig)}
+          <span class="insight-detail">${detail}</span>
+        </div>`;
+      }).join('')}
+    </div>
+  </div>`;
+}
+
+async function viewInsights() {
+  clearJumpUi();
+  window._lastView = 'insights';
+  content.innerHTML = `<div class="page-title">Insights</div><div class="stat-grid">${skeletonRows(3, 'stats')}</div>`;
+  transitionView();
+
+  const data = await api('/insights');
+  if (data._error) {
+    content.innerHTML = '<div class="empty"><h2>Unable to load</h2><p>Server unavailable. Pull to refresh or try again.</p></div>';
+    return;
+  }
+
+  // Signal breakdown data — sorted by count descending
+  const signalTypes = Object.keys(SIGNAL_LABELS).sort((a, b) => (data.signal_counts[b] || 0) - (data.signal_counts[a] || 0));
+  const maxSignalCount = Math.max(1, ...signalTypes.map(t => data.signal_counts[t] || 0));
+
+  // Issue rate
+  const issueRate = data.total_sessions > 0 ? Math.round((data.flagged_count / data.total_sessions) * 100) : 0;
+
+  // Reliability score (inverted struggle score)
+  const reliabilityScore = 100 - (data.avg_confusion_score || 0);
+
+  let html = `<div class="page-title">Insights</div>
+
+    <div class="stat-grid">
+      <div class="stat-card accent-amber"><div class="label">Issue Rate</div><div class="value">${issueRate}%</div><div class="stat-desc">${data.flagged_count} of ${data.total_sessions} sessions had at least one detected issue</div></div>
+      <div class="stat-card accent-purple"><div class="label">Reliability Score</div><div class="value">${reliabilityScore}</div><div class="stat-desc">How often the agent completed tasks cleanly, out of 100</div></div>
+    </div>
+
+    <div class="section-label">Issue Types</div>
+    <div class="signal-chart">
+      ${signalTypes.map(type => {
+        const count = data.signal_counts[type] || 0;
+        const pct = Math.round((count / maxSignalCount) * 100);
+        const color = SIGNAL_COLORS[type] || 'muted';
+        const desc = SIGNAL_DESCRIPTIONS[type] || '';
+        const barColor = color === 'muted' ? 'var(--text-tertiary)' : `var(--${color})`;
+        return `<div class="signal-lollipop-row${desc ? ' signal-lollipop-expandable' : ''}" data-desc="${escHtml(desc)}">
+          <div class="signal-lollipop-main">
+            <span class="signal-bar-label">${SIGNAL_LABELS[type]}</span>
+            <div class="signal-lollipop-track">
+              <svg width="100%" height="20" class="signal-lollipop-svg">
+                <line x1="0" y1="10" x2="${pct}%" y2="10" stroke="${barColor}" stroke-width="2"/>
+                <circle cx="${pct}%" cy="10" r="5" fill="${barColor}"/>
+              </svg>
+            </div>
+            <span class="signal-bar-count">${count}</span>
+          </div>
+          ${desc ? `<div class="signal-lollipop-desc">${escHtml(desc)}</div>` : ''}
+        </div>`;
+      }).join('')}
+    </div>
+
+    <div class="section-label">Sessions with Issues (${data.flagged_count})</div>
+    <div id="insightsList">
+      ${data.top_flagged.length ? [...data.top_flagged].sort((a, b) => {
+        const aRate = new Set((a.signals||[]).map(s=>s.type)).size;
+        const bRate = new Set((b.signals||[]).map(s=>s.type)).size;
+        return bRate - aRate || b.confusion_score - a.confusion_score;
+      }).map(s => {
+        const summary = cleanSessionSummary(s.summary, '');
+        return `<div class="session-item insight-row" data-id="${escHtml(s.session_id)}">
+          <div class="session-header">
+            <span class="session-time">${fmtTime(s.start_time)}</span>
+            <span class="insight-scores">issue rate ${renderIssueRateBadge(s.signals)} · reliability ${renderReliabilityBadge(s.confusion_score)}</span>
+          </div>
+          <div class="session-summary">${escHtml(truncate(summary, 120))}</div>
+          <div class="session-meta">
+            <span style="display:flex;gap:6px;align-items:center;flex-wrap:wrap">
+              ${s.agent ? `<span class="session-agent">${escHtml(normalizeAgentLabel(s.agent))}</span>` : ''}
+              ${s.model ? `<span class="session-model">${escHtml(s.model)}</span>` : ''}
+            </span>
+            <span class="insight-signal-tags">${s.signals.map(sig => renderSignalTag(sig)).join('')}</span>
+          </div>
+        </div>`;
+      }).join('') : '<div class="empty"><p>No flagged sessions found</p></div>'}
+    </div>
+  `;
+
+  content.innerHTML = html;
+  transitionView();
+
+  $$('.session-item', content).forEach(item => {
+    item.addEventListener('click', () => viewSession(item.dataset.id));
+  });
+
+  $$('.signal-lollipop-expandable', content).forEach(row => {
+    row.addEventListener('click', () => {
+      row.classList.toggle('signal-lollipop-open');
+    });
+  });
+}
+
 // --- Navigation ---
 window._searchType = '';
 window._searchRole = '';
@@ -1437,6 +1721,7 @@ $$('.nav-item').forEach(item => {
     else if (view === 'sessions') viewSessions();
     else if (view === 'files') viewFiles();
     else if (view === 'timeline') viewTimeline();
+    else if (view === 'insights') viewInsights();
     else if (view === 'stats') viewStats();
   });
 });
@@ -1683,8 +1968,14 @@ function openCmdk() {
 initTheme();
 document.getElementById('theme-toggle')?.addEventListener('click', toggleTheme);
 document.getElementById('theme-toggle-mobile')?.addEventListener('click', toggleTheme);
-document.getElementById('cmdkBtn')?.addEventListener('click', () => openCmdk());
 document.getElementById('mobile-search-btn')?.addEventListener('click', () => openCmdk());
+document.getElementById('settings-btn')?.addEventListener('click', () => { window._lastView = 'stats'; updateNavActive('stats'); setHash('stats'); viewStats(); });
+document.getElementById('settings-btn-mobile')?.addEventListener('click', () => { window._lastView = 'stats'; updateNavActive('stats'); setHash('stats'); viewStats(); });
+document.getElementById('cmdkBtn')?.addEventListener('click', () => openCmdk());
+
+
+
+
 document.addEventListener('keydown', e => {
   if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
     e.preventDefault();

package/public/index.html

@@ -21,7 +21,10 @@
     <nav class="sidebar">
       <div class="sidebar-header">
         <h1>Agent<span>Acta</span></h1>
-        <button class="theme-toggle" id="theme-toggle" title="Toggle theme" aria-label="Toggle theme"><svg class="theme-icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg><svg class="theme-icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg></button>
+        <div class="sidebar-header-actions">
+          <button class="theme-toggle" id="theme-toggle" title="Toggle theme" aria-label="Toggle theme"><svg class="theme-icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg><svg class="theme-icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg></button>
+          <button class="theme-toggle" id="settings-btn" title="Settings" aria-label="Settings"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.325 4.317a1.724 1.724 0 0 1 3.35 0 1.724 1.724 0 0 0 2.573 1.066 1.724 1.724 0 0 1 2.28 2.28 1.724 1.724 0 0 0 1.065 2.573 1.724 1.724 0 0 1 0 3.35 1.724 1.724 0 0 0-1.066 2.573 1.724 1.724 0 0 1-2.28 2.28 1.724 1.724 0 0 0-2.573 1.065 1.724 1.724 0 0 1-3.35 0 1.724 1.724 0 0 0-2.573-1.066 1.724 1.724 0 0 1-2.28-2.28 1.724 1.724 0 0 0-1.065-2.573 1.724 1.724 0 0 1 0-3.35 1.724 1.724 0 0 0 1.066-2.573 1.724 1.724 0 0 1 2.28-2.28 1.724 1.724 0 0 0 2.572-1.065z"/><circle cx="12" cy="12" r="3"/></svg></button>
+        </div>
       </div>
       <button class="cmdk-trigger" id="cmdkBtn" aria-label="Search" title="Search (⌘K)">
         <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
@@ -29,26 +32,26 @@
         <kbd>⌘K</kbd>
       </button>
       <div class="nav-section">
+        <div class="nav-item active" data-view="overview">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12h7V3H3z"/><path d="M14 21h7v-7h-7z"/><path d="M14 10h7V3h-7z"/><path d="M3 21h7v-5H3z"/></svg>
+          <span>Overview</span>
+        </div>
         <div class="nav-item" data-view="sessions">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
           <span>Sessions</span>
         </div>
+        <div class="nav-item" data-view="insights">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
+          <span>Insights</span>
+        </div>
         <div class="nav-item" data-view="timeline">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
           <span>Timeline</span>
         </div>
-        <div class="nav-item active" data-view="overview">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12h7V3H3z"/><path d="M14 21h7v-7h-7z"/><path d="M14 10h7V3h-7z"/><path d="M3 21h7v-5H3z"/></svg>
-          <span>Overview</span>
-        </div>
         <div class="nav-item" data-view="files">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
           <span>Files</span>
         </div>
-        <div class="nav-item" data-view="stats">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.325 4.317a1.724 1.724 0 0 1 3.35 0 1.724 1.724 0 0 0 2.573 1.066 1.724 1.724 0 0 1 2.28 2.28 1.724 1.724 0 0 0 1.065 2.573 1.724 1.724 0 0 1 0 3.35 1.724 1.724 0 0 0-1.066 2.573 1.724 1.724 0 0 1-2.28 2.28 1.724 1.724 0 0 0-2.573 1.065 1.724 1.724 0 0 1-3.35 0 1.724 1.724 0 0 0-2.573-1.066 1.724 1.724 0 0 1-2.28-2.28 1.724 1.724 0 0 0-1.065-2.573 1.724 1.724 0 0 1 0-3.35 1.724 1.724 0 0 0 1.066-2.573 1.724 1.724 0 0 1 2.28-2.28 1.724 1.724 0 0 0 2.572-1.065z"/><circle cx="12" cy="12" r="3"/></svg>
-          <span>Settings</span>
-        </div>
 
       </div>
     </nav>
@@ -56,8 +59,8 @@
     <div class="mobile-toolbar">
       <button class="mobile-search-btn" id="mobile-search-btn" title="Search" aria-label="Search"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg></button>
       <button class="theme-toggle-mobile" id="theme-toggle-mobile" title="Toggle theme" aria-label="Toggle theme"><svg class="theme-icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg><svg class="theme-icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg></button>
+      <button class="theme-toggle-mobile" id="settings-btn-mobile" title="Settings" aria-label="Settings"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.325 4.317a1.724 1.724 0 0 1 3.35 0 1.724 1.724 0 0 0 2.573 1.066 1.724 1.724 0 0 1 2.28 2.28 1.724 1.724 0 0 0 1.065 2.573 1.724 1.724 0 0 1 0 3.35 1.724 1.724 0 0 0-1.066 2.573 1.724 1.724 0 0 1-2.28 2.28 1.724 1.724 0 0 0-2.573 1.065 1.724 1.724 0 0 1-3.35 0 1.724 1.724 0 0 0-2.573-1.066 1.724 1.724 0 0 1-2.28-2.28 1.724 1.724 0 0 0-1.065-2.573 1.724 1.724 0 0 1 0-3.35 1.724 1.724 0 0 0 1.066-2.573 1.724 1.724 0 0 1 2.28-2.28 1.724 1.724 0 0 0 2.572-1.065z"/><circle cx="12" cy="12" r="3"/></svg></button>
     </div>
-
   </div>
   <script src="/app.js"></script>
   <script>