agentacta 2026.3.12-r2 → 2026.3.26

package/README.md

@@ -39,7 +39,8 @@ AgentActa gives you one place to inspect the full trail.
 - 🌗 Light and dark themes
 - 📊 Stats for sessions, messages, tools, and tokens
 - ⚡ Live indexing via file watching
-- 📱 Mobile-friendly UI
+- 📱 Mobile-optimized UI with floating navigation
+- 🏥 Session health scoring — reliability scores, issue detection, and per-signal breakdowns
 - 💡 Search suggestions based on real data
 - ⌨️ Command palette (⌘K / Ctrl+K) for quick navigation
 - 🎨 Theme settings (system, light, dark, OLED)
@@ -90,6 +91,14 @@ Session types get tagged so noisy categories are easier to spot (cron, sub-agent
 
 Pick a date, see everything that happened, newest first. Today's view updates live as new events come in.
 
+### Insights
+
+The Insights tab surfaces session health across your entire history.
+
+It tracks five issue signals — repeated tool loops, sessions that produced no output, high error rates, vague instructions, and incomplete sessions. Each signal is severity-scaled so scores reflect how bad the problem actually was, not just whether it occurred.
+
+The reliability score (0–100) is the inverse of the confusion score: higher means the agent completed work cleanly. The issue rate shows what percentage of possible signal types were detected in a session.
+
 ### File Activity
 
 See what files were touched, how often, and by which sessions.
@@ -167,6 +176,7 @@ Default config (auto-generated on first run — session directories are detected
 | `GET /api/timeline/stream?after=<ts>` | SSE stream for live timeline updates |
 | `POST /api/maintenance` | VACUUM + WAL checkpoint (returns size before/after) |
 | `GET /api/health` | Server status, version, uptime, session count |
+| `GET /api/insights` | Session health summary — reliability scores, issue counts, top flagged sessions |
 | `GET /api/export/search?q=<query>&format=md` | Export search results |
 
 ### Context API

package/config.js

@@ -57,6 +57,8 @@ function loadConfig() {
     }
   }
 
+  // In demo mode, ignore file-based sessionsPath so live data doesn't bleed in
+  if (process.env.AGENTACTA_DEMO_MODE) delete fileConfig.sessionsPath;
   const config = { ...DEFAULTS, ...fileConfig };
 
   // Env var overrides (highest priority)

package/db.js

@@ -103,6 +103,18 @@ function init(dbPath) {
     );
 
     CREATE INDEX IF NOT EXISTS idx_archive_session ON archive(session_id);
+
+    CREATE TABLE IF NOT EXISTS session_insights (
+      session_id TEXT PRIMARY KEY,
+      signals TEXT,
+      confusion_score INTEGER DEFAULT 0,
+      flagged INTEGER DEFAULT 0,
+      computed_at TEXT,
+      FOREIGN KEY (session_id) REFERENCES sessions(id) ON DELETE CASCADE
+    );
+
+    CREATE INDEX IF NOT EXISTS idx_insights_flagged ON session_insights(flagged);
+    CREATE INDEX IF NOT EXISTS idx_insights_score ON session_insights(confusion_score DESC);
   `);
 
   // Add columns if missing (migration)

package/index.js

@@ -20,6 +20,7 @@ if (process.argv.includes('--demo')) {
   }
   process.env.AGENTACTA_SESSIONS_PATH = demoDir;
   process.env.AGENTACTA_DB_PATH = path.join(demoDir, 'demo.db');
+  process.env.AGENTACTA_DEMO_MODE = '1'; // signal to config.js to skip file-based sessionsPath
   console.log(`Demo mode: using sessions from ${demoDir}`);
 }
 
@@ -28,6 +29,7 @@ const { open, init, createStmts } = require('./db');
 const { discoverSessionDirs, listJsonlFiles, indexFile } = require('./indexer');
 const { attributeSessionEvents, attributeEventDelta } = require('./project-attribution');
 const { loadDeltaAttributionContext } = require('./delta-attribution-context');
+const { analyzeSession, analyzeAll, getInsightsSummary } = require('./insights');
 
 const config = loadConfig();
 const PORT = config.port;
@@ -167,6 +169,14 @@ for (const dir of sessionDirs) {
   }
 }
 
+// Compute insights for all indexed sessions
+try {
+  analyzeAll(db);
+  console.log('Insights computed for all sessions');
+} catch (err) {
+  console.error('Error computing insights:', err.message);
+}
+
 console.log(`Watching ${sessionDirs.length} session directories`);
 
 // Debounce map: filePath -> timeout handle
@@ -178,11 +188,18 @@ function reindexRecursiveDir(dir) {
   try {
     const files = listJsonlFiles(dir.path, true);
     let changed = 0;
+    const upsert = db.prepare('INSERT OR REPLACE INTO session_insights (session_id, signals, confusion_score, flagged, computed_at) VALUES (?, ?, ?, ?, ?)');
     for (const filePath of files) {
       const result = indexFile(db, filePath, dir.agent, stmts, ARCHIVE_MODE, config);
       if (!result.skipped) {
         changed++;
-        if (result.sessionId) sseEmitter.emit('session-update', result.sessionId);
+        if (result.sessionId) {
+          try {
+            const insight = analyzeSession(db, result.sessionId);
+            if (insight) upsert.run(insight.session_id, JSON.stringify(insight.signals), insight.confusion_score, insight.flagged ? 1 : 0, insight.computed_at);
+          } catch {}
+          sseEmitter.emit('session-update', result.sessionId);
+        }
       }
     }
     if (changed > 0) console.log(`Live re-indexed ${changed} files (${dir.agent})`);
@@ -215,7 +232,10 @@ for (const dir of sessionDirs) {
           const result = indexFile(db, filePath, dir.agent, stmts, ARCHIVE_MODE, config);
           if (!result.skipped) {
             console.log(`Live re-indexed: ${filename} (${dir.agent})`);
-            if (result.sessionId) sseEmitter.emit('session-update', result.sessionId);
+            if (result.sessionId) {
+              try { analyzeSession(db, result.sessionId); const upsert = db.prepare('INSERT OR REPLACE INTO session_insights (session_id, signals, confusion_score, flagged, computed_at) VALUES (?, ?, ?, ?, ?)'); const insight = analyzeSession(db, result.sessionId); if (insight) upsert.run(insight.session_id, JSON.stringify(insight.signals), insight.confusion_score, insight.flagged ? 1 : 0, insight.computed_at); } catch {}
+              sseEmitter.emit('session-update', result.sessionId);
+            }
           }
         } catch (err) {
           console.error(`Error re-indexing ${filename}:`, err.message);
@@ -239,6 +259,7 @@ const server = http.createServer((req, res) => {
     if (pathname === '/api/reindex') {
       const { indexAll } = require('./indexer');
       const result = indexAll(db, config);
+      try { analyzeAll(db); } catch (e) { console.error('Insights recompute error:', e.message); }
       return json(res, { ok: true, sessions: result.sessions, events: result.events });
     }
 
@@ -764,6 +785,27 @@ const server = http.createServer((req, res) => {
       `).all(fp);
       json(res, { file: fp, sessions: rows });
     }
