agentlytics 0.0.1 → 0.0.3

package/README.md

@@ -1,301 +1,106 @@
-# npx agentlytics
+<p align="center">
+  <img src="misc/logo.svg" width="120" alt="Agentlytics">
+</p>
 
-**Comprehensive analytics dashboard for your AI coding agents.**
+<h1 align="center">Agentlytics</h1>
 
-Agentlytics reads local chat history from every major AI coding assistant — Cursor, Windsurf, Claude Code, VS Code Copilot, Zed, Antigravity, and OpenCode — and presents a unified analytics dashboard in your browser.
+<p align="center">
+  <strong>Unified analytics for your AI coding agents</strong><br>
+  <sub>Cursor · Windsurf · Claude Code · VS Code Copilot · Zed · Antigravity · OpenCode · Gemini CLI · Copilot CLI</sub>
+</p>
 
-No data ever leaves your machine. Everything runs locally against SQLite databases and local files.
+<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-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>
 
-<video src="misc/agentlytics.mp4" autoplay loop muted playsinline width="100%"></video>
+<p align="center">
+  <img src="https://github.com/user-attachments/assets/fdb0acb2-db0f-4091-af23-949ca0fae9c8" alt="Agentlytics demo" width="100%">
+</p>
 
 ---
 
-## Features
-
-- **Dashboard** — KPI cards (total sessions, daily avg, current month), activity heatmap, editor breakdown with click-to-filter, mode distribution, top projects
-- **Sessions** — Paginated list of every chat session with editor/project/mode badges, search, and editor filter. Click any session to see the full conversation with syntax-highlighted markdown, expandable tool call details, and diff views
-- **Projects** — Per-project analytics: sessions, messages, tokens, tool calls, models, and editor breakdown. Filterable by editor and searchable
-- **Deep Analysis** — Aggregated tool call frequency, model distribution (doughnut chart), token breakdown (input/output/cache read/write). Click any tool bar to drill down into individual calls with full arguments
-- **Compare** — Side-by-side editor comparison: totals, efficiency ratios (avg msgs/session, output/input ratio, cache hit rate), grouped bar charts, tool and model breakdowns
-- **Refetch** — One-click cache rebuild with live SSE progress streaming
-
-### Supported Editors
-
-| Editor | Source ID | Data Location | Messages | Tool Args | Models | Tokens |
-|--------|-----------|---------------|----------|-----------|--------|--------|
-| **Cursor** | `cursor` | `~/.cursor/chats/` + `~/Library/Application Support/Cursor/` | ✅ | ✅ | ⚠️ provider only | ⚠️ partial |
-| **Windsurf** | `windsurf` | ConnectRPC from running language server | ✅ | ✅ | ✅ | ✅ |
-| **Windsurf Next** | `windsurf-next` | ConnectRPC from running language server | ✅ | ✅ | ✅ | ✅ |
-| **Antigravity** | `antigravity` | ConnectRPC from running language server (HTTPS) | ✅ | ✅ | ✅ | ✅ |
-| **Claude Code** | `claude-code` | `~/.claude/projects/` | ✅ | ✅ | ✅ | ✅ |
-| **VS Code** | `vscode` | `~/Library/Application Support/Code/` | ✅ | ✅ | ✅ | ✅ |
-| **VS Code Insiders** | `vscode-insiders` | `~/Library/Application Support/Code - Insiders/` | ✅ | ✅ | ✅ | ✅ |
-| **Zed** | `zed` | `~/Library/Application Support/Zed/threads/threads.db` | ✅ | ✅ | ✅ | ❌ |
-| **OpenCode** | `opencode` | `~/.local/share/opencode/opencode.db` | ✅ | ✅ | ✅ | ✅ |
-
-> **Note:** Windsurf, Windsurf Next, and Antigravity require their app to be running during scan — they expose data via a local ConnectRPC API from the language server process.
-
----
+Agentlytics reads local chat history from every major AI coding assistant and presents a unified analytics dashboard in your browser. **No data ever leaves your machine.**
 
 ## Quick Start
 
-### Prerequisites
-
-- **Node.js** ≥ 18
-- **macOS** (currently the only supported platform — all editor paths are macOS-specific)
-
-### Install & Run
-
 ```bash
-git clone <repo-url> agentlytics
-cd agentlytics
-
-# Install backend dependencies
-npm install
-
-# Build the frontend
-cd ui && npm install && npm run build && cd ..
-
-# Start the dashboard
-npm start
+npx agentlytics
 ```
 
