agentlytics 0.1.6 → 0.1.8

package/cache.js

@@ -7,7 +7,7 @@ const { calculateCost, getModelPricing, normalizeModelName } = require('./pricin
 
 const CACHE_DIR = path.join(os.homedir(), '.agentlytics');
 const CACHE_DB = path.join(CACHE_DIR, 'cache.db');
-const SCHEMA_VERSION = 4; // bump this when schema changes to auto-revalidate
+const SCHEMA_VERSION = 5; // bump this when schema changes to auto-revalidate
 
 let db = null;
 
@@ -293,6 +293,13 @@ function scanAll(onProgress, opts = {}) {
 // Query helpers (used by server.js)
 // ============================================================
 
+// Returns { sql, params } for excluding hidden folders
+function hiddenFolderFilter(opts, colName = 'folder') {
+  if (!opts.hiddenFolders || opts.hiddenFolders.length === 0) return { sql: '', params: [] };
+  const placeholders = opts.hiddenFolders.map(() => '?').join(',');
+  return { sql: ` AND (${colName} IS NULL OR ${colName} NOT IN (${placeholders}))`, params: [...opts.hiddenFolders] };
+}
+
 function getCachedChats(opts = {}) {
   let sql = `SELECT c.*,
     cs.models AS _models,
@@ -301,6 +308,8 @@ function getCachedChats(opts = {}) {
     cs.total_user_chars AS _uChars, cs.total_assistant_chars AS _aChars
     FROM chats c LEFT JOIN chat_stats cs ON cs.chat_id = c.id WHERE 1=1`;
   const params = [];
+  const hf = hiddenFolderFilter(opts, 'c.folder');
+  if (hf.sql) { sql += hf.sql; params.push(...hf.params); }
   if (opts.editor) { sql += ' AND c.source LIKE ?'; params.push(`%${opts.editor}%`); }
   if (opts.folder) { sql += ' AND c.folder LIKE ?'; params.push(`%${opts.folder}%`); }
   if (opts.named !== false) { sql += ' AND (c.name IS NOT NULL OR c.bubble_count > 0)'; }
@@ -335,6 +344,8 @@ function getCachedChats(opts = {}) {
 function countCachedChats(opts = {}) {
   let sql = 'SELECT COUNT(*) as cnt FROM chats WHERE 1=1';
   const params = [];
+  const hf = hiddenFolderFilter(opts);
+  if (hf.sql) { sql += hf.sql; params.push(...hf.params); }
   if (opts.editor) { sql += ' AND source LIKE ?'; params.push(`%${opts.editor}%`); }
   if (opts.folder) { sql += ' AND folder LIKE ?'; params.push(`%${opts.folder}%`); }
   if (opts.named !== false) { sql += ' AND (name IS NOT NULL OR bubble_count > 0)'; }
@@ -347,6 +358,8 @@ function getCachedOverview(opts = {}) {
   // Build conditions dynamically to support editor + date range filters
   const conditions = [];
   const params = [];
+  const hf = hiddenFolderFilter(opts);
+  if (hf.sql) { conditions.push(hf.sql.replace(' AND ', '')); params.push(...hf.params); }
   if (opts.editor) { conditions.push('source = ?'); params.push(opts.editor); }
   if (opts.dateFrom) { conditions.push('COALESCE(last_updated_at, created_at) >= ?'); params.push(opts.dateFrom); }
   if (opts.dateTo) { conditions.push('COALESCE(last_updated_at, created_at) <= ?'); params.push(opts.dateTo); }
@@ -411,6 +424,8 @@ function getCachedOverview(opts = {}) {
 function getCachedDailyActivity(opts = {}) {
   const conditions = [];
   const params = [];
+  const hf = hiddenFolderFilter(opts);
+  if (hf.sql) { conditions.push(hf.sql.replace(' AND ', '')); params.push(...hf.params); }
   if (opts.editor) { conditions.push('source = ?'); params.push(opts.editor); }
   if (opts.dateFrom) { conditions.push('COALESCE(last_updated_at, created_at) >= ?'); params.push(opts.dateFrom); }
   if (opts.dateTo) { conditions.push('COALESCE(last_updated_at, created_at) <= ?'); params.push(opts.dateTo); }
@@ -441,6 +456,8 @@ function getCachedDailyActivity(opts = {}) {
 function getCachedDeepAnalytics(opts = {}) {
   let sql = 'SELECT cs.* FROM chat_stats cs JOIN chats c ON cs.chat_id = c.id WHERE 1=1';
   const params = [];
+  const hf = hiddenFolderFilter(opts, 'c.folder');
+  if (hf.sql) { sql += hf.sql; params.push(...hf.params); }
   if (opts.editor) { sql += ' AND c.source LIKE ?'; params.push(`%${opts.editor}%`); }
   if (opts.folder) { sql += ' AND c.folder = ?'; params.push(opts.folder); }
   if (opts.dateFrom) { sql += ' AND COALESCE(c.last_updated_at, c.created_at) >= ?'; params.push(opts.dateFrom); }
@@ -499,7 +516,26 @@ function getCachedChat(id) {
   if (!chat) return null;
 
   const stats = db.prepare('SELECT * FROM chat_stats WHERE chat_id = ?').get(chat.id);
-  const messages = db.prepare('SELECT role, content, model, input_tokens, output_tokens FROM messages WHERE chat_id = ? ORDER BY seq').all(chat.id);
+  let messages = db.prepare('SELECT role, content, model, input_tokens, output_tokens FROM messages WHERE chat_id = ? ORDER BY seq').all(chat.id);
+
+  // If no cached messages, try fetching live from the editor
+  if (messages.length === 0 && !chat.encrypted) {
+    try {
+      const meta = JSON.parse(chat._meta || '{}');
+      const reconstructed = {
+        composerId: chat.id, source: chat.source, name: chat.name, mode: chat.mode,
+        folder: chat.folder, createdAt: chat.created_at, lastUpdatedAt: chat.last_updated_at,
+        encrypted: !!chat.encrypted, bubbleCount: chat.bubble_count,
+        ...meta,
+      };
+      const liveMessages = getMessages(reconstructed);
+      if (liveMessages && liveMessages.length > 0) {
+        // Store for next time
+        try { analyzeAndStore(reconstructed); } catch {}
+        messages = db.prepare('SELECT role, content, model, input_tokens, output_tokens FROM messages WHERE chat_id = ? ORDER BY seq').all(chat.id);
+      }
+    } catch {}
+  }
 
   let parsedStats = null;
   if (stats) {
@@ -542,6 +578,10 @@ function getCachedProjects(opts = {}) {
   // Build date filter
   let dateFilter = '';
   const dateParams = [];
+  if (!opts.includeHidden) {
+    const hf = hiddenFolderFilter(opts);
+    if (hf.sql) { dateFilter += hf.sql; dateParams.push(...hf.params); }
+  }
   if (opts.dateFrom) { dateFilter += ' AND COALESCE(last_updated_at, created_at) >= ?'; dateParams.push(opts.dateFrom); }
   if (opts.dateTo) { dateFilter += ' AND COALESCE(last_updated_at, created_at) <= ?'; dateParams.push(opts.dateTo); }
 
@@ -745,6 +785,8 @@ function getCachedDashboardStats(opts = {}) {
   // Build conditions dynamically to support editor + date range filters
   const conditions = [];
   const params = [];
+  const hf = hiddenFolderFilter(opts);
+  if (hf.sql) { conditions.push(hf.sql.replace(' AND ', '')); params.push(...hf.params); }
   if (opts.editor) { conditions.push('source = ?'); params.push(opts.editor); }
   if (opts.dateFrom) { conditions.push('COALESCE(last_updated_at, created_at) >= ?'); params.push(opts.dateFrom); }
   if (opts.dateTo) { conditions.push('COALESCE(last_updated_at, created_at) <= ?'); params.push(opts.dateTo); }
@@ -1103,6 +1145,8 @@ function estimateCosts(whereClause = '', params = []) {
 function getCostBreakdown(opts = {}) {
   let whereClause = '';
   const params = [];
+  const hf = hiddenFolderFilter(opts, 'c.folder');
+  if (hf.sql) { whereClause += hf.sql; params.push(...hf.params); }
   if (opts.editor) { whereClause += ' AND c.source LIKE ?'; params.push(`%${opts.editor}%`); }
   if (opts.folder) { whereClause += ' AND c.folder = ?'; params.push(opts.folder); }
   if (opts.dateFrom) { whereClause += ' AND COALESCE(c.last_updated_at, c.created_at) >= ?'; params.push(opts.dateFrom); }
@@ -1114,6 +1158,8 @@ function getCostBreakdown(opts = {}) {
 function getCostAnalytics(opts = {}) {
   const conditions = [];
   const params = [];
+  const hf = hiddenFolderFilter(opts, 'c.folder');
+  if (hf.sql) { conditions.push(hf.sql.replace(' AND ', '')); params.push(...hf.params); }
   if (opts.editor) { conditions.push('c.source LIKE ?'); params.push(`%${opts.editor}%`); }
   if (opts.dateFrom) { conditions.push('COALESCE(c.last_updated_at, c.created_at) >= ?'); params.push(opts.dateFrom); }
   if (opts.dateTo) { conditions.push('COALESCE(c.last_updated_at, c.created_at) <= ?'); params.push(opts.dateTo); }

package/editors/cursor.js

@@ -182,6 +182,7 @@ function getComposerBubbles(globalDb, composerId) {
 function bubblesToMessages(bubbles) {
   const messages = [];
   for (const b of bubbles) {
+    if (!b) continue;
     const type = b.type; // 1=user, 2=assistant
     if (type === 1) {
       const text = b.text || '';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentlytics",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "Comprehensive analytics dashboard for AI coding agents — Cursor, Windsurf, Claude Code, VS Code Copilot, Zed, Antigravity, OpenCode, Command Code",
   "main": "index.js",
   "bin": {

package/server.js

@@ -1,5 +1,7 @@
 const express = require('express');
 const path = require('path');
+const fs = require('fs');
+const os = require('os');
 const cache = require('./cache');
 const { generateShareSvg } = require('./share-image');
 
@@ -7,6 +9,26 @@ const app = express();
 app.use(express.json());
 app.use(express.static(path.join(__dirname, 'public')));
 
+// ============================================================
+// Config: ~/.agentlytics/config.json
+// ============================================================
+
+const CONFIG_PATH = path.join(os.homedir(), '.agentlytics', 'config.json');
+
+function readConfig() {
+  try { return JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); } catch { return {}; }
+}
+
+function writeConfig(config) {
+  const dir = path.dirname(CONFIG_PATH);
+  if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
+  fs.writeFileSync(CONFIG_PATH, JSON.stringify(config, null, 2));
+}
+
+function getHiddenFolders() {
+  return readConfig().hiddenProjects || [];
+}
+
 // ============================================================
 // API endpoints — all reads from SQLite cache
 // ============================================================
@@ -25,7 +47,7 @@ app.get('/api/mode', (req, res) => {
 
 app.get('/api/overview', (req, res) => {
   try {
-    const opts = { editor: req.query.editor || null, ...parseDateOpts(req.query) };
+    const opts = { editor: req.query.editor || null, ...parseDateOpts(req.query), hiddenFolders: getHiddenFolders() };
     res.json(cache.getCachedOverview(opts));
   } catch (err) {
     res.status(500).json({ error: err.message });
@@ -34,7 +56,7 @@ app.get('/api/overview', (req, res) => {
 
 app.get('/api/daily-activity', (req, res) => {
   try {
-    const opts = { editor: req.query.editor || null, ...parseDateOpts(req.query) };
+    const opts = { editor: req.query.editor || null, ...parseDateOpts(req.query), hiddenFolders: getHiddenFolders() };
     res.json(cache.getCachedDailyActivity(opts));
   } catch (err) {
     res.status(500).json({ error: err.message });
@@ -50,6 +72,7 @@ app.get('/api/chats', (req, res) => {
       limit: req.query.limit ? parseInt(req.query.limit) : 200,
       offset: req.query.offset ? parseInt(req.query.offset) : 0,
       ...parseDateOpts(req.query),
+      hiddenFolders: getHiddenFolders(),
     };
     const total = cache.countCachedChats(opts);
     const rows = cache.getCachedChats(opts);
@@ -131,7 +154,7 @@ app.get('/api/chats/:id/markdown', (req, res) => {
 
 app.get('/api/projects', (req, res) => {
   try {
-    res.json(cache.getCachedProjects(parseDateOpts(req.query)));
+    res.json(cache.getCachedProjects({ ...parseDateOpts(req.query), hiddenFolders: getHiddenFolders() }));
   } catch (err) {
     res.status(500).json({ error: err.message });
   }
@@ -144,6 +167,7 @@ app.get('/api/deep-analytics', (req, res) => {
       folder: req.query.folder || null,
       limit: Math.min(parseInt(req.query.limit) || 500, 5000),
       ...parseDateOpts(req.query),
+      hiddenFolders: getHiddenFolders(),
     };
     res.json(cache.getCachedDeepAnalytics(opts));
   } catch (err) {
@@ -153,7 +177,7 @@ app.get('/api/deep-analytics', (req, res) => {
 
 app.get('/api/dashboard-stats', (req, res) => {
   try {
-    const opts = { editor: req.query.editor || null, ...parseDateOpts(req.query) };
+    const opts = { editor: req.query.editor || null, ...parseDateOpts(req.query), hiddenFolders: getHiddenFolders() };
     res.json(cache.getCachedDashboardStats(opts));
   } catch (err) {
     res.status(500).json({ error: err.message });
@@ -165,6 +189,7 @@ app.get('/api/cost-analytics', (req, res) => {
     const opts = {
       editor: req.query.editor || null,
       ...parseDateOpts(req.query),
+      hiddenFolders: getHiddenFolders(),
     };
     res.json(cache.getCostAnalytics(opts));
   } catch (err) {
@@ -179,6 +204,7 @@ app.get('/api/costs', (req, res) => {
       folder: req.query.folder || null,
       chatId: req.query.chatId || null,
       ...parseDateOpts(req.query),
+      hiddenFolders: getHiddenFolders(),
     };
     res.json(cache.getCostBreakdown(opts));
   } catch (err) {
@@ -266,6 +292,33 @@ app.get('/api/refetch', async (req, res) => {
   res.end();
 });
 
+// ============================================================
+// Config endpoints
+// ============================================================
+
+app.get('/api/config', (req, res) => {
+  res.json(readConfig());
+});
+
+app.put('/api/config', (req, res) => {
+  try {
+    const config = readConfig();
+    Object.assign(config, req.body);
+    writeConfig(config);
+    res.json(config);
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+app.get('/api/all-projects', (req, res) => {
+  try {
+    res.json(cache.getCachedProjects({ ...parseDateOpts(req.query), includeHidden: true }));
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
 // SPA fallback
 app.get('*', (req, res) => {
   res.sendFile(path.join(__dirname, 'public', 'index.html'));

package/ui/src/App.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef, useCallback } from 'react'
 import { Routes, Route, NavLink } from 'react-router-dom'
-import { Activity, BarChart3, GitCompare, MessageSquare, FolderOpen, DollarSign, Sun, Moon, RefreshCw, AlertTriangle, Github, Terminal, Database, Users, Radio, Plug, Copy, Check } from 'lucide-react'
+import { Activity, BarChart3, GitCompare, MessageSquare, FolderOpen, DollarSign, Sun, Moon, RefreshCw, AlertTriangle, Github, Terminal, Database, Users, Radio, Plug, Copy, Check, Settings as SettingsIcon } from 'lucide-react'
 import { fetchOverview, refetchAgents, fetchMode, fetchRelayConfig, getAuthToken, setOnAuthFailure } from './lib/api'
 import { useTheme } from './lib/theme'
 import AnimatedLogo from './components/AnimatedLogo'
@@ -14,6 +14,7 @@ import Projects from './pages/Projects'
 import ProjectDetail from './pages/ProjectDetail'
 import CostAnalysis from './pages/CostAnalysis'
 import SqlViewer from './pages/SqlViewer'
+import Settings from './pages/Settings'
 import RelayDashboard from './pages/RelayDashboard'
 import RelayUserDetail from './pages/RelayUserDetail'
 
@@ -168,6 +169,14 @@ export default function App() {
               Connect
             </button>
           )}
+          <NavLink
+            to="/settings"
+            className="p-1 rounded transition hover:bg-[var(--c-card)]"
+            style={({ isActive }) => ({ color: isActive ? '#6366f1' : 'var(--c-text2)' })}
+            title="Settings"
+          >
+            <SettingsIcon size={13} />
+          </NavLink>
           <button
             onClick={toggle}
             className="p-1 rounded transition hover:bg-[var(--c-card)]"
@@ -206,6 +215,7 @@ export default function App() {
             <Route path="/analysis" element={<DeepAnalysis overview={overview} />} />
             <Route path="/compare" element={<Compare overview={overview} />} />
             <Route path="/sql" element={<SqlViewer />} />
+            <Route path="/settings" element={<Settings />} />
           </Routes>
         )}
       </main>

package/ui/src/lib/api.js

@@ -147,6 +147,25 @@ export async function fetchCosts(params = {}) {
   return res.json();
 }
 
+export async function fetchConfig() {
+  const res = await fetch(`${BASE}/api/config`);
+  return res.json();
+}
+
+export async function updateConfig(data) {
+  const res = await fetch(`${BASE}/api/config`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data),
+  });
+  return res.json();
+}
+
+export async function fetchAllProjects() {
+  const res = await fetch(`${BASE}/api/all-projects`);
+  return res.json();
+}
+
 export async function executeQuery(sql) {
   const res = await fetch(`${BASE}/api/query`, {
     method: 'POST',

package/ui/src/pages/Dashboard.jsx

@@ -9,6 +9,7 @@ import DateRangePicker from '../components/DateRangePicker'
 import { editorColor, editorLabel, formatNumber, formatCost, dateRangeToApiParams } from '../lib/constants'
 import EditorIcon from '../components/EditorIcon'
 import { fetchDailyActivity, fetchOverview as fetchOverviewApi, fetchDashboardStats, fetchShareImage, fetchChats, fetchCosts } from '../lib/api'
+import ChatSidebar from '../components/ChatSidebar'
 import { useTheme } from '../lib/theme'
 import SectionTitle from '../components/SectionTitle'
 
@@ -33,6 +34,7 @@ export default function Dashboard({ overview }) {
   const [costs, setCosts] = useState(null)
   const [sharing, setSharing] = useState(false)
   const [largeContextChats, setLargeContextChats] = useState(null)
+  const [selectedChatId, setSelectedChatId] = useState(null)
   const txtColor = dark ? '#888' : '#555'
   const txtDim = dark ? '#555' : '#999'
   const gridColor = dark ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.06)'
@@ -542,7 +544,7 @@ export default function Dashboard({ overview }) {
                   key={c.id}
                   className="flex items-center gap-1.5 px-1.5 py-1 rounded-sm cursor-pointer transition hover:opacity-80"
                   style={{ background: c.bubbleCount >= 500 ? 'rgba(239,68,68,0.06)' : 'rgba(245,158,11,0.06)' }}
-                  onClick={() => navigate(`/sessions/${c.id}`)}
+                  onClick={() => setSelectedChatId(c.id)}
                 >
                   <EditorIcon source={c.source} size={10} />
                   <span className="text-[10px] truncate flex-1" style={{ color: 'var(--c-text)' }}>{c.name || 'Untitled'}</span>
@@ -558,6 +560,7 @@ export default function Dashboard({ overview }) {
           </div>
         )}
       </div>
+      <ChatSidebar chatId={selectedChatId} onClose={() => setSelectedChatId(null)} />
     </div>
   )
 }

package/ui/src/pages/Settings.jsx

@@ -0,0 +1,142 @@
+import { useState, useEffect } from 'react'
+import { Settings as SettingsIcon, EyeOff, Eye, FolderOpen, Search } from 'lucide-react'
+import { fetchConfig, updateConfig, fetchAllProjects } from '../lib/api'
+import { editorLabel, formatNumber, formatDate } from '../lib/constants'
+import EditorIcon from '../components/EditorIcon'
+import SectionTitle from '../components/SectionTitle'
+
+export default function Settings() {
+  const [config, setConfig] = useState(null)
+  const [projects, setProjects] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [search, setSearch] = useState('')
+
+  useEffect(() => {
+    Promise.all([fetchConfig(), fetchAllProjects()]).then(([cfg, projs]) => {
+      setConfig(cfg)
+      setProjects(projs)
+      setLoading(false)
+    }).catch(() => setLoading(false))
+  }, [])
+
+  if (loading || !config) {
+    return <div className="text-sm py-12 text-center" style={{ color: 'var(--c-text2)' }}>loading settings...</div>
+  }
+
+  const hiddenProjects = config.hiddenProjects || []
+
+  const toggleProject = async (folder) => {
+    setSaving(true)
+    const isHidden = hiddenProjects.includes(folder)
+    const updated = isHidden
+      ? hiddenProjects.filter(f => f !== folder)
+      : [...hiddenProjects, folder]
+    const newConfig = await updateConfig({ hiddenProjects: updated })
+    setConfig(newConfig)
+    setSaving(false)
+  }
+
+  const filtered = projects.filter(p => {
+    if (!search) return true
+    const q = search.toLowerCase()
+    return p.folder.toLowerCase().includes(q) || p.name.toLowerCase().includes(q)
+  })
+
+  const sorted = [...filtered].sort((a, b) => a.name.localeCompare(b.name))
+
+  return (
+    <div className="fade-in space-y-4">
+      <div className="flex items-center gap-1.5 text-[13px] font-bold" style={{ color: 'var(--c-white)' }}>
+        <SettingsIcon size={14} style={{ color: '#6366f1' }} />
+        Settings
+      </div>
+
+      <div className="card overflow-hidden">
+        <div className="px-3 py-2 flex items-center justify-between" style={{ borderBottom: '1px solid var(--c-border)' }}>
+          <SectionTitle>
+            <FolderOpen size={11} className="inline mr-1" />
+            projects ({projects.length})
+          </SectionTitle>
+          <div className="flex items-center gap-2">
+            {hiddenProjects.length > 0 && (
+              <span className="text-[10px] px-1.5 py-0.5" style={{ background: 'rgba(239,68,68,0.08)', color: '#ef4444', border: '1px solid rgba(239,68,68,0.15)' }}>
+                {hiddenProjects.length} hidden
+              </span>
+            )}
+            <div className="relative">
+              <Search size={11} className="absolute left-2 top-1/2 -translate-y-1/2" style={{ color: 'var(--c-text3)' }} />
+              <input
+                type="text"
+                value={search}
+                onChange={e => setSearch(e.target.value)}
+                placeholder="Filter projects..."
+                className="pl-6 pr-2 py-1 text-[11px] outline-none w-[180px]"
+                style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
+              />
+            </div>
+          </div>
+        </div>
+        <div className="text-[11px] px-3 py-1.5" style={{ color: 'var(--c-text3)', borderBottom: '1px solid var(--c-border)', background: 'var(--c-bg3)' }}>
+          Hidden projects are excluded from all dashboard stats, sessions, costs, and analytics.
+        </div>
+
+        {sorted.map(p => (
+          <ProjectRow key={p.folder} project={p} hidden={hiddenProjects.includes(p.folder)} onToggle={toggleProject} saving={saving} />
+        ))}
+
+        {sorted.length === 0 && (
+          <div className="text-center py-6 text-[12px]" style={{ color: 'var(--c-text3)' }}>no projects match filter</div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function ProjectRow({ project: p, hidden, onToggle, saving }) {
+  const editors = Object.entries(p.editors || {}).sort((a, b) => b[1] - a[1])
+
+  return (
+    <div
+      className="flex items-center gap-3 px-3 py-2 transition"
+      style={{
+        borderBottom: '1px solid var(--c-border)',
+        opacity: hidden ? 0.5 : 1,
+      }}
+      onMouseEnter={e => e.currentTarget.style.background = 'var(--c-bg3)'}
+      onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
+    >
+      <button
+        onClick={() => onToggle(p.folder)}
+        disabled={saving}
+        className="shrink-0 p-1 rounded transition hover:bg-[var(--c-bg)]"
+        style={{ color: hidden ? '#ef4444' : 'var(--c-text3)', border: '1px solid var(--c-border)' }}
+        title={hidden ? 'Show this project' : 'Hide this project'}
+      >
+        {hidden ? <EyeOff size={12} /> : <Eye size={12} />}
+      </button>
+      <div className="min-w-0 flex-1">
+        <div className="text-[12px] font-medium truncate" style={{ color: hidden ? 'var(--c-text3)' : 'var(--c-white)' }}>
+          {p.name}
+        </div>
+        <div className="text-[10px] truncate" style={{ color: 'var(--c-text3)' }} title={p.folder}>
+          {p.folder}
+        </div>
+      </div>
+      <div className="flex items-center gap-2 shrink-0">
+        {editors.slice(0, 3).map(([src, count]) => (
+          <span key={src} className="flex items-center gap-1 text-[10px]" style={{ color: 'var(--c-text3)' }}>
+            <EditorIcon source={src} size={10} />
+            {count}
+          </span>
+        ))}
+      </div>
+      <div className="text-[11px] font-mono shrink-0" style={{ color: 'var(--c-text2)' }}>
+        {formatNumber(p.totalSessions)}
+      </div>
+      <div className="text-[10px] shrink-0 w-[80px] text-right" style={{ color: 'var(--c-text3)' }}>
+        {formatDate(p.lastSeen)}
+      </div>
+    </div>
+  )
+}