Claude Code UI

Claude Code Session Tracker

A real-time dashboard for monitoring Claude Code sessions across multiple projects. See what Claude is working on, which sessions need approval, and track PR/CI status.

Features

• Real-time updates via Durable Streams
• Kanban board showing sessions by status (Working, Needs Approval, Waiting, Idle)
• AI-powered summaries of session activity using Claude Sonnet
• PR & CI tracking - see associated PRs and their CI status
• Multi-repo support - sessions grouped by GitHub repository

https://github.com/user-attachments/assets/877a43af-25f9-4751-88eb-24e7bbda68da

Architecture

┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐
│  Claude Code    │     │     Daemon      │     │       UI        │
│   Sessions      │────▶│   (Watcher)     │────▶│   (React)       │
│  ~/.claude/     │     │                 │     │                 │
│   projects/     │     │  Durable Stream │     │  TanStack DB    │
└─────────────────┘     └─────────────────┘     └─────────────────┘

Daemon (`packages/daemon`)

Watches `~/.claude/projects/` for session log changes and:

• Parses JSONL log files incrementally
• Derives session status using XState state machine
• Generates AI summaries via Claude Sonnet API
• Detects git branches and polls for PR/CI status
• Publishes state updates to Durable Streams

UI (`packages/ui`)

React app using TanStack Router and Radix UI:

• Subscribes to Durable Streams for real-time updates
• Groups sessions by GitHub repository
• Shows session cards with goal, summary, branch/PR info
• Hover cards with recent output preview

Session Status State Machine

The daemon uses an XState state machine to determine session status:

                    ┌─────────────────┐
                    │      idle       │
                    └────────┬────────┘
                             │ USER_PROMPT
                             ▼
┌─────────────────┐  TOOL_RESULT  ┌─────────────────┐

...