Fix gemini-3.1-pro-high by routing to pro-low with thinkingLevel high.

The upstream API rejects gemini-3.1-pro-high as a direct model id. Map pro-high
requests to gemini-3.1-pro-low with high thinking, skip duplicate thinking on
tier SKUs, and add legacy Antigravity client headers.

Co-authored-by: Cursor <cursoragent@cursor.com>

.dockerignore

@@ -0,0 +1,12 @@
+.git
+.github
+node_modules
+npm-debug.log*
+.env
+.env.*
+data
+*.log
+tests
+coverage
+README.hf.md
+IMPLEMENTATION_GUIDE.md

.gitattributes

@@ -0,0 +1,2 @@
+# Mark generated CSS file to reduce diff noise
+public/css/style.css linguist-generated=true -diff

.github/FUNDING.yml

@@ -0,0 +1 @@
+buy_me_a_coffee: badrinarayanans

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,53 @@
+---
+name: Bug Report
+about: Report a bug or issue with the proxy
+title: '[BUG] '
+labels: bug
+assignees: ''
+---
+
+**Bug Description**
+A clear and concise description of the bug.
+
+**Steps to Reproduce**
+1.
+2.
+3.
+
+**Expected Behavior**
+What should happen.
+
+**Actual Behavior**
+What actually happens.
+
+**Environment**
+- Claude Code version:
+- antigravity-claude-proxy version:
+- Operating System:
+- Node.js version:
+
+**Claude CLI Configuration**
+Please provide ONE of the following:
+- Screenshot of WebUI **Settings → Claude CLI** tab, OR
+- Contents of your Claude settings.json file:
+  - macOS/Linux: `~/.claude/settings.json`
+  - Windows: `%USERPROFILE%\.claude\settings.json`
+
+```json
+<!-- Paste your settings.json here -->
+```
+
+**Logs (if applicable)**
+
+
+**Checklist**
+Please confirm:
+- [ ] I've updated antigravity-claude-proxy to the latest version
+- [ ] The bug exists in the latest version
+- [ ] I'm using this proxy for personal development only
+- [ ] I have an active Google Cloud project with Antigravity enabled
+- [ ] This issue is not related to attempting commercial use or TOS violations
+- [ ] I've reviewed the README troubleshooting section
+
+**Additional Context**
+Add any other relevant information.

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,14 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Troubleshooting Guide
+    url: https://github.com/badrisnarayanan/antigravity-claude-proxy/blob/main/docs/troubleshooting.md
+    about: Check here first for common issues and solutions before creating a bug report
+  - name: Google Cloud Support
+    url: https://cloud.google.com/support
+    about: For Google Cloud account or billing issues, contact Google Cloud directly
+  - name: Google Terms of Service
+    url: https://policies.google.com/terms
+    about: Review Google's Terms of Service for compliance questions
+  - name: Discussions
+    url: https://github.com/badrisnarayanan/antigravity-claude-proxy/discussions
+    about: Ask questions or discuss the proxy with the community

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,28 @@
+---
+name: Feature Request
+about: Suggest a new feature or enhancement
+title: '[FEATURE] '
+labels: enhancement
+assignees: ''
+---
+
+**Feature Description**
+A clear description of the feature you'd like to see.
+
+**Use Case**
+Explain how this feature would be used and what problem it solves.
+
+**Proposed Implementation**
+If you have ideas about how this could be implemented, share them here.
+
+**Compliance Consideration**
+Please confirm:
+- [ ] This feature is for personal development use
+- [ ] This feature does not violate or circumvent Google's Terms of Service
+- [ ] This feature is not intended for commercial resale or multi-user access
+
+**Alternatives Considered**
+Have you considered any alternative solutions or workarounds?
+
+**Additional Context**
+Add any other context, screenshots, or examples.

.github/workflows/publish.yml

@@ -0,0 +1,29 @@
+name: Publish to npm
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Update version from release tag
+        run: npm version ${{ github.event.release.tag_name }} --no-git-tag-version --allow-same-version
+
+      - name: Publish to npm
+        run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -0,0 +1,36 @@
+# Dependencies
+node_modules/
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
+log.txt
+
+# IDE
+.vscode/
+.idea/
+.history/
+
+# Local config (may contain tokens)
+.claude/
+.deepvcode/
+
+# Runtime data
+data/
+
+# Test artifacts
+tests/utils/*.png
+tests/utils/*.jpg
+tests/utils/*.jpeg
+
+# Environment
+.env
+.env.local
+hf-config-env.txt
+
+# Build output
+dist/
+build/

.npmignore

@@ -0,0 +1,21 @@
+# Exclude tests
+tests/
+
+# Exclude GitHub workflows
+.github/
+
+# Exclude documentation (except README)
+CLAUDE.md
+CHANGELOG.md
+CONTRIBUTING.md
+docs/
+
+# Exclude dev files
+.env*
+.claude/
+.vscode/
+.idea/
+
+# Exclude misc
+*.log
+.DS_Store

CLAUDE.md

@@ -0,0 +1,51 @@
+# CLAUDE.md
+
+Node.js proxy that exposes an Anthropic-compatible API backed by Google's Cloud Code service, letting Claude Code CLI use Gemini (and Claude) models via Google accounts with multi-account quota management.
+
+Request flow: `Claude Code CLI → Express (server.js) → CloudCode client → Antigravity Cloud Code API`
+
+## Commands
+
+```bash
+npm install          # installs deps and builds CSS (prepare hook)
+npm start            # port 8080
+npm run dev          # watch server files
+npm run dev:full     # watch CSS + server files
+
+npm start -- --strategy=sticky       # cache-optimized (default is hybrid)
+npm start -- --strategy=round-robin  # load-balanced
+npm start -- --fallback              # fall back to alternate model on quota exhaustion
+npm start -- --dev-mode              # enables debug logging + dev tools (--debug is a legacy alias)
+
+npm run build:css    # compile Tailwind once
+npm run watch:css    # watch CSS
+
+npm run accounts:add                 # add Google account via OAuth
+npm run accounts:add -- --no-browser # headless/manual code input
+npm run accounts:list
+npm run accounts:verify
+
+npm test                             # requires server running on port 8080
+node tests/run-all.cjs <filter>      # run matching tests only
+node tests/test-strategies.cjs       # strategy unit tests (no server needed)
+```
+
+## Non-obvious things
+
+**CSS**: Source is `public/css/src/input.css` (Tailwind + `@apply`). Compiled output is `public/css/style.css` — don't edit the compiled file.
+
+**Quota thresholds** are stored as fractions (0–0.99) but displayed as percentages in the UI. Three-tier resolution: per-model > per-account > global.
+
+**`cache_control` stripping**: Claude Code CLI sends `cache_control` on content blocks; Cloud Code API rejects them. Stripped at the start of `convertAnthropicToGoogle()` before any other processing.
+
+**Cross-model thinking signatures**: Claude and Gemini signatures are incompatible. When switching models mid-conversation, mismatched signatures are dropped. Gemini targets: strict (drop unknown). Claude targets: lenient (let Claude validate).
+
+**`CLAUDE_CONFIG_PATH` env var**: Set this when running as a systemd service — `os.homedir()` returns the service user's home, not the real user's.
+
+**`WEBUI_PASSWORD` env var**: Enables password protection on the web UI.
+
+**Native module rebuild**: On Node.js version mismatch, `better-sqlite3` is auto-rebuilt via `npm rebuild`. If reload still fails after rebuild, a server restart is required.
+
+**Dev mode sub-toggles** are client-side only (localStorage in `settings-store.js`): screenshot/redact mode, debug logging, log export, health inspector, placeholder data. No backend involvement.
+
+**`/api/strategy/health`** returns 403 unless dev mode is on.

Dockerfile

@@ -0,0 +1,42 @@
+FROM node:20-bookworm-slim AS build
+
+WORKDIR /app
+
+RUN apt-get update \
+    && apt-get install -y --no-install-recommends python3 make g++ \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY . .
+RUN npm ci
+RUN npm run build:css
+RUN npm prune --omit=dev
+
+FROM node:20-bookworm-slim AS runtime
+
+WORKDIR /app
+
+ENV NODE_ENV=production \
+    PORT=7860 \
+    HOST=0.0.0.0 \
+    HOME=/home/node \
+    ACCOUNT_CONFIG_PATH=/data/accounts.json
+
+RUN apt-get update \
+    && apt-get install -y --no-install-recommends ca-certificates tini \
+    && rm -rf /var/lib/apt/lists/* \
+    && mkdir -p /data /home/node/.config/antigravity-proxy \
+    && chown -R node:node /data /home/node /app
+
+COPY --from=build --chown=node:node /app/package.json ./package.json
+COPY --from=build --chown=node:node /app/node_modules ./node_modules
+COPY --from=build --chown=node:node /app/src ./src
+COPY --from=build --chown=node:node /app/bin ./bin
+COPY --from=build --chown=node:node /app/public ./public
+COPY --from=build --chown=node:node /app/config.example.json ./config.example.json
+
+USER node
+
+EXPOSE 7860
+
+ENTRYPOINT ["tini", "--"]
+CMD ["node", "src/index.js"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Badri Narayanan S
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,52 @@
+---
+title: Antigravity OpenAI Proxy
+emoji: 🛸
+colorFrom: indigo
+colorTo: blue
+sdk: docker
+app_port: 7860
+pinned: false
+---
+
+# Antigravity OpenAI Proxy
+
+A test-only Hugging Face Space that exposes both:
+
+- `POST /v1/chat/completions` (OpenAI-compatible)
+- `POST /v1/messages` (Anthropic-compatible)
+
+The proxy rotates across Antigravity OAuth accounts using the existing hybrid account manager.
+
+## Required Space secrets
+
+- `PROXY_API_KEY`: bearer token required by `/v1/*`
+- `CONFIG_ENV`: newline-delimited placeholder-compatible account variables such as `ANTIGRAVITY_1_EMAIL` and `ANTIGRAVITY_1_REFRESH_TOKEN`
+
+Optional variables:
+
+- `FORCE_ENV_ACCOUNTS=true`: make environment accounts authoritative at each cold start
+- `ENABLE_WEBUI=false`: disable the browser UI
+- `ACCOUNT_STRATEGY=hybrid`: account selection strategy
+
+Never commit OAuth refresh tokens or a real `.env` file.
+
+## Health check
+
+```bash
+curl -fsS https://YOUR-SPACE.hf.space/health
+```
+
+## OpenAI-compatible request
+
+```bash
+curl -sS https://YOUR-SPACE.hf.space/v1/chat/completions \
+  -H "Authorization: Bearer YOUR_PROXY_API_KEY" \
+  -H "Content-Type: application/json" \
+  -d '{
+    "model": "antigravity/gemini-3-flash",
+    "messages": [{"role": "user", "content": "Reply with READY only."}],
+    "reasoning_effort": "high"
+  }'
+```
+
+This Space is for testing only. Antigravity access may be subject to Google terms, quotas, and account enforcement.

bin/cli.js

@@ -0,0 +1,490 @@
+#!/usr/bin/env node
+
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+import { readFileSync, writeFileSync, existsSync, unlinkSync, mkdirSync } from 'fs';
+import { spawn, exec } from 'child_process';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Read package.json for version
+const packageJson = JSON.parse(
+  readFileSync(join(__dirname, '..', 'package.json'), 'utf-8')
+);
+
+// PID file location for background process management
+const CONFIG_DIR = join(process.env.HOME || process.env.USERPROFILE || '', '.config', 'antigravity-proxy');
+const PID_FILE = join(CONFIG_DIR, 'server.pid');
+
+const args = process.argv.slice(2);
+const command = args[0];
+
+// Ensure config directory exists
+function ensureConfigDir() {
+  if (!existsSync(CONFIG_DIR)) {
+    mkdirSync(CONFIG_DIR, { recursive: true });
+  }
+}
+
+/**
+ * Check if the service is running by reading PID file and verifying process
+ */
+function isServiceRunning() {
+  if (!existsSync(PID_FILE)) {
+    return false;
+  }
+
+  try {
+    const pidStr = readFileSync(PID_FILE, 'utf-8');
+    const pid = parseInt(pidStr, 10);
+    if (isNaN(pid)) {
+      cleanupPidFile();
+      return false;
+    }
+
+    // Check if process is running (signal 0 doesn't kill, just checks)
+    process.kill(pid, 0);
+    return true;
+  } catch (e) {
+    // Process doesn't exist
+    cleanupPidFile();
+    return false;
+  }
+}
+
+/**
+ * Get the PID of the running service
+ */
+function getServicePid() {
+  if (!existsSync(PID_FILE)) {
+    return null;
+  }
+  try {
+    const pid = parseInt(readFileSync(PID_FILE, 'utf-8'), 10);
+    return isNaN(pid) ? null : pid;
+  } catch (e) {
+    return null;
+  }
+}
+
+/**
+ * Save PID to file
+ */
+function savePid(pid) {
+  if (!existsSync(CONFIG_DIR)) {
+    mkdirSync(CONFIG_DIR, { recursive: true });
+  }
+  writeFileSync(PID_FILE, pid.toString());
+}
+
+/**
+ * Clean up PID file
+ */
+function cleanupPidFile() {
+  if (existsSync(PID_FILE)) {
+    try {
+      unlinkSync(PID_FILE);
+    } catch (e) {
+      // Ignore cleanup errors
+    }
+  }
+}
+
+/**
+ * Get current port from environment or default
+ */
+function getPort() {
+  return process.env.PORT || 8080;
+}
+
+/**
+ * Wait for service to be ready
+ */
+async function waitForService(timeout = 10000, initialDelay = 1000) {
+  await new Promise(resolve => setTimeout(resolve, initialDelay));
+
+  const startTime = Date.now();
+  while (Date.now() - startTime < timeout) {
+    if (isServiceRunning()) {
+      // Additional wait to ensure service is fully ready
+      await new Promise(resolve => setTimeout(resolve, 500));
+      return true;
+    }
+    await new Promise(resolve => setTimeout(resolve, 100));
+  }
+  return false;
+}
+
+/**
+ * Start the server as a background process (or foreground with --log)
+ */
+async function startServer() {
+  // Check for --log flag
+  const logMode = args.includes('--log');
+
+  if (isServiceRunning() && !logMode) {
+    console.log('');
+    console.log('╭' + '─'.repeat(48) + '╮');
+    console.log('│  🛸 Antigravity Proxy is already in orbit      │');
+    console.log('╰' + '─'.repeat(48) + '╯');
+    console.log('');
+
+    const pid = getServicePid();
+    const port = getPort();
+    console.log(`   ┌─ PID: ${pid}`);
+    console.log(`   ├─ Local: http://localhost:${port}`);
+    console.log(`   └─ Dashboard: http://localhost:${port}`);
+    console.log('');
+    return;
+  }
+
+  console.log('');
+  if (logMode) {
+    console.log('🌌 Launching Antigravity Proxy (foreground mode)...');
+    console.log('   Press Ctrl+C to stop');
+    console.log('');
+  } else {
+    console.log('🌌 Launching Antigravity Proxy...');
+  }
+
+  const serverScript = join(__dirname, '..', 'src', 'index.js');
+  const port = getPort();
+
+  // Filter out --log from args passed to server
+  const serverArgs = args.slice(1).filter(arg => arg !== '--log');
+
+  if (logMode) {
+    // Foreground mode - show logs directly
+    const serverProcess = spawn('node', [serverScript, ...serverArgs], {
+      stdio: 'inherit', // Show output in current terminal
+      env: { ...process.env, PORT: port.toString() }
+    });
+
+    serverProcess.on('error', (error) => {
+      console.error('');
+      console.error('⚠️  Launch failed:', error.message);
+      console.error('');
+      process.exit(1);
+    });
+
+    serverProcess.on('exit', (code) => {
+      console.log('');
+      console.log('🌙 Proxy has exited');
+      console.log('');
+      process.exit(code || 0);
+    });
+
+    // Keep process running
+    return;
+  }
+
+  // Background mode - detached process
+  const serverProcess = spawn('node', [serverScript, ...serverArgs], {
+    detached: true,
+    stdio: 'ignore',
+    env: { ...process.env, PORT: port.toString() }
+  });
+
+  serverProcess.on('error', (error) => {
+    console.error('');
+    console.error('⚠️  Launch failed:', error.message);
+    console.error('');
+    process.exit(1);
+  });
+
+  // Save PID and detach
+  savePid(serverProcess.pid);
+  serverProcess.unref();
+
+  // Wait for service to be ready
+  if (await waitForService()) {
+    console.log('╭' + '─'.repeat(48) + '╮');
+    console.log('│ ⚡ Proxy is now in orbit!                      │');
+    console.log('╰' + '─'.repeat(48) + '╯');
+
+    console.log('');
+    console.log('   ┌─ Process ID:', serverProcess.pid);
+    console.log('   ├─ Local:', `http://localhost:${port}`);
+    console.log('   └─ Dashboard:', `http://localhost:${port}/`);
+    console.log('');
+    console.log('   Next steps:');
+    console.log('   • acc ui       → Open dashboard');
+    console.log('   • acc status   → View proxy health');
+    console.log('   • acc stop     → Shut down proxy');
+    console.log('');
+  } else {
+    console.error('');
+    console.error('⚠️  Proxy launched but health check timed out');
+    console.log(`   Try: curl http://localhost:${port}/health`);
+    console.error('');
+  }
+}
+
+/**
+ * Stop the running server
+ */
+function stopServer() {
+  if (!isServiceRunning()) {
+    console.log('');
+    console.log('🌑 Proxy is not running');
+    console.log('');
+    cleanupPidFile();
+    return;
+  }
+
+  const pid = getServicePid();
+  try {
+    process.kill(pid, 'SIGTERM');
+    cleanupPidFile();
+    console.log('');
+    console.log('🌙 Proxy has been taken offline');
+    console.log('');
+  } catch (e) {
+    console.error('');
+    console.error('⚠️  Shutdown failed:', e.message);
+    console.error('');
+    cleanupPidFile();
+  }
+}
+
+/**
+ * Restart the server
+ */
+async function restartServer() {
+  console.log('');
+  console.log('♻️  Restarting proxy...');
+  console.log('');
+
+  // Stop if running
+  if (isServiceRunning()) {
+    const pid = getServicePid();
+    try {
+      process.kill(pid, 'SIGTERM');
+      cleanupPidFile();
+      console.log('   └─ Existing instance stopped');
+      console.log('');
+      // Wait for process to fully terminate
+      await new Promise(resolve => setTimeout(resolve, 1000));
+    } catch (e) {
+      console.log('   └─ No previous instance found');
+      console.log('');
+      cleanupPidFile();
+    }
+  }
+
+  // Start fresh
+  await startServer();
+}
+
+/**
+ * Show server status
+ */
+function showStatus() {
+  console.log('');
+  console.log('╭' + '─'.repeat(48) + '╮');
+  console.log('│  🛸 Antigravity Claude Proxy                   │');
+  console.log('╰' + '─'.repeat(48) + '╯');
+  console.log('');
+
+  if (isServiceRunning()) {
+    const pid = getServicePid();
+    const port = getPort();
+    console.log('  STATUS');
+    console.log('  ⚡ Proxy is active');
+    console.log('');
+    console.log('  DETAILS');
+    console.log(`  ├─ PID: ${pid}`);
+    console.log(`  ├─ Port: ${port}`);
+    console.log(`  ├─ API: http://localhost:${port}`);
+    console.log(`  └─ Dashboard: http://localhost:${port}/`);
+    console.log('');
+    console.log('  AVAILABLE COMMANDS');
+    console.log('  • acc ui         Open dashboard');
+    console.log('  • acc restart    Relaunch proxy');
+    console.log('  • acc stop       Take offline');
+  } else {
+    console.log('  STATUS');
+    console.log('  🌑 Proxy is offline');
+    console.log('');
+    console.log('  TO LAUNCH');
+    console.log('  • acc start      Bring proxy online');
+  }
+  console.log('');
+}
+
+/**
+ * Open WebUI in browser
+ */
+async function openUI() {
+  // Start server if not running
+  if (!isServiceRunning()) {
+    console.log('');
+    console.log('🌌 Proxy offline - launching now...');
+    await startServer();
+    // Wait for it to be fully ready
+    await new Promise(resolve => setTimeout(resolve, 1000));
+  }
+
+  const port = getPort();
+  const uiUrl = `http://localhost:${port}/`;
+
+  console.log('');
+  console.log(`🖥️  Opening dashboard → ${uiUrl}`);
+  console.log('');
+
+  // Open URL in browser based on platform
+  const platform = process.platform;
+  let openCommand = '';
+
+  if (platform === 'win32') {
+    openCommand = `start ${uiUrl}`;
+  } else if (platform === 'darwin') {
+    openCommand = `open ${uiUrl}`;
+  } else if (platform === 'linux') {
+    openCommand = `xdg-open ${uiUrl}`;
+  } else {
+    console.error('⚠️  Cannot auto-open browser on this platform');
+    console.log(`   Manual URL: ${uiUrl}`);
+    console.log('');
+    return;
+  }
+
+  exec(openCommand, (error) => {
+    if (error) {
+      console.error('⚠️  Browser launch failed:', error.message);
+      console.log(`   Manual URL: ${uiUrl}`);
+      console.log('');
+    }
+  });
+}
+
+function showHelp() {
+  console.log(`
+╭${'─'.repeat(58)}╮
+│  🛸 Antigravity Claude Proxy v${packageJson.version.padEnd(27)}│
+╰${'─'.repeat(58)}╯
+
+Route Claude Code CLI through Antigravity's multi-model API
+with intelligent load balancing across Google accounts.
+
+USAGE
+  antigravity-claude-proxy <command> [options]
+  acc <command> [options]                 ← shorthand
+
+━━��� PROXY CONTROL ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  start              Launch proxy as background service
+  stop               Shut down the proxy
+  restart            Relaunch the proxy
+  status             View proxy health and details
+  ui                 Open dashboard in browser
+
+━━━ ACCOUNT MANAGEMENT ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  accounts           Interactive account menu
+  accounts add       Add Google account via OAuth
+  accounts list      Show all linked accounts
+  accounts remove    Unlink accounts
+  accounts verify    Check account health
+  accounts clear     Remove all accounts
+
+━━━ OPTIONS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  --help, -h         Show this help
+  --version, -v      Show version
+  --log              Run in foreground with visible logs
+  --strategy=NAME    Load balancing: hybrid (default),
+                     sticky (cache-optimized), round-robin
+  --fallback         Enable model fallback on errors
+
+━━━ ENVIRONMENT ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  PORT              Custom port (default: 8080)
+
+━━━ EXAMPLES ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  acc start                    Launch proxy
+  acc start --log              Launch with visible logs
+  acc ui                       Open dashboard
+  PORT=3000 acc start          Use custom port
+  acc start --strategy=sticky  Optimize for prompt caching
+  acc accounts add             Link new Google account
+
+━━━ CLAUDE CODE SETUP ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  Edit ~/.claude/settings.json:
+  {
+    "env": {
+      "ANTHROPIC_BASE_URL": "http://localhost:8080"
+    }
+  }
+
+Docs: https://github.com/badrisnarayanan/antigravity-claude-proxy
+`);
+}
+
+function showVersion() {
+  console.log(packageJson.version);
+}
+
+async function main() {
+  // Handle flags
+  if (args.includes('--help') || args.includes('-h')) {
+    showHelp();
+    process.exit(0);
+  }
+
+  if (args.includes('--version') || args.includes('-v')) {
+    showVersion();
+    process.exit(0);
+  }
+
+  // Handle commands
+  switch (command) {
+    case 'start':
+      await startServer();
+      break;
+
+    case 'stop':
+      stopServer();
+      break;
+
+    case 'restart':
+      await restartServer();
+      break;
+
+    case 'status':
+      showStatus();
+      break;
+
+    case 'ui':
+      await openUI();
+      break;
+
+    case 'accounts': {
+      // Pass remaining args to accounts CLI
+      const subCommand = args[1] || 'add';
+      process.argv = ['node', 'accounts-cli.js', subCommand, ...args.slice(2)];
+      await import('../src/cli/accounts.js');
+      break;
+    }
+
+    case 'help':
+      showHelp();
+      break;
+
+    case 'version':
+      showVersion();
+      break;
+
+    case undefined:
+      // No command - show help
+      showHelp();
+      break;
+
+    default:
+      console.error(`Unknown command: ${command}`);
+      console.error('Run "acc --help" for usage information.');
+      process.exit(1);
+  }
+}
+
+main().catch((err) => {
+  console.error('Error:', err.message);
+  process.exit(1);
+});

config.example.json

@@ -0,0 +1,60 @@
+{
+  "_comment": "Antigravity Claude Proxy Configuration",
+  "_instructions": [
+    "HOW TO USE THIS FILE:",
+    "1. Copy to your HOME directory: ~/.config/antigravity-proxy/config.json",
+    "   - Windows: C:\\Users\\<username>\\.config\\antigravity-proxy\\config.json",
+    "   - macOS/Linux: ~/.config/antigravity-proxy/config.json",
+    "2. Or copy to project root as 'config.json' (fallback if home config not found)",
+    "",
+    "NOTE: Environment variables (e.g., WEBUI_PASSWORD) take precedence over file config",
+    "Restart server after making changes"
+  ],
+
+  "apiKey": "",
+  "_apiKey_comment": "Optional API key to protect /v1/* endpoints. Can also use API_KEY env var.",
+
+  "webuiPassword": "",
+  "_webuiPassword_comment": "Optional password to protect WebUI. Can also use WEBUI_PASSWORD env var.",
+
+  "port": 8080,
+  "debug": false,
+  "logLevel": "info",
+
+  "maxRetries": 5,
+  "retryBaseMs": 1000,
+  "retryMaxMs": 30000,
+
+  "defaultCooldownMs": 60000,
+  "maxWaitBeforeErrorMs": 120000,
+
+  "tokenCacheTtlMs": 300000,
+  "persistTokenCache": false,
+
+  "requestTimeoutMs": 300000,
+
+  "maxAccounts": 10,
+  "_maxAccounts_comment": "Maximum number of Google accounts allowed (1-100). Default: 10.",
+
+  "_oauthCallbackPort_comment": "OAuth callback server port. Change if you get EACCES errors on Windows. Can also use OAUTH_CALLBACK_PORT env var. Default: 51121.",
+  "_oauthCallbackPort_env": "OAUTH_CALLBACK_PORT=3456",
+
+  "_profiles": {
+    "development": {
+      "debug": true,
+      "logLevel": "debug",
+      "maxRetries": 3
+    },
+    "production": {
+      "debug": false,
+      "logLevel": "info",
+      "maxRetries": 5,
+      "persistTokenCache": true
+    },
+    "high-performance": {
+      "maxRetries": 10,
+      "retryMaxMs": 60000,
+      "tokenCacheTtlMs": 600000
+    }
+  }
+}

docs/api-endpoints.md

@@ -0,0 +1,9 @@
+# API Endpoints
+
+| Endpoint          | Method | Description                                                           |
+| ----------------- | ------ | --------------------------------------------------------------------- |
+| `/health`         | GET    | Health check                                                          |
+| `/account-limits` | GET    | Account status and quota limits (add `?format=table` for ASCII table) |
+| `/v1/messages`    | POST   | Anthropic Messages API                                                |
+| `/v1/models`      | GET    | List available models                                                 |
+| `/refresh-token`  | POST   | Force token refresh                                                   |

docs/configuration.md

@@ -0,0 +1,94 @@
+# Advanced Configuration
+
+While most users can use the default settings, you can tune the proxy behavior via the **Settings → Server** tab in the WebUI or by creating a `config.json` file.
+
+## Environment Variables
+
+The proxy supports the following environment variables:
+
+| Variable | Description | Default |
+|----------|-------------|---------|
+| `PORT` | Server port | `8080` |
+| `HOST` | Bind address | `0.0.0.0` |
+| `HTTP_PROXY` | Route outbound requests through a proxy | - |
+| `HTTPS_PROXY` | Same as HTTP_PROXY (for HTTPS requests) | - |
+| `API_KEY` | Protect `/v1/*` API endpoints | - |
+| `WEBUI_PASSWORD` | Password-protect the web dashboard | - |
+| `DEBUG` | Enable debug logging (`true`/`false`) | `false` |
+| `DEV_MODE` | Enable developer mode (`true`/`false`) | `false` |
+| `FALLBACK` | Enable model fallback (`true`/`false`) | `false` |
+| `FALLBACK_ANTIGRAVITY_VERSION` | Override the User-Agent version string (useful when Google APIs reject old versions) | `1.23.2` |
+| `ANTIGRAVITY_CLIENT_VERSION` | Override the X-Client-Version header sent to the API (prevents "no longer supported" errors) | Auto-detected from product.json |
+| `ANTIGRAVITY_CLIENT_VERSION_FALLBACK` | Override the fallback X-Client-Version (used when product.json is not found) | `1.110.0` |
+| `CLAUDE_CONFIG_PATH` | Path to `.claude` directory for CLI settings (for systemd/service deployments) | `~/.claude` |
+
+### Setting Environment Variables
+
+#### Inline (single command)
+
+Set variables for just one command. Works on macOS, Linux, and Windows with Git Bash/WSL:
+
+```bash
+PORT=3000 HTTP_PROXY=http://proxy:8080 npm start
+```
+
+#### macOS / Linux (persistent)
+
+Add to your shell profile (`~/.zshrc` or `~/.bashrc`):
+
+```bash
+export PORT=3000
+export HTTP_PROXY=http://proxy:8080
+```
+
+Then reload: `source ~/.zshrc`
+
+#### Windows Command Prompt (persistent)
+
+```cmd
+setx PORT 3000
+setx HTTP_PROXY http://proxy:8080
+```
+
+Restart your terminal for changes to take effect.
+
+#### Windows PowerShell (persistent)
+
+```powershell
+[Environment]::SetEnvironmentVariable("PORT", "3000", "User")
+[Environment]::SetEnvironmentVariable("HTTP_PROXY", "http://proxy:8080", "User")
+```
+
+Restart your terminal for changes to take effect.
+
+### HTTP Proxy Support
+
+If you're behind a corporate firewall or VPN, you can route all outbound API requests through a proxy server:
+
+```bash
+# Route through a local proxy (e.g., for debugging with mitmproxy)
+HTTP_PROXY=http://127.0.0.1:8888 npm start
+
+# Route through a corporate proxy
+HTTP_PROXY=http://proxy.company.com:3128 npm start
+
+# With authentication
+HTTP_PROXY=http://user:password@proxy.company.com:3128 npm start
+```
+
+The proxy supports `http_proxy`, `HTTP_PROXY`, `https_proxy`, and `HTTPS_PROXY` (case-insensitive).
+
+## Configurable Options
+
+- **API Key Authentication**: Protect `/v1/*` API endpoints with `API_KEY` env var or `apiKey` in config.
+- **WebUI Password**: Secure your dashboard with `WEBUI_PASSWORD` env var or in config.
+- **Custom Port**: Change the default `8080` port.
+- **Retry Logic**: Configure `maxRetries`, `retryBaseMs`, and `retryMaxMs`.
+- **Rate Limit Handling**: Comprehensive rate limit detection from headers and error messages with intelligent retry-after parsing.
+- **Load Balancing**: Adjust `defaultCooldownMs` and `maxWaitBeforeErrorMs`.
+- **Persistence**: Enable `persistTokenCache` to save OAuth sessions across restarts.
+- **Max Accounts**: Set `maxAccounts` (1-100) to limit the number of Google accounts. Default: 10.
+- **Quota Threshold**: Set `globalQuotaThreshold` (0-0.99) to switch accounts before quota drops below a minimum level. Supports per-account and per-model overrides.
+- **Endpoint Fallback**: Automatic 403/404 endpoint fallback for API compatibility.
+
+Refer to `config.example.json` for a complete list of fields and documentation.

docs/development.md

