agentlytics 0.0.2 → 0.0.3

package/README.md

@@ -6,12 +6,12 @@
 
 <p align="center">
   <strong>Unified analytics for your AI coding agents</strong><br>
-  <sub>Cursor · Windsurf · Claude Code · VS Code Copilot · Zed · Antigravity · OpenCode</sub>
+  <sub>Cursor · Windsurf · Claude Code · VS Code Copilot · Zed · Antigravity · OpenCode · Gemini CLI · Copilot CLI</sub>
 </p>
 
 <p align="center">
   <a href="https://www.npmjs.com/package/agentlytics"><img src="https://img.shields.io/npm/v/agentlytics?color=6366f1&label=npm" alt="npm"></a>
-  <a href="#supported-editors"><img src="https://img.shields.io/badge/editors-9-818cf8" alt="editors"></a>
+  <a href="#supported-editors"><img src="https://img.shields.io/badge/editors-11-818cf8" alt="editors"></a>
   <a href="#license"><img src="https://img.shields.io/badge/license-MIT-green" alt="license"></a>
   <a href="https://nodejs.org"><img src="https://img.shields.io/badge/node-%E2%89%A518-brightgreen" alt="node"></a>
 </p>
@@ -54,6 +54,8 @@ Opens at **http://localhost:4637**. Requires Node.js ≥ 18, macOS.
 | **VS Code Insiders** | `vscode-insiders` | ✅ | ✅ | ✅ | ✅ |
 | **Zed** | `zed` | ✅ | ✅ | ✅ | ❌ |
 | **OpenCode** | `opencode` | ✅ | ✅ | ✅ | ✅ |
+| **Gemini CLI** | `gemini-cli` | ✅ | ✅ | ✅ | ✅ |
+| **Copilot CLI** | `copilot-cli` | ✅ | ✅ | ✅ | ✅ |
 
 > Windsurf, Windsurf Next, and Antigravity must be running during scan.
 

package/editors/copilot.js

