cc-dashboard

# CC Dashboard Claude Code's web-based visualization panel - a one-stop management platform for memories, tasks, skills, MCP, plugins, chat sessions, and more.     --- ## Feature Overview | Module | Description | |------|------| | **Overview** | Statistics panel, memory/task charts, 7-day activity trends, project distribution | | **Projects** | Left-side project list, each project can chat independently (CC native), view memories and skills | | **Chat** | Streaming AI conversation, multi-tab + split-screen panel, supports CC native mode and API mode | | **Memories** | Browse and edit Claude Code's project memory files, support manual creation and deletion | | **Tasks** | Kanban + list dual views, scheduled tasks, batch operations, inline execution | | **Sessions** | All Claude Code session timelines, support search, favorites, and tags | | **Skills** | Browse Markdown skill files, support editing/previewing, distinguish between global, project, and custom sources | | **MCP** | Manage MCP server configuration, health checks, **market search and one-click installation** | | **Plugins** | Installed plugin management, **NPM market search and one-click installation** | | **Agent** | Agent tracking, tree/topology graph dual views | | **Settings** | Edit settings.json / settings.local.json | | **Search** | Ctrl+K global search for memories, tasks, skills | | **Commands** | Ctrl+P command panel for quick navigation | ## Interface Preview | Project Chat | Overview | |----------|------| |  |  | | Chat | Task Kanban | |------|----------| |  |  | | MCP Management | Session Timeline | |----------|------------| |  |  | | Skill Management | Theme Switching | |----------|----------| |  |  | ## Features - Multiple IDEA-style themes (Dark Space, Dracula, Nordic, One Dark, Monokai, Tokyo Night, Daylight, Bright) - Bilingual interface (English and Chinese) - Prompt template library, one-click fill-in - Conversation export to Markdown files - Session favorites and tag management - MCP/plugin market direct search and installation, no manual configuration required ## Quick Start ```bash # Clone and install git clone https://github.com/YOUR_USER/cc-dashboard.git cd cc-dashboard npm install # Start development server → http://localhost:5173 npm run dev ``` > **Prerequisites:** Node.js 18+, [Claude Code](https://claude.ai/code) installed (`~/.claude/` directory exists). ## Principles The panel directly reads the local `~/.claude/` directory, **does not** modify Claude Code internal files (except for explicit operations like MCP configuration and plugin installation). ``` ~/.claude/ ├── projects/ → Memories, .mcp.json, session JSONL ├── tasks/ → Task definitions ├── skills/ → Custom skills ├── plugins/ → Installed plugins + market ├── chats/ → Saved chat sessions ├── settings.json └── .mcp.json → Global MCP configuration ``` The backend API is embedded as a [Vite middleware](vite.config.ts), no separate server required. ## MCP Market 1. Go to **MCP** → **Market** tab 2. Search for keywords (e.g., "filesystem", "git", "database") 3. Click **Install**, optional custom server name 4. Automatically write to `.mcp.json`, restart Claude Code to take effect ## Plugin Market 1. Go to **Plugins** → **Market** tab 2. Search for keywords 3. Click **Install**, automatically npm install to `~/.claude/plugins/` ## Environment Variables | Variable | Purpose | |------|------| | `CC_MCP_PATHS` | Additional project paths for scanning `.mcp.json` (colon-separated) | ## Production Build ```bash npm run build npm run preview # Preview build product → http://localhost:4173 ``` ## Tech Stack - **React 19** + TypeScript - **Vite 6** + Tailwind CSS 4 - **Recharts** — Charts - **Lucide React** — Icons - **React Router 7** — Routing - **React Markdown** + remark-gfm — Markdown rendering ## License MIT