@@ -0,0 +1,54 @@
+# Development
+
+## For Developers & Contributors
+
+This project uses a local Tailwind CSS build system. CSS is pre-compiled and included in the repository, so you can run the project immediately after cloning.
+
+### Quick Start
+
+```bash
+git clone https://github.com/badri-s2001/antigravity-claude-proxy.git
+cd antigravity-claude-proxy
+npm install  # Automatically builds CSS via prepare hook
+npm start    # Start server (no rebuild needed)
+```
+
+### Frontend Development
+
+If you need to modify styles in `public/css/src/input.css`:
+
+```bash
+# Option 1: Build once
+npm run build:css
+
+# Option 2: Watch for changes (auto-rebuild)
+npm run watch:css
+
+# Option 3: Watch both CSS and server (recommended)
+npm run dev:full
+```
+
+**File Structure:**
+- `public/css/src/input.css` - Source CSS with Tailwind `@apply` directives (edit this)
+- `public/css/style.css` - Compiled & minified CSS (auto-generated, don't edit)
+- `tailwind.config.js` - Tailwind configuration
+- `postcss.config.js` - PostCSS configuration
+
+### Backend-Only Development
+
+If you're only working on backend code and don't need frontend dev tools:
+
+```bash
+npm install --production  # Skip devDependencies (saves ~20MB)
+npm start
+```
+
+**Note:** Pre-compiled CSS is committed to the repository, so you don't need to rebuild unless modifying styles.
+
+### Project Structure
+
+See [CLAUDE.md](../CLAUDE.md) for detailed architecture documentation, including:
+- Request flow and module organization
+- Frontend architecture (Alpine.js + Tailwind)
+- Service layer patterns (`ErrorHandler.withLoading`, `AccountActions`)
+- Dashboard module documentation

docs/legal.md

@@ -0,0 +1,9 @@
+# Legal
+
+- **Not affiliated with Google or Anthropic.** This is an independent open-source project and is not endorsed by, sponsored by, or affiliated with Google LLC or Anthropic PBC.
+
+- "Antigravity", "Gemini", "Google Cloud", and "Google" are trademarks of Google LLC.
+
+- "Claude" and "Anthropic" are trademarks of Anthropic PBC.
+
+- Software is provided "as is", without warranty. You are responsible for complying with all applicable Terms of Service and Acceptable Use Policies.

docs/load-balancing.md

@@ -0,0 +1,59 @@
+# Multi-Account Load Balancing
+
+When you add multiple accounts, the proxy intelligently distributes requests across them using configurable selection strategies.
+
+## Account Selection Strategies
+
+Choose a strategy based on your needs:
+
+| Strategy | Best For | Description |
+| --- | --- | --- |
+| **Hybrid** (Default) | Most users | Smart selection combining health score, token bucket rate limiting, quota awareness, and LRU freshness |
+| **Sticky** | Prompt caching | Stays on the same account to maximize cache hits, switches only when rate-limited |
+| **Round-Robin** | Even distribution | Cycles through accounts sequentially for balanced load |
+
+**Configure via CLI:**
+
+```bash
+antigravity-claude-proxy start --strategy=hybrid    # Default: smart distribution
+antigravity-claude-proxy start --strategy=sticky    # Cache-optimized
+antigravity-claude-proxy start --strategy=round-robin  # Load-balanced
+```
+
+**Or via WebUI:** Settings → Server → Account Selection Strategy
+
+## How It Works
+
+- **Health Score Tracking**: Accounts earn points for successful requests and lose points for failures/rate-limits
+- **Token Bucket Rate Limiting**: Client-side throttling with regenerating tokens (50 max, 6/minute)
+- **Quota Awareness**: Accounts below configurable quota thresholds are deprioritized; exhausted accounts trigger emergency fallback
+- **Quota Protection**: Set minimum quota levels globally, per-account, or per-model to switch accounts before quota runs out
+- **Emergency Fallback**: When all accounts appear exhausted, bypasses checks with throttle delays (250-500ms)
+- **Automatic Cooldown**: Rate-limited accounts recover automatically after reset time expires
+- **Invalid Account Detection**: Accounts needing re-authentication are marked and skipped
+- **Prompt Caching Support**: Session IDs derived from conversation enable cache hits across turns
+
+## Monitoring
+
+Check account status, subscription tiers, and quota anytime:
+
+```bash
+# Web UI: http://localhost:8080/ (Accounts tab - shows tier badges and quota progress)
+# CLI Table:
+curl "http://localhost:8080/account-limits?format=table"
+```
+
+### CLI Management Reference
+
+If you prefer using the terminal for management:
+
+```bash
+# List all accounts
+antigravity-claude-proxy accounts list
+
+# Verify account health
+antigravity-claude-proxy accounts verify
+
+# Interactive CLI menu
+antigravity-claude-proxy accounts
+```

docs/menubar-app.md

@@ -0,0 +1,17 @@
+# macOS Menu Bar App
+
+For macOS users who prefer a native experience, there's a companion menu bar app that provides quick access to server controls without touching the terminal. Get it from: [antigravity-claude-proxy-bar](https://github.com/IrvanFza/antigravity-claude-proxy-bar)
+
+> **Note:** This is a GUI wrapper only. You still need to install and setup the proxy server first using one of the [installation methods](../README.md#installation) above.
+
+![AntiGravity Claude Proxy Bar](https://github.com/IrvanFza/antigravity-claude-proxy-bar/blob/main/images/application.png?raw=true)
+
+## Key Features
+
+- **Server Control**: Start/stop the proxy server with a single click or ⌘S shortcut.
+- **Status Indicator**: Menu bar icon shows server running state at a glance.
+- **WebUI Access**: Open the web management console directly from the menu.
+- **Port Configuration**: Customize the proxy server port (default: 8080).
+- **Account Selection Strategy**: Choose between Hybrid, Sticky, or Round-Robin load balancing strategies.
+- **Auto-Start Options**: Launch server on app start and launch app at login.
+- **Native Experience**: Clean, native SwiftUI interface designed for macOS.

docs/models.md

@@ -0,0 +1,19 @@
+# Available Models
+
+## Claude Models
+
+| Model ID                     | Description                              |
+| ---------------------------- | ---------------------------------------- |
+| `claude-sonnet-4-6-thinking` | Claude Sonnet 4.6 with extended thinking |
+| `claude-opus-4-6-thinking`   | Claude Opus 4.6 with extended thinking   |
+| `claude-sonnet-4-6`          | Claude Sonnet 4.6 without thinking       |
+
+## Gemini Models
+
+| Model ID            | Description                     |
+| ------------------- | ------------------------------- |
+| `gemini-3-flash`    | Gemini 3 Flash with thinking    |
+| `gemini-3.1-pro-low`  | Gemini 3.1 Pro Low with thinking  |
+| `gemini-3.1-pro-high` | Gemini 3.1 Pro High with thinking |
+
+Gemini models include full thinking support with `thoughtSignature` handling for multi-turn conversations.

docs/openclaw.md

@@ -0,0 +1,159 @@
+# Using with OpenClaw / ClawdBot
+
+[OpenClaw](https://docs.openclaw.ai/) (formerly ClawdBot/Moltbot) is an AI agent gateway that connects to messaging apps like Telegram, WhatsApp, Discord, Slack, and iMessage. You can configure it to use this proxy for Claude and Gemini models.
+
+## Prerequisites
+
+- OpenClaw installed (`npm install -g openclaw@latest`)
+- Antigravity Claude Proxy running on port 8080
+- At least one Google account linked to the proxy
+
+## Configure OpenClaw
+
+Edit your OpenClaw config file at:
+- **macOS/Linux**: `~/.openclaw/openclaw.json`
+- **Windows**: `%USERPROFILE%\.openclaw\openclaw.json`
+
+Add the following configuration:
+
+```json
+{
+  "models": {
+    "mode": "merge",
+    "providers": {
+      "antigravity-proxy": {
+        "baseUrl": "http://127.0.0.1:8080",
+        "apiKey": "test",
+        "api": "anthropic-messages",
+        "models": [
+          {
+            "id": "gemini-3-flash",
+            "name": "Gemini 3 Flash",
+            "reasoning": true,
+            "input": ["text", "image"],
+            "cost": { "input": 0, "output": 0, "cacheRead": 0, "cacheWrite": 0 },
+            "contextWindow": 1048576,
+            "maxTokens": 65536
+          },
+          {
+            "id": "gemini-3.1-pro-high",
+            "name": "Gemini 3.1 Pro High",
+            "reasoning": true,
+            "input": ["text", "image"],
+            "cost": { "input": 0, "output": 0, "cacheRead": 0, "cacheWrite": 0 },
+            "contextWindow": 1048576,
+            "maxTokens": 65536
+          },
+          {
+            "id": "claude-sonnet-4-6",
+            "name": "Claude Sonnet 4.6",
+            "reasoning": false,
+            "input": ["text", "image"],
+            "cost": { "input": 0, "output": 0, "cacheRead": 0, "cacheWrite": 0 },
+            "contextWindow": 200000,
+            "maxTokens": 16384
+          },
+          {
+            "id": "claude-sonnet-4-6-thinking",
+            "name": "Claude Sonnet 4.6 Thinking",
+            "reasoning": true,
+            "input": ["text", "image"],
+            "cost": { "input": 0, "output": 0, "cacheRead": 0, "cacheWrite": 0 },
+            "contextWindow": 200000,
+            "maxTokens": 16384
+          },
+          {
+            "id": "claude-opus-4-6-thinking",
+            "name": "Claude Opus 4.6 Thinking",
+            "reasoning": true,
+            "input": ["text", "image"],
+            "cost": { "input": 0, "output": 0, "cacheRead": 0, "cacheWrite": 0 },
+            "contextWindow": 200000,
+            "maxTokens": 32000
+          }
+        ]
+      }
+    }
+  },
+  "agents": {
+    "defaults": {
+      "model": {
+        "primary": "antigravity-proxy/gemini-3-flash",
+        "fallbacks": ["antigravity-proxy/gemini-3.1-pro-high"]
+      },
+      "models": {
+        "antigravity-proxy/gemini-3-flash": {}
+      }
+    }
+  }
+}
+```
+
+> **Important**: Use `127.0.0.1` instead of `localhost` in the `baseUrl`. This ensures the connection stays on the loopback interface. If you're running on a VPS and accidentally start the proxy bound to `0.0.0.0`, using `localhost` in your client config could still work but `127.0.0.1` makes the intent explicit and avoids potential DNS resolution issues.
+
+## Start Both Services
+
+```bash
+# Terminal 1: Start the proxy (binds to localhost only by default)
+antigravity-claude-proxy start
+
+# Terminal 2: Start OpenClaw gateway
+openclaw gateway
+```
+
+## Verify Configuration
+
+```bash
+# Check available models
+openclaw models list
+
+# Check gateway status
+openclaw status
+```
+
+You should see models prefixed with `antigravity-proxy/` in the list.
+
+## Switch Models
+
+To change the default model:
+
+```bash
+openclaw models set antigravity-proxy/claude-opus-4-6-thinking
+```
+
+Or edit the `model.primary` field in your config file.
+
+## Troubleshooting
+
+### Connection Refused
+
+Make sure the proxy is running before starting OpenClaw:
+```bash
+curl http://127.0.0.1:8080/health
+```
+
+### Models Not Showing
+
+1. Verify the config file is valid JSON
+2. Check that `mode` is set to `"merge"` (not `"replace"` unless you want to override all built-in models)
+3. Restart the OpenClaw gateway after config changes
+
+### VPS Security
+
+If running on a VPS, ensure the proxy only binds to localhost:
+```bash
+# Default binds to 0.0.0.0 (all interfaces) - exposed to network!
+antigravity-claude-proxy start
+
+# Explicitly bind to localhost only (recommended for VPS)
+HOST=127.0.0.1 antigravity-claude-proxy start
+```
+
+By default, the proxy binds to `0.0.0.0` which exposes it to all network interfaces. On a VPS, always use `HOST=127.0.0.1` to restrict access to localhost only, or ensure you have proper authentication (`API_KEY` env var) and firewall rules in place.
+
+## Further Reading
+
+- [OpenClaw Documentation](https://docs.openclaw.ai/)
+- [OpenClaw Configuration Reference](https://docs.openclaw.ai/gateway/configuration)
+- [Proxy Load Balancing](./load-balancing.md)
+- [Proxy Configuration](./configuration.md)

docs/opencode.md

@@ -0,0 +1,150 @@
+# Using with OpenCode
+
+[OpenCode](https://opencode.ai/) is a terminal-based AI coding assistant similar to Claude Code. You can configure it to use this proxy, which unlocks both Claude and Gemini models in a single interactive session.
+
+## The Problem with Claude Code
+
+The proxy exposes both Claude and Gemini models via `/v1/models`. However, Claude Code's `/model` picker is hardcoded by Anthropic to only show Claude variants. Gemini models are effectively invisible in the UI.
+
+The only workaround within Claude Code is hardcoding a single Gemini model in `settings.json` — no interactive switching, no mid-session changes.
+
+## What OpenCode Solves
+
+OpenCode supports custom providers via a config file. Once pointed at this proxy, all models (Claude and Gemini) appear in one interactive picker and can be switched freely at any time.
+
+| Feature | Claude Code | OpenCode (with this proxy) |
+|---|---|---|
+| Claude models | yes | yes |
+| Gemini models | hardcoded only | interactive picker |
+| Switch models mid-session | no | yes |
+| Multi-account load balancing | yes (via proxy) | yes (via proxy) |
+
+## Prerequisites
+
+- OpenCode installed (`npm install -g opencode-ai@latest`)
+- Antigravity Claude Proxy running on port 8080
+- At least one Google account linked to the proxy
+
+## Global Configuration
+
+```bash
+mkdir -p ~/.config/opencode
+
+cat > ~/.config/opencode/opencode.json <<'EOF'
+{
+  "$schema": "https://opencode.ai/config.json",
+  "provider": {
+    "antigravity": {
+      "npm": "@ai-sdk/anthropic",
+      "name": "Antigravity Local",
+      "options": {
+        "baseURL": "http://localhost:8080/v1",
+        "apiKey": "{env:ANTHROPIC_API_KEY}"
+      },
+      "models": {
+        "claude-sonnet-4-6": { "id": "claude-sonnet-4-6", "name": "Claude Sonnet 4.6" },
+        "claude-opus-4-6-thinking": { "id": "claude-opus-4-6-thinking", "name": "Claude Opus 4.6 Thinking" },
+        "gemini-2.5-pro": { "id": "gemini-2.5-pro", "name": "Gemini 2.5 Pro" },
+        "gemini-2.5-flash": { "id": "gemini-2.5-flash", "name": "Gemini 2.5 Flash" },
+        "gemini-2.5-flash-lite": { "id": "gemini-2.5-flash-lite", "name": "Gemini 2.5 Flash Lite" },
+        "gemini-2.5-flash-thinking": { "id": "gemini-2.5-flash-thinking", "name": "Gemini 2.5 Flash Thinking" },
+        "gemini-3-flash": { "id": "gemini-3-flash", "name": "Gemini 3 Flash" },
+        "gemini-3-flash-agent": { "id": "gemini-3-flash-agent", "name": "Gemini 3 Flash Agent" },
+        "gemini-pro-agent": { "id": "gemini-pro-agent", "name": "Gemini 3.1 Pro Agent" },
+        "gemini-3.1-pro-low": { "id": "gemini-3.1-pro-low", "name": "Gemini 3.1 Pro Low" },
+        "gemini-3.1-flash-lite": { "id": "gemini-3.1-flash-lite", "name": "Gemini 3.1 Flash Lite" },
+        "gemini-3.1-flash-image": { "id": "gemini-3.1-flash-image", "name": "Gemini 3.1 Flash Image" },
+        "gemini-3.5-flash-low": { "id": "gemini-3.5-flash-low", "name": "Gemini 3.5 Flash" }
+      }
+    }
+  },
+  "model": "antigravity/claude-sonnet-4-6",
+  "small_model": "antigravity/gemini-3.5-flash-low"
+}
+EOF
+```
+
+This config is global and applies automatically every time you run `opencode` from any folder.
+
+## Shell Environment
+
+```bash
+grep -q 'ANTHROPIC_API_KEY=' ~/.zshrc || echo 'export ANTHROPIC_API_KEY="dummy"' >> ~/.zshrc
+grep -q 'ANTHROPIC_BASE_URL=' ~/.zshrc || echo 'export ANTHROPIC_BASE_URL="http://localhost:8080/v1"' >> ~/.zshrc
+source ~/.zshrc
+```
+
+The `ANTHROPIC_API_KEY` value can be anything — the proxy does not validate it. Authentication is handled via your linked Google accounts.
+
+## Start Both Services
+
+```bash
+# Terminal 1: Start the proxy
+antigravity-claude-proxy start
+
+# Terminal 2: Open OpenCode from any project folder
+opencode
+```
+
+## Switching Models
+
+Inside OpenCode, all registered models appear as `antigravity/<model-id>`. The `small_model` field handles background operations — setting it to a Gemini Flash model conserves your Claude quota, the same way `ANTHROPIC_DEFAULT_HAIKU_MODEL` works in Claude Code.
+
+## Available Models
+
+| Model ID | Type | Best For |
+|---|---|---|
+| `claude-sonnet-4-6` | Claude | Coding, refactoring |
+| `claude-opus-4-6-thinking` | Claude | Architecture, deep reasoning |
+| `gemini-2.5-pro` | Gemini | Long context, analysis |
+| `gemini-2.5-flash` | Gemini | Fast general tasks |
+| `gemini-2.5-flash-lite` | Gemini | Background tasks |
+| `gemini-2.5-flash-thinking` | Gemini | Reasoning tasks |
+| `gemini-3-flash` | Gemini | Fast, lightweight |
+| `gemini-3-flash-agent` | Gemini | Agentic workflows |
+| `gemini-pro-agent` | Gemini | Agentic workflows |
+| `gemini-3.1-pro-low` | Gemini | Strong reasoning, 1M context |
+| `gemini-3.1-flash-lite` | Gemini | Lightweight tasks |
+| `gemini-3.1-flash-image` | Gemini | Vision/image tasks |
+| `gemini-3.5-flash-low` | Gemini | Fast tasks, `small_model` recommended |
+
+## Verify Configuration
+
+```bash
+curl "http://localhost:8080/v1/messages" 
+  -H "content-type: application/json" 
+  -H "anthropic-version: 2023-06-01" 
+  -H "x-api-key: dummy" 
+  -d '{"model": "claude-sonnet-4-6", "max_tokens": 100, "messages": [{"role":"user","content":"say hi"}]}'
+```
+
+## Troubleshooting
+
+### `Endpoint POST /messages not found`
+
+Your `baseURL` is missing `/v1`. Set it to `http://localhost:8080/v1`, not `http://localhost:8080`.
+
+### Model returns `400 INVALID_ARGUMENT`
+
+The model is rejected by Google's backend. Remove it from your `models` block.
+
+### Models not appearing in picker
+
+1. Check the config is valid JSON: `cat ~/.config/opencode/opencode.json`
+2. Check the env var is set: `echo $ANTHROPIC_API_KEY`
+3. Open a fresh terminal after config changes
+
+### Connection refused
+
+```bash
+acc status
+curl http://localhost:8080/health
+```
+
+## Further Reading
+
+- [OpenCode Documentation](https://opencode.ai/docs/)
+- [OpenCode Providers](https://opencode.ai/docs/providers/)
+- [Proxy Load Balancing](load-balancing.md)
+- [Proxy Configuration](configuration.md)
+- [Available Models](models.md)

docs/safety-notices.md

@@ -0,0 +1,27 @@
+# Safety, Usage, and Risk Notices
+
+## Intended Use
+
+- Personal / internal development only
+- Respect internal quotas and data handling policies
+- Not for production services or bypassing intended limits
+
+## Not Suitable For
+
+- Production application traffic
+- High-volume automated extraction
+- Any use that violates Acceptable Use Policies
+
+## Warning (Assumption of Risk)
+
+By using this software, you acknowledge and accept the following:
+
+- **Terms of Service risk**: This approach may violate the Terms of Service of AI model providers (Anthropic, Google, etc.). You are solely responsible for ensuring compliance with all applicable terms and policies.
+
+- **Account risk**: Providers may detect this usage pattern and take punitive action, including suspension, permanent ban, or loss of access to paid subscriptions.
+
+- **No guarantees**: Providers may change APIs, authentication, or policies at any time, which can break this method without notice.
+
+- **Assumption of risk**: You assume all legal, financial, and technical risks. The authors and contributors of this project bear no responsibility for any consequences arising from your use.
+
+**Use at your own risk. Proceed only if you understand and accept these risks.**

docs/testing.md

@@ -0,0 +1,24 @@
+# Testing
+
+Run the test suite (requires server running):
+
+```bash
+# Start server in one terminal
+npm start
+
+# Run tests in another terminal
+npm test
+```
+
+Individual tests:
+
+```bash
+npm run test:signatures    # Thinking signatures
+npm run test:multiturn     # Multi-turn with tools
+npm run test:streaming     # Streaming SSE events
+npm run test:interleaved   # Interleaved thinking
+npm run test:images        # Image processing
+npm run test:caching       # Prompt caching
+npm run test:strategies    # Account selection strategies
+npm run test:cache-control # Cache control field stripping
+```

docs/troubleshooting.md

@@ -0,0 +1,145 @@
+# Troubleshooting
+
+## Quick Links
+
+- [Windows: OAuth Port Error (EACCES)](#windows-oauth-port-error-eacces)
+- ["Could not extract token from Antigravity"](#could-not-extract-token-from-antigravity)
+- [401 Authentication Errors](#401-authentication-errors)
+- [Rate Limiting (429)](#rate-limiting-429)
+- [Account Shows as "Invalid"](#account-shows-as-invalid)
+- [403 Permission Denied / VALIDATION_REQUIRED](#403-permission-denied--validation_required)
+
+---
+
+## Windows: OAuth Port Error (EACCES)
+
+On Windows, the default OAuth callback port (51121) may be reserved by Hyper-V, WSL2, or Docker. If you see:
+
+```
+Error: listen EACCES: permission denied 0.0.0.0:51121
+```
+
+The proxy will automatically try fallback ports (51122-51126). If all ports fail, try these solutions:
+
+### Option 1: Use a Custom Port (Recommended)
+
+Set a custom port outside the reserved range:
+
+```bash
+# Windows PowerShell
+$env:OAUTH_CALLBACK_PORT = "3456"
+antigravity-claude-proxy start
+
+# Windows CMD
+set OAUTH_CALLBACK_PORT=3456
+antigravity-claude-proxy start
+
+# Or add to your .env file
+OAUTH_CALLBACK_PORT=3456
+```
+
+### Option 2: Reset Windows NAT
+
+Run as Administrator:
+
+```powershell
+net stop winnat
+net start winnat
+```
+
+### Option 3: Check Reserved Ports
+
+See which ports are reserved:
+
+```powershell
+netsh interface ipv4 show excludedportrange protocol=tcp
+```
+
+If 51121 is in a reserved range, use Option 1 with a port outside those ranges.
+
+### Option 4: Permanently Exclude Port (Admin)
+
+Reserve the port before Hyper-V claims it (run as Administrator):
+
+```powershell
+netsh int ipv4 add excludedportrange protocol=tcp startport=51121 numberofports=1
+```
+
+> **Note:** The server automatically tries fallback ports (51122-51126) if the primary port fails.
+
+---
+
+## "Could not extract token from Antigravity"
+
+If using single-account mode with Antigravity:
+
+1. Make sure Antigravity app is installed and running
+2. Ensure you're logged in to Antigravity
+
+Or add accounts via OAuth instead: `antigravity-claude-proxy accounts add`
+
+## 401 Authentication Errors
+
+The token might have expired. Try:
+
+```bash
+curl -X POST http://localhost:8080/refresh-token
+```
+
+Or re-authenticate the account:
+
+```bash
+antigravity-claude-proxy accounts
+```
+
+## Rate Limiting (429)
+
+With multiple accounts, the proxy automatically switches to the next available account. With a single account, you'll need to wait for the rate limit to reset.
+
+## Account Shows as "Invalid"
+
+Re-authenticate the account:
+
+```bash
+antigravity-claude-proxy accounts
+# Choose "Re-authenticate" for the invalid account
+```
+
+## 403 Permission Denied / VALIDATION_REQUIRED
+
+If you see:
+
+```
+403 VALIDATION_REQUIRED - Account requires verification
+```
+
+This means Google requires your account to complete verification (phone number, captcha, or terms acceptance).
+
+**The proxy handles this automatically:**
+
+1. The affected account is marked invalid and the proxy rotates to the next available account
+2. If a verification URL is provided by Google, it's stored and shown in the WebUI
+3. Other accounts continue working normally while the affected account is paused
+
+**To fix the affected account:**
+
+1. Open the WebUI (http://localhost:8080)
+2. Find the account marked with an error badge
+3. Click the **FIX** button — this opens the Google verification page directly
+4. Complete the verification (phone number, captcha, etc.)
+5. Click the **↻ Refresh** button on the account to re-enable it
+
+**If the FIX button opens an OAuth page instead** (no verification URL was provided), re-authenticate the account:
+
+```bash
+antigravity-claude-proxy accounts
+# Choose "Re-authenticate" for the invalid account
+```
+
+**If all accounts are invalid**, the proxy returns an error immediately instead of waiting indefinitely:
+
+```
+All accounts are invalid: Account requires verification. Visit the WebUI to fix them.
+```
+
+> **Note:** Verification errors persist across server restarts until resolved. Auth errors (token revoked/expired) are reset on restart and require OAuth re-authentication via the FIX button.

docs/web-console.md

@@ -0,0 +1,20 @@
+# Web Management Console
+
+The proxy includes a built-in, modern web interface for real-time monitoring and configuration. Access the console at: `http://localhost:8080` (default port).
+
+![Antigravity Console](../images/webui-dashboard.png)
+
+## Key Features
+
+- **Real-time Dashboard**: Monitor request volume, active accounts, model health, and subscription tier distribution.
+- **Visual Model Quota**: Track per-model usage and next reset times with color-coded progress indicators and draggable per-account threshold markers.
+- **Account Management**: Add/remove Google accounts via OAuth, view subscription tiers (Free/Pro/Ultra), quota status, and per-account threshold settings.
+- **Manual OAuth Mode**: Add accounts on headless servers by copying the OAuth URL and pasting the authorization code.
+- **Claude CLI Configuration**: Edit your `~/.claude/settings.json` directly from the browser.
+- **Persistent History**: Tracks request volume by model family for 30 days, persisting across server restarts.
+- **Time Range Filtering**: Analyze usage trends over 1H, 6H, 24H, 7D, or All Time periods.
+- **Smart Analysis**: Auto-select top 5 most used models or toggle between Family/Model views.
+- **Live Logs**: Stream server logs with level-based filtering and search.
+- **Quota Protection**: Set global or per-account minimum quota thresholds to proactively switch accounts before quota runs out.
+- **Advanced Tuning**: Configure retries, timeouts, and debug mode on the fly.
+- **Multi-language Interface**: Full support for English, Chinese (中文), Indonesian (Bahasa), Portuguese (PT-BR), and Turkish (Türkçe).

package.json

@@ -0,0 +1,78 @@
+{
+  "name": "antigravity-claude-proxy",
+  "version": "2.7.7",
+  "description": "Proxy server to use Antigravity's Claude models with Claude Code CLI",
+  "main": "src/index.js",
+  "type": "module",
+  "bin": {
+    "antigravity-claude-proxy": "bin/cli.js",
+    "acc": "bin/cli.js"
+  },
+  "files": [
+    "src",
+    "bin",
+    "public"
+  ],
+  "scripts": {
+    "build:css": "tailwindcss -i ./public/css/src/input.css -o ./public/css/style.css --minify",
+    "watch:css": "tailwindcss -i ./public/css/src/input.css -o ./public/css/style.css --watch",
+    "prepare": "npm run build:css",
+    "start": "node src/index.js",
+    "dev": "node --watch src/index.js",
+    "dev:full": "concurrently \"npm run watch:css\" \"npm run dev\"",
+    "accounts": "node src/cli/accounts.js",
+    "accounts:add": "node src/cli/accounts.js add",
+    "accounts:list": "node src/cli/accounts.js list",
+    "accounts:remove": "node src/cli/accounts.js remove",
+    "accounts:verify": "node src/cli/accounts.js verify",
+    "test": "node tests/run-all.cjs",
+    "test:signatures": "node tests/test-thinking-signatures.cjs",
+    "test:multiturn": "node tests/test-multiturn-thinking-tools.cjs",
+    "test:streaming": "node tests/test-multiturn-thinking-tools-streaming.cjs",
+    "test:interleaved": "node tests/test-interleaved-thinking.cjs",
+    "test:images": "node tests/test-images.cjs",
+    "test:caching": "node tests/test-caching-streaming.cjs",
+    "test:crossmodel": "node tests/test-cross-model-thinking.cjs",
+    "test:oauth": "node tests/test-oauth-no-browser.cjs",
+    "test:emptyretry": "node tests/test-empty-response-retry.cjs",
+    "test:sanitizer": "node tests/test-schema-sanitizer.cjs",
+    "test:strategies": "node tests/test-strategies.cjs",
+    "test:cache-control": "node tests/test-cache-control.cjs",
+    "test:migration": "node --test tests/migration/*.test.js"
+  },
+  "keywords": [
+    "claude",
+    "anthropic",
+    "antigravity",
+    "proxy",
+    "vertex-ai"
+  ],
+  "author": "Badri Narayanan",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/badri-s2001/antigravity-claude-proxy.git"
+  },
+  "homepage": "https://github.com/badri-s2001/antigravity-claude-proxy#readme",
+  "bugs": {
+    "url": "https://github.com/badri-s2001/antigravity-claude-proxy/issues"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "dependencies": {
+    "async-mutex": "^0.5.0",
+    "better-sqlite3": "^12.5.0",
+    "cors": "^2.8.5",
+    "express": "^4.18.2",
+    "undici": "^7.20.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/forms": "^0.5.7",
+    "autoprefixer": "^10.4.16",
+    "concurrently": "^8.2.2",
+    "daisyui": "^4.12.14",
+    "postcss": "^8.4.32",
+    "tailwindcss": "^3.4.0"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+}

public/app.js

@@ -0,0 +1,227 @@
+/**
+ * Antigravity Console - Main Entry
+ *
+ * This file orchestrates Alpine.js initialization.
+ * Components are loaded via separate script files that register themselves
+ * to window.Components before this script runs.
+ */
+
+document.addEventListener('alpine:init', () => {
+    // Register Components (loaded from separate files via window.Components)
+    Alpine.data('dashboard', window.Components.dashboard);
+    Alpine.data('models', window.Components.models);
+    Alpine.data('accountManager', window.Components.accountManager);
+    Alpine.data('claudeConfig', window.Components.claudeConfig);
+    Alpine.data('logsViewer', window.Components.logsViewer);
+    Alpine.data('addAccountModal', window.Components.addAccountModal);
+
+    // View Loader Directive
+    Alpine.directive('load-view', (el, { expression }, { evaluate }) => {
+        if (!window.viewCache) window.viewCache = new Map();
+
+        // Evaluate the expression to get the actual view name (removes quotes)
+        const viewName = evaluate(expression);
+
+        if (window.viewCache.has(viewName)) {
+            el.innerHTML = window.viewCache.get(viewName);
+            Alpine.initTree(el);
+            return;
+        }
+
+        fetch(`views/${viewName}.html?t=${Date.now()}`)
+            .then(response => {
+                if (!response.ok) throw new Error(`HTTP ${response.status}`);
+                return response.text();
+            })
+            .then(html => {
+                // Update cache (optional, or remove if we want always-fresh)
+                // keeping cache for session performance, but initial load will now bypass browser cache
+                window.viewCache.set(viewName, html);
+                el.innerHTML = html;
+                Alpine.initTree(el);
+            })
+            .catch(err => {
+                console.error('Failed to load view:', viewName, err);
+                el.innerHTML = `<div class="p-4 border border-red-500/50 bg-red-500/10 rounded-lg text-red-400 font-mono text-sm">
+                    Error loading view: ${viewName}<br>
+                    <span class="text-xs opacity-75">${err.message}</span>
+                </div>`;
+            });
+    });
+
+    // Main App Controller
+    Alpine.data('app', () => ({
+        get connectionStatus() {
+            return Alpine.store('data')?.connectionStatus || 'connecting';
+        },
+        get loading() {
+            return Alpine.store('data')?.loading || false;
+        },
+
+        sidebarOpen: window.innerWidth >= 1024,
+        toggleSidebar() {
+            this.sidebarOpen = !this.sidebarOpen;
+        },
+
+        init() {
+            // Handle responsive sidebar transitions
+            let lastWidth = window.innerWidth;
+            let resizeTimeout = null;
+            
+            window.addEventListener('resize', () => {
+                if (resizeTimeout) clearTimeout(resizeTimeout);
+                
+                resizeTimeout = setTimeout(() => {
+                    const currentWidth = window.innerWidth;
+                    const lgBreakpoint = 1024;
+                    
+                    // Desktop -> Mobile: Auto-close sidebar to prevent overlay blocking screen
+                    if (lastWidth >= lgBreakpoint && currentWidth < lgBreakpoint) {
+                        this.sidebarOpen = false;
+                    }
+                    
+                    // Mobile -> Desktop: Auto-open sidebar (restore standard desktop layout)
+                    if (lastWidth < lgBreakpoint && currentWidth >= lgBreakpoint) {
+                        this.sidebarOpen = true;
+                    }
+                    
+                    lastWidth = currentWidth;
+                }, 150);
+            });
+
+            // Theme setup
+            document.documentElement.setAttribute('data-theme', 'black');
+            document.documentElement.classList.add('dark');
+
+            // Chart Defaults
+            if (typeof Chart !== 'undefined') {
+                Chart.defaults.color = window.utils.getThemeColor('--color-text-dim');
+                Chart.defaults.borderColor = window.utils.getThemeColor('--color-space-border');
+                Chart.defaults.font.family = '"JetBrains Mono", monospace';
+            }
+
+            // Start Data Polling
+            this.startAutoRefresh();
+            document.addEventListener('refresh-interval-changed', () => this.startAutoRefresh());
+
+            // Initial Fetch
+            Alpine.store('data').fetchData();
+        },
+
+        refreshTimer: null,
+
+        fetchData() {
+            Alpine.store('data').fetchData();
+        },
+
+        startAutoRefresh() {
+            if (this.refreshTimer) clearInterval(this.refreshTimer);
+            const interval = parseInt(Alpine.store('settings')?.refreshInterval || 60);
+            if (interval > 0) {
+                this.refreshTimer = setInterval(() => Alpine.store('data').fetchData(), interval * 1000);
+            }
+        },
+
+        t(key) {
+            return Alpine.store('global')?.t(key) || key;
+        },
+
+        async addAccountWeb(reAuthEmail = null) {
+            const password = Alpine.store('global').webuiPassword;
+            try {
+                const urlPath = reAuthEmail
+                    ? `/api/auth/url?email=${encodeURIComponent(reAuthEmail)}`
+                    : '/api/auth/url';
+
+                const { response, newPassword } = await window.utils.request(urlPath, {}, password);
+                if (newPassword) Alpine.store('global').webuiPassword = newPassword;
+
+                const data = await response.json();
+
+                if (data.status === 'ok') {
+                    // Show info toast that OAuth is in progress
+                    Alpine.store('global').showToast(Alpine.store('global').t('oauthInProgress'), 'info');
+
+                    // Open OAuth window
+                    const oauthWindow = window.open(data.url, 'google_oauth', 'width=600,height=700,scrollbars=yes');
+
+                    // Poll for account changes instead of relying on postMessage
+                    // (since OAuth callback is now on port 51121, not this server)
+                    const initialAccountCount = Alpine.store('data').accounts.length;
+                    let pollCount = 0;
+                    const maxPolls = 60; // 2 minutes (2 second intervals)
+                    let cancelled = false;
+
+                    // Show progress modal
+                    Alpine.store('global').oauthProgress = {
+                        active: true,
+                        current: 0,
+                        max: maxPolls,
+                        cancel: () => {
+                            cancelled = true;
+                            clearInterval(pollInterval);
+                            Alpine.store('global').oauthProgress.active = false;
+                            Alpine.store('global').showToast(Alpine.store('global').t('oauthCancelled'), 'info');
+                            if (oauthWindow && !oauthWindow.closed) {
+                                oauthWindow.close();
+                            }
+                        }
+                    };
+
+                    const pollInterval = setInterval(async () => {
+                        if (cancelled) {
+                            clearInterval(pollInterval);
+                            return;
+                        }
+
+                        pollCount++;
+                        Alpine.store('global').oauthProgress.current = pollCount;
+
+                        // Check if OAuth window was closed manually
+                        if (oauthWindow && oauthWindow.closed && !cancelled) {
+                            clearInterval(pollInterval);
+                            Alpine.store('global').oauthProgress.active = false;
+                            Alpine.store('global').showToast(Alpine.store('global').t('oauthWindowClosed'), 'warning');
+                            return;
+                        }
+
+                        // Refresh account list
+                        await Alpine.store('data').fetchData();
+
+                        // Check if new account was added
+                        const currentAccountCount = Alpine.store('data').accounts.length;
+                        if (currentAccountCount > initialAccountCount) {
+                            clearInterval(pollInterval);
+                            Alpine.store('global').oauthProgress.active = false;
+
+                            const actionKey = reAuthEmail ? 'accountReauthSuccess' : 'accountAddedSuccess';
+                            Alpine.store('global').showToast(
+                                Alpine.store('global').t(actionKey),
+                                'success'
+                            );
+                            document.getElementById('add_account_modal')?.close();
+
+                            if (oauthWindow && !oauthWindow.closed) {
+                                oauthWindow.close();
+                            }
+                        }
+
+                        // Stop polling after max attempts
+                        if (pollCount >= maxPolls) {
+                            clearInterval(pollInterval);
+                            Alpine.store('global').oauthProgress.active = false;
+                            Alpine.store('global').showToast(
+                                Alpine.store('global').t('oauthTimeout'),
+                                'warning'
+                            );
+                        }
+                    }, 2000); // Poll every 2 seconds
+                } else {
+                    Alpine.store('global').showToast(data.error || Alpine.store('global').t('failedToGetAuthUrl'), 'error');
+                }
+            } catch (e) {
+                Alpine.store('global').showToast(Alpine.store('global').t('failedToStartOAuth') + ': ' + e.message, 'error');
+            }
+        }
+    }));
+});

public/css/src/input.css

@@ -0,0 +1,523 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  /* === Background Layers === */
+  --color-space-950: #09090b;
+  --color-space-900: #0f0f11;
+  --color-space-850: #121214;
+  --color-space-800: #18181b;
+  --color-space-border: #27272a;
+
+  /* === Neon Accents (Full Saturation) === */
+  --color-neon-purple: #a855f7;
+  --color-neon-green: #22c55e;
+  --color-neon-cyan: #06b6d4;
+  --color-neon-yellow: #eab308;
+  --color-neon-red: #ef4444;
+
+  /* === Soft Neon (Reduced Saturation for Fills) === */
+  --color-neon-purple-soft: #9333ea;
+  --color-neon-green-soft: #16a34a;
+  --color-neon-cyan-soft: #0891b2;
+
+  /* === Text Hierarchy (WCAG AA Compliant) === */
+  --color-text-primary: #ffffff; /* Emphasis: Titles, Key Numbers */
+  --color-text-secondary: #d4d4d8; /* Content: Body Text (zinc-300) */
+  --color-text-tertiary: #a1a1aa; /* Metadata: Timestamps, Labels (zinc-400) */
+  --color-text-quaternary: #71717a; /* Subtle: Decorative (zinc-500) */
+
+  /* === Legacy Aliases (Backward Compatibility) === */
+  --color-text-main: var(--color-text-secondary);
+  --color-text-dim: var(--color-text-tertiary);
+  --color-text-muted: var(--color-text-tertiary);
+  --color-text-bright: var(--color-text-primary);
+
+  /* Gradient Accents */
+  --color-green-400: #4ade80;
+  --color-yellow-400: #facc15;
+  --color-red-400: #f87171;
+
+  /* Chart Colors */
+  --color-chart-1: #a855f7;
+  --color-chart-2: #c084fc;
+  --color-chart-3: #e879f9;
+  --color-chart-4: #d946ef;
+  --color-chart-5: #22c55e;
+  --color-chart-6: #4ade80;
+  --color-chart-7: #86efac;
+  --color-chart-8: #10b981;
+  --color-chart-9: #06b6d4;
+  --color-chart-10: #f59e0b;
+  --color-chart-11: #ef4444;
+  --color-chart-12: #ec4899;
+  --color-chart-13: #8b5cf6;
+  --color-chart-14: #14b8a6;
+  --color-chart-15: #f97316;
+  --color-chart-16: #6366f1;
+}
+
+[x-cloak] {
+  display: none !important;
+}
+
+/* Custom Scrollbar */
+.custom-scrollbar {
+  scrollbar-gutter: stable;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(9, 9, 11, 0.3);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, #27272a 0%, #18181b 100%);
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  transition: background 0.2s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(180deg, #3f3f46 0%, #27272a 100%);
+  border-color: rgba(168, 85, 247, 0.3);
+}
+
+/* Animations */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.4s ease-out forwards;
+}
+
+.nav-item.active {
+  background: linear-gradient(
+    90deg,
+    theme("colors.neon.purple / 15%") 0%,
+    transparent 100%
+  );
+  @apply border-l-4 border-neon-purple text-white;
+}
+
+.nav-item {
+  @apply border-l-4 border-transparent transition-all duration-200;
+}
+
+.progress-gradient-success::-webkit-progress-value {
+  background-image: linear-gradient(
+    to right,
+    var(--color-neon-green),
+    var(--color-green-400)
+  );
+}
+
+.progress-gradient-warning::-webkit-progress-value {
+  background-image: linear-gradient(
+    to right,
+    var(--color-neon-yellow),
+    var(--color-yellow-400)
+  );
+}
+
+.progress-gradient-error::-webkit-progress-value {
+  background-image: linear-gradient(
+    to right,
+    var(--color-neon-red),
+    var(--color-red-400)
+  );
+}
+
+/* Dashboard Grid */
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 1.5rem;
+}
+
+/* Tooltip Customization */
+.tooltip:before {
+  @apply bg-space-800 border border-space-border text-gray-200 font-mono text-xs;
+}
+
+.tooltip-left:before {
+  margin-right: 0.5rem;
+}
+
+/* -------------------------------------------------------------------------- */
+/* Refactored Global Utilities                                                */
+/* -------------------------------------------------------------------------- */
+
+/* Standard Layout Constants */
+:root {
+  --view-padding: 2rem; /* 32px - Standard Padding */
+  --view-gap: 2rem; /* 32px - Standard component gap */
+  --card-radius: 0.75rem; /* 12px */
+}
+
+@media (max-width: 768px) {
+  :root {
+    --view-padding: 1rem;
+    --view-gap: 1.25rem;
+  }
+}
+
+/* Base View Container */
+.view-container {
+    display: flex;
+    flex-direction: column;
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+    padding: var(--view-padding);
+    gap: var(--view-gap);
+    min-height: calc(100vh - 56px); /* Align with navbar height */
+    max-width: 1400px;
+    scrollbar-gutter: stable;
+}
+
+/* Specialized container for data-heavy pages (Logs) */
+.view-container-full {
+  @apply w-full animate-fade-in flex flex-col;
+  padding: var(--view-padding);
+  gap: var(--view-gap);
+  min-height: calc(100vh - 56px);
+  max-width: 100%;
+}
+
+/* Centered container for form-heavy pages (Settings/Accounts) */
+.view-container-centered {
+  @apply mx-auto w-full animate-fade-in flex flex-col;
+  padding: var(--view-padding);
+  gap: var(--view-gap);
+  min-height: calc(100vh - 56px);
+  max-width: 900px; /* Comfortable reading width for forms */
+}
+
+/* Standard Section Header */
+.view-header {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    margin-bottom: 0.5rem;
+    gap: 1rem;
+}
+
+@media (min-width: 768px) {
+    .view-header {
+        flex-direction: row;
+        align-items: flex-end;
+    }
+}
+
+.view-header-title {
+  @apply flex flex-col;
+}
+
+.view-header-title h2 {
+  @apply text-2xl font-bold text-white tracking-tight;
+}
+
+.view-header-title p {
+  @apply text-sm text-gray-500 mt-1;
+}
+
+.view-header-actions {
+  @apply flex items-center gap-3;
+}
+
+/* Standard Card Panel */
+.view-card {
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--card-radius);
+    padding: 1.5rem;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: linear-gradient(135deg,
+        rgba(15, 15, 17, 0.75) 0%,
+        rgba(18, 18, 20, 0.70) 100%
+    );
+    -webkit-backdrop-filter: blur(12px);
+    backdrop-filter: blur(12px);
+    box-shadow:
+        0 0 0 1px rgba(255, 255, 255, 0.02) inset,
+        0 4px 24px rgba(0, 0, 0, 0.4);
+    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.view-card:hover {
+    border-color: rgba(255, 255, 255, 0.12);
+    box-shadow:
+        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
+        0 8px 32px rgba(0, 0, 0, 0.5);
+}
+
+.view-card-header {
+  @apply flex items-center justify-between mb-4 pb-4 border-b border-[rgba(39,39,42,0.3)];
+}
+
+/* Component Unification */
+.standard-table {
+  @apply table w-full border-separate border-spacing-0;
+}
+.standard-table thead {
+  @apply bg-space-900/50 text-gray-500 font-mono text-xs uppercase border-b border-space-border;
+}
+.standard-table tbody tr {
+  @apply transition-all duration-200 border-b border-[rgba(39,39,42,0.3)] last:border-0;
+}
+
+.standard-table tbody tr:hover {
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.05) 50%,
+    rgba(255, 255, 255, 0.03) 100%
+  );
+  border-color: rgba(255, 255, 255, 0.08);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+/* Custom Range Slider - Simplified */
+.custom-range {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 4px;
+  background: var(--color-space-800);
+  border-radius: 999px;
+  outline: none;
+  cursor: pointer;
+}
+
+.custom-range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--range-color, var(--color-neon-purple));
+  cursor: pointer;
+  transition: transform 0.1s ease;
+}
+
+.custom-range::-webkit-slider-thumb:hover {
+  transform: scale(1.15);
+}
+
+.custom-range::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  border: none;
+  border-radius: 50%;
+  background: var(--range-color, var(--color-neon-purple));
+  cursor: pointer;
+  transition: transform 0.1s ease;
+}
+
+.custom-range::-moz-range-thumb:hover {
+  transform: scale(1.15);
+}
+
+/* Color Variants */
+.custom-range-purple {
+  --range-color: var(--color-neon-purple);
+}
+.custom-range-green {
+  --range-color: var(--color-neon-green);
+}
+.custom-range-cyan {
+  --range-color: var(--color-neon-cyan);
+}
+.custom-range-yellow {
+  --range-color: var(--color-neon-yellow);
+}
+.custom-range-accent {
+  --range-color: var(--color-neon-cyan);
+}
+
+/* -------------------------------------------------------------------------- */
+/* Refactored UI Components (Phase 1.2)                                       */
+/* -------------------------------------------------------------------------- */
+
+/* Phase 1.2 additions ... */
+
+/* Filter Controls */
+.filter-control {
+    @apply flex items-center justify-center gap-2 px-3 py-1.5 lg:px-4 lg:py-2 
+           text-[10px] lg:text-xs font-mono font-medium text-gray-400 
+           bg-space-800 lg:bg-transparent border border-space-border/50 lg:border-transparent 
+           rounded lg:rounded-md hover:text-white lg:hover:bg-space-800 
+           transition-all duration-200 whitespace-nowrap w-full sm:w-auto;
+}
+
+.filter-control:hover {
+    @apply border-neon-cyan/50 lg:border-neon-cyan/30 lg:shadow-lg lg:shadow-neon-cyan/10;
+}
+
+.filter-control-item {
+    @apply block w-full px-3 py-1.5 text-left text-[10px] font-mono hover:bg-white/5 transition-colors;
+}
+
+/* Action Buttons */
+.btn-action-ghost {
+  @apply btn btn-xs btn-ghost text-gray-400 hover:text-white transition-colors;
+}
+
+.btn-action-ghost-square {
+  @apply btn btn-xs btn-ghost btn-square text-gray-400 hover:text-white transition-colors;
+}
+
+.btn-action-primary {
+  @apply btn bg-gradient-to-r from-neon-purple to-indigo-600
+         border-none text-white shadow-lg shadow-neon-purple/20
+         hover:shadow-neon-purple/40 transition-all;
+}
+
+.btn-action-success {
+  @apply btn btn-xs btn-ghost btn-square text-green-500 hover:bg-green-500/20;
+}
+
+.btn-action-danger {
+  @apply btn btn-xs btn-ghost btn-square text-red-400 hover:bg-red-500/20;
+}
+
+.btn-action-neutral {
+  @apply btn btn-xs btn-ghost btn-square text-gray-500 hover:bg-gray-500/20;
+}
+
+/* Status Pills/Badges */
+.status-pill {
+  @apply px-2 py-1 text-[10px] font-mono font-bold uppercase rounded border;
+}
+
+.status-pill-purple {
+  @apply status-pill bg-neon-purple/10 text-neon-purple border-neon-purple/30;
+}
+
+.status-pill-ultra {
+  @apply status-pill bg-yellow-500/10 text-yellow-400 border-yellow-500/30;
+}
+
+.status-pill-pro {
+  @apply status-pill bg-blue-500/10 text-blue-400 border-blue-500/30;
+}
+
+.status-pill-free {
+  @apply status-pill bg-gray-500/10 text-gray-400 border-gray-500/30;
+}
+
+.status-pill-success {
+  @apply status-pill bg-neon-green/10 text-neon-green border-neon-green/30;
+}
+
+.status-pill-warning {
+  @apply status-pill bg-yellow-500/10 text-yellow-400 border-yellow-500/30;
+}
+
+.status-pill-error {
+  @apply status-pill bg-red-500/10 text-red-400 border-red-500/30;
+}
+
+/* Input Components */
+.input-search {
+  @apply w-full bg-space-900/50 border border-[rgba(39,39,42,0.5)] text-gray-300
+         rounded-lg pl-10 pr-4 py-2
+         focus:outline-none focus:bg-space-800 focus:border-neon-purple/50
+         hover:border-space-border hover:bg-space-800/80
+         transition-all placeholder-gray-600/80;
+}
+
+.input-search-sm {
+  @apply input-search h-8 text-xs font-normal;
+}
+
+/* -------------------------------------------------------------------------- */
+/* Skeleton Loading (Phase 4.1)                                               */
+/* -------------------------------------------------------------------------- */
+
+/* Skeleton animation */
+@keyframes skeleton-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+
+/* Base skeleton element */
+.skeleton {
+  @apply bg-gradient-to-r from-space-900/60 via-space-800/40 to-space-900/60;
+  background-size: 200% 100%;
+  animation: skeleton-pulse 1.5s ease-in-out infinite;
+  border-radius: 0.375rem;
+}
+
+/* Skeleton variants */
+.skeleton-text {
+  @apply skeleton h-4 w-full;
+}
+
+.skeleton-text-sm {
+  @apply skeleton h-3 w-3/4;
+}
+
+.skeleton-title {
+  @apply skeleton h-6 w-1/2;
+}
+
+.skeleton-circle {
+  @apply skeleton rounded-full;
+}
+
+.skeleton-stat-card {
+  @apply skeleton h-32 w-full rounded-xl;
+}
+
+.skeleton-chart {
+  @apply skeleton h-64 w-full rounded-xl;
+}
+
+.skeleton-table-row {
+  @apply skeleton h-12 w-full mb-2;
+}
+
+/* Fix DaisyUI toggle hover background override */
+.toggle-success:checked,
+.toggle-success[aria-checked="true"] {
+  background-color: oklch(var(--su)) !important;
+}
+
+/* Desktop Sidebar Collapsed State */
+@media (min-width: 1024px) {
+  body .sidebar-collapsed {
+    width: 0;
+    padding: 0;
+    border: none;
+  }
+}

public/index.html

@@ -0,0 +1,434 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="antigravity" class="dark">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Antigravity Console</title>
+    <link rel="icon" type="image/svg+xml" href="favicon.svg">
+
+    <!-- Libraries -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <!-- Alpine.js must be deferred so stores register their listeners first -->
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+
+    <!-- Compiled Tailwind CSS (includes DaisyUI) -->
+    <link rel="stylesheet" href="css/style.css">
+</head>
+
+<body
+    class="bg-space-950 text-gray-300 font-sans antialiased min-h-screen overflow-hidden selection:bg-neon-purple selection:text-white"
+    x-cloak x-data="app" x-init="if(window.UILogger) window.UILogger.debug('App initialized')">
+
+    <!-- Toast Notification -->
+    <div class="fixed top-4 right-4 z-[100] flex flex-col gap-2 pointer-events-none">
+        <template x-if="$store.global.toast">
+            <div x-transition:enter="transition ease-out duration-300"
+                x-transition:enter-start="opacity-0 translate-x-8 scale-95"
+                x-transition:enter-end="opacity-100 translate-x-0 scale-100"
+                x-transition:leave="transition ease-in duration-200"
+                x-transition:leave-start="opacity-100 translate-x-0 scale-100"
+                x-transition:leave-end="opacity-0 translate-x-4 scale-95"
+                class="alert shadow-lg border backdrop-blur-md pointer-events-auto min-w-[300px]" :class="{
+                    'alert-info border-neon-cyan/20 bg-space-900/90 text-neon-cyan': $store.global.toast.type === 'info',
+                    'alert-success border-neon-green/20 bg-space-900/90 text-neon-green': $store.global.toast.type === 'success',
+                    'alert-error border-red-500/20 bg-space-900/90 text-red-400': $store.global.toast.type === 'error'
+                 }">
+                <div class="flex items-center gap-3">
+                    <!-- Icons based on type -->
+                    <template x-if="$store.global.toast.type === 'info'">
+                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                    </template>
+                    <template x-if="$store.global.toast.type === 'success'">
+                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                    </template>
+                    <template x-if="$store.global.toast.type === 'error'">
+                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                    </template>
+                    <span x-text="$store.global.toast.message" class="font-mono text-sm"></span>
+                </div>
+            </div>
+        </template>
+    </div>
+
+    <!-- Navbar -->
+    <div
+        class="h-14 border-b border-space-border flex items-center px-4 lg:px-6 justify-between bg-space-900/50 backdrop-blur-md z-50 relative">
+        <div class="flex items-center gap-3">
+            <!-- Mobile Menu Button -->
+            <button @click="toggleSidebar()" class="text-gray-400 hover:text-white focus:outline-none p-1 transition-colors">
+                <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+                </svg>
+            </button>
+
+            <div
+                class="w-8 h-8 rounded bg-gradient-to-br from-neon-purple to-blue-600 flex items-center justify-center text-white font-bold shadow-[0_0_15px_rgba(168,85,247,0.4)]">
+                AG</div>
+            <div class="flex flex-col">
+                <span class="text-sm font-bold tracking-wide text-white"
+                    x-text="$store.global.t('systemName')">ANTIGRAVITY</span>
+                <div class="flex items-center gap-1.5">
+                    <span class="text-[10px] text-gray-500 font-mono tracking-wider"
+                        x-text="$store.global.t('systemDesc')">CLAUDE PROXY SYSTEM</span>
+                    <span class="text-[10px] text-gray-500 font-mono tracking-wider"
+                        x-text="'v' + $store.global.version">v1.0.0</span>
+                </div>
+            </div>
+        </div>
+
+        <div class="flex items-center gap-4">
+            <!-- Connection Pill -->
+            <div class="flex items-center gap-2 px-3 py-1 rounded-full text-xs font-mono border transition-all duration-300"
+                :class="connectionStatus === 'connected'
+                    ? 'bg-neon-green/10 border-neon-green/20 text-neon-green'
+                    : (connectionStatus === 'connecting' ? 'bg-yellow-500/10 border-yellow-500/20 text-yellow-500' : 'bg-red-500/10 border-red-500/20 text-red-500')">
+                <div class="w-1.5 h-1.5 rounded-full"
+                    :class="connectionStatus === 'connected' ? 'bg-neon-green shadow-[0_0_8px_rgba(34,197,94,0.6)]' : (connectionStatus === 'connecting' ? 'bg-yellow-500 animate-pulse' : 'bg-red-500')">
+                </div>
+                <span
+                    x-text="connectionStatus === 'connected' ? $store.global.t('online') : (connectionStatus === 'disconnected' ? $store.global.t('offline') : $store.global.t('connecting'))"></span>
+            </div>
+
+            <div class="h-4 w-px bg-space-border"></div>
+
+            <!-- Refresh Button -->
+            <button type="button" class="btn btn-ghost btn-xs btn-square text-gray-400 hover:text-white hover:bg-white/5"
+                @click="fetchData" :disabled="loading" :title="$store.global.t('refreshData')" aria-label="Refresh data">
+                <svg class="w-4 h-4" :class="{'animate-spin': loading}" fill="none" stroke="currentColor"
+                    viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                </svg>
+            </button>
+        </div>
+    </div>
+
+    <!-- Layout -->
+    <div class="flex h-[calc(100vh-56px)] relative">
+
+        <!-- Mobile Sidebar Overlay -->
+        <div x-show="sidebarOpen" 
+             x-transition:enter="transition-opacity ease-linear duration-300"
+             x-transition:enter-start="opacity-0"
+             x-transition:enter-end="opacity-100"
+             x-transition:leave="transition-opacity ease-linear duration-300"
+             x-transition:leave-start="opacity-100"
+             x-transition:leave-end="opacity-0"
+             @click="sidebarOpen = false"
+             class="fixed inset-0 bg-black/50 z-40 lg:hidden"
+             style="display: none;"></div>
+
+        <!-- Sidebar -->
+        <div class="fixed top-14 bottom-0 left-0 z-40 bg-space-900 border-r border-space-border transition-all duration-300 shadow-2xl overflow-hidden lg:static lg:h-auto lg:shadow-none lg:flex-shrink-0"
+             :class="{
+                 'translate-x-0': sidebarOpen,
+                 '-translate-x-full': !sidebarOpen,
+                 'w-64': sidebarOpen,
+                 'lg:translate-x-0': sidebarOpen,
+                 'lg:w-64': sidebarOpen,
+                 'sidebar-collapsed': !sidebarOpen
+             }">
+             
+            <!-- Inner Sidebar Content (Fixed Width to prevent squashing) -->
+            <div class="w-64 flex flex-col h-full pt-6 pb-4 flex-shrink-0">
+                <!-- Mobile Menu Header -->
+                <div class="flex items-center justify-between px-4 mb-6 lg:hidden">
+                    <span class="text-sm font-bold text-white" x-text="$store.global.t('menu')">Menu</span>
+                    <button @click="sidebarOpen = false" class="text-gray-400 hover:text-white">
+                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                    </button>
+                </div>
+
+                <!-- Desktop Header (Main) -->
+                <div class="px-4 mb-2 text-xs font-bold text-gray-600 uppercase tracking-widest hidden lg:block"
+                    x-text="$store.global.t('main')">Main</div>
+                
+                <nav class="flex flex-col gap-1">
+                    <button
+                        class="nav-item flex items-center gap-3 px-6 py-3 text-sm font-medium text-gray-400 hover:text-white hover:bg-white/5"
+                        :class="{'active': $store.global.activeTab === 'dashboard'}"
+                        @click="$store.global.activeTab = 'dashboard'">
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
+                        </svg>
+                        <span x-text="$store.global.t('dashboard')">Dashboard</span>
+                    </button>
+                    <button
+                        class="nav-item flex items-center gap-3 px-6 py-3 text-sm font-medium text-gray-400 hover:text-white hover:bg-white/5"
+                        :class="{'active': $store.global.activeTab === 'models'}"
+                        @click="$store.global.activeTab = 'models'">
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+                        </svg>
+                        <span x-text="$store.global.t('models')">Models</span>
+                    </button>
+                    <button
+                        class="nav-item flex items-center gap-3 px-6 py-3 text-sm font-medium text-gray-400 hover:text-white hover:bg-white/5"
+                        :class="{'active': $store.global.activeTab === 'accounts'}"
+                        @click="$store.global.activeTab = 'accounts'">
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
+                        </svg>
+                        <span x-text="$store.global.t('accounts')">Accounts</span>
+                    </button>
+                </nav>
+
+                <div class="px-4 mt-8 mb-2 text-xs font-bold text-gray-600 uppercase tracking-widest"
+                    x-text="$store.global.t('system')">System</div>
+                <nav class="flex flex-col gap-1">
+                    <button
+                        class="nav-item flex items-center gap-3 px-6 py-3 text-sm font-medium text-gray-400 hover:text-white hover:bg-white/5"
+                        :class="{'active': $store.global.activeTab === 'logs'}" @click="$store.global.activeTab = 'logs'">
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                        </svg>
+                        <span x-text="$store.global.t('logs')">Logs</span>
+                    </button>
+                    <button
+                        class="nav-item flex items-center gap-3 px-6 py-3 text-sm font-medium text-gray-400 hover:text-white hover:bg-white/5"
+                        :class="{'active': $store.global.activeTab === 'settings'}"
+                        @click="$store.global.activeTab = 'settings'">
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                        </svg>
+                        <span x-text="$store.global.t('settings')">Settings</span>
+                    </button>
+                </nav>
+
+                <!-- Footer Info -->
+                <div class="mt-auto px-6 text-xs text-gray-400 font-mono">
+                    <div class="flex justify-center">
+                        <a href="https://github.com/badri-s2001/antigravity-claude-proxy" target="_blank" rel="noopener noreferrer"
+                            class="flex items-center gap-1.5 hover:text-neon-purple transition-colors">
+                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+                            </svg>
+                            <span x-text="$store.global.t('github')">GitHub</span>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Main Content -->
+        <div class="flex-1 overflow-auto bg-space-950 relative custom-scrollbar">
+
+            <!-- Views Container -->
+            <!-- Dashboard -->
+            <div x-show="$store.global.activeTab === 'dashboard'" x-load-view="'dashboard'"
+                x-transition:enter="fade-enter-active" x-transition:enter-start="fade-enter-from"
+                class="w-full"></div>
+
+            <!-- Models -->
+            <div x-show="$store.global.activeTab === 'models'" x-load-view="'models'"
+                x-transition:enter="fade-enter-active" x-transition:enter-start="fade-enter-from"
+                class="w-full"></div>
+
+            <!-- Logs -->
+            <div x-show="$store.global.activeTab === 'logs'" x-load-view="'logs'" x-transition:enter="fade-enter-active"
+                x-transition:enter-start="fade-enter-from" class="w-full h-full"></div>
+
+            <!-- Accounts -->
+            <div x-show="$store.global.activeTab === 'accounts'" x-load-view="'accounts'"
+                x-transition:enter="fade-enter-active" x-transition:enter-start="fade-enter-from"
+                class="w-full"></div>
+
+            <!-- Settings -->
+            <div x-show="$store.global.activeTab === 'settings'" x-load-view="'settings'"
+                x-transition:enter="fade-enter-active" x-transition:enter-start="fade-enter-from"
+                class="w-full"></div>
+        </div>
+    </div>
+
+    <!-- Add Account Modal -->
+    <dialog id="add_account_modal" class="modal backdrop-blur-sm" x-data="addAccountModal">
+        <div class="modal-box max-w-lg w-full bg-space-900 border border-space-border text-gray-300 shadow-[0_0_50px_rgba(0,0,0,0.5)] p-6">
+            <h3 class="font-bold text-lg text-white mb-4" x-text="$store.global.t('addAccount')">Add New Account</h3>
+
+            <div class="flex flex-col gap-4">
+                <p class="text-sm text-gray-400 leading-relaxed" x-text="$store.global.t('connectGoogleDesc')">Connect a Google
+                    Workspace account to increase your API quota limit.
+                    The account will be used to proxy Claude requests via Antigravity.</p>
+
+                <button class="btn btn-primary flex items-center justify-center gap-3 h-11" @click="addAccountWeb">
+                    <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
+                        <path
+                            d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z">
+                        </path>
+                        <path
+                            d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z">
+                        </path>
+                        <path
+                            d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z">
+                        </path>
+                        <path
+                            d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z">
+                        </path>
+                    </svg>
+                    <span x-text="$store.global.t('connectGoogle')">Connect Google Account</span>
+                </button>
+
+                <div class="text-center mt-2">
+                    <p class="text-xs text-gray-500 mb-2" x-text="$store.global.t('or')">OR</p>
+                    
+                    <!-- Manual Mode (collapsible) -->
+                    <details class="group mb-2" @toggle="initManualAuth($event)">
+                        <summary class="text-xs text-gray-400 hover:text-neon-cyan cursor-pointer transition-colors inline-flex items-center gap-1">
+                            <svg class="w-3 h-3 transition-transform group-open:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+                            </svg>
+                            <span x-text="$store.global.t('manualMode')">Manual Mode</span>
+                        </summary>
+                        <div class="mt-3 p-3 bg-black/50 rounded border border-space-border/30 text-xs">
+                            <template x-if="authUrl">
+                                <div>
+                                    <div class="flex items-center gap-2 mb-2">
+                                        <input type="text" readonly :value="authUrl" 
+                                               class="input input-xs input-bordered flex-1 bg-space-800 text-gray-300 font-mono">
+                                        <button class="btn btn-xs btn-ghost text-neon-cyan" @click="copyLink" :title="$store.global.t('linkCopied')">
+                                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
+                                            </svg>
+                                        </button>
+                                    </div>
+                                    <div class="flex items-center gap-2">
+                                        <input type="text" x-model="callbackInput" 
+                                               :placeholder="$store.global.t('pasteCallbackPlaceholder')"
+                                               class="input input-xs input-bordered flex-1 bg-space-800 text-gray-300 font-mono">
+                                        <button class="btn btn-xs btn-success" 
+                                                @click="completeManualAuth" 
+                                                :disabled="!callbackInput || submitting"
+                                                :class="{ 'loading': submitting }">
+                                            <span x-text="$store.global.t('completeAuth')">OK</span>
+                                        </button>
+                                    </div>
+                                </div>
+                            </template>
+                            <template x-if="!authUrl">
+                                <div class="text-gray-500">Loading...</div>
+                            </template>
+                        </div>
+                    </details>
+
+                    <!-- CLI Command -->
+                    <details class="group">
+                        <summary class="text-xs text-gray-400 hover:text-neon-cyan cursor-pointer transition-colors inline-flex items-center gap-1">
+                            <svg class="w-3 h-3 transition-transform group-open:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+                            </svg>
+                            <span x-text="$store.global.t('useCliCommand')">Use CLI Command</span>
+                        </summary>
+                        <div class="mt-3 p-3 bg-black/50 rounded border border-space-border/30 font-mono text-xs text-gray-300">
+                            <div class="flex items-center gap-2">
+                                <span class="text-gray-600">$</span>
+                                <code>npm run accounts:add</code>
+                            </div>
+                        </div>
+                    </details>
+                </div>
+            </div>
+
+            <div class="modal-action mt-6">
+                <form method="dialog">
+                    <button type="submit" class="btn btn-ghost hover:bg-white/10" @click="resetState()" x-text="$store.global.t('close')">Close</button>
+                </form>
+            </div>
+        </div>
+        <form method="dialog" class="modal-backdrop">
+            <button type="button" @click="resetState()" x-text="$store.global.t('close')">close</button>
+        </form>
+    </dialog>
+
+    <!-- OAuth Progress Modal -->
+    <dialog id="oauth_progress_modal" class="modal" :class="{ 'modal-open': $store.global.oauthProgress.active }">
+        <div class="modal-box bg-space-900 border border-neon-purple/50">
+            <h3 class="font-bold text-lg text-white flex items-center gap-2">
+                <svg class="w-6 h-6 text-neon-purple animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                </svg>
+                <span x-text="$store.global.t('oauthWaiting')">Waiting for OAuth...</span>
+            </h3>
+            <p class="py-4 text-gray-400 text-sm" x-text="$store.global.t('oauthWaitingDesc')">
+                Please complete authentication in the popup window.
+            </p>
+
+            <!-- Progress Bar -->
+            <div class="w-full bg-space-800 rounded-full h-2 mb-4 overflow-hidden">
+                <div class="bg-neon-purple h-2 rounded-full transition-all duration-500"
+                     :style="`width: ${($store.global.oauthProgress.current / $store.global.oauthProgress.max) * 100}%`">
+                </div>
+            </div>
+
+            <!-- Progress Text -->
+            <div class="flex justify-between text-xs text-gray-600 mb-4">
+                <span x-text="`${$store.global.oauthProgress.current} / ${$store.global.oauthProgress.max}s`"></span>
+                <span x-text="`${Math.round(($store.global.oauthProgress.current / $store.global.oauthProgress.max) * 100)}%`"></span>
+            </div>
+
+            <div class="modal-action">
+                <button class="btn btn-sm btn-ghost text-gray-400"
+                        @click="$store.global.oauthProgress.cancel && $store.global.oauthProgress.cancel()"
+                        x-text="$store.global.t('cancelOAuth')">
+                    Cancel
+                </button>
+            </div>
+        </div>
+    </dialog>
+
+    <!-- Scripts - Loading Order Matters! -->
+    <!-- 1. Config & Utils (global helpers) -->
+    <script src="js/config/constants.js"></script>
+    <script src="js/utils/ui-logger.js"></script><!-- Issue #183: Conditional logging utility -->
+    <script src="js/utils.js"></script>
+    <script src="js/utils/error-handler.js"></script>
+    <script src="js/utils/account-actions.js"></script>
+    <script src="js/utils/validators.js"></script>
+    <script src="js/utils/model-config.js"></script>
+    <script src="js/utils/redact.js"></script>
+    <!-- Translation files (must load before store.js) -->
+    <script src="js/translations/en.js"></script>
+    <script src="js/translations/zh.js"></script>
+    <script src="js/translations/tr.js"></script>
+    <script src="js/translations/id.js"></script>
+    <script src="js/translations/pt.js"></script>
+    <!-- 2. Alpine Stores (register alpine:init listeners) -->
+    <script src="js/store.js"></script>
+    <script src="js/data-store.js"></script>
+    <script src="js/settings-store.js"></script>
+    <!-- 3. Components (register to window.Components) -->
+    <!-- Dashboard modules (load before main dashboard) -->
+    <script src="js/components/dashboard/stats.js"></script>
+    <script src="js/components/dashboard/charts.js"></script>
+    <script src="js/components/dashboard/filters.js"></script>
+    <script src="js/components/dashboard.js"></script>
+    <script src="js/components/models.js"></script>
+    <script src="js/components/account-manager.js"></script>
+    <script src="js/components/claude-config.js"></script>
+    <script src="js/components/model-dropdown.js"></script>
+    <script src="js/components/logs-viewer.js"></script>
+    <script src="js/components/server-config.js"></script>
+    <script src="js/components/add-account-modal.js"></script>
+    <!-- 4. App (registers Alpine components from window.Components) -->
+    <script src="app.js"></script>
+</body>
+
+</html>

public/js/components/account-manager.js

@@ -0,0 +1,502 @@
+/**
+ * Account Manager Component
+ * Registers itself to window.Components for Alpine.js to consume
+ */
+window.Components = window.Components || {};
+
+window.Components.accountManager = () => ({
+    searchQuery: '',
+    deleteTarget: '',
+    refreshing: false,
+    toggling: false,
+    deleting: false,
+    reloading: false,
+    selectedAccountEmail: '',
+    selectedAccountLimits: {},
+
+    // Health Inspector (Developer Mode)
+    healthData: {},
+    healthLoading: false,
+
+    init() {
+        if (Alpine.store('data').devMode && Alpine.store('settings').healthInspectorOpen) {
+            this.fetchHealthData();
+        }
+    },
+
+    get filteredAccounts() {
+        const accounts = Alpine.store('data').accounts || [];
+        if (!this.searchQuery || this.searchQuery.trim() === '') {
+            return accounts;
+        }
+
+        const query = this.searchQuery.toLowerCase().trim();
+        return accounts.filter(acc => {
+            return acc.email.toLowerCase().includes(query) ||
+                   (acc.projectId && acc.projectId.toLowerCase().includes(query)) ||
+                   (acc.source && acc.source.toLowerCase().includes(query));
+        });
+    },
+
+    formatEmail(email) {
+        if (!email || email.length <= 40) return email;
+
+        const [user, domain] = email.split('@');
+        if (!domain) return email;
+
+        // Preserve domain integrity, truncate username if needed
+        if (user.length > 20) {
+            return `${user.substring(0, 10)}...${user.slice(-5)}@${domain}`;
+        }
+        return email;
+    },
+
+    async refreshAccount(email) {
+        return await window.ErrorHandler.withLoading(async () => {
+            const store = Alpine.store('global');
+            store.showToast(store.t('refreshingAccount', { email: Redact.email(email) }), 'info');
+
+            const { response, newPassword } = await window.utils.request(
+                `/api/accounts/${encodeURIComponent(email)}/refresh`,
+                { method: 'POST' },
+                store.webuiPassword
+            );
+            if (newPassword) store.webuiPassword = newPassword;
+
+            const data = await response.json();
+            if (data.status === 'ok') {
+                store.showToast(store.t('refreshedAccount', { email: Redact.email(email) }), 'success');
+                Alpine.store('data').fetchData();
+            } else {
+                throw new Error(data.error || store.t('refreshFailed'));
+            }
+        }, this, 'refreshing', { errorMessage: 'Failed to refresh account' });
+    },
+
+    async toggleAccount(email, enabled) {
+        const store = Alpine.store('global');
+        const password = store.webuiPassword;
+
+        // Optimistic update: immediately update UI
+        const dataStore = Alpine.store('data');
+        const account = dataStore.accounts.find(a => a.email === email);
+        if (account) {
+            account.enabled = enabled;
+        }
+
+        try {
+            const { response, newPassword } = await window.utils.request(`/api/accounts/${encodeURIComponent(email)}/toggle`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ enabled })
+            }, password);
+            if (newPassword) store.webuiPassword = newPassword;
+
+            const data = await response.json();
+            if (data.status === 'ok') {
+                const status = enabled ? store.t('enabledStatus') : store.t('disabledStatus');
+                store.showToast(store.t('accountToggled', { email: Redact.email(email), status }), 'success');
+                // Refresh to confirm server state
+                await dataStore.fetchData();
+            } else {
+                store.showToast(data.error || store.t('toggleFailed'), 'error');
+                // Rollback optimistic update on error
+                if (account) {
+                    account.enabled = !enabled;
+                }
+                await dataStore.fetchData();
+            }
+        } catch (e) {
+            store.showToast(store.t('toggleFailed') + ': ' + e.message, 'error');
+            // Rollback optimistic update on error
+            if (account) {
+                account.enabled = !enabled;
+            }
+            await dataStore.fetchData();
+        }
+    },
+
+    async fixAccount(email) {
+        const store = Alpine.store('global');
+        const dataStore = Alpine.store('data');
+        // If the account has a verification URL (403 VALIDATION_REQUIRED), open it directly
+        const account = (dataStore.accounts || []).find(a => a.email === email);
+        if (account?.verifyUrl) {
+            window.open(account.verifyUrl, '_blank');
+            store.showToast(store.t('verifyThenRefresh') || 'After completing verification, click the ↻ Refresh button to re-enable this account', 'info', 10000);
+            return;
+        }
+        // Otherwise fall back to OAuth re-auth
+        store.showToast(store.t('reauthenticating', { email: Redact.email(email) }), 'info');
+        const password = store.webuiPassword;
+        try {
+            const urlPath = `/api/auth/url?email=${encodeURIComponent(email)}`;
+            const { response, newPassword } = await window.utils.request(urlPath, {}, password);
+            if (newPassword) store.webuiPassword = newPassword;
+
+            const data = await response.json();
+            if (data.status === 'ok') {
+                window.open(data.url, 'google_oauth', 'width=600,height=700,scrollbars=yes');
+            } else {
+                store.showToast(data.error || store.t('authUrlFailed'), 'error');
+            }
+        } catch (e) {
+            store.showToast(store.t('authUrlFailed') + ': ' + e.message, 'error');
+        }
+    },
+
+    confirmDeleteAccount(email) {
+        this.deleteTarget = email;
+        document.getElementById('delete_account_modal').showModal();
+    },
+
+    async executeDelete() {
+        const email = this.deleteTarget;
+        return await window.ErrorHandler.withLoading(async () => {
+            const store = Alpine.store('global');
+
+            const { response, newPassword } = await window.utils.request(
+                `/api/accounts/${encodeURIComponent(email)}`,
+                { method: 'DELETE' },
+                store.webuiPassword
+            );
+            if (newPassword) store.webuiPassword = newPassword;
+
+            const data = await response.json();
+            if (data.status === 'ok') {
+                store.showToast(store.t('deletedAccount', { email: Redact.email(email) }), 'success');
+                Alpine.store('data').fetchData();
+                document.getElementById('delete_account_modal').close();
+                this.deleteTarget = '';
+            } else {
+                throw new Error(data.error || store.t('deleteFailed'));
+            }
+        }, this, 'deleting', { errorMessage: 'Failed to delete account' });
+    },
+
+    async reloadAccounts() {
+        return await window.ErrorHandler.withLoading(async () => {
+            const store = Alpine.store('global');
+
+            const { response, newPassword } = await window.utils.request(
+                '/api/accounts/reload',
+                { method: 'POST' },
+                store.webuiPassword
+            );
+            if (newPassword) store.webuiPassword = newPassword;
+
+            const data = await response.json();
+            if (data.status === 'ok') {
+                store.showToast(store.t('accountsReloaded'), 'success');
+                Alpine.store('data').fetchData();
+            } else {
+                throw new Error(data.error || store.t('reloadFailed'));
+            }
+        }, this, 'reloading', { errorMessage: 'Failed to reload accounts' });
+    },
+
+    openQuotaModal(account) {
+        this.selectedAccountEmail = account.email;
+        this.selectedAccountLimits = account.limits || {};
+        document.getElementById('quota_modal').showModal();
+    },
+
+    // Threshold settings
+    thresholdDialog: {
+        email: '',
+        quotaThreshold: null,  // null means use global
+        modelQuotaThresholds: {},
+        saving: false,
+        addingModel: false,
+        newModelId: '',
+        newModelThreshold: 10
+    },
+
+    openThresholdModal(account) {
+        this.thresholdDialog = {
+            email: account.email,
+            // Convert from fraction (0-1) to percentage (0-99) for display
+            quotaThreshold: account.quotaThreshold !== undefined ? Math.round(account.quotaThreshold * 100) : null,
+            modelQuotaThresholds: Object.fromEntries(
+                Object.entries(account.modelQuotaThresholds || {}).map(([k, v]) => [k, Math.round(v * 100)])
+            ),
+            saving: false,
+            addingModel: false,
+            newModelId: '',
+            newModelThreshold: 10
+        };
+        document.getElementById('threshold_modal').showModal();
+    },
+
+    async saveAccountThreshold() {
+        const store = Alpine.store('global');
+        this.thresholdDialog.saving = true;
+
+        try {
+            // Convert percentage back to fraction
+            const quotaThreshold = this.thresholdDialog.quotaThreshold !== null && this.thresholdDialog.quotaThreshold !== ''
+                ? parseFloat(this.thresholdDialog.quotaThreshold) / 100
+                : null;
+
+            // Convert model thresholds from percentage to fraction
+            const modelQuotaThresholds = {};
+            for (const [modelId, pct] of Object.entries(this.thresholdDialog.modelQuotaThresholds)) {
+                modelQuotaThresholds[modelId] = parseFloat(pct) / 100;
+            }
+
+            const { response, newPassword } = await window.utils.request(
+                `/api/accounts/${encodeURIComponent(this.thresholdDialog.email)}`,
+                {
+                    method: 'PATCH',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ quotaThreshold, modelQuotaThresholds })
+                },
+                store.webuiPassword
+            );
+            if (newPassword) store.webuiPassword = newPassword;
+
+            const data = await response.json();
+            if (data.status === 'ok') {
+                store.showToast('Settings saved', 'success');
+                Alpine.store('data').fetchData();
+                document.getElementById('threshold_modal').close();
+            } else {
+                throw new Error(data.error || 'Failed to save settings');
+            }
+        } catch (e) {
+            store.showToast('Failed to save settings: ' + e.message, 'error');
+        } finally {
+            this.thresholdDialog.saving = false;
+        }
+    },
+
+    clearAccountThreshold() {
+        this.thresholdDialog.quotaThreshold = null;
+    },
+
+    // Per-model threshold methods
+    addModelThreshold() {
+        this.thresholdDialog.addingModel = true;
+        this.thresholdDialog.newModelId = '';
+        this.thresholdDialog.newModelThreshold = 10;
+    },
+
+    updateModelThreshold(modelId, value) {
+        const numValue = parseInt(value);
+        if (!isNaN(numValue) && numValue >= 0 && numValue <= 99) {
+            this.thresholdDialog.modelQuotaThresholds[modelId] = numValue;
+        }
+    },
+
+    removeModelThreshold(modelId) {
+        delete this.thresholdDialog.modelQuotaThresholds[modelId];
+    },
+
+    confirmAddModelThreshold() {
+        const modelId = this.thresholdDialog.newModelId;
+        const threshold = parseInt(this.thresholdDialog.newModelThreshold) || 10;
+
+        if (modelId && threshold >= 0 && threshold <= 99) {
+            this.thresholdDialog.modelQuotaThresholds[modelId] = threshold;
+            this.thresholdDialog.addingModel = false;
+            this.thresholdDialog.newModelId = '';
+            this.thresholdDialog.newModelThreshold = 10;
+        }
+    },
+
+    getAvailableModelsForThreshold() {
+        // Get models from data store, exclude already configured ones
+        const allModels = Alpine.store('data').models || [];
+        const configured = Object.keys(this.thresholdDialog.modelQuotaThresholds);
+        return allModels.filter(m => !configured.includes(m));
+    },
+
+    getEffectiveThreshold(account) {
+        // Return display string for effective threshold
+        if (account.quotaThreshold !== undefined) {
+            return Math.round(account.quotaThreshold * 100) + '%';
+        }
+        // If no per-account threshold, show global value
+        const globalThreshold = Alpine.store('data').globalQuotaThreshold;
+        if (globalThreshold > 0) {
+            return Math.round(globalThreshold * 100) + '% (global)';
+        }
+        return 'Global';
+    },
+
+    /**
+     * Get main model quota for display
+     * Prioritizes flagship models (Opus > Sonnet > Flash)
+     * @param {Object} account - Account object with limits
+     * @returns {Object} { percent: number|null, model: string }
+     */
+    getMainModelQuota(account) {
+        const limits = account.limits || {};
+        
+        const getQuotaVal = (id) => {
+             const l = limits[id];
+             if (!l) return -1;
+             if (l.remainingFraction !== null) return l.remainingFraction;
+             if (l.resetTime) return 0; // Rate limited
+             return -1; // Unknown
+        };
+
+        const validIds = Object.keys(limits).filter(id => getQuotaVal(id) >= 0);
+        
+        if (validIds.length === 0) return { percent: null, model: '-' };
+
+        const DEAD_THRESHOLD = 0.01;
+        
+        const MODEL_TIERS = [
+            { pattern: /\bopus\b/, aliveScore: 100, deadScore: 60 },
+            { pattern: /\bsonnet\b/, aliveScore: 90, deadScore: 55 },
+            // Gemini 3 Pro / Ultra
+            { pattern: /\bgemini-3\b/, extraCheck: (l) => /\bpro\b/.test(l) || /\bultra\b/.test(l), aliveScore: 80, deadScore: 50 },
+            { pattern: /\bpro\b/, aliveScore: 75, deadScore: 45 },
+            // Mid/Low Tier
+            { pattern: /\bhaiku\b/, aliveScore: 30, deadScore: 15 },
+            { pattern: /\bflash\b/, aliveScore: 20, deadScore: 10 }
+        ];
+
+        const getPriority = (id) => {
+            const lower = id.toLowerCase();
+            const val = getQuotaVal(id);
+            const isAlive = val > DEAD_THRESHOLD;
+            
+            for (const tier of MODEL_TIERS) {
+                if (tier.pattern.test(lower)) {
+                    if (tier.extraCheck && !tier.extraCheck(lower)) continue;
+                    return isAlive ? tier.aliveScore : tier.deadScore;
+                }
+            }
+            
+            return isAlive ? 5 : 0;
+        };
+
+        // Sort by priority desc
+        validIds.sort((a, b) => getPriority(b) - getPriority(a));
+
+        const bestModel = validIds[0];
+        const val = getQuotaVal(bestModel);
+        
+        return {
+            percent: Math.round(val * 100),
+            model: bestModel
+        };
+    },
+
+    /**
+     * Fetch strategy health data for the inspector panel
+     */
+    async fetchHealthData() {
+        this.healthLoading = true;
+        try {
+            const store = Alpine.store('global');
+            const { response, newPassword } = await window.utils.request(
+                '/api/strategy/health',
+                {},
+                store.webuiPassword
+            );
+            if (newPassword) store.webuiPassword = newPassword;
+
+            const data = await response.json();
+            if (data.status === 'ok') {
+                this.healthData = data;
+            } else {
+                this.healthData = {};
+                if (response.status === 403) {
+                    store.showToast(data.error || 'Developer mode is not enabled', 'warning');
+                }
+            }
+        } catch (e) {
+            console.error('Failed to fetch health data:', e);
+        } finally {
+            this.healthLoading = false;
+        }
+    },
+
+    /**
+     * Export accounts to JSON file
+     */
+    async exportAccounts() {
+        const store = Alpine.store('global');
+        try {
+            const { response, newPassword } = await window.utils.request(
+                '/api/accounts/export',
+                {},
+                store.webuiPassword
+            );
+            if (newPassword) store.webuiPassword = newPassword;
+
+            const data = await response.json();
+            // API returns plain array directly
+            if (Array.isArray(data)) {
+                const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = `antigravity-accounts-${new Date().toISOString().split('T')[0]}.json`;
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                URL.revokeObjectURL(url);
+
+                store.showToast(store.t('exportSuccess', { count: data.length }), 'success');
+            } else if (data.error) {
+                throw new Error(data.error);
+            }
+        } catch (e) {
+            store.showToast(store.t('exportFailed') + ': ' + e.message, 'error');
+        }
+    },
+
+    /**
+     * Import accounts from JSON file
+     * @param {Event} event - file input change event
+     */
+    async importAccounts(event) {
+        const store = Alpine.store('global');
+        const file = event.target.files?.[0];
+        if (!file) return;
+
+        try {
+            const text = await file.text();
+            const importData = JSON.parse(text);
+
+            // Support both plain array and wrapped format
+            const accounts = Array.isArray(importData) ? importData : (importData.accounts || []);
+            if (!Array.isArray(accounts) || accounts.length === 0) {
+                throw new Error('Invalid file format: expected accounts array');
+            }
+
+            const { response, newPassword } = await window.utils.request(
+                '/api/accounts/import',
+                {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(accounts)
+                },
+                store.webuiPassword
+            );
+            if (newPassword) store.webuiPassword = newPassword;
+
+            const data = await response.json();
+            if (data.status === 'ok') {
+                const { added, updated, failed } = data.results;
+                let msg = store.t('importSuccess') + ` ${added.length} added, ${updated.length} updated`;
+                if (failed.length > 0) {
+                    msg += `, ${failed.length} failed`;
+                }
+                store.showToast(msg, failed.length > 0 ? 'info' : 'success');
+                Alpine.store('data').fetchData();
+            } else {
+                throw new Error(data.error || 'Import failed');
+            }
+        } catch (e) {
+            store.showToast(store.t('importFailed') + ': ' + e.message, 'error');
+        } finally {
+            // Reset file input
+            event.target.value = '';
+        }
+    }
+});

public/js/components/add-account-modal.js

@@ -0,0 +1,88 @@
+/**
+ * Add Account Modal Component
+ * Registers itself to window.Components for Alpine.js to consume
+ */
+window.Components = window.Components || {};
+
+window.Components.addAccountModal = () => ({
+    manualMode: false,
+    authUrl: '',
+    authState: '',
+    callbackInput: '',
+    submitting: false,
+
+    /**
+     * Reset all state to initial values
+     */
+    resetState() {
+        this.manualMode = false;
+        this.authUrl = '';
+        this.authState = '';
+        this.callbackInput = '';
+        this.submitting = false;
+        // Close any open details elements
+        const details = document.querySelectorAll('#add_account_modal details[open]');
+        details.forEach(d => d.removeAttribute('open'));
+    },
+
+    async copyLink() {
+        if (!this.authUrl) return;
+        await navigator.clipboard.writeText(this.authUrl);
+        Alpine.store('global').showToast(Alpine.store('global').t('linkCopied'), 'success');
+    },
+
+    async initManualAuth(event) {
+        if (event.target.open && !this.authUrl) {
+            try {
+                const password = Alpine.store('global').webuiPassword;
+                const {
+                    response,
+                    newPassword
+                } = await window.utils.request('/api/auth/url', {}, password);
+                if (newPassword) Alpine.store('global').webuiPassword = newPassword;
+                const data = await response.json();
+                if (data.status === 'ok') {
+                    this.authUrl = data.url;
+                    this.authState = data.state;
+                }
+            } catch (e) {
+                Alpine.store('global').showToast(e.message, 'error');
+            }
+        }
+    },
+
+    async completeManualAuth() {
+        if (!this.callbackInput || !this.authState) return;
+        this.submitting = true;
+        try {
+            const store = Alpine.store('global');
+            const {
+                response,
+                newPassword
+            } = await window.utils.request('/api/auth/complete', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    callbackInput: this.callbackInput,
+                    state: this.authState
+                })
+            }, store.webuiPassword);
+            if (newPassword) store.webuiPassword = newPassword;
+            const data = await response.json();
+            if (data.status === 'ok') {
+                store.showToast(store.t('accountAddedSuccess'), 'success');
+                Alpine.store('data').fetchData();
+                document.getElementById('add_account_modal').close();
+                this.resetState();
+            } else {
+                store.showToast(data.error || store.t('authFailed'), 'error');
+            }
+        } catch (e) {
+            Alpine.store('global').showToast(e.message, 'error');
+        } finally {
+            this.submitting = false;
+        }
+    }
+});

public/js/components/claude-config.js

@@ -0,0 +1,508 @@
+/**
+ * Claude Config Component
+ * Registers itself to window.Components for Alpine.js to consume
+ */
+window.Components = window.Components || {};
+
+window.Components.claudeConfig = () => ({
+    config: { env: {} },
+    configPath: '', // Dynamic path from backend
+    models: [],
+    loading: false,
+    restoring: false,
+    gemini1mSuffix: false,
+
+    // Mode toggle state (proxy/paid)
+    currentMode: 'proxy', // 'proxy' or 'paid'
+    modeLoading: false,
+
+    /**
+     * Extract port from ANTHROPIC_BASE_URL for display
+     * @returns {string} Port number or '8080' as fallback
+     */
+    getProxyPort() {
+        const baseUrl = this.config?.env?.ANTHROPIC_BASE_URL || '';
+        try {
+            const url = new URL(baseUrl);
+            return url.port || '8080';
+        } catch {
+            return '8080';
+        }
+    },
+
+    // Presets state
+    presets: [],
+    selectedPresetName: '',
+    savingPreset: false,
+    deletingPreset: false,
+    pendingPresetName: '', // For unsaved changes confirmation
+    newPresetName: '', // For save preset modal input
+
+    // Model fields that may contain Gemini model names
+    geminiModelFields: [
+        'ANTHROPIC_MODEL',
+        'CLAUDE_CODE_SUBAGENT_MODEL',
+        'ANTHROPIC_DEFAULT_OPUS_MODEL',
+        'ANTHROPIC_DEFAULT_SONNET_MODEL',
+        'ANTHROPIC_DEFAULT_HAIKU_MODEL'
+    ],
+
+    init() {
+        // Only fetch config if this is the active sub-tab
+        if (this.$store.global.settingsTab === 'claude') {
+            this.fetchConfig();
+            this.fetchPresets();
+            this.fetchMode();
+        }
+
+        // Watch settings sub-tab (skip initial trigger)
+        this.$watch('$store.global.settingsTab', (tab, oldTab) => {
+            if (tab === 'claude' && oldTab !== undefined) {
+                this.fetchConfig();
+                this.fetchPresets();
+                this.fetchMode();
+            }
+        });
+
+        this.$watch('$store.data.models', (val) => {
+            this.models = val || [];
+        });
+        this.models = Alpine.store('data').models || [];
+    },
+
+    /**
+     * Detect if any Gemini model has [1m] suffix
+     */
+    detectGemini1mSuffix() {
+        for (const field of this.geminiModelFields) {
+            const val = this.config.env[field];
+            if (val && val.toLowerCase().includes('gemini') && val.includes('[1m]')) {
+                return true;
+            }
+        }
+        return false;
+    },
+
+    /**
+     * Toggle [1m] suffix for all Gemini models
+     */
+    toggleGemini1mSuffix(enabled) {
+        for (const field of this.geminiModelFields) {
+            const val = this.config.env[field];
+            // Fix: Case-insensitive check for gemini
+            if (val && /gemini/i.test(val)) {
+                if (enabled && !val.includes('[1m]')) {
+                    this.config.env[field] = val.trim() + '[1m]';
+                } else if (!enabled && val.includes('[1m]')) {
+                    this.config.env[field] = val.replace(/\s*\[1m\]$/i, '').trim();
+                }
+            }
+        }
+        this.gemini1mSuffix = enabled;
+    },
+
+    /**
+     * Helper to select a model from the dropdown
+     * @param {string} field - The config.env field to update
+     * @param {string} modelId - The selected model ID
+     */
+    selectModel(field, modelId) {
+        if (!this.config.env) this.config.env = {};
+
+        let finalModelId = modelId;
+        // If 1M mode is enabled and it's a Gemini model, append the suffix
+        if (this.gemini1mSuffix && modelId.toLowerCase().includes('gemini')) {
+            if (!finalModelId.includes('[1m]')) {
+                finalModelId = finalModelId.trim() + '[1m]';
+            }
+        }
+
+        this.config.env[field] = finalModelId;
+    },
+
+    async fetchConfig() {
+        const password = Alpine.store('global').webuiPassword;
+        try {
+            const { response, newPassword } = await window.utils.request('/api/claude/config', {}, password);
+            if (newPassword) Alpine.store('global').webuiPassword = newPassword;
+
+            if (!response.ok) throw new Error(`HTTP ${response.status}`);
+            const data = await response.json();
+            this.config = data.config || {};
+            this.configPath = data.path || '~/.claude/settings.json'; // Save dynamic path
+            if (!this.config.env) this.config.env = {};
+
+            // Default MCP CLI to true if not set
+            if (this.config.env.ENABLE_EXPERIMENTAL_MCP_CLI === undefined) {
+                this.config.env.ENABLE_EXPERIMENTAL_MCP_CLI = 'true';
+            }
+
+            // Detect existing [1m] suffix state, default to true
+            const hasExistingSuffix = this.detectGemini1mSuffix();
+            const hasGeminiModels = this.geminiModelFields.some(f =>
+                this.config.env[f]?.toLowerCase().includes('gemini')
+            );
+
+            // Default to enabled: if no suffix found but Gemini models exist, apply suffix
+            if (!hasExistingSuffix && hasGeminiModels) {
+                this.toggleGemini1mSuffix(true);
+            } else {
+                this.gemini1mSuffix = hasExistingSuffix || !hasGeminiModels;
+            }
+        } catch (e) {
+            console.error('Failed to fetch Claude config:', e);
+        }
+    },
+
+    async saveClaudeConfig() {
+        this.loading = true;
+        const password = Alpine.store('global').webuiPassword;
+        try {
+            const { response, newPassword } = await window.utils.request('/api/claude/config', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(this.config)
+            }, password);
+            if (newPassword) Alpine.store('global').webuiPassword = newPassword;
+
+            if (!response.ok) throw new Error(`HTTP ${response.status}`);
+            Alpine.store('global').showToast(Alpine.store('global').t('claudeConfigSaved'), 'success');
+        } catch (e) {
+            Alpine.store('global').showToast(Alpine.store('global').t('saveConfigFailed') + ': ' + e.message, 'error');
+        } finally {
+            this.loading = false;
+        }
+    },
+
+    restoreDefaultClaudeConfig() {
+        document.getElementById('restore_defaults_modal').showModal();
+    },
+
+    async executeRestore() {
+        this.restoring = true;
+        const password = Alpine.store('global').webuiPassword;
+        try {
+            const { response, newPassword } = await window.utils.request('/api/claude/config/restore', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' }
+            }, password);
+            if (newPassword) Alpine.store('global').webuiPassword = newPassword;
+
+            if (!response.ok) throw new Error(`HTTP ${response.status}`);
+            Alpine.store('global').showToast(Alpine.store('global').t('claudeConfigRestored'), 'success');
+
+            // Close modal
+            document.getElementById('restore_defaults_modal').close();
+
+            // Reload the config to reflect the changes
+            await this.fetchConfig();
+        } catch (e) {
+            Alpine.store('global').showToast(Alpine.store('global').t('restoreConfigFailed') + ': ' + e.message, 'error');
+        } finally {
+            this.restoring = false;
+        }
+    },
+
+    // ==========================================
+    // Presets Management
+    // ==========================================
+
+    /**
+     * Fetch all saved presets from the server
+     */
+    async fetchPresets() {
+        const password = Alpine.store('global').webuiPassword;
+        try {
+            const { response, newPassword } = await window.utils.request('/api/claude/presets', {}, password);
+            if (newPassword) Alpine.store('global').webuiPassword = newPassword;
+
+            if (!response.ok) throw new Error(`HTTP ${response.status}`);
+            const data = await response.json();
+            if (data.status === 'ok') {
+                this.presets = data.presets || [];
+                // Auto-select first preset if none selected
+                if (this.presets.length > 0 && !this.selectedPresetName) {
+                    this.selectedPresetName = this.presets[0].name;
+                }
+            }
+        } catch (e) {
+            console.error('Failed to fetch presets:', e);
+        }
+    },
+
+    /**
+     * Load the selected preset into the form (does not save to Claude CLI)
+     */
+    loadSelectedPreset() {
+        const preset = this.presets.find(p => p.name === this.selectedPresetName);
+        if (!preset) {
+            return;
+        }
+
+        // Merge preset config into current config.env
+        this.config.env = { ...this.config.env, ...preset.config };
+
+        // Update Gemini 1M toggle based on merged config (not just preset)
+        this.gemini1mSuffix = this.detectGemini1mSuffix();
+
+        Alpine.store('global').showToast(
+            Alpine.store('global').t('presetLoaded') || `Preset "${preset.name}" loaded. Click "Apply to Claude CLI" to save.`,
+            'success'
+        );
+    },
+
+    /**
+     * Check if current config matches any saved preset
+     * @returns {boolean} True if current config matches a preset
+     */
+    currentConfigMatchesPreset() {
+        const relevantKeys = [
+            'ANTHROPIC_BASE_URL',
+            'ANTHROPIC_AUTH_TOKEN',
+            'ANTHROPIC_MODEL',
+            'CLAUDE_CODE_SUBAGENT_MODEL',
+            'ANTHROPIC_DEFAULT_OPUS_MODEL',
+            'ANTHROPIC_DEFAULT_SONNET_MODEL',
+            'ANTHROPIC_DEFAULT_HAIKU_MODEL',
+            'ENABLE_EXPERIMENTAL_MCP_CLI'
+        ];
+
+        for (const preset of this.presets) {
+            let matches = true;
+            for (const key of relevantKeys) {
+                const currentVal = this.config.env[key] || '';
+                const presetVal = preset.config[key] || '';
+                if (currentVal !== presetVal) {
+                    matches = false;
+                    break;
+                }
+            }
+            if (matches) return true;
+        }
+        return false;
+    },
+
+    /**
+     * Handle preset selection change - auto-load with unsaved changes warning
+     * @param {string} newPresetName - The newly selected preset name
+     */
+    async onPresetSelect(newPresetName) {
+        if (!newPresetName || newPresetName === this.selectedPresetName) return;
+
+        // Check if current config has unsaved changes (doesn't match any preset)
+        const hasUnsavedChanges = !this.currentConfigMatchesPreset();
+
+        if (hasUnsavedChanges) {
+            // Store pending preset and show confirmation modal
+            this.pendingPresetName = newPresetName;
+            document.getElementById('unsaved_changes_modal').showModal();
+            return;
+        }
+
+        this.selectedPresetName = newPresetName;
+        this.loadSelectedPreset();
+    },
+
+    /**
+     * Confirm loading preset despite unsaved changes
+     */
+    confirmLoadPreset() {
+        document.getElementById('unsaved_changes_modal').close();
+        this.selectedPresetName = this.pendingPresetName;
+        this.pendingPresetName = '';
+        this.loadSelectedPreset();
+    },
+
+    /**
+     * Cancel loading preset - revert dropdown selection
+     */
+    cancelLoadPreset() {
+        document.getElementById('unsaved_changes_modal').close();
+        // Revert the dropdown to current selection
+        const select = document.querySelector('[aria-label="Select preset"]');
+        if (select) select.value = this.selectedPresetName;
+        this.pendingPresetName = '';
+    },
+
+    /**
+     * Save the current config as a new preset
+     */
+    async saveCurrentAsPreset() {
+        // Clear the input and show the save preset modal
+        this.newPresetName = '';
+        document.getElementById('save_preset_modal').showModal();
+    },
+
+    /**
+     * Execute preset save after user enters name
+     */
+    async executeSavePreset(name) {
+        if (!name || !name.trim()) {
+            Alpine.store('global').showToast(Alpine.store('global').t('presetNameRequired'), 'error');
+            return;
+        }
+
+        this.savingPreset = true;
+        const password = Alpine.store('global').webuiPassword;
+
+        try {
+            // Save only relevant env vars
+            const relevantKeys = [
+                'ANTHROPIC_BASE_URL',
+                'ANTHROPIC_AUTH_TOKEN',
+                'ANTHROPIC_MODEL',
+                'CLAUDE_CODE_SUBAGENT_MODEL',
+                'ANTHROPIC_DEFAULT_OPUS_MODEL',
+                'ANTHROPIC_DEFAULT_SONNET_MODEL',
+                'ANTHROPIC_DEFAULT_HAIKU_MODEL',
+                'ENABLE_EXPERIMENTAL_MCP_CLI'
+            ];
+            const presetConfig = {};
+            relevantKeys.forEach(k => {
+                if (this.config.env[k]) {
+                    presetConfig[k] = this.config.env[k];
+                }
+            });
+
+            const { response, newPassword } = await window.utils.request('/api/claude/presets', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ name: name.trim(), config: presetConfig })
+            }, password);
+            if (newPassword) Alpine.store('global').webuiPassword = newPassword;
+
+            if (!response.ok) throw new Error(`HTTP ${response.status}`);
+            const data = await response.json();
+            if (data.status === 'ok') {
+                this.presets = data.presets || [];
+                this.selectedPresetName = name.trim();
+                this.newPresetName = ''; // Clear the input
+                Alpine.store('global').showToast(
+                    Alpine.store('global').t('presetSaved') || `Preset "${name}" saved`,
+                    'success'
+                );
+                document.getElementById('save_preset_modal').close();
+            } else {
+                throw new Error(data.error || Alpine.store('global').t('saveFailed'));
+            }
+        } catch (e) {
+            Alpine.store('global').showToast(Alpine.store('global').t('failedToSavePreset') + ': ' + e.message, 'error');
+        } finally {
+            this.savingPreset = false;
+        }
+    },
+
+    /**
+     * Delete the selected preset
+     */
+    async deleteSelectedPreset() {
+        if (!this.selectedPresetName) {
+            Alpine.store('global').showToast(Alpine.store('global').t('noPresetSelected'), 'warning');
+            return;
+        }
+
+        // Confirm deletion
+        const confirmMsg = Alpine.store('global').t('deletePresetConfirm', { name: this.selectedPresetName });
+        if (!confirm(confirmMsg)) {
+            return;
+        }
+
+        this.deletingPreset = true;
+        const password = Alpine.store('global').webuiPassword;
+
+        try {
+            const { response, newPassword } = await window.utils.request(
+                `/api/claude/presets/${encodeURIComponent(this.selectedPresetName)}`,
+                { method: 'DELETE' },
+                password
+            );
+            if (newPassword) Alpine.store('global').webuiPassword = newPassword;
+
+            if (!response.ok) throw new Error(`HTTP ${response.status}`);
+            const data = await response.json();
+            if (data.status === 'ok') {
+                this.presets = data.presets || [];
+                // Select first available preset or clear selection
+                this.selectedPresetName = this.presets.length > 0 ? this.presets[0].name : '';
+                Alpine.store('global').showToast(
+                    Alpine.store('global').t('presetDeleted') || 'Preset deleted',
+                    'success'
+                );
+            } else {
+                throw new Error(data.error || Alpine.store('global').t('deleteFailed'));
+            }
+        } catch (e) {
+            Alpine.store('global').showToast(Alpine.store('global').t('failedToDeletePreset') + ': ' + e.message, 'error');
+        } finally {
+            this.deletingPreset = false;
+        }
+    },
+
+    // ==========================================
+    // Mode Toggle (Proxy/Paid)
+    // ==========================================
+
+    /**
+     * Fetch current mode from server
+     */
+    async fetchMode() {
+        const password = Alpine.store('global').webuiPassword;
+        try {
+            const { response, newPassword } = await window.utils.request('/api/claude/mode', {}, password);
+            if (newPassword) Alpine.store('global').webuiPassword = newPassword;
+
+            if (!response.ok) throw new Error(`HTTP ${response.status}`);
+            const data = await response.json();
+            if (data.status === 'ok') {
+                this.currentMode = data.mode;
+            }
+        } catch (e) {
+            console.error('Failed to fetch mode:', e);
+        }
+    },
+
+    /**
+     * Toggle between proxy and paid mode
+     * @param {string} newMode - Target mode ('proxy' or 'paid')
+     */
+    async toggleMode(newMode) {
+        if (this.modeLoading || newMode === this.currentMode) return;
+
+        this.modeLoading = true;
+        const password = Alpine.store('global').webuiPassword;
+
+        try {
+            const { response, newPassword } = await window.utils.request('/api/claude/mode', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ mode: newMode })
+            }, password);
+            if (newPassword) Alpine.store('global').webuiPassword = newPassword;
+
+            if (!response.ok) throw new Error(`HTTP ${response.status}`);
+            const data = await response.json();
+
+            if (data.status === 'ok') {
+                this.currentMode = data.mode;
+                if (data.config) {
+                    this.config = data.config;
+                    if (!this.config.env) this.config.env = {};
+                }
+                Alpine.store('global').showToast(data.message, 'success');
+
+                // Refresh the config and mode state
+                await this.fetchConfig();
+                await this.fetchMode();
+            } else {
+                throw new Error(data.error || 'Failed to switch mode');
+            }
+        } catch (e) {
+            Alpine.store('global').showToast(
+                (Alpine.store('global').t('modeToggleFailed') || 'Failed to switch mode') + ': ' + e.message,
+                'error'
+            );
+        } finally {
+            this.modeLoading = false;
+        }
+    }
+});

