Pablo Gonzalez
b238cd7fbc
Ollama Cloud's /settings page switched shapes for cost-based plans: parse
the 'Monthly usage $X of $Y used' row as a monthly window with a symmetric
'$X / $Y' money label that reads correctly in both used/remaining display
modes, and surface the Extra usage credits balance as a balance-only
credits_balance window matching the Codex/DeepSeek credits treatment
('Credits Balance' in the UI), omitted when the balance is $0. The VS Code
credential validation accepts the new page shape and the Settings cookie
placeholder shows the two-cookie format. Web and VS Code parsers kept in
sync per quota DOCUMENTATION.md.
57 lines
4.6 KiB
TypeScript
57 lines
4.6 KiB
TypeScript
import React from 'react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { toast } from '@/components/ui';
|
|
import { useI18n } from '@/lib/i18n';
|
|
import { runtimeFetch } from '@/lib/runtime-fetch';
|
|
|
|
type ProviderId = 'exe-dev' | 'ollama-cloud' | 'cursor';
|
|
type Status = { configured: boolean; secretMasked?: string };
|
|
type CredentialPayload = { usageToken?: string; cookie?: string; accessToken?: string; refreshToken?: string };
|
|
const EXE_DEV_TOKEN_COMMAND = `ssh exe.dev "ssh-key generate-api-key --label=openchamber --exp=30d --cmds='billing credits usage'"`;
|
|
|
|
export const QuotaCredentials: React.FC<{ providerId: ProviderId; providerName: string }> = ({ providerId, providerName }) => {
|
|
const { t } = useI18n();
|
|
const [status, setStatus] = React.useState<Status | null>(null);
|
|
const [values, setValues] = React.useState<CredentialPayload>({});
|
|
const [busy, setBusy] = React.useState(false);
|
|
const route = `/api/quota/credentials/${providerId}`;
|
|
React.useEffect(() => { void runtimeFetch(route).then(async (response) => {
|
|
if (!response.ok) throw new Error();
|
|
const next: Status = await response.json();
|
|
setStatus(next); setValues({});
|
|
}).catch(() => setStatus({ configured: false })); }, [route]);
|
|
const request = async (path: string, method: string, body?: CredentialPayload) => {
|
|
setBusy(true);
|
|
try {
|
|
const response = await runtimeFetch(path, { method, headers: body ? { 'Content-Type': 'application/json' } : undefined, body: body ? JSON.stringify(body) : undefined });
|
|
const payload = await response.json().catch(() => null);
|
|
if (!response.ok) throw new Error(payload?.error);
|
|
if (payload?.configured !== undefined) setStatus(payload);
|
|
setValues({});
|
|
toast.success(t('settings.providers.page.quotaCredentials.saved', { provider: providerName }));
|
|
} catch (error) { toast.error(error instanceof Error && error.message ? error.message : t('settings.providers.page.openCodeGo.saveFailed')); }
|
|
finally { setBusy(false); }
|
|
};
|
|
const field = (name: keyof CredentialPayload, label: string, placeholder: string) => <label className="block typography-ui-label text-foreground">{label}<Input className="mt-1 h-7 font-mono text-xs" type="password" autoComplete="off" value={values[name] ?? ''} onChange={(event) => setValues((current) => ({ ...current, [name]: event.target.value }))} placeholder={status?.secretMasked ?? placeholder} /></label>;
|
|
return <div data-settings-item={`usage.${providerId}-credentials`} className="mb-8">
|
|
<div className="mb-1 px-1"><h3 className="typography-ui-header font-medium text-foreground">{providerName}</h3></div>
|
|
<section className="space-y-3 px-2 pb-2 pt-0">
|
|
{providerId === 'exe-dev' && <div className="space-y-1.5">
|
|
<p className="typography-meta text-muted-foreground">{t('settings.providers.page.quotaCredentials.exeDevTokenInstructions')}</p>
|
|
<code className="typography-code block whitespace-pre-wrap break-all rounded bg-muted/50 px-2 py-1.5 text-xs text-foreground">{EXE_DEV_TOKEN_COMMAND}</code>
|
|
</div>}
|
|
{providerId === 'ollama-cloud' && field('cookie', t('settings.providers.page.openCodeGo.authCookie'), 'aid=...; __Secure-session=...')}
|
|
{providerId === 'exe-dev' && field('usageToken', t('settings.providers.page.quotaCredentials.usageToken'), t('settings.providers.page.quotaCredentials.tokenPlaceholder'))}
|
|
{providerId === 'cursor' && field('accessToken', t('settings.providers.page.quotaCredentials.accessToken'), t('settings.providers.page.quotaCredentials.tokenPlaceholder'))}
|
|
{providerId === 'cursor' && field('refreshToken', t('settings.providers.page.quotaCredentials.refreshToken'), t('settings.providers.page.quotaCredentials.tokenPlaceholder'))}
|
|
<div className="flex flex-wrap gap-2">
|
|
<Button size="xs" disabled={busy} onClick={() => request(route, 'PUT', values)}>{status?.configured ? t('settings.providers.page.openCodeGo.replace') : t('settings.providers.page.openCodeGo.save')}</Button>
|
|
{status?.configured && <Button variant="outline" size="xs" disabled={busy} onClick={() => request(`${route}/validate`, 'POST')}>{t('settings.providers.page.openCodeGo.validate')}</Button>}
|
|
{providerId === 'cursor' && <Button variant="outline" size="xs" disabled={busy} onClick={() => request(`${route}/import`, 'POST')}>{t('settings.providers.page.actions.connect')}</Button>}
|
|
{status?.configured && <Button variant="destructive" size="xs" disabled={busy} onClick={() => request(route, 'DELETE')}>{t('settings.providers.page.openCodeGo.delete')}</Button>}
|
|
</div>
|
|
</section>
|
|
</div>;
|
|
};
|