+    else if (pathname === '/api/insights') {
+      const summary = getInsightsSummary(db);
+      return json(res, summary);
+    }
+    else if (pathname.match(/^\/api\/insights\/session\/[^/]+$/)) {
+      const id = pathname.split('/')[4];
+      const row = db.prepare('SELECT * FROM session_insights WHERE session_id = ?').get(id);
+      if (!row) {
+        // Compute on-the-fly if not yet analyzed
+        const result = analyzeSession(db, id);
+        if (!result) return json(res, { error: 'Session not found' }, 404);
+        return json(res, result);
+      }
+      return json(res, {
+        session_id: row.session_id,
+        signals: JSON.parse(row.signals || '[]'),
+        confusion_score: row.confusion_score,
+        flagged: !!row.flagged,
+        computed_at: row.computed_at
+      });
+    }
     else if (!serveStatic(req, res)) {
       const index = path.join(PUBLIC, 'index.html');
       if (fs.existsSync(index)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentacta",
-  "version": "2026.3.12-r2",
+  "version": "2026.3.26",
   "description": "Audit trail and search engine for AI agent sessions",
   "main": "index.js",
   "bin": {

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();
 }
 
@@ -690,6 +702,7 @@ async function viewSession(id) {
     <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;
@@ -1018,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) {
@@ -1196,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>
@@ -1524,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 = '';
@@ -1542,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();
   });
 });
@@ -1788,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>

package/public/style.css