public/js/components/dashboard.js

@@ -0,0 +1,323 @@
+/**
+ * Dashboard Component (Refactored)
+ * Orchestrates stats, charts, and filters modules
+ * Registers itself to window.Components for Alpine.js to consume
+ */
+window.Components = window.Components || {};
+
+window.Components.dashboard = () => ({
+    // Core state
+    stats: { total: 0, active: 0, limited: 0, overallHealth: 0, hasTrendData: false },
+    hasFilteredTrendData: true,
+    charts: { quotaDistribution: null, usageTrend: null },
+    usageStats: { total: 0, today: 0, thisHour: 0 },
+    historyData: {},
+    modelTree: {},
+    families: [],
+
+    // Claude config status
+    claudeConfigStatus: {
+        needsApply: false,
+        presetName: '',
+        checked: false,
+        lastCheckedAt: 0
+    },
+
+    // Filter state (from module)
+    ...window.DashboardFilters.getInitialState(),
+
+    // Debounced chart update to prevent rapid successive updates
+    _debouncedUpdateTrendChart: null,
+
+    init() {
+        // Create debounced version of updateTrendChart (300ms delay for stability)
+        this._debouncedUpdateTrendChart = window.utils.debounce(() => {
+            window.DashboardCharts.updateTrendChart(this);
+        }, 300);
+
+        // Load saved preferences from localStorage
+        window.DashboardFilters.loadPreferences(this);
+
+        // Check Claude config status on init
+        this.checkClaudeConfigStatus();
+
+        // Update stats when dashboard becomes active (skip initial trigger)
+        this.$watch('$store.global.activeTab', (val, oldVal) => {
+            if (val === 'dashboard' && oldVal !== undefined) {
+                this.$nextTick(() => {
+                    this.updateStats();
+                    this.updateCharts();
+                    this.updateTrendChart();
+                    this.checkClaudeConfigStatus();
+                });
+            }
+        });
+
+        // Watch for data changes
+        this.$watch('$store.data.accounts', () => {
+            if (this.$store.global.activeTab === 'dashboard') {
+                this.updateStats();
+                // Debounce chart updates to prevent rapid flickering
+                if (this._debouncedUpdateCharts) {
+                    this._debouncedUpdateCharts();
+                } else {
+                    this._debouncedUpdateCharts = window.utils.debounce(() => this.updateCharts(), 100);
+                    this._debouncedUpdateCharts();
+                }
+            }
+        });
+
+        // Watch for history updates from data-store (automatically loaded with account data)
+        this.$watch('$store.data.usageHistory', (newHistory) => {
+            if (this.$store.global.activeTab === 'dashboard' && newHistory && Object.keys(newHistory).length > 0) {
+                // Optimization: Skip if data hasn't changed (prevents double render on load)
+                if (this.historyData && JSON.stringify(newHistory) === JSON.stringify(this.historyData)) {
+                    return;
+                }
+
+                this.historyData = newHistory;
+                this.processHistory(newHistory);
+                this.stats.hasTrendData = true;
+            }
+        });
+
+        // Initial update if already on dashboard
+        // Note: Alpine.store('data') may already have data from cache if initialized before this component
+        if (this.$store.global.activeTab === 'dashboard') {
+            this.$nextTick(() => {
+                this.updateStats();
+                this.updateCharts();
+
+                // Optimization: Only process history if it hasn't been processed yet
+                // The usageHistory watcher above will handle updates if data changes
+                const history = Alpine.store('data').usageHistory;
+                if (history && Object.keys(history).length > 0) {
+                    // Check if we already have this data to avoid redundant chart update
+                    if (!this.historyData || JSON.stringify(history) !== JSON.stringify(this.historyData)) {
+                        this.historyData = history;
+                        this.processHistory(history);
+                        this.stats.hasTrendData = true;
+                    }
+                }
+            });
+        }
+    },
+
+    processHistory(history) {
+        // Build model tree from hierarchical data
+        const tree = {};
+        let total = 0, today = 0, thisHour = 0;
+
+        const now = new Date();
+        const todayStart = new Date(now);
+        todayStart.setHours(0, 0, 0, 0);
+        const currentHour = new Date(now);
+        currentHour.setMinutes(0, 0, 0);
+
+        Object.entries(history).forEach(([iso, hourData]) => {
+            const timestamp = new Date(iso);
+
+            // Process each family in the hour data
+            Object.entries(hourData).forEach(([key, value]) => {
+                // Skip metadata keys
+                if (key === '_total' || key === 'total') return;
+
+                // Handle hierarchical format: { claude: { "opus-4-5": 10, "_subtotal": 10 } }
+                if (typeof value === 'object' && value !== null) {
+                    if (!tree[key]) tree[key] = new Set();
+
+                    Object.keys(value).forEach(modelName => {
+                        if (modelName !== '_subtotal') {
+                            tree[key].add(modelName);
+                        }
+                    });
+                }
+            });
+
+            // Calculate totals
+            const hourTotal = hourData._total || hourData.total || 0;
+            total += hourTotal;
+
+            if (timestamp >= todayStart) {
+                today += hourTotal;
+            }
+            if (timestamp.getTime() === currentHour.getTime()) {
+                thisHour = hourTotal;
+            }
+        });
+
+        this.usageStats = { total, today, thisHour };
+
+        // Convert Sets to sorted arrays
+        this.modelTree = {};
+        Object.entries(tree).forEach(([family, models]) => {
+            this.modelTree[family] = Array.from(models).sort();
+        });
+        this.families = Object.keys(this.modelTree).sort();
+
+        // Auto-select new families/models that haven't been configured
+        this.autoSelectNew();
+
+        this.updateTrendChart();
+    },
+
+    // Delegation methods for stats
+    updateStats() {
+        window.DashboardStats.updateStats(this);
+    },
+
+    // Delegation methods for charts
+    updateCharts() {
+        window.DashboardCharts.updateCharts(this);
+    },
+
+    updateTrendChart() {
+        // Use debounced version to prevent rapid successive updates
+        if (this._debouncedUpdateTrendChart) {
+            this._debouncedUpdateTrendChart();
+        } else {
+            // Fallback if debounced version not initialized
+            window.DashboardCharts.updateTrendChart(this);
+        }
+    },
+
+    // Delegation methods for filters
+    loadPreferences() {
+        window.DashboardFilters.loadPreferences(this);
+    },
+
+    savePreferences() {
+        window.DashboardFilters.savePreferences(this);
+    },
+
+    setDisplayMode(mode) {
+        window.DashboardFilters.setDisplayMode(this, mode);
+    },
+
+    setTimeRange(range) {
+        window.DashboardFilters.setTimeRange(this, range);
+    },
+
+    getTimeRangeLabel() {
+        return window.DashboardFilters.getTimeRangeLabel(this);
+    },
+
+    toggleFamily(family) {
+        window.DashboardFilters.toggleFamily(this, family);
+    },
+
+    toggleModel(family, model) {
+        window.DashboardFilters.toggleModel(this, family, model);
+    },
+
+    isFamilySelected(family) {
+        return window.DashboardFilters.isFamilySelected(this, family);
+    },
+
+    isModelSelected(family, model) {
+        return window.DashboardFilters.isModelSelected(this, family, model);
+    },
+
+    selectAll() {
+        window.DashboardFilters.selectAll(this);
+    },
+
+    deselectAll() {
+        window.DashboardFilters.deselectAll(this);
+    },
+
+    getFamilyColor(family) {
+        return window.DashboardFilters.getFamilyColor(family);
+    },
+
+    getModelColor(family, modelIndex) {
+        return window.DashboardFilters.getModelColor(family, modelIndex);
+    },
+
+    getSelectedCount() {
+        return window.DashboardFilters.getSelectedCount(this);
+    },
+
+    autoSelectNew() {
+        window.DashboardFilters.autoSelectNew(this);
+    },
+
+    autoSelectTopN(n = 5) {
+        window.DashboardFilters.autoSelectTopN(this, n);
+    },
+
+    /**
+     * Check if Claude CLI config needs to be updated.
+     * Fetches both local config and presets, then compares against all presets.
+     * Skips if already checked within the last 30 seconds.
+     */
+    async checkClaudeConfigStatus() {
+        const now = Date.now();
+        if (this.claudeConfigStatus.checked && now - this.claudeConfigStatus.lastCheckedAt < 30000) return;
+
+        try {
+            const password = Alpine.store('global').webuiPassword;
+
+            const [configRes, presetsRes] = await Promise.all([
+                window.utils.request('/api/claude/config', {}, password),
+                window.utils.request('/api/claude/presets', {}, password)
+            ]);
+
+            if (!configRes.response.ok || !presetsRes.response.ok) {
+                this.claudeConfigStatus.checked = true;
+                this.claudeConfigStatus.lastCheckedAt = now;
+                return;
+            }
+
+            const configData = await configRes.response.json();
+            const presetsData = await presetsRes.response.json();
+
+            const localConfig = configData.config || { env: {} };
+            const presets = presetsData.presets || [];
+
+            if (presets.length === 0) {
+                this.claudeConfigStatus = { needsApply: false, presetName: '', checked: true, lastCheckedAt: now };
+                return;
+            }
+
+            const relevantKeys = [
+                'ANTHROPIC_BASE_URL',
+                'ANTHROPIC_AUTH_TOKEN',
+                'ANTHROPIC_MODEL',
+                'CLAUDE_CODE_SUBAGENT_MODEL',
+                'ANTHROPIC_DEFAULT_OPUS_MODEL',
+                'ANTHROPIC_DEFAULT_SONNET_MODEL',
+                'ANTHROPIC_DEFAULT_HAIKU_MODEL',
+                'ENABLE_EXPERIMENTAL_MCP_CLI'
+            ];
+
+            // Check if local config matches ANY preset
+            const matchesAnyPreset = presets.some(preset => {
+                return relevantKeys.every(key => {
+                    const localVal = localConfig.env?.[key] || '';
+                    const presetVal = preset.config?.[key] || '';
+                    return localVal === presetVal;
+                });
+            });
+
+            this.claudeConfigStatus = {
+                needsApply: !matchesAnyPreset,
+                presetName: presets[0].name,
+                checked: true,
+                lastCheckedAt: now
+            };
+        } catch (e) {
+            console.error('Failed to check Claude config status:', e);
+            this.claudeConfigStatus.checked = true;
+            this.claudeConfigStatus.lastCheckedAt = Date.now();
+        }
+    },
+
+    /**
+     * Navigate to Claude CLI settings and dismiss the warning
+     */
+    goToClaudeSettings() {
+        this.$store.global.activeTab = 'settings';
+        this.$store.global.settingsTab = 'claude';
+    }
+});

