feat!: web dashboard, analytics, and CLIProxy multi-account support

Author: kaitranntt

CLAUDE.md

@@ -40,6 +40,12 @@ bun run format       # Auto-fix formatting
 - `lib/` - Native shell scripts (bash, PowerShell)
 - `ui/` - React dashboard (Vite + React 19 + shadcn/ui)
 
+**Development server (ALWAYS use for testing UI changes):**
+```bash
+bun run dev          # Start dev server with hot reload (http://localhost:3000)
+```
+**IMPORTANT:** Use `bun run dev` at CCS root level for always up-to-date code. Do NOT use `ccs config` during development as it uses the globally installed (outdated) version.
+
 ## UI Quality Gates (React Dashboard)
 
 **The ui/ directory has IDENTICAL quality gates to the main project.**

README.md

@@ -12,10 +12,11 @@ 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)]()
+[![PoweredBy](https://img.shields.io/badge/PoweredBy-ClaudeKit-C15F3C?style=for-the-badge)](https://claudekit.cc?ref=HMNKXOHN)
+
 [![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)
 

VERSION

@@ -1 +1 @@
-5.11.0
+5.11.0-dev.8

bun.lock

@@ -4,6 +4,7 @@
     "": {
       "name": "@kaitranntt/ccs",
       "dependencies": {
+        "better-ccusage": "^1.2.6",
         "boxen": "^8.0.1",
         "chalk": "^5.6.2",
         "chokidar": "^5.0.0",
@@ -445,6 +446,8 @@
 
     "before-after-hook": ["[email protected]", "", {}, "sha512-q6tR3RPqIB1pMiTRMFcZwuG5T8vwp+vUvEG0vuI6B+Rikh5BfPp2fQ82c925FOs+b0lcFQ8CFrL+KbilfZFhOQ=="],
 
+    "better-ccusage": ["[email protected]", "", { "bin": { "better-ccusage": "dist/index.js" } }, "sha512-IZCYBX1kF0IfJ6ho9JMwLKn2o820WRiVGZ+2tVS2olODU5J7Np5mJ1j1i5HtazZPNo2S9wKU9C9iysc0f8Cjqw=="],
+
     "body-parser": ["[email protected]", "", { "dependencies": { "bytes": "~3.1.2", "content-type": "~1.0.5", "debug": "2.6.9", "depd": "2.0.0", "destroy": "~1.2.0", "http-errors": "~2.0.1", "iconv-lite": "~0.4.24", "on-finished": "~2.4.1", "qs": "~6.14.0", "raw-body": "~2.5.3", "type-is": "~1.6.18", "unpipe": "~1.0.0" } }, "sha512-ZTgYYLMOXY9qKU/57FAo8F+HA2dGX7bqGc71txDRC1rS4frdFI5R7NhluHxH6M0YItAP0sHB4uqAOcYKxO6uGA=="],
 
     "bottleneck": ["[email protected]", "", {}, "sha512-VHiNCbI1lKdl44tGrhNfU3lup0Tj/ZBMJB5/2ZbNXRCPuRCO7ed2mgcK4r17y+KB2EfuYuRaVlwNbAeaWGSpbw=="],

docs/project-roadmap.md

@@ -440,6 +440,7 @@ src/types/
    - Intelligent profile selection algorithms
    - Cost estimation with typed calculation models
    - Performance optimization through type-aware caching
+   - Recently implemented significant UI improvements for analytics dashboard, enhancing data presentation.
 
 2. **Enhanced Session Management**
    - Type-safe session persistence with serialization
@@ -584,21 +585,29 @@ src/types/
 - **User Experience**: One-command channel switching without data loss
 - **Backward Compatibility**: Zero breaking changes, existing workflows preserved
 
-### Version 4.5.1 - UI Layout Improvements
+### Version 4.5.1 - UI Quality Gate Fixes & Layout Improvements
 **Release Date**: 2025-12-08
 
 #### UI Fixes & Improvements
+- ✅ **Auto-formatting**: 31 UI files auto-formatted for consistent styling.
+- ✅ **Fast Refresh Exports**: Resolved `react-refresh/only-export-components` by extracting `buttonVariants`, `useSidebar`, and `useWebSocketContext` to separate files.
+- ✅ **React Hooks Issues**: Fixed `react-hooks/purity` (`Math.random()` in `useMemo` for `sidebar.tsx`) and `react-hooks/set-state-in-effect` (`use-theme.ts`, `settings.tsx`).
+- ✅ **useWebSocket Hook Restructure**: Addressed `react-hooks/immutability` errors and dependency array warnings in `use-websocket.ts`.
+- ✅ **TypeScript Strict Mode**: Implemented null-check for `document.getElementById('root')` in `src/main.tsx` for strict mode compliance.
+- ✅ **Duplicate Directory Removal**: Cleaned up extraneous `ui/@/` directory.
 - ✅ **CLIProxy Card Padding**: Removed excessive padding from CLIProxy cards for better visual integration.
-- ✅ **CLIProxy Dashboard Layout**: Improved overall layout and styling of the CLIProxy dashboard for enhanced user experience.
-- ✅ **Dropdown Styling**: Refined dropdown component styling for consistency and readability.
+- ✅ **CLIProxy Dashboard Layout**: Improved overall layout and styling of the CLIProxy dashboard.
+- ✅ **Dropdown Styling**: Refined dropdown component styling.
+- ✅ **Model Usage Card**: Corrected icon display and refined donut chart styling.
 
 #### Technical Improvements
 - **Improved UI Responsiveness**: Adjustments ensure better display across various screen sizes.
 - **Enhanced User Experience**: Minor visual tweaks lead to a more polished and intuitive interface.
 
 #### Validation Results
-- **UI Rendering**: ✅ All UI components render correctly after layout adjustments.
+- **UI Rendering**: ✅ All UI components render correctly after adjustments and fixes.
 - **Functional Impact**: ✅ No regressions introduced, core functionality remains stable.
+- **Code Quality**: ✅ All ESLint and TypeScript quality gates passed after fixes.
 
 ---
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaitranntt/ccs",
-  "version": "5.11.0",
+  "version": "5.11.0-dev.8",
   "description": "Claude Code Switch - Instant profile switching between Claude Sonnet 4.5 and GLM 4.6",
   "keywords": [
     "cli",
@@ -79,6 +79,7 @@
     "postinstall": "node scripts/postinstall.js"
   },
   "dependencies": {
+    "better-ccusage": "^1.2.6",
     "boxen": "^8.0.1",
     "chalk": "^5.6.2",
     "chokidar": "^5.0.0",

src/cliproxy/model-catalog.ts

@@ -48,33 +48,27 @@ export const MODEL_CATALOG: Partial<Record<CLIProxyProvider, ProviderCatalog>> =
   agy: {
     provider: 'agy',
     displayName: 'Antigravity',
-    defaultModel: 'gemini-3-pro-preview',
+    defaultModel: 'gemini-claude-opus-4-5-thinking',
     models: [
-      {
-        id: 'gemini-claude-sonnet-4-5',
-        name: 'Claude Sonnet 4.5',
-        description: 'Fast and capable',
-      },
-      {
-        id: 'gemini-3-pro-preview',
-        name: 'Gemini 3 Pro',
-        description: 'Google latest model via Antigravity',
-      },
       {
         id: 'gemini-claude-opus-4-5-thinking',
         name: 'Claude Opus 4.5 Thinking',
         description: 'Most capable, extended thinking',
-        deprecated: true,
-        deprecationReason:
-          'Thinking models are deprecated due to compatibility issues with Antigravity',
       },
       {
         id: 'gemini-claude-sonnet-4-5-thinking',
         name: 'Claude Sonnet 4.5 Thinking',
         description: 'Balanced with extended thinking',
-        deprecated: true,
-        deprecationReason:
-          'Thinking models are deprecated due to compatibility issues with Antigravity',
+      },
+      {
+        id: 'gemini-claude-sonnet-4-5',
+        name: 'Claude Sonnet 4.5',
+        description: 'Fast and capable',
+      },
+      {
+        id: 'gemini-3-pro-preview',
+        name: 'Gemini 3 Pro',
+        description: 'Google latest model via Antigravity',
       },
     ],
   },

src/commands/update-command.ts

@@ -6,11 +6,10 @@
  */
 
 import { spawn } from 'child_process';
-import * as path from 'path';
-import * as fs from 'fs';
 import { colored } from '../utils/helpers';
 import { detectInstallationMethod, detectPackageManager } from '../utils/package-manager-detector';
 import { compareVersionsWithPrerelease } from '../utils/update-checker';
+import { getVersion } from '../utils/version';
 
 /**
  * Options for the update command
@@ -20,10 +19,8 @@ export interface UpdateOptions {
   beta?: boolean;
 }
 
-// Version (sync with package.json)
-const CCS_VERSION = JSON.parse(
-  fs.readFileSync(path.join(__dirname, '../../package.json'), 'utf8')
-).version;
+// Version (from centralized utility)
+const CCS_VERSION = getVersion();
 
 /**
  * Handle the update command
@@ -169,19 +166,17 @@ function handleCheckFailed(
  * Handle no update available
  */
 function handleNoUpdate(reason: string | undefined): void {
-  const CCS_VERSION_LOCAL = JSON.parse(
-    fs.readFileSync(path.join(__dirname, '../../package.json'), 'utf8')
-  ).version;
+  const version = getVersion();
 
-  let message = `You are already on the latest version (${CCS_VERSION_LOCAL})`;
+  let message = `You are already on the latest version (${version})`;
 
   switch (reason) {
     case 'dismissed':
-      message = `Update dismissed. You are on version ${CCS_VERSION_LOCAL}`;
+      message = `Update dismissed. You are on version ${version}`;
       console.log(colored(`[i] ${message}`, 'yellow'));
       break;
     case 'cached':
-      message = `No updates available (cached result). You are on version ${CCS_VERSION_LOCAL}`;
+      message = `No updates available (cached result). You are on version ${version}`;
       console.log(colored(`[i] ${message}`, 'cyan'));
       break;
     default:

src/commands/version-command.ts

@@ -9,17 +9,13 @@ import * as fs from 'fs';
 import * as os from 'os';
 import { colored } from '../utils/helpers';
 import { getConfigPath } from '../utils/config-manager';
-
-// Get version from package.json
-const CCS_VERSION = JSON.parse(
-  fs.readFileSync(path.join(__dirname, '../../package.json'), 'utf8')
-).version;
+import { getVersion } from '../utils/version';
 
 /**
  * Handle version command
  */
 export function handleVersionCommand(): void {
-  console.log(colored(`CCS (Claude Code Switch) v${CCS_VERSION}`, 'bold'));
+  console.log(colored(`CCS (Claude Code Switch) v${getVersion()}`, 'bold'));
   console.log('');
 
   console.log(colored('Installation:', 'cyan'));

src/types/external.d.ts

@@ -2,6 +2,81 @@
  * Type shims for incomplete external dependencies
  */
 
+// better-ccusage types (package has JS exports but incomplete TS subpath support)
+declare module 'better-ccusage/data-loader' {
+  export interface ModelBreakdown {
+    modelName: string;
+    inputTokens: number;
+    outputTokens: number;
+    cacheCreationTokens: number;
+    cacheReadTokens: number;
+    cost: number;
+  }
+
+  export interface DailyUsage {
+    date: string;
+    source: string;
+    inputTokens: number;
+    outputTokens: number;
+    cacheCreationTokens: number;
+    cacheReadTokens: number;
+    cost: number;
+    totalCost: number;
+    modelsUsed: string[];
+    modelBreakdowns: ModelBreakdown[];
+  }
+
+  export interface MonthlyUsage {
+    month: string;
+    source: string;
+    inputTokens: number;
+    outputTokens: number;
+    cacheCreationTokens: number;
+    cacheReadTokens: number;
+    totalCost: number;
+    modelsUsed: string[];
+    modelBreakdowns: ModelBreakdown[];
+  }
+
+  export interface SessionUsage {
+    sessionId: string;
+    projectPath: string;
+    inputTokens: number;
+    outputTokens: number;
+    cacheCreationTokens: number;
+    cacheReadTokens: number;
+    cost: number;
+    totalCost: number;
+    lastActivity: string;
+    versions: string[];
+    modelsUsed: string[];
+    modelBreakdowns: ModelBreakdown[];
+    source: string;
+  }
+
+  export interface DataLoaderOptions {
+    mode?: 'calculate' | 'cached';
+    claudePaths?: string[];
+  }
+
+  export function loadDailyUsageData(options?: DataLoaderOptions): Promise<DailyUsage[]>;
+  export function loadMonthlyUsageData(options?: DataLoaderOptions): Promise<MonthlyUsage[]>;
+  export function loadSessionData(options?: DataLoaderOptions): Promise<SessionUsage[]>;
+}
+
+declare module 'better-ccusage/calculate-cost' {
+  export interface Totals {
+    inputTokens: number;
+    outputTokens: number;
+    cacheCreationTokens: number;
+    cacheReadTokens: number;
+    costUSD: number;
+  }
+
+  export function calculateTotals(entries: unknown[]): Totals;
+  export function getTotalTokens(entries: unknown[]): number;
+}
+
 declare module 'cli-table3' {
   interface TableOptions {
     head?: string[];