-The dashboard will open automatically at **http://localhost:4637**.
-
-On first run, Agentlytics scans all detected editors and populates a local SQLite cache at `~/.agentlytics/cache.db`. Subsequent launches skip unchanged sessions.
-
-### Options
-
-```bash
-npm start              # normal start (uses cache)
-npm start -- --no-cache  # wipe cache and rescan everything
-```
+Opens at **http://localhost:4637**. Requires Node.js ≥ 18, macOS.
 
-### Development
-
-```bash
-# Start Vite dev server with hot reload (port 5173)
-cd ui && npm run dev
-
-# In another terminal, start the backend (port 4637)
-npm start
-```
-
-The Vite dev server proxies API requests to the backend via `vite.config.js`.
-
----
+## Features
 
-### Data Flow
+- **Dashboard** — KPIs, activity heatmap, editor breakdown, coding streaks, token economy, peak hours, top models & tools
+- **Sessions** — Search, filter, full conversation viewer with syntax highlighting and diff views
+- **Projects** — Per-project analytics: sessions, messages, tokens, models, editor breakdown
+- **Deep Analysis** — Tool frequency, model distribution, token breakdown with drill-down
+- **Compare** — Side-by-side editor comparison with efficiency ratios
+- **Refetch** — One-click cache rebuild with live progress
+
+## Supported Editors
+
+| Editor | ID | Msgs | Tools | Models | Tokens |
+|--------|----|:----:|:-----:|:------:|:------:|
+| **Cursor** | `cursor` | ✅ | ✅ | ⚠️ | ⚠️ |
+| **Windsurf** | `windsurf` | ✅ | ✅ | ✅ | ✅ |
+| **Windsurf Next** | `windsurf-next` | ✅ | ✅ | ✅ | ✅ |
+| **Antigravity** | `antigravity` | ✅ | ✅ | ✅ | ✅ |
+| **Claude Code** | `claude-code` | ✅ | ✅ | ✅ | ✅ |
+| **VS Code** | `vscode` | ✅ | ✅ | ✅ | ✅ |
+| **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.
+
+## How It Works
 
 ```
-Editor Files/APIs ──► editors/*.js ──► cache.js (SQLite) ──► server.js (REST API) ──► ui/ (React SPA)
+Editor files/APIs → editors/*.js → cache.js (SQLite) → server.js (REST) → React SPA
 ```
 
-1. **Editor adapters** read chat data from local files, databases, or running processes
-2. **Cache layer** normalizes everything into a single SQLite DB (`~/.agentlytics/cache.db`) with tables for `chats`, `messages`, `chat_stats`, and `tool_calls`
-3. **Express server** exposes read-only REST endpoints against the cache
-4. **React frontend** fetches data from the API and renders charts via Chart.js
-
----
-
-## API Reference
-
-All endpoints are `GET` and return JSON.
-
-| Endpoint | Description | Query Params |
-|----------|-------------|--------------|
-| `/api/overview` | Dashboard overview: totals, editors, modes, monthly trend, top projects | `editor` |
-| `/api/daily-activity` | Daily activity data for heatmap | `editor` |
-| `/api/chats` | Paginated chat list | `editor`, `folder`, `named`, `limit`, `offset` |
-| `/api/chats/:id` | Full chat detail with messages and stats | — |
-| `/api/projects` | All projects with aggregated analytics | — |
-| `/api/deep-analytics` | Aggregated tool/model/token analytics | `editor`, `folder`, `limit` |
-| `/api/tool-calls` | Individual tool call instances | `name` (required), `folder`, `limit` |
-| `/api/refetch` | SSE stream: wipe cache and rescan all editors | — |
-
----
-
-## Cache Database Schema
-
-Location: `~/.agentlytics/cache.db`
+All data is normalized into a local SQLite cache at `~/.agentlytics/cache.db`. The Express server exposes read-only REST endpoints consumed by the React frontend.
 
-### `chats`
-Stores one row per chat session, normalized across all editors.
+## API
 