public/js/components/dashboard/charts.js

@@ -0,0 +1,590 @@
+/**
+ * Dashboard Charts Module
+ * 职责：使用 Chart.js 渲染配额分布图和使用趋势图
+ *
+ * 调用时机：
+ *   - dashboard 组件 init() 时初始化图表
+ *   - 筛选器变化时更新图表数据
+ *   - $store.data 更新时刷新图表
+ *
+ * 图表类型：
+ *   1. Quota Distribution（饼图）：按模型家族或具体模型显示配额分布
+ *   2. Usage Trend（折线图）：显示历史使用趋势
+ *
+ * 特殊处理：
+ *   - 使用 _trendChartUpdateLock 防止并发更新导致的竞争条件
+ *   - 通过 debounce 优化频繁更新的性能
+ *   - 响应式处理：移动端自动调整图表大小和标签显示
+ *
+ * @module DashboardCharts
+ */
+window.DashboardCharts = window.DashboardCharts || {};
+
+// Helper to get CSS variable values (alias to window.utils.getThemeColor)
+const getThemeColor = (name) => window.utils.getThemeColor(name);
+
+// Color palette for different families and models
+const FAMILY_COLORS = {
+  get claude() {
+    return getThemeColor("--color-neon-purple");
+  },
+  get gemini() {
+    return getThemeColor("--color-neon-green");
+  },
+  get other() {
+    return getThemeColor("--color-neon-cyan");
+  },
+};
+
+const MODEL_COLORS = Array.from({ length: 16 }, (_, i) =>
+  getThemeColor(`--color-chart-${i + 1}`)
+);
+
+// Export constants for filter module
+window.DashboardConstants = { FAMILY_COLORS, MODEL_COLORS };
+
+// Module-level lock to prevent concurrent chart updates (fixes race condition)
+let _trendChartUpdateLock = false;
+
+/**
+ * Convert hex color to rgba
+ * @param {string} hex - Hex color string
+ * @param {number} alpha - Alpha value (0-1)
+ * @returns {string} rgba color string
+ */
+window.DashboardCharts.hexToRgba = function (hex, alpha) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (result) {
+    return `rgba(${parseInt(result[1], 16)}, ${parseInt(
+      result[2],
+      16
+    )}, ${parseInt(result[3], 16)}, ${alpha})`;
+  }
+  return hex;
+};
+
+/**
+ * Check if canvas is ready for Chart creation
+ * @param {HTMLCanvasElement} canvas - Canvas element
+ * @returns {boolean} True if canvas is ready
+ */
+function isCanvasReady(canvas) {
+  if (!canvas || !canvas.isConnected) return false;
+  if (canvas.offsetWidth === 0 || canvas.offsetHeight === 0) return false;
+
+  try {
+    const ctx = canvas.getContext("2d");
+    return !!ctx;
+  } catch (e) {
+    return false;
+  }
+}
+
+/**
+ * Create a Chart.js dataset with gradient fill
+ * @param {string} label - Dataset label
+ * @param {Array} data - Data points
+ * @param {string} color - Line color
+ * @param {HTMLCanvasElement} canvas - Canvas element
+ * @returns {object} Chart.js dataset configuration
+ */
+window.DashboardCharts.createDataset = function (label, data, color, canvas) {
+  let gradient;
+
+  try {
+    // Safely create gradient with fallback
+    if (canvas && canvas.getContext) {
+      const ctx = canvas.getContext("2d");
+      if (ctx && ctx.createLinearGradient) {
+        gradient = ctx.createLinearGradient(0, 0, 0, 200);
+        gradient.addColorStop(0, window.DashboardCharts.hexToRgba(color, 0.12));
+        gradient.addColorStop(
+          0.6,
+          window.DashboardCharts.hexToRgba(color, 0.05)
+        );
+        gradient.addColorStop(1, "rgba(0, 0, 0, 0)");
+      }
+    }
+  } catch (e) {
+    if (window.UILogger) window.UILogger.debug("Gradient fallback:", e.message);
+    gradient = null;
+  }
+
+  // Fallback to solid color if gradient creation failed
+  const backgroundColor =
+    gradient || window.DashboardCharts.hexToRgba(color, 0.08);
+
+  return {
+    label,
+    data,
+    borderColor: color,
+    backgroundColor: backgroundColor,
+    borderWidth: 2.5,
+    tension: 0.35,
+    fill: true,
+    pointRadius: 2.5,
+    pointHoverRadius: 6,
+    pointBackgroundColor: color,
+    pointBorderColor: "rgba(9, 9, 11, 0.8)",
+    pointBorderWidth: 1.5,
+  };
+};
+
+/**
+ * Update quota distribution donut chart
+ * @param {object} component - Dashboard component instance
+ */
+window.DashboardCharts.updateCharts = function (component) {
+  const canvas = document.getElementById("quotaChart");
+
+  // Safety checks
+  if (!canvas) {
+    console.debug("quotaChart canvas not found");
+    return;
+  }
+
+  // FORCE DESTROY: Check for existing chart on the canvas element property
+  // This handles cases where Component state is lost but DOM persists
+  if (canvas._chartInstance) {
+    console.debug("Destroying existing quota chart from canvas property");
+    try {
+        canvas._chartInstance.destroy();
+    } catch(e) { if (window.UILogger) window.UILogger.debug(e); }
+    canvas._chartInstance = null;
+  }
+  
+  // Also check component state as backup
+  if (component.charts.quotaDistribution) {
+     try {
+         component.charts.quotaDistribution.destroy();
+     } catch(e) { }
+     component.charts.quotaDistribution = null;
+  }
+  
+  // Also try Chart.js registry
+  if (typeof Chart !== "undefined" && Chart.getChart) {
+      const regChart = Chart.getChart(canvas);
+      if (regChart) {
+          try { regChart.destroy(); } catch(e) {}
+      }
+  }
+
+  if (typeof Chart === "undefined") {
+    if (window.UILogger) window.UILogger.warn("Chart.js not loaded");
+    return;
+  }
+  if (!isCanvasReady(canvas)) {
+    if (window.UILogger) window.UILogger.debug("quotaChart canvas not ready, skipping update");
+    return;
+  }
+
+  // Use UNFILTERED data for global health chart
+  const rows = Alpine.store("data").getUnfilteredQuotaData();
+  if (!rows || rows.length === 0) return;
+
+  const healthByFamily = {};
+  let totalHealthSum = 0;
+  let totalModelCount = 0;
+
+  rows.forEach((row) => {
+    const family = row.family || "unknown";
+    if (!healthByFamily[family]) {
+      healthByFamily[family] = { total: 0, weighted: 0 };
+    }
+
+    // Calculate average health from quotaInfo (each entry has { pct })
+    // Health = average of all account quotas for this model
+    const quotaInfo = row.quotaInfo || [];
+    let avgHealth = 0;
+
+    if (quotaInfo.length > 0) {
+      avgHealth = quotaInfo.reduce((sum, q) => sum + (q.pct || 0), 0) / quotaInfo.length;
+    }
+    // If quotaInfo is empty, avgHealth remains 0 (depleted/unknown)
+
+    healthByFamily[family].total++;
+    healthByFamily[family].weighted += avgHealth;
+    totalHealthSum += avgHealth;
+    totalModelCount++;
+  });
+
+  // Update overall health for dashboard display
+  component.stats.overallHealth = totalModelCount > 0
+    ? Math.round(totalHealthSum / totalModelCount)
+    : 0;
+
+  const familyColors = {
+    claude: getThemeColor("--color-neon-purple") || "#a855f7",
+    gemini: getThemeColor("--color-neon-green") || "#22c55e",
+    unknown: getThemeColor("--color-neon-cyan") || "#06b6d4",
+  };
+
+  const data = [];
+  const colors = [];
+  const labels = [];
+
+  const totalFamilies = Object.keys(healthByFamily).length;
+  const segmentSize = 100 / totalFamilies;
+
+  Object.entries(healthByFamily).forEach(([family, { total, weighted }]) => {
+    const health = weighted / total;
+    const activeVal = (health / 100) * segmentSize;
+    const inactiveVal = segmentSize - activeVal;
+
+    const familyColor = familyColors[family] || familyColors["unknown"];
+
+    // Get translation keys
+    const store = Alpine.store("global");
+    const familyKey =
+      "family" + family.charAt(0).toUpperCase() + family.slice(1);
+    const familyName = store.t(familyKey);
+
+    // Labels using translations if possible
+    const activeLabel =
+      family === "claude"
+        ? store.t("claudeActive")
+        : family === "gemini"
+        ? store.t("geminiActive")
+        : `${familyName} ${store.t("activeSuffix")}`;
+
+    const depletedLabel =
+      family === "claude"
+        ? store.t("claudeEmpty")
+        : family === "gemini"
+        ? store.t("geminiEmpty")
+        : `${familyName} ${store.t("depleted")}`;
+
+    // Active segment
+    data.push(activeVal);
+    colors.push(familyColor);
+    labels.push(activeLabel);
+
+    // Inactive segment
+    data.push(inactiveVal);
+    // Use higher opacity (0.6) to ensure the ring color matches the legend more closely
+    // while still differentiating "depleted" from "active" (1.0 opacity)
+    colors.push(window.DashboardCharts.hexToRgba(familyColor, 0.6));
+    labels.push(depletedLabel);
+  });
+
+  // Create Chart
+  try {
+    const newChart = new Chart(canvas, {
+       // ... config
+       type: "doughnut",
+       data: {
+         labels: labels,
+         datasets: [
+           {
+             data: data,
+             backgroundColor: colors,
+             borderColor: getThemeColor("--color-space-950"),
+             borderWidth: 0,
+             hoverOffset: 0,
+             borderRadius: 0,
+           },
+         ],
+       },
+       options: {
+         responsive: true,
+         maintainAspectRatio: false,
+         cutout: "85%",
+         rotation: -90,
+         circumference: 360,
+         plugins: {
+           legend: { display: false },
+           tooltip: { enabled: false },
+           title: { display: false },
+         },
+         animation: {
+           // Disable animation for quota chart to prevent "double refresh" visual glitch
+           duration: 0
+         },
+       },
+    });
+    
+    // SAVE INSTANCE TO CANVAS AND COMPONENT
+    canvas._chartInstance = newChart;
+    component.charts.quotaDistribution = newChart;
+    
+  } catch (e) {
+    console.error("Failed to create quota chart:", e);
+  }
+};
+
+/**
+ * Update usage trend line chart
+ * @param {object} component - Dashboard component instance
+ */
+window.DashboardCharts.updateTrendChart = function (component) {
+  // Prevent concurrent updates (fixes race condition on rapid toggling)
+  if (_trendChartUpdateLock) {
+    if (window.UILogger) window.UILogger.debug("[updateTrendChart] Update already in progress, skipping");
+    return;
+  }
+  _trendChartUpdateLock = true;
+
+  const logger = window.UILogger || console;
+  logger.debug("[updateTrendChart] Starting update...");
+
+  const canvas = document.getElementById("usageTrendChart");
+  
+  // FORCE DESTROY: Check for existing chart on the canvas element property
+  if (canvas) {
+      if (canvas._chartInstance) {
+        console.debug("Destroying existing trend chart from canvas property");
+        try {
+            canvas._chartInstance.stop();
+            canvas._chartInstance.destroy();
+        } catch(e) { if (window.UILogger) window.UILogger.debug(e); }
+        canvas._chartInstance = null;
+      }
+      
+      // Also try Chart.js registry
+      if (typeof Chart !== "undefined" && Chart.getChart) {
+          const regChart = Chart.getChart(canvas);
+          if (regChart) {
+              try { regChart.stop(); regChart.destroy(); } catch(e) {}
+          }
+      }
+  }
+
+  // Also check component state
+  if (component.charts.usageTrend) {
+    try {
+      component.charts.usageTrend.stop();
+      component.charts.usageTrend.destroy();
+    } catch (e) { }
+    component.charts.usageTrend = null;
+  }
+
+  // Safety checks
+  if (!canvas) {
+    if (window.UILogger) window.UILogger.debug("[updateTrendChart] Canvas not found in DOM");
+    _trendChartUpdateLock = false;
+    return;
+  }
+  if (typeof Chart === "undefined") {
+    if (window.UILogger) window.UILogger.warn("[updateTrendChart] Chart.js not loaded");
+    _trendChartUpdateLock = false;
+    return;
+  }
+
+  if (window.UILogger) window.UILogger.debug("[updateTrendChart] Canvas element:", {
+    exists: !!canvas,
+    isConnected: canvas.isConnected,
+    width: canvas.offsetWidth,
+    height: canvas.offsetHeight,
+    parentElement: canvas.parentElement?.tagName,
+  });
+
+  if (!isCanvasReady(canvas)) {
+    if (window.UILogger) window.UILogger.debug("[updateTrendChart] Canvas not ready", {
+      isConnected: canvas.isConnected,
+      width: canvas.offsetWidth,
+      height: canvas.offsetHeight,
+    });
+    _trendChartUpdateLock = false;
+    return;
+  }
+
+  // Clear canvas to ensure clean state after destroy
+  try {
+    const ctx = canvas.getContext("2d");
+    if (ctx) {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+    }
+  } catch (e) {
+    if (window.UILogger) window.UILogger.debug("[updateTrendChart] Failed to clear canvas:", e.message);
+  }
+
+  if (window.UILogger) window.UILogger.debug(
+    "[updateTrendChart] Canvas is ready, proceeding with chart creation"
+  );
+
+  // Use filtered history data based on time range
+  const history = window.DashboardFilters.getFilteredHistoryData(component);
+  if (!history || Object.keys(history).length === 0) {
+    if (window.UILogger) window.UILogger.debug("No history data available for trend chart (after filtering)");
+    component.hasFilteredTrendData = false;
+    _trendChartUpdateLock = false;
+    return;
+  }
+
+  component.hasFilteredTrendData = true;
+
+  // Sort entries by timestamp for correct order
+  const sortedEntries = Object.entries(history).sort(
+    ([a], [b]) => new Date(a).getTime() - new Date(b).getTime()
+  );
+
+  // Determine if data spans multiple days (for smart label formatting)
+  const timestamps = sortedEntries.map(([iso]) => new Date(iso));
+  const isMultiDay = timestamps.length > 1 &&
+    timestamps[0].toDateString() !== timestamps[timestamps.length - 1].toDateString();
+
+  // Helper to format X-axis labels based on time range and multi-day status
+  const formatLabel = (date) => {
+    const timeRange = component.timeRange || '24h';
+
+    if (timeRange === '7d') {
+      // Week view: show MM/DD
+      return date.toLocaleDateString([], { month: '2-digit', day: '2-digit' });
+    } else if (isMultiDay || timeRange === 'all') {
+      // Multi-day data: show MM/DD HH:MM
+      return date.toLocaleDateString([], { month: '2-digit', day: '2-digit' }) + ' ' +
+             date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    } else {
+      // Same day: show HH:MM only
+      return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    }
+  };
+
+  const labels = [];
+  const datasets = [];
+
+  if (component.displayMode === "family") {
+    // Aggregate by family
+    const dataByFamily = {};
+    component.selectedFamilies.forEach((family) => {
+      dataByFamily[family] = [];
+    });
+
+    sortedEntries.forEach(([iso, hourData]) => {
+      const date = new Date(iso);
+      labels.push(formatLabel(date));
+
+      component.selectedFamilies.forEach((family) => {
+        const familyData = hourData[family];
+        const count = familyData?._subtotal || 0;
+        dataByFamily[family].push(count);
+      });
+    });
+
+    // Build datasets for families
+    component.selectedFamilies.forEach((family) => {
+      const color = window.DashboardFilters.getFamilyColor(family);
+      const familyKey =
+        "family" + family.charAt(0).toUpperCase() + family.slice(1);
+      const label = Alpine.store("global").t(familyKey);
+      datasets.push(
+        window.DashboardCharts.createDataset(
+          label,
+          dataByFamily[family],
+          color,
+          canvas
+        )
+      );
+    });
+  } else {
+    // Show individual models
+    const dataByModel = {};
+
+    // Initialize data arrays
+    component.families.forEach((family) => {
+      (component.selectedModels[family] || []).forEach((model) => {
+        const key = `${family}:${model}`;
+        dataByModel[key] = [];
+      });
+    });
+
+    sortedEntries.forEach(([iso, hourData]) => {
+      const date = new Date(iso);
+      labels.push(formatLabel(date));
+
+      component.families.forEach((family) => {
+        const familyData = hourData[family] || {};
+        (component.selectedModels[family] || []).forEach((model) => {
+          const key = `${family}:${model}`;
+          dataByModel[key].push(familyData[model] || 0);
+        });
+      });
+    });
+
+    // Build datasets for models
+    component.families.forEach((family) => {
+      (component.selectedModels[family] || []).forEach((model, modelIndex) => {
+        const key = `${family}:${model}`;
+        const color = window.DashboardFilters.getModelColor(family, modelIndex);
+        datasets.push(
+          window.DashboardCharts.createDataset(
+            model,
+            dataByModel[key],
+            color,
+            canvas
+          )
+        );
+      });
+    });
+  }
+
+  try {
+    const newChart = new Chart(canvas, {
+      type: "line",
+      data: { labels, datasets },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        animation: {
+          duration: 300, // Reduced animation for faster updates
+        },
+        interaction: {
+          mode: "index",
+          intersect: false,
+        },
+        plugins: {
+          legend: { display: false },
+          tooltip: {
+            backgroundColor:
+              getThemeColor("--color-space-950") || "rgba(24, 24, 27, 0.9)",
+            titleColor: getThemeColor("--color-text-main"),
+            bodyColor: getThemeColor("--color-text-bright"),
+            borderColor: getThemeColor("--color-space-border"),
+            borderWidth: 1,
+            padding: 10,
+            displayColors: true,
+            callbacks: {
+              label: function (context) {
+                return context.dataset.label + ": " + context.parsed.y;
+              },
+            },
+          },
+        },
+        scales: {
+          x: {
+            display: true,
+            grid: { display: false },
+            ticks: {
+              color: getThemeColor("--color-text-muted"),
+              font: { size: 10 },
+            },
+          },
+          y: {
+            display: true,
+            beginAtZero: true,
+            grid: {
+              display: true,
+              color:
+                getThemeColor("--color-space-border") + "1a" ||
+                "rgba(255,255,255,0.05)",
+            },
+            ticks: {
+              color: getThemeColor("--color-text-muted"),
+              font: { size: 10 },
+            },
+          },
+        },
+      },
+    });
+    
+    // SAVE INSTANCE
+    canvas._chartInstance = newChart;
+    component.charts.usageTrend = newChart;
+
+  } catch (e) {
+    console.error("Failed to create trend chart:", e);
+  } finally {
+    // Always release lock
+    _trendChartUpdateLock = false;
+  }
+};

