Specter

A local observability dashboard for Claude Code

Specter reads your ~/.claude/ directory and renders your sessions, projects, tasks, token usage, and plans as a beautiful web UI — with zero configuration, no database, and no telemetry.

---

What it does

Claude Code stores a wealth of data locally — every session transcript, tool call, token count, task, and plan. Specter surfaces all of it in one place.

Route	What you see
/dashboard	KPI cards, 30-day activity chart, model usage breakdown, hour-of-day heatmap, recent sessions
/sessions	Sortable, filterable table of all sessions with cost, duration, and token counts
/sessions/:id	Full transcript, tool call breakdown, and subagent timeline for any session
/projects	Grid of projects with session counts, tool calls, open tasks, and cost
/projects/:slug	Sessions and tasks scoped to a single project
/tasks	All tasks grouped by project — Active, Completed, and All tabs
/usage	Token KPIs, per-model stacked timeline, cache efficiency donut, and tool frequency chart
/plans	Sidebar list of all plan files with a full markdown viewer

---

Screenshots

Dashboard — KPI cards, 30-day activity, model breakdown, hour heatmap

Sessions — sortable, filterable table across all projects

Session detail — full transcript, tool calls, subagent timeline

Projects — grid view with session counts, tool calls, and open tasks

Project detail — sessions and tasks scoped to one project

Usage — token KPIs, stacked timeline, cache efficiency, tool frequency

Plans — markdown plan viewer with syntax highlighting

---

How it works

Specter is a read-only Next.js app. It never writes to disk or sends data anywhere.

At request time, React Server Components read directly from your ~/.claude/ filesystem:

~/.claude/
├── stats-cache.json                    ← aggregated daily stats
├── projects/{slug}/{sessionId}.jsonl   ← session transcripts
├── usage-data/session-meta/            ← session metadata
├── usage-data/facets/                  ← session outcomes & goals
├── tasks/{projectId}/{taskId}.json     ← tasks
└── plans/                              ← markdown plan files

There is no database, no API, and no background process. All reads use React.cache() for per-request deduplication and Promise.all() for parallelism.

---

Getting started

Requirements: Node.js 20+, pnpm, Claude Code installed (so ~/.claude/ exists)

# 1. Clone
git clone https://github.com/alizenhom/Specter
cd Specter

# 2. Install dependencies
pnpm install

# 3. Start the dev server
pnpm dev

Open http://localhost:3000. That's it.

Specter reads ~/.claude/ by default. If your Claude data lives elsewhere, update CLAUDE_DIR in lib/constants.ts.

---

Tech stack

Layer	Choice
Framework	Next.js 16 (App Router, React Server Components)
UI	React 19, Tailwind CSS v4, shadcn/ui (New York), lucide-react
Charts	Recharts
Markdown	react-markdown + remark-gfm
Language	TypeScript 5
Package manager	pnpm

---

Project structure

├── app/                  # Next.js routes (RSC pages + loading states)
├── components/           # UI components (charts, tables, cards, sidebar)
│   └── ui/               # shadcn/ui primitives
├── lib/
│   ├── claude-data.ts    # All filesystem readers (server-only)
│   ├── types.ts          # TypeScript interfaces for ~/.claude schemas
│   ├── constants.ts      # CLAUDE_DIR and PATHS
│   └── format.ts         # Formatting utilities
└── hooks/                # React hooks

---

Contributing

Contributions are very welcome — bug fixes, new views, better charts, or anything that makes Specter more useful.

1. Fork the repo and create a branch
2. Make your changes (pnpm dev to test locally)
3. Open a pull request with a clear description

Please keep PRs focused. One feature or fix per PR makes review much faster.

---

License

MIT — see LICENSE.

---

_{Built for the Claude Code community. Not affiliated with Anthropic.}