Skip to content

Repository files navigation

Claude Dashboard

A web-based dashboard for managing multiple Claude Code CLI sessions with live terminal previews, status-colored animated borders, and inline interaction.

Claude Dashboard

Features

  • Live Terminal Preview — Real-time mini-terminal for each session via xterm.js
  • Status Detection — Automatic status monitoring with animated borders:
    • 🟢 Running (green, spinning) — Claude is working
    • 🔴 Needs Input (red, fast spin) — Permission prompt or question waiting
    • 🟡 Idle (yellow, slow spin) — Claude finished, ready for next task
    • Complete (white, static) — Back to shell
  • Grid View — Responsive grid layout with 6:4 aspect ratio cards
  • Full-Screen Mode — Click any card to expand into interactive terminal
  • Session Management — Create, rename, and close sessions from the browser
  • Open in Terminal — Double-click to open session in your preferred terminal app (Terminal.app, iTerm2, Warp, Alacritty, Kitty)
  • Password Protection — Optional server-side password with SHA256 hashing
  • CLI Launcherclaude-dash command for quick session management

Tech Stack

Layer Technology
Backend Rust (Axum 0.7, Tokio, portable-pty)
Frontend React 19 + TypeScript + Vite
Terminal xterm.js 5.5 + FitAddon
Styling Tailwind CSS 3
Real-time WebSocket
Sessions tmux

Getting Started

Prerequisites

Install & Run

git clone https://github.com/YangHungTW/ClaudeDashboard.git
cd ClaudeDashboard

# Install frontend dependencies
npm install

# Build frontend
npm run build

# Run server
cd backend-rust && cargo run

Open http://localhost:4000

CLI Usage

# Create a new session (opens zsh, you start claude yourself)
cli/claude-dash new my-project

# List sessions
cli/claude-dash list

# Kill a session
cli/claude-dash kill my-project

# Open dashboard in browser
cli/claude-dash open

# Start the server
cli/claude-dash server

Architecture

Browser (React Dashboard)
  ├── Grid of xterm.js mini-terminals
  ├── WebSocket (multiplexed by sessionId)
  └── Click → expand / double-click → open in terminal app
        │
        │ WebSocket
        ▼
Rust Server (Axum)
  ├── Multi-session PTY manager
  ├── Status detection (pane content hashing + pattern matching)
  ├── Session discovery (tmux prefix scanning)
  └── Auth API (optional password)
        │
        │ tmux CLI
        ▼
tmux sessions (claudedash-*)
  └── Each runs zsh → user starts claude

Configuration

  • Terminal App: Settings → choose your preferred terminal
  • Password: Settings → enable password protection (stored as SHA256 hash in ~/.claude-dashboard.json)

Credits

Forked from Webmux by nooesc (MIT License). The Rust/Axum backend and tmux PTY pipeline originate from Webmux. The frontend was rewritten from Vue to React, and significant features were added including multi-session management, status detection, and the grid dashboard UI.

License

MIT

About

Web dashboard for managing multiple Claude Code CLI sessions with live terminal previews and status detection. Forked from Webmux.

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages