feat: Add Web UI for account and quota management

## Summary
Add an optional Web UI for managing accounts and monitoring quotas.
WebUI is implemented as a modular plugin with minimal changes to server.js (only 5 lines added).

## New Features
- Dashboard: Real-time model quota visualization with Chart.js
- Accounts: OAuth-based account management (add/enable/disable/refresh/remove)
- Logs: Live server log streaming via SSE with search and level filtering
- Settings: System configuration with 4 tabs
  - Interface: Language (EN/zh_CN), polling interval, log buffer size, display options
  - Claude CLI: Proxy connection config, model selection, alias overrides (~/.claude.json)
  - Models: Model visibility and ordering management
  - Server Info: Runtime info and account config reload

## Technical Changes
- Add src/webui/index.js as modular plugin (all WebUI routes encapsulated)
- Add src/config.js for centralized configuration (~/.config/antigravity-proxy/config.json)
- Add authMiddleware for optional password protection (WEBUI_PASSWORD env var)
- Enhance logger with EventEmitter for SSE log streaming
- Make constants configurable via config.json
- Merge with main v1.2.6 (model fallback, cross-model thinking)
- server.js changes: only 5 lines added to import and mount WebUI module

## Bug Fixes
- Fix Alpine.js $watch error in settings-store.js (not supported in store init)
- Fix "OK" label to "SUCCESS" in logs filter
- Add saveSettings() calls to settings toggles for proper persistence
- Improve Claude CLI config robustness (handle empty/invalid JSON files)
- Add safety check for empty config.env in claude-config component
- Improve config.example.json instructions with clear Windows/macOS/Linux paths

## New Files
- src/webui/index.js - WebUI module with all API routes
- public/ - Complete Web UI frontend (Alpine.js + TailwindCSS + DaisyUI)
- src/config.js - Configuration management
- src/utils/claude-config.js - Claude CLI settings helper
- tests/frontend/ - Frontend test suite

## API Endpoints Added
- GET/POST /api/config - Server configuration
- GET/POST /api/claude/config - Claude CLI configuration
- POST /api/models/config - Model alias/hidden settings
- GET /api/accounts - Account list with status
- POST /api/accounts/:email/toggle - Enable/disable account
- POST /api/accounts/:email/refresh - Refresh account token
- DELETE /api/accounts/:email - Remove account
- GET /api/logs - Log history
- GET /api/logs/stream - Live log streaming (SSE)
- GET /api/auth/url - OAuth URL generation
- GET /oauth/callback - OAuth callback handler

## Backward Compatibility
- Default port remains 8080
- All existing CLI/API functionality unchanged
- WebUI is entirely optional
- Can be disabled by removing mountWebUI() call

public/js/components/dashboard.js

@@ -0,0 +1,122 @@
+/**
+ * Dashboard Component
+ * Registers itself to window.Components for Alpine.js to consume
+ */
+window.Components = window.Components || {};
+
+window.Components.dashboard = () => ({
+    stats: { total: 0, active: 0, limited: 0, overallHealth: 0 },
+    charts: { quotaDistribution: null },
+
+    init() {
+        // Update stats when dashboard becomes active
+        this.$watch('$store.global.activeTab', (val) => {
+            if (val === 'dashboard') {
+                this.$nextTick(() => {
+                    this.updateStats();
+                    this.updateCharts();
+                });
+            }
+        });
+
+        // Watch for data changes
+        this.$watch('$store.data.accounts', () => {
+            if (this.$store.global.activeTab === 'dashboard') {
+                this.updateStats();
+                this.$nextTick(() => this.updateCharts());
+            }
+        });
+
+        // Initial update if already on dashboard
+        if (this.$store.global.activeTab === 'dashboard') {
+            this.$nextTick(() => {
+                this.updateStats();
+                this.updateCharts();
+            });
+        }
+    },
+
+    updateStats() {
+        const accounts = Alpine.store('data').accounts;
+        let active = 0, limited = 0;
+        accounts.forEach(acc => {
+            if (acc.status === 'ok') {
+                const hasQuota = Object.values(acc.limits || {}).some(l => l && l.remainingFraction > 0);
+                if (hasQuota) active++; else limited++;
+            } else {
+                limited++;
+            }
+        });
+        this.stats = { total: accounts.length, active, limited };
+    },
+
+    updateCharts() {
+        const ctx = document.getElementById('quotaChart');
+        if (!ctx || typeof Chart === 'undefined') return;
+
+        if (this.charts.quotaDistribution) {
+            this.charts.quotaDistribution.destroy();
+        }
+
+        const rows = Alpine.store('data').quotaRows;
+        const familyStats = { claude: { sum: 0, count: 0 }, gemini: { sum: 0, count: 0 }, other: { sum: 0, count: 0 } };
+
+        // Calculate overall system health
+        let totalHealthSum = 0;
+        let totalModelCount = 0;
+
+        rows.forEach(row => {
+            const f = familyStats[row.family] ? row.family : 'other';
+            // Use avgQuota if available (new logic), fallback to minQuota (old logic compatibility)
+            const quota = row.avgQuota !== undefined ? row.avgQuota : row.minQuota;
+
+            familyStats[f].sum += quota;
+            familyStats[f].count++;
+
+            totalHealthSum += quota;
+            totalModelCount++;
+        });
+
+        this.stats.overallHealth = totalModelCount > 0 ? Math.round(totalHealthSum / totalModelCount) : 0;
+
+        const labels = ['Claude', 'Gemini', 'Other'];
+        const data = [
+            familyStats.claude.count ? Math.round(familyStats.claude.sum / familyStats.claude.count) : 0,
+            familyStats.gemini.count ? Math.round(familyStats.gemini.sum / familyStats.gemini.count) : 0,
+            familyStats.other.count ? Math.round(familyStats.other.sum / familyStats.other.count) : 0,
+        ];
+
+        this.charts.quotaDistribution = new Chart(ctx, {
+            type: 'doughnut',
+            data: {
+                labels: labels,
+                datasets: [{
+                    data: data,
+                    backgroundColor: ['#a855f7', '#22c55e', '#52525b'],
+                    borderColor: '#09090b', // Matches bg-space-900 roughly
+                    borderWidth: 2,
+                    hoverOffset: 0,
+                    borderRadius: 2
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                cutout: '85%', // Thinner ring
+                plugins: {
+                    legend: {
+                        display: false // Hide default legend
+                    },
+                    tooltip: {
+                        enabled: false // Disable tooltip for cleaner look, or style it? Let's keep it simple.
+                    },
+                    title: { display: false }
+                },
+                animation: {
+                    animateScale: true,
+                    animateRotate: true
+                }
+            }
+        });
+    }
+});