-| Column | Type | Description |
-|--------|------|-------------|
-| `id` | TEXT PK | Unique chat ID (composerId) |
-| `source` | TEXT | Editor identifier (`cursor`, `windsurf`, `claude-code`, etc.) |
-| `name` | TEXT | Chat title |
-| `mode` | TEXT | Session mode (`agent`, `edit`, `chat`, `ask`, etc.) |
-| `folder` | TEXT | Project working directory |
-| `created_at` | INTEGER | Creation timestamp (ms) |
-| `last_updated_at` | INTEGER | Last update timestamp (ms) |
-| `bubble_count` | INTEGER | Number of messages/bubbles |
-| `encrypted` | INTEGER | 1 if content is encrypted |
+| Endpoint | Description |
+|----------|-------------|
+| `GET /api/overview` | Dashboard KPIs, editors, modes, trends |
+| `GET /api/daily-activity` | Daily counts for heatmap |
+| `GET /api/dashboard-stats` | Hourly, weekday, streaks, tokens, velocity |
+| `GET /api/chats` | Paginated session list |
+| `GET /api/chats/:id` | Full chat with messages |
+| `GET /api/projects` | Project-level aggregations |
+| `GET /api/deep-analytics` | Tool/model/token breakdowns |
+| `GET /api/tool-calls` | Individual tool call instances |
+| `GET /api/refetch` | SSE: wipe cache and rescan |
 
-### `messages`
-Individual messages per chat, stored with truncation at 50K characters.
+All endpoints accept optional `editor` filter. See **[API.md](API.md)** for full request/response documentation.
 
-| Column | Type | Description |
-|--------|------|-------------|
-| `chat_id` | TEXT FK | References `chats.id` |
-| `seq` | INTEGER | Message sequence number |
-| `role` | TEXT | `user`, `assistant`, `system`, or `tool` |
-| `content` | TEXT | Message content (may contain `[tool-call:]` / `[tool-result:]` markers) |
-| `model` | TEXT | Model name (if available) |
-| `input_tokens` | INTEGER | Input token count |
-| `output_tokens` | INTEGER | Output token count |
+## Roadmap
 
-### `chat_stats`
-Pre-aggregated statistics per chat, computed during analysis.
+- [ ] **Offline Windsurf/Antigravity support** — Read cascade data from local file structure instead of requiring the app to be running (see below)
+- [ ] **LLM-powered insights** — Use an LLM to analyze session patterns, generate summaries, detect coding habits, and surface actionable recommendations
+- [ ] **Linux & Windows support** — Adapt editor paths for non-macOS platforms
+- [ ] **Export & reports** — PDF/CSV export of analytics and session data
+- [ ] **Cost tracking** — Estimate API costs per editor/model based on token usage
 
-| Column | Type | Description |
-|--------|------|-------------|
-| `chat_id` | TEXT PK | References `chats.id` |
-| `total_messages` | INTEGER | Total message count |
-| `user_messages` | INTEGER | User message count |
-| `assistant_messages` | INTEGER | Assistant message count |
-| `tool_calls` | TEXT | JSON array of tool call names |
-| `models` | TEXT | JSON array of model names |
-| `total_input_tokens` | INTEGER | Sum of input tokens |
-| `total_output_tokens` | INTEGER | Sum of output tokens |
-| `total_cache_read` | INTEGER | Sum of cache read tokens |
-| `total_cache_write` | INTEGER | Sum of cache write tokens |
+## Contributions Needed
 
-### `tool_calls`
-Individual tool call records with full argument JSON.
+**Windsurf / Windsurf Next / Antigravity offline reading** — Currently these editors require their app to be running because data is fetched via ConnectRPC from the language server process. Unlike Cursor or Claude Code, there's no known local file structure to read cascade history from. If you know where Windsurf stores trajectory data on disk, or can help reverse-engineer the storage format, contributions are very welcome.
 
-| Column | Type | Description |
-|--------|------|-------------|
-| `chat_id` | TEXT FK | References `chats.id` |
-| `tool_name` | TEXT | Tool function name |
-| `args_json` | TEXT | Full arguments as JSON |
-| `source` | TEXT | Editor source |
-| `folder` | TEXT | Project directory |
-| `timestamp` | INTEGER | Call timestamp (ms) |
+**LLM-based analytics** — We'd love to add intelligent analysis on top of the raw data — session summaries, coding pattern detection, productivity insights, and natural language queries over your agent history. If you have ideas or want to build this, open an issue or PR.
 