@@ -0,0 +1,174 @@
+const path = require('path');
+const fs = require('fs');
+const os = require('os');
+
+const COPILOT_DIR = path.join(os.homedir(), '.copilot');
+const SESSION_STATE_DIR = path.join(COPILOT_DIR, 'session-state');
+
+// ============================================================
+// Adapter interface
+// ============================================================
+
+const name = 'copilot-cli';
+
+/**
+ * Parse workspace.yaml from a session directory.
+ * Fields: id, cwd, git_root, repository, branch, summary, created_at, updated_at
+ */
+function parseWorkspace(sessionDir) {
+  const yamlPath = path.join(sessionDir, 'workspace.yaml');
+  if (!fs.existsSync(yamlPath)) return null;
+  try {
+    const raw = fs.readFileSync(yamlPath, 'utf-8');
+    // Simple YAML parsing — handle key: value lines
+    const meta = {};
+    for (const line of raw.split('\n')) {
+      const match = line.match(/^(\w+):\s*(.*)$/);
+      if (match) meta[match[1]] = match[2].trim();
+    }
+    return meta;
+  } catch { return null; }
+}
+
+/**
+ * Parse events.jsonl and extract user/assistant messages.
+ * Event types: session.start, user.message, assistant.message,
+ *   assistant.turn_start, assistant.turn_end, session.shutdown
+ */
+function parseEvents(sessionDir) {
+  const eventsPath = path.join(sessionDir, 'events.jsonl');
+  if (!fs.existsSync(eventsPath)) return [];
+  try {
+    const raw = fs.readFileSync(eventsPath, 'utf-8');
+    return raw.split('\n').filter(Boolean).map(line => {
+      try { return JSON.parse(line); } catch { return null; }
+    }).filter(Boolean);
+  } catch { return []; }
+}
+
+function getChats() {
+  const chats = [];
+  if (!fs.existsSync(SESSION_STATE_DIR)) return chats;
+
+  let sessionDirs;
+  try { sessionDirs = fs.readdirSync(SESSION_STATE_DIR); } catch { return chats; }
+
+  for (const dirName of sessionDirs) {
+    const sessionDir = path.join(SESSION_STATE_DIR, dirName);
+    try { if (!fs.statSync(sessionDir).isDirectory()) continue; } catch { continue; }
+
+    const meta = parseWorkspace(sessionDir);
+    if (!meta) continue;
+
+    const events = parseEvents(sessionDir);
+    const userMessages = events.filter(e => e.type === 'user.message');
+    const assistantMessages = events.filter(e => e.type === 'assistant.message');
+    const firstUser = userMessages[0];
+
+    // Count meaningful messages (user + assistant)
+    const bubbleCount = userMessages.length + assistantMessages.length;
+    if (bubbleCount === 0) continue;
+
+    // Extract model from shutdown event or assistant messages
+    const shutdown = events.find(e => e.type === 'session.shutdown');
+    const model = shutdown?.data?.currentModel || null;
+
+    chats.push({
+      source: 'copilot-cli',
+      composerId: meta.id || dirName,
+      name: meta.summary || cleanPrompt(firstUser?.data?.content),
+      createdAt: meta.created_at ? new Date(meta.created_at).getTime() : null,
+      lastUpdatedAt: meta.updated_at ? new Date(meta.updated_at).getTime() : null,
+      mode: 'copilot',
+      folder: meta.cwd || meta.git_root || null,
+      encrypted: false,
+      bubbleCount,
+      _sessionDir: sessionDir,
+      _model: model,
+      _shutdownData: shutdown?.data || null,
+    });
+  }
+
+  return chats;
+}
+
+function cleanPrompt(text) {
+  if (!text) return null;
+  return text.replace(/\s+/g, ' ').trim().substring(0, 120) || null;
+}
+
+function getMessages(chat) {
+  const sessionDir = chat._sessionDir;
+  if (!sessionDir || !fs.existsSync(sessionDir)) return [];
+
+  const events = parseEvents(sessionDir);
+  const result = [];
+
+  // Aggregate token usage from shutdown event's modelMetrics
+  const shutdown = events.find(e => e.type === 'session.shutdown');
+  const modelMetrics = shutdown?.data?.modelMetrics || {};
+
+  // Build total token counts from model metrics
+  let totalInput = 0, totalOutput = 0, totalCacheRead = 0;
+  for (const metrics of Object.values(modelMetrics)) {
+    const u = metrics.usage || {};
+    totalInput += u.inputTokens || 0;
+    totalOutput += u.outputTokens || 0;
+    totalCacheRead += u.cacheReadTokens || 0;
+  }
+
+  for (const event of events) {
+    if (event.type === 'user.message') {
+      const content = event.data?.content;
+      if (content) result.push({ role: 'user', content });
+
+    } else if (event.type === 'assistant.message') {
+      const data = event.data || {};
+      const parts = [];
+      const toolCalls = [];
+
+      // Main text content
+      if (data.content) parts.push(data.content);
+
+      // Tool requests
+      if (data.toolRequests && Array.isArray(data.toolRequests)) {
+        for (const tr of data.toolRequests) {
+          const tcName = tr.name || tr.toolName || 'unknown';
+          const args = tr.args || tr.arguments || tr.input || {};
+          const parsedArgs = typeof args === 'string' ? safeParse(args) : args;
+          const argKeys = typeof parsedArgs === 'object' ? Object.keys(parsedArgs).join(', ') : '';
+          parts.push(`[tool-call: ${tcName}(${argKeys})]`);
+          toolCalls.push({ name: tcName, args: parsedArgs });
+        }
+      }
+
+      if (parts.length > 0) {
+        result.push({
+          role: 'assistant',
+          content: parts.join('\n'),
+          _model: shutdown?.data?.currentModel || chat._model,
+          _outputTokens: data.outputTokens,
+          _toolCalls: toolCalls.length > 0 ? toolCalls : undefined,
+        });
+      }
+    }
+  }
+
+  // Attach aggregate token info to the first assistant message if available
+  if (result.length > 0 && totalInput > 0) {
+    const firstAssistant = result.find(m => m.role === 'assistant');
+    if (firstAssistant) {
+      firstAssistant._inputTokens = totalInput;
+      if (!firstAssistant._outputTokens) firstAssistant._outputTokens = totalOutput;
+      if (totalCacheRead) firstAssistant._cacheRead = totalCacheRead;
+    }
+  }
+
+  return result;
+}
+
+function safeParse(str) {
+  try { return JSON.parse(str); } catch { return {}; }
+}
+
+module.exports = { name, getChats, getMessages };

package/editors/gemini.js

