§ 00 — LOADING STACK
◆
LangGraphLangGraph
Azure OpenAIAzure OpenAI
QdrantQdrant
Arize PhoenixArize Phoenix
LLangfuse
MMastra
Next.jsNext.js
SSupabase
LANGGRAPH ◆ AZURE ◆ QDRANT ◆ ARIZE ◆ LANGFUSE ◆ MASTRA ◆ NEXT.JS ◆ SUPABASE ◆ LANGGRAPH ◆ AZURE ◆ QDRANT ◆ ARIZE ◆ LANGFUSE ◆ MASTRA ◆ NEXT.JS ◆ SUPABASE
KKomal Vardhan.
HomeWorkAboutWritingResourcesContact
HomeWorkWritingResourcesAboutContact
Build like an engineer. Teach like a friend.

© 2026 Komal Vardhan Lolugu

Sitemap
  • Home
  • Work
  • About
  • Writing
  • Contact
  • Resources
Elsewhere
  • LinkedIn · 3.5K
  • Medium · Writing
  • Instagram
  • GitHub
  • Topmate
Newsletter

A field note every other Sunday. No hype, no AI spam. Unsubscribe anytime.

Designed & built by Komal. Made in India.
← All work
2025 · Developer toolsnpm · v5.4.3Author & Maintainer

AI Dev Lens

Local-first, privacy-focused analytics dashboard that tracks your usage across Claude Code, Codex, Cursor, Copilot, Kiro, Gemini CLI, and Antigravity. No cloud, no telemetry, no data leaves localhost.

View live ↗GitHub →
7AI tools tracked
10+Dashboard pages
0External API calls — everything reads from localhost
npxOne command to run — no install, no config
§ 01

The Problem

Developers using multiple AI coding tools had no single view of how they were actually using them. The data existed on every developer's machine in JSON and SQLite files, but there was no way to see it across tools.

§ 02

The Solution

Built AI Dev Lens: an npx-first analytics dashboard that reads directly from the local data directories each AI tool writes to. One command spins up a Next.js server at localhost:3000 with a full analytics suite — activity heatmap, token economy, cost breakdown, session replay, MCP tracking, and subscription status.

§ 02b

How it works

01
npx ai-dev-lens

No install needed. First run asks your name, installs deps once (~30s), opens localhost:3000.

02
Adapter layer

7 tool-specific adapters read from each tool's local data directory — JSONL, SQLite, and JSON.

03
Unified schema

All adapters normalise to a common session/project/cost schema powering every page.

04
SWR polling

Dashboard auto-refreshes every 5–10 seconds. No background process, no file watchers.

§ 03

What I Learnt

  • 01

    Local-first is a genuine architecture constraint — reading from SQLite, JSONL, and JSON simultaneously across 7 tools required a unified adapter layer with a common schema.

  • 02

    SWR polling every 5–10 seconds without file watchers was a deliberate tradeoff: avoids background process complexity while still feeling live.

  • 03

    npx as the primary entry point is underrated — zero install friction means the tool actually gets used.

  • 04

    Building a 'Large Context Warning' feature surfaced a real pattern: context bloat is the #1 hidden cost driver in production Claude Code usage.

§ 04

Technologies Used

Next.js 16Next.js 16

Full-stack framework — API routes + React frontend, runs locally via npx

React 19 + TypeScriptReact 19 + TypeScript

Dashboard UI with strict types across all 7 tool adapters

Tailwind CSS 4 + shadcn/uiTailwind CSS 4 + shadcn/ui

Component system — consistent UI across 10+ pages

R3Recharts 3

All charts — heatmaps, stacked bars, area charts, doughnuts

better-sqlite3better-sqlite3

Read-only access to Codex and Cursor SQLite databases

SWRSWR

Client-side polling — data refreshes every 5–10s without file watchers

Next.js 16Next.js 16
React 19 + TypeScriptReact 19 + TypeScript
Tailwind CSS 4 + shadcn/uiTailwind CSS 4 + shadcn/ui
R3Recharts 3
better-sqlite3better-sqlite3
SWRSWR
← All workWork together ↗
← PreviousAI UniverseNext →azure-realtime-webrtc (npm)