public/js/components/dashboard/filters.js

@@ -0,0 +1,362 @@
+/**
+ * Dashboard Filters Module
+ * 职责：管理图表筛选器的状态和持久化
+ *
+ * 功能：
+ *   1. 时间范围筛选（1h/6h/24h/7d/all）
+ *   2. 显示模式切换（按家族/按模型）
+ *   3. 模型/家族多选筛选
+ *   4. 筛选器状态持久化到 localStorage
+ *
+ * 调用时机：
+ *   - 组件初始化时加载用户偏好
+ *   - 筛选器变化时保存并触发图表更新
+ *
+ * 持久化键：
+ *   - localStorage['dashboard_chart_prefs']
+ *
+ * @module DashboardFilters
+ */
+window.DashboardFilters = window.DashboardFilters || {};
+
+/**
+ * Get initial filter state
+ * @returns {object} Initial state for filter properties
+ */
+window.DashboardFilters.getInitialState = function() {
+    return {
+        timeRange: '24h',  // '1h', '6h', '24h', '7d', 'all'
+        displayMode: 'model',
+        selectedFamilies: [],
+        selectedModels: {},
+        showModelFilter: false,
+        showTimeRangeDropdown: false,
+        showDisplayModeDropdown: false
+    };
+};
+
+/**
+ * Load filter preferences from localStorage
+ * @param {object} component - Dashboard component instance
+ */
+window.DashboardFilters.loadPreferences = function(component) {
+    try {
+        const saved = localStorage.getItem('dashboard_chart_prefs');
+        if (saved) {
+            const prefs = JSON.parse(saved);
+            component.timeRange = prefs.timeRange || '24h';
+            component.displayMode = prefs.displayMode || 'model';
+            component.selectedFamilies = prefs.selectedFamilies || [];
+            component.selectedModels = prefs.selectedModels || {};
+        }
+    } catch (e) {
+        if (window.UILogger) window.UILogger.debug('Failed to load dashboard preferences:', e.message);
+    }
+};
+
+/**
+ * Save filter preferences to localStorage
+ * @param {object} component - Dashboard component instance
+ */
+window.DashboardFilters.savePreferences = function(component) {
+    try {
+        localStorage.setItem('dashboard_chart_prefs', JSON.stringify({
+            timeRange: component.timeRange,
+            displayMode: component.displayMode,
+            selectedFamilies: component.selectedFamilies,
+            selectedModels: component.selectedModels
+        }));
+    } catch (e) {
+        if (window.UILogger) window.UILogger.debug('Failed to save dashboard preferences:', e.message);
+    }
+};
+
+/**
+ * Set display mode (family or model)
+ * @param {object} component - Dashboard component instance
+ * @param {string} mode - 'family' or 'model'
+ */
+window.DashboardFilters.setDisplayMode = function(component, mode) {
+    component.displayMode = mode;
+    component.showDisplayModeDropdown = false;
+    window.DashboardFilters.savePreferences(component);
+    // updateTrendChart uses debounce internally, call directly
+    component.updateTrendChart();
+};
+
+/**
+ * Set time range filter
+ * @param {object} component - Dashboard component instance
+ * @param {string} range - '1h', '6h', '24h', '7d', 'all'
+ */
+window.DashboardFilters.setTimeRange = function(component, range) {
+    component.timeRange = range;
+    component.showTimeRangeDropdown = false;
+    window.DashboardFilters.savePreferences(component);
+    component.updateTrendChart();
+};
+
+/**
+ * Get time range cutoff timestamp
+ * @param {string} range - Time range code
+ * @returns {number|null} Cutoff timestamp or null for 'all'
+ */
+window.DashboardFilters.getTimeRangeCutoff = function(range) {
+    const now = Date.now();
+    switch (range) {
+        case '1h': return now - 1 * 60 * 60 * 1000;
+        case '6h': return now - 6 * 60 * 60 * 1000;
+        case '24h': return now - 24 * 60 * 60 * 1000;
+        case '7d': return now - 7 * 24 * 60 * 60 * 1000;
+        default: return null; // 'all'
+    }
+};
+
+/**
+ * Get filtered history data based on time range
+ * @param {object} component - Dashboard component instance
+ * @returns {object} Filtered history data
+ */
+window.DashboardFilters.getFilteredHistoryData = function(component) {
+    const history = component.historyData;
+    if (!history || Object.keys(history).length === 0) return {};
+
+    const cutoff = window.DashboardFilters.getTimeRangeCutoff(component.timeRange);
+    if (!cutoff) return history; // 'all' - return everything
+
+    const filtered = {};
+    Object.entries(history).forEach(([iso, data]) => {
+        const timestamp = new Date(iso).getTime();
+        if (timestamp >= cutoff) {
+            filtered[iso] = data;
+        }
+    });
+    return filtered;
+};
+
+/**
+ * Get time range label for display
+ * @param {object} component - Dashboard component instance
+ * @returns {string} Translated label
+ */
+window.DashboardFilters.getTimeRangeLabel = function(component) {
+    const store = Alpine.store('global');
+    switch (component.timeRange) {
+        case '1h': return store.t('last1Hour');
+        case '6h': return store.t('last6Hours');
+        case '24h': return store.t('last24Hours');
+        case '7d': return store.t('last7Days');
+        default: return store.t('allTime');
+    }
+};
+
+/**
+ * Toggle family selection
+ * @param {object} component - Dashboard component instance
+ * @param {string} family - Family name (e.g., 'claude', 'gemini')
+ */
+window.DashboardFilters.toggleFamily = function(component, family) {
+    const index = component.selectedFamilies.indexOf(family);
+    if (index > -1) {
+        component.selectedFamilies.splice(index, 1);
+    } else {
+        component.selectedFamilies.push(family);
+    }
+    window.DashboardFilters.savePreferences(component);
+    // updateTrendChart uses debounce internally, call directly
+    component.updateTrendChart();
+};
+
+/**
+ * Toggle model selection within a family
+ * @param {object} component - Dashboard component instance
+ * @param {string} family - Family name
+ * @param {string} model - Model name
+ */
+window.DashboardFilters.toggleModel = function(component, family, model) {
+    if (!component.selectedModels[family]) {
+        component.selectedModels[family] = [];
+    }
+    const index = component.selectedModels[family].indexOf(model);
+    if (index > -1) {
+        component.selectedModels[family].splice(index, 1);
+    } else {
+        component.selectedModels[family].push(model);
+    }
+    window.DashboardFilters.savePreferences(component);
+    // updateTrendChart uses debounce internally, call directly
+    component.updateTrendChart();
+};
+
+/**
+ * Check if family is selected
+ * @param {object} component - Dashboard component instance
+ * @param {string} family - Family name
+ * @returns {boolean}
+ */
+window.DashboardFilters.isFamilySelected = function(component, family) {
+    return component.selectedFamilies.includes(family);
+};
+
+/**
+ * Check if model is selected
+ * @param {object} component - Dashboard component instance
+ * @param {string} family - Family name
+ * @param {string} model - Model name
+ * @returns {boolean}
+ */
+window.DashboardFilters.isModelSelected = function(component, family, model) {
+    return component.selectedModels[family]?.includes(model) || false;
+};
+
+/**
+ * Select all families and models
+ * @param {object} component - Dashboard component instance
+ */
+window.DashboardFilters.selectAll = function(component) {
+    component.selectedFamilies = [...component.families];
+    component.families.forEach(family => {
+        component.selectedModels[family] = [...(component.modelTree[family] || [])];
+    });
+    window.DashboardFilters.savePreferences(component);
+    // updateTrendChart uses debounce internally, call directly
+    component.updateTrendChart();
+};
+
+/**
+ * Deselect all families and models
+ * @param {object} component - Dashboard component instance
+ */
+window.DashboardFilters.deselectAll = function(component) {
+    component.selectedFamilies = [];
+    component.selectedModels = {};
+    window.DashboardFilters.savePreferences(component);
+    // updateTrendChart uses debounce internally, call directly
+    component.updateTrendChart();
+};
+
+/**
+ * Get color for a family
+ * @param {string} family - Family name
+ * @returns {string} Color value
+ */
+window.DashboardFilters.getFamilyColor = function(family) {
+    const FAMILY_COLORS = window.DashboardConstants?.FAMILY_COLORS || {};
+    return FAMILY_COLORS[family] || FAMILY_COLORS.other;
+};
+
+/**
+ * Get color for a model (with index for variation within family)
+ * @param {string} family - Family name
+ * @param {number} modelIndex - Index of model within family
+ * @returns {string} Color value
+ */
+window.DashboardFilters.getModelColor = function(family, modelIndex) {
+    const MODEL_COLORS = window.DashboardConstants?.MODEL_COLORS || [];
+    const baseIndex = family === 'claude' ? 0 : (family === 'gemini' ? 4 : 8);
+    return MODEL_COLORS[(baseIndex + modelIndex) % MODEL_COLORS.length];
+};
+
+/**
+ * Get count of selected items for display
+ * @param {object} component - Dashboard component instance
+ * @returns {string} Selected count string (e.g., "3/5")
+ */
+window.DashboardFilters.getSelectedCount = function(component) {
+    if (component.displayMode === 'family') {
+        return `${component.selectedFamilies.length}/${component.families.length}`;
+    }
+    let selected = 0, total = 0;
+    component.families.forEach(family => {
+        const models = component.modelTree[family] || [];
+        total += models.length;
+        selected += (component.selectedModels[family] || []).length;
+    });
+    return `${selected}/${total}`;
+};
+
+/**
+ * Auto-select new families/models that haven't been configured
+ * @param {object} component - Dashboard component instance
+ */
+window.DashboardFilters.autoSelectNew = function(component) {
+    // If no preferences saved, select all
+    if (component.selectedFamilies.length === 0 && Object.keys(component.selectedModels).length === 0) {
+        component.selectedFamilies = [...component.families];
+        component.families.forEach(family => {
+            component.selectedModels[family] = [...(component.modelTree[family] || [])];
+        });
+        window.DashboardFilters.savePreferences(component);
+        return;
+    }
+
+    // Add new families/models that appeared
+    component.families.forEach(family => {
+        if (!component.selectedFamilies.includes(family)) {
+            component.selectedFamilies.push(family);
+        }
+        if (!component.selectedModels[family]) {
+            component.selectedModels[family] = [];
+        }
+        (component.modelTree[family] || []).forEach(model => {
+            if (!component.selectedModels[family].includes(model)) {
+                component.selectedModels[family].push(model);
+            }
+        });
+    });
+};
+
+/**
+ * Auto-select top N models by usage (past 24 hours)
+ * @param {object} component - Dashboard component instance
+ * @param {number} n - Number of models to select (default: 5)
+ */
+window.DashboardFilters.autoSelectTopN = function(component, n = 5) {
+    // Calculate usage for each model over past 24 hours
+    const usage = {};
+    const now = Date.now();
+    const dayAgo = now - 24 * 60 * 60 * 1000;
+
+    Object.entries(component.historyData).forEach(([iso, hourData]) => {
+        const timestamp = new Date(iso).getTime();
+        if (timestamp < dayAgo) return;
+
+        Object.entries(hourData).forEach(([family, familyData]) => {
+            if (typeof familyData === 'object' && family !== '_total') {
+                Object.entries(familyData).forEach(([model, count]) => {
+                    if (model !== '_subtotal') {
+                        const key = `${family}:${model}`;
+                        usage[key] = (usage[key] || 0) + count;
+                    }
+                });
+            }
+        });
+    });
+
+    // Sort by usage and take top N
+    const sorted = Object.entries(usage)
+        .sort((a, b) => b[1] - a[1])
+        .slice(0, n);
+
+    // Clear current selection
+    component.selectedFamilies = [];
+    component.selectedModels = {};
+
+    // Select top models and their families
+    sorted.forEach(([key, _]) => {
+        const [family, model] = key.split(':');
+        if (!component.selectedFamilies.includes(family)) {
+            component.selectedFamilies.push(family);
+        }
+        if (!component.selectedModels[family]) {
+            component.selectedModels[family] = [];
+        }
+        if (!component.selectedModels[family].includes(model)) {
+            component.selectedModels[family].push(model);
+        }
+    });
+
+    window.DashboardFilters.savePreferences(component);
+    // updateTrendChart uses debounce internally, call directly
+    component.updateTrendChart();
+};

public/js/components/dashboard/stats.js