@@ -197,7 +197,12 @@ body.cmdk-open {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--space-sm);
+}
+
+.sidebar-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
 }
 
 .sidebar h1 {
@@ -233,6 +238,13 @@ body.cmdk-open {
   color: var(--text-primary);
 }
 
+.theme-toggle.active,
+.theme-toggle-mobile.active {
+  color: var(--accent);
+  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
+  background: color-mix(in srgb, var(--accent) 10%, var(--bg-elevated));
+}
+
 .theme-toggle svg,
 .theme-toggle-mobile svg {
   width: 16px;
@@ -605,6 +617,28 @@ body.cmdk-open {
   border-radius: 10px;
 }
 
+.signal-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  white-space: nowrap;
+}
+.signal-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.signal-amber  .signal-dot { background: var(--amber); }
+.signal-red    .signal-dot { background: var(--red); }
+.signal-purple .signal-dot { background: var(--purple); }
+.signal-teal   .signal-dot { background: var(--teal); }
+.signal-accent .signal-dot { background: var(--accent); }
+.signal-muted  .signal-dot { background: var(--text-tertiary); }
+
 .session-type {
   font-size: 11px;
   font-weight: 500;
@@ -623,6 +657,8 @@ body.cmdk-open {
 
 .session-meta {
   display: flex;
+  align-items: center;
+  justify-content: space-between;
   gap: var(--space-lg);
   margin-top: var(--space-sm);
   font-size: 12px;
@@ -1511,22 +1547,25 @@ mark {
   .sidebar {
     position: fixed;
     top: auto;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    width: 100%;
+    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
+    left: 50%;
+    right: auto;
+    transform: translateX(-50%);
+    width: auto;
     height: auto;
     border-right: none;
-    border-top: 1px solid var(--border-subtle);
-    padding: 0;
-    padding-bottom: max(env(safe-area-inset-bottom, 0px), 16px);
+    border: 1px solid var(--border-default);
+    border-radius: 999px;
+    padding: 8px 12px;
     display: flex;
     flex-direction: row;
-    overflow: hidden;
+    align-items: center;
+    overflow: visible;
     z-index: 100;
     background: var(--bg-surface);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
+    box-shadow: 0 8px 32px rgba(0,0,0,0.28);
   }
 
   .sidebar-header { display: none; }
@@ -1535,29 +1574,30 @@ mark {
     display: flex;
   }
 
+  .sidebar-header, .cmdk-trigger { display: none; }
+
   .nav-section {
     display: flex;
     flex-direction: row;
-    width: 100%;
     padding: 0;
-    gap: 0;
+    gap: 2px;
   }
 
   .nav-item {
-    flex: 1;
+    flex: none;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding: 10px 0 4px;
+    padding: 7px 14px 5px;
     font-size: 10px;
     gap: 3px;
-    border-radius: 0;
+    border-radius: 999px;
     letter-spacing: 0.02em;
   }
 
   .nav-item::before { display: none; }
 
-  .nav-item svg { width: 22px; height: 22px; }
+  .nav-item svg { width: 20px; height: 20px; }
 
   .nav-item.active {
     color: var(--accent);
@@ -1568,7 +1608,7 @@ mark {
     margin-left: 0;
     padding: var(--space-xl) var(--space-lg);
     padding-top: calc(var(--space-xl) + env(safe-area-inset-top, 0px));
-    padding-bottom: calc(80px + max(env(safe-area-inset-bottom, 0px), 20px));
+    padding-bottom: calc(100px + max(env(safe-area-inset-bottom, 0px), 20px));
     max-width: 100%;
   }
 
@@ -1911,3 +1951,144 @@ mark {
   .cmdk-item-sub { display: none; }
   .cmdk-item-meta { font-size: 10px; }
 }
+
+/* ── Insights ── */
+.settings-gear {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.15s, background 0.15s;
+}
+.settings-gear svg { width: 16px; height: 16px; }
+.settings-gear:hover { color: var(--text-primary); background: var(--hover-bg); }
+
+.signal-lollipop-row {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 8px;
+}
+.signal-lollipop-expandable {
+  cursor: pointer;
+}
+.signal-lollipop-main {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.signal-bar-label {
+  font-size: 13px;
+  color: var(--text-secondary);
+  width: 130px;
+  flex-shrink: 0;
+}
+.signal-expand-hint {
+  font-size: 11px;
+  color: var(--text-tertiary);
+  flex-shrink: 0;
+}
+.signal-lollipop-desc {
+  display: none;
+  font-size: 12px;
+  color: var(--text-tertiary);
+  padding: 5px 0 3px 0;
+  line-height: 1.4;
+}
+.signal-lollipop-open .signal-lollipop-desc {
+  display: block;
+}
+.signal-lollipop-open .signal-expand-hint {
+  color: var(--text-secondary);
+}
+.signal-lollipop-track {
+  flex: 1;
+  height: 20px;
+}
+.signal-lollipop-svg {
+  display: block;
+  overflow: visible;
+}
+.signal-bar-count {
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-muted);
+  width: 36px;
+  text-align: right;
+  flex-shrink: 0;
+}
+.stat-desc {
+  font-size: 11px;
+  color: var(--text-tertiary);
+  margin-top: 4px;
+  line-height: 1.3;
+}
+
+.insight-row { cursor: pointer; }
+.insight-row:hover { background: var(--hover-bg); }
+.insight-callout {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--border-color);
+  font-size: 13px;
+}
+.insight-callout:last-child { border-bottom: none; }
+.insight-detail { color: var(--text-secondary); }
+.insights-signals { margin-top: 8px; }
+
+.confusion-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 1px 7px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+
+.confusion-label {
+  font-weight: 400;
+  font-size: 10px;
+  opacity: 0.7;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.confusion-issue-count {
+  background: color-mix(in srgb, var(--text-tertiary) 15%, transparent);
+  color: var(--text-secondary);
+}
+
+.insight-scores {
+  font-size: 11px;
+  color: var(--text-tertiary);
+  white-space: nowrap;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.insight-score-value {
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+.insight-signal-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  align-items: center;
+}
+.confusion-green  { background: #dcfce7; color: #166534; }
+.confusion-yellow { background: #fef9c3; color: #854d0e; }
+.confusion-red    { background: #fee2e2; color: #991b1b; }
+[data-theme="dark"] .confusion-green  { background: #14532d; color: #86efac; }
+[data-theme="dark"] .confusion-yellow { background: #713f12; color: #fde68a; }
+[data-theme="dark"] .confusion-red    { background: #7f1d1d; color: #fca5a5; }
+