Login & UX: Auto-detects the current address (manual override/reset supported), encrypted auto-login, language/theme toggles, responsive layout with mobile sidebar.
Basic Settings: Debug, proxy URL, request retries, quota fallback (auto-switch project/preview models), usage-statistics toggle, request logging & logging-to-file switches, WebSocket /ws/* auth switch.
Keys & Providers: Manage proxy auth keys, Gemini/Codex/Claude configs, OpenAI-compatible providers (custom base URLs/headers/proxy/model aliases), Vertex AI credential import from service-account JSON with optional location.
Auth Files & OAuth: Upload/download/search/paginate JSON credentials; type filters (Qwen/Gemini/GeminiCLI/AIStudio/Claude/Codex/Antigravity/iFlow/Vertex/Empty); delete-all; OAuth/Device flows for Codex, Anthropic (Claude), Antigravity (Google), Gemini CLI (optional project), Qwen; iFlow OAuth and cookie login.
Logs: Live viewer with auto-refresh/incremental updates, download and clear; section appears when logging-to-file is enabled.
Usage Analytics: Overview cards, hourly/daily toggles, up to three model lines per chart, per-API stats table (Chart.js).
Config Management: In-browser CodeMirror YAML editor for /config.yaml with reload/save, syntax highlighting, and status feedback.
System Info & Versioning: Connection/config cache status, last refresh time, server version/build date, and UI version in the footer.
Security & Preferences: Masked secrets, secure local storage, persistent theme/language/sidebar state, real-time status feedback.

How to Use

After CLI Proxy API is running (recommended)
Visit http://your-server:8317/management.html.
Direct static use after build
The single file dist/index.html generated by npm run build
Local server

npm install
npm start        # http://localhost:3000
npm run dev      # optional dev port: 3090
# or
python -m http.server 8000

Then open the corresponding localhost URL.

Configure connection
The login page shows the detected address; you can override it, enter the management key, and click Connect. Saved credentials use encrypted local storage for auto-login.

Tip: The Logs navigation item appears after enabling "Logging to file" in Basic Settings.

Tech Stack

Frontend: Plain HTML, CSS, JavaScript (ES6+)
Styling: CSS3 + Flexbox/Grid with CSS Variables
Icons: Font Awesome 6.4.0
Charts: Chart.js for interactive data visualization
Editor/Parsing: CodeMirror + js-yaml
Fonts: Segoe UI system font
Internationalization: Custom i18n (EN/CN) and theme system (light/dark)
API: RESTful management endpoints with automatic authentication
Storage: LocalStorage with lightweight encryption for preferences/credentials

Build & Development

npm run build bundles everything into dist/index.html via webpack (build.cjs, bundle-entry.js, build-scripts/prepare-html.js).
External CDNs remain for Font Awesome, Chart.js, and CodeMirror to keep the bundle lean.
Development servers: npm start (3000) or npm run dev (3090); Python http.server also works for static hosting.

Troubleshooting

Connection Issues

Confirm that the CLI Proxy API service is running.
Check if the API address is correct.
Verify that the management key is valid.
Ensure your firewall settings allow the connection.

Data Not Updating

Click the "Refresh All" button.
Check your network connection.
Check the browser's console for any error messages.

Logs & Config Editor

Logs: Requires server-side logging-to-file; 404 indicates the server build is too old or logging is disabled.
Config editor: Requires /config.yaml endpoint; keep YAML valid before saving.

Usage Stats

Enable "Usage statistics" if charts stay empty; data resets on server restart.

Project Structure

├── index.html
├── styles.css
├── app.js
├── i18n.js
├── src/                # Core/modules/utils source code
├── build.cjs           # Webpack build script
├── bundle-entry.js     # Bundling entry
├── build-scripts/      # Build utilities
│   └── prepare-html.js
├── dist/               # Bundled single-file output
├── BUILD_RELEASE.md
├── LICENSE
├── README.md
└── README_CN.md

Contributing

We welcome Issues and Pull Requests to improve this project! We encourage more developers to contribute to the enhancement of this WebUI!

This project is licensed under the MIT License.