@@ -0,0 +1,110 @@
+/**
+ * Dashboard Stats Module
+ * 职责：根据 Alpine.store('data') 计算账号统计数据
+ *
+ * 调用时机：
+ *   - dashboard 组件 init() 时
+ *   - $store.data 更新时（通过 $watch 监听）
+ *
+ * 统计维度：
+ *   - total: 启用账号总数（排除禁用账号）
+ *   - active: 有可用配额的账号数
+ *   - limited: 配额受限或失效的账号数
+ *   - subscription: 按订阅级别分类（ultra/pro/free）
+ *
+ * @module DashboardStats
+ */
+window.DashboardStats = window.DashboardStats || {};
+
+/**
+ * 更新账号统计数据
+ *
+ * 统计逻辑：
+ *   1. 仅统计启用的账号（enabled !== false）
+ *   2. 检查账号下所有追踪模型的配额
+ *   3. 如果任一追踪模型配额 <= 5%，则标记为 limited (Rate Limited Cooldown)
+ *   4. 如果所有追踪模型配额 > 5%，则标记为 active
+ *   5. 状态非 'ok' 的账号归为 limited
+ *
+ * @param {object} component - Dashboard 组件实例（Alpine.js 上下文）
+ * @param {object} component.stats - 统计数据对象（会被修改）
+ * @param {number} component.stats.total - 启用账号总数
+ * @param {number} component.stats.active - 活跃账号数
+ * @param {number} component.stats.limited - 受限账号数
+ * @param {object} component.stats.subscription - 订阅级别分布
+ * @returns {void}
+ */
+window.DashboardStats.updateStats = function(component) {
+    const accounts = Alpine.store('data').accounts;
+    let active = 0, limited = 0;
+
+    // Only count enabled accounts in statistics
+    const enabledAccounts = accounts.filter(acc => acc.enabled !== false);
+
+    enabledAccounts.forEach(acc => {
+        if (acc.status === 'ok') {
+            const limits = Object.entries(acc.limits || {});
+
+            if (limits.length === 0) {
+                // No limit data available, consider limited to be safe
+                limited++;
+                return;
+            }
+
+            // Check if ANY tracked model is rate limited (<= 5%)
+            // We consider all models in the limits object as "tracked"
+            const hasRateLimitedModel = limits.some(([_, l]) => {
+                // Treat null/undefined fraction as 0 (limited)
+                if (!l || l.remainingFraction === null || l.remainingFraction === undefined) return true;
+                return l.remainingFraction <= 0.05;
+            });
+
+            if (hasRateLimitedModel) {
+                limited++;
+            } else {
+                active++;
+            }
+        } else {
+            limited++;
+        }
+    });
+
+    // TOTAL shows only enabled accounts
+    // Disabled accounts are excluded from all statistics
+    component.stats.total = enabledAccounts.length;
+    component.stats.active = active;
+    component.stats.limited = limited;
+
+    // Calculate model usage for rate limit details
+    let totalLimitedModels = 0;
+    let totalTrackedModels = 0;
+
+    enabledAccounts.forEach(acc => {
+         const limits = Object.entries(acc.limits || {});
+         limits.forEach(([id, l]) => {
+             totalTrackedModels++;
+             if (!l || l.remainingFraction == null || l.remainingFraction <= 0.05) {
+                 totalLimitedModels++;
+             }
+         });
+    });
+    
+    component.stats.modelUsage = {
+        limited: totalLimitedModels,
+        total: totalTrackedModels
+    };
+
+    // Calculate subscription tier distribution
+    const subscription = { ultra: 0, pro: 0, free: 0 };
+    enabledAccounts.forEach(acc => {
+        const tier = acc.subscription?.tier || 'free';
+        if (tier === 'ultra') {
+            subscription.ultra++;
+        } else if (tier === 'pro') {
+            subscription.pro++;
+        } else {
+            subscription.free++;
+        }
+    });
+    component.stats.subscription = subscription;
+};

public/js/components/logs-viewer.js

@@ -0,0 +1,131 @@
+/**
+ * Logs Viewer Component
+ * Registers itself to window.Components for Alpine.js to consume
+ */
+window.Components = window.Components || {};
+
+window.Components.logsViewer = () => ({
+    logs: [],
+    isAutoScroll: true,
+    eventSource: null,
+    searchQuery: '',
+    filters: {
+        INFO: true,
+        WARN: true,
+        ERROR: true,
+        SUCCESS: true,
+        DEBUG: false
+    },
+
+    get filteredLogs() {
+        const query = this.searchQuery.trim();
+        if (!query) {
+            return this.logs.filter(log => this.filters[log.level]);
+        }
+
+        // Try regex first, fallback to plain text search
+        let matcher;
+        try {
+            const regex = new RegExp(query, 'i');
+            matcher = (msg) => regex.test(msg);
+        } catch (e) {
+            // Invalid regex, fallback to case-insensitive string search
+            const lowerQuery = query.toLowerCase();
+            matcher = (msg) => msg.toLowerCase().includes(lowerQuery);
+        }
+
+        return this.logs.filter(log => {
+            // Level Filter
+            if (!this.filters[log.level]) return false;
+
+            // Search Filter
+            return matcher(log.message);
+        });
+    },
+
+    init() {
+        this.startLogStream();
+
+        // Sync DEBUG filter with debugLogging sub-toggle
+        const settings = Alpine.store('settings');
+        if (settings) {
+            this.filters.DEBUG = !!settings.debugLogging;
+            this.$watch('$store.settings.debugLogging', (val) => {
+                this.filters.DEBUG = !!val;
+            });
+        }
+
+        this.$watch('isAutoScroll', (val) => {
+            if (val) this.scrollToBottom();
+        });
+
+        // Watch filters to maintain auto-scroll if enabled
+        this.$watch('searchQuery', () => { if(this.isAutoScroll) this.$nextTick(() => this.scrollToBottom()) });
+        this.$watch('filters', () => { if(this.isAutoScroll) this.$nextTick(() => this.scrollToBottom()) });
+    },
+
+    startLogStream() {
+        if (this.eventSource) this.eventSource.close();
+
+        const password = Alpine.store('global').webuiPassword;
+        const url = password
+            ? `/api/logs/stream?history=true&password=${encodeURIComponent(password)}`
+            : '/api/logs/stream?history=true';
+
+        this.eventSource = new EventSource(url);
+        this.eventSource.onmessage = (event) => {
+            try {
+                const log = JSON.parse(event.data);
+                this.logs.push(log);
+
+                // Limit log buffer
+                const limit = Alpine.store('settings')?.logLimit || window.AppConstants.LIMITS.DEFAULT_LOG_LIMIT;
+                if (this.logs.length > limit) {
+                    this.logs = this.logs.slice(-limit);
+                }
+
+                if (this.isAutoScroll) {
+                    this.$nextTick(() => this.scrollToBottom());
+                }
+            } catch (e) {
+                if (window.UILogger) window.UILogger.debug('Log parse error:', e.message);
+            }
+        };
+
+        this.eventSource.onerror = () => {
+            if (window.UILogger) window.UILogger.debug('Log stream disconnected, reconnecting...');
+            setTimeout(() => this.startLogStream(), 3000);
+        };
+    },
+
+    scrollToBottom() {
+        const container = document.getElementById('logs-container');
+        if (container) container.scrollTop = container.scrollHeight;
+    },
+
+    clearLogs() {
+        this.logs = [];
+    },
+
+    exportLogs() {
+        if (this.logs.length === 0) return;
+
+        const shouldRedact = Alpine.store('settings')?.redactMode && window.Redact;
+        const lines = this.logs.map(log => {
+            const ts = new Date(log.timestamp).toISOString();
+            const message = shouldRedact ? window.Redact.logMessage(log.message) : log.message;
+            return `[${ts}] [${log.level}] ${message}`;
+        });
+
+        const text = lines.join('\n');
+        const blob = new Blob([text], { type: 'text/plain' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `proxy-logs-${new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19)}.txt`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    }
+});

public/js/components/model-dropdown.js

@@ -0,0 +1,151 @@
+/**
+ * Model Dropdown Component
+ * Reusable grouped model selector with search, clear, and keyboard navigation.
+ * Registers itself to window.Components for Alpine.js to consume.
+ *
+ * Usage (inside x-data="claudeConfig"):
+ *   x-data="window.Components.modelDropdown('ANTHROPIC_MODEL', 'primaryModel', 'cyan')"
+ *
+ * @param {string} field - config.env key (e.g. 'ANTHROPIC_MODEL')
+ * @param {string} labelKey - i18n key for the label
+ * @param {string} accentColor - 'cyan' or 'purple' (maps to Tailwind border classes)
+ *
+ * Requires parent scope to provide: config, selectModel(), gemini1mSuffix
+ */
+window.Components = window.Components || {};
+
+window.Components.modelDropdown = (field, labelKey, accentColor) => ({
+    field,
+    labelKey,
+    accentColor,
+
+    open: false,
+    searchTerm: '',
+    highlightIndex: -1,
+
+    init() {
+        if (typeof this.selectModel !== 'function' || !this.config) {
+            console.error(`modelDropdown(${field}): must be nested inside a parent scope that provides config and selectModel()`);
+        }
+    },
+
+    get currentValue() {
+        return this.config?.env?.[this.field] || '';
+    },
+
+    get filteredModels() {
+        const models = this.$store.data.models || [];
+        if (!this.searchTerm) return models;
+        const term = this.searchTerm.toLowerCase();
+        return models.filter(m => m.toLowerCase().includes(term));
+    },
+
+    get groupedModels() {
+        const groups = [
+            { family: 'claude', label: this.$store.global.t('familyClaude'), items: [] },
+            { family: 'gemini', label: this.$store.global.t('familyGemini'), items: [] },
+            { family: 'other', label: this.$store.global.t('familyOther'), items: [] }
+        ];
+        for (const modelId of this.filteredModels) {
+            const fam = this.$store.data.getModelFamily(modelId);
+            const group = groups.find(g => g.family === fam) || groups[2];
+            group.items.push(modelId);
+        }
+        return groups.filter(g => g.items.length > 0);
+    },
+
+    get flatItems() {
+        const items = [];
+        if (this.currentValue) {
+            items.push({ type: 'clear' });
+        }
+        for (const group of this.groupedModels) {
+            for (const modelId of group.items) {
+                items.push({ type: 'model', id: modelId });
+            }
+        }
+        return items;
+    },
+
+    get focusBorderClass() {
+        return this.accentColor === 'purple'
+            ? 'focus:!border-neon-purple'
+            : 'focus:!border-neon-cyan';
+    },
+
+    openDropdown() {
+        this.open = true;
+        this.searchTerm = '';
+        this.highlightIndex = -1;
+    },
+
+    closeDropdown() {
+        this.open = false;
+        this.searchTerm = '';
+        this.highlightIndex = -1;
+    },
+
+    choose(modelId) {
+        this.selectModel(this.field, modelId);
+        this.closeDropdown();
+    },
+
+    clearField() {
+        if (this.config?.env) {
+            delete this.config.env[this.field];
+        }
+        this.closeDropdown();
+    },
+
+    isSelected(modelId) {
+        const val = this.currentValue;
+        return val === modelId || val === modelId + '[1m]';
+    },
+
+    onKeydown(event) {
+        if (!this.open) {
+            if (event.key === 'ArrowDown' || event.key === 'Enter') {
+                event.preventDefault();
+                this.openDropdown();
+            }
+            return;
+        }
+
+        const items = this.flatItems;
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.highlightIndex = Math.min(this.highlightIndex + 1, items.length - 1);
+            this.scrollToHighlighted();
+        } else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.highlightIndex = Math.max(this.highlightIndex - 1, 0);
+            this.scrollToHighlighted();
+        } else if (event.key === 'Enter') {
+            event.preventDefault();
+            if (this.highlightIndex >= 0 && this.highlightIndex < items.length) {
+                const item = items[this.highlightIndex];
+                if (item.type === 'clear') {
+                    this.clearField();
+                } else {
+                    this.choose(item.id);
+                }
+            }
+        } else if (event.key === 'Escape') {
+            event.preventDefault();
+            this.closeDropdown();
+        }
+    },
+
+    scrollToHighlighted() {
+        this.$nextTick(() => {
+            const list = this.$refs.dropdownList;
+            if (!list) return;
+            const el = list.querySelector('[data-highlight="true"]');
+            if (el) el.scrollIntoView({ block: 'nearest' });
+        });
+    },
+
+    getFlatIndex(modelId) {
+        return this.flatItems.findIndex(i => i.type === 'model' && i.id === modelId);
+    }
+});

public/js/components/models.js

@@ -0,0 +1,301 @@
+/**
+ * Models Component
+ * Displays model quota/status list
+ * Registers itself to window.Components for Alpine.js to consume
+ */
+window.Components = window.Components || {};
+
+window.Components.models = () => ({
+    // Color palette for per-account threshold markers
+    thresholdColors: [
+        { bg: '#eab308', shadow: 'rgba(234,179,8,0.5)' },    // yellow
+        { bg: '#06b6d4', shadow: 'rgba(6,182,212,0.5)' },     // cyan
+        { bg: '#a855f7', shadow: 'rgba(168,85,247,0.5)' },    // purple
+        { bg: '#22c55e', shadow: 'rgba(34,197,94,0.5)' },     // green
+        { bg: '#ef4444', shadow: 'rgba(239,68,68,0.5)' },     // red
+        { bg: '#f97316', shadow: 'rgba(249,115,22,0.5)' },    // orange
+        { bg: '#ec4899', shadow: 'rgba(236,72,153,0.5)' },    // pink
+        { bg: '#8b5cf6', shadow: 'rgba(139,92,246,0.5)' },    // violet
+    ],
+
+    getThresholdColor(index) {
+        return this.thresholdColors[index % this.thresholdColors.length];
+    },
+
+    // Drag state for threshold markers
+    dragging: {
+        active: false,
+        email: null,
+        modelId: null,
+        barRect: null,
+        currentPct: 0,
+        originalPct: 0
+    },
+
+    // Tracks which model rows have their per-account breakdown expanded beyond the cap
+    expandedModels: new Set(),
+
+    isExpanded(modelId) {
+        return this.expandedModels.has(modelId);
+    },
+
+    toggleExpanded(modelId) {
+        if (this.expandedModels.has(modelId)) {
+            this.expandedModels.delete(modelId);
+        } else {
+            this.expandedModels.add(modelId);
+        }
+        // Force Alpine reactivity
+        this.expandedModels = new Set(this.expandedModels);
+    },
+
+    /**
+     * Get visible account rows for a model's breakdown, respecting the cap
+     */
+    getVisibleAccounts(row) {
+        const all = row.quotaInfo || [];
+        if (Alpine.store('settings').showAllAccounts || this.isExpanded(row.modelId)) {
+            return all;
+        }
+        const limit = window.AppConstants.LIMITS.ACCOUNT_BREAKDOWN_LIMIT;
+        return all.slice(0, limit);
+    },
+
+    /**
+     * Get the number of hidden accounts for a model row
+     */
+    getHiddenCount(row) {
+        const all = row.quotaInfo || [];
+        const limit = window.AppConstants.LIMITS.ACCOUNT_BREAKDOWN_LIMIT;
+        if (Alpine.store('settings').showAllAccounts || this.isExpanded(row.modelId)) {
+            return 0;
+        }
+        return Math.max(0, all.length - limit);
+    },
+
+    // Model editing state (from main)
+    editingModelId: null,
+    newMapping: '',
+
+    isEditing(modelId) {
+        return this.editingModelId === modelId;
+    },
+
+    startEditing(modelId) {
+        this.editingModelId = modelId;
+    },
+
+    stopEditing() {
+        this.editingModelId = null;
+    },
+
+    /**
+     * Start dragging a threshold marker
+     */
+    startDrag(event, q, row) {
+        // Find the progress bar element (closest .relative container)
+        const markerEl = event.currentTarget;
+        const barContainer = markerEl.parentElement;
+        const barRect = barContainer.getBoundingClientRect();
+
+        this.dragging = {
+            active: true,
+            email: q.fullEmail,
+            modelId: row.modelId,
+            barRect,
+            currentPct: q.thresholdPct,
+            originalPct: q.thresholdPct
+        };
+
+        // Prevent text selection while dragging
+        document.body.classList.add('select-none');
+
+        // Bind document-level listeners for smooth dragging outside the marker
+        this._onDrag = (e) => this.onDrag(e);
+        this._endDrag = () => this.endDrag();
+        document.addEventListener('mousemove', this._onDrag);
+        document.addEventListener('mouseup', this._endDrag);
+        document.addEventListener('touchmove', this._onDrag, { passive: false });
+        document.addEventListener('touchend', this._endDrag);
+    },
+
+    /**
+     * Handle drag movement — compute percentage from mouse position
+     */
+    onDrag(event) {
+        if (!this.dragging.active) return;
+        event.preventDefault();
+
+        const clientX = event.touches ? event.touches[0].clientX : event.clientX;
+        const { left, width } = this.dragging.barRect;
+        let pct = Math.round((clientX - left) / width * 100);
+        pct = Math.max(0, Math.min(99, pct));
+
+        this.dragging.currentPct = pct;
+    },
+
+    /**
+     * End drag — save the new threshold value
+     */
+    endDrag() {
+        if (!this.dragging.active) return;
+
+        // Clean up listeners
+        document.removeEventListener('mousemove', this._onDrag);
+        document.removeEventListener('mouseup', this._endDrag);
+        document.removeEventListener('touchmove', this._onDrag);
+        document.removeEventListener('touchend', this._endDrag);
+        document.body.classList.remove('select-none');
+
+        const { email, modelId, currentPct, originalPct } = this.dragging;
+
+        // Only save if value actually changed
+        if (currentPct !== originalPct) {
+            // Optimistic in-place update: mutate existing quotaInfo entries directly
+            // to avoid full DOM rebuild from computeQuotaRows()
+            const dataStore = Alpine.store('data');
+            const account = dataStore.accounts.find(a => a.email === email);
+            if (account) {
+                if (!account.modelQuotaThresholds) account.modelQuotaThresholds = {};
+                if (currentPct === 0) {
+                    delete account.modelQuotaThresholds[modelId];
+                } else {
+                    account.modelQuotaThresholds[modelId] = currentPct / 100;
+                }
+            }
+            // Patch quotaRows in-place so Alpine updates without tearing down DOM
+            const rows = dataStore.quotaRows || [];
+            for (const row of rows) {
+                if (row.modelId !== modelId) continue;
+                for (const q of row.quotaInfo) {
+                    if (q.fullEmail !== email) continue;
+                    q.thresholdPct = currentPct;
+                }
+                // Recompute row-level threshold stats
+                const activePcts = row.quotaInfo.map(q => q.thresholdPct).filter(t => t > 0);
+                row.effectiveThresholdPct = activePcts.length > 0 ? Math.max(...activePcts) : 0;
+                row.hasVariedThresholds = new Set(activePcts).size > 1;
+            }
+            this.dragging.active = false;
+            this.saveModelThreshold(email, modelId, currentPct);
+        } else {
+            this.dragging.active = false;
+        }
+    },
+
+    /**
+     * Save a per-model threshold for an account via PATCH
+     */
+    async saveModelThreshold(email, modelId, pct) {
+        const store = Alpine.store('global');
+        const dataStore = Alpine.store('data');
+
+        const account = dataStore.accounts.find(a => a.email === email);
+        if (!account) return;
+
+        // Snapshot for rollback on failure
+        const previousModelThresholds = account.modelQuotaThresholds ? { ...account.modelQuotaThresholds } : {};
+
+        // Build full modelQuotaThresholds for API (full replacement, not merge)
+        const existingModelThresholds = { ...(account.modelQuotaThresholds || {}) };
+
+        // Preserve the account-level quotaThreshold
+        const quotaThreshold = account.quotaThreshold !== undefined ? account.quotaThreshold : null;
+
+        try {
+            const { response, newPassword } = await window.utils.request(
+                `/api/accounts/${encodeURIComponent(email)}`,
+                {
+                    method: 'PATCH',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ quotaThreshold, modelQuotaThresholds: existingModelThresholds })
+                },
+                store.webuiPassword
+            );
+            if (newPassword) store.webuiPassword = newPassword;
+
+            const data = await response.json();
+            if (data.status === 'ok') {
+                const label = pct === 0 ? 'removed' : pct + '%';
+                store.showToast(`${email.split('@')[0]} ${modelId} threshold: ${label}`, 'success');
+                // Skip fetchData() — optimistic update is already applied,
+                // next polling cycle will sync server state
+            } else {
+                throw new Error(data.error || 'Failed to save threshold');
+            }
+        } catch (e) {
+            // Revert optimistic update on failure
+            account.modelQuotaThresholds = previousModelThresholds;
+            dataStore.computeQuotaRows();
+            store.showToast('Failed to save threshold: ' + e.message, 'error');
+        }
+    },
+
+    /**
+     * Check if a specific marker is currently being dragged
+     */
+    isDragging(q, row) {
+        return this.dragging.active && this.dragging.email === q.fullEmail && this.dragging.modelId === row.modelId;
+    },
+
+    /**
+     * Get the display percentage for a marker (live during drag, stored otherwise)
+     */
+    getMarkerPct(q, row) {
+        if (this.isDragging(q, row)) return this.dragging.currentPct;
+        return q.thresholdPct;
+    },
+
+    /**
+     * Compute pixel offset for overlapping markers so stacked ones fan out.
+     * Markers within 2% of each other are considered overlapping.
+     * Returns a CSS pixel offset string (e.g., '6px' or '-6px').
+     */
+    getMarkerOffset(q, row, qIdx) {
+        const pct = this.getMarkerPct(q, row);
+        const visible = row.quotaInfo.filter(item => item.thresholdPct > 0 || this.isDragging(item, row));
+        // Find all markers within 2% of this one
+        const cluster = [];
+        visible.forEach((item, idx) => {
+            const itemPct = this.getMarkerPct(item, row);
+            if (Math.abs(itemPct - pct) <= 2) {
+                cluster.push({ item, idx });
+            }
+        });
+        if (cluster.length <= 1) return '0px';
+        // Find position of this marker within its cluster
+        const posInCluster = cluster.findIndex(c => c.item.fullEmail === q.fullEmail);
+        // Spread markers 10px apart, centered on the base position
+        const spread = 10;
+        const totalWidth = (cluster.length - 1) * spread;
+        return (posInCluster * spread - totalWidth / 2) + 'px';
+    },
+
+    init() {
+        // Ensure data is fetched when this tab becomes active (skip initial trigger)
+        this.$watch('$store.global.activeTab', (val, oldVal) => {
+            if (val === 'models' && oldVal !== undefined) {
+                // Trigger recompute to ensure filters are applied
+                this.$nextTick(() => {
+                    Alpine.store('data').computeQuotaRows();
+                });
+            }
+        });
+
+        // Initial compute if already on models tab
+        if (this.$store.global.activeTab === 'models') {
+            this.$nextTick(() => {
+                Alpine.store('data').computeQuotaRows();
+            });
+        }
+    },
+
+    /**
+     * Update model configuration (delegates to shared utility)
+     * @param {string} modelId - The model ID to update
+     * @param {object} configUpdates - Configuration updates (pinned, hidden)
+     */
+    async updateModelConfig(modelId, configUpdates) {
+        return window.ModelConfigUtils.updateModelConfig(modelId, configUpdates);
+    }
+});

public/js/components/server-config.js

