agentacta 2026.3.12 → 2026.3.26

package/README.md

@@ -32,12 +32,15 @@ AgentActa gives you one place to inspect the full trail.
 
 - 🔍 Full-text search across messages, tool calls, and results
 - 📋 Session browser with summaries, token breakdowns, and model info
+- 🧭 Project-scoped session filtering with per-event attribution
+- 🤖 Clear Codex run visibility for direct and Symphony-origin sessions
 - 📅 Timeline view with live updates for today
 - 📁 File activity across all indexed sessions
 - 🌗 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)
@@ -80,12 +83,22 @@ Suggestions come from your own dataset: top tools, common topics, frequently tou
 
 Browse indexed sessions with auto-generated summaries, token splits (input/output), and model details. Click into any session to see the full event history.
 
-Session types get tagged so noisy categories are easier to spot (cron, sub-agent, heartbeat).
+Session detail view supports project-scoped filtering, so mixed-project sessions can be narrowed down without losing the full underlying transcript. The Initial Prompt jump still resolves from full session context even when a project filter is active.
+
+Session types get tagged so noisy categories are easier to spot (cron, sub-agent, heartbeat). Codex-backed work is also distinguished more clearly, including direct Codex runs and Symphony-origin Codex sessions.
 
 ### Timeline
 
 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.
@@ -163,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,12 +20,16 @@ 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}`);
 }
 
 const { loadConfig } = require('./config');
 const { open, init, createStmts } = require('./db');
-const { discoverSessionDirs, indexFile } = require('./indexer');
+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;
@@ -154,26 +158,68 @@ const sessionDirs = discoverSessionDirs(config);
 
 // Initial indexing pass
 for (const dir of sessionDirs) {
-  const files = fs.readdirSync(dir.path).filter(f => f.endsWith('.jsonl'));
-  for (const file of files) {
+  const files = listJsonlFiles(dir.path, !!dir.recursive);
+  for (const filePath of files) {
     try {
-      const result = indexFile(db, path.join(dir.path, file), dir.agent, stmts, ARCHIVE_MODE);
-      if (!result.skipped) console.log(`Indexed: ${file} (${dir.agent})`);
+      const result = indexFile(db, filePath, dir.agent, stmts, ARCHIVE_MODE, config);
+      if (!result.skipped) console.log(`Indexed: ${path.basename(filePath)} (${dir.agent})`);
     } catch (err) {
-      console.error(`Error indexing ${file}:`, err.message);
+      console.error(`Error indexing ${path.basename(filePath)}:`, err.message);
     }
   }
 }
 
+// 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
 const _reindexTimers = new Map();
 const REINDEX_DEBOUNCE_MS = 2000;
+const RECURSIVE_RESCAN_MS = 15000;
+
+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) {
+          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})`);
+  } catch (err) {
+    console.error(`Error rescanning ${dir.path}:`, err.message);
+  }
+}
 
 for (const dir of sessionDirs) {
   try {
     fs.watch(dir.path, { persistent: false }, (eventType, filename) => {
+      if (dir.recursive) {
+        if (_reindexTimers.has(dir.path)) clearTimeout(_reindexTimers.get(dir.path));
+        _reindexTimers.set(dir.path, setTimeout(() => {
+          _reindexTimers.delete(dir.path);
+          reindexRecursiveDir(dir);
+        }, REINDEX_DEBOUNCE_MS));
+        return;
+      }
+
       if (!filename || !filename.endsWith('.jsonl')) return;
       const filePath = path.join(dir.path, filename);
       if (!fs.existsSync(filePath)) return;
@@ -183,10 +229,13 @@ for (const dir of sessionDirs) {
       _reindexTimers.set(filePath, setTimeout(() => {
         _reindexTimers.delete(filePath);
         try {
-          const result = indexFile(db, filePath, dir.agent, stmts, ARCHIVE_MODE);
+          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);
@@ -194,6 +243,10 @@ for (const dir of sessionDirs) {
       }, REINDEX_DEBOUNCE_MS));
     });
     console.log(`  Watching: ${dir.path}`);
+    if (dir.recursive) {
+      const timer = setInterval(() => reindexRecursiveDir(dir), RECURSIVE_RESCAN_MS);
+      timer.unref?.();
+    }
   } catch (err) {
     console.error(`  Failed to watch ${dir.path}:`, err.message);
   }
@@ -206,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 });
     }
 
