@oharness/server 0.7.0 → 0.8.0

package/dist/page/client/account.js

@@ -0,0 +1,1895 @@
+/**
+ * Models, providers and the account: the model catalogue, connecting and
+ * reconnecting a provider, signing in through the website, the paywall, and
+ * the theme switch.
+ *
+ * One part of the client script; see ./index.ts for how the parts join.
+ */
+export const ACCOUNT = String.raw `
+async function showModels() {
+  const body = await getJson("/models");
+  panelBody.replaceChildren();
+  if (body.error) return void panelBody.appendChild(panelError(body.error));
+  const models = body.models || [];
+  const list = body.providers || [];
+  modelsSite = body.site || modelsSite;
+
+  const panel = el("div", "panel");
+  const head = el("div", "row-head");
+  head.appendChild(el("h2", null, t("models.title")));
+  const refreshAll = el("button", "ghost", t("models.discoverAll"));
+  refreshAll.type = "button";
+  refreshAll.addEventListener("click", () => {
+    refreshAll.disabled = true;
+    refreshAll.textContent = t("models.discoverAll") + "…";
+    void api("/models/refresh", {}, 120000)
+      .then(async (result) => {
+        // Errors are shown rather than swallowed: an earlier version left a
+        // blank panel with no explanation when a /models call failed.
+        if (result && result.error) return void addNotice(result.error, "err");
+        await loadModels();
+        await showModels();
+      })
+      .finally(() => {
+        refreshAll.disabled = false;
+        refreshAll.textContent = t("models.discoverAll");
+      });
+  });
+  head.appendChild(refreshAll);
+  panel.appendChild(head);
+
+  const byProvider = new Map();
+  for (const model of models) {
+    if (!byProvider.has(model.provider)) byProvider.set(model.provider, []);
+    byProvider.get(model.provider).push(model);
+  }
+
+  /**
+   * What connected a provider, in the user's terms.
+   *
+   * The engine reports env:DEEPSEEK_API_KEY, stored:api, ant-cli. The
+   * distinction matters: a provider connected only by an environment variable
+   * has nothing to sign out of, and offering a Disconnect that cannot work
+   * would be worse than saying where the credential came from.
+   */
+  const sourceLabel = (source) => {
+    if (!source) return "connected";
+    if (source.startsWith("env:")) return "Environment";
+    if (source === "stored:api") return "API key";
+    if (source === "stored:oauth") return "Subscription";
+    if (source === "ant-cli") return "ant CLI";
+    return source;
+  };
+
+  // The recommended vendor is lifted out of whichever section it would have
+  // landed in and shown first. Under "Popular" it is one of eight; the point
+  // of recommending one is that it is not.
+  const featured = list.filter((provider) => provider.recommended);
+  const connected = list.filter((provider) => provider.configured && !provider.recommended);
+  const popular = list.filter(
+    (provider) =>
+      !provider.configured &&
+      !provider.recommended &&
+      (provider.popular ||
+        pinnedProviders.has(provider.id) ||
+        (byProvider.get(provider.id) || []).length),
+  );
+  const rest = list.filter(
+    (provider) =>
+      !featured.includes(provider) &&
+      !connected.includes(provider) &&
+      !popular.includes(provider),
+  );
+
+  const section = (title, providers) => {
+    if (!providers.length) return;
+    panel.appendChild(el("h3", "section-title", title));
+    const group = el("div", "section");
+    for (const provider of providers) group.appendChild(providerCard(provider));
+    panel.appendChild(group);
+  };
+
+  function providerCard(provider) {
+    const owned = byProvider.get(provider.id) || [];
+
+    // A collapsed card per provider: OpenRouter alone discovers four hundred
+    // models, and a wall of chips buries every other vendor under it.
+    const card = el("details", "provider");
+    card.dataset.provider = provider.id;
+    card.open = owned.some((model) => model.current);
+
+    const top = el("summary", "row-head");
+    top.appendChild(el("span", "chev"));
+    // The same mark the model menu puts on every row. This panel is the other
+    // place the full list of vendors is read, and reading it by name alone is
+    // the thing the mark was added to fix.
+    top.appendChild(providerMark(provider.id, provider.label || provider.id));
+
+    const naming = el("div", "naming");
+    const line = el("div", "name-line");
+    line.appendChild(el("span", "row-title", provider.label || provider.id));
+    if (provider.recommended) line.appendChild(el("span", "tag rec", t("models.recommended")));
+    if (provider.configured) line.appendChild(el("span", "tag", sourceLabel(provider.source)));
+    if (owned.length) line.appendChild(el("span", "muted count", String(owned.length)));
+    naming.appendChild(line);
+    if (provider.description) naming.appendChild(el("div", "row-desc", provider.description));
+    top.appendChild(naming);
+
+    const discover = el("button", "ghost", t("models.discover"));
+    discover.type = "button";
+    discover.disabled = !provider.configured;
+    discover.addEventListener("click", (e) => {
+      // Inside a summary, a click toggles the disclosure unless stopped.
+      e.preventDefault();
+      e.stopPropagation();
+      discover.disabled = true;
+      discover.textContent = "…";
+      void api("/models/refresh", { provider: provider.id }, 60000)
+        .then(async (result) => {
+          if (result && result.error) return void addNotice(result.error, "err");
+          await loadModels();
+          await showModels();
+        })
+        .finally(() => {
+          discover.disabled = false;
+          discover.textContent = t("models.discover");
+        });
+    });
+    top.appendChild(discover);
+
+    const cardBody = el("div", "provider-body");
+
+    if (provider.configured) {
+      // Nothing to sign out of when the key lives in the environment; the
+      // button would do nothing and the user would rightly call it broken.
+      if (!String(provider.source || "").startsWith("env:")) {
+        const out = el("button", "act", t("models.disconnect"));
+        out.type = "button";
+        out.addEventListener("click", (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          void api("/logout", { provider: provider.id }).then(async () => {
+            await loadModels();
+            await showModels();
+          });
+        });
+        top.appendChild(out);
+      } else {
+        cardBody.appendChild(
+          el("div", "muted small",
+            "Connected by " + String(provider.source).slice(4) +
+            ". Unset it to disconnect, or save a key here to override it."),
+        );
+      }
+    }
+
+    // Who is signed in, when anyone is. A plan whose credential is an account
+    // has one question a "connected" tag cannot answer — whose — and it is the
+    // question a stale login gets wrong.
+    // Which key, when a key is what this machine is using. Shown for the same
+    // reason the account email is: "connected" does not say by what, and the
+    // one thing somebody needs in order to revoke it is the name they gave it.
+    if (provider.keyLabel) {
+      cardBody.appendChild(
+        el("div", "muted small", t("models.usingKey", { label: provider.keyLabel })),
+      );
+    }
+    if (provider.account) {
+      // Whose, and whether it still counts. The email comes from the stored
+      // credential and survives it going stale, so claiming "signed in" on the
+      // strength of it told people they had a session when they had the
+      // remains of one — which is exactly how a dead sign-in button came to
+      // look like a bug in the button rather than in the sentence above it.
+      cardBody.appendChild(
+        el(
+          "div",
+          "muted small",
+          provider.configured
+            ? t("models.signedInAs", { email: provider.account })
+            : t("models.wasSignedInAs", { email: provider.account }),
+        ),
+      );
+    }
+
+    // An account-backed plan holds no key the subscriber could paste: the
+    // upstream credentials live on the gateway and signing in is what yields
+    // one. Offering only a key field here would be a dead end, so the way in
+    // is a sign-in — and it is the same sign-in the rest of the app opens.
+    //
+    // One button rather than the three controls that used to sit here. The
+    // dialog behind it holds both ways of signing in — the website, and the
+    // emailed code for a machine with no browser — and having a second copy of
+    // them on this card meant anything added to the sign-in had to be added
+    // twice, with the copy that was missed going quietly stale.
+    // Nothing to sign in to. The card says what is missing and how to supply
+    // it, in the same terms the CLI uses, rather than showing a button whose
+    // only possible outcome is a dialog that also cannot work.
+    const signInButton = () => {
+      const go = el("button", "signin-site", t("models.signIn"));
+      go.type = "button";
+      go.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        openConnect(provider.id);
+      });
+      return go;
+    };
+
+    if (provider.readiness === "no-account-system") {
+      cardBody.appendChild(el("div", "muted small", t("models.noAccounts")));
+      cardBody.appendChild(el("div", "muted small", t("models.noAccountsHow")));
+    } else if (provider.readiness === "cannot-renew") {
+      // The engine's own message about why the renewal failed. Shown rather
+      // than summarised: this is somebody's own machine, and "could not be
+      // renewed" without the reason is a sentence they can do nothing with.
+      // The button stays, because signing in again is a real answer here —
+      // unlike the case above, where there is nothing to sign in to.
+      cardBody.appendChild(el("div", "muted small", t("models.cannotRenew")));
+      if (provider.readinessDetail) cardBody.appendChild(el("div", "muted small", provider.readinessDetail));
+      cardBody.appendChild(signInButton());
+    } else if (provider.signIn && (!provider.configured || String(provider.source || "").startsWith("env:"))) {
+      cardBody.appendChild(signInButton());
+    }
+
+    // The key field, for every vendor that takes one — the account plans
+    // included. A key is not a second account: it resolves to the same user
+    // and spends the same balance, and CI needs one because it does not
+    // expire. This is where it belongs, next to every other vendor's key
+    // field, rather than inside the sign-in dialog.
+    if (!provider.configured || String(provider.source || "").startsWith("env:")) {
+      const row = el("div", "keyrow");
+      const field = document.createElement("input");
+      // type=password so the key is not left legible on a screen, and
+      // autocomplete off so the browser does not offer to remember it.
+      field.type = "password";
+      field.placeholder = (provider.envVars || []).join(" or ") || "API key";
+      field.autocomplete = "off";
+      field.spellcheck = false;
+      row.appendChild(field);
+
+      const save = el("button", "ghost", t("models.connect"));
+      save.type = "button";
+      const submit = () => {
+        const key = field.value.trim();
+        if (!key) return;
+        save.disabled = true;
+        save.textContent = t("models.saving");
+        void api("/auth", { provider: provider.id, key })
+          .then(async (result) => {
+            field.value = "";
+            if (result && result.error) return void addNotice(result.error, "err");
+            await loadModels();
+            await showModels();
+            addNotice("connected " + provider.id + " — discovering its models…");
+          })
+          .finally(() => {
+            // Restored on every path. Doing this only on success left the
+            // button reading "saving…" whenever anything went wrong.
+            save.disabled = false;
+            save.textContent = t("models.connect");
+          });
+      };
+      save.addEventListener("click", submit);
+      field.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") submit();
+      });
+      field.addEventListener("click", (e) => e.stopPropagation());
+      row.appendChild(save);
+
+      const hint = el("div", "muted small",
+        "Stored in ~/.oharness/auth.json (0600). Or set " +
+        ((provider.envVars || []).join(" or ") || "an environment variable") + " instead.");
+      if (provider.docsUrl) {
+        hint.appendChild(document.createTextNode("  "));
+        const link = el("a", "md-link", "Get a key");
+        link.href = provider.docsUrl;
+        link.target = "_blank";
+        link.rel = "noopener noreferrer";
+        hint.appendChild(link);
+      }
+
+      if (provider.signIn) {
+        // Folded away on an account-backed plan. There is no key page to get
+        // one from — signing in is what yields a credential — so the field is
+        // for the environment key a CI run or a self-hosted gateway uses, and
+        // showing it beside the sign-in only ever suggested a second way in
+        // that most people do not have.
+        const advanced = el("details", "provider-advanced");
+        const summary = el("summary", null, t("models.orKey"));
+        summary.addEventListener("click", (e) => e.stopPropagation());
+        advanced.appendChild(summary);
+        advanced.appendChild(row);
+        advanced.appendChild(hint);
+        cardBody.appendChild(advanced);
+      } else {
+        cardBody.appendChild(row);
+        cardBody.appendChild(hint);
+      }
+    }
+
+    if (owned.length) {
+      const grid = el("div", "chips");
+      for (const model of owned) {
+        const chip = el("button", "chip" + (model.current ? " on" : ""));
+        chip.type = "button";
+        chip.appendChild(el("span", null, model.id));
+        if (model.contextWindow) {
+          chip.appendChild(el("span", "sub", Math.round(model.contextWindow / 1000) + "k"));
+        }
+        // Only ever on a model whose vendor quoted zero for both halves.
+        // The server's isFree is the whole of the decision, so a chip without
+        // this is a model nobody has said is free, not one that is known to
+        // cost something.
+        if (model.free) chip.appendChild(el("span", "free", t("models.free")));
+        chip.addEventListener("click", () => {
+          track("model_switched", { model: model.id, via: "panel" });
+          void api("/model", { session: activeId, id: model.id }).then(async (state) => {
+            if (state && state.error) return addNotice(state.error, "err");
+            applyState(state);
+            await loadModels();
+            await showModels();
+          });
+        });
+        grid.appendChild(chip);
+      }
+      cardBody.appendChild(grid);
+    } else if (provider.configured) {
+      cardBody.appendChild(
+        el("div", "muted small", "Asking " + provider.id + " for its model list…"),
+      );
+    }
+
+    card.appendChild(top);
+    card.appendChild(cardBody);
+    return card;
+  }
+
+  section(t("models.recommended"), featured);
+  section(t("models.connected"), connected);
+  section(t("models.popular"), popular);
+
+  if (rest.length) {
+    const more = el("button", "more-row");
+    more.type = "button";
+    more.appendChild(el("span", null, t("models.more")));
+    more.appendChild(el("span", "muted", String(rest.length)));
+    more.addEventListener("click", () => openProviderPicker(rest, byProvider));
+    panel.appendChild(more);
+  }
+
+  panelBody.appendChild(panel);
+
+  // Applied on every paint rather than once by the caller: the panel repaints
+  // itself after a discovery pass, and a card opened before that lands would
+  // shut again with no one having touched it.
+  if (focusProvider) revealProvider(focusProvider);
+
+  // Signing in and then facing an empty list with a button to press is a poor
+  // answer to "which models do I have". Providers that are authenticated but
+  // have nothing discovered yet get asked once, in the background.
+  const missing = list.filter(
+    (provider) => provider.configured && !(byProvider.get(provider.id) || []).length,
+  );
+  if (missing.length && !discovering) {
+    discovering = true;
+    void Promise.all(
+      missing.map((provider) => api("/models/refresh", { provider: provider.id })),
+    )
+      .then(async () => {
+        await loadModels();
+        // Only repaint if the user is still looking at this panel.
+        if (document.getElementById("nav-models").classList.contains("active")) {
+          await showModels();
+        }
+      })
+      .finally(() => {
+        discovering = false;
+      });
+  }
+}
+
+let discovering = false;
+
+/** The provider each paint of the panel should open; null when it opens flat. */
+let focusProvider = null;
+
+/**
+ * What to run when a provider finishes signing in somewhere else.
+ *
+ * A sign-in that happens in a browser tab does not resolve the promise that
+ * opened it — the answer arrives over the event stream minutes later, from a
+ * different window. One entry per provider: starting a second sign-in for the
+ * same one replaces the first, which is what a user restarting a flow means.
+ */
+const signedInWaiters = new Map();
+
+/**
+ * A provider whose credential was just refused.
+ *
+ * The "configured" flag answers "is a credential stored", which a 401 has just
+ * proved is the wrong question to have been asking. It is cleared before the
+ * dialog opens or the model picker goes on treating this vendor as ready — and
+ * switching to one of its models goes on failing the same way, with the dialog
+ * that would fix it never offered because the switch never asks for one.
+ *
+ * The notice stays even though a dialog opens over it: the dialog is
+ * dismissible and says nothing about why it appeared.
+ */
+function openReconnect(providerId) {
+  const provider = providers.find((p) => p.id === providerId);
+  addNotice(t("auth.refused", { provider: (provider && provider.label) || providerId }), "err");
+  if (!provider) return;
+  provider.configured = false;
+  openConnect(providerId);
+}
+
+/**
+ * A provider that was never connected, reached by trying to use it.
+ *
+ * Unlike a refusal there is nothing stale to clear — the flag was right, the
+ * vendor simply has no credential. What the two share is the answer: the same
+ * dialog, opened where the failure happened rather than described in a
+ * sentence that names a terminal command this window has no terminal for.
+ */
+function openSignIn(providerId) {
+  const provider = providers.find((p) => p.id === providerId);
+  addNotice(t("auth.missing", { provider: (provider && provider.label) || providerId }), "err");
+  openConnect(providerId);
+}
+
+/**
+ * Connect one vendor, over whatever is on screen.
+ *
+ * Picking a vendor that is not set up is a question with one answer — the key
+ * — so it is asked where it was raised. Sending the user to a settings panel
+ * to find the same field again is three clicks to do what they had already
+ * said they wanted.
+ *
+ * The key comes first even for the plans that can also sign in: a key is one
+ * paste and works everywhere, including where no mail is reachable. The
+ * sign-in is one line below it for the accounts that prefer it.
+ */
+let modelsSite = "";
+
+function openConnect(providerId, thenModel) {
+  const provider = providers.find((p) => p.id === providerId);
+  if (!provider) return;
+
+  const dialog = document.getElementById("connect");
+  const body = document.getElementById("cn-body");
+  const save = document.getElementById("cn-save");
+  // The left column is about having an OHarness account, so it belongs only to
+  // the providers that are one. For a vendor whose credential is a key it
+  // would be an advertisement in the way of the field they came to fill in.
+  document.getElementById("cn-aside").hidden = !provider.signIn;
+  document.getElementById("cn-title").textContent = provider.label || provider.id;
+  // What this dialog is answering. A credential that ran out and one that was
+  // never created both arrive here, and telling someone to "sign in" when what
+  // happened is "your session ended" leaves them wondering whether the first
+  // one ever worked.
+  // The provider's own description advertises signing in. Left in place on a
+  // build that cannot sign in, it contradicts the sentence directly beneath it
+  // — which is what made the dialog read as an error rather than as one of two
+  // doors being shut.
+  document.getElementById("cn-desc").textContent =
+    provider.readiness === "no-account-system"
+      ? t("models.keyOnlyDesc")
+      : provider.readiness === "expired"
+        ? t("models.expired")
+        : provider.readiness === "cannot-renew"
+          ? t("models.cannotRenew")
+          : provider.description || "";
+
+  // Nothing to sign in *to*, which is not the same as nothing to do. The
+  // official plan takes two credentials: an account, which needs a project
+  // this build does not know, and an oh- key, which is a bearer token for the
+  // gateway and needs no project at all. So the dialog explains why the first
+  // is unavailable and offers the second, rather than the Cancel button it
+  // offered at first — which told someone with a perfectly good key that they
+  // could not use this provider.
+  //
+  // An earlier version wrote a notice instead of opening anything. addNotice
+  // puts its text in the transcript when no panel is up, so the explanation
+  // arrived labelled as the assistant, reading as something the model said.
+  const noAccounts = provider.readiness === "no-account-system";
+  if (noAccounts) {
+    // The left column sells having an account. Wrong thing to show beside a
+    // sentence saying accounts do not exist in this build.
+    document.getElementById("cn-aside").hidden = true;
+  }
+  // Undone on every open rather than only where it is set: this dialog is one
+  // node reused by every provider, and a control hidden for one that stayed
+  // hidden for the next is the classic way a shared dialog goes wrong.
+  save.hidden = false;
+
+  // Which of the two ways in this dialog is for. Fixed once, not switchable:
+  // a provider whose credential is a key gets the key field, and one with an
+  // account gets the sign-in. The dialog used to offer a link down to a key
+  // field on the account plans too, which put "paste a credential" inside a
+  // window whose whole job is "sign in" — two unrelated things wearing one
+  // title. Pasting an oh- key is a settings action and lives on the
+  // provider's card, where the other vendors' key fields already are.
+  const mode = provider.signIn && !noAccounts ? "account" : "key";
+  let flow = null;
+
+  const field = document.createElement("input");
+  field.autocomplete = "off";
+  field.spellcheck = false;
+
+  const hint = el("div", "cn-note cn-tip");
+  hint.hidden = true;
+  hint.setAttribute("role", "tooltip");
+  const why = document.getElementById("cn-why");
+  // In the dialog's column rather than its body, so it floats over the body
+  // instead of taking a place in it. Left from the last opening otherwise.
+  const main = why.closest(".cn-main");
+  for (const old of main.querySelectorAll(":scope > .cn-tip")) old.remove();
+  main.appendChild(hint);
+
+  // A third-party key is the one people hesitate over pasting into a new app,
+  // so the dialog says, in plain sight, where it goes and what does not happen
+  // to it. Not for OHarness's own key, which is ours to issue. And not
+  // "secure": it is a plain file only this account can read, and claiming
+  // more would promise something the file does not do.
+  const thirdParty = provider.id !== "official";
+  // One line, the fact in bold. The path and the file mode are behind the
+  // mark with the rest of the detail, for whoever wants to check.
+  // Who the key goes to, by name: "sent only to Together AI" is a claim a
+  // person can check against the address the request goes to, where "stays
+  // on this computer" alone is not quite true — the provider has to see it.
+  const keptLocal = el("div", "cn-note cn-local");
+  keptLocal.appendChild(svgIcon("lock"));
+  const words = el("span");
+  words.appendChild(el("strong", null, t("models.keyLocalLead")));
+  words.appendChild(document.createTextNode(t("models.keyLocalRest", { provider: provider.label || provider.id })));
+  keptLocal.appendChild(words);
+
+  // Hovering shows it, clicking keeps it. Peeking is the common case and a
+  // click to see two lines and another to put them away is two clicks more
+  // than the question deserves — but a pointer that has to stay put to keep
+  // text on screen cannot be moved to the text.
+  let pinned = false;
+  const showHint = (on) => {
+    hint.hidden = !on;
+    why.setAttribute("aria-expanded", String(on));
+  };
+  why.setAttribute("aria-expanded", "false");
+  why.onmouseenter = () => showHint(true);
+  why.onmouseleave = () => showHint(pinned);
+  why.onfocus = () => showHint(true);
+  why.onblur = () => showHint(pinned);
+  why.onclick = () => {
+    pinned = !pinned;
+    showHint(pinned);
+  };
+  // Getting a key happens elsewhere and before anything else here can be
+  // filled in, so it sits with the actions rather than inside the sentence
+  // explaining where the key will be stored.
+  const docs = el("a", "quiet", t("models.getKey"));
+  docs.target = "_blank";
+  docs.rel = "noopener noreferrer";
+
+  // The way in, above the field that is the way in for someone who has no
+  // browser here. Closing the dialog on success is the whole reason it is
+  // wired to a callback: the click that opened it was a choice of model, and
+  // that model is still waiting behind the credential.
+  const site = websiteSignIn(
+    provider,
+    () => {
+      if (dialog.open) void done("signed in to " + provider.id);
+    },
+    (reason) => {
+      // The website has no way to redirect back to this address, so the tab
+      // would open on a page that dead-ends. Said here rather than as a
+      // notice, next to the field that is the way in when this one is shut.
+      hint.textContent = reason;
+      hint.hidden = false;
+      field.focus();
+    },
+  );
+  const siteButton = site.querySelector("button");
+  const orCode = el("div", "cn-note", ts("models.orCode"));
+
+  /**
+   * What the dialog opens focused.
+   *
+   * The website button in account mode: it is what most people are here to
+   * press, and a dialog that opens with the cursor in the email field reads
+   * as though the code is the way in and the button above it is an aside.
+   */
+  const focusPrimary = () => {
+    // Whatever the way in is. In account mode that is the website button; with
+    // no account system it is the one that fetches a key, which is the same
+    // shape of thing and deserves the same treatment. The field is where the
+    // cursor goes only when pasting is what is left.
+    const opener = mode === "account" && !flow ? siteButton : noAccounts ? keyButton : undefined;
+    if (opener) opener.focus();
+    else field.focus();
+  };
+
+  const paint = () => {
+    if (mode === "key") {
+      field.type = "password";
+      field.placeholder = (provider.envVars || []).join(" or ") || "API key";
+      // Two lines, and the variable name kept whole: as one sentence it wrapped
+      // mid-identifier, which reads as a different variable than the one to set.
+      hint.replaceChildren(el("div", null, t("models.keyStored")));
+      // Why the other half of this dialog is missing, and how to get it back.
+      // Behind the mark rather than in the body: it is an answer to a question
+      // most readers do not have, and the ones who do will look for it.
+      if (noAccounts) {
+        hint.appendChild(el("div", null, t("models.noAccounts")));
+        hint.appendChild(el("div", null, t("models.noAccountsHow")));
+      }
+      if ((provider.envVars || []).length) {
+        const line = el("div");
+        line.appendChild(document.createTextNode(t("models.keyEnv") + " "));
+        provider.envVars.forEach((name, i) => {
+          if (i) line.appendChild(document.createTextNode(" / "));
+          line.appendChild(el("span", "mono", name));
+        });
+        hint.appendChild(line);
+      }
+      save.textContent = t("models.connect");
+      docs.hidden = !provider.docsUrl;
+      if (provider.docsUrl) docs.href = provider.docsUrl;
+    } else {
+      field.type = flow ? "text" : "email";
+      field.placeholder = flow ? t("models.code") : t("models.email");
+      // Nothing to explain about an email address, so the mark has nothing to
+      // open until the code has been sent and there is something to say.
+      hint.replaceChildren();
+      pinned = false;
+      showHint(false);
+      // Not "sign in": the button above already carries that word, and it is
+      // the one that opens the browser. This one submits a code out of an
+      // email, which is a different promise to make to someone who clicked.
+      save.textContent = flow ? t("models.verify") : t("models.sendCode");
+      docs.hidden = true;
+    }
+    why.hidden = mode !== "key";
+    keptLocal.hidden = !(mode === "key" && thirdParty);
+    // Hidden rather than left out, so switching modes does not rebuild a
+    // button whose click may already have a sign-in running behind it.
+    site.hidden = mode !== "account";
+    orCode.hidden = mode !== "account";
+    // Which control carries the colour. Two filled buttons in one dialog make
+    // the reader choose by position, and position would put the emphasis on
+    // the wrong one here — in account mode the fallback is what sits in the
+    // actions row, and the way in is the button above the field.
+    // The same reasoning as account mode, now that key mode can also have a
+    // button above the field: whichever control is the way in carries the
+    // colour, and the actions row holds the fallback. Two filled buttons make
+    // the reader choose by position, and position would pick the wrong one.
+    save.classList.toggle("approve", mode === "key" && !noAccounts);
+    field.value = "";
+    focusPrimary();
+  };
+
+  const done = async (message) => {
+    dialog.close();
+    // The model the user actually asked for, now that it can be called. Their
+    // click was a choice of model; the credential was a detour.
+    if (thenModel) {
+      const state = await api("/model", { session: activeId, id: thenModel });
+      if (state && state.error) addNotice(state.error, "err");
+      else applyState(state);
+    }
+    await loadModels();
+    // Who is signed in is now a different answer, and the sidebar row is the
+    // one place that shows it on every screen.
+    void loadAccount();
+    // Whatever panel is behind the dialog, not just the models one: the
+    // sign-in is reachable from the sidebar now, where settings may be what
+    // is open. Repainting is a no-op when no panel is showing, which is the
+    // case when this was opened from the composer's model picker.
+    repaintPanel();
+    addNotice(message);
+  };
+
+  const submit = () => {
+    const value = field.value.trim();
+    if (!value) return;
+    const label = save.textContent;
+    save.disabled = true;
+    save.textContent = t("models.saving");
+    const restore = () => {
+      save.disabled = false;
+      save.textContent = label;
+    };
+
+    if (mode === "key") {
+      return void api("/auth", { provider: provider.id, key: value })
+        .then(async (result) => {
+          if (!result || result.error) {
+            return void addNotice((result && result.error) || "could not save that key", "err");
+          }
+          await done("connected " + provider.id + " — discovering its models…");
+        })
+        .finally(restore);
+    }
+
+    if (!flow) {
+      return void api("/signin", { provider: provider.id, answers: { email: value } })
+        .then((result) => {
+          if (!result || result.error) {
+            return void addNotice((result && result.error) || "sign-in failed", "err");
+          }
+          flow = result.flow;
+          paint();
+          // Shown outright, unlike the storage note: it names the address the
+          // code went to, which is the one thing that answers "did that work".
+          if (result.instructions) {
+            hint.textContent = result.instructions;
+            hint.hidden = false;
+          }
+        })
+        .finally(restore);
+    }
+
+    void api("/signin/code", { flow, code: value })
+      .then(async (result) => {
+        if (!result || result.error) {
+          // The flow stays open on a bad code: a mistyped digit should cost a
+          // retry, not another email.
+          return void addNotice((result && result.error) || "sign-in failed", "err");
+        }
+        await done("signed in to " + provider.id + " — discovering its models…");
+      })
+      .finally(restore);
+  };
+
+  save.onclick = submit;
+  field.onkeydown = (e) => {
+    if (e.key === "Enter") submit();
+  };
+  document.getElementById("cn-cancel").onclick = () => dialog.close();
+  document.getElementById("cn-x").onclick = () => dialog.close();
+
+  // Where the key comes from. The text above says a key is the way in and then
+  // said nothing about getting one, which is half an instruction. siteUrl has a
+  // default, so this resolves even on a build that knows no account project.
+  // A button, not a link. The link left the person with a key on their
+  // clipboard and a field to find again; the browser round trip ends with the
+  // key already stored, because the site hands it back over the same loopback
+  // the sign-in uses. It is also where keys are listed and revoked, so
+  // "create one" and "revoke the one this machine was using" are the same
+  // trip.
+  //
+  // Degrades to the link when this window was not reached over loopback: the
+  // site will only redirect a credential to 127.0.0.1, so from a LAN address
+  // the round trip cannot complete and copy-and-paste is the honest offer.
+  let keyButton = null;
+  const keyLink = () => {
+    const href = (modelsSite || "https://oharness.ai") + "/" + LOCALE + "/dashboard/keys";
+    const go = el("button", "signin-site", t("models.getOhKey"));
+    go.type = "button";
+    go.onclick = (e) => {
+      e.preventDefault();
+      const inDialog = (reason) => {
+        hint.textContent = reason;
+        hint.hidden = false;
+        field.focus();
+      };
+      startWebsiteSignIn(
+        provider.id,
+        () => {
+          if (dialog.open) void done("connected " + provider.id);
+        },
+        go,
+        (reason) => {
+          // Reached over a LAN address, so the site will not redirect a
+          // credential back here. The tab still opens — copying a key across
+          // is the way in that remains — and the field below is where it goes.
+          window.open(href, "_blank", "noopener");
+          inDialog(reason);
+        },
+        "key",
+        inDialog,
+      );
+    };
+    keyButton = go;
+    // The same wrapper the website sign-in uses. signin-site carries flex:1,
+    // which is right in a row and wrong in the column this body is — there it
+    // resolves to flex-basis:0 on the height and squashes the button to 25px
+    // above a 38px field. Putting it in the row it was written for fixes that
+    // without changing a rule four other places depend on.
+    const row = el("div", "keyrow");
+    row.appendChild(go);
+    return row;
+  };
+
+  body.replaceChildren(
+    // Why the account half of this dialog is missing, above the half that
+    // still works. Absent for every provider that has nothing to explain.
+    // One line and a button. The recipe for turning sign-in back on used to sit
+    // here as a five-line paragraph, in front of everybody, for the few people
+    // building their own fork — and a dialog whose first screenful is
+    // configuration for somebody else is a dialog nobody reads. It moved
+    // behind the mark, which is what the mark is for.
+    // The button, and the sentence that makes the field beneath it an
+    // alternative rather than a step. "Signing in is not available" moved
+    // behind the mark with the rest of it: the description already says this
+    // dialog connects with a key, so the line answered a question only
+    // somebody expecting a sign-in would ask — and they are exactly who opens
+    // the mark.
+    ...(noAccounts ? [keyLink(), el("div", "cn-note", t("models.orPasteKey"))] : []),
+    site,
+    orCode,
+    field,
+    keptLocal,
+  );
+  // Re-attached on every open: the actions row is markup, so a link left from
+  // the last vendor would otherwise point at their key page. The link is built
+  // fresh each time, so the previous one has to be taken out by hand — testing
+  // this node's own parent never matched, and every open stacked another copy.
+  const actions = save.parentNode;
+  const stale = actions.querySelector("a.quiet");
+  if (stale) stale.remove();
+  actions.appendChild(docs);
+  paint();
+  dialog.showModal();
+  // After showModal, not before: focus given to a node in a dialog that is
+  // not open yet is focus the browser takes straight back.
+  focusPrimary();
+}
+
+/**
+ * Ask a vendor for its models, from wherever the user said so.
+ *
+ * The count is reported either way. A silent zero is indistinguishable from
+ * "this vendor has no models", which is what a local server that is not
+ * running looks like — so the address that was tried goes in the message.
+ */
+function discoverNow(providerId) {
+  const provider = providers.find((p) => p.id === providerId);
+  return api("/models/refresh", { provider: providerId }, 60000).then(async (result) => {
+    if (!result || result.error) {
+      return void addNotice((result && result.error) || "discovery failed", "err");
+    }
+    await loadModels();
+    if (document.getElementById("nav-models").classList.contains("active")) await showModels();
+    addNotice(
+      result.discovered
+        ? t("models.discovered", { id: providerId, n: result.discovered })
+        : t("models.discoveredNone", {
+            id: providerId,
+            url: (provider && provider.baseUrl) || "its endpoint",
+          }),
+      result.discovered ? "notice" : "err",
+    );
+  });
+}
+
+/** A plus in a ring: adding credits. Drawn like the sidebar's other line icons. */
+function iconTopUp() {
+  const NS = "http://www.w3.org/2000/svg";
+  const svg = document.createElementNS(NS, "svg");
+  svg.setAttribute("class", "ico");
+  svg.setAttribute("viewBox", "0 0 16 16");
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("stroke", "currentColor");
+  svg.setAttribute("stroke-width", "1.5");
+  svg.setAttribute("stroke-linecap", "round");
+  svg.setAttribute("stroke-linejoin", "round");
+  svg.setAttribute("aria-hidden", "true");
+  const ring = document.createElementNS(NS, "circle");
+  ring.setAttribute("cx", "8");
+  ring.setAttribute("cy", "8");
+  ring.setAttribute("r", "6.67");
+  svg.appendChild(ring);
+  for (const d of ["M8 5.33v5.34", "M5.33 8h5.34"]) {
+    const path = document.createElementNS(NS, "path");
+    path.setAttribute("d", d);
+    svg.appendChild(path);
+  }
+  return svg;
+}
+
+/** A person, drawn to match the sidebar's other 16px line icons. */
+function iconPerson() {
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("class", "ico");
+  svg.setAttribute("viewBox", "0 0 16 16");
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("stroke", "currentColor");
+  svg.setAttribute("stroke-width", "1.5");
+  svg.setAttribute("stroke-linecap", "round");
+  svg.setAttribute("stroke-linejoin", "round");
+  svg.setAttribute("aria-hidden", "true");
+  for (const d of ["M13.33 14v-1.33A2.67 2.67 0 0 0 10.67 10H5.33a2.67 2.67 0 0 0-2.66 2.67V14"]) {
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttribute("d", d);
+    svg.appendChild(path);
+  }
+  const head = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+  head.setAttribute("cx", "8");
+  head.setAttribute("cy", "5.33");
+  head.setAttribute("r", "2.67");
+  svg.appendChild(head);
+  return svg;
+}
+
+/**
+ * The account row, under the session list.
+ *
+ * Signed out it is one button, because that is the whole of what can be done
+ * from here. Signed in it says who, because the failure this prevents is a
+ * stale login: sync running quietly into somebody else's account is invisible
+ * from every other screen.
+ *
+ * It reuses websiteSignIn rather than growing a login of its own. The site's
+ * page offers a password, Google, and the way to create an account at all,
+ * and none of those can be hosted in a local window — they keep working here
+ * precisely because this does not reimplement them.
+ */
+/**
+ * The teams the account is on, as the last account load found them.
+ *
+ * Kept here so the paywall can name a team by its id without a second
+ * request: the id is what the billing answer carries, and the name is what
+ * a person reads.
+ */
+let knownTeams = [];
+
+async function loadAccount() {
+  const host = document.getElementById("account");
+  if (!host) return;
+  const body = await getJson("/account");
+  host.replaceChildren();
+  if (!body || body.error) return;
+
+  host.classList.toggle("out", !body.signedIn);
+
+  if (!body.signedIn) {
+    // One row, not three. An empty avatar and the words "not signed in"
+    // beside a button labelled "Sign in" were the same fact said three times,
+    // and the two that were not clickable were the two taking the space. What
+    // is left reads as what it is — another way out of the sidebar, in the
+    // shape of the rows above it — with the one thing the button does not
+    // say, the state you are in meanwhile, in the aside slot they already have.
+    const go = el("button", "nav-item");
+    go.type = "button";
+    go.appendChild(iconPerson());
+    go.appendChild(el("span", null, t("account.signIn")));
+    // In the slot the nav rows already keep for a quiet aside — the model
+    // count, the search chord. It says what is true right now rather than
+    // repeating the button: nothing is leaving this machine.
+    go.appendChild(el("span", "count", t("account.localOnly")));
+    // The same dialog the models panel and the composer open. It used to go
+    // straight to the browser from here, which was one click faster and had
+    // no way back: a machine the website cannot redirect to — reached over a
+    // LAN address rather than loopback — left this button opening a tab that
+    // dead-ends, with the emailed code that would have worked nowhere in
+    // reach. The dialog is the one place all the ways in are on screen.
+    go.addEventListener("click", () => openConnect(body.provider));
+    host.appendChild(go);
+    return;
+  }
+
+  // Who, and nothing else. "Account connected" restated the fact that a name
+  // was on screen at all, in the line under the name — and a Sign out button
+  // sitting permanently in the corner gives the rarest thing anyone does here
+  // the most reliable target in the sidebar. Both go behind the row itself,
+  // which is now the button: a name you can click is where every other app
+  // keeps the account menu, so it needs no label saying so.
+  const row = el("button", "account-btn");
+  row.type = "button";
+  const name = body.name || body.email || t("account.signedIn");
+  row.appendChild(avatarFor(name, body.avatar));
+  row.appendChild(el("span", "who-name", name));
+  row.appendChild(svgIcon("chevronsVertical", "acct-caret"));
+
+  // The balance, once it can be read. Running out mid-turn is the failure this
+  // prevents: a number that appears only in a paywall is a number nobody sees
+  // until it is too late to act on calmly. It heads the menu rather than the
+  // row — a number under a name reads as part of the name, and this one is
+  // worth reading on the way to the dashboard rather than at a glance. Asked
+  // for separately so a gateway having a bad day cannot keep the row from
+  // saying who is signed in, which is the thing it is actually for.
+  // Whether there is a shop at all. A self-hosted gateway sells nothing, and
+  // an entry that opens a paywall with no plans in it is worse than no entry.
+  let sellsCredits = false;
+  // Whether the plan is live. This decides which billing action is primary in
+  // the account card: Subscribe before a plan, Top up afterwards.
+  let subscribed = false;
+  // The team this machine bills to, once the gateway has said what it has.
+  // A team the account was removed from comes back refused, and the line
+  // says so rather than showing a number it could not read.
+  let teamLine = null;
+  // Whether the headline is a chosen team's rather than the person's, and
+  // whether this person may pay for it. A team is bought and topped up on its
+  // page on the site, and only by members with billing rights.
+  let onTeam = false;
+  let teamBilling = false;
+  // The card's parts, kept apart rather than joined into sentences: whose
+  // workspace (top left), its plan and whether that plan is live (top right),
+  // and the balance under both. Joined with middle dots they read as one
+  // shouted caption with nothing in it standing out.
+  let workspaceName = null;
+  let planName = null;
+  let planStatus = null;
+  let credits = null;
+  knownTeams = Array.isArray(body.teams) ? body.teams : [];
+  const teamNameOf = (id) => {
+    const found = knownTeams.find((team) => team.id === id);
+    return found ? found.name : t("account.teamUnnamed");
+  };
+  void getJson("/billing").then((state) => {
+    if (!state || !state.signedIn || state.unavailable) return;
+    sellsCredits = true;
+    // The plan, from the same answer the balance comes out of: "0 credits"
+    // reads as a problem to someone on a plan and as a fact of life to someone
+    // who never subscribed, and the two want different next steps.
+    const sub = state.subscription;
+    subscribed = Boolean(sub && (sub.status === "active" || sub.status === "trialing"));
+    // A plan's name as the catalogue spells it ("Team"), not its id ("team");
+    // the id stands in only for a plan the catalogue no longer lists.
+    const planLabel = (id) => {
+      const found = (Array.isArray(state.plans) ? state.plans : []).find((one) => one && one.id === id);
+      return (found && found.label) || id;
+    };
+    workspaceName = t("account.personal");
+    planName = sub && sub.plan ? planLabel(sub.plan) : null;
+    planStatus = sub && sub.plan ? sub.status : null;
+    credits = state.balanceMicro !== undefined ? creditsOf(state.balanceMicro) : null;
+    if (state.team && state.team.refused) {
+      teamLine = t("account.teamRefused", { team: teamNameOf(state.team.id) });
+    } else if (state.team) {
+      // A chosen team is whose money the next call spends, so the card is the
+      // team's alone: its balance and its plan, which decides Subscribe or Top
+      // up. The person's own plan used to lead instead, and a member of a
+      // paying team with no plan of their own was told "No subscription" and
+      // offered one. Their own balance is not shown beside it — two balances in
+      // one card left it unclear which the next call draws on — and choosing
+      // Personal in this menu shows it.
+      const name = teamNameOf(state.team.id);
+      const teamSub = state.team.subscription;
+      teamBilling = state.team.billing === true;
+      subscribed = Boolean(teamSub && (teamSub.status === "active" || teamSub.status === "trialing"));
+      workspaceName = name;
+      planName = teamSub && teamSub.plan ? planLabel(teamSub.plan) : null;
+      planStatus = teamSub && teamSub.plan ? teamSub.status : null;
+      credits = creditsOf(state.team.balanceMicro || 0);
+      onTeam = true;
+    }
+  });
+
+  // Switch whose credits the next call spends. Said out loud, because the
+  // only other sign is a different number in this menu next time it opens.
+  const billTo = (id) => {
+    closeRowMenu();
+    void api("/team", { team: id }).then((result) => {
+      if (!result || result.error) return void addNotice((result && result.error) || "could not switch", "err");
+      addNotice(id ? t("account.usingTeam", { team: teamNameOf(id) }) : t("account.usingOwn"));
+      void loadAccount();
+    });
+  };
+
+  row.addEventListener("click", (e) => {
+    e.stopPropagation();
+    if (menuRow === row) return closeRowMenu();
+    const items = [];
+    // The two facts, in one block with a surface under them. They were two
+    // dim lines the size of a footnote, above the things to click — which is
+    // backwards: the balance is why somebody opened this menu, and the plan
+    // is what decides which of the entries below is the one they want.
+    if (workspaceName || teamLine) {
+      const head = el("div", "menu-head account-card");
+      if (workspaceName) {
+        const top = el("div", "menu-head-top");
+        top.appendChild(el("span", "menu-head-name", workspaceName));
+        // The plan as a pill whose dot says whether it is live: green for a
+        // plan that pays, amber for one whose payment failed, grey for none.
+        // The word for the status is written only when it is not the ordinary
+        // one — "Active" beside every paying plan is a word nobody reads.
+        const live = planStatus === "active" || planStatus === "trialing";
+        const pill = el("span", "plan-pill" + (live ? " ok" : planStatus === "past_due" ? " warn" : ""));
+        pill.appendChild(el("i", "plan-pill-dot"));
+        pill.appendChild(el("span", "plan-pill-name", planName || t("account.noPlan")));
+        if (planName && planStatus && planStatus !== "active") {
+          pill.appendChild(el("span", "plan-pill-status", t("account.status." + planStatus)));
+        }
+        if (planName && planStatus) pill.title = t("account.status." + planStatus);
+        top.appendChild(pill);
+        head.appendChild(top);
+      }
+      if (credits !== null) {
+        const amount = el("div", "menu-head-amount");
+        amount.appendChild(el("span", "menu-head-num", credits));
+        amount.appendChild(el("span", "menu-head-unit", t("account.creditsUnit")));
+        head.appendChild(amount);
+      }
+      // A team the account was removed from: said in place of a balance the
+      // gateway would not give.
+      if (teamLine) head.appendChild(el("div", "menu-head-sub", teamLine));
+      if (sellsCredits && onTeam) {
+        // One action, on the team page: that is where a team plan is bought
+        // and a team balance topped up. Members without billing rights get
+        // none — a button that can only fail is worse than its absence, and
+        // the paywall already tells them to ask when the credits run out.
+        if (teamBilling) {
+          const actions = el("div", "menu-billing-actions");
+          const go = el("button", "menu-billing-action primary", t(subscribed ? "paywall.topUp" : "paywall.subscribe"));
+          go.type = "button";
+          go.addEventListener("click", () => {
+            closeRowMenu();
+            if (body.site) window.open(body.site + "/" + LOCALE + "/dashboard/team", "_blank", "noopener");
+          });
+          actions.appendChild(go);
+          head.appendChild(actions);
+        }
+      } else if (sellsCredits) {
+        const actions = el("div", "menu-billing-actions");
+        if (!subscribed) {
+          const subscribe = el("button", "menu-billing-action primary", t("paywall.subscribe"));
+          subscribe.type = "button";
+          subscribe.addEventListener("click", () => {
+            closeRowMenu();
+            openPaywall(true);
+          });
+          actions.appendChild(subscribe);
+        }
+        const topUp = el("button", "menu-billing-action" + (subscribed ? " primary" : ""), t("paywall.topUp"));
+        topUp.type = "button";
+        topUp.disabled = !subscribed;
+        if (!subscribed) topUp.title = t("paywall.needsPlan");
+        topUp.addEventListener("click", () => {
+          closeRowMenu();
+          openPaywall(true);
+        });
+        actions.appendChild(topUp);
+        head.appendChild(actions);
+      }
+      items.push(head);
+    }
+    // The dashboard straight under the balance it explains, and above the
+    // workspace list, which is a choice rather than a destination.
+    items.push(
+      menuItem(t("account.dashboard"), {
+        run: () => {
+          closeRowMenu();
+          if (body.site) window.open(body.site + "/" + LOCALE + "/dashboard", "_blank", "noopener");
+        },
+      }),
+    );
+    // Whose credits the next call spends: Personal, or a team the account is
+    // on, the current one ticked the way the model menu ticks its choice.
+    // Only once there is a team to choose, since a list of one is no choice.
+    if (knownTeams.length) {
+      items.push(el("div", "menu-head menu-section", t("account.workspace")));
+      const choice = (label, id) => {
+        const chosen = (body.team || null) === id;
+        const item = el("button", "menu-item" + (chosen ? " on" : ""));
+        item.type = "button";
+        item.appendChild(el("span", "tick", "\u2713"));
+        item.appendChild(el("span", "menu-label", label));
+        item.addEventListener("click", () => (chosen ? closeRowMenu() : billTo(id)));
+        return item;
+      };
+      items.push(choice(t("account.personal"), null));
+      knownTeams.forEach((team) => items.push(choice(team.name, team.id)));
+    }
+    // The way to a workspace at all, for everyone signed in: Create a team for an
+    // account on none, Manage workspaces once there is one. Both are the team page
+    // on the site, in the real browser, where a team is started, its people
+    // invited and its seats bought.
+    if (body.site) {
+      items.push(
+        menuItem(t(knownTeams.length ? "account.manageTeams" : "account.createTeam"), {
+          run: () => {
+            closeRowMenu();
+            window.open(body.site + "/" + LOCALE + "/dashboard/team", "_blank", "noopener");
+          },
+        }),
+      );
+    }
+    // The two pages this menu had no way to reach, under the workspace rows
+    // they belong beside: what a team costs and how to ask for the parts of it
+    // that are not self-serve, and the way to reach a person at all. Both open
+    // in the real browser like every other outbound item here — in the desktop
+    // build the window handler routes them there rather than loading the site
+    // inside the window the session lives in.
+    if (body.site) {
+      items.push(
+        menuItem(t("account.enterprise"), {
+          run: () => {
+            closeRowMenu();
+            window.open(body.site + "/" + LOCALE + "/enterprise", "_blank", "noopener");
+          },
+        }),
+        menuItem(t("account.contact"), {
+          run: () => {
+            closeRowMenu();
+            window.open(body.site + "/" + LOCALE + "/contact", "_blank", "noopener");
+          },
+        }),
+      );
+    }
+    items.push(
+      menuItem(t("account.download"), {
+        run: () => {
+          closeRowMenu();
+          if (body.site) window.open(body.site + "/" + LOCALE + "/download", "_blank", "noopener");
+        },
+        cls: "accent",
+      }),
+      themeRow(),
+      menuItem(t("account.signOut"), {
+        run: () => {
+          closeRowMenu();
+          void api("/logout", { provider: body.provider }).then(() => {
+            void loadAccount();
+            // Sync reads this credential, so the settings page is now wrong.
+            repaintPanel();
+          });
+        },
+      }),
+    );
+    openRowMenu(row, row, items);
+    // As wide as the row it opens from, and placed again once it is: the
+    // first placement measured the menu at its own width.
+    rowMenu.classList.add("fit-anchor", "account-menu");
+    rowMenu.style.width = row.getBoundingClientRect().width + "px";
+    placeRowMenu(row);
+  });
+  host.appendChild(row);
+}
+
+/**
+ * The circle at the front of the account row.
+ *
+ * The picture when the sign-in knew one — a Google account does — and the
+ * initial when it did not, which is also what is on screen for the moment
+ * before the picture arrives and forever if it never does. Drawn behind the
+ * image rather than swapped in on failure, so a broken address degrades to a
+ * letter instead of to a hole in the row.
+ */
+function avatarFor(name, url) {
+  const avatar = el("div", "avatar");
+  avatar.textContent = (name || "?").slice(0, 1).toUpperCase();
+  if (!url) return avatar;
+  const img = el("img");
+  img.src = url;
+  img.alt = "";
+  img.referrerPolicy = "no-referrer";
+  img.addEventListener("error", () => img.remove());
+  avatar.appendChild(img);
+  return avatar;
+}
+
+/**
+ * Signing in the way the website does, in the browser the user already has.
+ *
+ * The site's login offers a password, Google, and the way to *create* an
+ * account in the first place — none of which a local window can host, and all
+ * of which stay working here for free because this button does not
+ * reimplement any of them. It opens a tab, the tab comes back to a callback on
+ * this server, and the panel repaints when the sign-in lands.
+ *
+ * Opened with window.open rather than as a link: in the desktop build the
+ * window handler routes that to the real browser, where a link would have
+ * loaded the site inside the app, in the window the agent's session lives in.
+ */
+function websiteSignIn(provider, onSignedIn, onUnavailable) {
+  const row = el("div", "keyrow");
+  const go = el("button", "signin-site", t("models.signInWithSite"));
+  go.type = "button";
+  go.addEventListener("click", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    startWebsiteSignIn(provider.id, onSignedIn, go, onUnavailable);
+  });
+  row.appendChild(go);
+  return row;
+}
+
+/**
+ * The sign-in itself, without a button attached to it.
+ *
+ * Kept separate from the button so the behaviour — where the tab is opened,
+ * which waiter is registered, what is said while it is open — has one home,
+ * whatever the control that starts it looks like.
+ *
+ * onUnavailable is for the one refusal that is not an error to report and
+ * forget: this server was reached at an address the website is not allowed to
+ * redirect back to, so the browser route is shut and the emailed code is the
+ * way in. The caller is the one that can put that where the user is looking.
+ */
+function startWebsiteSignIn(providerId, onSignedIn, button, onUnavailable, intent, onError) {
+  if (button) button.disabled = true;
+  void api("/signin/browser", { provider: providerId, locale: LOCALE, ...(intent ? { intent } : {}) })
+    .then((result) => {
+      if (!result || result.error) {
+        const message = (result && result.error) || "could not start the sign-in";
+        if (result && result.fallback === "code" && onUnavailable) return void onUnavailable(message);
+        // A caller with a dialog open has somewhere better to put this.
+        // addNotice writes to the transcript when no panel is up, so an error
+        // from a button in a modal would arrive behind the modal, under an
+        // assistant heading, reading as something the model said.
+        if (onError) return void onError(message);
+        return void addNotice(message, "err");
+      }
+      // Only now: a sign-in that never started has nothing to wait for, and a
+      // waiter left behind would fire on the next unrelated discovery.
+      if (onSignedIn) signedInWaiters.set(providerId, onSignedIn);
+      window.open(result.url, "_blank", "noopener");
+      // The tab is where the user is now, and it can take a minute. Saying so
+      // beats a button that went quiet: the panel repaints by itself when the
+      // callback lands, so there is nothing to come back and click.
+      addNotice(t("models.signInOpened", { site: result.site || "the website" }));
+    })
+    .finally(() => {
+      if (button) button.disabled = false;
+    });
+}
+
+
+/**
+ * How often the paywall asks whether the money landed.
+ *
+ * Nothing pushes the answer here. Stripe tells the gateway over a webhook and
+ * the gateway writes a ledger row; this side has no channel either of them
+ * speaks on, so the balance is the only thing to watch. Five seconds is slow
+ * enough to be free and fast enough that nobody goes back to the browser tab
+ * to check whether it worked.
+ */
+const PAYWALL_POLL_MS = 5000;
+let paywallTimer = null;
+
+/** Credits as a person reads them, from the micro-credits the ledger keeps. */
+/**
+ * What a plan costs, in the currency it is sold in.
+ *
+ * The gateway has always sent amountCents and currency and the paywall threw
+ * them away, so every row said how many credits and never how much money —
+ * which is the one number somebody deciding between four rows needs.
+ */
+function moneyOf(cents, currency) {
+  if (typeof cents !== "number") return "";
+  return (cents / 100).toLocaleString(LOCALE, {
+    style: "currency",
+    currency: (currency || "usd").toUpperCase(),
+    minimumFractionDigits: cents % 100 === 0 ? 0 : 2,
+    maximumFractionDigits: 2,
+  });
+}
+
+function creditsOf(micro) {
+  return (Number(micro || 0) / 1000000).toLocaleString(LOCALE, {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2,
+  });
+}
+
+function closePaywall() {
+  if (paywallTimer) { clearInterval(paywallTimer); paywallTimer = null; }
+  const dialog = document.getElementById("paywall");
+  if (dialog.open) dialog.close();
+}
+
+/**
+ * The paywall: what this account has left, and what it could buy.
+ *
+ * Opened by a 402 and by nothing else — the account could not pay for the
+ * turn that was just sent.
+ *
+ * The advice differs by who is asking, which is why the balance is fetched
+ * rather than assumed: a subscriber whose period ran out tops up, someone who
+ * never subscribed subscribes, and telling either of them the other's answer
+ * sends them somewhere that cannot help. The gateway already makes that split
+ * in its refusal message; it is made again here because here it can be a
+ * button instead of a sentence.
+ *
+ * Paying itself happens in the browser, for the same reason signing in does:
+ * Stripe's page runs 3-D Secure and hands off to a bank's own app, and a local
+ * window can host neither. What comes back is a webhook to a service this app
+ * never talks to — so the way this screen learns it worked is by watching the
+ * balance, which is also the only number that was ever the real answer.
+ */
+/** Which interval the paywall is showing. Monthly by default: it is the
+ * smaller commitment, and this dialog is interrupting somebody who wanted to
+ * send a message, not shopping. */
+/**
+ * Light, dark, or whatever the system says.
+ *
+ * Three states rather than a switch, because following the system was the
+ * behaviour before this existed and taking it away to gain a toggle is a
+ * trade nobody asked for. Stored per browser: it describes this screen in
+ * this room, not the account.
+ */
+const THEMES = ["system", "light", "dark"];
+let theme = "system";
+try {
+  const saved = localStorage.getItem("oharness-theme");
+  if (THEMES.indexOf(saved) > 0) theme = saved;
+} catch {
+  // Private windows and blocked site data both throw here. Following the
+  // system is the right answer when the preference cannot be read.
+}
+function applyTheme() {
+  if (theme === "system") document.documentElement.removeAttribute("data-theme");
+  else document.documentElement.setAttribute("data-theme", theme);
+  try {
+    if (theme === "system") localStorage.removeItem("oharness-theme");
+    else localStorage.setItem("oharness-theme", theme);
+  } catch {
+    // Unstorable is not unusable: it applies for this tab and forgets after.
+  }
+}
+applyTheme();
+
+let pwInterval = "month";
+
+/**
+ * @param buying  Opened deliberately, rather than by a turn that could not be
+ *   paid for. The screen is the same and the sentence at the top is not: a
+ *   dialog that says "this turn could not be paid for" to somebody who chose
+ *   Subscribe from a menu is describing a failure that did not happen.
+ */
+function openPaywall(buying) {
+  const dialog = document.getElementById("paywall");
+  const body = document.getElementById("pw-body");
+  document.getElementById("pw-title").textContent = t(buying ? "paywall.titleBuy" : "paywall.title");
+  document.getElementById("pw-desc").textContent = t(buying ? "paywall.descBuy" : "paywall.desc");
+
+  let site = "";
+  // Whether a checkout has been opened in a browser tab. Kept as state rather
+  // than as a line appended after the click, because the poll below repaints
+  // the body every few seconds — an appended note lived until the first tick
+  // and then vanished, which reads as the click having done nothing.
+  let awaiting = false;
+  // Assigned rather than added: this can be opened many times in a session,
+  // and addEventListener would stack a handler per opening.
+  document.getElementById("pw-close").onclick = () => closePaywall();
+  document.getElementById("pw-site").onclick = () => {
+    window.open(site ? site + "/" + LOCALE + "/dashboard" : "https://oharness.ai", "_blank", "noopener");
+  };
+  // Escape closes a dialog without going through the button, and a timer left
+  // running behind a closed dialog polls a gateway forever.
+  dialog.onclose = () => {
+    if (paywallTimer) { clearInterval(paywallTimer); paywallTimer = null; }
+  };
+
+  const buy = (plan, button) => {
+    button.disabled = true;
+    void api("/billing/checkout", {
+      plan: plan.id,
+      locale: LOCALE,
+      ...(plan.buyCents ? { amount: plan.buyCents } : {}),
+    })
+      .then((result) => {
+        if (!result || result.error || !result.url) {
+          return void addNotice((result && result.error) || "could not start the checkout", "err");
+        }
+        window.open(result.url, "_blank", "noopener");
+        // The user is in a browser tab now and it can take a minute. The
+        // dialog stays open because it is what closes itself when the credits
+        // arrive — there is nothing to come back here and click.
+        awaiting = true;
+        body.appendChild(el("div", "cn-note", t("paywall.opened")));
+      })
+      .finally(() => {
+        button.disabled = false;
+      });
+  };
+
+  const render = (state) => {
+    if (!dialog.open) return;
+    site = state.site || site;
+    body.replaceChildren();
+
+    if (!state.signedIn) {
+      // A 402 means a credential was accepted, so this is the rarer case of a
+      // sign-out between the refusal and this fetch. Still worth answering
+      // properly: the way out is the sign-in, not a price list.
+      body.appendChild(el("div", "cn-note", t("paywall.signIn")));
+      const go = el("button", "signin-site", t("models.signInWithSite"));
+      go.type = "button";
+      go.onclick = () => {
+        closePaywall();
+        openConnect(state.provider || "official");
+      };
+      body.appendChild(go);
+      return;
+    }
+
+    // The balance first: it is the fact the rest of the screen is about, and a
+    // paywall that does not show it is asking to be taken at its word.
+    //
+    // Only when it was actually read, though. A gateway that could not be
+    // reached leaves this undefined, and rendering that as "0 credits" would
+    // state as fact the one thing this screen just failed to find out.
+    if (state.balanceMicro !== undefined) {
+      const balance = el("p", "pw-balance");
+      balance.appendChild(el("strong", null, creditsOf(state.balanceMicro)));
+      balance.appendChild(el("span", "muted", t("paywall.unit")));
+      body.appendChild(balance);
+    }
+
+    if (state.unavailable) {
+      // A deployment that sells nothing is not broken — self-hosted gateways
+      // grant credits by hand — so this reads as a fact rather than a failure,
+      // and the site button below is still the way on.
+      body.appendChild(
+        el("div", "cn-note",
+          t(state.unavailable === "not_for_sale" ? "paywall.notForSale" : "paywall.unreachable")),
+      );
+      return;
+    }
+
+    // A team is chosen, so the balance that ran out is the team's, and the
+    // shop for it is on the site rather than here — only someone with billing
+    // permission buys for the team, and they do it on the team page. What this screen
+    // can offer is the team's number, who can fix it, and the way back to
+    // spending one's own credits.
+    if (state.team) {
+      const teamName = (knownTeams.find((team) => team.id === state.team.id) || {}).name
+        || t("account.teamUnnamed");
+      if (state.team.refused) {
+        body.appendChild(el("div", "cn-note", t("account.teamRefused", { team: teamName })));
+      } else {
+        const pooled = el("p", "pw-balance");
+        pooled.appendChild(el("strong", null, creditsOf(state.team.balanceMicro || 0)));
+        pooled.appendChild(el("span", "muted", t("paywall.teamUnit", { team: teamName })));
+        body.appendChild(pooled);
+        body.appendChild(
+          el("div", "cn-note",
+            t(state.team.billing ? "paywall.teamOwner" : "paywall.teamMember", { team: teamName })),
+        );
+      }
+      const actions = el("div", "pw-plans");
+      if (state.team.billing || state.team.refused) {
+        const page = el("button", "pw-plan", t("paywall.teamPage"));
+        page.type = "button";
+        page.onclick = () => {
+          window.open((site || "https://oharness.ai") + "/" + LOCALE + "/dashboard/team", "_blank", "noopener");
+        };
+        actions.appendChild(page);
+      }
+      const own = el("button", "pw-plan", t("account.useOwn"));
+      own.type = "button";
+      own.onclick = () => {
+        void api("/team", { team: null }).then(() => {
+          void loadAccount();
+          void check();
+        });
+      };
+      actions.appendChild(own);
+      body.appendChild(actions);
+      return;
+    }
+
+    const sub = state.subscription;
+    const subscribed = Boolean(sub && (sub.status === "active" || sub.status === "trialing"));
+    body.appendChild(
+      el("div", "cn-note", subscribed ? t("paywall.subscribed", { plan: sub.plan }) : t("paywall.new")),
+    );
+
+    const plans = state.plans || [];
+    // payg is configured on the site, not bought here — the gateway refuses a
+    // checkout for it — so it is not a row. The account page button below is
+    // where it lives.
+    const packs = plans.filter((plan) => plan.kind === "topup");
+    // The seat plan is a team's and is bought on the team page; on this
+    // list it would be a rung this account cannot buy for itself.
+    const subs = plans.filter((plan) => plan.kind === "subscription" && !plan.seat);
+
+    if (!subs.length && !packs.length) {
+      body.appendChild(el("div", "cn-note", t("paywall.notForSale")));
+      return;
+    }
+
+    /**
+     * What a yearly rung saves against paying monthly for the same tier.
+     *
+     * The only thing on these cards nobody can work out by looking. Monthly is
+     * one price per credit across all four tiers — buying up buys volume, not
+     * a discount — so a rate printed on those rows would be the same number
+     * four times. The year is where the money actually differs, and seeing it
+     * takes multiplying a price by twelve in your head.
+     *
+     * Computed rather than configured, so it cannot disagree with what the
+     * checkout charges. Zero is returned as nothing: Starter's year is twelve
+     * months at the same price, and a "Save 0%" badge on it would be a worse
+     * lie than silence.
+     */
+    const savingOn = (plan) => {
+      if (plan.interval !== "year" || !plan.tier) return 0;
+      const monthly = subs.find((p) => p.tier === plan.tier && p.interval === "month");
+      if (!monthly || typeof monthly.amountCents !== "number" || typeof plan.amountCents !== "number") return 0;
+      const full = monthly.amountCents * 12;
+      if (full <= 0 || plan.amountCents >= full) return 0;
+      return Math.round((1 - plan.amountCents / full) * 100);
+    };
+
+    /** One row: what it is, how many credits, and how much money. */
+    const planRow = (plan, suffix) => {
+      const row = el("button", "pw-plan" + (plan.popular ? " featured" : ""));
+      row.type = "button";
+      // Two lines rather than one, because two of these sit side by side on a
+      // wide screen and the three-column row they used to be does not survive
+      // being halved. The line that decides is on top.
+      const top = el("span", "pw-plan-top");
+      const name = el("span", "pw-plan-name");
+      name.appendChild(document.createTextNode(plan.label || plan.id));
+      // The catalogue marks one rung. Saying so is the whole of the advice
+      // this dialog can give about which to pick.
+      if (plan.popular) name.appendChild(el("span", "pw-tag", t("paywall.popular")));
+      top.appendChild(name);
+      const money = moneyOf(plan.amountCents, plan.currency);
+      if (money) top.appendChild(el("span", "pw-plan-price", money + (suffix || "")));
+      row.appendChild(top);
+      // The pack's own label is already "2,000 credits", so repeating the
+      // number underneath it said the same thing twice. Subscriptions need
+      // the line — their names are tiers, not amounts.
+      // The same sentence the pricing page prints, for the same reason it
+      // prints it: "12,000 credits" does not say whether that arrives once or
+      // twelve times, and the answer is the second one. A subscription is an
+      // allowance, and a card that states a total without its period is
+      // describing a top-up.
+      const count = creditsOf(plan.creditsMicro);
+      const amount =
+        plan.kind === "subscription"
+          ? t(plan.interval === "year" ? "paywall.everyYear" : "paywall.everyMonth", { credits: count })
+          : count + " " + t("paywall.unit");
+      const saved = savingOn(plan);
+      if ((plan.label || "") !== amount || saved) {
+        const under = el("span", "pw-plan-under");
+        if ((plan.label || "") !== amount) under.appendChild(el("span", null, amount));
+        // Under the price it is about, not beside the name. The badge by the
+        // name says which rung to pick; this one says what the year costs.
+        if (saved) under.appendChild(el("span", "pw-save", t("paywall.save", { percent: saved })));
+        row.appendChild(under);
+      }
+      row.onclick = () => buy(plan, row);
+      return row;
+    };
+
+    // Four tiers sold two ways came out as eight rows with four repeated
+    // names and nothing saying which was which. They are the same four
+    // offers; the interval is a choice about them, so it is a control rather
+    // than eight buttons.
+    const byInterval = { month: subs.filter((p) => p.interval === "month"),
+                         year: subs.filter((p) => p.interval === "year") };
+    const intervals = ["month", "year"].filter((k) => byInterval[k].length > 0);
+    const other = subs.filter((p) => p.interval !== "month" && p.interval !== "year");
+
+    if (subs.length) {
+      if (intervals.length > 1) {
+        const toggle = el("div", "pw-toggle");
+        intervals.forEach((key) => {
+          const tab = el("button", "pw-tab" + (key === pwInterval ? " on" : ""));
+          tab.type = "button";
+          tab.textContent = t(key === "year" ? "paywall.yearly" : "paywall.monthly");
+          tab.onclick = () => {
+            pwInterval = key;
+            render(state);
+          };
+          toggle.appendChild(tab);
+        });
+        body.appendChild(toggle);
+      }
+      const showing = intervals.length > 1 ? byInterval[pwInterval] || [] : subs;
+      const list = el("div", "pw-plans");
+      showing.concat(other).forEach((plan) => {
+        list.appendChild(planRow(plan, t(plan.interval === "year" ? "paywall.perYear" : "paywall.perMonth")));
+      });
+      body.appendChild(list);
+    }
+
+    // The one-off, at the bottom, for whoever already has a plan. A top-up
+    // covers a month that ran short rather than standing in for a subscription,
+    // and the gateway refuses one from an account with none — so without a
+    // plan this is the sentence saying so rather than rows that end in a
+    // refusal after the click. The rows come back the moment there is a
+    // subscription to top up.
+    if (packs.length && !subscribed) {
+      body.appendChild(el("div", "cn-note", t("paywall.needsPlan")));
+    } else if (packs.length) {
+      body.appendChild(el("div", "pw-sep", t("paywall.orOnce")));
+      const once = el("div", "pw-plans");
+      packs.forEach((plan) => {
+        // A pack is one rung of a ladder the catalogue already defines, and
+        // the paywall was showing the bottom one as though it were the whole
+        // offer. The presets are the amounts the catalogue means people to
+        // pick from; the rate beside them turns each into its credits, so the
+        // rows cannot disagree with what the checkout grants.
+        const ladder = plan.custom;
+        const presets = ladder && ladder.presetCents ? ladder.presetCents : [];
+        if (!presets.length) return void once.appendChild(planRow(plan, ""));
+        presets.forEach((cents) => {
+          const micro = (ladder.creditsMicroPerCent || 0) * cents;
+          once.appendChild(
+            planRow(
+              {
+                ...plan,
+                // Not the pack's own label: at $50 that would still read
+                // "2,000 credits", which is the wrong number on the button.
+                label: creditsOf(micro) + " " + t("paywall.unit"),
+                creditsMicro: micro,
+                amountCents: cents,
+                // What the checkout is told. Absent on a rung that is the
+                // pack's own price, so that purchase stays the plain one.
+                ...(cents === plan.amountCents ? {} : { buyCents: cents }),
+              },
+              "",
+            ),
+          );
+        });
+      });
+      body.appendChild(once);
+    }
+    if (awaiting) body.appendChild(el("div", "cn-note", t("paywall.opened")));
+  };
+
+  const check = () =>
+    getJson("/billing").then((state) => {
+      if (!dialog.open) return;
+      if (!state || state.error) {
+        return void render({ signedIn: true, unavailable: "unreachable" });
+      }
+      // Credits on the account mean the turn can be sent again, whether they
+      // arrived a second ago or were there the whole time. Both are the same
+      // sentence to whoever is looking at this. With a team chosen it is the
+      // team's number that decides: the person's own credits are not what
+      // the next call draws on.
+      const pooled = state.team && !state.team.refused ? state.team : undefined;
+      const spendable = pooled ? Number(pooled.balanceMicro || 0) : Number(state.balanceMicro || 0);
+      if (state.signedIn && spendable > 0) {
+        closePaywall();
+        return void addNotice(t("paywall.ready", { credits: creditsOf(spendable) }));
+      }
+      render(state);
+    });
+
+  body.replaceChildren(el("div", "cn-note", t("paywall.checking")));
+  if (!dialog.open) dialog.showModal();
+  void check();
+  if (paywallTimer) clearInterval(paywallTimer);
+  paywallTimer = setInterval(() => void check(), PAYWALL_POLL_MS);
+}
+
+/**
+ * Bring one provider's card into view, opened and ready to be filled in.
+ *
+ * Every route into the panel that is about a particular vendor ends here:
+ * scrolled to, expanded, and — when the vendor still needs a credential —
+ * with the cursor already in the key field, so the click that asked to set it
+ * up does not land on a list the user has to search again.
+ */
+function revealProvider(providerId) {
+  const card = document.querySelector('[data-provider="' + providerId + '"]');
+  if (!card) return;
+  card.open = true;
+  card.scrollIntoView({ block: "center" });
+  const field = card.querySelector(".keyrow input");
+  if (field) field.focus();
+}
+
+
+/**
+ * The long tail of providers, behind a search.
+ *
+ * Two dozen vendors listed at once is a wall that buries the four anyone
+ * actually uses, and a flat list is only navigable by scrolling. Picking one
+ * here promotes it into the panel above, where signing in happens.
+ */
+function openProviderPicker(rest, byProvider) {
+  const dialog = document.getElementById("provider-picker");
+  const field = document.getElementById("pp-search");
+  const listEl = document.getElementById("pp-list");
+
+  const paint = () => {
+    const query = field.value.trim().toLowerCase();
+    const words = query.split(/\s+/).filter(Boolean);
+    listEl.replaceChildren();
+
+    const matchesProvider = (provider) => {
+      const hay = (provider.label + " " + provider.id + " " + (provider.description || "")).toLowerCase();
+      return words.every((word) => hay.includes(word));
+    };
+
+    let shown = 0;
+    for (const provider of rest) {
+      const owned = byProvider.get(provider.id) || [];
+      // A query may match the vendor or one of its models; showing the vendor
+      // with only its matching models is more useful than either alone.
+      const hits = words.length
+        ? owned.filter((model) => words.every((word) => model.id.toLowerCase().includes(word)))
+        : owned;
+      if (words.length && !matchesProvider(provider) && !hits.length) continue;
+      shown++;
+
+      const row = el("details", "pp-provider");
+      // Searching opens what it found; browsing starts folded.
+      row.open = Boolean(words.length && hits.length);
+
+      const head = el("summary", "pp-item");
+      head.appendChild(el("span", "chev"));
+      head.appendChild(providerMark(provider.id, provider.label || provider.id));
+      const naming = el("div", "naming");
+      naming.appendChild(el("div", "pp-name", provider.label || provider.id));
+      if (provider.description) naming.appendChild(el("div", "row-desc", provider.description));
+      head.appendChild(naming);
+      if (provider.configured) head.appendChild(el("span", "tag", "connected"));
+      head.appendChild(el("span", "muted", owned.length ? owned.length + " models" : "no models"));
+      row.appendChild(head);
+
+      const body = el("div", "pp-body");
+      if (hits.length) {
+        const grid = el("div", "chips");
+        for (const model of (words.length ? hits : owned)) {
+          const chip = el("button", "chip" + (model.current ? " on" : ""));
+          chip.type = "button";
+          chip.appendChild(el("span", null, model.id));
+          if (model.contextWindow) {
+            chip.appendChild(el("span", "sub", Math.round(model.contextWindow / 1000) + "k"));
+          }
+          if (model.free) chip.appendChild(el("span", "free", t("models.free")));
+          chip.addEventListener("click", (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            dialog.close();
+            track("model_switched", { model: model.id, via: "provider" });
+            void api("/model", { session: activeId, id: model.id }).then(async (state) => {
+              if (state && state.error) return addNotice(state.error, "err");
+              applyState(state);
+              await loadModels();
+            });
+          });
+          grid.appendChild(chip);
+        }
+        body.appendChild(grid);
+      } else {
+        body.appendChild(
+          el("div", "muted small",
+            provider.configured
+              ? "No models discovered yet — open it in Models to fetch them."
+              : "Not connected. Open it in Models to add a key."),
+        );
+      }
+
+      const open = el("button", "ghost", t("models.openIn"));
+      open.type = "button";
+      open.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        dialog.close();
+        // Pinned for this page load, so the card it opens stays reachable.
+        pinnedProviders.add(provider.id);
+        focusProvider = provider.id;
+        void showModels();
+      });
+      body.appendChild(open);
+
+      row.appendChild(body);
+      listEl.appendChild(row);
+    }
+
+    if (!shown) listEl.appendChild(el("div", "menu-empty", t("menu.none")));
+  };
+
+  field.value = "";
+  field.oninput = paint;
+  paint();
+  dialog.showModal();
+  field.focus();
+}
+
+/** Providers promoted out of the tail by the picker, for this page load. */
+const pinnedProviders = new Set();
+
+async function refreshModelCount() {
+  const count = document.getElementById("model-count");
+  count.textContent = modelOptions.length ? String(modelOptions.length) : "";
+}
+
+document.getElementById("nav-models").addEventListener("click", () => {
+  setNav("nav-models");
+  focusProvider = null;
+  panelBody.replaceChildren(panelLoading());
+  void showModels();
+});
+`;
+//# sourceMappingURL=account.js.map