@@ -0,0 +1,1203 @@
+/**
+ * Server Config Component
+ * Registers itself to window.Components for Alpine.js to consume
+ */
+window.Components = window.Components || {};
+
+window.Components.serverConfig = () => ({
+    serverConfig: {},
+    loading: false,
+    advancedExpanded: false,
+    debounceTimers: {}, // Store debounce timers for each config field
+
+    // Server presets state
+    serverPresets: [],
+    selectedServerPreset: '',
+    loadingPreset: false,
+    savingServerPreset: false,
+    deletingServerPreset: false,
+    newServerPresetName: '',
+    newServerPresetDescription: '',
+    editingPresetMode: false,
+    editingPresetOriginalName: '',
+    presetPreviewExpanded: false,
+    editingPresetConfig: false,
+    editingConfigDraft: { accountSelection: { strategy: 'hybrid' } },
+    editingConfigErrors: {},
+    savingPresetConfig: false,
+    configEditMode: 'ui',
+    editingJsonText: '',
+    jsonParseError: null,
+
+    init() {
+        // Initial fetch if this is the active sub-tab
+        if (this.$store.global.settingsTab === 'server') {
+            this.fetchServerConfig();
+            this.fetchServerPresets();
+        }
+
+        // Watch settings sub-tab (skip initial trigger)
+        this.$watch('$store.global.settingsTab', (tab, oldTab) => {
+            if (tab === 'server' && oldTab !== undefined) {
+                this.fetchServerConfig();
+                this.fetchServerPresets();
+            }
+        });
+
+        // Cancel config editing when switching presets
+        this.$watch('selectedServerPreset', () => {
+            if (this.editingPresetConfig) {
+                this.cancelPresetConfigEdit();
+            }
+        });
+    },
+
+    async fetchServerConfig() {
+        const password = Alpine.store('global').webuiPassword;
+        try {
+            const { response, newPassword } = await window.utils.request('/api/config', {}, password);
+            if (newPassword) Alpine.store('global').webuiPassword = newPassword;
+
+            if (!response.ok) throw new Error('Failed to fetch config');
+            const data = await response.json();
+            this.serverConfig = data.config || {};
+        } catch (e) {
+            console.error('Failed to fetch server config:', e);
+        }
+    },
+
+
+
+    // Password management
+    passwordDialog: {
+        show: false,
+        oldPassword: '',
+        newPassword: '',
+        confirmPassword: ''
+    },
+
+    showPasswordDialog() {
+        this.passwordDialog = {
+            show: true,
+            oldPassword: '',
+            newPassword: '',
+            confirmPassword: ''
+        };
+    },
+
+    hidePasswordDialog() {
+        this.passwordDialog = {
+            show: false,
+            oldPassword: '',
+            newPassword: '',
+            confirmPassword: ''
+        };
+    },
+
+    async changePassword() {
+        const store = Alpine.store('global');
+        const { oldPassword, newPassword, confirmPassword } = this.passwordDialog;
+
+        if (newPassword !== confirmPassword) {
+            store.showToast(store.t('passwordsNotMatch'), 'error');
+            return;
+        }
+        if (newPassword.length < 6) {
+            store.showToast(store.t('passwordTooShort'), 'error');
+            return;
+        }
+
+        try {
+            const { response } = await window.utils.request('/api/config/password', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ oldPassword, newPassword })
+            }, store.webuiPassword);
+
+            if (!response.ok) {
+                const data = await response.json();
+                throw new Error(data.error || store.t('failedToChangePassword'));
+            }
+
+            // Update stored password
+            store.webuiPassword = newPassword;
+            store.showToast(store.t('passwordChangedSuccess'), 'success');
+            this.hidePasswordDialog();
+        } catch (e) {
+            store.showToast(store.t('failedToChangePassword') + ': ' + e.message, 'error');
+        }
+    },
+
+    // Toggle Developer Mode with instant save
+    async toggleDevMode(enabled) {
+        const store = Alpine.store('global');
+
+        // Optimistic update
+        const previousDevMode = this.serverConfig.devMode;
+        const previousDebug = this.serverConfig.debug;
+        this.serverConfig.devMode = enabled;
+        this.serverConfig.debug = enabled;
+
+        try {
+            const { response, newPassword } = await window.utils.request('/api/config', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ devMode: enabled })
+            }, store.webuiPassword);
+
+            if (newPassword) store.webuiPassword = newPassword;
+
+            const data = await response.json();
+            if (data.status === 'ok') {
+                const status = enabled ? store.t('enabledStatus') : store.t('disabledStatus');
+                store.showToast(store.t('devModeToggled', { status }), 'success');
+                // Update data store
+                Alpine.store('data').devMode = enabled;
+                await this.fetchServerConfig(); // Confirm server state
+            } else {
+                throw new Error(data.error || store.t('failedToUpdateDevMode'));
+            }
+        } catch (e) {
+            // Rollback on error
+            this.serverConfig.devMode = previousDevMode;
+            this.serverConfig.debug = previousDebug;
+            store.showToast(store.t('failedToUpdateDevMode') + ': ' + e.message, 'error');
+        }
+    },
+
+    // Toggle Token Cache with instant save
+    async toggleTokenCache(enabled) {
+        const store = Alpine.store('global');
+
+        // Optimistic update
+        const previousValue = this.serverConfig.persistTokenCache;
+        this.serverConfig.persistTokenCache = enabled;
+
+        try {
+            const { response, newPassword } = await window.utils.request('/api/config', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ persistTokenCache: enabled })
+            }, store.webuiPassword);
+
+            if (newPassword) store.webuiPassword = newPassword;
+
+            const data = await response.json();
+            if (data.status === 'ok') {
+                const status = enabled ? store.t('enabledStatus') : store.t('disabledStatus');
+                store.showToast(store.t('tokenCacheToggled', { status }), 'success');
+                await this.fetchServerConfig(); // Confirm server state
+            } else {
+                throw new Error(data.error || store.t('failedToUpdateTokenCache'));
+            }
+        } catch (e) {
+            // Rollback on error
+            this.serverConfig.persistTokenCache = previousValue;
+            store.showToast(store.t('failedToUpdateTokenCache') + ': ' + e.message, 'error');
+        }
+    },
+
+    // Generic debounced save method for numeric configs with validation
+    async saveConfigField(fieldName, value, displayName, validator = null) {
+        const store = Alpine.store('global');
+
+        // Validate input if validator provided
+        if (validator) {
+            const validation = window.Validators.validate(value, validator, true);
+            if (!validation.isValid) {
+                // Rollback to clamped value
+                this.serverConfig[fieldName] = validation.value;
+                return;
+            }
+            value = validation.value;
+        } else {
+            value = parseInt(value);
+        }
+
+        // Clear existing timer for this field
+        if (this.debounceTimers[fieldName]) {
+            clearTimeout(this.debounceTimers[fieldName]);
+        }
+
+        // Optimistic update
+        const previousValue = this.serverConfig[fieldName];
+        this.serverConfig[fieldName] = value;
+
+        // Set new timer
+        this.debounceTimers[fieldName] = setTimeout(async () => {
+            try {
+                const payload = {};
+                payload[fieldName] = value;
+
+                const { response, newPassword } = await window.utils.request('/api/config', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(payload)
+                }, store.webuiPassword);
+
+                if (newPassword) store.webuiPassword = newPassword;
+
+                const data = await response.json();
+                if (data.status === 'ok') {
+                    store.showToast(store.t('fieldUpdated', { displayName, value }), 'success');
+                    await this.fetchServerConfig(); // Confirm server state
+                } else {
+                    throw new Error(data.error || store.t('failedToUpdateField', { displayName }));
+                }
+            } catch (e) {
+                // Rollback on error
+                this.serverConfig[fieldName] = previousValue;
+                store.showToast(store.t('failedToUpdateField', { displayName }) + ': ' + e.message, 'error');
+            }
+        }, window.AppConstants.INTERVALS.CONFIG_DEBOUNCE);
+    },
+
+    // Individual toggle methods for each Advanced Tuning field with validation
+    toggleMaxRetries(value) {
+        const { MAX_RETRIES_MIN, MAX_RETRIES_MAX } = window.AppConstants.VALIDATION;
+        this.saveConfigField('maxRetries', value, 'Max Retries',
+            (v) => window.Validators.validateRange(v, MAX_RETRIES_MIN, MAX_RETRIES_MAX, 'Max Retries'));
+    },
+
+    toggleRetryBaseMs(value) {
+        const { RETRY_BASE_MS_MIN, RETRY_BASE_MS_MAX } = window.AppConstants.VALIDATION;
+        this.saveConfigField('retryBaseMs', value, 'Retry Base Delay',
+            (v) => window.Validators.validateRange(v, RETRY_BASE_MS_MIN, RETRY_BASE_MS_MAX, 'Retry Base Delay'));
+    },
+
+    toggleRetryMaxMs(value) {
+        const { RETRY_MAX_MS_MIN, RETRY_MAX_MS_MAX } = window.AppConstants.VALIDATION;
+        this.saveConfigField('retryMaxMs', value, 'Retry Max Delay',
+            (v) => window.Validators.validateRange(v, RETRY_MAX_MS_MIN, RETRY_MAX_MS_MAX, 'Retry Max Delay'));
+    },
+
+    toggleDefaultCooldownMs(value) {
+        const { DEFAULT_COOLDOWN_MIN, DEFAULT_COOLDOWN_MAX } = window.AppConstants.VALIDATION;
+        this.saveConfigField('defaultCooldownMs', value, 'Default Cooldown',
+            (v) => window.Validators.validateTimeout(v, DEFAULT_COOLDOWN_MIN, DEFAULT_COOLDOWN_MAX));
+    },
+
+    toggleMaxWaitBeforeErrorMs(value) {
+        const { MAX_WAIT_MIN, MAX_WAIT_MAX } = window.AppConstants.VALIDATION;
+        this.saveConfigField('maxWaitBeforeErrorMs', value, 'Max Wait Threshold',
+            (v) => window.Validators.validateTimeout(v, MAX_WAIT_MIN, MAX_WAIT_MAX));
+    },
+
+    toggleGlobalQuotaThreshold(value) {
+        const { GLOBAL_QUOTA_THRESHOLD_MIN, GLOBAL_QUOTA_THRESHOLD_MAX } = window.AppConstants.VALIDATION;
+        const store = Alpine.store('global');
+        const pct = parseInt(value);
+        if (isNaN(pct) || pct < GLOBAL_QUOTA_THRESHOLD_MIN || pct > GLOBAL_QUOTA_THRESHOLD_MAX) return;
+
+        // Store as percentage in UI, convert to fraction for backend
+        const fraction = pct / 100;
+
+        if (this.debounceTimers['globalQuotaThreshold']) {
+            clearTimeout(this.debounceTimers['globalQuotaThreshold']);
+        }
+
+        const previousValue = this.serverConfig.globalQuotaThreshold;
+        this.serverConfig.globalQuotaThreshold = fraction;
+
+        this.debounceTimers['globalQuotaThreshold'] = setTimeout(async () => {
+            try {
+                const { response, newPassword } = await window.utils.request('/api/config', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ globalQuotaThreshold: fraction })
+                }, store.webuiPassword);
+
+                if (newPassword) store.webuiPassword = newPassword;
+
+                const data = await response.json();
+                if (data.status === 'ok') {
+                    store.showToast(store.t('fieldUpdated', { displayName: 'Minimum Quota Level', value: pct + '%' }), 'success');
+                    await this.fetchServerConfig();
+                } else {
+                    throw new Error(data.error || store.t('failedToUpdateField', { displayName: 'Minimum Quota Level' }));
+                }
+            } catch (e) {
+                this.serverConfig.globalQuotaThreshold = previousValue;
+                store.showToast(store.t('failedToUpdateField', { displayName: 'Minimum Quota Level' }) + ': ' + e.message, 'error');
+            }
+        }, window.AppConstants.INTERVALS.CONFIG_DEBOUNCE);
+    },
+
+    async toggleRequestThrottling(enabled) {
+        const store = Alpine.store('global');
+        const previousValue = this.serverConfig.requestThrottlingEnabled;
+        this.serverConfig.requestThrottlingEnabled = enabled;
+
+        try {
+            const { response, newPassword } = await window.utils.request('/api/config', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ requestThrottlingEnabled: enabled })
+            }, store.webuiPassword);
+
+            if (newPassword) store.webuiPassword = newPassword;
+
+            const data = await response.json();
+            if (data.status === 'ok') {
+                store.showToast(`Request Throttling ${enabled ? 'enabled' : 'disabled'}`, 'success');
+            } else {
+                throw new Error(data.error || 'Failed to update');
+            }
+        } catch (e) {
+            this.serverConfig.requestThrottlingEnabled = previousValue;
+            store.showToast('Failed to update Request Throttling: ' + e.message, 'error');
+        }
+    },
+
+    toggleRequestDelayMs(value) {
+        const { REQUEST_DELAY_MIN, REQUEST_DELAY_MAX } = window.AppConstants.VALIDATION;
+        this.saveConfigField('requestDelayMs', value, 'Request Delay',
+            (v) => window.Validators.validateRange(v, REQUEST_DELAY_MIN, REQUEST_DELAY_MAX, 'Request Delay'));
+    },
+
+    toggleMaxAccounts(value) {
+        const { MAX_ACCOUNTS_MIN, MAX_ACCOUNTS_MAX } = window.AppConstants.VALIDATION;
+        this.saveConfigField('maxAccounts', value, 'Max Accounts',
+            (v) => window.Validators.validateRange(v, MAX_ACCOUNTS_MIN, MAX_ACCOUNTS_MAX, 'Max Accounts'));
+    },
+
+    toggleRateLimitDedupWindowMs(value) {
+        const { RATE_LIMIT_DEDUP_MIN, RATE_LIMIT_DEDUP_MAX } = window.AppConstants.VALIDATION;
+        this.saveConfigField('rateLimitDedupWindowMs', value, 'Rate Limit Dedup Window',
+            (v) => window.Validators.validateTimeout(v, RATE_LIMIT_DEDUP_MIN, RATE_LIMIT_DEDUP_MAX));
+    },
+
+    toggleMaxConsecutiveFailures(value) {
+        const { MAX_CONSECUTIVE_FAILURES_MIN, MAX_CONSECUTIVE_FAILURES_MAX } = window.AppConstants.VALIDATION;
+        this.saveConfigField('maxConsecutiveFailures', value, 'Max Consecutive Failures',
+            (v) => window.Validators.validateRange(v, MAX_CONSECUTIVE_FAILURES_MIN, MAX_CONSECUTIVE_FAILURES_MAX, 'Max Consecutive Failures'));
+    },
+
+    toggleExtendedCooldownMs(value) {
+        const { EXTENDED_COOLDOWN_MIN, EXTENDED_COOLDOWN_MAX } = window.AppConstants.VALIDATION;
+        this.saveConfigField('extendedCooldownMs', value, 'Extended Cooldown',
+            (v) => window.Validators.validateTimeout(v, EXTENDED_COOLDOWN_MIN, EXTENDED_COOLDOWN_MAX));
+    },
+
+    toggleMaxCapacityRetries(value) {
+        const { MAX_CAPACITY_RETRIES_MIN, MAX_CAPACITY_RETRIES_MAX } = window.AppConstants.VALIDATION;
+        this.saveConfigField('maxCapacityRetries', value, 'Max Capacity Retries',
+            (v) => window.Validators.validateRange(v, MAX_CAPACITY_RETRIES_MIN, MAX_CAPACITY_RETRIES_MAX, 'Max Capacity Retries'));
+    },
+
+    // Toggle Account Selection Strategy
+    async toggleStrategy(strategy) {
+        const store = Alpine.store('global');
+        const validStrategies = ['sticky', 'round-robin', 'hybrid'];
+
+        if (!validStrategies.includes(strategy)) {
+            store.showToast(store.t('invalidStrategy'), 'error');
+            return;
+        }
+
+        // Optimistic update
+        const previousValue = this.serverConfig.accountSelection?.strategy || 'hybrid';
+        if (!this.serverConfig.accountSelection) {
+            this.serverConfig.accountSelection = {};
+        }
+        this.serverConfig.accountSelection.strategy = strategy;
+
+        try {
+            const { response, newPassword } = await window.utils.request('/api/config', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ accountSelection: { strategy } })
+            }, store.webuiPassword);
+
+            if (newPassword) store.webuiPassword = newPassword;
+
+            const data = await response.json();
+            if (data.status === 'ok') {
+                const strategyLabel = this.getStrategyLabel(strategy);
+                store.showToast(store.t('strategyUpdated', { strategy: strategyLabel }), 'success');
+                await this.fetchServerConfig(); // Confirm server state
+            } else {
+                throw new Error(data.error || store.t('failedToUpdateStrategy'));
+            }
+        } catch (e) {
+            // Rollback on error
+            if (!this.serverConfig.accountSelection) {
+                this.serverConfig.accountSelection = {};
+            }
+            this.serverConfig.accountSelection.strategy = previousValue;
+            store.showToast(store.t('failedToUpdateStrategy') + ': ' + e.message, 'error');
+        }
+    },
+
+    // Get display label for a strategy
+    getStrategyLabel(strategy) {
+        const store = Alpine.store('global');
+        const labels = {
+            'sticky': store.t('strategyStickyLabel'),
+            'round-robin': store.t('strategyRoundRobinLabel'),
+            'hybrid': store.t('strategyHybridLabel')
+        };
+        return labels[strategy] || strategy;
+    },
+
+    // Get description for current strategy
+    currentStrategyDescription() {
+        const store = Alpine.store('global');
+        const strategy = this.serverConfig.accountSelection?.strategy || 'hybrid';
+        const descriptions = {
+            'sticky': store.t('strategyStickyDesc'),
+            'round-robin': store.t('strategyRoundRobinDesc'),
+            'hybrid': store.t('strategyHybridDesc')
+        };
+        return descriptions[strategy] || '';
+    },
+
+    // ==========================================
+    // Server Configuration Presets
+    // ==========================================
+
+    async fetchServerPresets() {
+        const password = Alpine.store('global').webuiPassword;
+        try {
+            const { response, newPassword } = await window.utils.request('/api/server/presets', {}, password);
+            if (newPassword) Alpine.store('global').webuiPassword = newPassword;
+
+            if (!response.ok) throw new Error(`HTTP ${response.status}`);
+            const data = await response.json();
+            if (data.status === 'ok') {
+                this.serverPresets = data.presets || [];
+                if (this.serverPresets.length > 0 && !this.selectedServerPreset) {
+                    this.selectedServerPreset = this.serverPresets[0].name;
+                }
+            }
+        } catch (e) {
+            console.error('Failed to fetch server presets:', e);
+        }
+    },
+
+    /**
+     * Load a server preset — applies all config values via POST /api/config
+     */
+    async loadServerPreset(name) {
+        const preset = this.serverPresets.find(p => p.name === name);
+        if (!preset) return;
+
+        this.loadingPreset = true;
+        const store = Alpine.store('global');
+
+        try {
+            const { response, newPassword } = await window.utils.request('/api/config', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(preset.config)
+            }, store.webuiPassword);
+
+            if (newPassword) store.webuiPassword = newPassword;
+
+            const data = await response.json();
+            if (data.status === 'ok') {
+                store.showToast(store.t('serverPresetLoaded', { name }) || `Preset "${name}" applied`, 'success');
+                await this.fetchServerConfig();
+            } else {
+                throw new Error(data.error || 'Failed to apply preset');
+            }
+        } catch (e) {
+            store.showToast((store.t('failedToLoadServerPreset') || 'Failed to apply preset') + ': ' + e.message, 'error');
+        } finally {
+            this.loadingPreset = false;
+        }
+    },
+
+    /**
+     * Save current server config as a new custom preset
+     */
+    async saveCurrentAsServerPreset() {
+        this.editingPresetMode = false;
+        this.editingPresetOriginalName = '';
+        this.newServerPresetName = '';
+        this.newServerPresetDescription = '';
+        document.getElementById('save_server_preset_modal').showModal();
+    },
+
+    /**
+     * Edit an existing custom preset's name and description
+     */
+    editServerPreset() {
+        const preset = this.serverPresets.find(p => p.name === this.selectedServerPreset);
+        if (!preset || preset.builtIn) return;
+
+        this.editingPresetMode = true;
+        this.editingPresetOriginalName = preset.name;
+        this.newServerPresetName = preset.name;
+        this.newServerPresetDescription = preset.description || '';
+        document.getElementById('save_server_preset_modal').showModal();
+    },
+
+    /**
+     * Execute PATCH to update preset metadata
+     */
+    async executeEditServerPreset() {
+        const name = this.newServerPresetName.trim();
+        if (!name) {
+            Alpine.store('global').showToast(Alpine.store('global').t('presetNameRequired') || 'Preset name is required', 'error');
+            return;
+        }
+
+        this.savingServerPreset = true;
+        const store = Alpine.store('global');
+
+        try {
+            const payload = { name, description: this.newServerPresetDescription.trim() || '' };
+
+            const { response, newPassword } = await window.utils.request(
+                `/api/server/presets/${encodeURIComponent(this.editingPresetOriginalName)}`,
+                {
+                    method: 'PATCH',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(payload)
+                },
+                store.webuiPassword
+            );
+            if (newPassword) store.webuiPassword = newPassword;
+
+            if (!response.ok) {
+                const errData = await response.json();
+                throw new Error(errData.error || `HTTP ${response.status}`);
+            }
+            const data = await response.json();
+            if (data.status === 'ok') {
+                this.serverPresets = data.presets || [];
+                this.selectedServerPreset = name;
+                this.editingPresetMode = false;
+                this.editingPresetOriginalName = '';
+                this.newServerPresetName = '';
+                this.newServerPresetDescription = '';
+                store.showToast(store.t('serverPresetUpdated') || 'Preset updated', 'success');
+                document.getElementById('save_server_preset_modal').close();
+            } else {
+                throw new Error(data.error || 'Failed to update preset');
+            }
+        } catch (e) {
+            store.showToast((store.t('failedToEditServerPreset') || 'Failed to update preset') + ': ' + e.message, 'error');
+        } finally {
+            this.savingServerPreset = false;
+        }
+    },
+
+    async executeSaveServerPreset(name) {
+        if (!name || !name.trim()) {
+            Alpine.store('global').showToast(Alpine.store('global').t('presetNameRequired') || 'Preset name is required', 'error');
+            return;
+        }
+
+        this.savingServerPreset = true;
+        const store = Alpine.store('global');
+        const password = store.webuiPassword;
+
+        try {
+            // Extract relevant config fields (exclude sensitive/non-tunable)
+            const relevantKeys = [
+                'maxRetries', 'retryBaseMs', 'retryMaxMs', 'defaultCooldownMs',
+                'maxWaitBeforeErrorMs', 'maxAccounts', 'globalQuotaThreshold',
+                'rateLimitDedupWindowMs', 'maxConsecutiveFailures', 'extendedCooldownMs',
+                'maxCapacityRetries', 'switchAccountDelayMs', 'capacityBackoffTiersMs',
+                'accountSelection'
+            ];
+            const presetConfig = {};
+            relevantKeys.forEach(k => {
+                if (this.serverConfig[k] !== undefined) {
+                    presetConfig[k] = JSON.parse(JSON.stringify(this.serverConfig[k]));
+                }
+            });
+
+            const payload = { name: name.trim(), config: presetConfig };
+            if (this.newServerPresetDescription.trim()) {
+                payload.description = this.newServerPresetDescription.trim();
+            }
+
+            const { response, newPassword } = await window.utils.request('/api/server/presets', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(payload)
+            }, password);
+            if (newPassword) store.webuiPassword = newPassword;
+
+            if (!response.ok) {
+                const errData = await response.json();
+                throw new Error(errData.error || `HTTP ${response.status}`);
+            }
+            const data = await response.json();
+            if (data.status === 'ok') {
+                this.serverPresets = data.presets || [];
+                this.selectedServerPreset = name.trim();
+                this.newServerPresetName = '';
+                this.newServerPresetDescription = '';
+                store.showToast(store.t('serverPresetSaved') || `Preset "${name}" saved`, 'success');
+                document.getElementById('save_server_preset_modal').close();
+            } else {
+                throw new Error(data.error || 'Failed to save preset');
+            }
+        } catch (e) {
+            store.showToast((store.t('failedToSaveServerPreset') || 'Failed to save preset') + ': ' + e.message, 'error');
+        } finally {
+            this.savingServerPreset = false;
+        }
+    },
+
+    async deleteSelectedServerPreset() {
+        if (!this.selectedServerPreset) return;
+
+        // Check if built-in
+        const preset = this.serverPresets.find(p => p.name === this.selectedServerPreset);
+        if (preset?.builtIn) {
+            Alpine.store('global').showToast(Alpine.store('global').t('cannotDeleteBuiltIn') || 'Cannot delete built-in presets', 'warning');
+            return;
+        }
+
+        const store = Alpine.store('global');
+        const translated = store.t('deletePresetConfirm', { name: this.selectedServerPreset });
+        const confirmMsg = translated === 'deletePresetConfirm' ? `Delete preset "${this.selectedServerPreset}"?` : translated;
+        if (!confirm(confirmMsg)) return;
+
+        this.deletingServerPreset = true;
+
+        try {
+            const { response, newPassword } = await window.utils.request(
+                `/api/server/presets/${encodeURIComponent(this.selectedServerPreset)}`,
+                { method: 'DELETE' },
+                store.webuiPassword
+            );
+            if (newPassword) store.webuiPassword = newPassword;
+
+            if (!response.ok) {
+                const errData = await response.json();
+                throw new Error(errData.error || `HTTP ${response.status}`);
+            }
+            const data = await response.json();
+            if (data.status === 'ok') {
+                this.serverPresets = data.presets || [];
+                this.selectedServerPreset = this.serverPresets.length > 0 ? this.serverPresets[0].name : '';
+                store.showToast(store.t('serverPresetDeleted') || 'Preset deleted', 'success');
+            } else {
+                throw new Error(data.error || 'Failed to delete preset');
+            }
+        } catch (e) {
+            store.showToast((store.t('failedToDeleteServerPreset') || 'Failed to delete preset') + ': ' + e.message, 'error');
+        } finally {
+            this.deletingServerPreset = false;
+        }
+    },
+
+    isSelectedPresetBuiltIn() {
+        const preset = this.serverPresets.find(p => p.name === this.selectedServerPreset);
+        return preset?.builtIn === true;
+    },
+
+    /**
+     * Format a millisecond value to a human-readable string.
+     * e.g. 60000 → "1m", 1000 → "1s", 1500 → "1.5s", 90000 → "1m 30s"
+     */
+    formatMsValue(ms) {
+        if (ms == null) return '—';
+        if (ms < 1000) return ms + 'ms';
+        const totalSeconds = ms / 1000;
+        if (totalSeconds < 60) {
+            return Number.isInteger(totalSeconds) ? totalSeconds + 's' : totalSeconds.toFixed(1) + 's';
+        }
+        const minutes = Math.floor(totalSeconds / 60);
+        const seconds = totalSeconds % 60;
+        if (seconds === 0) return minutes + 'm';
+        return minutes + 'm ' + (Number.isInteger(seconds) ? seconds : seconds.toFixed(1)) + 's';
+    },
+
+    /**
+     * Get preview sections for the currently selected preset.
+     * Returns { strategy, strategyLabel, sections } where each section has { label, rows }.
+     * Each row has { label, value, differs } where differs is true when the preset
+     * value doesn't match the current running serverConfig.
+     */
+    getPresetPreviewSections() {
+        const preset = this.serverPresets.find(p => p.name === this.selectedServerPreset);
+        if (!preset?.config) return null;
+
+        const cfg = preset.config;
+        const cur = this.serverConfig;
+        const store = Alpine.store('global');
+
+        const strategy = cfg.accountSelection?.strategy || 'hybrid';
+        const currentStrategy = cur.accountSelection?.strategy || 'hybrid';
+
+        const differs = (presetVal, currentVal) => {
+            if (presetVal == null && currentVal == null) return false;
+            if (presetVal == null || currentVal == null) return true;
+            return JSON.stringify(presetVal) !== JSON.stringify(currentVal);
+        };
+
+        const fmtQuota = (val) => {
+            if (!val || val === 0) return store.t('quotaDisabled') || 'Disabled';
+            return Math.round(val * 100) + '%';
+        };
+
+        const V = window.AppConstants.VALIDATION;
+
+        const sections = [
+            {
+                label: store.t('networkRetry') || 'Network Retry Settings',
+                rows: [
+                    { label: store.t('maxRetries') || 'Max Retries', value: cfg.maxRetries ?? '—', differs: differs(cfg.maxRetries, cur.maxRetries), key: 'maxRetries', min: V.MAX_RETRIES_MIN, max: V.MAX_RETRIES_MAX, step: 1 },
+                    { label: store.t('retryBaseDelay') || 'Retry Base Delay', value: this.formatMsValue(cfg.retryBaseMs), differs: differs(cfg.retryBaseMs, cur.retryBaseMs), key: 'retryBaseMs', min: V.RETRY_BASE_MS_MIN, max: V.RETRY_BASE_MS_MAX, step: 100, suffix: 'ms' },
+                    { label: store.t('retryMaxDelay') || 'Retry Max Delay', value: this.formatMsValue(cfg.retryMaxMs), differs: differs(cfg.retryMaxMs, cur.retryMaxMs), key: 'retryMaxMs', min: V.RETRY_MAX_MS_MIN, max: V.RETRY_MAX_MS_MAX, step: 1000, suffix: 'ms' },
+                ]
+            },
+            {
+                label: store.t('rateLimiting') || 'Rate Limiting',
+                rows: [
+                    { label: store.t('defaultCooldown') || 'Default Cooldown', value: this.formatMsValue(cfg.defaultCooldownMs), differs: differs(cfg.defaultCooldownMs, cur.defaultCooldownMs), key: 'defaultCooldownMs', min: V.DEFAULT_COOLDOWN_MIN, max: V.DEFAULT_COOLDOWN_MAX, step: 1000, suffix: 'ms' },
+                    { label: store.t('maxWaitThreshold') || 'Max Wait Before Error', value: this.formatMsValue(cfg.maxWaitBeforeErrorMs), differs: differs(cfg.maxWaitBeforeErrorMs, cur.maxWaitBeforeErrorMs), key: 'maxWaitBeforeErrorMs', min: V.MAX_WAIT_MIN, max: V.MAX_WAIT_MAX, step: 1000, suffix: 'ms' },
+                    { label: store.t('maxAccounts') || 'Max Accounts', value: cfg.maxAccounts ?? '—', differs: differs(cfg.maxAccounts, cur.maxAccounts), key: 'maxAccounts', min: V.MAX_ACCOUNTS_MIN, max: V.MAX_ACCOUNTS_MAX, step: 1 },
+                    { label: store.t('switchAccountDelay') || 'Switch Account Delay', value: this.formatMsValue(cfg.switchAccountDelayMs), differs: differs(cfg.switchAccountDelayMs, cur.switchAccountDelayMs), key: 'switchAccountDelayMs', min: V.SWITCH_ACCOUNT_DELAY_MIN, max: V.SWITCH_ACCOUNT_DELAY_MAX, step: 1000, suffix: 'ms' },
+                ]
+            },
+            {
+                label: store.t('quotaProtection') || 'Quota Protection',
+                rows: [
+                    { label: store.t('minimumQuotaLevel') || 'Minimum Quota Level', value: fmtQuota(cfg.globalQuotaThreshold), differs: differs(cfg.globalQuotaThreshold, cur.globalQuotaThreshold), key: 'globalQuotaThreshold', min: V.GLOBAL_QUOTA_THRESHOLD_MIN, max: V.GLOBAL_QUOTA_THRESHOLD_MAX, step: 1, suffix: '%' },
+                ]
+            },
+            {
+                label: store.t('errorHandlingTuning') || 'Error Handling',
+                rows: [
+                    { label: store.t('rateLimitDedupWindow') || 'Dedup Window', value: this.formatMsValue(cfg.rateLimitDedupWindowMs), differs: differs(cfg.rateLimitDedupWindowMs, cur.rateLimitDedupWindowMs), key: 'rateLimitDedupWindowMs', min: V.RATE_LIMIT_DEDUP_MIN, max: V.RATE_LIMIT_DEDUP_MAX, step: 1000, suffix: 'ms' },
+                    { label: store.t('maxConsecutiveFailures') || 'Max Consecutive Failures', value: cfg.maxConsecutiveFailures ?? '—', differs: differs(cfg.maxConsecutiveFailures, cur.maxConsecutiveFailures), key: 'maxConsecutiveFailures', min: V.MAX_CONSECUTIVE_FAILURES_MIN, max: V.MAX_CONSECUTIVE_FAILURES_MAX, step: 1 },
+                    { label: store.t('extendedCooldown') || 'Extended Cooldown', value: this.formatMsValue(cfg.extendedCooldownMs), differs: differs(cfg.extendedCooldownMs, cur.extendedCooldownMs), key: 'extendedCooldownMs', min: V.EXTENDED_COOLDOWN_MIN, max: V.EXTENDED_COOLDOWN_MAX, step: 1000, suffix: 'ms' },
+                    { label: store.t('maxCapacityRetries') || 'Max Capacity Retries', value: cfg.maxCapacityRetries ?? '—', differs: differs(cfg.maxCapacityRetries, cur.maxCapacityRetries), key: 'maxCapacityRetries', min: V.MAX_CAPACITY_RETRIES_MIN, max: V.MAX_CAPACITY_RETRIES_MAX, step: 1 },
+                    { label: store.t('capacityBackoffTiers') || 'Capacity Backoff Tiers', value: (cfg.capacityBackoffTiersMs || []).map(v => this.formatMsValue(v)).join(', ') || '—', differs: differs(cfg.capacityBackoffTiersMs, cur.capacityBackoffTiersMs), key: 'capacityBackoffTiersMs', type: 'text' },
+                ]
+            }
+        ];
+
+        // Add hybrid-only sections when strategy is hybrid
+        if (strategy === 'hybrid') {
+            const as = cfg.accountSelection || {};
+            const curAs = cur.accountSelection || {};
+
+            // Scoring Weights
+            const w = as.weights || {};
+            const curW = curAs.weights || {};
+            sections.push({
+                label: store.t('scoringWeights') || 'Scoring Weights',
+                hybridOnly: true,
+                rows: [
+                    { label: store.t('weightHealth') || 'Health Weight', value: w.health ?? '—', differs: differs(w.health, curW.health), key: 'w_health', min: V.W_HEALTH_MIN, max: V.W_HEALTH_MAX, step: 0.1 },
+                    { label: store.t('weightTokens') || 'Tokens Weight', value: w.tokens ?? '—', differs: differs(w.tokens, curW.tokens), key: 'w_tokens', min: V.W_TOKENS_MIN, max: V.W_TOKENS_MAX, step: 0.1 },
+                    { label: store.t('weightQuota') || 'Quota Weight', value: w.quota ?? '—', differs: differs(w.quota, curW.quota), key: 'w_quota', min: V.W_QUOTA_MIN, max: V.W_QUOTA_MAX, step: 0.1 },
+                    { label: store.t('weightLru') || 'LRU Weight', value: w.lru ?? '—', differs: differs(w.lru, curW.lru), key: 'w_lru', min: V.W_LRU_MIN, max: V.W_LRU_MAX, step: 0.01 },
+                ]
+            });
+
+            // Health Score
+            const hs = as.healthScore || {};
+            const curHs = curAs.healthScore || {};
+            sections.push({
+                label: store.t('healthScoreSection') || 'Health Score',
+                hybridOnly: true,
+                rows: [
+                    { label: store.t('hsInitial') || 'Initial Score', value: hs.initial ?? '—', differs: differs(hs.initial, curHs.initial), key: 'hs_initial', min: V.HS_INITIAL_MIN, max: V.HS_INITIAL_MAX, step: 1 },
+                    { label: store.t('hsSuccessReward') || 'Success Reward', value: hs.successReward ?? '—', differs: differs(hs.successReward, curHs.successReward), key: 'hs_successReward', min: V.HS_SUCCESS_REWARD_MIN, max: V.HS_SUCCESS_REWARD_MAX, step: 1 },
+                    { label: store.t('hsRateLimitPenalty') || 'Rate Limit Penalty', value: hs.rateLimitPenalty ?? '—', differs: differs(hs.rateLimitPenalty, curHs.rateLimitPenalty), key: 'hs_rateLimitPenalty', min: V.HS_RATE_LIMIT_PENALTY_MIN, max: V.HS_RATE_LIMIT_PENALTY_MAX, step: 1 },
+                    { label: store.t('hsFailurePenalty') || 'Failure Penalty', value: hs.failurePenalty ?? '—', differs: differs(hs.failurePenalty, curHs.failurePenalty), key: 'hs_failurePenalty', min: V.HS_FAILURE_PENALTY_MIN, max: V.HS_FAILURE_PENALTY_MAX, step: 1 },
+                    { label: store.t('hsRecoveryPerHour') || 'Recovery/Hour', value: hs.recoveryPerHour ?? '—', differs: differs(hs.recoveryPerHour, curHs.recoveryPerHour), key: 'hs_recoveryPerHour', min: V.HS_RECOVERY_PER_HOUR_MIN, max: V.HS_RECOVERY_PER_HOUR_MAX, step: 1 },
+                    { label: store.t('hsMinUsable') || 'Min Usable Score', value: hs.minUsable ?? '—', differs: differs(hs.minUsable, curHs.minUsable), key: 'hs_minUsable', min: V.HS_MIN_USABLE_MIN, max: V.HS_MIN_USABLE_MAX, step: 1 },
+                    { label: store.t('hsMaxScore') || 'Max Score', value: hs.maxScore ?? '—', differs: differs(hs.maxScore, curHs.maxScore), key: 'hs_maxScore', min: V.HS_MAX_SCORE_MIN, max: V.HS_MAX_SCORE_MAX, step: 1 },
+                ]
+            });
+
+            // Token Bucket
+            const tb = as.tokenBucket || {};
+            const curTb = curAs.tokenBucket || {};
+            sections.push({
+                label: store.t('tokenBucketSection') || 'Token Bucket',
+                hybridOnly: true,
+                rows: [
+                    { label: store.t('tbMaxTokens') || 'Max Tokens', value: tb.maxTokens ?? '—', differs: differs(tb.maxTokens, curTb.maxTokens), key: 'tb_maxTokens', min: V.TB_MAX_TOKENS_MIN, max: V.TB_MAX_TOKENS_MAX, step: 1 },
+                    { label: store.t('tbTokensPerMinute') || 'Tokens/Minute', value: tb.tokensPerMinute ?? '—', differs: differs(tb.tokensPerMinute, curTb.tokensPerMinute), key: 'tb_tokensPerMinute', min: V.TB_TOKENS_PER_MINUTE_MIN, max: V.TB_TOKENS_PER_MINUTE_MAX, step: 1 },
+                    { label: store.t('tbInitialTokens') || 'Initial Tokens', value: tb.initialTokens ?? '—', differs: differs(tb.initialTokens, curTb.initialTokens), key: 'tb_initialTokens', min: V.TB_INITIAL_TOKENS_MIN, max: V.TB_INITIAL_TOKENS_MAX, step: 1 },
+                ]
+            });
+
+            // Quota Awareness
+            const q = as.quota || {};
+            const curQ = curAs.quota || {};
+            sections.push({
+                label: store.t('quotaAwarenessSection') || 'Quota Awareness',
+                hybridOnly: true,
+                rows: [
+                    { label: store.t('qLowThreshold') || 'Low Threshold', value: q.lowThreshold != null ? Math.round(q.lowThreshold * 100) + '%' : '—', differs: differs(q.lowThreshold, curQ.lowThreshold), key: 'q_lowThreshold', min: V.Q_LOW_THRESHOLD_MIN, max: V.Q_LOW_THRESHOLD_MAX, step: 1, suffix: '%' },
+                    { label: store.t('qCriticalThreshold') || 'Critical Threshold', value: q.criticalThreshold != null ? Math.round(q.criticalThreshold * 100) + '%' : '—', differs: differs(q.criticalThreshold, curQ.criticalThreshold), key: 'q_criticalThreshold', min: V.Q_CRITICAL_THRESHOLD_MIN, max: V.Q_CRITICAL_THRESHOLD_MAX, step: 1, suffix: '%' },
+                    { label: store.t('qStaleMs') || 'Stale Data Timeout', value: this.formatMsValue(q.staleMs), differs: differs(q.staleMs, curQ.staleMs), key: 'q_staleMs', min: V.Q_STALE_MS_MIN, max: V.Q_STALE_MS_MAX, step: 1000, suffix: 'ms' },
+                ]
+            });
+        }
+
+        return {
+            strategy,
+            strategyLabel: this.getStrategyLabel(strategy),
+            strategyDiffers: differs(strategy, currentStrategy),
+            sections
+        };
+    },
+
+    // ==========================================
+    // Inline Preset Config Editing
+    // ==========================================
+
+    /**
+     * Flatten a nested config object into a flat draft for UI editing.
+     * Converts fractions to percentages where needed.
+     */
+    flattenConfigToDraft(cfg) {
+        const as = cfg.accountSelection || {};
+        const hs = as.healthScore || {};
+        const tb = as.tokenBucket || {};
+        const q = as.quota || {};
+        const w = as.weights || {};
+        return {
+            maxRetries: cfg.maxRetries,
+            retryBaseMs: cfg.retryBaseMs,
+            retryMaxMs: cfg.retryMaxMs,
+            defaultCooldownMs: cfg.defaultCooldownMs,
+            maxWaitBeforeErrorMs: cfg.maxWaitBeforeErrorMs,
+            maxAccounts: cfg.maxAccounts,
+            globalQuotaThreshold: cfg.globalQuotaThreshold ? Math.round(cfg.globalQuotaThreshold * 100) : 0,
+            rateLimitDedupWindowMs: cfg.rateLimitDedupWindowMs,
+            maxConsecutiveFailures: cfg.maxConsecutiveFailures,
+            extendedCooldownMs: cfg.extendedCooldownMs,
+            maxCapacityRetries: cfg.maxCapacityRetries,
+            switchAccountDelayMs: cfg.switchAccountDelayMs,
+            capacityBackoffTiersMs: Array.isArray(cfg.capacityBackoffTiersMs) ? cfg.capacityBackoffTiersMs.join(', ') : '',
+            accountSelection: { strategy: as.strategy || 'hybrid' },
+            // Health score (prefixed hs_)
+            hs_initial: hs.initial,
+            hs_successReward: hs.successReward,
+            hs_rateLimitPenalty: hs.rateLimitPenalty,
+            hs_failurePenalty: hs.failurePenalty,
+            hs_recoveryPerHour: hs.recoveryPerHour,
+            hs_minUsable: hs.minUsable,
+            hs_maxScore: hs.maxScore,
+            // Token bucket (prefixed tb_)
+            tb_maxTokens: tb.maxTokens,
+            tb_tokensPerMinute: tb.tokensPerMinute,
+            tb_initialTokens: tb.initialTokens,
+            // Quota (prefixed q_, fractions → percentages)
+            q_lowThreshold: q.lowThreshold != null ? Math.round(q.lowThreshold * 100) : 0,
+            q_criticalThreshold: q.criticalThreshold != null ? Math.round(q.criticalThreshold * 100) : 0,
+            q_staleMs: q.staleMs,
+            // Weights (prefixed w_)
+            w_health: w.health,
+            w_tokens: w.tokens,
+            w_quota: w.quota,
+            w_lru: w.lru,
+        };
+    },
+
+    /**
+     * Build a nested config object from a flat UI draft.
+     * Converts percentages back to fractions where needed.
+     */
+    buildConfigFromDraft(draft) {
+        const cfg = {
+            maxRetries: draft.maxRetries,
+            retryBaseMs: draft.retryBaseMs,
+            retryMaxMs: draft.retryMaxMs,
+            defaultCooldownMs: draft.defaultCooldownMs,
+            maxWaitBeforeErrorMs: draft.maxWaitBeforeErrorMs,
+            maxAccounts: draft.maxAccounts,
+            globalQuotaThreshold: (draft.globalQuotaThreshold || 0) / 100,
+            rateLimitDedupWindowMs: draft.rateLimitDedupWindowMs,
+            maxConsecutiveFailures: draft.maxConsecutiveFailures,
+            extendedCooldownMs: draft.extendedCooldownMs,
+            maxCapacityRetries: draft.maxCapacityRetries,
+            switchAccountDelayMs: draft.switchAccountDelayMs,
+        };
+
+        // Parse capacityBackoffTiersMs from comma-separated string
+        if (typeof draft.capacityBackoffTiersMs === 'string' && draft.capacityBackoffTiersMs.trim()) {
+            const tiers = draft.capacityBackoffTiersMs.split(',').map(s => Number(s.trim())).filter(n => !isNaN(n));
+            if (tiers.length > 0) cfg.capacityBackoffTiersMs = tiers;
+        } else if (Array.isArray(draft.capacityBackoffTiersMs)) {
+            cfg.capacityBackoffTiersMs = draft.capacityBackoffTiersMs;
+        }
+
+        // Build accountSelection with nested objects
+        cfg.accountSelection = {
+            strategy: draft.accountSelection?.strategy || 'hybrid',
+            healthScore: {
+                initial: draft.hs_initial,
+                successReward: draft.hs_successReward,
+                rateLimitPenalty: draft.hs_rateLimitPenalty,
+                failurePenalty: draft.hs_failurePenalty,
+                recoveryPerHour: draft.hs_recoveryPerHour,
+                minUsable: draft.hs_minUsable,
+                maxScore: draft.hs_maxScore,
+            },
+            tokenBucket: {
+                maxTokens: draft.tb_maxTokens,
+                tokensPerMinute: draft.tb_tokensPerMinute,
+                initialTokens: draft.tb_initialTokens,
+            },
+            quota: {
+                lowThreshold: (draft.q_lowThreshold || 0) / 100,
+                criticalThreshold: (draft.q_criticalThreshold || 0) / 100,
+                staleMs: draft.q_staleMs,
+            },
+            weights: {
+                health: draft.w_health,
+                tokens: draft.w_tokens,
+                quota: draft.w_quota,
+                lru: draft.w_lru,
+            }
+        };
+
+        // Clean undefined values from nested objects
+        for (const subKey of ['healthScore', 'tokenBucket', 'quota', 'weights']) {
+            const obj = cfg.accountSelection[subKey];
+            const cleaned = {};
+            let hasValues = false;
+            for (const [k, v] of Object.entries(obj)) {
+                if (v !== undefined && v !== null) {
+                    cleaned[k] = v;
+                    hasValues = true;
+                }
+            }
+            if (hasValues) {
+                cfg.accountSelection[subKey] = cleaned;
+            } else {
+                delete cfg.accountSelection[subKey];
+            }
+        }
+
+        return cfg;
+    },
+
+    enterPresetConfigEdit() {
+        const preset = this.serverPresets.find(p => p.name === this.selectedServerPreset);
+        if (!preset?.config || preset.builtIn) return;
+
+        this.editingConfigDraft = this.flattenConfigToDraft(preset.config);
+        this.editingConfigErrors = {};
+        this.editingPresetConfig = true;
+        this.presetPreviewExpanded = true;
+        this.configEditMode = 'ui';
+        this.editingJsonText = '';
+        this.jsonParseError = null;
+    },
+
+    cancelPresetConfigEdit() {
+        this.editingPresetConfig = false;
+        this.editingConfigDraft = { accountSelection: { strategy: 'hybrid' } };
+        this.editingConfigErrors = {};
+        this.configEditMode = 'ui';
+        this.editingJsonText = '';
+        this.jsonParseError = null;
+    },
+
+    switchConfigEditMode(mode) {
+        if (mode === this.configEditMode) return;
+
+        if (mode === 'json') {
+            // UI → JSON: convert flat draft to nested config, then stringify
+            const nested = this.buildConfigFromDraft(this.editingConfigDraft);
+            this.editingJsonText = JSON.stringify(nested, null, 2);
+            this.jsonParseError = null;
+            this.editingConfigErrors = {};
+            this.configEditMode = 'json';
+        } else {
+            // JSON → UI: parse nested config and flatten to draft
+            try {
+                const parsed = JSON.parse(this.editingJsonText);
+                if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) {
+                    this.jsonParseError = Alpine.store('global').t('invalidJson') || 'Invalid JSON';
+                    return;
+                }
+                this.editingConfigDraft = this.flattenConfigToDraft(parsed);
+                this.editingConfigErrors = {};
+                this.jsonParseError = null;
+                // Re-validate all numeric fields
+                const allKeys = [
+                    'maxRetries', 'retryBaseMs', 'retryMaxMs', 'defaultCooldownMs',
+                    'maxWaitBeforeErrorMs', 'maxAccounts', 'globalQuotaThreshold',
+                    'rateLimitDedupWindowMs', 'maxConsecutiveFailures', 'extendedCooldownMs',
+                    'maxCapacityRetries', 'switchAccountDelayMs',
+                    'hs_initial', 'hs_successReward', 'hs_rateLimitPenalty', 'hs_failurePenalty',
+                    'hs_recoveryPerHour', 'hs_minUsable', 'hs_maxScore',
+                    'tb_maxTokens', 'tb_tokensPerMinute', 'tb_initialTokens',
+                    'q_lowThreshold', 'q_criticalThreshold', 'q_staleMs',
+                    'w_health', 'w_tokens', 'w_quota', 'w_lru'
+                ];
+                allKeys.forEach(k => {
+                    if (this.editingConfigDraft[k] !== undefined) this.validatePresetConfigField(k, this.editingConfigDraft[k]);
+                });
+                // Validate capacityBackoffTiersMs text
+                this.validatePresetConfigField('capacityBackoffTiersMs', this.editingConfigDraft.capacityBackoffTiersMs);
+                this.configEditMode = 'ui';
+            } catch (e) {
+                this.jsonParseError = Alpine.store('global').t('invalidJson') || 'Invalid JSON';
+            }
+        }
+    },
+
+    validateJsonText() {
+        try {
+            const parsed = JSON.parse(this.editingJsonText);
+            if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) {
+                this.jsonParseError = Alpine.store('global').t('invalidJson') || 'Invalid JSON';
+            } else {
+                this.jsonParseError = null;
+            }
+        } catch {
+            this.jsonParseError = Alpine.store('global').t('invalidJson') || 'Invalid JSON';
+        }
+    },
+
+    validatePresetConfigField(key, value) {
+        const V = window.AppConstants.VALIDATION;
+
+        // Special text validation for capacityBackoffTiersMs
+        if (key === 'capacityBackoffTiersMs') {
+            const str = String(value || '').trim();
+            if (!str) {
+                delete this.editingConfigErrors[key];
+                return;
+            }
+            const parts = str.split(',').map(s => s.trim());
+            if (parts.length < V.CAPACITY_BACKOFF_TIERS_MIN_LENGTH || parts.length > V.CAPACITY_BACKOFF_TIERS_MAX_LENGTH) {
+                this.editingConfigErrors[key] = `${V.CAPACITY_BACKOFF_TIERS_MIN_LENGTH}–${V.CAPACITY_BACKOFF_TIERS_MAX_LENGTH} values`;
+                return;
+            }
+            const allValid = parts.every(s => {
+                const n = Number(s);
+                return !isNaN(n) && n >= V.CAPACITY_BACKOFF_TIER_MIN && n <= V.CAPACITY_BACKOFF_TIER_MAX;
+            });
+            if (!allValid) {
+                this.editingConfigErrors[key] = `each ${V.CAPACITY_BACKOFF_TIER_MIN}–${V.CAPACITY_BACKOFF_TIER_MAX}`;
+            } else {
+                delete this.editingConfigErrors[key];
+            }
+            return;
+        }
+
+        const numVal = Number(value);
+        const ranges = {
+            maxRetries: [V.MAX_RETRIES_MIN, V.MAX_RETRIES_MAX],
+            retryBaseMs: [V.RETRY_BASE_MS_MIN, V.RETRY_BASE_MS_MAX],
+            retryMaxMs: [V.RETRY_MAX_MS_MIN, V.RETRY_MAX_MS_MAX],
+            defaultCooldownMs: [V.DEFAULT_COOLDOWN_MIN, V.DEFAULT_COOLDOWN_MAX],
+            maxWaitBeforeErrorMs: [V.MAX_WAIT_MIN, V.MAX_WAIT_MAX],
+            maxAccounts: [V.MAX_ACCOUNTS_MIN, V.MAX_ACCOUNTS_MAX],
+            globalQuotaThreshold: [V.GLOBAL_QUOTA_THRESHOLD_MIN, V.GLOBAL_QUOTA_THRESHOLD_MAX],
+            rateLimitDedupWindowMs: [V.RATE_LIMIT_DEDUP_MIN, V.RATE_LIMIT_DEDUP_MAX],
+            maxConsecutiveFailures: [V.MAX_CONSECUTIVE_FAILURES_MIN, V.MAX_CONSECUTIVE_FAILURES_MAX],
+            extendedCooldownMs: [V.EXTENDED_COOLDOWN_MIN, V.EXTENDED_COOLDOWN_MAX],
+            maxCapacityRetries: [V.MAX_CAPACITY_RETRIES_MIN, V.MAX_CAPACITY_RETRIES_MAX],
+            switchAccountDelayMs: [V.SWITCH_ACCOUNT_DELAY_MIN, V.SWITCH_ACCOUNT_DELAY_MAX],
+            // Health score
+            hs_initial: [V.HS_INITIAL_MIN, V.HS_INITIAL_MAX],
+            hs_successReward: [V.HS_SUCCESS_REWARD_MIN, V.HS_SUCCESS_REWARD_MAX],
+            hs_rateLimitPenalty: [V.HS_RATE_LIMIT_PENALTY_MIN, V.HS_RATE_LIMIT_PENALTY_MAX],
+            hs_failurePenalty: [V.HS_FAILURE_PENALTY_MIN, V.HS_FAILURE_PENALTY_MAX],
+            hs_recoveryPerHour: [V.HS_RECOVERY_PER_HOUR_MIN, V.HS_RECOVERY_PER_HOUR_MAX],
+            hs_minUsable: [V.HS_MIN_USABLE_MIN, V.HS_MIN_USABLE_MAX],
+            hs_maxScore: [V.HS_MAX_SCORE_MIN, V.HS_MAX_SCORE_MAX],
+            // Token bucket
+            tb_maxTokens: [V.TB_MAX_TOKENS_MIN, V.TB_MAX_TOKENS_MAX],
+            tb_tokensPerMinute: [V.TB_TOKENS_PER_MINUTE_MIN, V.TB_TOKENS_PER_MINUTE_MAX],
+            tb_initialTokens: [V.TB_INITIAL_TOKENS_MIN, V.TB_INITIAL_TOKENS_MAX],
+            // Quota
+            q_lowThreshold: [V.Q_LOW_THRESHOLD_MIN, V.Q_LOW_THRESHOLD_MAX],
+            q_criticalThreshold: [V.Q_CRITICAL_THRESHOLD_MIN, V.Q_CRITICAL_THRESHOLD_MAX],
+            q_staleMs: [V.Q_STALE_MS_MIN, V.Q_STALE_MS_MAX],
+            // Weights
+            w_health: [V.W_HEALTH_MIN, V.W_HEALTH_MAX],
+            w_tokens: [V.W_TOKENS_MIN, V.W_TOKENS_MAX],
+            w_quota: [V.W_QUOTA_MIN, V.W_QUOTA_MAX],
+            w_lru: [V.W_LRU_MIN, V.W_LRU_MAX],
+        };
+        const range = ranges[key];
+        if (!range) return;
+
+        if (isNaN(numVal) || numVal < range[0] || numVal > range[1]) {
+            this.editingConfigErrors[key] = `${range[0]}–${range[1]}`;
+        } else {
+            delete this.editingConfigErrors[key];
+            this.editingConfigDraft[key] = numVal;
+        }
+    },
+
+    hasPresetConfigErrors() {
+        if (this.configEditMode === 'json') return !!this.jsonParseError;
+        return Object.keys(this.editingConfigErrors).length > 0;
+    },
+
+    async savePresetConfig() {
+        if (this.hasPresetConfigErrors() || this.savingPresetConfig) return;
+
+        const store = Alpine.store('global');
+        const presetName = this.selectedServerPreset;
+        if (!presetName) return;
+
+        let configPayload;
+        if (this.configEditMode === 'json') {
+            // Parse JSON textarea directly into config payload
+            try {
+                configPayload = JSON.parse(this.editingJsonText);
+            } catch {
+                this.jsonParseError = store.t('invalidJson') || 'Invalid JSON';
+                return;
+            }
+            // Must be a plain object (not null, not an array, not a primitive)
+            if (typeof configPayload !== 'object' || configPayload === null || Array.isArray(configPayload)) {
+                this.jsonParseError = store.t('invalidJson') || 'Invalid JSON';
+                return;
+            }
+        } else {
+            // Build nested config from flat UI draft
+            configPayload = this.buildConfigFromDraft(this.editingConfigDraft);
+        }
+
+        this.savingPresetConfig = true;
+        try {
+            const { response, newPassword } = await window.utils.request(
+                `/api/server/presets/${encodeURIComponent(presetName)}`,
+                {
+                    method: 'PATCH',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ config: configPayload })
+                },
+                store.webuiPassword
+            );
+            if (newPassword) store.webuiPassword = newPassword;
+
+            if (!response.ok) {
+                const errData = await response.json();
+                throw new Error(errData.error || `HTTP ${response.status}`);
+            }
+            const data = await response.json();
+            if (data.status === 'ok') {
+                this.serverPresets = data.presets || [];
+                this.editingPresetConfig = false;
+                this.editingConfigDraft = { accountSelection: { strategy: 'hybrid' } };
+                this.editingConfigErrors = {};
+                this.configEditMode = 'ui';
+                this.editingJsonText = '';
+                this.jsonParseError = null;
+                store.showToast(store.t('presetConfigSaved') || 'Preset config updated', 'success');
+            } else {
+                throw new Error(data.error || 'Failed to save preset config');
+            }
+        } catch (e) {
+            store.showToast((store.t('failedToSavePresetConfig') || 'Failed to update preset config') + ': ' + e.message, 'error');
+        } finally {
+            this.savingPresetConfig = false;
+        }
+    }
+});

