clauderipple 0.7.0 → 0.8.0

package/dist/ui/app.js

@@ -56,6 +56,15 @@ async function configRequest(next) {
   return out;
 }
 
+// A save sends the whole config, so it starts from what the router holds now rather than the copy
+// this screen loaded: the router writes config.json too (measured wires and effort ladders, hand
+// edits), and a save built on an old copy put all of that back. Seen 2026-10-02: adding a provider
+// restored three OpenCode ladders realigned five hours earlier, so the app's effort menus never narrowed.
+async function latestConfig() {
+  try { currentConfig = await api("/api/config"); } catch { /* the save that follows reports an unreachable router */ }
+  return currentConfig;
+}
+
 function modelsOf(provider) {
   const value = (provider && provider.models) || [];
   return value.map((model) => typeof model === "string" ? { id: model, name: model } : model).filter((model) => model && model.id);
@@ -201,7 +210,7 @@ async function refreshHealth() {
   if (clientsLoaded) renderClients();
   const details = $("#health-details");
   details.replaceChildren(
-    el("div", { class: "row" }, [el("span", { class: "k", text: t("health.version") }), el("span", { class: "v", text: status.version })]),
+    versionRow(),
     // Which files answer, and since when: the only way to see that an update actually replaced the router.
     ...(status.runtime ? [el("div", { class: "row" }, [el("span", { class: "k", text: t("health.runtime") }), el("span", { class: "v", text: `${status.runtime.router || "?"} · ${new Date(status.runtime.startedAt).toLocaleString()}` })])] : []),
     el("div", { class: "row" }, [el("span", { class: "k", text: t("health.routes") }), el("span", { class: "v", text: String(status.routes) })]),
@@ -209,6 +218,57 @@ async function refreshHealth() {
   );
 }
 
+// The update check runs on a click, not with the 5-second refresh: it asks the npm registry. What an
+// update means depends on how this copy was installed, so the router's CLI decides and runs it; the
+// router restarts on the new version and the served-files check above reloads this page.
+let updateState = { busy: false, check: null };
+function versionRow() {
+  const check = updateState.check;
+  const children = [el("span", { class: "k", text: t("health.version") }), el("span", { class: "v", text: status.version })];
+  if (check && check.newer && check.kind === "checkout") {
+    children.push(el("span", { class: "small", text: t("update.checkout", { latest: check.latest }) }));
+  } else {
+    const action = check && check.newer;
+    const label = updateState.busy ? t("update.checking")
+      : check && check.running ? t("update.running")
+      : action ? (check.kind === "packaged" ? t("update.download", { latest: check.latest }) : t("update.install", { latest: check.latest }))
+      : t("update.check");
+    const button = el("button", { class: "btn secondary compact", type: "button", text: label });
+    button.disabled = updateState.busy || Boolean(check && check.running);
+    button.addEventListener("click", () => void (action ? startUpdate() : checkForUpdate()));
+    children.push(button);
+    if (check && !check.newer && !updateState.busy) children.push(el("span", { class: "small", text: t("update.latest") }));
+  }
+  return el("div", { class: "row", id: "health-version-row" }, children);
+}
+function renderVersionRow() {
+  const row = $("#health-version-row");
+  if (row) row.replaceWith(versionRow());
+}
+async function checkForUpdate() {
+  updateState = { busy: true, check: updateState.check };
+  renderVersionRow();
+  try { updateState = { busy: false, check: await api("/api/update") }; }
+  catch (error) { updateState = { busy: false, check: null }; toast(t("update.checkFailed"), true, error.message); }
+  renderVersionRow();
+}
+async function startUpdate() {
+  const check = updateState.check;
+  if (check.kind === "packaged") { window.open("https://github.com/PBJ-2/clauderipple/releases/latest", "_blank", "noreferrer"); return; }
+  if (!confirm(t("update.confirm", { latest: check.latest, current: check.current }))) return;
+  updateState = { busy: true, check };
+  renderVersionRow();
+  try {
+    await api("/api/update", { method: "POST" });
+    updateState = { busy: false, check: { ...check, running: true } };
+    toast(t("update.started"));
+  } catch (error) {
+    updateState = { busy: false, check };
+    toast(t("update.failed"), true, error.message);
+  }
+  renderVersionRow();
+}
+
 function quotaLine(name) {
   const quota = status && status.chatgpt && status.chatgpt.quota && status.chatgpt.quota[name];
   const primary = quota && quota.rate_limits && quota.rate_limits.primary;
@@ -299,24 +359,38 @@ function credentialLine(name) {
   return el("div", { class: `small ${resting ? "bad-text" : ""}`.trim(), text: parts.join(" · ") });
 }
 
-function providerState(name, provider) {
+/**
+ * One verdict on a provider's connection, which the badge and the detail heading both show. They
+ * used to decide separately: the heading kept a failure from a restart long after the badge had
+ * healed, and both read a check still running as "disconnected" (Gemini, 2026-10-02).
+ */
+function providerConnection(name) {
   const live = status && status.providers && status.providers[name];
   // Reaching the host is not the same as being able to use it. A ChatGPT provider with no
   // credentials would otherwise read "Connected" and send the user off believing it works.
-  if (live && live.needsLogin) return badge("warn", t("providerStatus.loginNeeded"));
+  if (live && live.needsLogin) return { level: "warn", text: t("providerStatus.loginNeeded") };
+  if (live && live.needsVerification) return { level: "warn", text: t("providers.googleVerifyNeeded") };
   const state = stateFor(name);
+  if (state && state.pending) return { level: "warn", text: t("providerStatus.checking") };
   // A probe is the better evidence — it actually called the provider — but only while it is fresh.
   // One caught mid-restart used to sit there in red for the rest of the session, while the poll
   // every five seconds said the provider was fine and a fresh probe agreed. After PROBE_TTL_MS the
   // live reading takes over, so a stale failure heals itself instead of needing a manual re-check.
   if (state && !probeIsStale(state)) {
-    return state.ok ? badge("ok", t("providerStatus.connected"))
-      : state.auth === "bad-key" ? badge("bad", t("providerStatus.keyNeeded"))
-      : badge("bad", t("providerStatus.disconnected"));
+    if (state.ok) return { level: "ok", text: t("providerStatus.connected") };
+    // The key was accepted and the plan refused: saying "check your key" sends the operator to the
+    // one thing that is not wrong. Measured 2026-09-22 against OpenCode's free-tier 403.
+    if (state.auth === "not-entitled") return { level: "bad", text: t("providerStatus.notEntitled") };
+    if (state.auth === "bad-key") return { level: "bad", text: t("providerStatus.keyNeeded") };
+    return { level: "bad", text: t("providerStatus.disconnected") };
   }
-  if (live) return live.reachable ? badge("ok", t("providerStatus.connected")) : badge("bad", t("providerStatus.disconnected"));
-  if (state) return badge("bad", t("providerStatus.disconnected"));
-  return badge("warn", t("providerStatus.checking"));
+  if (live) return live.reachable ? { level: "ok", text: t("providerStatus.connected") } : { level: "bad", text: t("providerStatus.disconnected") };
+  if (state) return { level: "bad", text: t("providerStatus.disconnected") };
+  return { level: "warn", text: t("providerStatus.checking") };
+}
+function providerState(name) {
+  const verdict = providerConnection(name);
+  return badge(verdict.level, verdict.text);
 }
 function renderHealthProviders() {
   const box = $("#health-providers");
@@ -330,8 +404,8 @@ function renderHealthProviders() {
     const line = el("div", { class: "provider-status" }, [
       el("strong", { text: name }),
       providerState(name, provider),
-      live && live.needsLogin ? chatgptLoginButton(() => renderHealthProviders()) : null,
-      live && live.needsLogin && chatgptLoginMessage ? el("span", { class: "small", text: chatgptLoginMessage }) : null,
+      live && live.needsLogin && provider.type === "chatgpt" ? chatgptLoginButton(() => renderHealthProviders()) : null,
+      live && live.needsLogin && provider.type === "chatgpt" && chatgptLoginMessage ? el("span", { class: "small", text: chatgptLoginMessage }) : null,
     ].filter(Boolean));
     const quota = quotaLine(name);
     if (quota) line.appendChild(el("div", { class: "small", text: quota }));
@@ -352,6 +426,7 @@ function renderHealthProviders() {
 }
 
 let agentTitleBusy = false;
+let statusModBusy = false;
 let codexBusy = false;
 function renderClients() {
   if (!currentConfig || !status) return;
@@ -377,6 +452,13 @@ function renderClients() {
   agentButton.className = agentEnabled ? "btn secondary" : "btn";
   agentButton.disabled = agentTitleBusy;
   agentButton.onclick = () => toggleAgentTitle(!agentEnabled);
+  const modEnabled = Boolean(status.statusMod);
+  $("#client-status-mod-rows").replaceChildren(el("div", { class: "row" }, [el("span", { class: "k", text: t("picker.state") }), modEnabled ? badge("ok", t("agentTitle.on")) : el("span", { class: "small", text: t("agentTitle.off") })]));
+  const modButton = $("#client-status-mod-toggle");
+  modButton.textContent = modEnabled ? t("statusMod.turnOff") : t("statusMod.turnOn");
+  modButton.className = modEnabled ? "btn secondary" : "btn";
+  modButton.disabled = statusModBusy;
+  modButton.onclick = () => toggleStatusMod(!modEnabled);
   const toolsLimited = Boolean(currentConfig.cli && currentConfig.cli.limitWorkerTools);
   $("#client-worker-tools-rows").replaceChildren(el("div", { class: "row" }, [el("span", { class: "k", text: t("picker.state") }), toolsLimited ? badge("ok", t("workerTools.on")) : el("span", { class: "small", text: t("workerTools.off") })]));
   const toolsButton = $("#client-worker-tools-toggle");
@@ -470,7 +552,7 @@ function renderModelSlots() {
 
 async function saveModelSlots() {
   if (!currentConfig) return;
-  const next = clone(currentConfig);
+  const next = clone(await latestConfig());
   // Every slot is recorded, empty ones included. A select put back to "default (Claude)" has to
   // remove the env key, and the router tells "clear this" from "leave this alone" by whether the
   // slot is present at all — so dropping empty values here would make the choice a silent no-op.
@@ -499,7 +581,7 @@ function clientPickerSelections() {
 }
 async function saveClientPickerModels() {
   if (!currentConfig) return;
-  const next = applyPickerSelections(clone(currentConfig), clientPickerSelections());
+  const next = applyPickerSelections(clone(await latestConfig()), clientPickerSelections());
   try { await configRequest(next); currentConfig = next; toast(t("slots.saved")); } catch (error) { toast(t("common.saveFailed"), true, error.message); }
 }
 function pickerModeOn() {
@@ -543,9 +625,22 @@ async function toggleAgentTitle(enabled) {
     void refreshHealth();
   }
 }
+async function toggleStatusMod(enabled) {
+  if (statusModBusy) return;
+  statusModBusy = true;
+  try {
+    await api("/api/status-mod", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ enabled }) });
+    toast(t("statusMod.saved"));
+  } catch (error) {
+    toast(t("common.actionFailed"), true, error.message);
+  } finally {
+    statusModBusy = false;
+    void refreshHealth();
+  }
+}
 async function toggleWorkerTools(enabled) {
   if (!currentConfig) return;
-  const next = clone(currentConfig);
+  const next = clone(await latestConfig());
   next.cli = { ...(next.cli || {}), limitWorkerTools: enabled };
   try {
     await configRequest(next);
@@ -756,7 +851,7 @@ function scheduleSlotsSave() {
 async function saveSlots() {
   if (!currentConfig || slotsSaving) return;
   slotsSaving = true;
-  const next = clone(currentConfig);
+  const next = clone(await latestConfig());
   const routes = {};
   const seen = new Set();
   for (const row of $all("#slots-table tbody tr")) {
@@ -780,15 +875,6 @@ async function saveSlots() {
 
 // ---- Providers ----------------------------------------------------------------------
 
-function statusText(state) {
-  if (!state) return t("providerStatus.checking");
-  if (state.ok) return t("providerStatus.connected");
-  // The key was accepted and the plan refused: saying "check your key" sends the operator to the
-  // one thing that is not wrong. Measured 2026-09-22 against OpenCode's free-tier 403.
-  if (state.auth === "not-entitled") return t("providerStatus.notEntitled");
-  if (state.auth === "bad-key") return t("providerStatus.keyNeeded");
-  return t("providerStatus.disconnected");
-}
 async function probeProvider(name, provider, onComplete) {
   probeStates.set(name, { pending: true });
   renderHealthProviders();
@@ -796,6 +882,8 @@ async function probeProvider(name, provider, onComplete) {
     const headers = provider.headers || {};
     const body = provider.type === "anthropic"
       ? { type: "anthropic", auth: provider.auth, ...(provider.auth === "api-key" && provider.apiKey ? { apiKey: provider.apiKey } : {}) }
+      : provider.type === "google"
+      ? { type: "google", auth: provider.auth, ...(provider.apiKey ? { apiKey: provider.apiKey } : {}), ...(provider.url ? { url: provider.url } : {}) }
       : {
         type: provider.type,
         url: provider.url,
@@ -805,7 +893,8 @@ async function probeProvider(name, provider, onComplete) {
         // The router reads the preset's fallback list to tag each discovered model with the wire it
         // speaks, since /models reports ids alone and one plan can serve several wires.
         preset: provider.preset,
-        probeModel: provider.probeModel || (provider.preset && presetById(provider.preset) && (presetById(provider.preset).fallbackModels || [])[0] && presetById(provider.preset).fallbackModels[0].id),
+        // Without a preset the provider's own first model is the only id known to exist there.
+        probeModel: provider.probeModel || (provider.preset && presetById(provider.preset) && (presetById(provider.preset).fallbackModels || [])[0] && presetById(provider.preset).fallbackModels[0].id) || (modelsOf(provider)[0] && modelsOf(provider)[0].id),
         // Some vendors refuse a request without it rather than merely losing the cache, so a test
         // that leaves it out reports a broken provider that works perfectly.
         sessionHeader: provider.sessionHeader || (provider.preset && presetById(provider.preset) && presetById(provider.preset).sessionHeader),
@@ -904,6 +993,7 @@ let providerDetailGeneration = 0;
 function providerKind(name, provider) {
   const preset = provider.preset && presetById(provider.preset);
   if (provider.type === "chatgpt") return t("providers.chatgpt");
+  if (provider.type === "google") return `${t("providers.google")} · ${provider.auth === "antigravity" ? t("providers.googleAntigravity") : t("providers.apiKey")}`;
   if (provider.type === "anthropic") return provider.auth === "claude-code"
     ? `${t("providers.anthropic")} · ${provider.accountPool ? t("providers.rotationOn") : t("providers.rotationOff")}`
     : `${t("providers.anthropic")} · ${t("providers.apiKey")}`;
@@ -945,7 +1035,7 @@ function renderProviderRail() {
 
 async function removeProvider(name, provider) {
   if (!confirm(t("providers.removeConfirm", { name }))) return;
-  const next = clone(currentConfig);
+  const next = clone(await latestConfig());
   delete next.providers[name];
   next.routes = Object.fromEntries(Object.entries(next.routes || {}).filter(([, route]) => route.provider !== name));
   next.direct = (next.direct || []).filter((rule) => rule.provider !== name);
@@ -964,7 +1054,7 @@ async function removeProvider(name, provider) {
 
 function providerTabs(name, provider) {
   const tabs = [{ id: "overview", label: t("providers.overview") }];
-  if ((provider.type === "anthropic" && provider.auth === "claude-code") || provider.type === "chatgpt") tabs.push({ id: "accounts", label: t("providers.accounts") });
+  if ((provider.type === "anthropic" && provider.auth === "claude-code") || provider.type === "chatgpt" || (provider.type === "google" && provider.auth === "antigravity")) tabs.push({ id: "accounts", label: t("providers.accounts") });
   tabs.push({ id: "models", label: t("providers.modelsTab") });
   return el("div", { class: "provider-tabs", role: "tablist" }, tabs.map((tab) => {
     const button = el("button", { class: providerDetailTab === tab.id ? "active" : "", type: "button", role: "tab", "aria-selected": String(providerDetailTab === tab.id), text: tab.label });
@@ -979,11 +1069,11 @@ function providerOverview(name, provider) {
   const connection = el("section", { class: "detail-section" }, [
     el("h3", { text: t("providers.connection") }),
     el("div", { class: "detail-setting-row" }, [
-      el("div", { class: "setting-copy" }, [el("strong", { text: statusText(state) }), el("span", { text: providerKind(name, provider) })]),
+      el("div", { class: "setting-copy" }, [el("strong", { text: providerConnection(name).text }), el("span", { text: providerKind(name, provider) })]),
       providerState(name, provider),
     ]),
     state && !state.ok && state.error ? el("p", { class: "bad-text small provider-detail-error", text: shortError(state.error), title: state.error }) : null,
-    live && live.needsLogin ? chatgptLoginButton(renderProviderDetail) : null,
+    live && live.needsLogin && provider.type === "chatgpt" ? chatgptLoginButton(renderProviderDetail) : null,
   ].filter(Boolean));
   const models = modelsOf(provider);
   const modelSummary = el("section", { class: "detail-section" }, [
@@ -1012,7 +1102,7 @@ function providerModelsPanel(name, provider) {
 async function saveAnthropicRotation(name, provider, enabled, control, message) {
   control.disabled = true;
   message.textContent = t("providers.rotationSaving");
-  const next = clone(currentConfig);
+  const next = clone(await latestConfig());
   if (enabled) next.providers[name].accountPool = true;
   else delete next.providers[name].accountPool;
   try {
@@ -1145,6 +1235,7 @@ function durationText(seconds) {
 function chatgptStateBadge(account) {
   if (account.state === "paused") return el("span", { class: "badge", text: t("providers.chatgptPaused") });
   if (account.state === "needs-login" || account.state === "quarantined") return el("span", { class: "badge bad", text: t("providers.anthropicReauth") });
+  if (account.state === "needs-verification") return el("span", { class: "badge warn", text: t("providers.googleVerifyNeeded") });
   if (account.state === "cooling") return el("span", { class: "badge warn", text: t("pool.coolingFor", { duration: durationText(account.cooldownSeconds) }) });
   return el("span", { class: "badge ok", text: account.active ? t("providers.chatgptInUse") : t("providers.chatgptStandby") });
 }
@@ -1208,6 +1299,133 @@ function renderChatgptAccountRows(target, data, name, generation) {
   if (countNode) countNode.textContent = t("providers.chatgptAccountCount", { count: accounts.length });
 }
 
+let googleLoginBusy = false;
+/**
+ * The Antigravity sign-in. Google's terms name this use as a breach and suspended accounts for it,
+ * so the warning is put in front of the user and the sign-in starts only on an explicit yes.
+ */
+async function startGoogleLogin(onChange) {
+  if (googleLoginBusy) return false;
+  if (!confirm(t("providers.googleWarning"))) return false;
+  googleLoginBusy = true;
+  onChange && onChange();
+  try {
+    const started = await api("/api/google-login", { method: "POST" });
+    if (started.opened === false && started.url) toast(t("providers.googleOpenManually"), false, started.url);
+    const deadline = Date.now() + 6 * 60 * 1000;
+    while (Date.now() < deadline) {
+      await new Promise((resolve) => setTimeout(resolve, 2000));
+      const login = await api("/api/google-login");
+      if (login.running === false && login.ok === true) { toast(t("providers.googleAdded")); await refreshHealth(); return true; }
+      if (login.running === false && login.ok === false) { toast(t("common.actionFailed"), true, login.error); return false; }
+    }
+    return false;
+  } catch (error) {
+    toast(t("common.actionFailed"), true, error.message);
+    return false;
+  } finally {
+    googleLoginBusy = false;
+    onChange && onChange();
+  }
+}
+
+async function patchGoogleAccount(name, id, change) {
+  try {
+    await api(`/api/google-accounts/${encodeURIComponent(id)}`, { method: "PATCH", headers: { "content-type": "application/json" }, body: JSON.stringify(change) });
+    await refreshGoogleAccountPanel(name);
+  } catch (error) { toast(t("common.actionFailed"), true, error.message); }
+}
+async function recheckGoogleVerification(name, id) {
+  try {
+    const result = await api(`/api/google-accounts/${encodeURIComponent(id)}`, { method: "PATCH", headers: { "content-type": "application/json" }, body: JSON.stringify({ recheck: true }) });
+    if (result.verification === "verified") toast(t("providers.googleVerified"));
+    else if (result.verification === "still-required") toast(t("providers.googleStillUnverified"), true);
+    else toast(t("providers.googleVerifyUnknown"), true);
+    await refreshGoogleAccountPanel(name);
+  } catch (error) { toast(t("common.actionFailed"), true, error.message); }
+}
+
+function renderGoogleAccountRows(target, data, name, generation) {
+  if (generation !== providerDetailGeneration) return;
+  const accounts = Array.isArray(data.accounts) ? data.accounts : [];
+  const rows = accounts.map((account) => {
+    const actions = [];
+    if (account.state === "needs-login" || account.state === "quarantined") {
+      const reauth = el("button", { class: "btn secondary compact", type: "button", text: t("providers.reauthAction") });
+      reauth.addEventListener("click", () => void startGoogleLogin(() => void refreshGoogleAccountPanel(name)));
+      actions.push(reauth);
+    }
+    // Only the person can finish Google's check, so the page opens in their browser; the account
+    // answers again on the next turn after that.
+    if (account.state === "needs-verification" && account.verifyUrl) {
+      const link = el("a", { class: "btn secondary compact", href: account.verifyUrl, target: "_blank", rel: "noreferrer", text: t("providers.googleVerifyAction") });
+      // Coming back to this window is the likeliest moment the page has been finished: ask then.
+      link.addEventListener("click", () => window.addEventListener("focus", () => void recheckGoogleVerification(name, account.id), { once: true }));
+      const recheck = el("button", { class: "btn secondary compact", type: "button", text: t("providers.googleRecheck") });
+      recheck.addEventListener("click", () => { recheck.disabled = true; void recheckGoogleVerification(name, account.id); });
+      actions.push(link, recheck);
+    }
+    if (account.state === "cooling") {
+      const now = el("button", { class: "btn secondary compact", type: "button", text: t("providers.chatgptClearCooldown") });
+      now.addEventListener("click", () => void patchGoogleAccount(name, account.id, { clearCooldown: true }));
+      actions.push(now);
+    }
+    const pause = el("button", { class: "btn secondary compact", type: "button", text: account.paused ? t("providers.chatgptResume") : t("providers.chatgptPause") });
+    pause.addEventListener("click", () => void patchGoogleAccount(name, account.id, { paused: !account.paused }));
+    const rename = el("button", { class: "btn secondary compact", type: "button", text: t("common.edit") });
+    rename.addEventListener("click", () => {
+      const label = prompt(t("providers.anthropicRenamePrompt"), account.label);
+      if (!label || !label.trim() || label.trim() === account.label) return;
+      void patchGoogleAccount(name, account.id, { label });
+    });
+    const remove = el("button", { class: "btn danger compact", type: "button", text: t("common.remove") });
+    remove.addEventListener("click", async () => {
+      if (!confirm(t("providers.googleRemoveConfirm", { name: account.label }))) return;
+      try { await api(`/api/google-accounts/${encodeURIComponent(account.id)}`, { method: "DELETE" }); await refreshGoogleAccountPanel(name); }
+      catch (error) { toast(t("common.actionFailed"), true, error.message); }
+    });
+    actions.push(pause, rename, remove);
+    const detail = [account.email && account.email !== account.label ? account.email : null, account.projectId ? t("providers.googleProject", { id: account.projectId }) : null].filter(Boolean).join(" · ");
+    return el("article", { class: `account-card stacked${account.active ? " current" : ""}` }, [
+      el("div", { class: "account-card-copy" }, [
+        el("strong", { text: account.label }),
+        detail ? el("span", { class: "small", text: detail }) : null,
+        hint(account.state === "needs-login" || account.state === "quarantined" ? t("providers.chatgptReauthHelp") : account.state === "needs-verification" ? t("providers.googleVerifyHelp") : t("providers.googleOwnHelp")),
+      ].filter(Boolean)),
+      chatgptStateBadge(account),
+      el("div", { class: "account-card-actions" }, actions),
+    ].filter(Boolean));
+  });
+  target.replaceChildren(...(rows.length ? rows : [el("div", { class: "empty-card", text: t("providers.googleNoAccounts") })]));
+  const countNode = $("#google-account-count");
+  if (countNode) countNode.textContent = t("providers.chatgptAccountCount", { count: accounts.length });
+}
+
+async function refreshGoogleAccountPanel(name) {
+  const target = $("#google-account-rows");
+  if (!target || selectedProviderName !== name || providerDetailTab !== "accounts") return;
+  const generation = providerDetailGeneration;
+  try { renderGoogleAccountRows(target, await api(`/api/google-accounts?provider=${encodeURIComponent(name)}`), name, generation); }
+  catch (error) { if (generation === providerDetailGeneration) target.replaceChildren(el("div", { class: "bad-text small", text: error.message })); }
+}
+
+function googleAccountsPanel(name) {
+  const add = el("button", { class: "btn", type: "button", text: t("providers.addGoogleAccount") });
+  add.disabled = googleLoginBusy;
+  add.addEventListener("click", () => void startGoogleLogin(() => { renderProviderDetail(); void refreshGoogleAccountPanel(name); }));
+  const rows = el("div", { id: "google-account-rows", class: "account-card-list" }, [el("div", { class: "small", text: t("providers.checking") })]);
+  const panel = el("div", { class: "provider-panel" }, [
+    el("section", { class: "detail-section account-summary" }, [
+      el("div", { class: "section-heading" }, [el("div", {}, [el("h3", { text: t("providers.googleAccountsTitle") }), el("p", { id: "google-account-count", class: "account-count", text: t("providers.chatgptAccountCount", { count: 0 }) }), hint(t("providers.googleAccountsSubtitle"))]), add]),
+      googleLoginBusy ? el("p", { class: "small", text: t("providers.googleLoginWaiting") }) : null,
+      el("p", { class: "small warn-text", text: t("providers.googleWarningShort") }),
+    ].filter(Boolean)),
+    el("section", { class: "detail-section" }, [rows]),
+  ]);
+  queueMicrotask(() => void refreshGoogleAccountPanel(name));
+  return panel;
+}
+
 async function refreshChatgptAccountPanel(name) {
   const target = $("#chatgpt-account-rows");
   if (!target || selectedProviderName !== name || providerDetailTab !== "accounts") return;
@@ -1253,6 +1471,7 @@ function renderProviderDetail() {
   let content;
   if (providerDetailTab === "accounts" && provider.type === "anthropic" && provider.auth === "claude-code") content = anthropicAccountsPanel(name, provider);
   else if (providerDetailTab === "accounts" && provider.type === "chatgpt") content = chatgptAccountsPanel(name);
+  else if (providerDetailTab === "accounts" && provider.type === "google" && provider.auth === "antigravity") content = googleAccountsPanel(name);
   else if (providerDetailTab === "models") content = providerModelsPanel(name, provider);
   else { providerDetailTab = "overview"; content = providerOverview(name, provider); }
   detail.replaceChildren(header, providerTabs(name, provider), content);
@@ -1269,7 +1488,7 @@ async function loadClients() {
   clientsLoaded = true;
   try {
     await loadCatalogs();
-    currentConfig = currentConfig || await api("/api/config");
+    currentConfig = await api("/api/config");
     if (!status) status = await api("/api/status");
     renderClients();
   } catch (error) { toast(t("common.loadFailed"), true, error.message); }
@@ -1279,7 +1498,7 @@ async function loadProviders() {
   providersLoaded = true;
   try {
     await loadCatalogs();
-    currentConfig = currentConfig || await api("/api/config");
+    currentConfig = await api("/api/config");
     renderProviderWorkspace();
     void Promise.all(Object.entries(currentConfig.providers || {}).map(([name, provider]) => probeProvider(name, provider, () => {
       if ($("#view-providers").classList.contains("active")) renderProviderWorkspace();
@@ -1409,6 +1628,9 @@ function openProviderChooser() {
   const chatgpt = el("button", { class: "chooser-tile", type: "button" }, [el("strong", { text: t("providers.chatgpt") }), el("span", { text: t("providers.chatgptHelp") })]);
   chatgpt.addEventListener("click", () => openProviderForm({ kind: "chatgpt" }));
   grid.appendChild(chatgpt);
+  const google = el("button", { class: "chooser-tile", type: "button" }, [el("strong", { text: t("providers.google") }), el("span", { text: t("providers.googleHelp") })]);
+  google.addEventListener("click", () => openProviderForm({ kind: "google" }));
+  grid.appendChild(google);
   const native = presets.filter((preset) => (preset.kind || "anthropic-compatible") === "anthropic-compatible");
   for (const preset of native) {
     const tile = el("button", { class: "chooser-tile", type: "button" }, [el("strong", { text: preset.name }), el("span", { text: t("providers.presetHelp") })]);
@@ -1446,7 +1668,14 @@ function modelOverrideFields(model) {
     ...(model.authHeader ? { authHeader: model.authHeader } : {}),
   };
 }
-function modelChecklist(models, checked) {
+// A provider form holds the per-model fields from when it opened, and has no control for them; a
+// measurement may have landed since. So a model the router already has keeps the router's values.
+function withSavedModelFields(models, saved) {
+  const known = new Map(modelsOf(saved).map((model) => [model.id, model]));
+  return models.map((model) => known.has(model.id) ? { ...model, ...modelOverrideFields(known.get(model.id)) } : model);
+}
+function modelChecklist(models, checked, options = {}) {
+  models = [...models];
   const selected = new Map();
   for (const model of models) if (checked.has(model.id)) selected.set(model.id, { id: model.id, name: labelOf(model), ...modelOverrideFields(model) });
   const wrap = el("div", { class: "model-picker" });
@@ -1480,6 +1709,26 @@ function modelChecklist(models, checked) {
   }
   if (search) { search.addEventListener("input", render); wrap.appendChild(search); }
   wrap.append(grid, note);
+  // A provider without a model list (or one that leaves a model off it) is otherwise unusable: the
+  // only ids on offer are the ones fetched, and abliteration.ai lists none (issue #42).
+  if (options.allowCustom) {
+    const idInput = el("input", { placeholder: t("providers.customModelPlaceholder"), autocomplete: "off", spellcheck: "false" });
+    const addButton = el("button", { class: "btn secondary", type: "button", text: t("providers.customModelAdd") });
+    function addTyped() {
+      const id = idInput.value.trim();
+      if (!id) return;
+      if (!models.some((model) => model.id === id)) models.unshift({ id, name: id });
+      const model = models.find((entry) => entry.id === id);
+      selected.set(id, { id, name: labelOf(model), ...modelOverrideFields(model) });
+      idInput.value = "";
+      if (search) search.value = "";
+      render();
+    }
+    addButton.addEventListener("click", addTyped);
+    // Enter here adds the id; left to bubble, the modal's own Enter handler would save the form too.
+    idInput.addEventListener("keydown", (event) => { if (event.key === "Enter" && !event.isComposing) { event.preventDefault(); event.stopPropagation(); addTyped(); } });
+    wrap.appendChild(el("div", { class: "key-control model-add" }, [idInput, addButton]));
+  }
   wrap.selected = () => [...selected.values()];
   render();
   return wrap;
@@ -1504,7 +1753,7 @@ function openAnthropicProviderForm(options) {
   const probeButton = el("button", { class: "btn secondary", type: "button", text: t("providers.check") });
   const sourceLine = el("div", { class: "small" });
   let foundModels = modelsOf(existing).length ? modelsOf(existing) : claudeModels.map((model) => ({ id: model.id, name: labelOf(model) }));
-  let selected = new Set(modelsOf(existing).length ? modelsOf(existing).map((model) => model.id) : foundModels.map((model) => model.id));
+  let selected = new Set(existing ? modelsOf(existing).map((model) => model.id) : foundModels.map((model) => model.id));
   const modelArea = el("div", { class: "form-field" });
   function renderModels() {
     const modelsBox = modelChecklist(foundModels, selected);
@@ -1536,7 +1785,7 @@ function openAnthropicProviderForm(options) {
       ].filter(Boolean));
       if (Array.isArray(response.models) && response.models.length) {
         foundModels = response.models;
-        selected = new Set(modelsOf(existing).length ? modelsOf(existing).map((model) => model.id) : foundModels.map((model) => model.id));
+        selected = new Set(existing ? modelsOf(existing).map((model) => model.id) : foundModels.map((model) => model.id));
         renderModels();
       }
     } catch (error) { if (formActive) result.replaceChildren(el("span", { class: "bad-text", text: t("providers.probeFailed") }), el("div", { class: "small", text: error.message })); }
@@ -1556,9 +1805,9 @@ function openAnthropicProviderForm(options) {
   saveButton.addEventListener("click", async () => {
     const typedName = nameInput.value.trim();
     if (!typedName) { toast(t("providers.nameRequired"), true); return; }
-    const next = clone(currentConfig);
+    const next = clone(await latestConfig());
     const providerName = existing ? options.name : uniqueName(typedName, next.providers);
-    const checkedModels = form.querySelector(".model-picker").selected();
+    const checkedModels = withSavedModelFields(form.querySelector(".model-picker").selected(), existing && next.providers[options.name]);
     const provider = { type: "anthropic", auth: auth.value, ...(auth.value === "claude-code" && accountPool ? { accountPool: true } : {}), ...(auth.value === "api-key" && (keyInput.value || (existing && existing.apiKey)) ? { apiKey: keyInput.value || existing.apiKey } : {}), models: checkedModels };
     next.providers[providerName] = provider;
     // accountPool makes these models native Claude routing targets. Without it this remains the
@@ -1572,6 +1821,115 @@ function openAnthropicProviderForm(options) {
   showModal(form, () => { formActive = false; });
   if (auth.value === "claude-code") void runProbe();
 }
+function openGoogleProviderForm(options) {
+  let formActive = true;
+  const existing = options.provider;
+  const nameInput = el("input", { value: options.name || t("providers.google"), maxlength: "60" });
+  const keyInput = el("input", { type: "password", autocomplete: "off", placeholder: existing && existing.apiKey ? t("providers.keySaved") : t("providers.keyPlaceholder") });
+  const showKey = el("button", { class: "eye-button", type: "button", text: t("common.show") });
+  showKey.addEventListener("click", () => { const show = keyInput.type === "password"; keyInput.type = show ? "text" : "password"; showKey.textContent = show ? t("common.hide") : t("common.show"); });
+  const keyField = el("div", { class: "form-field key-field" }, [el("span", { text: t("providers.apiKey") }), el("div", { class: "key-control" }, [keyInput, showKey]), el("small", { text: t("providers.googleKeyHelp") })]);
+  const auth = el("select", {}, [selectOption("api-key", t("providers.googleAuthApiKey")), selectOption("antigravity", t("providers.googleAntigravity"))]);
+  auth.value = (existing && existing.auth) || "api-key";
+  const authField = inputRow(t("providers.credentials"), auth, t("providers.googleAuthHelp"));
+  const login = el("button", { class: "btn secondary", type: "button", text: t("providers.addGoogleAccount") });
+  login.addEventListener("click", async () => {
+    login.disabled = true;
+    if (await startGoogleLogin()) await runProbe();
+    if (formActive) login.disabled = false;
+  });
+  const loginField = el("div", { class: "form-field" }, [el("span", { text: t("providers.googleLogin") }), login, el("small", { class: "warn-text", text: t("providers.googleWarningShort") })]);
+  function syncAuth() {
+    keyField.hidden = auth.value !== "api-key";
+    loginField.hidden = auth.value !== "antigravity";
+  }
+  auth.addEventListener("change", syncAuth);
+  syncAuth();
+  const result = el("div", { class: "probe-result" });
+  const probeButton = el("button", { class: "btn secondary", type: "button", text: t("providers.check") });
+  let foundModels = modelsOf(existing);
+  const currentChecked = new Set(foundModels.map((model) => model.id));
+  const modelArea = el("div", { class: "form-field" });
+  function renderModels(checked, help) {
+    modelArea.replaceChildren(el("span", { text: t("providers.models") }), hint(help || t("providers.modelsHelp")), modelChecklist(foundModels, checked, { allowCustom: true }));
+  }
+  renderModels(currentChecked);
+  async function runProbe() {
+    probeButton.disabled = true;
+    result.textContent = t("providers.checking");
+    try {
+      const body = auth.value === "antigravity" ? { type: "google", auth: "antigravity" } : { type: "google", auth: "api-key", apiKey: keyInput.value.trim() || (existing && existing.apiKey) };
+      const response = await api("/api/providers/probe", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(body) });
+      if (!formActive) return;
+      const failed = response.auth === "bad-key" ? t("providers.probeBadKey") : response.auth === "missing" && auth.value === "antigravity" ? t("providers.googleSignInFirst") : t("providers.probeFailed");
+      result.replaceChildren(...[
+        el("span", { class: response.ok ? "ok-text" : "bad-text", text: response.ok ? t("providers.probeOk") : failed }),
+        response.error ? el("div", { class: "small", text: response.error }) : null,
+      ].filter(Boolean));
+      if (Array.isArray(response.models) && response.models.length) {
+        const ticked = modelArea.querySelector(".model-picker").selected();
+        // The catalogue lists dozens of Gemini variants, so a new provider starts with none ticked
+        // rather than all of them; saved and typed picks stay ticked and visible.
+        const keep = new Set([...currentChecked, ...ticked.map((model) => model.id)]);
+        foundModels = [...ticked.filter((model) => !response.models.some((m) => m.id === model.id)), ...response.models];
+        renderModels(keep, t("providers.modelsFoundMany"));
+      }
+    } catch (error) { if (formActive) result.replaceChildren(el("span", { class: "bad-text", text: t("providers.probeFailed") }), el("div", { class: "small", text: error.message })); }
+    finally { if (formActive) probeButton.disabled = false; }
+  }
+  probeButton.addEventListener("click", () => void runProbe());
+  const advanced = el("details", { class: "details" }, [el("summary", { text: t("common.advanced") })]);
+  const identity = el("input", { type: "checkbox", checked: !(existing && existing.identity === false) });
+  const append = el("textarea", { rows: "2", value: (existing && existing.instructionsAppend) || "" });
+  advanced.appendChild(el("div", { class: "advanced-content" }, [
+    el("div", { class: "form-field" }, [el("label", { class: "check" }, [identity, el("span", { text: t("providers.identity") })]), el("small", { text: t("providers.identityHelp") })]),
+    inputRow(t("providers.append"), append, t("providers.appendHelp")),
+  ]));
+  const pickerInput = el("input", { type: "checkbox", checked: Boolean(existing && modelsOf(existing).some((model) => ((currentConfig.cli && currentConfig.cli.extraModels) || []).some((extra) => extra.model === model.id))) });
+  const form = el("div", { class: "provider-form" }, [
+    el("h1", { id: "modal-title", text: existing ? t("providers.edit") : t("providers.addTitle") }),
+    inputRow(t("providers.name"), nameInput, t("providers.nameHelp")), authField, keyField, loginField, probeButton, result, modelArea,
+    el("label", { class: "check picker-check" }, [pickerInput, el("span", { text: t("providers.showInPicker") })]),
+    pickerModeOn() ? null : hint(t("providers.pickerOffHint")),
+    advanced,
+  ]);
+  const saveButton = el("button", { class: "btn", type: "button", "data-default-action": "", text: existing ? t("common.save") : t("providers.add") });
+  saveButton.addEventListener("click", async () => {
+    const typedName = nameInput.value.trim();
+    if (!typedName) { toast(t("providers.nameRequired"), true); return; }
+    const next = clone(await latestConfig());
+    const providerName = existing ? options.name : uniqueName(typedName, next.providers);
+    const apiKey = auth.value === "api-key" ? keyInput.value.trim() || (existing && existing.apiKey) : undefined;
+    const saved = existing && (next.providers[options.name] || existing);
+    const checkedModels = withSavedModelFields(form.querySelector(".model-picker").selected(), saved);
+    // Fields this form has no control for (defaultEffort, a hand-written setting) survive the save.
+    const formKeys = new Set(["type", "auth", "apiKey", "identity", "instructionsAppend", "models"]);
+    const kept = saved ? Object.fromEntries(Object.entries(saved).filter(([key]) => !formKeys.has(key))) : {};
+    next.providers[providerName] = {
+      ...kept,
+      type: "google",
+      auth: auth.value,
+      ...(apiKey ? { apiKey } : {}),
+      ...(existing && existing.url ? { url: existing.url } : {}),
+      identity: identity.checked,
+      ...(append.value.trim() ? { instructionsAppend: append.value.trim() } : {}),
+      models: checkedModels,
+    };
+    // Same rule as the other provider forms: read after the provider is updated, so an unticked
+    // model is already undeclared and falls out of the picker on its own.
+    const existingSelections = pickerSelectionsExcept(next, providerName);
+    applyPickerSelections(next, pickerInput.checked ? [...existingSelections, ...checkedModels.map((model) => ({ ...model, provider: providerName }))] : existingSelections);
+    saveButton.disabled = true;
+    try { await configRequest(next); currentConfig = next; selectedProviderName = providerName; providerDetailTab = auth.value === "antigravity" ? "accounts" : "overview"; slotsLoaded = false; clientsLoaded = false; providersLoaded = false; closeModal(); await loadProviders(); toast(t("common.saved")); await offerPickerOn(pickerInput.checked && checkedModels.length > 0); }
+    catch (error) { toast(t("common.saveFailed"), true, error.message); }
+    finally { saveButton.disabled = false; }
+  });
+  form.appendChild(el("div", { class: "actions end" }, [el("button", { class: "btn secondary", type: "button", text: t("common.cancel"), onclick: closeModal }), saveButton]));
+  showModal(form, () => { formActive = false; });
+  // An existing provider can already reach its catalogue (a stored key or a signed-in account), so
+  // the full list is shown straight away.
+  if (existing && (existing.apiKey || existing.auth === "antigravity")) void runProbe();
+}
 function openProviderForm(options) {
   const existing = options.provider;
   const preset = options.preset || (existing && existing.preset && presetById(existing.preset));
@@ -1581,6 +1939,7 @@ function openProviderForm(options) {
   const isCustom = options.kind === "custom";
   const displayName = options.name || (preset && preset.name) || (isChatgpt ? t("providers.chatgpt") : isAnthropic ? t("providers.anthropic") : t("providers.customName"));
   if (isAnthropic) { openAnthropicProviderForm(options); return; }
+  if (options.kind === "google" || (existing && existing.type === "google")) { openGoogleProviderForm(options); return; }
   const nameInput = el("input", { value: displayName, maxlength: "60" });
   const keyInput = el("input", { type: "password", autocomplete: "off", placeholder: t("providers.keyPlaceholder") });
   const showKey = el("button", { class: "eye-button", type: "button", text: t("common.show") });
@@ -1599,7 +1958,11 @@ function openProviderForm(options) {
   const initialModels = modelsOf(existing).length ? modelsOf(existing) : (preset ? (preset.fallbackModels || []) : (isChatgpt ? CHATGPT_MODELS : []));
   let foundModels = initialModels;
   const currentChecked = new Set(modelsOf(existing).map((model) => model.id));
-  const modelsBox = modelChecklist(foundModels, currentChecked.size ? currentChecked : new Set(foundModels.map((model) => model.id)));
+  // Everything starts ticked only for a new provider. An existing one keeps its saved picks even
+  // when that is none: treating "no models" as "not decided yet" re-ticked the whole fallback list
+  // every time the form opened, and saving then declared all of them (2026-09-29, opencode-zen).
+  const checklistOptions = { allowCustom: !isChatgpt };
+  const modelsBox = modelChecklist(foundModels, existing ? currentChecked : new Set(foundModels.map((model) => model.id)), checklistOptions);
   const providerEffortLevels = isChatgpt
     ? effortLevelsFor(options.name || "chatgpt", "gpt-5.6-terra")
     : (existing ? effortLevelsFor(options.name, initialModels[0] && initialModels[0].id) : fallbackEffortLevels({ ...(preset ? { preset: preset.id } : {}), ...(isCustom ? { caps: {} } : {}) }, initialModels[0] && initialModels[0].id));
@@ -1715,6 +2078,12 @@ function openProviderForm(options) {
   function probeDraft() {
     const d = draftProvider();
     if (preset) { d.modelsUrl = preset.modelsUrl; d.modelsAuthHeader = preset.modelsAuthHeader; d.probeModel = (preset.fallbackModels || [])[0] && preset.fallbackModels[0].id; }
+    // With nothing to list models from, test with a model the user ticked rather than a made-up id
+    // the provider is bound to refuse.
+    else {
+      const ticked = modelArea.querySelector(".model-picker").selected();
+      if (ticked.length) d.probeModel = ticked[0].id;
+    }
     return d;
   }
   async function runProbe() {
@@ -1731,12 +2100,17 @@ function openProviderForm(options) {
       el("span", { class: response.ok && !noCredits ? "ok-text" : noCredits ? "warn-text" : "bad-text", text: headline }),
       response.error ? el("div", { class: "small", text: response.error.replace(/^no-credits:\s*/, "") }) : null,
     ].filter(Boolean));
-    foundModels = response.models && response.models.length ? response.models.map((model) => typeof model === "string" ? { id: model, name: model } : model) : (preset ? (preset.fallbackModels || []) : foundModels);
-    const keep = foundModels.length > 12 ? new Set([...currentChecked, ...modelArea.querySelector(".model-picker").selected().map((m) => m.id)]) : new Set(foundModels.map((model) => model.id));
+    const listed = Boolean(response.models && response.models.length);
+    const ticked = modelArea.querySelector(".model-picker").selected();
+    foundModels = listed ? response.models.map((model) => typeof model === "string" ? { id: model, name: model } : model) : (preset ? (preset.fallbackModels || []) : foundModels);
+    const keep = existing || foundModels.length > 12 ? new Set([...currentChecked, ...ticked.map((m) => m.id)]) : new Set(foundModels.map((model) => model.id));
     // Saved picks that the provider no longer lists stay visible and ticked so nothing is dropped silently.
     for (const saved of modelsOf(existing)) if (keep.has(saved.id) && !foundModels.some((m) => m.id === saved.id)) foundModels = [saved, ...foundModels];
-    modelArea.querySelector(".model-picker").replaceWith(modelChecklist(foundModels, keep));
-    modelArea.replaceChildren(el("span", { text: t("providers.models") }), hint(response.ok ? (foundModels.length > 12 ? t("providers.modelsFoundMany") : t("providers.modelsFound")) : t("providers.modelsFallback")), modelArea.querySelector(".model-picker") || document.createTextNode(""));
+    // So do ids typed in before the test: the provider's list replacing them would undo the typing.
+    for (const typed of ticked) if (!foundModels.some((m) => m.id === typed.id)) { foundModels = [typed, ...foundModels]; keep.add(typed.id); }
+    modelArea.querySelector(".model-picker").replaceWith(modelChecklist(foundModels, keep, checklistOptions));
+    const listHint = listed ? (foundModels.length > 12 ? t("providers.modelsFoundMany") : t("providers.modelsFound")) : preset ? t("providers.modelsFallback") : t("providers.customModelHint");
+    modelArea.replaceChildren(el("span", { text: t("providers.models") }), hint(listHint), modelArea.querySelector(".model-picker") || document.createTextNode(""));
   }
   probeButton && probeButton.addEventListener("click", runProbe);
   // Editing a provider that can list models: fetch the full list right away so the saved picks are
@@ -1780,10 +2154,11 @@ function openProviderForm(options) {
     if (!typedName) { toast(t("providers.nameRequired"), true); return; }
     const provider = draftProvider();
     if (!isChatgpt && (!provider.url || !/^https?:\/\//.test(provider.url))) { toast(t("providers.urlRequired"), true); return; }
-    const next = clone(currentConfig);
+    const next = clone(await latestConfig());
     const providerName = existing ? options.name : uniqueName(typedName, next.providers);
+    const saved = existing && (next.providers[options.name] || existing);
     if (existing && providerName !== options.name) delete next.providers[options.name];
-    const checkedModels = form.querySelector(".model-picker").selected();
+    const checkedModels = withSavedModelFields(form.querySelector(".model-picker").selected(), saved);
     provider.models = checkedModels;
     // The form rebuilds the provider from its own fields, so anything it has no field for
     // (debugDump, a hand-written setting) is carried over from the saved one rather than dropped.
@@ -1791,7 +2166,7 @@ function openProviderForm(options) {
     const formKeys = new Set(isChatgpt
       ? ["type", "auth", "defaultEffort", "identity", "instructionsAppend", "models"]
       : ["type", "url", "identity", "instructionsAppend", "preset", "sessionHeader", "wire", "caps", "headers", "models"]);
-    const kept = existing ? Object.fromEntries(Object.entries(existing).filter(([key]) => !formKeys.has(key))) : {};
+    const kept = saved ? Object.fromEntries(Object.entries(saved).filter(([key]) => !formKeys.has(key))) : {};
     next.providers[providerName] = { ...kept, ...provider };
     // Read after `next.providers` has been updated, so an unticked model is already undeclared here
     // and falls out on its own, and a renamed provider answers to its new name.