|
| 1 | +/** |
| 2 | + * Opt-in Anthropic OAuth account pool controls (#294). |
| 3 | + * Experimental — shows a strong warning because the feature is not battle-tested. |
| 4 | + */ |
| 5 | +import { useCallback, useEffect, useState } from "react"; |
| 6 | +import { useT } from "../../i18n/shared"; |
| 7 | + |
| 8 | +type PoolState = { |
| 9 | + enabled: boolean; |
| 10 | + threshold: number; |
| 11 | +}; |
| 12 | + |
| 13 | +export default function AnthropicAccountPoolSettings({ |
| 14 | + apiBase, |
| 15 | + accountCount, |
| 16 | +}: { |
| 17 | + apiBase: string; |
| 18 | + accountCount: number; |
| 19 | +}) { |
| 20 | + const t = useT(); |
| 21 | + const [state, setState] = useState<PoolState | null>(null); |
| 22 | + const [draft, setDraft] = useState("80"); |
| 23 | + const [saving, setSaving] = useState(false); |
| 24 | + const [error, setError] = useState<string | null>(null); |
| 25 | + const [loadError, setLoadError] = useState(false); |
| 26 | + |
| 27 | + useEffect(() => { |
| 28 | + let cancelled = false; |
| 29 | + const ac = new AbortController(); |
| 30 | + void (async () => { |
| 31 | + try { |
| 32 | + const res = await fetch(`${apiBase}/api/oauth/accounts/pool?provider=anthropic`, { |
| 33 | + signal: ac.signal, |
| 34 | + }); |
| 35 | + if (!res.ok) throw new Error("load"); |
| 36 | + const json = await res.json() as { enabled?: boolean; autoSwitchThreshold?: number }; |
| 37 | + if (cancelled) return; |
| 38 | + const nextEnabled = json.enabled === true; |
| 39 | + const nextThreshold = typeof json.autoSwitchThreshold === "number" ? json.autoSwitchThreshold : 80; |
| 40 | + setState({ enabled: nextEnabled, threshold: nextThreshold }); |
| 41 | + setDraft(String(nextThreshold)); |
| 42 | + setLoadError(false); |
| 43 | + } catch { |
| 44 | + if (cancelled || ac.signal.aborted) return; |
| 45 | + setLoadError(true); |
| 46 | + } |
| 47 | + })(); |
| 48 | + return () => { |
| 49 | + cancelled = true; |
| 50 | + ac.abort(); |
| 51 | + }; |
| 52 | + }, [apiBase]); |
| 53 | + |
| 54 | + const save = useCallback(async (nextEnabled: boolean, nextThreshold: number) => { |
| 55 | + setSaving(true); |
| 56 | + setError(null); |
| 57 | + try { |
| 58 | + const res = await fetch(`${apiBase}/api/oauth/accounts/pool`, { |
| 59 | + method: "PUT", |
| 60 | + headers: { "content-type": "application/json" }, |
| 61 | + body: JSON.stringify({ |
| 62 | + provider: "anthropic", |
| 63 | + enabled: nextEnabled, |
| 64 | + autoSwitchThreshold: nextThreshold, |
| 65 | + }), |
| 66 | + }); |
| 67 | + if (!res.ok) throw new Error("save"); |
| 68 | + setState({ enabled: nextEnabled, threshold: nextThreshold }); |
| 69 | + setDraft(String(nextThreshold)); |
| 70 | + } catch { |
| 71 | + setError(t("anthropicPool.saveFailed")); |
| 72 | + } finally { |
| 73 | + setSaving(false); |
| 74 | + } |
| 75 | + }, [apiBase, t]); |
| 76 | + |
| 77 | + const enabled = state?.enabled === true; |
| 78 | + const threshold = state?.threshold ?? 80; |
| 79 | + const loading = state === null && !loadError; |
| 80 | + // Always allow turning the pool off; only block enabling when fewer than 2 accounts. |
| 81 | + const toggleDisabled = loading || saving || loadError || (!enabled && accountCount < 2); |
| 82 | + |
| 83 | + return ( |
| 84 | + <div className="card" style={{ marginTop: 12 }} aria-busy={loading || saving}> |
| 85 | + <div className="card-row" style={{ alignItems: "flex-start", gap: 12 }}> |
| 86 | + <div style={{ flex: 1 }}> |
| 87 | + <strong>{t("anthropicPool.title")}</strong> |
| 88 | + <div className="card-sub" style={{ marginTop: 4 }}> |
| 89 | + {loadError |
| 90 | + ? t("anthropicPool.loadFailed") |
| 91 | + : loading |
| 92 | + ? t("common.loading") |
| 93 | + : enabled |
| 94 | + ? t("anthropicPool.enabledDesc", { threshold }) |
| 95 | + : t("anthropicPool.disabledDesc")} |
| 96 | + </div> |
| 97 | + </div> |
| 98 | + <label className="toggle" style={{ display: "inline-flex", alignItems: "center", gap: 8 }}> |
| 99 | + <input |
| 100 | + type="checkbox" |
| 101 | + checked={enabled} |
| 102 | + disabled={toggleDisabled} |
| 103 | + onChange={(event) => { |
| 104 | + const next = event.target.checked; |
| 105 | + void save(next, threshold); |
| 106 | + }} |
| 107 | + /> |
| 108 | + <span>{enabled ? t("anthropicPool.on") : t("anthropicPool.off")}</span> |
| 109 | + </label> |
| 110 | + </div> |
| 111 | + |
| 112 | + <div |
| 113 | + role="alert" |
| 114 | + className="card-sub" |
| 115 | + style={{ |
| 116 | + marginTop: 10, |
| 117 | + padding: "8px 10px", |
| 118 | + border: "1px solid var(--border, #c9a227)", |
| 119 | + borderRadius: 6, |
| 120 | + background: "color-mix(in srgb, var(--warn, #c9a227) 12%, transparent)", |
| 121 | + }} |
| 122 | + > |
| 123 | + {t("anthropicPool.experimentalWarning")} |
| 124 | + </div> |
| 125 | + |
| 126 | + {accountCount < 2 && ( |
| 127 | + <div className="card-sub" style={{ marginTop: 8 }}>{t("anthropicPool.needTwoAccounts")}</div> |
| 128 | + )} |
| 129 | + |
| 130 | + {enabled && ( |
| 131 | + <label className="field" style={{ display: "block", marginTop: 12 }}> |
| 132 | + <span className="field-label">{t("anthropicPool.threshold")}</span> |
| 133 | + <input |
| 134 | + className="input mono" |
| 135 | + type="number" |
| 136 | + min={0} |
| 137 | + max={100} |
| 138 | + step={1} |
| 139 | + value={draft} |
| 140 | + disabled={saving} |
| 141 | + aria-label={t("anthropicPool.thresholdAria")} |
| 142 | + onChange={(event) => setDraft(event.target.value)} |
| 143 | + onBlur={() => { |
| 144 | + const parsed = Number(draft); |
| 145 | + if (!Number.isInteger(parsed) || parsed < 0 || parsed > 100) { |
| 146 | + setDraft(String(threshold)); |
| 147 | + setError(t("anthropicPool.thresholdInvalid")); |
| 148 | + return; |
| 149 | + } |
| 150 | + if (parsed !== threshold) void save(true, parsed); |
| 151 | + }} |
| 152 | + /> |
| 153 | + <div className="card-sub" style={{ marginTop: 4 }}>{t("anthropicPool.thresholdHelp")}</div> |
| 154 | + </label> |
| 155 | + )} |
| 156 | + |
| 157 | + {error && ( |
| 158 | + <div role="alert" className="card-sub" style={{ marginTop: 8, color: "var(--danger, #c44)" }}> |
| 159 | + {error} |
| 160 | + </div> |
| 161 | + )} |
| 162 | + </div> |
| 163 | + ); |
| 164 | +} |
0 commit comments