@@ -0,0 +1,174 @@
+const path = require('path');
+const fs = require('fs');
+const os = require('os');
+
+const GEMINI_DIR = path.join(os.homedir(), '.gemini');
+const TMP_DIR = path.join(GEMINI_DIR, 'tmp');
+const PROJECTS_JSON = path.join(GEMINI_DIR, 'projects.json');
+
+// ============================================================
+// Adapter interface
+// ============================================================
+
+const name = 'gemini-cli';
+
+/**
+ * Load project path mapping from ~/.gemini/projects.json
+ * Format: { "projects": { "/Users/dev/Code/myapp": "myapp" } }
+ * Returns Map<projectName, folderPath>
+ */
+function loadProjectMap() {
+  const map = new Map();
+  try {
+    const data = JSON.parse(fs.readFileSync(PROJECTS_JSON, 'utf-8'));
+    if (data.projects) {
+      for (const [folderPath, projName] of Object.entries(data.projects)) {
+        map.set(projName, folderPath);
+      }
+    }
+  } catch {}
+  return map;
+}
+
+function getChats() {
+  const chats = [];
+  if (!fs.existsSync(TMP_DIR)) return chats;
+
+  const projectMap = loadProjectMap();
+
+  // Each subdirectory under tmp/ is a project name (e.g. "codename-share")
+  let projectDirs;
+  try { projectDirs = fs.readdirSync(TMP_DIR); } catch { return chats; }
+
+  for (const projName of projectDirs) {
+    const projDir = path.join(TMP_DIR, projName);
+    try { if (!fs.statSync(projDir).isDirectory()) continue; } catch { continue; }
+
+    // Sessions are in <projDir>/chats/session-*.json
+    const chatsDir = path.join(projDir, 'chats');
+    if (!fs.existsSync(chatsDir)) continue;
+
+    let files;
+    try {
+      files = fs.readdirSync(chatsDir).filter(f => f.startsWith('session-') && f.endsWith('.json'));
+    } catch { continue; }
+
+    // Resolve folder from projects.json mapping
+    const folder = projectMap.get(projName) || null;
+
+    for (const file of files) {
+      const fullPath = path.join(chatsDir, file);
+      try {
+        const raw = fs.readFileSync(fullPath, 'utf-8');
+        const record = JSON.parse(raw);
+        if (!record || !record.messages) continue;
+
+        const sessionId = record.sessionId || file.replace('.json', '');
+        const messages = record.messages || [];
+
+        // Extract first user prompt for title
+        const firstUser = messages.find(m => m.type === 'user');
+        const firstPrompt = extractTextContent(firstUser?.content);
+
+        chats.push({
+          source: 'gemini-cli',
+          composerId: sessionId,
+          name: firstPrompt ? cleanPrompt(firstPrompt) : null,
+          createdAt: record.startTime ? new Date(record.startTime).getTime() : null,
+          lastUpdatedAt: record.lastUpdated ? new Date(record.lastUpdated).getTime() : null,
+          mode: 'gemini',
+          folder,
+          encrypted: false,
+          bubbleCount: messages.length,
+          _fullPath: fullPath,
+        });
+      } catch { /* skip malformed files */ }
+    }
+  }
+
+  return chats;
+}
+
+function cleanPrompt(text) {
+  if (!text) return null;
+  return text.replace(/\s+/g, ' ').trim().substring(0, 120) || null;
+}
+
+function extractTextContent(content) {
+  if (!content) return '';
+  if (typeof content === 'string') return content;
+  // Array of { text } parts (user messages)
+  if (Array.isArray(content)) {
+    return content
+      .filter(p => p.text)
+      .map(p => p.text)
+      .join('\n') || '';
+  }
+  if (content.text) return content.text;
+  return '';
+}
+
+function getMessages(chat) {
+  const filePath = chat._fullPath;
+  if (!filePath || !fs.existsSync(filePath)) return [];
+
+  let record;
+  try {
+    record = JSON.parse(fs.readFileSync(filePath, 'utf-8'));
+  } catch { return []; }
+
+  if (!record || !record.messages) return [];
+
+  const result = [];
+  for (const msg of record.messages) {
+    const type = msg.type;
+    const text = extractTextContent(msg.content || msg.displayContent);
+
+    if (type === 'user') {
+      if (text) result.push({ role: 'user', content: text });
+    } else if (type === 'gemini') {
+      const parts = [];
+      const toolCalls = [];
+
+      // Thoughts have { subject, description, timestamp }
+      if (msg.thoughts && Array.isArray(msg.thoughts)) {
+        for (const t of msg.thoughts) {
+          const thought = t.description || t.subject || '';
+          if (thought) parts.push(`[thinking] ${thought}`);
+        }
+      }
+
+      // Main text content (string for gemini messages)
+      if (text) parts.push(text);
+
+      // Tool calls
+      if (msg.toolCalls && Array.isArray(msg.toolCalls)) {
+        for (const tc of msg.toolCalls) {
+          const args = tc.args || {};
+          const argKeys = typeof args === 'object' ? Object.keys(args).join(', ') : '';
+          parts.push(`[tool-call: ${tc.name || 'unknown'}(${argKeys})]`);
+          toolCalls.push({ name: tc.name || 'unknown', args });
+        }
+      }
+
+      if (parts.length > 0) {
+        const tokens = msg.tokens || {};
+        result.push({
+          role: 'assistant',
+          content: parts.join('\n'),
+          _model: msg.model,
+          _inputTokens: tokens.input,
+          _outputTokens: tokens.output,
+          _cacheRead: tokens.cached,
+          _toolCalls: toolCalls.length > 0 ? toolCalls : undefined,
+        });
+      }
+    } else if (type === 'info' || type === 'error' || type === 'warning') {
+      if (text) result.push({ role: 'system', content: `[${type}] ${text}` });
+    }
+  }
+
+  return result;
+}
+
+module.exports = { name, getChats, getMessages };

