agentlytics 0.1.2 → 0.1.5

package/cache.js

@@ -193,7 +193,7 @@ function analyzeAndStore(chat) {
 function scanAll(onProgress, opts = {}) {
   const force = opts.force || false;
   if (force || opts.resetCaches) resetCaches();
-  const chats = getAllChats();
+  const chats = opts.chats || getAllChats();
   const total = chats.length;
   let scanned = 0;
   let analyzed = 0;
@@ -602,6 +602,9 @@ function safeParseJson(s) {
 function resetAndRescan(onProgress) {
   if (db) db.close();
   if (fs.existsSync(CACHE_DB)) fs.unlinkSync(CACHE_DB);
+  for (const suffix of ['-wal', '-shm']) {
+    if (fs.existsSync(CACHE_DB + suffix)) fs.unlinkSync(CACHE_DB + suffix);
+  }
   initDb();
   return scanAll(onProgress);
 }
@@ -676,6 +679,9 @@ async function scanAllAsync(onProgress) {
 async function resetAndRescanAsync(onProgress) {
   if (db) db.close();
   if (fs.existsSync(CACHE_DB)) fs.unlinkSync(CACHE_DB);
+  for (const suffix of ['-wal', '-shm']) {
+    if (fs.existsSync(CACHE_DB + suffix)) fs.unlinkSync(CACHE_DB + suffix);
+  }
   initDb();
   return scanAllAsync(onProgress);
 }

package/index.js

@@ -123,9 +123,11 @@ function getLocalIp() {
   return 'localhost';
 }
 
+// ── ASCII banner ─────────────────────────────────────────
+const c1 = chalk.hex('#818cf8'), c2 = chalk.hex('#f472b6'), c3 = chalk.hex('#34d399'), c4 = chalk.hex('#fbbf24');
 console.log('');
-console.log(chalk.bold('  ⚡ Agentlytics'));
-console.log(chalk.dim('  Comprehensive analytics for your AI coding agents'));
+console.log(`  ${c1('(● ●)')} ${c2('[● ●]')}   ${chalk.bold('Agentlytics')}`);
+console.log(`  ${c3('{● ●}')} ${c4('<● ●>')}   ${chalk.dim('Unified analytics for your AI coding agents')}`);
 if (collectOnly) console.log(chalk.cyan('  ⟳ Collect-only mode (no server)'));
 console.log('');
 
@@ -164,6 +166,10 @@ if (noCache) {
   const cacheDb = path.join(os.homedir(), '.agentlytics', 'cache.db');
   if (fs.existsSync(cacheDb)) {
     fs.unlinkSync(cacheDb);
+    // Remove WAL/SHM journal files to avoid SQLITE_IOERR_SHORT_READ
+    for (const suffix of ['-wal', '-shm']) {
+      if (fs.existsSync(cacheDb + suffix)) fs.unlinkSync(cacheDb + suffix);
+    }
     console.log(chalk.yellow('  ⟳ Cache cleared (--no-cache)'));
   }
 }
@@ -204,18 +210,74 @@ const WINDSURF_VARIANTS = [
 })();
 
 // Initialize cache DB
-console.log(chalk.dim('  Initializing cache database...'));
 cache.initDb();
 
-// Scan all editors and populate cache
-console.log(chalk.dim('  Scanning editors: Cursor, Windsurf, Claude Code, VS Code, Zed, Antigravity, OpenCode, Codex, Gemini CLI, Copilot CLI, Cursor Agent, Command Code'));
+// ── Detect editors & collect sessions ───────────────────────
+const { editors: editorModules } = require('./editors');
+const EDITOR_DISPLAY = [
+  ['cursor', 'Cursor'],
+  ['windsurf', 'Windsurf'],
+  ['windsurf-next', 'Windsurf Next'],
+  ['antigravity', 'Antigravity'],
+  ['claude-code', 'Claude Code'],
+  ['vscode', 'VS Code'],
+  ['vscode-insiders', 'VS Code Insiders'],
+  ['zed', 'Zed'],
+  ['opencode', 'OpenCode'],
+  ['codex', 'Codex'],
+  ['gemini-cli', 'Gemini CLI'],
+  ['copilot-cli', 'Copilot CLI'],
+  ['cursor-agent', 'Cursor Agent'],
+  ['commandcode', 'Command Code'],
+];
+
+console.log(chalk.dim('  Looking for AI coding agents...'));
+const allChats = [];
+for (const editor of editorModules) {
+  try {
+    const chats = editor.getChats();
+    allChats.push(...chats);
+  } catch { /* skip broken adapters */ }
+}
+allChats.sort((a, b) => (b.lastUpdatedAt || b.createdAt || 0) - (a.lastUpdatedAt || a.createdAt || 0));
+
+// Count per source
+const bySource = {};
+for (const chat of allChats) bySource[chat.source] = (bySource[chat.source] || 0) + 1;
+
+for (const [src, label] of EDITOR_DISPLAY) {
+  const count = bySource[src] || 0;
+  if (count > 0) {
+    console.log(`  ${chalk.green('✓')} ${chalk.bold(label.padEnd(18))} ${chalk.dim(`${count} session${count === 1 ? '' : 's'}`)}`);
+  } else {
+    console.log(`  ${chalk.dim('–')} ${chalk.dim(label.padEnd(18) + '–')}`);
+  }
+}
+console.log('');
+
+// ── Analyze sessions with robot animation ──────────────────
+const logUpdate = require('log-update');
+const BOT_STYLES = [
+  { l: '(', r: ')', color: '#818cf8' },
+  { l: '[', r: ']', color: '#f472b6' },
+  { l: '{', r: '}', color: '#34d399' },
+  { l: '<', r: '>', color: '#fbbf24' },
+];
+let tick = 0;
+
 const startTime = Date.now();
-const result = cache.scanAll((progress) => {
-  process.stdout.write(chalk.dim(`\r  Scanning: ${progress.scanned}/${progress.total} chats (${progress.analyzed} analyzed, ${progress.skipped} cached)`));
-});
+const result = cache.scanAll((p) => {
+  tick++;
+  if (tick % 5 !== 0) return;
+  const frame = Math.floor(tick / 40);
+  const b = BOT_STYLES[frame % 4];
+  const dots = '.'.repeat((Math.floor(tick / 10) % 3) + 1).padEnd(3);
+  logUpdate(`  ${chalk.hex(b.color)(`${b.l}● ●${b.r}`)}  ${chalk.dim(`Analyzing${dots} ${p.scanned}/${p.total}`)}`);
+}, { chats: allChats });
 const elapsed = ((Date.now() - startTime) / 1000).toFixed(1);
-console.log('');
-console.log(chalk.green(`  ✓ Cache ready: ${result.total} chats, ${result.analyzed} analyzed, ${result.skipped} cached (${elapsed}s)`));
+const allFaces = BOT_STYLES.map(b => chalk.hex(b.color)(`${b.l}● ●${b.r}`)).join(' ');
+logUpdate(`  ${allFaces}  ${chalk.green(`✓ ${result.analyzed} analyzed, ${result.skipped} cached (${elapsed}s)`)}`);
+logUpdate.done();
 console.log('');
 
 // In collect-only mode, exit after cache is built
@@ -231,7 +293,12 @@ const app = require('./server');
 app.listen(PORT, () => {
   const url = `http://localhost:${PORT}`;
   console.log(chalk.green(`  ✓ Dashboard ready at ${chalk.bold.white(url)}`));
-  console.log(chalk.dim(`  Press Ctrl+C to stop\n`));
+  console.log('');
+  console.log(chalk.dim('  💡 Share sessions with your team:'));
+  console.log(chalk.dim(`     npx agentlytics --relay                        Start a relay server`));
+  console.log(chalk.dim(`     npx agentlytics --join <host:port> --username   Join a relay server`));
+  console.log('');
+  console.log(chalk.dim('  Press Ctrl+C to stop\n'));
 
   // Auto-open browser
   const open = require('open');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentlytics",
-  "version": "0.1.2",
+  "version": "0.1.5",
   "description": "Comprehensive analytics dashboard for AI coding agents — Cursor, Windsurf, Claude Code, VS Code Copilot, Zed, Antigravity, OpenCode, Command Code",
   "main": "index.js",
   "bin": {
@@ -55,6 +55,7 @@
     "commander": "^14.0.3",
     "express": "^4.22.1",
     "inquirer": "^13.3.0",
+    "log-update": "^4.0.0",
     "open": "^8.4.2"
   }
 }

package/ui/src/App.jsx

@@ -3,6 +3,7 @@ import { Routes, Route, NavLink } from 'react-router-dom'
 import { Activity, BarChart3, GitCompare, MessageSquare, FolderOpen, Sun, Moon, RefreshCw, AlertTriangle, Github, Terminal, Database, Users, Radio, Plug, Copy, Check } from 'lucide-react'
 import { fetchOverview, refetchAgents, fetchMode, fetchRelayConfig, getAuthToken, setOnAuthFailure } from './lib/api'
 import { useTheme } from './lib/theme'
+import AnimatedLogo from './components/AnimatedLogo'
 import LoginScreen from './components/LoginScreen'
 import Dashboard from './pages/Dashboard'
 import Sessions from './pages/Sessions'
@@ -46,16 +47,16 @@ export default function App() {
   }, [mode, authed])
 
   const refreshOverview = useCallback(() => {
-    fetchOverview().then(setOverview)
+    fetchOverview().then(setOverview).catch(() => {})
   }, [])
 
   useEffect(() => {
-    refreshOverview()
-  }, [])
+    if (mode === 'local') refreshOverview()
+  }, [mode])
 
   // Live mode: refetch overview every 60s
   useEffect(() => {
-    if (live) {
+    if (live && mode === 'local') {
       liveRef.current = setInterval(() => {
         refreshOverview()
       }, 60000)
@@ -97,8 +98,9 @@ export default function App() {
   return (
     <div className="min-h-screen">
       <header className="border-b px-4 py-1.5 flex items-center gap-3 sticky top-0 z-50 backdrop-blur-xl" style={{ borderColor: 'var(--c-border)', background: 'var(--c-header)' }}>
-        <span className="text-xs font-bold tracking-tight" style={{ color: 'var(--c-white)' }}>
-          npx agentlytics{isRelay && <span className="ml-1.5 text-[9px] font-medium px-1.5 py-0.5" style={{ background: 'rgba(99,102,241,0.15)', color: '#818cf8' }}>relay</span>}
+        <span className="flex items-center gap-1.5 text-xs font-bold tracking-tight" style={{ color: 'var(--c-white)' }}>
+          <AnimatedLogo size={18} />
+          Agentlytics{isRelay && <span className="ml-1.5 text-[10px] font-medium px-1.5 py-0.5" style={{ background: 'rgba(99,102,241,0.15)', color: '#818cf8' }}>relay</span>}
         </span>
         <nav className="flex gap-0.5 ml-2">
           {nav.map(({ to, icon: Icon, label }) => (
@@ -107,7 +109,7 @@ export default function App() {
               to={to}
               end={to === '/'}
               className={({ isActive }) =>
-                `flex items-center gap-1.5 px-2.5 py-1 text-[11px] rounded transition ${
+                `flex items-center gap-1.5 px-2.5 py-1 text-[12px] rounded transition ${
                   isActive ? 'bg-[var(--c-card)] text-[var(--c-white)]' : 'text-[var(--c-text2)] hover:text-[var(--c-white)]'
                 }`
               }
@@ -122,7 +124,7 @@ export default function App() {
             <>
               <button
                 onClick={() => setLive(!live)}
-                className="flex items-center gap-1.5 px-2 py-0.5 text-[10px] transition"
+                className="flex items-center gap-1.5 px-2 py-0.5 text-[11px] transition"
                 style={{
                   color: live ? '#22c55e' : 'var(--c-text3)',
                   border: live ? '1px solid rgba(34,197,94,0.3)' : '1px solid var(--c-border)',
@@ -139,7 +141,7 @@ export default function App() {
               <button
                 onClick={handleRefetch}
                 disabled={!!refetchState}
-                className="flex items-center gap-1 px-2 py-0.5 text-[10px] rounded transition hover:bg-[var(--c-card)]"
+                className="flex items-center gap-1 px-2 py-0.5 text-[11px] rounded transition hover:bg-[var(--c-card)]"
                 style={{ color: 'var(--c-text2)', border: '1px solid var(--c-border)' }}
                 title="Clear cache and rescan all editors"
               >
@@ -148,7 +150,7 @@ export default function App() {
                   ? `Refetching (${refetchState.scanned}/${refetchState.total})...`
                   : 'Refetch'}
               </button>
-              <span className="text-[10px]" style={{ color: 'var(--c-text2)' }}>
+              <span className="text-[11px]" style={{ color: 'var(--c-text2)' }}>
                 {overview ? `${overview.totalChats} sessions` : '...'}
               </span>
             </>
@@ -156,7 +158,7 @@ export default function App() {
           {isRelay && (
             <button
               onClick={() => { setMcpOpen(true); setMcpCopied(false) }}
-              className="flex items-center gap-1.5 px-2 py-0.5 text-[10px] transition hover:bg-[var(--c-card)]"
+              className="flex items-center gap-1.5 px-2 py-0.5 text-[11px] transition hover:bg-[var(--c-card)]"
               style={{ color: '#818cf8', border: '1px solid var(--c-border)' }}
               title="MCP Connection"
             >
@@ -176,13 +178,13 @@ export default function App() {
       </header>
 
       {refetchState && (
-        <div className="flex items-center gap-2 px-4 py-1.5 text-[11px]" style={{ background: 'rgba(234,179,8,0.08)', borderBottom: '1px solid rgba(234,179,8,0.15)', color: '#ca8a04' }}>
+        <div className="flex items-center gap-2 px-4 py-1.5 text-[12px]" style={{ background: 'rgba(234,179,8,0.08)', borderBottom: '1px solid rgba(234,179,8,0.15)', color: '#ca8a04' }}>
           <AlertTriangle size={12} />
           <span>Windsurf, Windsurf Next, and Antigravity require their app to be running during refetch — otherwise their sessions won't be detected.</span>
         </div>
       )}
 
-      <main className="p-4 max-w-[1400px] mx-auto">
+      <main className={isRelay ? 'px-0' : 'p-4 max-w-[1400px] mx-auto'}>
         {mode === null ? (
           <div className="text-sm py-12 text-center" style={{ color: 'var(--c-text2)' }}>loading...</div>
         ) : isRelay ? (
@@ -205,7 +207,7 @@ export default function App() {
         )}
       </main>
 
-      <footer className="border-t mt-8 px-4 py-3 flex items-center justify-between text-[10px]" style={{ borderColor: 'var(--c-border)', color: 'var(--c-text3)' }}>
+      <footer className="border-t mt-8 px-4 py-3 flex items-center justify-between text-[11px]" style={{ borderColor: 'var(--c-border)', color: 'var(--c-text3)' }}>
         <div className="flex items-center gap-3">
           <a href="https://github.com/f/agentlytics" target="_blank" rel="noopener noreferrer" className="flex items-center gap-1 hover:text-[var(--c-text)] transition">
             <Github size={11} />
@@ -237,9 +239,9 @@ export default function App() {
               <button onClick={() => setMcpOpen(false)} className="text-[18px] leading-none px-1 hover:opacity-70 transition" style={{ color: 'var(--c-text3)' }}>&times;</button>
             </div>
 
-            <div className="text-[11px] font-medium mb-1.5" style={{ color: 'var(--c-white)' }}>MCP Config</div>
+            <div className="text-[12px] font-medium mb-1.5" style={{ color: 'var(--c-white)' }}>MCP Config</div>
             <div className="flex items-center justify-between mb-1">
-              <div className="text-[9px]" style={{ color: 'var(--c-text3)' }}>Add to your AI client's MCP settings</div>
+              <div className="text-[10px]" style={{ color: 'var(--c-text3)' }}>Add to your AI client's MCP settings</div>
               <button
                 onClick={() => {
                   const json = JSON.stringify({ "mcpServers": { "agentlytics": { "url": `${window.location.origin}/mcp` } } }, null, 2)
@@ -247,21 +249,21 @@ export default function App() {
                   setMcpCopied(true)
                   setTimeout(() => setMcpCopied(false), 2000)
                 }}
-                className="flex items-center gap-1 px-1.5 py-0.5 text-[9px] transition hover:bg-[var(--c-bg3)]"
+                className="flex items-center gap-1 px-1.5 py-0.5 text-[10px] transition hover:bg-[var(--c-bg3)]"
                 style={{ border: '1px solid var(--c-border)', color: mcpCopied ? '#22c55e' : 'var(--c-text2)' }}
               >
                 {mcpCopied ? <><Check size={9} /> Copied</> : <><Copy size={9} /> Copy</>}
               </button>
             </div>
             <pre
-              className="text-[10px] px-3 py-2 overflow-x-auto mb-4"
+              className="text-[11px] px-3 py-2 overflow-x-auto mb-4"
               style={{ background: 'var(--c-bg3)', border: '1px solid var(--c-border)', color: 'var(--c-text)', fontFamily: 'JetBrains Mono, monospace', lineHeight: 1.6 }}
             >{`{\n  "mcpServers": {\n    "agentlytics": {\n      "url": "${window.location.origin}/mcp"\n    }\n  }\n}`}</pre>
 
-            <div className="text-[11px] font-medium mb-1.5" style={{ color: 'var(--c-white)' }}>Join Command</div>
-            <div className="text-[9px] mb-1" style={{ color: 'var(--c-text3)' }}>Share with your team to start syncing sessions</div>
+            <div className="text-[12px] font-medium mb-1.5" style={{ color: 'var(--c-white)' }}>Join Command</div>
+            <div className="text-[10px] mb-1" style={{ color: 'var(--c-text3)' }}>Share with your team to start syncing sessions</div>
             <pre
-              className="text-[10px] px-3 py-2 overflow-x-auto"
+              className="text-[11px] px-3 py-2 overflow-x-auto"
               style={{ background: 'var(--c-bg3)', border: '1px solid var(--c-border)', color: 'var(--c-text)', fontFamily: 'JetBrains Mono, monospace', lineHeight: 1.6 }}
             >{`cd /path/to/your-project\nRELAY_PASSWORD=${relayPassword || '<pass>'} npx agentlytics --join ${window.location.host}`}</pre>
           </div>

package/ui/src/components/ActivityHeatmap.jsx

@@ -144,7 +144,7 @@ export default function ActivityHeatmap({ dailyData }) {
         </svg>
       </div>
 
-      <div className="flex items-center gap-1.5 mt-1 text-[9px]" style={{ color: 'var(--c-text3)' }}>
+      <div className="flex items-center gap-1.5 mt-1 text-[10px]" style={{ color: 'var(--c-text3)' }}>
         <span>less</span>
         {COLORS.map((color, i) => (
           <span key={i} className="inline-block w-[9px] h-[9px] rounded-sm" style={{ background: color }} />
@@ -158,13 +158,13 @@ export default function ActivityHeatmap({ dailyData }) {
           <div className="flex items-center justify-between mb-2">
             <div>
               <span className="text-xs font-medium" style={{ color: 'var(--c-white)' }}>{selectedDay.key}</span>
-              <span className="text-[10px] ml-2" style={{ color: 'var(--c-text2)' }}>
+              <span className="text-[11px] ml-2" style={{ color: 'var(--c-text2)' }}>
                 {selectedDay.count} session{selectedDay.count !== 1 ? 's' : ''}
                 {' · '}
                 {Object.entries(selectedDay.data.editors || {}).map(([e, c]) => `${editorLabel(e)}: ${c}`).join(', ')}
               </span>
             </div>
-            <button onClick={() => setSelectedDay(null)} className="text-[10px] transition" style={{ color: 'var(--c-text2)' }}>close</button>
+            <button onClick={() => setSelectedDay(null)} className="text-[11px] transition" style={{ color: 'var(--c-text2)' }}>close</button>
           </div>
           {hourlyChart && (
             <div style={{ height: 140 }}>

package/ui/src/components/AnimatedLogo.jsx

@@ -0,0 +1,96 @@
+export default function AnimatedLogo({ size = 22 }) {
+  // Carousel: a horizontal strip of bots slides left continuously.
+  // The viewport shows one bot at a time. The next bot pushes the current one out.
+  // 5 slots (4 bots + repeat of first) for seamless loop.
+  const step = 28 // each bot cell width
+  // Keyframes: hold on each bot, then slide to the next.
+  // 4 stops: 0→1→2→3→0 (repeat first = slot 4)
+  // Each stop: 5% slide + 20% hold = 25% per bot
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width={size}
+      height={size}
+      fill="none"
+      style={{ overflow: 'hidden' }}
+    >
+      <style>{`
+        @keyframes carousel {
+          0%    { transform: translateX(0); }
+          5%    { transform: translateX(0); }
+          25%   { transform: translateX(-${step}px); }
+          30%   { transform: translateX(-${step}px); }
+          50%   { transform: translateX(-${step * 2}px); }
+          55%   { transform: translateX(-${step * 2}px); }
+          75%   { transform: translateX(-${step * 3}px); }
+          80%   { transform: translateX(-${step * 3}px); }
+          100%  { transform: translateX(-${step * 4}px); }
+        }
+        .carousel-strip { animation: carousel 4s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
+      `}</style>
+
+      <g className="carousel-strip">
+        {/* Slot 0: Bot 1 — indigo */}
+        <g transform="translate(0, 0)" stroke="#818cf8" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M12 8V4H8"/>
+          <rect width="16" height="12" x="4" y="8" rx="2"/>
+          <path d="M2 14h2"/>
+          <path d="M20 14h2"/>
+          <path d="M15 13v2"/>
+          <path d="M9 13v2"/>
+        </g>
+
+        {/* Slot 1: Bot 2 — pink */}
+        <g transform={`translate(${step}, 0)`} stroke="#f472b6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M12 6V2H8"/>
+          <path d="M15 11v2"/>
+          <path d="M2 12h2"/>
+          <path d="M20 12h2"/>
+          <path d="M20 16a2 2 0 0 1-2 2H8.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 4 20.286V8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2z"/>
+          <path d="M9 11v2"/>
+        </g>
+
+        {/* Slot 2: Bot 3 — emerald */}
+        <g transform={`translate(${step * 2}, 0)`} stroke="#34d399" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M6 6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2l0-4"/>
+          <path d="M12 2v2"/>
+          <path d="M9 12v9"/>
+          <path d="M15 12v9"/>
+          <path d="M5 16l4-2"/>
+          <path d="M15 14l4 2"/>
+          <path d="M9 18h6"/>
+          <path d="M10 8v.01"/>
+          <path d="M14 8v.01"/>
+        </g>
+
+        {/* Slot 3: Bot 4 — amber */}
+        <g transform={`translate(${step * 3}, 0)`} stroke="#fbbf24" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M12 20v2"/>
+          <path d="M12 2v2"/>
+          <path d="M17 20v2"/>
+          <path d="M17 2v2"/>
+          <path d="M2 12h2"/>
+          <path d="M2 17h2"/>
+          <path d="M2 7h2"/>
+          <path d="M20 12h2"/>
+          <path d="M20 17h2"/>
+          <path d="M20 7h2"/>
+          <path d="M7 20v2"/>
+          <path d="M7 2v2"/>
+          <rect x="4" y="4" width="16" height="16" rx="2"/>
+          <rect x="8" y="8" width="8" height="8" rx="1"/>
+        </g>
+
+        {/* Slot 4: Repeat Bot 1 for seamless loop — indigo */}
+        <g transform={`translate(${step * 4}, 0)`} stroke="#818cf8" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M12 8V4H8"/>
+          <rect width="16" height="12" x="4" y="8" rx="2"/>
+          <path d="M2 14h2"/>
+          <path d="M20 14h2"/>
+          <path d="M15 13v2"/>
+          <path d="M9 13v2"/>
+        </g>
+      </g>
+    </svg>
+  )
+}

package/ui/src/components/ChatSidebar.jsx

@@ -77,7 +77,7 @@ export default function ChatSidebar({ chatId, onClose, fetchFn, extraHeader, use
               <div className="text-sm font-medium truncate" style={{ color: 'var(--c-white)' }}>
                 {chat.name || '(untitled)'}
               </div>
-              <div className="flex items-center gap-2 text-[10px]" style={{ color: 'var(--c-text2)' }}>
+              <div className="flex items-center gap-2 text-[11px]" style={{ color: 'var(--c-text2)' }}>
                 <span className="inline-flex items-center gap-1">
                   <span className="w-1.5 h-1.5 rounded-full" style={{ background: editorColor(chat.source) }} />
                   {editorLabel(chat.source)}
@@ -91,7 +91,7 @@ export default function ChatSidebar({ chatId, onClose, fetchFn, extraHeader, use
             <a
               href={`${BASE}/api/chats/${chat.id}/markdown`}
               download
-              className="flex items-center gap-1 px-2 py-1 text-[10px] transition shrink-0"
+              className="flex items-center gap-1 px-2 py-1 text-[11px] transition shrink-0"
               style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
             >
               <Download size={11} /> .md
@@ -102,7 +102,7 @@ export default function ChatSidebar({ chatId, onClose, fetchFn, extraHeader, use
 
         {/* Stats row */}
         {chat?.stats && (
-          <div className="flex items-center gap-3 px-4 py-2 text-[10px] shrink-0" style={{ borderBottom: '1px solid var(--c-border)', color: 'var(--c-text2)' }}>
+          <div className="flex items-center gap-3 px-4 py-2 text-[11px] shrink-0" style={{ borderBottom: '1px solid var(--c-border)', color: 'var(--c-text2)' }}>
             <span>{chat.stats.totalMessages} msgs</span>
             {chat.stats.toolCalls?.length > 0 && <span>{chat.stats.toolCalls.length} tools</span>}
             {chat.stats.totalInputTokens > 0 && <span>{formatNumber(chat.stats.totalInputTokens)} in</span>}
@@ -125,7 +125,7 @@ export default function ChatSidebar({ chatId, onClose, fetchFn, extraHeader, use
                 placeholder="Filter messages..."
                 value={msgFilter}
                 onChange={e => setMsgFilter(e.target.value)}
-                className="w-full pl-7 pr-3 py-1 text-[11px] outline-none"
+                className="w-full pl-7 pr-3 py-1 text-[12px] outline-none"
                 style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
               />
             </div>
@@ -135,10 +135,10 @@ export default function ChatSidebar({ chatId, onClose, fetchFn, extraHeader, use
         {/* Messages */}
         <div ref={scrollRef} className="flex-1 overflow-y-auto scrollbar-thin px-4 py-3 space-y-2">
           {loading && (
-            <div className="text-[11px] py-12 text-center" style={{ color: 'var(--c-text3)' }}>Loading conversation...</div>
+            <div className="text-[12px] py-12 text-center" style={{ color: 'var(--c-text3)' }}>Loading conversation...</div>
           )}
           {!loading && chat && chat.messages.length === 0 && (
-            <div className="text-[11px] py-12 text-center" style={{ color: 'var(--c-text3)' }}>
+            <div className="text-[12px] py-12 text-center" style={{ color: 'var(--c-text3)' }}>
               {chat.encrypted ? '🔒 This conversation is encrypted.' : 'No messages found.'}
             </div>
           )}
@@ -149,7 +149,7 @@ export default function ChatSidebar({ chatId, onClose, fetchFn, extraHeader, use
               const Icon = cfg.icon
               return (
                 <div key={i} className="rounded-r px-3 py-2" style={{ borderLeft: `2px solid ${cfg.borderColor}`, background: cfg.bg }}>
-                  <div className="flex items-center gap-1.5 text-[10px] mb-1" style={{ color: 'var(--c-text2)' }}>
+                  <div className="flex items-center gap-1.5 text-[11px] mb-1" style={{ color: 'var(--c-text2)' }}>
                     <Icon size={11} />
                     <span className="font-medium">{msg.role === 'user' && (username || chat?.username) ? (username || chat.username) : cfg.label}</span>
                     {msg.model && <span className="font-mono" style={{ color: 'var(--c-accent)', opacity: 0.6 }}>· {msg.model}</span>}

package/ui/src/components/DateRangePicker.jsx

@@ -46,7 +46,7 @@ export default function DateRangePicker({ value, onChange }) {
           <button
             key={p.label}
             onClick={() => applyPreset(p.days)}
-            className="px-2 py-0.5 text-[10px] transition"
+            className="px-2 py-0.5 text-[11px] transition"
             style={{
               border: isActive ? '1px solid var(--c-accent)' : '1px solid var(--c-border)',
               color: isActive ? 'var(--c-accent)' : 'var(--c-text2)',
@@ -64,7 +64,7 @@ export default function DateRangePicker({ value, onChange }) {
         value={value?.from || ''}
         max={value?.to || today}
         onChange={e => setFrom(e.target.value)}
-        className="px-1.5 py-0.5 text-[10px] outline-none cursor-pointer"
+        className="px-1.5 py-0.5 text-[11px] outline-none cursor-pointer"
         style={{
           background: 'var(--c-bg3)',
           color: 'var(--c-text)',
@@ -72,14 +72,14 @@ export default function DateRangePicker({ value, onChange }) {
           colorScheme: dark ? 'dark' : 'light',
         }}
       />
-      <span className="text-[10px]" style={{ color: 'var(--c-text3)' }}>—</span>
+      <span className="text-[11px]" style={{ color: 'var(--c-text3)' }}>—</span>
       <input
         type="date"
         value={value?.to || ''}
         min={value?.from || ''}
         max={today}
         onChange={e => setTo(e.target.value)}
-        className="px-1.5 py-0.5 text-[10px] outline-none cursor-pointer"
+        className="px-1.5 py-0.5 text-[11px] outline-none cursor-pointer"
         style={{
           background: 'var(--c-bg3)',
           color: 'var(--c-text)',
@@ -92,7 +92,7 @@ export default function DateRangePicker({ value, onChange }) {
       {active && (
         <button
           onClick={() => onChange(null)}
-          className="flex items-center gap-0.5 px-2 py-0.5 text-[10px] transition"
+          className="flex items-center gap-0.5 px-2 py-0.5 text-[11px] transition"
           style={{ border: '1px solid var(--c-accent)', color: 'var(--c-accent)' }}
         >
           <X size={9} /> clear

package/ui/src/components/EditorBreakdown.jsx

@@ -9,11 +9,11 @@ export default function EditorBreakdown({ editors, total }) {
         return (
           <div key={src} className="flex items-center gap-2">
             <EditorDot source={src} size={8} />
-            <span className="text-[10px] w-24" style={{ color: 'var(--c-text)' }}>{editorLabel(src)}</span>
+            <span className="text-[11px] w-24" style={{ color: 'var(--c-text)' }}>{editorLabel(src)}</span>
             <div className="flex-1 h-2 relative" style={{ background: 'var(--c-card)' }}>
               <div className="h-full" style={{ width: `${pct}%`, background: editorColor(src), opacity: 0.7 }} />
             </div>
-            <span className="text-[10px] w-10 text-right" style={{ color: 'var(--c-text2)' }}>{count}</span>
+            <span className="text-[11px] w-10 text-right" style={{ color: 'var(--c-text2)' }}>{count}</span>
           </div>
         )
       })}

package/ui/src/components/EditorDot.jsx

@@ -5,7 +5,7 @@ export default function EditorDot({ source, showLabel = false, size = 8 }) {
   return (
     <span className="inline-flex items-center gap-1.5">
       <EditorIcon source={source} size={size} />
-      {showLabel && <span className="text-[10px]" style={{ color: 'var(--c-text)' }}>{editorLabel(source)}</span>}
+      {showLabel && <span className="text-[11px]" style={{ color: 'var(--c-text)' }}>{editorLabel(source)}</span>}
     </span>
   )
 }

package/ui/src/components/KpiCard.jsx

@@ -2,8 +2,8 @@ export default function KpiCard({ label, value, sub, onClick }) {
   return (
     <div className={`card px-3 py-2${onClick ? ' cursor-pointer hover:opacity-80 transition' : ''}`} onClick={onClick}>
       <div className="text-base font-bold" style={{ color: onClick ? 'var(--c-accent)' : 'var(--c-white)' }}>{value}</div>
-      <div className="text-[10px]" style={{ color: 'var(--c-text2)' }}>{label}</div>
-      {sub && <div className="text-[9px] mt-0.5" style={{ color: 'var(--c-text3)' }}>{sub}</div>}
+      <div className="text-[11px]" style={{ color: 'var(--c-text2)' }}>{label}</div>
+      {sub && <div className="text-[10px] mt-0.5" style={{ color: 'var(--c-text3)' }}>{sub}</div>}
     </div>
   )
 }

package/ui/src/components/LiveFeed.jsx

@@ -62,14 +62,14 @@ export default function LiveFeed({ onSessionClick }) {
       {/* Header */}
       <div className="flex items-center gap-2 px-3 py-2.5 shrink-0" style={{ borderBottom: '1px solid var(--c-border)' }}>
         <Radio size={12} style={{ color: '#22c55e' }} />
-        <span className="text-[11px] font-medium uppercase tracking-wider" style={{ color: 'var(--c-text2)' }}>Live Feed</span>
+        <span className="text-[12px] font-medium uppercase tracking-wider" style={{ color: 'var(--c-text2)' }}>Live Feed</span>
         <span className="inline-block w-1.5 h-1.5 rounded-full pulse-dot ml-auto" style={{ background: '#22c55e' }} />
       </div>
 
       {/* Feed */}
       <div ref={scrollRef} className="flex-1 overflow-y-auto scrollbar-thin">
         {items.length === 0 && (
-          <div className="text-[11px] py-8 text-center" style={{ color: 'var(--c-text3)' }}>
+          <div className="text-[12px] py-8 text-center" style={{ color: 'var(--c-text3)' }}>
             No recent activity
           </div>
         )}
@@ -77,7 +77,7 @@ export default function LiveFeed({ onSessionClick }) {
         {buckets.map((bucket, bi) => (
           <div key={bi}>
             {/* Time separator */}
-            <div className="sticky top-0 px-3 py-1.5 text-[9px] font-medium uppercase tracking-wider" style={{ background: 'var(--c-bg)', color: 'var(--c-text3)', borderBottom: '1px solid var(--c-border)' }}>
+            <div className="sticky top-0 px-3 py-1.5 text-[10px] font-medium uppercase tracking-wider" style={{ background: 'var(--c-bg)', color: 'var(--c-text3)', borderBottom: '1px solid var(--c-border)' }}>
               {bucket.label}
             </div>
 
@@ -89,26 +89,26 @@ export default function LiveFeed({ onSessionClick }) {
                 onClick={() => onSessionClick && onSessionClick(item.id, item.username)}
               >
                 {/* Session name */}
-                <div className="text-[11px] font-medium truncate mb-1" style={{ color: 'var(--c-white)' }}>
+                <div className="text-[12px] font-medium truncate mb-1" style={{ color: 'var(--c-white)' }}>
                   {item.name || 'Untitled'}
                 </div>
 
                 {/* User + editor row */}
                 <div className="flex items-center gap-1.5 mb-1">
                   <span
-                    className="text-[9px] font-medium px-1 py-0.5 shrink-0 truncate max-w-[120px]"
+                    className="text-[10px] font-medium px-1 py-0.5 shrink-0 truncate max-w-[120px]"
                     style={{ background: 'rgba(99,102,241,0.12)', color: '#818cf8' }}
                     title={item.username}
                   >
                     {item.username}
                   </span>
                   <EditorDot source={item.source} size={6} />
-                  <span className="text-[9px] truncate" style={{ color: 'var(--c-text2)' }}>{editorLabel(item.source)}</span>
-                  <span className="text-[9px] ml-auto shrink-0" style={{ color: 'var(--c-text3)' }}>{timeLabel(item.lastUpdatedAt)}</span>
+                  <span className="text-[10px] truncate" style={{ color: 'var(--c-text2)' }}>{editorLabel(item.source)}</span>
+                  <span className="text-[10px] ml-auto shrink-0" style={{ color: 'var(--c-text3)' }}>{timeLabel(item.lastUpdatedAt)}</span>
                 </div>
 
                 {/* Meta row */}
-                <div className="flex items-center gap-2 text-[9px]" style={{ color: 'var(--c-text3)' }}>
+                <div className="flex items-center gap-2 text-[10px]" style={{ color: 'var(--c-text3)' }}>
                   {item.totalMessages > 0 && (
                     <span className="flex items-center gap-0.5">
                       <MessageSquare size={8} /> {item.totalMessages}