torbjorn/antigravity-claude-proxy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(webui): add hot-reload account management with OAuth support

Browse Source
This commit is contained in:
Wha1eChai
2026-01-08 23:49:12 +08:00
parent dc9bea1100
commit c9c5e7d486
10 changed files with 194 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
public/app.js
View File

@@ -109,22 +109,43 @@ document.addEventListener('alpine:init', () => {
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
window.open(data.url, 'google_oauth', 'width=600,height=700,scrollbars=yes');
const messageHandler = (event) => {
if (event.data?.type === 'oauth-success') {
// 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)
const pollInterval = setInterval(async () => {
pollCount++;
// 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);
const actionKey = reAuthEmail ? 'reauthenticated' : 'added';
const action = Alpine.store('global').t(actionKey);
const successfully = Alpine.store('global').t('successfully');
const msg = `${Alpine.store('global').t('accounts')} ${event.data.email} ${action} ${successfully}`;
Alpine.store('global').showToast(msg, 'success');
Alpine.store('data').fetchData();
Alpine.store('global').showToast(
`${Alpine.store('global').t('accounts')} ${action} ${successfully}`,
'success'
);
document.getElementById('add_account_modal')?.close();
}
};
window.addEventListener('message', messageHandler);
setTimeout(() => window.removeEventListener('message', messageHandler), 300000);
// Stop polling after max attempts
if (pollCount >= maxPolls) {
clearInterval(pollInterval);
}
}, 2000); // Poll every 2 seconds
} else {
Alpine.store('global').showToast(data.error || Alpine.store('global').t('failedToGetAuthUrl'), 'error');
}

5
public/css/style.css
View File

@@ -130,7 +130,10 @@
/* View Containers */
.view-container {
@apply max-w-7xl mx-auto p-6 space-y-6 animate-fade-in;
@apply mx-auto p-6 space-y-6 animate-fade-in;
/* Responsive max-width: use most of screen on small displays,
but cap at 1600px on large displays for reading comfort */
max-width: min(95%, 1600px);
}
/* Section Headers */

21
public/js/components/account-manager.js
View File

@@ -28,6 +28,14 @@ window.Components.accountManager = () => ({
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',
@@ -40,12 +48,23 @@ window.Components.accountManager = () => ({
if (data.status === 'ok') {
const status = enabled ? store.t('enabledStatus') : store.t('disabledStatus');
store.showToast(store.t('accountToggled', { email, status }), 'success');
Alpine.store('data').fetchData();
// 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();
}
},

10
public/js/components/dashboard.js
View File

@@ -495,7 +495,10 @@ window.Components.dashboard = () => ({
const isCore = (id) => /sonnet|opus|pro|flash/i.test(id);
accounts.forEach(acc => {
// 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 || {});
let hasActiveCore = limits.some(([id, l]) => l && l.remainingFraction > 0.05 && isCore(id));
@@ -512,7 +515,10 @@ window.Components.dashboard = () => ({
limited++;
}
});
this.stats.total = accounts.length;
// TOTAL shows only enabled accounts
// Disabled accounts are excluded from all statistics
this.stats.total = enabledAccounts.length;
this.stats.active = active;
this.stats.limited = limited;
},

6
public/js/store.js
View File

@@ -50,17 +50,20 @@ document.addEventListener('alpine:init', () => {
enabled: "ENABLED",
health: "HEALTH",
identity: "IDENTITY (EMAIL)",
source: "SOURCE",
projectId: "PROJECT ID",
sessionState: "SESSION STATE",
operations: "OPERATIONS",
delete: "Delete",
confirmDelete: "Are you sure you want to remove this account?",
cannotDeleteDatabase: "Cannot delete: This account is from Antigravity database (read-only)",
connectGoogle: "Connect Google Account",
reauthenticated: "re-authenticated",
added: "added",
successfully: "successfully",
failedToGetAuthUrl: "Failed to get auth URL",
failedToStartOAuth: "Failed to start OAuth flow",
oauthInProgress: "OAuth in progress. Please complete authentication in the popup window...",
family: "Family",
model: "Model",
activeSuffix: "Active",
@@ -211,17 +214,20 @@ document.addEventListener('alpine:init', () => {
enabled: "启用",
health: "健康度",
identity: "身份 (邮箱)",
source: "来源",
projectId: "项目 ID",
sessionState: "会话状态",
operations: "操作",
delete: "删除",
confirmDelete: "确定要移除此账号吗？",
cannotDeleteDatabase: "无法删除：此账号来自 Antigravity 数据库（只读）",
connectGoogle: "连接 Google 账号",
reauthenticated: "已重新认证",
added: "已添加",
successfully: "成功",
failedToGetAuthUrl: "获取认证链接失败",
failedToStartOAuth: "启动 OAuth 流程失败",
oauthInProgress: "OAuth 授权进行中，请在弹出窗口中完成认证...",
family: "系列",
model: "模型",
activeSuffix: "活跃",

14
public/views/accounts.html
View File

@@ -25,6 +25,7 @@
<tr class="border-b border-space-border/50">
<th class="pl-6 py-3 text-left text-[10px] font-bold text-gray-500 uppercase tracking-wider w-20" x-text="$store.global.t('enabled')">Enabled</th>
<th class="py-3 text-left text-[10px] font-bold text-gray-500 uppercase tracking-wider" x-text="$store.global.t('identity')">Identity (Email)</th>
<th class="py-3 text-left text-[10px] font-bold text-gray-500 uppercase tracking-wider w-24" x-text="$store.global.t('source')">Source</th>
<th class="py-3 text-left text-[10px] font-bold text-gray-500 uppercase tracking-wider w-32" x-text="$store.global.t('projectId')">Project ID</th>
<th class="py-3 text-left text-[10px] font-bold text-gray-500 uppercase tracking-wider w-24" x-text="$store.global.t('health')">Health</th>
<th class="py-3 pr-6 text-right text-[10px] font-bold text-gray-500 uppercase tracking-wider w-32" x-text="$store.global.t('operations')">Operations</th>
@@ -50,6 +51,12 @@
</span>
</div>
</td>
<td class="py-4">
<span class="px-2 py-1 text-[10px] font-mono font-bold uppercase rounded"
:class="acc.source === 'oauth' ? 'bg-neon-purple/10 text-neon-purple border border-neon-purple/30' : 'bg-gray-500/10 text-gray-400 border border-gray-500/30'"
x-text="acc.source || 'oauth'">
</span>
</td>
<td class="py-4 font-mono text-xs text-gray-500" x-text="acc.projectId || '-'"></td>
<td class="py-4">
<div class="flex items-center gap-2">
@@ -81,8 +88,11 @@
</svg>
</button>
<button
class="p-2 rounded hover:bg-red-500/10 text-gray-500 hover:text-red-400 transition-colors"
@click="deleteAccount(acc.email)" :title="$store.global.t('delete')">
class="p-2 rounded transition-colors"
:class="acc.source === 'database' ? 'text-gray-700 cursor-not-allowed' : 'hover:bg-red-500/10 text-gray-500 hover:text-red-400'"
:disabled="acc.source === 'database'"
@click="acc.source !== 'database' && deleteAccount(acc.email)"
:title="acc.source === 'database' ? $store.global.t('cannotDeleteDatabase') : $store.global.t('delete')">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />

12
src/account-manager/index.js
View File

@@ -71,6 +71,16 @@ export class AccountManager {
this.#initialized = true;
}
/**
* Reload accounts from disk (force re-initialization)
* Useful when accounts.json is modified externally (e.g., by WebUI)
*/
async reload() {
this.#initialized = false;
await this.initialize();
logger.info('[AccountManager] Accounts reloaded from disk');
}
/**
* Get the number of accounts
* @returns {number} Number of configured accounts
@@ -278,6 +288,8 @@ export class AccountManager {
accounts: this.#accounts.map(a => ({
email: a.email,
source: a.source,
enabled: a.enabled !== false, // Default to true if undefined
projectId: a.projectId || null,
modelRateLimits: a.modelRateLimits || {},
isInvalid: a.isInvalid || false,
invalidReason: a.invalidReason || null,

5
src/auth/oauth.js
View File

@@ -32,15 +32,16 @@ function generatePKCE() {
* Generate authorization URL for Google OAuth
* Returns the URL and the PKCE verifier (needed for token exchange)
*
* @param {string} [customRedirectUri] - Optional custom redirect URI (e.g. for WebUI)
* @returns {{url: string, verifier: string, state: string}} Auth URL and PKCE data
*/
export function getAuthorizationUrl() {
export function getAuthorizationUrl(customRedirectUri = null) {
const { verifier, challenge } = generatePKCE();
const state = crypto.randomBytes(16).toString('hex');
const params = new URLSearchParams({
client_id: OAUTH_CONFIG.clientId,
redirect_uri: OAUTH_REDIRECT_URI,
redirect_uri: customRedirectUri || OAUTH_REDIRECT_URI,
response_type: 'code',
scope: OAUTH_CONFIG.scopes.join(' '),
access_type: 'offline',

23
src/server.js
View File

@@ -423,16 +423,34 @@ app.get('/account-limits', async (req, res) => {
return res.send(lines.join('\n'));
}
// Get account metadata from AccountManager
const accountStatus = accountManager.getStatus();
const accountMetadataMap = new Map(
accountStatus.accounts.map(a => [a.email, a])
);
// Default: JSON format
res.json({
timestamp: new Date().toLocaleString(),
totalAccounts: allAccounts.length,
models: sortedModels,
modelConfig: config.modelMapping || {},
accounts: accountLimits.map(acc => ({
accounts: accountLimits.map(acc => {
// Merge quota data with account metadata
const metadata = accountMetadataMap.get(acc.email) || {};
return {
email: acc.email,
status: acc.status,
error: acc.error || null,
// Include metadata from AccountManager (WebUI needs these)
source: metadata.source || 'unknown',
enabled: metadata.enabled !== false,
projectId: metadata.projectId || null,
isInvalid: metadata.isInvalid || false,
invalidReason: metadata.invalidReason || null,
lastUsed: metadata.lastUsed || null,
modelRateLimits: metadata.modelRateLimits || {},
// Quota limits
limits: Object.fromEntries(
sortedModels.map(modelId => {
const quota = acc.models?.[modelId];
@@ -448,7 +466,8 @@ app.get('/account-limits', async (req, res) => {
}];
})
)
}))
};
})
});
} catch (error) {
res.status(500).json({

158
src/webui/index.js
View File

@@ -18,11 +18,12 @@ import { getPublicConfig, saveConfig, config } from '../config.js';
import { DEFAULT_PORT, ACCOUNT_CONFIG_PATH } from '../constants.js';
import { readClaudeConfig, updateClaudeConfig, getClaudeConfigPath } from '../utils/claude-config.js';
import { logger } from '../utils/logger.js';
import { getAuthorizationUrl, completeOAuthFlow } from '../auth/oauth.js';
import { getAuthorizationUrl, completeOAuthFlow, startCallbackServer } from '../auth/oauth.js';
import { loadAccounts, saveAccounts } from '../account-manager/storage.js';
// OAuth state storage (state -> { verifier, timestamp })
const pendingOAuthStates = new Map();
// OAuth state storage (state -> { server, verifier, state, timestamp })
// Maps state ID to active OAuth flow data
const pendingOAuthFlows = new Map();
/**
* WebUI Helper Functions - Direct account manipulation
@@ -190,7 +191,7 @@ export function mountWebUI(app, dirname, accountManager) {
await setAccountEnabled(email, enabled);
// Reload AccountManager to pick up changes
await accountManager.initialize();
await accountManager.reload();
res.json({
status: 'ok',
@@ -210,7 +211,7 @@ export function mountWebUI(app, dirname, accountManager) {
await removeAccount(email);
// Reload AccountManager to pick up changes
await accountManager.initialize();
await accountManager.reload();
res.json({
status: 'ok',
@@ -227,7 +228,7 @@ export function mountWebUI(app, dirname, accountManager) {
app.post('/api/accounts/reload', async (req, res) => {
try {
// Reload AccountManager from disk
await accountManager.initialize();
await accountManager.reload();
const status = accountManager.getStatus();
res.json({
@@ -508,54 +509,39 @@ export function mountWebUI(app, dirname, accountManager) {
/**
* GET /api/auth/url - Get OAuth URL to start the flow
* Uses CLI's OAuth flow (localhost:51121) instead of WebUI's port
* to match Google OAuth Console's authorized redirect URIs
*/
app.get('/api/auth/url', (req, res) => {
app.get('/api/auth/url', async (req, res) => {
try {
const { email } = req.query;
const { url, verifier, state } = getAuthorizationUrl(email);
// Store the verifier temporarily
pendingOAuthStates.set(state, { verifier, timestamp: Date.now() });
// Clean up old states (> 10 mins)
// Clean up old flows (> 10 mins)
const now = Date.now();
for (const [key, val] of pendingOAuthStates.entries()) {
for (const [key, val] of pendingOAuthFlows.entries()) {
if (now - val.timestamp > 10 * 60 * 1000) {
pendingOAuthStates.delete(key);
pendingOAuthFlows.delete(key);
}
}
res.json({ status: 'ok', url });
} catch (error) {
logger.error('[WebUI] Error generating auth URL:', error);
res.status(500).json({ status: 'error', error: error.message });
}
// Generate OAuth URL using default redirect URI (localhost:51121)
const { url, verifier, state } = getAuthorizationUrl();
// Start callback server on port 51121 (same as CLI)
const serverPromise = startCallbackServer(state, 120000); // 2 min timeout
// Store the flow data
pendingOAuthFlows.set(state, {
serverPromise,
verifier,
state,
timestamp: Date.now()
});
/**
* GET /oauth/callback - OAuth callback handler
*/
app.get('/oauth/callback', async (req, res) => {
const { code, state, error } = req.query;
if (error) {
return res.status(400).send(`Authentication failed: ${error}`);
}
if (!code || !state) {
return res.status(400).send('Missing code or state parameter');
}
const storedState = pendingOAuthStates.get(state);
if (!storedState) {
return res.status(400).send('Invalid or expired state parameter. Please try again.');
}
// Remove used state
pendingOAuthStates.delete(state);
// Start async handler for the OAuth callback
serverPromise
.then(async (code) => {
try {
const accountData = await completeOAuthFlow(code, storedState.verifier);
logger.info('[WebUI] Received OAuth callback, completing flow...');
const accountData = await completeOAuthFlow(code, verifier);
// Add or update the account
await addAccount({
@@ -566,74 +552,32 @@ export function mountWebUI(app, dirname, accountManager) {
});
// Reload AccountManager to pick up the new account
await accountManager.initialize();
await accountManager.reload();
// Return a simple HTML page that closes itself or redirects
res.send(`
<!DOCTYPE html>
<html>
<head>
<title>Authentication Successful</title>
<link rel="stylesheet" href="/css/style.css">
<style>
body {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
background-color: var(--color-space-950);
color: var(--color-text-main);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
flex-direction: column;
}
h1 { color: var(--color-neon-green); }
</style>
</head>
<body>
<h1>Authentication Successful</h1>
<p>Account ${accountData.email} has been added.</p>
<p>You can close this window now.</p>
<script>
// Notify opener if opened via window.open
if (window.opener) {
window.opener.postMessage({ type: 'oauth-success', email: '${accountData.email}' }, '*');
setTimeout(() => window.close(), 2000);
} else {
// If redirected in same tab, redirect back to home after delay
setTimeout(() => window.location.href = '/', 3000);
}
</script>
</body>
</html>
`);
logger.success(`[WebUI] Account ${accountData.email} added successfully`);
} catch (err) {
logger.error('[WebUI] OAuth callback error:', err);
res.status(500).send(`
<!DOCTYPE html>
<html>
<head>
<title>Authentication Failed</title>
<link rel="stylesheet" href="/css/style.css">
<style>
body {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
background-color: var(--color-space-950);
color: var(--color-text-main);
text-align: center;
padding: 50px;
logger.error('[WebUI] OAuth flow completion error:', err);
} finally {
pendingOAuthFlows.delete(state);
}
h1 { color: var(--color-neon-red); }
</style>
</head>
<body>
<h1>Authentication Failed</h1>
<p>${err.message}</p>
</body>
</html>
`);
})
.catch((err) => {
logger.error('[WebUI] OAuth callback server error:', err);
pendingOAuthFlows.delete(state);
});
res.json({ status: 'ok', url });
} catch (error) {
logger.error('[WebUI] Error generating auth URL:', error);
res.status(500).json({ status: 'error', error: error.message });
}
});
/**
* Note: /oauth/callback route removed
* OAuth callbacks are now handled by the temporary server on port 51121
* (same as CLI) to match Google OAuth Console's authorized redirect URIs
*/
logger.info('[WebUI] Mounted at /');
}