package/editors/index.js

@@ -4,8 +4,10 @@ const claude = require('./claude');
 const vscode = require('./vscode');
 const zed = require('./zed');
 const opencode = require('./opencode');
+const gemini = require('./gemini');
+const copilot = require('./copilot');
 
-const editors = [cursor, windsurf, claude, vscode, zed, opencode];
+const editors = [cursor, windsurf, claude, vscode, zed, opencode, gemini, copilot];
 
 /**
  * Get all chats from all editor adapters, sorted by most recent first.

package/index.js

@@ -94,7 +94,7 @@ 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'));
+console.log(chalk.dim('  Scanning editors: Cursor, Windsurf, Claude Code, VS Code, Zed, Antigravity, OpenCode, Gemini CLI, Copilot CLI'));
 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)`));

package/package.json

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

package/server.js

@@ -112,6 +112,42 @@ app.get('/api/tool-calls', (req, res) => {
   }
 });
 
+app.post('/api/query', (req, res) => {
+  try {
+    const { sql } = req.body;
+    if (!sql || typeof sql !== 'string') return res.status(400).json({ error: 'sql string required' });
+    // Only allow SELECT / PRAGMA / EXPLAIN / WITH statements
+    const trimmed = sql.trim().replace(/^--.*$/gm, '').trim();
+    const first = trimmed.split(/\s+/)[0].toUpperCase();
+    if (!['SELECT', 'PRAGMA', 'EXPLAIN', 'WITH'].includes(first)) {
+      return res.status(403).json({ error: 'Only SELECT queries are allowed' });
+    }
+    const db = cache.getDb();
+    if (!db) return res.status(500).json({ error: 'Database not initialized' });
+    const stmt = db.prepare(sql);
+    const rows = stmt.all();
+    const columns = rows.length > 0 ? Object.keys(rows[0]) : [];
+    res.json({ columns, rows, count: rows.length });
+  } catch (err) {
+    res.status(400).json({ error: err.message });
+  }
+});
+
+app.get('/api/schema', (req, res) => {
+  try {
+    const db = cache.getDb();
+    if (!db) return res.status(500).json({ error: 'Database not initialized' });
+    const tables = db.prepare("SELECT name FROM sqlite_master WHERE type='table' ORDER BY name").all();
+    const schema = {};
+    for (const { name } of tables) {
+      schema[name] = db.prepare(`PRAGMA table_info(${name})`).all();
+    }
+    res.json({ tables: tables.map(t => t.name), schema });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
 app.get('/api/refetch', async (req, res) => {
   res.writeHead(200, {
     'Content-Type': 'text/event-stream',

package/ui/src/App.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 import { Routes, Route, NavLink } from 'react-router-dom'
-import { Activity, BarChart3, GitCompare, MessageSquare, FolderOpen, Sun, Moon, RefreshCw, AlertTriangle, Github, Terminal } from 'lucide-react'
+import { Activity, BarChart3, GitCompare, MessageSquare, FolderOpen, Sun, Moon, RefreshCw, AlertTriangle, Github, Terminal, Database } from 'lucide-react'
 import { fetchOverview, refetchAgents } from './lib/api'
 import { useTheme } from './lib/theme'
 import Dashboard from './pages/Dashboard'
@@ -9,6 +9,7 @@ import DeepAnalysis from './pages/DeepAnalysis'
 import Compare from './pages/Compare'
 import ChatDetail from './pages/ChatDetail'
 import Projects from './pages/Projects'
+import SqlViewer from './pages/SqlViewer'
 
 export default function App() {
   const [overview, setOverview] = useState(null)
@@ -35,6 +36,7 @@ export default function App() {
     { to: '/sessions', icon: MessageSquare, label: 'Sessions' },
     { to: '/analysis', icon: BarChart3, label: 'Analysis' },
     { to: '/compare', icon: GitCompare, label: 'Compare' },
+    { to: '/sql', icon: Database, label: 'SQL' },
   ]
 
   return (
@@ -100,6 +102,7 @@ export default function App() {
           <Route path="/sessions/:id" element={<ChatDetail />} />
           <Route path="/analysis" element={<DeepAnalysis overview={overview} />} />
           <Route path="/compare" element={<Compare overview={overview} />} />
+          <Route path="/sql" element={<SqlViewer />} />
         </Routes>
       </main>
 

package/ui/src/components/ActivityHeatmap.jsx

@@ -38,11 +38,11 @@ export default function ActivityHeatmap({ dailyData }) {
       if (d.total > maxCount) maxCount = d.total
     }
 
-    // End on today, start 52 weeks back
+    // End on Saturday of the current week, start WEEK_COLS-1 weeks before
     const today = new Date()
     today.setHours(0, 0, 0, 0)
     const start = new Date(today)
-    start.setDate(start.getDate() - (WEEK_COLS * 7 - 1) - start.getDay())
+    start.setDate(start.getDate() - start.getDay() - (WEEK_COLS - 1) * 7)
 
     const weeks = []
     const months = []

package/ui/src/lib/api.js

@@ -69,6 +69,20 @@ export async function fetchDashboardStats(params = {}) {
   return res.json();
 }
 
+export async function executeQuery(sql) {
+  const res = await fetch(`${BASE}/api/query`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ sql }),
+  });
+  return res.json();
+}
+
+export async function fetchSchema() {
+  const res = await fetch(`${BASE}/api/schema`);
+  return res.json();
+}
+
 export async function fetchToolCalls(name, opts = {}) {
   const q = new URLSearchParams({ name });
   if (opts.limit) q.set('limit', opts.limit);

package/ui/src/lib/constants.js

@@ -9,6 +9,8 @@ export const EDITOR_COLORS = {
   'vscode-insiders': '#60a5fa',
   'zed': '#10b981',
   'opencode': '#ec4899',
+  'gemini-cli': '#4285f4',
+  'copilot-cli': '#8957e5',
 };
 
 export const EDITOR_LABELS = {
@@ -22,6 +24,8 @@ export const EDITOR_LABELS = {
   'vscode-insiders': 'VS Code Insiders',
   'zed': 'Zed',
   'opencode': 'OpenCode',
+  'gemini-cli': 'Gemini CLI',
+  'copilot-cli': 'Copilot CLI',
 };
 
 export function editorColor(src) {

package/ui/src/pages/Dashboard.jsx

@@ -226,7 +226,7 @@ export default function Dashboard({ overview }) {
 
       {/* Activity Heatmap */}
       <div className="card p-3">
