Merge pull request #65 from kaitranntt/dev

feat(web-dashboard): add complete dashboard ui and improve cliproxy functionality

Author: kaitranntt

.github/workflows/dev-release.yml

@@ -32,11 +32,13 @@ jobs:
           registry-url: 'https://registry.npmjs.org'
 
       - name: Install dependencies
-        run: bun install --frozen-lockfile
+        run: |
+          bun install --frozen-lockfile
+          cd ui && bun install --frozen-lockfile
 
       - name: Build and validate
         run: |
-          bun run build
+          bun run build:all
           bun run validate
 
       - name: Bump dev version

.github/workflows/release.yml

@@ -34,10 +34,12 @@ jobs:
           bun-version: latest
 
       - name: Install dependencies
-        run: bun install --frozen-lockfile
+        run: |
+          bun install --frozen-lockfile
+          cd ui && bun install --frozen-lockfile
 
       - name: Build package
-        run: bun run build
+        run: bun run build:all
 
       - name: Validate (typecheck + lint + tests)
         run: bun run validate

.gitignore

@@ -27,8 +27,9 @@ yarn-error.log*
 dist/
 *.tsbuildinfo
 
-# Package lock files (keep package-lock.json but ignore others)
+# Package lock files (use bun.lock only)
 yarn.lock
 pnpm-lock.yaml
+package-lock.json
 
 .claude/active-plan

.husky/pre-commit

@@ -1,2 +1,8 @@
 # Run validation before commit (typecheck + lint + format + tests)
 bun run validate
+
+# Validate UI if changes detected
+if git diff --cached --name-only | grep -q "^ui/"; then
+  echo "[i] UI changes detected, running ui:validate..."
+  bun run ui:validate
+fi

CLAUDE.md

@@ -38,6 +38,49 @@ bun run format       # Auto-fix formatting
 - `src/` - TypeScript source (55 modules)
 - `dist/` - Compiled JavaScript (npm package)
 - `lib/` - Native shell scripts (bash, PowerShell)
+- `ui/` - React dashboard (Vite + React 19 + shadcn/ui)
+
+## UI Quality Gates (React Dashboard)
+
+**The ui/ directory has IDENTICAL quality gates to the main project.**
+
+**Package Manager: bun** (same as root)
+```bash
+cd ui
+bun install          # Install dependencies
+bun run build        # TypeScript + Vite build
+bun run validate     # Full validation: typecheck + lint:fix + format:check
+```
+
+**Fix issues before committing:**
+```bash
+cd ui
+bun run typecheck    # Type check only
+bun run lint:fix     # Auto-fix lint issues
+bun run format       # Auto-fix formatting
+bun run format:check # Verify formatting (no changes)
+```
+
+**Linting rules (ui/eslint.config.js) - ALL errors:**
+- `@typescript-eslint/no-unused-vars` - error (ignore `_` prefix)
+- `@typescript-eslint/no-explicit-any` - error
+- `@typescript-eslint/no-non-null-assertion` - error
+- `prefer-const`, `no-var`, `eqeqeq` - error
+- `react-hooks/exhaustive-deps` - warning
+- `react-refresh/only-export-components` - error
+
+**Type safety (ui/tsconfig.app.json):**
+- `strict: true` with `verbatimModuleSyntax` enabled
+- `noUnusedLocals`, `noUnusedParameters` - enabled
+- Type-only imports required: `import type { X }` for types
+
+**UI file structure:**
+- `ui/src/` - React components, hooks, pages
+- `ui/src/components/ui/` - shadcn/ui components
+- `ui/src/hooks/` - Custom React hooks
+- `ui/src/pages/` - Route pages
+- `ui/src/providers/` - Context providers
+- `dist/ui/` - Built bundle (served by Express)
 
 **Linting rules (eslint.config.mjs) - ALL errors:**
 - `@typescript-eslint/no-unused-vars` - error (ignore `_` prefix)

README.md

@@ -7,12 +7,14 @@
 ### One command, zero downtime, multiple accounts
 
 **Switch between multiple Claude accounts, GLM, and Kimi instantly.**<br>
-Stop hitting rate limits. Keep working continuously.
-
+Stop hitting rate limits. Keep working continuously.<br>
+Features a modern React 19 dashboard with real-time updates.
 
 [![License](https://img.shields.io/badge/license-MIT-C15F3C?style=for-the-badge)](LICENSE)
 [![Platform](https://img.shields.io/badge/platform-macOS%20%7C%20Linux%20%7C%20Windows-lightgrey?style=for-the-badge)]()
 [![npm](https://img.shields.io/npm/v/@kaitranntt/ccs?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@kaitranntt/ccs)
+[![React](https://img.shields.io/badge/React-19-61DAFB?style=for-the-badge&logo=react)](https://react.dev/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-100%25-3178C6?style=for-the-badge&logo=typescript)](https://www.typescriptlang.org/)
 [![PoweredBy](https://img.shields.io/badge/PoweredBy-ClaudeKit-C15F3C?style=for-the-badge)](https://claudekit.cc?ref=HMNKXOHN)
 
 **Languages**: [English](README.md) | [Tiếng Việt](docs/vi/README.md) | [日本語](docs/ja/README.md)
@@ -459,6 +461,32 @@ Settings file format (`~/.ccs/gemini-flash.settings.json`):
 
 <br>
 
+## Web Dashboard
+
+CCS includes a modern React 19 dashboard for visual profile management and real-time monitoring:
+
+```bash
+# Start the web dashboard (auto-detects available port)
+ccs config
+
+# Or specify a port
+ccs config --port 3000
+
+# Access at http://localhost:PORT (shown in output)
+```
+
+**Dashboard Features**:
+- 🎨 **Modern UI**: Built with React 19, TypeScript, and shadcn/ui
+- 📊 **Real-time Updates**: WebSocket integration for live status
+- ⚙️ **Profile Management**: Visual configuration of all profiles
+- 🔍 **Health Monitoring**: System diagnostics and metrics
+- 🌙 **Dark Mode**: Eye-friendly theme switching
+- 📱 **Responsive**: Works on desktop and mobile
+
+### Dashboard Screenshots
+
+*(Add screenshots here when available)*
+
 ## Usage Examples
 
 ### Basic Switching

VERSION

@@ -1 +1 @@
-5.9.0
+5.9.0-dev.7