----
-
-## Editor Adapters — Technical Details
-
-### Cursor
-
-Reads from **two separate data stores**:
-
-1. **Agent Store** (`~/.cursor/chats/<workspace>/<chatId>/store.db`)
-   - SQLite with `meta` table (hex-encoded JSON) and `blobs` table (content-addressed SHA-256 tree)
-   - Meta contains: `agentId`, `latestRootBlobId`, `name`, `createdAt`
-   - Messages are retrieved by walking the blob tree: tree nodes contain message refs and child refs
-   - Tool calls extracted from OpenAI-format `tool_calls` array on assistant messages
-
-2. **Workspace Composers** (`~/Library/Application Support/Cursor/User/`)
-   - `workspaceStorage/<hash>/state.vscdb` — `composer.composerData` key holds all composer headers
-   - `globalStorage/state.vscdb` — `cursorDiskKV` table with `bubbleId:<composerId>:<n>` keys
-   - Each bubble is a JSON object with `type` (1=user, 2=assistant), `text`, `toolFormerData`, `tokenCount`
-   - Tool args extracted from `toolFormerData.rawArgs` with fallback to `toolFormerData.params`
-
-**Limitations:** Cursor does not persist model names per chat or per message. Provider name (e.g., "anthropic") is extracted from `providerOptions` when available.
-
-### Windsurf / Windsurf Next / Antigravity
-
-Connects to the **running language server** via ConnectRPC (buf Connect protocol):
-
-1. Discovers process via `ps aux` — finds `language_server_macos_arm` with `--csrf_token`
-2. Extracts CSRF token and PID, finds listening port via `lsof`
-3. Calls `GetAllCascadeTrajectories` for session summaries
-4. Calls `GetCascadeTrajectory` per session for full conversation data
-
-**Requires the application to be running** — data is served from the language server process, not from files on disk.
-
-### Claude Code
-
-Reads from `~/.claude/projects/<encoded-path>/`:
-- `sessions-index.json` — session index with titles and timestamps
-- Individual `.jsonl` session files — each line is a JSON message with `type`, `role`, `content`, `model`, `usage`
-- Tool calls extracted from `tool_use` content blocks and `tool_result` messages
-
-### VS Code / VS Code Insiders
-
-Reads from `~/Library/Application Support/{Code,Code - Insiders}/User/`:
-- `workspaceStorage/<hash>/state.vscdb` — workspace-to-folder mapping
-- Chat sessions stored as `.jsonl` files in the Copilot Chat extension directory
-- JSONL reconstruction: `kind:0` = init state, `kind:1` = JSON patch at key path
-- Messages, tool calls, and token usage extracted from reconstructed chat state
-
-### Zed
-
-Reads from `~/Library/Application Support/Zed/threads/threads.db`:
-- SQLite database with `threads` table containing zstd-compressed JSON blobs
-- Each thread decompressed via `zstd` CLI to extract messages, tool calls, and model info
-- Messages in OpenAI format with `tool_calls` array on assistant messages
-
-### OpenCode
+## Contributing
 
-Reads from `~/.local/share/opencode/opencode.db`:
-- SQLite database with `session`, `message`, and `project` tables
-- Messages queried directly via SQL with full content, model, and token data
-
----
-
-## Adding a New Editor
-
-1. Create `editors/<name>.js` exporting:
-
-```javascript
-const name = 'my-editor';
-
-function getChats() {
-  // Return array of chat objects:
-  return [{
-    source: name,         // editor identifier
-    composerId: '...',    // unique chat ID
-    name: '...',          // chat title (nullable)
-    createdAt: 1234567,   // timestamp in ms (nullable)
-    lastUpdatedAt: 1234567, // timestamp in ms (nullable)
-    mode: 'agent',        // session mode (nullable)
-    folder: '/path/to/project', // working directory (nullable)
-    encrypted: false,     // true if messages can't be read
-    bubbleCount: 10,      // message count hint (nullable)
-  }];
-}
-
-function getMessages(chat) {
-  // Return array of message objects:
-  return [{
-    role: 'user',         // 'user' | 'assistant' | 'system' | 'tool'
-    content: '...',       // message text
-    _model: 'gpt-4',     // model name (optional)
-    _inputTokens: 500,   // input token count (optional)
-    _outputTokens: 200,  // output token count (optional)
-    _cacheRead: 100,      // cache read tokens (optional)
-    _cacheWrite: 50,      // cache write tokens (optional)
-    _toolCalls: [{        // tool calls (optional)
-      name: 'read_file',
-      args: { path: '/foo.js' },
-    }],
-  }];
-}
-
-module.exports = { name, getChats, getMessages };
-```
-
-2. Register in `editors/index.js`:
-
-```javascript
-const myEditor = require('./my-editor');
-const editors = [...existingEditors, myEditor];
-```
-
-3. Add color and label in `ui/src/lib/constants.js`:
-
-```javascript
-export const EDITOR_COLORS = { ..., 'my-editor': '#hex' };
-export const EDITOR_LABELS = { ..., 'my-editor': 'My Editor' };
-```
-
----
+See **[CONTRIBUTING.md](CONTRIBUTING.md)** for development setup, editor adapter details, database schema, and how to add support for new editors.
 
 ## License
 
-MIT
+MIT — Built by [@f](https://github.com/f)

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.1",
+  "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
+}