-        <SectionTitle>activity</SectionTitle>
+        <SectionTitle>agentic coding activity</SectionTitle>
         {dailyData ? <ActivityHeatmap dailyData={dailyData} /> : <div className="text-[10px]" style={{ color: 'var(--c-text3)' }}>loading...</div>}
       </div>
 

package/ui/src/pages/SqlViewer.jsx

@@ -0,0 +1,322 @@
+import { useState, useEffect, useRef, useMemo } from 'react'
+import { Play, Database, Table2, ChevronDown, Copy, Download, BarChart3, LineChart, PieChart } from 'lucide-react'
+import { Chart as ChartJS, ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement, PointElement, LineElement, Filler } from 'chart.js'
+import { Bar, Line, Doughnut } from 'react-chartjs-2'
+import { executeQuery, fetchSchema } from '../lib/api'
+import { useTheme } from '../lib/theme'
+
+ChartJS.register(ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement, PointElement, LineElement, Filler)
+
+const EXAMPLE_QUERIES = [
+  { label: 'Sessions per editor', sql: `SELECT source, COUNT(*) as count FROM chats GROUP BY source ORDER BY count DESC` },
+  { label: 'Top 10 projects', sql: `SELECT folder, COUNT(*) as sessions, SUM(bubble_count) as messages FROM chats WHERE folder IS NOT NULL GROUP BY folder ORDER BY sessions DESC LIMIT 10` },
+  { label: 'Messages per day', sql: `SELECT date(created_at/1000, 'unixepoch') as day, COUNT(*) as count FROM chats WHERE created_at IS NOT NULL GROUP BY day ORDER BY day` },
+  { label: 'Top models', sql: `SELECT model, COUNT(*) as count FROM messages WHERE model IS NOT NULL GROUP BY model ORDER BY count DESC LIMIT 10` },
+  { label: 'Top tools', sql: `SELECT tool_name, COUNT(*) as count FROM tool_calls GROUP BY tool_name ORDER BY count DESC LIMIT 15` },
+  { label: 'Token usage by editor', sql: `SELECT c.source, SUM(cs.total_input_tokens) as input_tokens, SUM(cs.total_output_tokens) as output_tokens FROM chat_stats cs JOIN chats c ON c.id = cs.chat_id GROUP BY c.source ORDER BY input_tokens DESC` },
+  { label: 'Sessions by mode', sql: `SELECT mode, COUNT(*) as count FROM chats WHERE mode IS NOT NULL GROUP BY mode ORDER BY count DESC` },
+  { label: 'Hourly distribution', sql: `SELECT CAST(strftime('%H', created_at/1000, 'unixepoch') AS INTEGER) as hour, COUNT(*) as count FROM chats WHERE created_at IS NOT NULL GROUP BY hour ORDER BY hour` },
+]
+
+export default function SqlViewer() {
+  const { dark } = useTheme()
+  const [sql, setSql] = useState(EXAMPLE_QUERIES[0].sql)
+  const [result, setResult] = useState(null)
+  const [error, setError] = useState(null)
+  const [loading, setLoading] = useState(false)
+  const [schema, setSchema] = useState(null)
+  const [showSchema, setShowSchema] = useState(false)
+  const [chartType, setChartType] = useState('bar')
+  const [elapsed, setElapsed] = useState(null)
+  const textareaRef = useRef(null)
+
+  useEffect(() => {
+    fetchSchema().then(setSchema).catch(() => {})
+  }, [])
+
+  const runQuery = async () => {
+    setLoading(true)
+    setError(null)
+    setResult(null)
+    const t0 = performance.now()
+    try {
+      const data = await executeQuery(sql.trim())
+      setElapsed(((performance.now() - t0)).toFixed(0))
+      if (data.error) {
+        setError(data.error)
+      } else {
+        setResult(data)
+      }
+    } catch (e) {
+      setError(e.message)
+      setElapsed(null)
+    }
+    setLoading(false)
+  }
+
+  const handleKeyDown = (e) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+      e.preventDefault()
+      runQuery()
+    }
+  }
+
+  const copyResults = () => {
+    if (!result) return
+    const header = result.columns.join('\t')
+    const rows = result.rows.map(r => result.columns.map(c => r[c] ?? '').join('\t'))
+    navigator.clipboard.writeText([header, ...rows].join('\n'))
+  }
+
+  const downloadCsv = () => {
+    if (!result) return
+    const escape = (v) => {
+      const s = String(v ?? '')
+      return s.includes(',') || s.includes('"') || s.includes('\n') ? `"${s.replace(/"/g, '""')}"` : s
+    }
+    const header = result.columns.map(escape).join(',')
+    const rows = result.rows.map(r => result.columns.map(c => escape(r[c])).join(','))
+    const blob = new Blob([header + '\n' + rows.join('\n')], { type: 'text/csv' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = 'query-results.csv'
+    a.click()
+    URL.revokeObjectURL(url)
+  }
+
+  // Auto-detect chartable data
+  const chartData = useMemo(() => {
+    if (!result || result.columns.length < 2 || result.rows.length === 0) return null
+    const cols = result.columns
+    // Find a label column (string-like) and value columns (numeric)
+    const labelCol = cols.find(c => result.rows.every(r => typeof r[c] === 'string' || r[c] === null)) || cols[0]
+    const valueCols = cols.filter(c => c !== labelCol && result.rows.some(r => typeof r[c] === 'number'))
+    if (valueCols.length === 0) return null
+
+    const labels = result.rows.map(r => String(r[labelCol] ?? ''))
+    const palette = ['#6366f1', '#f59e0b', '#06b6d4', '#10b981', '#f97316', '#ec4899', '#8b5cf6', '#3b82f6', '#ef4444', '#14b8a6']
+
+    const datasets = valueCols.map((col, i) => ({
+      label: col,
+      data: result.rows.map(r => r[col] ?? 0),
+      backgroundColor: chartType === 'doughnut'
+        ? palette.slice(0, labels.length)
+        : palette[i % palette.length] + '99',
+      borderColor: palette[i % palette.length],
+      borderWidth: chartType === 'line' ? 2 : 1,
+      borderRadius: chartType === 'bar' ? 4 : 0,
+      tension: 0.3,
+      fill: chartType === 'line',
+      pointRadius: chartType === 'line' ? 3 : 0,
+    }))
+
+    return { labels, datasets }
+  }, [result, chartType])
+
+  const chartOptions = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: { display: chartData?.datasets?.length > 1 || chartType === 'doughnut', labels: { color: dark ? '#ccc' : '#555', font: { size: 11 } } },
+      tooltip: { backgroundColor: dark ? '#1e1e2e' : '#fff', titleColor: dark ? '#fff' : '#111', bodyColor: dark ? '#ccc' : '#555', borderColor: dark ? '#333' : '#ddd', borderWidth: 1 },
+    },
+    scales: chartType !== 'doughnut' ? {
+      x: { ticks: { color: dark ? '#888' : '#666', font: { size: 10 }, maxRotation: 45 }, grid: { color: dark ? '#ffffff08' : '#00000008' } },
+      y: { ticks: { color: dark ? '#888' : '#666', font: { size: 10 } }, grid: { color: dark ? '#ffffff08' : '#00000008' } },
+    } : undefined,
+  }
+
+  const txtStyle = { color: 'var(--c-text)' }
+  const txt2Style = { color: 'var(--c-text2)' }
+  const cardBg = { background: 'var(--c-card)', border: '1px solid var(--c-border)' }
+
+  return (
+    <div className="space-y-3">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Database size={16} style={txtStyle} />
+          <h1 className="text-sm font-semibold" style={txtStyle}>SQL Viewer</h1>
+          <span className="text-[10px] px-1.5 py-0.5 rounded" style={{ ...txt2Style, background: 'var(--c-bg2)' }}>cache.db</span>
+        </div>
+        <button
+          onClick={() => setShowSchema(!showSchema)}
+          className="flex items-center gap-1 text-[11px] px-2 py-1 rounded transition hover:bg-[var(--c-card)]"
+          style={txt2Style}
+        >
+          <Table2 size={12} />
+          Schema
+          <ChevronDown size={10} className={`transition ${showSchema ? 'rotate-180' : ''}`} />
+        </button>
+      </div>
+
+      {/* Schema panel */}
+      {showSchema && schema && (
+        <div className="rounded-lg p-3 space-y-2 text-[11px]" style={cardBg}>
+          <div className="flex flex-wrap gap-4">
+            {schema.tables.map(table => (
+              <div key={table} className="min-w-[180px]">
+                <div className="font-semibold mb-1" style={txtStyle}>{table}</div>
+                <div className="space-y-0.5">
+                  {schema.schema[table]?.map(col => (
+                    <div key={col.name} className="flex gap-2" style={txt2Style}>
+                      <span style={txtStyle}>{col.name}</span>
+                      <span className="text-[10px] opacity-60">{col.type}</span>
+                      {col.pk ? <span className="text-[9px] px-1 rounded" style={{ background: '#6366f133', color: '#6366f1' }}>PK</span> : null}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Example queries */}
+      <div className="flex flex-wrap gap-1">
+        {EXAMPLE_QUERIES.map((q, i) => (
+          <button
+            key={i}
+            onClick={() => setSql(q.sql)}
+            className="text-[10px] px-2 py-0.5 rounded transition hover:bg-[var(--c-card)]"
+            style={{ ...txt2Style, border: '1px solid var(--c-border)' }}
+          >
+            {q.label}
+          </button>
+        ))}
+      </div>
+
+      {/* SQL editor */}
+      <div className="rounded-lg overflow-hidden" style={cardBg}>
+        <div className="flex items-center justify-between px-3 py-1.5" style={{ borderBottom: '1px solid var(--c-border)' }}>
+          <span className="text-[10px] font-mono" style={txt2Style}>SQL</span>
+          <div className="flex items-center gap-1">
+            <span className="text-[10px]" style={txt2Style}>⌘+Enter to run</span>
+          </div>
+        </div>
+        <textarea
+          ref={textareaRef}
+          value={sql}
+          onChange={e => setSql(e.target.value)}
+          onKeyDown={handleKeyDown}
+          spellCheck={false}
+          className="w-full p-3 text-[12px] font-mono resize-y outline-none"
+          style={{ background: 'transparent', color: 'var(--c-text)', minHeight: 80, maxHeight: 300 }}
+          rows={4}
+        />
+        <div className="flex items-center gap-2 px-3 py-1.5" style={{ borderTop: '1px solid var(--c-border)' }}>
+          <button
+            onClick={runQuery}
+            disabled={loading || !sql.trim()}
+            className="flex items-center gap-1.5 px-3 py-1 text-[11px] font-medium rounded transition"
+            style={{ background: '#6366f1', color: '#fff', opacity: loading ? 0.5 : 1 }}
+          >
+            <Play size={11} />
+            {loading ? 'Running...' : 'Run Query'}
+          </button>
+          {elapsed && result && (
+            <span className="text-[10px]" style={txt2Style}>
+              {result.count} row{result.count !== 1 ? 's' : ''} in {elapsed}ms
+            </span>
+          )}
+          {result && (
+            <div className="ml-auto flex items-center gap-1">
+              <button onClick={copyResults} className="p-1 rounded hover:bg-[var(--c-bg2)] transition" style={txt2Style} title="Copy to clipboard">
+                <Copy size={12} />
+              </button>
+              <button onClick={downloadCsv} className="p-1 rounded hover:bg-[var(--c-bg2)] transition" style={txt2Style} title="Download CSV">
+                <Download size={12} />
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Error */}
+      {error && (
+        <div className="rounded-lg px-3 py-2 text-[11px]" style={{ background: '#ef444420', border: '1px solid #ef444440', color: '#ef4444' }}>
+          {error}
+        </div>
+      )}
+
+      {/* Results table */}
+      {result && result.rows.length > 0 && (
+        <div className="rounded-lg overflow-hidden" style={cardBg}>
+          <div className="overflow-x-auto" style={{ maxHeight: 400 }}>
+            <table className="w-full text-[11px]" style={{ borderCollapse: 'collapse' }}>
+              <thead>
+                <tr style={{ borderBottom: '1px solid var(--c-border)' }}>
+                  {result.columns.map(col => (
+                    <th key={col} className="text-left px-3 py-1.5 font-semibold sticky top-0" style={{ ...txtStyle, background: 'var(--c-card)' }}>
+                      {col}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {result.rows.map((row, i) => (
+                  <tr key={i} className="hover:bg-[var(--c-bg2)] transition" style={{ borderBottom: '1px solid var(--c-border)' }}>
+                    {result.columns.map(col => (
+                      <td key={col} className="px-3 py-1 font-mono" style={txt2Style}>
+                        {formatCell(row[col])}
+                      </td>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+
+      {result && result.rows.length === 0 && (
+        <div className="rounded-lg px-3 py-6 text-center text-[11px]" style={{ ...cardBg, ...txt2Style }}>
+          Query returned 0 rows
+        </div>
+      )}
+
+      {/* Chart visualization */}
+      {chartData && (
+        <div className="rounded-lg p-4" style={cardBg}>
+          <div className="flex items-center gap-2 mb-3">
+            <span className="text-[11px] font-semibold" style={txtStyle}>Visualization</span>
+            <div className="flex gap-0.5 ml-2" style={{ border: '1px solid var(--c-border)', borderRadius: 6 }}>
+              {[
+                { type: 'bar', icon: BarChart3 },
+                { type: 'line', icon: LineChart },
+                { type: 'doughnut', icon: PieChart },
+              ].map(({ type, icon: Icon }) => (
+                <button
+                  key={type}
+                  onClick={() => setChartType(type)}
+                  className="p-1.5 transition"
+                  style={{
+                    background: chartType === type ? 'var(--c-bg2)' : 'transparent',
+                    color: chartType === type ? 'var(--c-white)' : 'var(--c-text3)',
+                    borderRadius: 4,
+                  }}
+                >
+                  <Icon size={12} />
+                </button>
+              ))}
+            </div>
+          </div>
+          <div style={{ height: chartType === 'doughnut' ? 280 : 260 }}>
+            {chartType === 'bar' && <Bar data={chartData} options={chartOptions} />}
+            {chartType === 'line' && <Line data={chartData} options={chartOptions} />}
+            {chartType === 'doughnut' && <Doughnut data={chartData} options={chartOptions} />}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function formatCell(value) {
+  if (value === null || value === undefined) return <span className="opacity-30">NULL</span>
+  if (typeof value === 'number') return value.toLocaleString()
+  const str = String(value)
+  if (str.length > 120) return str.substring(0, 120) + '…'
+  return str
+}