public/js/config/constants.js

@@ -0,0 +1,165 @@
+/**
+ * Application Constants
+ * Centralized configuration values and magic numbers
+ */
+window.AppConstants = window.AppConstants || {};
+
+/**
+ * Time intervals (in milliseconds)
+ */
+window.AppConstants.INTERVALS = {
+    // Dashboard refresh interval (5 minutes)
+    DASHBOARD_REFRESH: 300000,
+
+    // OAuth message handler timeout (5 minutes)
+    OAUTH_MESSAGE_TIMEOUT: 300000,
+
+    // Server config debounce delay
+    CONFIG_DEBOUNCE: 500,
+
+    // General short delay (for UI transitions)
+    SHORT_DELAY: 2000
+};
+
+/**
+ * Data limits and quotas
+ */
+window.AppConstants.LIMITS = {
+    // Default log limit
+    DEFAULT_LOG_LIMIT: 2000,
+
+    // Minimum quota value
+    MIN_QUOTA: 100,
+
+    // Percentage base (for calculations)
+    PERCENTAGE_BASE: 100,
+
+    // Max per-account breakdown rows before showing "+N more" toggle
+    ACCOUNT_BREAKDOWN_LIMIT: 10
+};
+
+/**
+ * Validation ranges
+ */
+window.AppConstants.VALIDATION = {
+    // Port range
+    PORT_MIN: 1,
+    PORT_MAX: 65535,
+
+    // Timeout range (0 - 5 minutes)
+    TIMEOUT_MIN: 0,
+    TIMEOUT_MAX: 300000,
+
+    // Log limit range
+    LOG_LIMIT_MIN: 100,
+    LOG_LIMIT_MAX: 10000,
+
+    // Retry configuration ranges
+    MAX_RETRIES_MIN: 1,
+    MAX_RETRIES_MAX: 20,
+
+    RETRY_BASE_MS_MIN: 100,
+    RETRY_BASE_MS_MAX: 10000,
+
+    RETRY_MAX_MS_MIN: 1000,
+    RETRY_MAX_MS_MAX: 120000,
+
+    // Cooldown range (1s - 5 minutes)
+    DEFAULT_COOLDOWN_MIN: 1000,
+    DEFAULT_COOLDOWN_MAX: 300000,
+
+    // Max wait threshold (0 - 10 minutes)
+    MAX_WAIT_MIN: 0,
+    MAX_WAIT_MAX: 600000,
+
+    // Max accounts range (1 - 100)
+    MAX_ACCOUNTS_MIN: 1,
+    MAX_ACCOUNTS_MAX: 100,
+
+    // Rate limit dedup window (1 - 30 seconds)
+    RATE_LIMIT_DEDUP_MIN: 1000,
+    RATE_LIMIT_DEDUP_MAX: 30000,
+
+    // Consecutive failures (1 - 10)
+    MAX_CONSECUTIVE_FAILURES_MIN: 1,
+    MAX_CONSECUTIVE_FAILURES_MAX: 10,
+
+    // Extended cooldown (10 seconds - 5 minutes)
+    EXTENDED_COOLDOWN_MIN: 10000,
+    EXTENDED_COOLDOWN_MAX: 300000,
+
+    // Capacity retries (1 - 10)
+    MAX_CAPACITY_RETRIES_MIN: 1,
+    MAX_CAPACITY_RETRIES_MAX: 10,
+
+    // Global quota threshold (0 - 99%)
+    GLOBAL_QUOTA_THRESHOLD_MIN: 0,
+    GLOBAL_QUOTA_THRESHOLD_MAX: 99,
+
+    // Request delay (100 - 5000ms)
+    REQUEST_DELAY_MIN: 100,
+    REQUEST_DELAY_MAX: 5000,
+
+    // Switch account delay (1s - 60s)
+    SWITCH_ACCOUNT_DELAY_MIN: 1000,
+    SWITCH_ACCOUNT_DELAY_MAX: 60000,
+
+    // Capacity backoff tiers
+    CAPACITY_BACKOFF_TIER_MIN: 1000,
+    CAPACITY_BACKOFF_TIER_MAX: 300000,
+    CAPACITY_BACKOFF_TIERS_MIN_LENGTH: 1,
+    CAPACITY_BACKOFF_TIERS_MAX_LENGTH: 10,
+
+    // Health score fields
+    HS_INITIAL_MIN: 0,
+    HS_INITIAL_MAX: 100,
+    HS_SUCCESS_REWARD_MIN: 0,
+    HS_SUCCESS_REWARD_MAX: 20,
+    HS_RATE_LIMIT_PENALTY_MIN: -50,
+    HS_RATE_LIMIT_PENALTY_MAX: 0,
+    HS_FAILURE_PENALTY_MIN: -50,
+    HS_FAILURE_PENALTY_MAX: 0,
+    HS_RECOVERY_PER_HOUR_MIN: 0,
+    HS_RECOVERY_PER_HOUR_MAX: 20,
+    HS_MIN_USABLE_MIN: 0,
+    HS_MIN_USABLE_MAX: 100,
+    HS_MAX_SCORE_MIN: 1,
+    HS_MAX_SCORE_MAX: 200,
+
+    // Token bucket fields
+    TB_MAX_TOKENS_MIN: 5,
+    TB_MAX_TOKENS_MAX: 200,
+    TB_TOKENS_PER_MINUTE_MIN: 1,
+    TB_TOKENS_PER_MINUTE_MAX: 60,
+    TB_INITIAL_TOKENS_MIN: 1,
+    TB_INITIAL_TOKENS_MAX: 200,
+
+    // Quota awareness fields (displayed as 0-99% in UI)
+    Q_LOW_THRESHOLD_MIN: 0,
+    Q_LOW_THRESHOLD_MAX: 99,
+    Q_CRITICAL_THRESHOLD_MIN: 0,
+    Q_CRITICAL_THRESHOLD_MAX: 99,
+    Q_STALE_MS_MIN: 30000,
+    Q_STALE_MS_MAX: 3600000,
+
+    // Weights fields
+    W_HEALTH_MIN: 0,
+    W_HEALTH_MAX: 20,
+    W_TOKENS_MIN: 0,
+    W_TOKENS_MAX: 20,
+    W_QUOTA_MIN: 0,
+    W_QUOTA_MAX: 20,
+    W_LRU_MIN: 0,
+    W_LRU_MAX: 5
+};
+
+/**
+ * UI Constants
+ */
+window.AppConstants.UI = {
+    // Toast auto-dismiss duration
+    TOAST_DURATION: 3000,
+
+    // Loading spinner delay
+    LOADING_DELAY: 200
+};

public/js/data-store.js

@@ -0,0 +1,538 @@
+/**
+ * Data Store
+ * Holds Accounts, Models, and Computed Quota Rows
+ * Shared between Dashboard and AccountManager
+ */
+
+// utils is loaded globally as window.utils in utils.js
+
+document.addEventListener('alpine:init', () => {
+    Alpine.store('data', {
+        accounts: [],
+        models: [], // Source of truth
+        modelConfig: {}, // Model metadata (hidden, pinned, alias)
+        quotaRows: [], // Filtered view
+        usageHistory: {}, // Usage statistics history (from /account-limits?includeHistory=true)
+        globalQuotaThreshold: 0, // Global minimum quota threshold (fraction 0-0.99)
+        maxAccounts: 10, // Maximum number of accounts allowed (from config)
+        devMode: false, // Developer mode flag (from server config)
+        placeholderMode: false, // Inject placeholder account data for UI testing
+        placeholderIncludeReal: true, // Include real accounts alongside placeholder data
+        _realAccounts: null, // Stash for real accounts when placeholder mode is on
+        _realModels: null, // Stash for real models when placeholder mode is on
+        loading: false,
+        initialLoad: true, // Track first load for skeleton screen
+        connectionStatus: 'connecting',
+        lastUpdated: '-',
+        healthCheckTimer: null,
+
+        // Filters state
+        filters: {
+            account: 'all',
+            family: 'all',
+            search: '',
+            sortCol: 'avgQuota',
+            sortAsc: true
+        },
+
+        // Settings for calculation
+        // We need to access global settings? Or duplicate?
+        // Let's assume settings are passed or in another store.
+        // For simplicity, let's keep relevant filters here.
+
+        init() {
+            // Restore from cache first for instant render
+            this.loadFromCache();
+
+            // Restore placeholder mode from persisted settings
+            // Read localStorage directly since settings store may not be initialized yet
+            try {
+                const saved = JSON.parse(localStorage.getItem('antigravity_settings') || '{}');
+                if (saved.placeholderMode) {
+                    this.setPlaceholderMode(true, saved.placeholderIncludeReal !== false);
+                }
+            } catch (e) { /* ignore parse errors */ }
+
+            // Watch filters to recompute
+            // Alpine stores don't have $watch automatically unless inside a component?
+            // We can manually call compute when filters change.
+
+            // Start health check monitoring
+            this.startHealthCheck();
+        },
+
+        loadFromCache() {
+            try {
+                const cached = localStorage.getItem('ag_data_cache');
+                if (cached) {
+                    const data = JSON.parse(cached);
+                    const CACHE_TTL = 24 * 60 * 60 * 1000; // 24 hours
+
+                    // Check TTL
+                    if (data.timestamp && (Date.now() - data.timestamp > CACHE_TTL)) {
+                        if (window.UILogger) window.UILogger.debug('Cache expired, skipping restoration');
+                        localStorage.removeItem('ag_data_cache');
+                        return;
+                    }
+
+                    // Basic validity check
+                    if (data.accounts && data.models) {
+                        this.accounts = data.accounts;
+                        this.models = data.models;
+                        this.modelConfig = data.modelConfig || {};
+                        this.usageHistory = data.usageHistory || {};
+
+                        // Don't show loading on initial load if we have cache
+                        this.initialLoad = false;
+                        this.computeQuotaRows();
+                        if (window.UILogger) window.UILogger.debug('Restored data from cache');
+                    }
+                }
+            } catch (e) {
+                if (window.UILogger) window.UILogger.debug('Failed to load cache', e.message);
+            }
+        },
+
+        saveToCache() {
+            try {
+                const cacheData = {
+                    accounts: this.accounts,
+                    models: this.models,
+                    modelConfig: this.modelConfig,
+                    usageHistory: this.usageHistory,
+                    timestamp: Date.now()
+                };
+                localStorage.setItem('ag_data_cache', JSON.stringify(cacheData));
+            } catch (e) {
+                if (window.UILogger) window.UILogger.debug('Failed to save cache', e.message);
+            }
+        },
+
+        async fetchData() {
+            // Only show skeleton on initial load if we didn't restore from cache
+            if (this.initialLoad) {
+                this.loading = true;
+            }
+            try {
+                // Get password from global store
+                const password = Alpine.store('global').webuiPassword;
+
+                // Include history for dashboard (single API call optimization)
+                const url = '/account-limits?includeHistory=true';
+                const { response, newPassword } = await window.utils.request(url, {}, password);
+
+                if (newPassword) Alpine.store('global').webuiPassword = newPassword;
+
+                if (!response.ok) throw new Error(`HTTP ${response.status}`);
+
+                const data = await response.json();
+                this.accounts = data.accounts || [];
+                if (data.models && data.models.length > 0) {
+                    this.models = data.models;
+                }
+                this.modelConfig = data.modelConfig || {};
+                this.globalQuotaThreshold = data.globalQuotaThreshold || 0;
+
+                // Store usage history if included (for dashboard)
+                if (data.history) {
+                    this.usageHistory = data.history;
+                }
+
+                this.saveToCache(); // Save fresh data
+
+                // Re-inject placeholder data if active
+                if (this.placeholderMode) {
+                    this._realAccounts = [...this.accounts];
+                    this._realModels = [...this.models];
+                    const { accounts: fakeAccounts, models: fakeModels } = this._generatePlaceholderData();
+                    if (this.placeholderIncludeReal) {
+                        this.accounts = [...this._realAccounts, ...fakeAccounts];
+                        const modelSet = new Set([...this._realModels, ...fakeModels]);
+                        this.models = Array.from(modelSet).sort();
+                    } else {
+                        this.accounts = fakeAccounts;
+                        this.models = fakeModels;
+                    }
+                }
+
+                this.computeQuotaRows();
+
+                this.lastUpdated = new Date().toLocaleTimeString();
+            } catch (error) {
+                // Keep error logging for actual fetch failures
+                console.error('Fetch error:', error);
+                const store = Alpine.store('global');
+                store.showToast(store.t('connectionLost'), 'error');
+            } finally {
+                this.loading = false;
+                this.initialLoad = false; // Mark initial load as complete
+            }
+        },
+
+        async performHealthCheck() {
+            try {
+                // Get password from global store
+                const password = Alpine.store('global').webuiPassword;
+
+                // Use lightweight endpoint (no quota fetching)
+                const { response, newPassword } = await window.utils.request('/api/config', {}, password);
+
+                if (newPassword) Alpine.store('global').webuiPassword = newPassword;
+
+                if (response.ok) {
+                    this.connectionStatus = 'connected';
+                    // Update devMode from server config
+                    try {
+                        const data = await response.json();
+                        if (data.config) {
+                            this.devMode = !!data.config.devMode;
+                        }
+                    } catch (e) { /* ignore parse errors */ }
+                } else {
+                    this.connectionStatus = 'disconnected';
+                }
+            } catch (error) {
+                console.error('Health check error:', error);
+                this.connectionStatus = 'disconnected';
+            }
+        },
+
+        startHealthCheck() {
+            // Clear existing timer
+            if (this.healthCheckTimer) {
+                clearInterval(this.healthCheckTimer);
+            }
+
+            // Setup visibility change listener (only once)
+            if (!this._healthVisibilitySetup) {
+                this._healthVisibilitySetup = true;
+                this._visibilityHandler = () => {
+                    if (document.hidden) {
+                        // Tab hidden - stop health checks
+                        this.stopHealthCheck();
+                    } else {
+                        // Tab visible - restart health checks
+                        this.startHealthCheck();
+                    }
+                };
+                document.addEventListener('visibilitychange', this._visibilityHandler);
+            }
+
+            // Perform immediate health check
+            this.performHealthCheck();
+
+            // Schedule regular health checks every 15 seconds
+            this.healthCheckTimer = setInterval(() => {
+                // Only perform health check if tab is visible
+                if (!document.hidden) {
+                    this.performHealthCheck();
+                }
+            }, 15000);
+        },
+
+        stopHealthCheck() {
+            if (this.healthCheckTimer) {
+                clearInterval(this.healthCheckTimer);
+                this.healthCheckTimer = null;
+            }
+        },
+
+        computeQuotaRows() {
+            const models = this.models || [];
+            const rows = [];
+            const showExhausted = Alpine.store('settings')?.showExhausted ?? true;
+
+            models.forEach(modelId => {
+                // Config
+                const config = this.modelConfig[modelId] || {};
+                const family = this.getModelFamily(modelId);
+
+                // Visibility Logic for Models Page (quotaRows):
+                // 1. If explicitly hidden via config, ALWAYS hide (clean interface)
+                // 2. If no config, default 'unknown' families to HIDDEN
+                // 3. Known families (Claude/Gemini) default to VISIBLE
+                // Note: To manage hidden models, use Settings → Models tab
+                let isHidden = config.hidden;
+                if (isHidden === undefined) {
+                    isHidden = (family === 'other' || family === 'unknown');
+                }
+
+                // Models Page: Check settings for visibility
+                const showHidden = Alpine.store('settings')?.showHiddenModels ?? false;
+                if (isHidden && !showHidden) return;
+
+                // Filters
+                if (this.filters.family !== 'all' && this.filters.family !== family) return;
+                if (this.filters.search) {
+                    const searchLower = this.filters.search.toLowerCase();
+                    const idMatch = modelId.toLowerCase().includes(searchLower);
+                    if (!idMatch) return;
+                }
+
+                // Data Collection
+                const quotaInfo = [];
+                let minQuota = 100;
+                let totalQuotaSum = 0;
+                let validAccountCount = 0;
+                let minResetTime = null;
+                let maxEffectiveThreshold = 0;
+                const globalThreshold = this.globalQuotaThreshold || 0;
+
+                this.accounts.forEach(acc => {
+                    if (acc.enabled === false) return;
+                    if (this.filters.account !== 'all' && acc.email !== this.filters.account) return;
+
+                    const limit = acc.limits?.[modelId];
+                    if (!limit) return;
+
+                    const pct = limit.remainingFraction !== null ? Math.round(limit.remainingFraction * 100) : 0;
+                    minQuota = Math.min(minQuota, pct);
+
+                    // Accumulate for average
+                    totalQuotaSum += pct;
+                    validAccountCount++;
+
+                    if (limit.resetTime && (!minResetTime || new Date(limit.resetTime) < new Date(minResetTime))) {
+                        minResetTime = limit.resetTime;
+                    }
+
+                    // Resolve effective threshold: per-model > per-account > global
+                    const accModelThreshold = acc.modelQuotaThresholds?.[modelId];
+                    const accThreshold = acc.quotaThreshold;
+                    const effective = accModelThreshold ?? accThreshold ?? globalThreshold;
+                    if (effective > maxEffectiveThreshold) {
+                        maxEffectiveThreshold = effective;
+                    }
+
+                    // Determine threshold source for display
+                    let thresholdSource = 'global';
+                    if (accModelThreshold !== undefined) thresholdSource = 'model';
+                    else if (accThreshold !== undefined) thresholdSource = 'account';
+
+                    quotaInfo.push({
+                        email: acc.email.split('@')[0],
+                        fullEmail: acc.email,
+                        pct: pct,
+                        resetTime: limit.resetTime,
+                        thresholdPct: Math.round(effective * 100),
+                        thresholdSource
+                    });
+                });
+
+                if (quotaInfo.length === 0) return;
+                const avgQuota = validAccountCount > 0 ? Math.round(totalQuotaSum / validAccountCount) : 0;
+
+                if (!showExhausted && minQuota === 0) return;
+
+                // Check if thresholds vary across accounts
+                const uniqueThresholds = new Set(quotaInfo.map(q => q.thresholdPct));
+                const hasVariedThresholds = uniqueThresholds.size > 1;
+
+                rows.push({
+                    modelId,
+                    displayName: modelId, // Simplified: no longer using alias
+                    family,
+                    minQuota,
+                    avgQuota, // Added Average Quota
+                    minResetTime,
+                    resetIn: minResetTime ? window.utils.formatTimeUntil(minResetTime) : '-',
+                    quotaInfo,
+                    pinned: !!config.pinned,
+                    hidden: !!isHidden, // Use computed visibility
+                    activeCount: quotaInfo.filter(q => q.pct > 0).length,
+                    effectiveThresholdPct: Math.round(maxEffectiveThreshold * 100),
+                    hasVariedThresholds
+                });
+            });
+
+            // Sort: Pinned first, then by selected column
+            const sortCol = this.filters.sortCol;
+            const sortAsc = this.filters.sortAsc;
+
+            this.quotaRows = rows.sort((a, b) => {
+                if (a.pinned !== b.pinned) return a.pinned ? -1 : 1;
+
+                let valA = a[sortCol];
+                let valB = b[sortCol];
+
+                // Handle nulls (always push to bottom)
+                if (valA === valB) return 0;
+                if (valA === null || valA === undefined) return 1;
+                if (valB === null || valB === undefined) return -1;
+
+                if (typeof valA === 'string' && typeof valB === 'string') {
+                    return sortAsc ? valA.localeCompare(valB) : valB.localeCompare(valA);
+                }
+
+                return sortAsc ? valA - valB : valB - valA;
+            });
+
+            // Trigger Dashboard Update if active
+            // Ideally dashboard watches this store.
+        },
+
+        setSort(col) {
+            if (this.filters.sortCol === col) {
+                this.filters.sortAsc = !this.filters.sortAsc;
+            } else {
+                this.filters.sortCol = col;
+                // Default sort direction: Descending for numbers/stats, Ascending for text/time
+                if (['avgQuota', 'activeCount'].includes(col)) {
+                    this.filters.sortAsc = false;
+                } else {
+                    this.filters.sortAsc = true;
+                }
+            }
+            this.computeQuotaRows();
+        },
+
+        getModelFamily(modelId) {
+            const lower = modelId.toLowerCase();
+            if (lower.includes('claude')) return 'claude';
+            if (lower.includes('gemini')) return 'gemini';
+            return 'other';
+        },
+
+        /**
+         * Get quota data without filters applied (for Dashboard global charts)
+         * Returns array of { modelId, family, quotaInfo: [{pct}] }
+         */
+        getUnfilteredQuotaData() {
+            const models = this.models || [];
+            const rows = [];
+            const showHidden = Alpine.store('settings')?.showHiddenModels ?? false;
+
+            models.forEach(modelId => {
+                const config = this.modelConfig[modelId] || {};
+                const family = this.getModelFamily(modelId);
+
+                // Smart visibility (same logic as computeQuotaRows)
+                let isHidden = config.hidden;
+                if (isHidden === undefined) {
+                    isHidden = (family === 'other' || family === 'unknown');
+                }
+                if (isHidden && !showHidden) return;
+
+                const quotaInfo = [];
+                // Use ALL accounts (no account filter)
+                this.accounts.forEach(acc => {
+                    if (acc.enabled === false) return;
+                    const limit = acc.limits?.[modelId];
+                    if (!limit) return;
+                    const pct = limit.remainingFraction !== null ? Math.round(limit.remainingFraction * 100) : 0;
+                    quotaInfo.push({ pct });
+                });
+
+                // treat missing quotaInfo as 0%/unknown; still include row
+                rows.push({ modelId, family, quotaInfo });
+            });
+
+            return rows;
+        },
+
+        /**
+         * Generate placeholder account and model data for UI testing
+         */
+        _generatePlaceholderData() {
+            const models = [
+                'claude-opus-4-6-thinking',
+                'claude-sonnet-4-6',
+                'gemini-3.1-pro-high',
+                'gemini-3.1-pro-low',
+                'gemini-3-flash',
+                'gemini-3.1-flash-lite'
+            ];
+
+            const tiers = ['ultra', 'pro', 'pro', 'free'];
+            const names = ['alice', 'bob', 'charlie', 'diana'];
+            const domains = ['workspace.dev', 'company.io', 'example.org', 'test.net'];
+
+            const accounts = names.map((name, i) => {
+                const email = `${name}@${domains[i]}`;
+                const tier = tiers[i];
+
+                // Generate varied quota per model per account
+                const limits = {};
+                models.forEach((modelId, mi) => {
+                    // Create a deterministic but varied fraction
+                    const seed = ((i * 7 + mi * 13) % 100);
+                    const fraction = seed < 10 ? 0 : seed / 100;
+                    const resetTime = fraction === 0
+                        ? new Date(Date.now() + (30 + i * 15) * 60000).toISOString()
+                        : null;
+                    limits[modelId] = {
+                        remaining: Math.round(fraction * 100) + '%',
+                        remainingFraction: fraction,
+                        resetTime
+                    };
+                });
+
+                return {
+                    email,
+                    status: i === 3 ? 'invalid' : 'ok',
+                    error: i === 3 ? 'Token expired' : null,
+                    source: i === 0 ? 'database' : 'oauth',
+                    enabled: i !== 2 ? true : false,
+                    projectId: `proj-${name}-${1000 + i}`,
+                    isInvalid: i === 3,
+                    invalidReason: i === 3 ? 'Token expired' : null,
+                    lastUsed: new Date(Date.now() - i * 3600000).toISOString(),
+                    modelRateLimits: {},
+                    quotaThreshold: i === 1 ? 0.15 : undefined,
+                    modelQuotaThresholds: i === 0 ? { 'claude-opus-4-6-thinking': 0.25 } : {},
+                    subscription: { tier, projectId: `proj-${name}-${1000 + i}`, detectedAt: Date.now() },
+                    limits
+                };
+            });
+
+            return { accounts, models };
+        },
+
+        /**
+         * Enable or disable placeholder data injection
+         */
+        setPlaceholderMode(enabled, includeReal) {
+            this.placeholderMode = enabled;
+            this.placeholderIncludeReal = includeReal;
+
+            // Persist to settings store
+            const settings = Alpine.store('settings');
+            if (settings) {
+                settings.placeholderMode = enabled;
+                settings.placeholderIncludeReal = includeReal;
+                settings.saveSettings(true);
+            }
+
+            if (enabled) {
+                // Stash real data
+                this._realAccounts = [...this.accounts];
+                this._realModels = [...this.models];
+
+                const { accounts: fakeAccounts, models: fakeModels } = this._generatePlaceholderData();
+
+                if (includeReal && this._realAccounts.length > 0) {
+                    // Merge: real accounts first, then placeholders
+                    this.accounts = [...this._realAccounts, ...fakeAccounts];
+                    // Union of models
+                    const modelSet = new Set([...this._realModels, ...fakeModels]);
+                    this.models = Array.from(modelSet).sort();
+                } else {
+                    this.accounts = fakeAccounts;
+                    this.models = fakeModels;
+                }
+            } else {
+                // Restore real data
+                if (this._realAccounts !== null) {
+                    this.accounts = this._realAccounts;
+                    this._realAccounts = null;
+                }
+                if (this._realModels !== null) {
+                    this.models = this._realModels;
+                    this._realModels = null;
+                }
+            }
+
+            this.computeQuotaRows();
+        }
+    });
+});

public/js/settings-store.js

@@ -0,0 +1,76 @@
+/**
+ * Settings Store
+ */
+document.addEventListener('alpine:init', () => {
+    Alpine.store('settings', {
+        refreshInterval: 60,
+        logLimit: 2000,
+        showExhausted: true,
+        showHiddenModels: false,
+        showAllAccounts: false,
+        showConfigWarning: true,
+        compact: false,
+        redactMode: false,
+        placeholderMode: false,
+        placeholderIncludeReal: true,
+        debugLogging: true,
+        logExport: true,
+        healthInspector: true,
+        healthInspectorOpen: false,
+        port: 8080, // Display only
+
+        init() {
+            this.loadSettings();
+        },
+
+        // Call this method when toggling settings in the UI
+        toggle(key) {
+            if (this.hasOwnProperty(key) && typeof this[key] === 'boolean') {
+                this[key] = !this[key];
+                this.saveSettings(true);
+            }
+        },
+
+        loadSettings() {
+            const saved = localStorage.getItem('antigravity_settings');
+            if (saved) {
+                const parsed = JSON.parse(saved);
+                Object.keys(parsed).forEach(k => {
+                    // Only load keys that exist in our default state (safety)
+                    if (this.hasOwnProperty(k)) this[k] = parsed[k];
+                });
+            }
+        },
+
+        saveSettings(silent = false) {
+            const toSave = {
+                refreshInterval: this.refreshInterval,
+                logLimit: this.logLimit,
+                showExhausted: this.showExhausted,
+                showHiddenModels: this.showHiddenModels,
+                showAllAccounts: this.showAllAccounts,
+                showConfigWarning: this.showConfigWarning,
+                compact: this.compact,
+                redactMode: this.redactMode,
+                placeholderMode: this.placeholderMode,
+                placeholderIncludeReal: this.placeholderIncludeReal,
+                debugLogging: this.debugLogging,
+                logExport: this.logExport,
+                healthInspector: this.healthInspector,
+                healthInspectorOpen: this.healthInspectorOpen
+            };
+            localStorage.setItem('antigravity_settings', JSON.stringify(toSave));
+
+            if (!silent) {
+                const store = Alpine.store('global');
+                store.showToast(store.t('configSaved'), 'success');
+            }
+
+            // Trigger updates
+            document.dispatchEvent(new CustomEvent('refresh-interval-changed'));
+            if (Alpine.store('data')) {
+                Alpine.store('data').computeQuotaRows();
+            }
+        }
+    });
+});