KyleAMathews

Claude Code UI — Design skill for Claude Code

Design community intermediate

A real-time dashboard for monitoring Claude Code sessions across multiple projects.

How to install Claude Code UI

This entry records only its repository, not the path inside it, so there is no exact command to give. Open KyleAMathews/claude-code-ui and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Claude Code UI does

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.

Alternatives in Design

Site — Crawl a whole site and synthesize ONE canonical design system across all pages — unified tokens, coverage map 3.6k ★
Companion — 2,200+ Web & mobile UI for Claude Code & Codex 2.2k ★
Clui Cc — A lightweight, transparent desktop overlay for Claude Code on macOS 956 ★

README

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  ┌─────────────────┐

...