🖥️ Code Proxy · Admin Dashboard

The official frontend management panel for CliRelay (CLI Proxy API)

Monitor, manage, and configure your CLI proxy channels — all from a modern web UI.

---

✨ Overview

Code Proxy is the official web-based admin panel for CliRelay — a proxy server that wraps Gemini CLI, Antigravity, ChatGPT Codex, Claude Code, Qwen Code, Kiro, and iFlow as OpenAI/Gemini/Claude compatible API services.

This dashboard provides a complete management interface for your AI proxy infrastructure:

• 📊 Real-time Dashboard — KPI cards, health score, system monitoring, channel latency
• 📈 Advanced Monitoring Center — Model usage distribution, daily trends, hourly heatmaps with API Key filtering
• 📋 Request Logs — Full request history with token counts, latency, status, and clickable error details
• 💬 Message Viewer — Beautiful Markdown-rendered input/output content with XML tag collapsible sections
• 🔗 AI Provider Management — Multi-tab provider config (Gemini, Claude, Codex, Vertex, OpenAI, Ampcode) with enable/disable toggles
• 🗂️ Auth File Workspace — Saved OAuth/auth files with model inspection, prefix/proxy controls, and download actions
• 🧪 OAuth Workbench — Provider-specific authorization launcher with remote callback submission
• 🔑 API Key Management — Create, edit, delete keys with quota & rate limit controls
• 🔐 OAuth Login Management — Manage OAuth authentication credentials
• 📦 Config Panel — Visual YAML configuration editor with import/export
• 🎯 Model Management — Model alias mapping and routing rules
• 📊 Quota Management — Per-key usage quota tracking and limits
• 🔍 API Key Lookup — Public self-service page for users to check their own usage statistics and request logs
• 💲 Model Pricing — Built-in pricing table for quota cost accounting and per-model cost controls
• ℹ️ System Info — Connection info grid, version/build metadata, model listing with colorful vendor icons and click-to-copy
• 🪵 Live Logs — Streaming log viewer with search, download, clear, and runtime filter controls
• 🌙 Dark Mode — Full dark theme with smooth transitions
• 🌐 i18n Ready — Internationalization support (Chinese, English)

📸 Screenshots

The gallery below uses the latest 13 management-panel screenshots and maps each screen to its operational role.

Screen	What it shows
Dashboard Overview	KPI cards, health score, live system monitor, throughput, resource usage, latency ranking
Monitor Center	Request KPIs, model distribution, daily token trends, API Key usage share
Request Logs	Multi-filter log table, time range selector, status/channel/model filtering
Request Details	Input/output viewer with Markdown rendering and instruction block inspection
AI Providers	Multi-provider tabs, per-channel success rate, model tags, enable/edit/delete controls
Auth Files	Saved auth file inventory with model inspection, proxy prefix controls, and download
OAuth Login	Authorization launcher plus remote callback submission workflow
API Keys	Keys, quotas, RPM/TPM, model permissions, channel bindings, quick actions
Models	Pricing table for input/output/cache cost accounting
Quota	Remaining refresh time and current usage bars for provider-specific quotas
Config	YAML source editor with search and runtime mode switching
System	API base, management endpoint, version metadata, API Key lookup link, model tags
Logs	Live log console with search, download, clear, and toggleable filters

1. Dashboard Overview

Dashboard — KPI cards, health score, live system monitor, throughput, storage, and channel latency ranking.

2. Monitor Center

Monitor Center (Chinese locale) — request summary, model distribution, daily token/request trends, and API Key usage share.

3. Request Logs

Request Logs — time-range switcher, multi-filter toolbar, high-density table, and success metrics at a glance.

4. Request Details Viewer

Request Details — input/output tabs, Markdown rendering, collapsible sections, and copy/export helpers.

5. AI Providers

AI Providers — provider tabs, per-channel success/failure stats, model badges, latency bars, and CRUD actions.

6. Auth Files

Auth Files — card-based inventory for saved credentials with model inspection, rename, proxy-prefix, download, and delete actions.

7. OAuth Login Workbench

OAuth Login — provider-specific authorization launcher plus remote callback URL submission workflow.

8. API Keys Management

API Keys — quotas, RPM/TPM limits, model permissions, channel bindings, and quick analytics/edit actions.

9. Model Pricing

Models — built-in pricing catalog for input/output/cache cost calculation and quota accounting.

10. Quota Management

Quota — remaining refresh time and progress bars for Codex, Gemini CLI, Kiro, and other provider-specific quotas.

11. Config Editor

Config — source editor mode with YAML search, keyboard-friendly navigation, and runtime config switching.

12. System Info

System — API base, management endpoint, version/build metadata, API Key lookup entry, and vendor-colored model tags.

13. Live Logs

Logs — live stream viewer with keyword search, hide-management toggle, download, clear, and jump-to-latest controls.

🧩 Feature Details

📊 Dashboard

Module	Description
KPI Cards	Total requests, success rate, token consumption, failed request count (7-day / 30-day)
Health Score	Real-time circular gauge (0–100) evaluating overall system health
System Monitor	WebSocket-powered live stats: uptime, goroutines, CPU, memory, network I/O, DB size
Channel Latency	Top 5 channel average latency with visual bar indicators
Resource Bars	System CPU, memory, service CPU, memory, database size — color-coded status