@@ -293,7 +347,7 @@ const server = http.createServer((req, res) => {
 
     else if (pathname.match(/^\/api\/sessions\/[^/]+\/events$/)) {
       const id = pathname.split('/')[3];
-      const session = db.prepare('SELECT id FROM sessions WHERE id = ?').get(id);
+      const session = db.prepare('SELECT * FROM sessions WHERE id = ?').get(id);
       if (!session) return json(res, { error: 'Not found' }, 404);
 
       const after = query.after || '1970-01-01T00:00:00.000Z';
@@ -306,12 +360,14 @@ const server = http.createServer((req, res) => {
          ORDER BY timestamp ASC, id ASC
          LIMIT ?`
       ).all(id, after, after, afterId, limit);
-      json(res, { events: rows, after, afterId, count: rows.length });
+      const contextRows = loadDeltaAttributionContext(db, id, rows);
+      const events = attributeEventDelta(session, rows, contextRows);
+      json(res, { events, after, afterId, count: events.length });
     }
 
     else if (pathname.match(/^\/api\/sessions\/[^/]+\/stream$/)) {
       const id = pathname.split('/')[3];
-      const session = db.prepare('SELECT id FROM sessions WHERE id = ?').get(id);
+      const session = db.prepare('SELECT * FROM sessions WHERE id = ?').get(id);
       if (!session) return json(res, { error: 'Not found' }, 404);
 
       res.writeHead(200, {
@@ -331,8 +387,10 @@ const server = http.createServer((req, res) => {
             'SELECT * FROM events WHERE session_id = ? AND timestamp > ? ORDER BY timestamp ASC'
           ).all(id, lastTs);
           if (rows.length) {
+            const contextRows = loadDeltaAttributionContext(db, id, rows);
+            const attributedRows = attributeEventDelta(session, rows, contextRows);
             lastTs = rows[rows.length - 1].timestamp;
-            res.write(`id: ${lastTs}\ndata: ${JSON.stringify(rows)}\n\n`);
+            res.write(`id: ${lastTs}\ndata: ${JSON.stringify(attributedRows)}\n\n`);
           }
         } catch (err) {
           console.error('SSE query error:', err.message);
@@ -356,8 +414,9 @@ const server = http.createServer((req, res) => {
       if (!session) { json(res, { error: 'Not found' }, 404); }
       else {
         const events = db.prepare('SELECT * FROM events WHERE session_id = ? ORDER BY timestamp DESC').all(id);
+        const attributed = attributeSessionEvents(session, events);
         const hasArchive = ARCHIVE_MODE && db.prepare('SELECT COUNT(*) as c FROM archive WHERE session_id = ?').get(id).c > 0;
-        json(res, { session, events, hasArchive });
+        json(res, { session, events: attributed.events, projectFilters: attributed.projectFilters, hasArchive });
       }
     }
     else if (pathname.match(/^\/api\/archive\/session\/[^/]+$/)) {
@@ -726,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/indexer.js

@@ -28,14 +28,26 @@ function listJsonlFiles(baseDir, recursive = false) {
 function discoverSessionDirs(config) {
   const dirs = [];
   const home = process.env.HOME;
+  const codexSessionsPath = path.join(home, '.codex/sessions');
+
+  function normalizedPath(p) {
+    return path.resolve(p).replace(/[\\\/]+$/, '');
+  }
+
+  function hasDir(targetPath) {
+    const wanted = normalizedPath(targetPath);
+    return dirs.some(d => normalizedPath(d.path) === wanted);
+  }
 
   // Expand a single path into session dirs, handling Claude Code's per-project structure
   function expandPath(p) {
     if (!fs.existsSync(p)) return;
     const stat = fs.statSync(p);
     if (!stat.isDirectory()) return;
+    const normalized = normalizedPath(p);
+    const normalizedCodex = normalizedPath(codexSessionsPath);
     // Claude Code: ~/.claude/projects contains per-project subdirs with JSONL files
-    if (p.replace(/\/$/, '').endsWith('/.claude/projects')) {
+    if (normalized.endsWith('/.claude/projects')) {
       for (const proj of fs.readdirSync(p)) {
         const projDir = path.join(p, proj);
         if (fs.statSync(projDir).isDirectory()) {
@@ -43,6 +55,9 @@ function discoverSessionDirs(config) {
           if (hasJsonl) dirs.push({ path: projDir, agent: 'claude-code' });
         }
       }
+    } else if (normalized === normalizedCodex) {
+      // Codex CLI stores nested YYYY/MM/DD directories and must be recursive.
+      dirs.push({ path: p, agent: 'codex-cli', recursive: true });
     } else {
       dirs.push({ path: p, agent: path.basename(path.dirname(p)) });
     }
@@ -55,6 +70,10 @@ function discoverSessionDirs(config) {
       ? sessionsOverride
       : sessionsOverride.split(':');
     overridePaths.forEach(expandPath);
+    // Keep direct Codex visibility even when custom overrides omit it.
+    if (fs.existsSync(codexSessionsPath) && fs.statSync(codexSessionsPath).isDirectory() && !hasDir(codexSessionsPath)) {
+      dirs.push({ path: codexSessionsPath, agent: 'codex-cli', recursive: true });
+    }
     if (dirs.length) return dirs;
   }
 
@@ -73,7 +92,7 @@ function discoverSessionDirs(config) {
   expandPath(path.join(home, '.claude/projects'));
 
   // Scan ~/.codex/sessions recursively (Codex CLI stores nested YYYY/MM/DD/*.jsonl)
-  const codexSessions = path.join(home, '.codex/sessions');
+  const codexSessions = codexSessionsPath;
   if (fs.existsSync(codexSessions) && fs.statSync(codexSessions).isDirectory()) {
     dirs.push({ path: codexSessions, agent: 'codex-cli', recursive: true });
   }
@@ -226,6 +245,8 @@ function extractProjectFromPath(filePath, config) {
 
   // Common repo location: ~/Developer/<repo>/...
   if (parts[0] === 'Developer' && parts[1]) return aliasProject(parts[1], config);
+  // Symphony worktrees: ~/symphony-workspaces/<issue>/...
+  if (parts[0] === 'symphony-workspaces' && parts[1]) return aliasProject(parts[1], config);
 
   // OpenClaw workspace and agent stores
   if (parts[0] === '.openclaw' && parts[1] === 'workspace') return aliasProject('workspace', config);
@@ -274,6 +295,7 @@ function indexFile(db, filePath, agentName, stmts, archiveMode, config) {
   let firstMessageTimestamp = null;
   let codexProvider = null;
   let codexSource = null;
+  let codexOriginator = null;
   let sawSnapshotRecord = false;
   let sawNonSnapshotRecord = false;
 
@@ -321,7 +343,7 @@ function indexFile(db, filePath, agentName, stmts, archiveMode, config) {
     const meta = firstLine.payload || {};
     sessionId = meta.id || path.basename(filePath, '.jsonl');
     sessionStart = meta.timestamp || firstLine.timestamp || new Date().toISOString();
-    sessionType = 'codex-cli';
+    sessionType = 'codex-direct';
     agent = 'codex-cli';
     if (meta.model) {
       model = meta.model;
@@ -329,6 +351,8 @@ function indexFile(db, filePath, agentName, stmts, archiveMode, config) {
     }
     codexProvider = meta.model_provider || null;
     codexSource = meta.source || null;
+    codexOriginator = meta.originator || null;
+    if (codexOriginator && codexOriginator.includes('symphony')) sessionType = 'codex-symphony';
   } else {
     return { skipped: true };
   }
@@ -363,6 +387,8 @@ function indexFile(db, filePath, agentName, stmts, archiveMode, config) {
         }
         if (meta.model_provider) codexProvider = meta.model_provider;
         if (meta.source) codexSource = meta.source;
+        if (meta.originator) codexOriginator = meta.originator;
+        if (codexOriginator && codexOriginator.includes('symphony')) sessionType = 'codex-symphony';
         if (meta.model_provider && !model) model = meta.model_provider;
         continue;
       }
@@ -567,6 +593,7 @@ function indexFile(db, filePath, agentName, stmts, archiveMode, config) {
       const parts = ['Codex CLI session'];
       if (codexProvider) parts.push(`provider=${codexProvider}`);
       if (codexSource) parts.push(`source=${codexSource}`);
+      if (codexOriginator) parts.push(`originator=${codexOriginator}`);
       summary = parts.join(' · ');
     } else {
       summary = 'Heartbeat session';
@@ -730,6 +757,6 @@ function indexAll(db, config) {
   return { sessions: stats.sessions, events: evStats.events, newSessions: totalSessions };
 }
 
-module.exports = { discoverSessionDirs, indexFile, indexAll };
+module.exports = { discoverSessionDirs, listJsonlFiles, indexFile, indexAll };
 
 if (require.main === module) run();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentacta",
-  "version": "2026.3.12",
+  "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();
 }
 
@@ -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>

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; }
+