-
-
-
+
+
+ Delete this account?
+
+ You will need to authorize it again to restore access.
+
+
+
+ Cancel
+ {
+ setDeleting(true);
+ void onDelete(account).finally(() => {
+ setDeleting(false);
+ setDeleteOpen(false);
+ });
+ }}
+ >
+ {deleting &&
+
+
+
+
);
}
-function Management({ managementKey, onLogout }: { managementKey: string; onLogout: () => void }) {
- const [accounts, setAccounts] = useState([]);
- const [loading, setLoading] = useState(true);
+function Dashboard({
+ managementKey,
+ initialAccounts,
+}: {
+ managementKey: string;
+ initialAccounts: AuthFile[];
+}) {
+ const [accounts, setAccounts] = useState(initialAccounts);
+ const [quotaCache, setQuotaCache] = useState(readQuotaCache);
+ const [now, setNow] = useState(0);
+ const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
- const [oauth, setOauth] = useState<{ url: string; state: string }>();
+ const [login, setLogin] = useState<{ state: string; url: string } | null>(null);
const [callbackUrl, setCallbackUrl] = useState('');
- const [oauthStatus, setOauthStatus] = useState('');
- const [adding, setAdding] = useState(false);
- const pollRef = useRef(undefined);
+ const [callbackLoading, setCallbackLoading] = useState(false);
- const loadAccounts = useCallback(async () => {
+ const reloadAccounts = async () => {
+ setLoading(true);
setError('');
try {
- setAccounts(await api.listAccounts(managementKey));
- } catch (loadError) {
- setError(errorMessage(loadError));
+ setAccounts(await listAuthFiles(managementKey));
+ } catch (reloadError) {
+ setError(reloadError instanceof Error ? reloadError.message : 'Failed to load accounts');
} finally {
setLoading(false);
}
- }, [managementKey]);
+ };
- const stopPolling = useCallback(() => {
- if (pollRef.current !== undefined) window.clearInterval(pollRef.current);
- pollRef.current = undefined;
+ useEffect(() => {
+ setNow(Date.now());
+ const timer = window.setInterval(() => setNow(Date.now()), 30_000);
+ return () => window.clearInterval(timer);
}, []);
useEffect(() => {
- void loadAccounts();
- return stopPolling;
- }, [loadAccounts, stopPolling]);
+ if (!login) return;
+ let stopped = false;
+ const poll = window.setInterval(() => {
+ void getLoginStatus(managementKey, login.state)
+ .then((status) => {
+ if (stopped || status.status === 'wait') return;
+ if (status.status === 'error') throw new Error(status.error || 'Authorization failed');
+ window.clearInterval(poll);
+ setLogin(null);
+ return listAuthFiles(managementKey).then(setAccounts);
+ })
+ .catch((pollError: unknown) => {
+ if (stopped) return;
+ window.clearInterval(poll);
+ setError(pollError instanceof Error ? pollError.message : 'Authorization failed');
+ setLogin(null);
+ });
+ }, 1000);
+ return () => {
+ stopped = true;
+ window.clearInterval(poll);
+ };
+ }, [login, managementKey]);
- function pollAuth(state: string) {
- stopPolling();
- pollRef.current = window.setInterval(async () => {
- try {
- const result = await api.authStatus(state, managementKey);
- if (result.status === 'ok') {
- stopPolling();
- setOauth(undefined);
- setCallbackUrl('');
- setOauthStatus('Account added.');
- setAdding(false);
- await loadAccounts();
- } else if (result.status === 'error') {
- stopPolling();
- setOauthStatus(result.error || 'Authorization failed.');
- setAdding(false);
- }
- } catch (pollError) {
- stopPolling();
- setOauthStatus(errorMessage(pollError));
- setAdding(false);
- }
- }, 2500);
- }
+ const storeQuota = (authIndex: string, data: unknown) => {
+ setQuotaCache((current) => {
+ const next = { ...current, [authIndex]: { data, fetchedAt: Date.now() } };
+ localStorage.setItem(quotaCacheStorage, JSON.stringify(next));
+ return next;
+ });
+ setNow(Date.now());
+ };
- async function addAccount() {
- setAdding(true);
- setOauthStatus('');
+ const removeAccount = async (account: AuthFile) => {
try {
- const result = await api.startCodexAuth(managementKey);
- if (!result.state) throw new Error('The server did not return an OAuth state.');
- setOauth({ url: result.url, state: result.state });
- window.open(result.url, '_blank', 'noopener,noreferrer');
- pollAuth(result.state);
- } catch (oauthError) {
- setOauthStatus(errorMessage(oauthError));
- setAdding(false);
+ await deleteAuthFile(managementKey, account.name);
+ setAccounts((current) => current.filter((item) => item.auth_index !== account.auth_index));
+ setQuotaCache((current) => {
+ const next = { ...current };
+ delete next[account.auth_index];
+ localStorage.setItem(quotaCacheStorage, JSON.stringify(next));
+ return next;
+ });
+ } catch (deleteError) {
+ setError(deleteError instanceof Error ? deleteError.message : 'Failed to delete account');
}
- }
+ };
- async function submitCallback(event: FormEvent) {
- event.preventDefault();
- if (!callbackUrl.trim()) return;
+ const beginLogin = async () => {
+ setError('');
try {
- await api.submitCallback(callbackUrl.trim(), managementKey);
- setOauthStatus('Callback submitted. Waiting for the account...');
- } catch (callbackError) {
- setOauthStatus(errorMessage(callbackError));
+ const session = await startCodexLogin(managementKey);
+ setLogin({ state: session.state, url: session.url });
+ window.open(session.url, '_blank', 'noopener,noreferrer');
+ } catch (loginError) {
+ setError(loginError instanceof Error ? loginError.message : 'Failed to start authorization');
}
- }
+ };
+
+ const stopLogin = async () => {
+ if (!login) return;
+ await cancelLogin(managementKey, login.state).catch(() => undefined);
+ setLogin(null);
+ };
return (
-
-
-
-
- Vibe Proxy
-
-
-
-
-
-
-
+
+
+
+
+
+ {account.name}
+
+ ) : (
+
+
+
+ {account.name}
+
+ )}
+
+
+
+ {plan && {plan[0].toUpperCase() + plan.slice(1)} }
+
+ {statusProblem ? (
+ account.status_message ||
+
+
+
+
- {account.statusMessage && {account.email || 'Email unavailable'}
- {status.label} +
+ {Array.from({ length: (identity || account.name).length }).map((_, index) => (
+ *
+ ))}
+
+ {identity || account.name}
+
+
-
-
+
Credential refresh
+
+ {account.last_refresh
+ ? new Date(account.last_refresh).toLocaleDateString()
+ : 'Not reported'}
+
{account.statusMessage}
} - {quota &&{quotaError}
} - - +
+
+ Quota refresh failed
+ {quotaError}
+
+ )}
+
+ {cachedQuota && windows.length > 0 && (
+
+
+
+
+
+ {quotaError && (
+
+
+
+ Quota
+
+
+
+ {windows.map((window) => (
+
+ )}
+
+ {cachedQuota && windows.length === 0 && (
+
+
+ {resetLabel(window) && (
+
+ ))}
+ {resetLabel(window)}
+ )}
+
+ {JSON.stringify(cachedQuota.data, null, 2)}
+
+ )}
+
+
+
+
+
+
-
+ {accounts.length === 0 ? null : (
+
-
)}
- {oauthStatus &&
- {loading ? (
-
OpenAI Codex
-Accounts
-Connect accounts and check their current usage limits.
+
+
+
-
-
-
- {oauth && (
-
- Finish authorization in the OpenAI window.
-
-
- If it did not open, open the authorization link.
-{oauthStatus}
} - {error &&{error}
} - -Loading accounts...
- ) : accounts.length === 0 ? (
-
-
+
+
+
+
+ }
+ >
+ Open sign-in
+
+
+
+
+
+ )}
+
+ {accounts.length === 0 ? (
+
+
+
+
+ No authorized accounts
+
+ Authorize and add your first account to start prompting.
+
+
+
+
+
+
+ ) : (
+ (null);
- function logout() {
- sessionStorage.removeItem(SESSION_KEY);
+ useEffect(() => {
+ if (!managementKey || accounts !== null) return;
+ let active = true;
+ void listAuthFiles(managementKey)
+ .then((files) => {
+ if (active) setAccounts(files);
+ })
+ .catch(() => {
+ if (!active) return;
+ sessionStorage.removeItem(managementKeyStorage);
+ setManagementKey('');
+ });
+ return () => {
+ active = false;
+ };
+ }, [accounts, managementKey]);
+
+ const logout = () => {
+ sessionStorage.removeItem(managementKeyStorage);
setManagementKey('');
- }
+ setAccounts(null);
+ };
- return managementKey ? (
- (path: string, managementKey: string, init?: RequestInit): Promise {
- const response = await fetch(`${API_ROOT}${path}`, {
+async function managementRequest(
+ managementKey: string,
+ path: string,
+ init?: RequestInit,
+): Promise {
+ const response = await fetch(`${managementBase}${path}`, {
...init,
headers: {
Authorization: `Bearer ${managementKey}`,
- 'Content-Type': 'application/json',
+ ...(init?.body ? { 'Content-Type': 'application/json' } : {}),
...init?.headers,
},
});
-
- const text = await response.text();
- let body: unknown;
- try {
- body = text ? JSON.parse(text) : undefined;
- } catch {
- body = text;
- }
-
+ const body = (await response.json().catch(() => null)) as
+ | ({ error?: string } & T)
+ | null;
if (!response.ok) {
- const detail =
- body && typeof body === 'object' && 'error' in body
- ? String((body as { error: unknown }).error)
- : typeof body === 'string'
- ? body
- : response.statusText;
- throw new Error(detail || `Request failed with HTTP ${response.status}`);
+ throw new Error(body?.error || `Request failed with status ${response.status}`);
}
-
return body as T;
}
-function isCodexAccount(account: CodexAccount): boolean {
- return [account.type, account.provider].some((value) => String(value || '').toLowerCase() === 'codex');
+export async function listAuthFiles(managementKey: string) {
+ const response = await managementRequest<{ files: AuthFile[] }>(
+ managementKey,
+ '/auth-files',
+ );
+ return response.files;
}
-export const api = {
- async listAccounts(managementKey: string): Promise {
- const result = await request<{ files?: CodexAccount[] }>('/auth-files', managementKey);
- return (result.files || [])
- .filter(isCodexAccount)
- .map((account) => ({
- ...account,
- email: typeof account.email === 'string' ? account.email.trim() : undefined,
- statusMessage: account.statusMessage || account.status_message,
- }));
- },
+export function deleteAuthFile(managementKey: string, name: string) {
+ return managementRequest<{ status: string }>(
+ managementKey,
+ `/auth-files?name=${encodeURIComponent(name)}`,
+ { method: 'DELETE' },
+ );
+}
- deleteAccount(name: string, managementKey: string) {
- return request(`/auth-files?name=${encodeURIComponent(name)}`, managementKey, {
- method: 'DELETE',
- });
- },
+export function startCodexLogin(managementKey: string) {
+ return managementRequest<{ status: string; url: string; state: string }>(
+ managementKey,
+ '/codex-auth-url?is_webui=true',
+ );
+}
- startCodexAuth(managementKey: string) {
- return request<{ url: string; state?: string }>('/codex-auth-url?is_webui=true', managementKey);
- },
+export function getLoginStatus(managementKey: string, state: string) {
+ return managementRequest<{ status: 'ok' | 'wait' | 'error'; error?: string }>(
+ managementKey,
+ `/get-auth-status?state=${encodeURIComponent(state)}`,
+ );
+}
- authStatus(state: string, managementKey: string) {
- return request<{ status: 'ok' | 'wait' | 'error'; error?: string }>(
- `/get-auth-status?state=${encodeURIComponent(state)}`,
- managementKey,
- );
- },
+export function cancelLogin(managementKey: string, state: string) {
+ return managementRequest<{ status: string; cancelled: boolean }>(
+ managementKey,
+ `/oauth-session?state=${encodeURIComponent(state)}`,
+ { method: 'DELETE' },
+ );
+}
- submitCallback(redirectUrl: string, managementKey: string) {
- return request('/oauth-callback', managementKey, {
- method: 'POST',
- body: JSON.stringify({ provider: 'codex', redirect_url: redirectUrl }),
- });
- },
+export function submitOAuthCallback(
+ managementKey: string,
+ state: string,
+ redirectUrl: string,
+) {
+ return managementRequest<{ status: string }>(managementKey, '/oauth-callback', {
+ method: 'POST',
+ body: JSON.stringify({ provider: 'codex', state, redirect_url: redirectUrl }),
+ });
+}
- getCodexQuota(authIndex: string, managementKey: string) {
- return request>('/codex-quota', managementKey, {
- method: 'POST',
- body: JSON.stringify({ auth_index: authIndex }),
- });
- },
-};
+export async function fetchCodexQuota(managementKey: string, authIndex: string) {
+ const response = await managementRequest<{
+ status_code: number;
+ body: string;
+ }>(managementKey, '/codex-quota', {
+ method: 'POST',
+ body: JSON.stringify({ auth_index: authIndex }),
+ });
+ if (response.status_code < 200 || response.status_code >= 300) {
+ throw new Error(`Quota provider returned status ${response.status_code}`);
+ }
+ try {
+ return JSON.parse(response.body) as unknown;
+ } catch {
+ throw new Error('Quota provider returned an invalid response');
+ }
+}
diff --git a/frontend/src/codexQuota.ts b/frontend/src/codexQuota.ts
deleted file mode 100644
index cabfd01..0000000
--- a/frontend/src/codexQuota.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-import { api, type CodexAccount } from './api';
-
-interface UsageWindow {
- used_percent?: unknown;
- usedPercent?: unknown;
- reset_at?: unknown;
- resetAt?: unknown;
- reset_after_seconds?: unknown;
- resetAfterSeconds?: unknown;
-}
-
-interface RateLimit {
- primary_window?: UsageWindow | null;
- primaryWindow?: UsageWindow | null;
- secondary_window?: UsageWindow | null;
- secondaryWindow?: UsageWindow | null;
-}
-
-function normalizeAuthIndex(value: unknown): string | null {
- if (typeof value === 'number' && Number.isFinite(value)) return value.toString();
- if (typeof value === 'string') return value.trim() || null;
- return null;
-}
-
-function normalizeNumberValue(value: unknown): number | null {
- if (typeof value === 'number' && Number.isFinite(value)) return value;
- if (typeof value === 'string' && value.trim()) {
- const parsed = Number(value.trim());
- return Number.isFinite(parsed) ? parsed : null;
- }
- return null;
-}
-
-function parseCodexUsagePayload(payload: unknown): Record | null {
- if (typeof payload === 'string' && payload.trim()) {
- try {
- return JSON.parse(payload) as Record;
- } catch {
- return null;
- }
- }
- return payload !== null && typeof payload === 'object'
- ? (payload as Record)
- : null;
-}
-
-export interface CodexQuota {
- planType: string | null;
- windows: Array<{ id: string; label: string; remaining: number | null; resetAt: number | null }>;
-}
-
-function resetAt(window: UsageWindow): number | null {
- const absolute = normalizeNumberValue(window.reset_at ?? window.resetAt);
- if (absolute !== null) return absolute < 1e12 ? absolute * 1000 : absolute;
- const offset = normalizeNumberValue(window.reset_after_seconds ?? window.resetAfterSeconds);
- return offset === null ? null : Date.now() + offset * 1000;
-}
-
-function addRateLimit(
- result: CodexQuota['windows'],
- limit: RateLimit | null | undefined,
- prefix: string,
- labels: [string, string],
-) {
- const windows = [limit?.primary_window ?? limit?.primaryWindow, limit?.secondary_window ?? limit?.secondaryWindow];
- windows.forEach((window, index) => {
- if (!window) return;
- const used = normalizeNumberValue(window.used_percent ?? window.usedPercent);
- result.push({
- id: `${prefix}-${index}`,
- label: labels[index],
- remaining: used === null ? null : Math.max(0, Math.min(100, 100 - used)),
- resetAt: resetAt(window),
- });
- });
-}
-
-export async function fetchCodexQuota(
- account: CodexAccount,
- managementKey: string,
-): Promise {
- const authIndex = normalizeAuthIndex(account.auth_index ?? account.authIndex);
- if (!authIndex) throw new Error('This account has no auth index, so quota cannot be queried.');
-
- const response = await api.getCodexQuota(authIndex, managementKey);
- const statusCode = Number(response.status_code || 0);
- if (statusCode < 200 || statusCode >= 300) {
- throw new Error(`Quota request failed with HTTP ${statusCode || 'unknown'}`);
- }
-
- const payload = parseCodexUsagePayload(response.body);
- if (!payload) throw new Error('The quota response was empty or invalid.');
-
- const source = payload;
- const windows: CodexQuota['windows'] = [];
- addRateLimit(
- windows,
- (source.rate_limit ?? source.rateLimit) as RateLimit | undefined,
- 'codex',
- ['5-hour limit', 'Weekly limit'],
- );
- addRateLimit(
- windows,
- (source.code_review_rate_limit ?? source.codeReviewRateLimit) as RateLimit | undefined,
- 'review',
- ['Code review 5-hour limit', 'Code review weekly limit'],
- );
-
- return {
- planType:
- typeof source.plan_type === 'string'
- ? source.plan_type
- : typeof source.planType === 'string'
- ? source.planType
- : typeof account.plan_type === 'string'
- ? account.plan_type
- : typeof account.planType === 'string'
- ? account.planType
- : null,
- windows,
- };
-}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index dec1c77..54118e9 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,12 +1,29 @@
+import './styles.css';
+
+import { BUILT_IN_THEMES, ThemeProvider } from '@methanium/ui';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
-import App from './App';
-import './styles/app.css';
-document.title = 'Vibe Proxy Accounts';
+import { App } from './App';
+
+const methaniumTheme = BUILT_IN_THEMES.filter((theme) => theme.id === 'methanium');
createRoot(document.getElementById('root')!).render(
-
+
,
);
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
new file mode 100644
index 0000000..3a76e8b
--- /dev/null
+++ b/frontend/src/styles.css
@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "@methanium/ui/index.css";
diff --git a/frontend/src/styles/app.css b/frontend/src/styles/app.css
deleted file mode 100644
index ec0d0c5..0000000
--- a/frontend/src/styles/app.css
+++ /dev/null
@@ -1,122 +0,0 @@
-:root {
- color: #19221e;
- background: #f2f5ef;
- font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
- font-synthesis: none;
- text-rendering: optimizeLegibility;
-}
-
-* { box-sizing: border-box; }
-body { margin: 0; min-width: 320px; min-height: 100vh; }
-button, input { font: inherit; }
-button { cursor: pointer; }
-button:disabled { cursor: not-allowed; opacity: 0.58; }
-a { color: #166347; }
-
-.login-shell {
- min-height: 100vh;
- display: grid;
- place-items: center;
- padding: 24px;
- background:
- radial-gradient(circle at 20% 15%, rgba(89, 150, 107, 0.18), transparent 30rem),
- radial-gradient(circle at 85% 80%, rgba(212, 173, 89, 0.2), transparent 28rem),
- #f2f5ef;
-}
-
-.login-card {
- width: min(100%, 430px);
- padding: 40px;
- border: 1px solid #d8ded5;
- border-radius: 24px;
- background: rgba(255, 255, 255, 0.88);
- box-shadow: 0 24px 80px rgba(39, 61, 49, 0.12);
- backdrop-filter: blur(16px);
-}
-
-.mark {
- width: 46px;
- height: 46px;
- display: grid;
- place-items: center;
- margin-bottom: 28px;
- border-radius: 14px;
- color: white;
- background: #185c43;
- font-family: Georgia, serif;
- font-size: 25px;
-}
-
-.mark.small { width: 32px; height: 32px; margin: 0; border-radius: 10px; font-size: 17px; }
-.eyebrow { margin: 0 0 8px; color: #527062; font-size: 12px; font-weight: 750; letter-spacing: 0.14em; text-transform: uppercase; }
-h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(38px, 6vw, 58px); font-weight: 500; letter-spacing: -0.035em; }
-.login-card h1 { font-size: 40px; }
-.lede { margin: 12px 0 28px; color: #64736b; line-height: 1.55; }
-label { display: block; margin-bottom: 8px; color: #34473e; font-size: 13px; font-weight: 700; }
-input { width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid #cbd4cd; border-radius: 10px; color: #19221e; background: white; outline: none; }
-input:focus { border-color: #287457; box-shadow: 0 0 0 3px rgba(40, 116, 87, 0.12); }
-
-.primary, .secondary-button, .danger, .text-button {
- min-height: 42px;
- padding: 0 17px;
- border-radius: 10px;
- border: 1px solid transparent;
- font-weight: 750;
-}
-.primary { color: white; background: #185c43; box-shadow: 0 8px 18px rgba(24, 92, 67, 0.18); }
-.primary:hover { background: #104d37; }
-.wide { width: 100%; margin-top: 18px; }
-.secondary-button { color: #245540; border-color: #cbd7d0; background: #f7faf7; }
-.danger { min-height: 36px; padding: 0 12px; color: #9c3f39; border-color: #ead1ce; background: #fff9f8; }
-.text-button { color: #52655b; background: transparent; }
-.form-error { margin: 12px 0 0; color: #a43f37; font-size: 14px; line-height: 1.45; }
-
-.management-shell { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding-bottom: 64px; }
-.topbar { height: 82px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #d9dfd7; }
-.brand { display: flex; align-items: center; gap: 11px; color: #213b2f; font-weight: 800; text-decoration: none; }
-.page-intro { display: flex; align-items: end; justify-content: space-between; gap: 28px; padding: 72px 0 38px; }
-.page-intro .lede { margin-bottom: 0; }
-.oauth-panel { display: grid; grid-template-columns: 1fr 1.2fr; gap: 28px; margin-bottom: 20px; padding: 22px; border: 1px solid #bed3c6; border-radius: 16px; background: #e9f3ec; }
-.oauth-panel p { margin: 7px 0 0; color: #53675c; line-height: 1.5; }
-.inline-form { display: flex; gap: 8px; }
-.inline-form .secondary-button { flex: 0 0 auto; }
-.notice { padding: 12px 15px; border-radius: 10px; color: #285942; background: #e6f1e9; }
-.account-list { display: grid; gap: 14px; }
-
-.account-card { padding: 24px; border: 1px solid #d6ddd5; border-radius: 18px; background: #fff; box-shadow: 0 8px 30px rgba(39, 61, 49, 0.055); }
-.account-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
-.account-identity { min-width: 0; display: flex; align-items: center; gap: 14px; }
-.avatar { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #275c46; background: #dcebe1; font-weight: 800; }
-.account-card h2 { overflow: hidden; margin: 0 0 5px; font-size: 17px; text-overflow: ellipsis; }
-.status { display: inline-flex; align-items: center; gap: 5px; color: #557067; font-size: 12px; font-weight: 750; text-transform: capitalize; }
-.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
-.status.good { color: #248052; }
-.status.bad { color: #b34c43; }
-.status.muted { color: #7d837f; }
-.account-message { margin: 14px 0 0; color: #a43f37; font-size: 14px; }
-.account-card > .secondary-button { margin-top: 18px; }
-
-.quota { display: grid; gap: 16px; margin-top: 22px; padding: 20px; border-radius: 14px; background: #f4f7f3; }
-.plan { width: fit-content; padding: 4px 9px; border-radius: 999px; color: #725824; background: #f3e6bd; font-size: 11px; font-weight: 800; text-transform: uppercase; }
-.quota-row { display: grid; gap: 7px; }
-.quota-label { display: flex; justify-content: space-between; gap: 20px; font-size: 13px; font-weight: 700; }
-.meter { height: 7px; overflow: hidden; border-radius: 999px; background: #dbe2dc; }
-.meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #d5a943, #2d855e); transition: width 300ms ease; }
-.quota small { color: #748078; }
-.secondary { color: #68756e; }
-.empty { padding: 64px 24px; border: 1px dashed #c9d2ca; border-radius: 18px; text-align: center; color: #68756e; }
-.empty h2 { margin: 0 0 8px; color: #263b31; font-family: Georgia, serif; font-size: 25px; font-weight: 500; }
-.empty p { margin: 0; }
-
-@media (max-width: 700px) {
- .management-shell { width: min(100% - 28px, 1120px); }
- .topbar { height: 68px; }
- .page-intro { align-items: stretch; flex-direction: column; padding: 48px 0 28px; }
- .page-intro .primary { width: 100%; }
- .oauth-panel { grid-template-columns: 1fr; }
- .inline-form { flex-direction: column; }
- .account-card { padding: 19px; }
- .account-head { align-items: stretch; flex-direction: column; }
- .danger { align-self: flex-start; }
- .login-card { padding: 30px 24px; }
-}
diff --git a/frontend/src/vite-env.d.ts b/frontend/src/vite-env.d.ts
index 11f02fe..dbb4c62 100644
--- a/frontend/src/vite-env.d.ts
+++ b/frontend/src/vite-env.d.ts
@@ -1 +1,3 @@
///
No Codex accounts yet
-Add an OpenAI account to start routing Codex requests.
+ {error && ( +
+
+ )}
+
+ {login && (
+
+ Management request failed
+ {error}
- ) : (
- accounts.map((account) => (
+
+
+ If the browser cannot easily return, paste the entire redirected URL below.
+
+
+ setCallbackUrl(event.target.value)}
+ placeholder="http://localhost:1455/auth/callback?code=...&state=..."
+ aria-label="OAuth redirect URL"
+ />
+
+
+
+
+ {accounts.map((account) => (
+ )}
);
}
-export default function App() {
- const [managementKey, setManagementKey] = useState(() => sessionStorage.getItem(SESSION_KEY) || '');
+export function App() {
+ const [managementKey, setManagementKey] = useState(
+ () => sessionStorage.getItem(managementKeyStorage) || ''
+ );
+ const [accounts, setAccounts] = useState
+ {
+ const trimmed = key.trim();
+ const files = await listAuthFiles(trimmed);
+ sessionStorage.setItem(managementKeyStorage, trimmed);
+ setManagementKey(trimmed);
+ setAccounts(files);
+ }}
+ />
+ ) : accounts === null ? (
+
+
+ ) : (
+
);
}
diff --git a/frontend/src/api.ts b/frontend/src/api.ts
index 1c8e7ac..6c4791a 100644
--- a/frontend/src/api.ts
+++ b/frontend/src/api.ts
@@ -1,95 +1,113 @@
-const API_ROOT = '/v0/management';
+const managementBase = '/v0/management';
-export interface CodexAccount {
+export type AuthFile = {
+ id: string;
+ auth_index: string;
name: string;
- type?: string;
- provider?: string;
+ label?: string;
email?: string;
+ account?: string;
+ account_type?: string;
+ status?: string;
+ status_message?: string;
disabled?: boolean;
unavailable?: boolean;
- status?: string;
- statusMessage?: string;
- status_message?: string;
- authIndex?: string | number | null;
- auth_index?: string | number | null;
- [key: string]: unknown;
-}
+ success?: number;
+ failed?: number;
+ last_refresh?: string;
+ updated_at?: string;
+ id_token?: {
+ plan_type?: string;
+ chatgpt_plan_type?: string;
+ email?: string;
+ };
+};
-async function request