📈 Monitor Center

Module	Description
KPI Summary	Total requests, success rate, total/output tokens with time range selection
Model Distribution	Interactive donut chart showing Top 10 model usage by request count or token
Daily Trends	Dual-axis chart with input/output tokens (bar) and request count (line) over time
Hourly Heatmap	Stacked bar chart showing per-model hourly request distribution (6h / 12h / 24h)
API Key Filter	Filter all metrics by specific API Key prefix

📋 Request Logs

Module	Description
Virtual Table	High-performance virtual scrolling for 10,000+ log entries
Multi-Filter	Filter by Key, model, status (success/fail), with time range selection
Token Details	Click on input/output tokens to view full message content
Error Modal	Click on "失败" (Failed) status to view error details in a red-themed modal
Message Viewer	Markdown rendering with syntax highlighting, XML tag detection, and role-based collapsible blocks

🔗 AI Providers

Module	Description
Multi-Tab	Gemini, Claude, Codex, Vertex, OpenAI Compatible, Ampcode tabs
Channel Cards	Name, masked API key, base URL, model count, success/fail stats, latency bar
CRUD	Add, edit, delete channels with full configuration (proxyUrl, headers, model aliases, excluded models)
Toggle	Enable/disable individual channels with instant visual feedback

🔍 API Key Lookup

Module	Description
Self-Service	Public page (no login required) for end users to check their API Key usage
Usage Stats	Per-key KPI cards, model distribution chart, daily trend chart
Request Logs	Per-key request history with detailed virtual table and source channel info

🛠️ Tech Stack

Category	Technology
Framework	React 19.2 + TypeScript 5.9
Build Tool	Vite 7.3
Package Manager	Bun 1.2
Styling	Tailwind CSS v4
State Management	Zustand
Charts	Apache ECharts
Routing	React Router v7
HTTP	Axios + WebSocket (real-time monitoring)
Icons	Lucide React + Custom vendor SVGs (14 vendors)
Linting	oxlint + oxfmt

🚀 Getting Started

Prerequisites

• Bun ≥ 1.2 (or Node.js ≥ 18)
• A running CliRelay backend instance

Install & Run

# Clone the repository
git clone https://github.com/kittors/codeProxy.git
cd codeProxy

# Install dependencies
bun install

# Start dev server
bun run dev

The dashboard will be available at http://localhost:5173/

Build for Production

# Type-check & build
bun run build

# Preview production build
bun run preview

📁 Project Structure

src/
├── app/                 # Routing & auth guards
├── assets/icons/        # Vendor SVG icons (Claude, OpenAI, Gemini, etc.)
├── components/ui/       # Inline SVG icon components
├── i18n/                # i18next locales (en, zh-CN)
├── lib/
│   ├── constants/       # App-wide constants
│   └── http/            # Axios client, API layer, WebSocket
├── modules/
│   ├── auth/            # Authentication provider & session
│   ├── apikey-lookup/   # Public API Key usage lookup
│   ├── config/          # Visual config editor (YAML)
│   ├── dashboard/       # Dashboard overview + system monitor
│   ├── login/           # Login page
│   ├── monitor/         # Monitoring center (charts, logs, modals)
│   ├── oauth/           # OAuth management
│   ├── providers/       # AI provider channel management
│   ├── system/          # System info + model listing
│   ├── ui/              # Shared UI (AppShell, Button, Table, Tabs, etc.)
│   └── usage/           # Usage statistics & snapshot import/export
└── styles/              # Global styles & theme tokens

🔌 API Integration

This dashboard communicates with the CliRelay backend via the Management API:

Endpoint	Method	Description
/v0/management/config	GET	Verify login & fetch configuration
/v0/management/usage	GET	Retrieve usage statistics
/v0/management/usage/logs	GET	Paginated request log history
/v0/management/usage/log-content	GET	Full message content (input/output)
/v0/management/usage/dashboard-summary	GET	Dashboard KPI data
/v0/management/usage/model-distribution	GET	Model usage distribution
/v0/management/usage/daily-trends	GET	Daily token/request trends
/v0/management/usage/hourly-model	GET	Hourly per-model request data
/v0/management/openai-compatibility	GET/POST/DELETE	OpenAI channel CRUD
/v0/management/gemini-api-key	GET/POST/DELETE	Gemini channel CRUD
/v0/management/claude-api-key	GET/POST/DELETE	Claude channel CRUD
/v0/management/codex-api-key	GET/POST/DELETE	Codex channel CRUD
/v0/management/vertex-api-key	GET/POST/DELETE	Vertex channel CRUD
/v0/management/system-stats	WebSocket	Real-time system monitoring

Note: The API base is automatically normalized to {apiBase}/v0/management

For full backend API documentation, see the CliRelay Management API.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 Related Projects

• CliRelay — The backend proxy server (Go)
• CliRelay Guides — Official documentation

📝 License

This project is open source. See the LICENSE file for details.

---

Made with ❤️ for the CliRelay community