@oharness/server 0.9.3 → 0.11.0

package/dist/page/client/account.js

@@ -215,6 +215,21 @@ async function showModels() {
       return go;
     };
 
+    // What this vendor has cost lately, from this machine's own records — the
+    // question a pasted key leaves open, answered where the key is.
+    if (provider.spend30d >= 0.01) {
+      const spent = el("div", "muted small");
+      spent.appendChild(document.createTextNode(t("models.spend30d", { amount: moneyOf(Math.round(provider.spend30d * 100), "usd") }) + " "));
+      const more = el("button", "cn-inline", t("models.spendDetail"));
+      more.type = "button";
+      more.addEventListener("click", (e) => {
+        e.stopPropagation();
+        document.getElementById("nav-usage").click();
+      });
+      spent.appendChild(more);
+      cardBody.appendChild(spent);
+    }
+
     if (provider.readiness === "no-account-system") {
       cardBody.appendChild(el("div", "muted small", t("models.noAccounts")));
       cardBody.appendChild(el("div", "muted small", t("models.noAccountsHow")));
@@ -229,6 +244,8 @@ async function showModels() {
       cardBody.appendChild(signInButton());
     } else if (provider.signIn && (!provider.configured || String(provider.source || "").startsWith("env:"))) {
       cardBody.appendChild(signInButton());
+    } else if (provider.vendorSignIn && !provider.configured) {
+      cardBody.appendChild(vendorSignIn(provider, null, null));
     }
 
     // The key field, for every vendor that takes one — the account plans
@@ -236,7 +253,7 @@ async function showModels() {
     // 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:")) {
+    if (!keyless(provider) && (!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
@@ -462,7 +479,17 @@ function openConnect(providerId, thenModel) {
   // 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;
+  // The column beside it already names OHarness; the title says what this
+  // side is for instead of naming it a second time.
+  document.getElementById("cn-title").textContent = provider.signIn && provider.readiness !== "no-account-system"
+    ? t("models.signIn")
+    : provider.label || provider.id;
+  // A vendor's own sign-in is that vendor's page the user is about to visit,
+  // so the dialog carries its mark: recognising the logo is most of what
+  // makes "sign in with" feel safe to click.
+  if (!provider.signIn && provider.vendorSignIn) {
+    document.getElementById("cn-title").prepend(providerMark(provider.id, provider.label || provider.id, "cn-title-mark"));
+  }
   // 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
@@ -590,6 +617,54 @@ function openConnect(providerId, thenModel) {
   const siteButton = site.querySelector("button");
   const orCode = el("div", "cn-note", ts("models.orCode"));
 
+  // A vendor's own sign-in, above the key field it makes optional — or, for a
+  // vendor with no key at all, in place of it.
+  const vendor = mode === "key" && provider.vendorSignIn
+    ? vendorSignIn(
+        provider,
+        () => {
+          if (dialog.open) void done("signed in to " + provider.id + " — discovering its models…");
+        },
+        (reason) => {
+          hint.textContent = reason;
+          hint.hidden = false;
+        },
+      )
+    : null;
+  const noKey = keyless(provider);
+  const orKey = vendor && !noKey ? el("div", "cn-note", t("models.orPasteKey")) : null;
+  // What signing in hands over, said where the hesitation is: right under the
+  // button. Only when the sign-in is the whole dialog — beside a key field the
+  // key's own note says the same, and two padlocks in a row read as clutter.
+  let vendorLocal = null;
+  if (vendor && noKey) {
+    vendorLocal = el("div", "cn-note cn-local");
+    vendorLocal.appendChild(svgIcon("lock"));
+    const words = el("span");
+    words.appendChild(el("strong", null, t("models.vendorLocalLead", { provider: provider.label || provider.id })));
+    words.appendChild(document.createTextNode(t("models.vendorLocalRest")));
+    vendorLocal.appendChild(words);
+  }
+  // Someone with a Claude plan arrives here looking for a way to use it, and
+  // a key field alone says nothing to them. The plan works in Claude Code and
+  // not in other apps, so the honest answer is a door to Claude Code — their
+  // own install, in this project's terminal — rather than a login of ours.
+  let claudePlan = null;
+  if (provider.id === "anthropic" && currentCwd) {
+    claudePlan = el("div", "cn-note");
+    claudePlan.appendChild(document.createTextNode(t("models.claudePlan") + " "));
+    const open = el("button", "cn-inline", t("models.claudePlanOpen"));
+    open.type = "button";
+    open.onclick = () => {
+      dialog.close();
+      void openClaudeCode(currentCwd);
+    };
+    claudePlan.appendChild(open);
+  }
+  // The sign-in is the whole dialog then, and the × already closes it: a
+  // Cancel alone in the actions row only read as a button left behind.
+  dialog.classList.toggle("cn-keyless", noKey);
+
   /**
    * What the dialog opens focused.
    *
@@ -602,7 +677,13 @@ function openConnect(providerId, thenModel) {
     // 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;
+    const opener = mode === "account" && !flow
+      ? siteButton
+      : noAccounts
+        ? keyButton
+        : vendor
+          ? vendor.querySelector("button")
+          : undefined;
     if (opener) opener.focus();
     else field.focus();
   };
@@ -661,7 +742,16 @@ function openConnect(providerId, thenModel) {
     // 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);
+    save.classList.toggle("approve", mode === "key" && !noAccounts && !vendor);
+    // Nothing to paste for a vendor that takes no key: the sign-in above is
+    // the whole dialog, and a field beside it could only ever be refused.
+    field.hidden = noKey;
+    save.hidden = noKey;
+    if (noKey) {
+      why.hidden = true;
+      keptLocal.hidden = true;
+      docs.hidden = true;
+    }
     field.value = "";
     focusPrimary();
   };
@@ -814,10 +904,14 @@ function openConnect(providerId, thenModel) {
     // somebody expecting a sign-in would ask — and they are exactly who opens
     // the mark.
     ...(noAccounts ? [keyLink(), el("div", "cn-note", t("models.orPasteKey"))] : []),
+    ...(vendor ? [vendor] : []),
+    ...(vendorLocal ? [vendorLocal] : []),
+    ...(orKey ? [orKey] : []),
     site,
     orCode,
     field,
     keptLocal,
+    ...(claudePlan ? [claudePlan] : []),
   );
   // 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
@@ -978,7 +1072,7 @@ async function loadAccount() {
   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"));
+  row.appendChild(svgIcon("caret", "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
@@ -1016,6 +1110,7 @@ async function loadAccount() {
     return found ? found.name : t("account.teamUnnamed");
   };
   void getJson("/billing").then((state) => {
+    if (state && !state.error) lastBilling = state;
     if (!state || !state.signedIn || state.unavailable) return;
     sellsCredits = true;
     // The plan, from the same answer the balance comes out of: "0 credits"
@@ -1156,8 +1251,31 @@ async function loadAccount() {
     // 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.
+    // The team page on the site, in the real browser, where a team is started,
+    // its people invited and its seats bought.
+    const openTeams = () => {
+      closeRowMenu();
+      window.open(body.site + "/" + LOCALE + "/dashboard/team", "_blank", "noopener");
+    };
     if (knownTeams.length) {
-      items.push(el("div", "menu-head menu-section", t("account.workspace")));
+      // Managing them sits on the section's own heading, at its right, rather
+      // than as one more row that reads like a workspace to switch to.
+      // The heading and the choices under it on one faint surface; the one
+      // in use is marked by a stronger fill (see .menu-choices).
+      const group = el("div", "menu-choices");
+      const head = el("div", "menu-head menu-section menu-section-row");
+      head.appendChild(el("span", null, t("account.workspace")));
+      if (body.site) {
+        const manage = el("button", "menu-section-action", t("account.manage"));
+        manage.type = "button";
+        manage.title = t("account.manageTeams");
+        manage.addEventListener("click", (e) => {
+          e.stopPropagation();
+          openTeams();
+        });
+        head.appendChild(manage);
+      }
+      group.appendChild(head);
       const choice = (label, id) => {
         const chosen = (body.team || null) === id;
         const item = el("button", "menu-item" + (chosen ? " on" : ""));
@@ -1167,22 +1285,14 @@ async function loadAccount() {
         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)));
+      group.appendChild(choice(t("account.personal"), null));
+      knownTeams.forEach((team) => group.appendChild(choice(team.name, team.id)));
+      items.push(group);
     }
-    // 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 way to a workspace at all, for an account on none. Once there is one,
+    // the section heading above carries Manage instead.
+    if (body.site && !knownTeams.length) {
+      items.push(menuItem(t("account.createTeam"), { run: openTeams }));
     }
     // 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
@@ -1190,6 +1300,16 @@ async function loadAccount() {
     // 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.
+    // Feedback goes to the site as this account, so it lives in the menu that
+    // only exists while one is signed in.
+    items.push(
+      menuItem(t("feedback.menu"), {
+        run: () => {
+          closeRowMenu();
+          openFeedback();
+        },
+      }),
+    );
     if (body.site) {
       items.push(
         menuItem(t("account.enterprise"), {
@@ -1215,6 +1335,7 @@ async function loadAccount() {
         cls: "accent",
       }),
       themeRow(),
+      ...customThemeRows(),
       menuItem(t("account.signOut"), {
         run: () => {
           closeRowMenu();
@@ -1284,6 +1405,51 @@ function websiteSignIn(provider, onSignedIn, onUnavailable) {
   return row;
 }
 
+/**
+ * A vendor whose only way in is its browser sign-in — ChatGPT, whose plan has
+ * no key to paste. Offering a key field for it would be a dead end.
+ */
+function keyless(provider) {
+  return Boolean(provider.vendorSignIn) && !(provider.envVars || []).length;
+}
+
+/**
+ * A vendor's own browser sign-in: Sign in with ChatGPT, OpenRouter.
+ *
+ * Like the website sign-in, the answer does not come back to the click. The
+ * vendor redirects to a listener on this machine, the server finishes the
+ * login there, and models_changed is what tells this page — so the waiter is
+ * registered only once the tab has actually been opened.
+ */
+function vendorSignIn(provider, onSignedIn, onError) {
+  const row = el("div", "keyrow");
+  const go = el("button", "signin-site", provider.vendorSignIn);
+  go.type = "button";
+  go.addEventListener("click", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    go.disabled = true;
+    void api("/signin/vendor", { provider: provider.id })
+      .then((result) => {
+        if (!result || result.error) {
+          const message = (result && result.error) || "could not start the sign-in";
+          if (onError) return void onError(message);
+          return void addNotice(message, "err");
+        }
+        signedInWaiters.set(provider.id, onSignedIn || (() => {
+          if (document.getElementById("nav-models").classList.contains("active")) void showModels();
+        }));
+        window.open(result.url, "_blank", "noopener");
+        addNotice(t("models.signInOpened", { site: provider.label || provider.id }));
+      })
+      .finally(() => {
+        go.disabled = false;
+      });
+  });
+  row.appendChild(go);
+  return row;
+}
+
 /**
  * The sign-in itself, without a button attached to it.
  *
@@ -1420,6 +1586,67 @@ function applyTheme() {
 applyTheme();
 
 let pwInterval = "month";
+/**
+ * The last billing answer this window saw — the account menu asks for it when
+ * the account loads, and the paywall on every poll. The paywall opens on it
+ * rather than on "Checking the balance…": the plans and their prices do not
+ * change between one minute and the next, and a dialog that makes someone
+ * wait for a price list it already had reads as slow. The fresh answer
+ * replaces it the moment it lands.
+ */
+let lastBilling = null;
+// Set by a click on the Yearly tab and spent by the render that follows it:
+// the yearly prices count down from twelve months at the monthly price once,
+// when the reader asks for the year. Not on every repaint — the balance poll
+// redraws this body every few seconds, and a number that kept counting would
+// read as a price that kept changing.
+let pwCount = false;
+
+/**
+ * The models a plan's credits reach, drawn as marks and names above the plans:
+ * someone stopped mid-conversation by this dialog is deciding whether the
+ * money buys the models they care about, and a name with its mark answers
+ * that faster than a sentence. Named here rather than fetched: this screen has
+ * only the billing catalogue, which knows plans and not models, and these are
+ * the ones the site's pricing page leads with. The marks are inline for the
+ * reason the model menu draws ours inline — no request to anyone to open a
+ * paywall.
+ */
+const PW_MODELS = [
+  {
+    key: "paywall.chat",
+    models: [
+    { label: "GPT-6 Astra", svg: '<svg fill="currentColor" fill-rule="evenodd" viewBox="0 0 24 24"><path d="M9.205 8.658v-2.26c0-.19.072-.333.238-.428l4.543-2.616c.619-.357 1.356-.523 2.117-.523 2.854 0 4.662 2.212 4.662 4.566 0 .167 0 .357-.024.547l-4.71-2.759a.797.797 0 00-.856 0l-5.97 3.473zm10.609 8.8V12.06c0-.333-.143-.57-.429-.737l-5.97-3.473 1.95-1.118a.433.433 0 01.476 0l4.543 2.617c1.309.76 2.189 2.378 2.189 3.948 0 1.808-1.07 3.473-2.76 4.163zM7.802 12.703l-1.95-1.142c-.167-.095-.239-.238-.239-.428V5.899c0-2.545 1.95-4.472 4.591-4.472 1 0 1.927.333 2.712.928L8.23 5.067c-.285.166-.428.404-.428.737v6.898zM12 15.128l-2.795-1.57v-3.33L12 8.658l2.795 1.57v3.33L12 15.128zm1.796 7.23c-1 0-1.927-.332-2.712-.927l4.686-2.712c.285-.166.428-.404.428-.737v-6.898l1.974 1.142c.167.095.238.238.238.428v5.233c0 2.545-1.974 4.472-4.614 4.472zm-5.637-5.303l-4.544-2.617c-1.308-.761-2.188-2.378-2.188-3.948A4.482 4.482 0 014.21 6.327v5.423c0 .333.143.571.428.738l5.947 3.449-1.95 1.118a.432.432 0 01-.476 0zm-.262 3.9c-2.688 0-4.662-2.021-4.662-4.519 0-.19.024-.38.047-.57l4.686 2.71c.286.167.571.167.856 0l5.97-3.448v2.26c0 .19-.07.333-.237.428l-4.543 2.616c-.619.357-1.356.523-2.117.523zm5.899 2.83a5.947 5.947 0 005.827-4.756C22.287 18.339 24 15.84 24 13.296c0-1.665-.713-3.282-1.998-4.448.119-.5.19-.999.19-1.498 0-3.401-2.759-5.947-5.946-5.947-.642 0-1.26.095-1.88.31A5.962 5.962 0 0010.205 0a5.947 5.947 0 00-5.827 4.757C1.713 5.447 0 7.945 0 10.49c0 1.666.713 3.283 1.998 4.448-.119.5-.19 1-.19 1.499 0 3.401 2.759 5.946 5.946 5.946.642 0 1.26-.095 1.88-.309a5.96 5.96 0 004.162 1.713z"/></svg>' },
+    { label: "Opus 5.5", svg: '<svg viewBox="0 0 24 24"><path d="M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z" fill="#D97757" fill-rule="nonzero"/></svg>' },
+    { label: "DeepSeek V4.1", svg: '<svg viewBox="0 0 24 24"><path d="M23.748 4.482c-.254-.124-.364.113-.512.234-.051.039-.094.09-.137.136-.372.397-.806.657-1.373.626-.829-.046-1.537.214-2.163.848-.133-.782-.575-1.248-1.247-1.548-.352-.156-.708-.311-.955-.65-.172-.241-.219-.51-.305-.774-.055-.16-.11-.323-.293-.35-.2-.031-.278.136-.356.276-.313.572-.434 1.202-.422 1.84.027 1.436.633 2.58 1.838 3.393.137.093.172.187.129.323-.082.28-.18.552-.266.833-.055.179-.137.217-.329.14a5.526 5.526 0 01-1.736-1.18c-.857-.828-1.631-1.742-2.597-2.458a11.365 11.365 0 00-.689-.471c-.985-.957.13-1.743.388-1.836.27-.098.093-.432-.779-.428-.872.004-1.67.295-2.687.684a3.055 3.055 0 01-.465.137 9.597 9.597 0 00-2.883-.102c-1.885.21-3.39 1.102-4.497 2.623C.082 8.606-.231 10.684.152 12.85c.403 2.284 1.569 4.175 3.36 5.653 1.858 1.533 3.997 2.284 6.438 2.14 1.482-.085 3.133-.284 4.994-1.86.47.234.962.327 1.78.397.63.059 1.236-.03 1.705-.128.735-.156.684-.837.419-.961-2.155-1.004-1.682-.595-2.113-.926 1.096-1.296 2.746-2.642 3.392-7.003.05-.347.007-.565 0-.845-.004-.17.035-.237.23-.256a4.173 4.173 0 001.545-.475c1.396-.763 1.96-2.015 2.093-3.517.02-.23-.004-.467-.247-.588zM11.581 18c-2.089-1.642-3.102-2.183-3.52-2.16-.392.024-.321.471-.235.763.09.288.207.486.371.739.114.167.192.416-.113.603-.673.416-1.842-.14-1.897-.167-1.361-.802-2.5-1.86-3.301-3.307-.774-1.393-1.224-2.887-1.298-4.482-.02-.386.093-.522.477-.592a4.696 4.696 0 011.529-.039c2.132.312 3.946 1.265 5.468 2.774.868.86 1.525 1.887 2.202 2.891.72 1.066 1.494 2.082 2.48 2.914.348.292.625.514.891.677-.802.09-2.14.11-3.054-.614zm1-6.44a.306.306 0 01.415-.287.302.302 0 01.2.288.306.306 0 01-.31.307.303.303 0 01-.304-.308zm3.11 1.596c-.2.081-.399.151-.59.16a1.245 1.245 0 01-.798-.254c-.274-.23-.47-.358-.552-.758a1.73 1.73 0 01.016-.588c.07-.327-.008-.537-.239-.727-.187-.156-.426-.199-.688-.199a.559.559 0 01-.254-.078c-.11-.054-.2-.19-.114-.358.028-.054.16-.186.192-.21.356-.202.767-.136 1.146.016.352.144.618.408 1.001.782.391.451.462.576.685.914.176.265.336.537.445.848.067.195-.019.354-.25.452z" fill="#4D6BFE"/></svg>' },
+    { label: "Kimi K3", svg: '<svg fill="currentColor" fill-rule="evenodd" viewBox="0 0 24 24"><path d="M21.846 0a1.923 1.923 0 110 3.846H20.15a.226.226 0 01-.227-.226V1.923C19.923.861 20.784 0 21.846 0z"/><path d="M11.065 11.199l7.257-7.2c.137-.136.06-.41-.116-.41H14.3a.164.164 0 00-.117.051l-7.82 7.756c-.122.12-.302.013-.302-.179V3.82c0-.127-.083-.23-.185-.23H3.186c-.103 0-.186.103-.186.23V19.77c0 .128.083.23.186.23h2.69c.103 0 .186-.102.186-.23v-3.25c0-.069.025-.135.069-.178l2.424-2.406a.158.158 0 01.205-.023l6.484 4.772a7.677 7.677 0 003.453 1.283c.108.012.2-.095.2-.23v-3.06c0-.117-.07-.212-.164-.227a5.028 5.028 0 01-2.027-.807l-5.613-4.064c-.117-.078-.132-.279-.028-.381z"/></svg>' },
+    ],
+  },
+  {
+    key: "paywall.media",
+    models: [
+    { label: "GPT Image 2.5", svg: '<svg fill="currentColor" fill-rule="evenodd" viewBox="0 0 24 24"><path d="M9.205 8.658v-2.26c0-.19.072-.333.238-.428l4.543-2.616c.619-.357 1.356-.523 2.117-.523 2.854 0 4.662 2.212 4.662 4.566 0 .167 0 .357-.024.547l-4.71-2.759a.797.797 0 00-.856 0l-5.97 3.473zm10.609 8.8V12.06c0-.333-.143-.57-.429-.737l-5.97-3.473 1.95-1.118a.433.433 0 01.476 0l4.543 2.617c1.309.76 2.189 2.378 2.189 3.948 0 1.808-1.07 3.473-2.76 4.163zM7.802 12.703l-1.95-1.142c-.167-.095-.239-.238-.239-.428V5.899c0-2.545 1.95-4.472 4.591-4.472 1 0 1.927.333 2.712.928L8.23 5.067c-.285.166-.428.404-.428.737v6.898zM12 15.128l-2.795-1.57v-3.33L12 8.658l2.795 1.57v3.33L12 15.128zm1.796 7.23c-1 0-1.927-.332-2.712-.927l4.686-2.712c.285-.166.428-.404.428-.737v-6.898l1.974 1.142c.167.095.238.238.238.428v5.233c0 2.545-1.974 4.472-4.614 4.472zm-5.637-5.303l-4.544-2.617c-1.308-.761-2.188-2.378-2.188-3.948A4.482 4.482 0 014.21 6.327v5.423c0 .333.143.571.428.738l5.947 3.449-1.95 1.118a.432.432 0 01-.476 0zm-.262 3.9c-2.688 0-4.662-2.021-4.662-4.519 0-.19.024-.38.047-.57l4.686 2.71c.286.167.571.167.856 0l5.97-3.448v2.26c0 .19-.07.333-.237.428l-4.543 2.616c-.619.357-1.356.523-2.117.523zm5.899 2.83a5.947 5.947 0 005.827-4.756C22.287 18.339 24 15.84 24 13.296c0-1.665-.713-3.282-1.998-4.448.119-.5.19-.999.19-1.498 0-3.401-2.759-5.947-5.946-5.947-.642 0-1.26.095-1.88.31A5.962 5.962 0 0010.205 0a5.947 5.947 0 00-5.827 4.757C1.713 5.447 0 7.945 0 10.49c0 1.666.713 3.283 1.998 4.448-.119.5-.19 1-.19 1.499 0 3.401 2.759 5.946 5.946 5.946.642 0 1.26-.095 1.88-.309a5.96 5.96 0 004.162 1.713z"/></svg>' },
+    { label: "Seedance 2.5", svg: '<svg viewBox="0 0 24 24"><path d="M14.944 18.587l-1.704-.445V10.01l1.824-.462c1-.254 1.84-.461 1.88-.453.032 0 .056 2.235.056 4.972v4.973l-.176-.008c-.104 0-.952-.207-1.88-.446z" fill="#00C8D2" fill-rule="nonzero"/><path d="M7 16.542c0-2.736.024-4.98.064-4.98.032-.008.872.2 1.88.454l1.816.461-.016 4.05-.024 4.049-1.632.422c-.896.23-1.736.445-1.856.469L7 21.523v-4.98z" fill="#3C8CFF" fill-rule="nonzero"/><path d="M19.24 12.477c0-9.03.008-9.515.144-9.475.072.024.784.207 1.576.406.792.207 1.576.405 1.744.445l.296.08-.016 8.56-.024 8.568-1.624.414c-.888.23-1.728.437-1.856.47l-.24.055v-9.523z" fill="#78E6DC" fill-rule="nonzero"/><path d="M1 12.509c0-4.678.024-8.505.064-8.505.032 0 .872.207 1.872.454l1.824.461v7.582c0 4.16-.016 7.574-.032 7.574-.024 0-.872.215-1.88.47L1 21.013v-8.505z" fill="#325AB4"/></svg>' },
+    ],
+  },
+];
+
+/** A price that counts down to its own text, once. Reduced motion skips it. */
+function countDown(node, fromCents, toCents, currency, text) {
+  if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+  const start = performance.now();
+  const tick = (now) => {
+    const p = Math.min(1, (now - start) / 700);
+    const eased = 1 - Math.pow(1 - p, 3);
+    // Whole units on the way down, so the cents do not flicker; the last
+    // frame is the real string.
+    const cents = Math.round((fromCents + (toCents - fromCents) * eased) / 100) * 100;
+    if (!node.isConnected) return;
+    node.textContent = p < 1 ? moneyOf(cents, currency) : text;
+    if (p < 1) requestAnimationFrame(tick);
+  };
+  requestAnimationFrame(tick);
+}
 
 /**
  * @param buying  Opened deliberately, rather than by a turn that could not be
@@ -1594,13 +1821,18 @@ function openPaywall(buying) {
      * months at the same price, and a "Save 0%" badge on it would be a worse
      * lie than silence.
      */
-    const savingOn = (plan) => {
+    /** Twelve months of the same tier at the monthly price, where the year costs less. */
+    const fullYearOf = (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;
+      if ((monthly.currency || "usd").toLowerCase() !== (plan.currency || "usd").toLowerCase()) return 0;
       const full = monthly.amountCents * 12;
-      if (full <= 0 || plan.amountCents >= full) return 0;
-      return Math.round((1 - plan.amountCents / full) * 100);
+      return full > 0 && plan.amountCents < full ? full : 0;
+    };
+    const savingOn = (plan) => {
+      const full = fullYearOf(plan);
+      return full ? Math.round((1 - plan.amountCents / full) * 100) : 0;
     };
 
     /** One row: what it is, how many credits, and how much money. */
@@ -1618,7 +1850,19 @@ function openPaywall(buying) {
       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 || "")));
+      if (money) {
+        const price = el("span", "pw-plan-price");
+        // A yearly rung that saves shows what it saves from: twelve months at
+        // the monthly price, struck through, and — right after the switch to
+        // the year — the price counting down from that number to its own.
+        const full = fullYearOf(plan);
+        if (full) price.appendChild(el("s", "pw-was", moneyOf(full, plan.currency)));
+        const amountNode = el("span", null, money);
+        price.appendChild(amountNode);
+        if (suffix) price.appendChild(document.createTextNode(suffix));
+        if (full && pwCount) countDown(amountNode, full, plan.amountCents, plan.currency, money);
+        top.appendChild(price);
+      }
       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
@@ -1656,14 +1900,42 @@ function openPaywall(buying) {
     const other = subs.filter((p) => p.interval !== "month" && p.interval !== "year");
 
     if (subs.length) {
+      // What the credits reach, before the plans that sell them: someone who
+      // came here to keep chatting may not know the same balance runs the
+      // other flagship models, and draws pictures and video too.
+      const media = el("div", "pw-media");
+      media.appendChild(el("div", "pw-media-head", t("paywall.included")));
+      PW_MODELS.forEach((group) => {
+        media.appendChild(el("span", "pw-media-kind", t(group.key)));
+        const marks = el("span", "pw-media-models");
+        group.models.forEach((model) => {
+          const chip = el("span", "pw-media-model");
+          const mark = el("span", "pw-media-mark");
+          mark.innerHTML = model.svg;
+          chip.appendChild(mark);
+          chip.appendChild(document.createTextNode(model.label));
+          marks.appendChild(chip);
+        });
+        media.appendChild(marks);
+      });
+      body.appendChild(media);
+
       if (intervals.length > 1) {
         const toggle = el("div", "pw-toggle");
+        // The best a year saves, on the tab itself: the reason to press it,
+        // said before it is pressed.
+        const best = Math.max(0, ...byInterval.year.map(savingOn));
         intervals.forEach((key) => {
           const tab = el("button", "pw-tab" + (key === pwInterval ? " on" : ""));
           tab.type = "button";
           tab.textContent = t(key === "year" ? "paywall.yearly" : "paywall.monthly");
+          if (key === "year" && best > 0) {
+            tab.appendChild(el("span", "pw-tab-save", t("paywall.upTo", { percent: best })));
+          }
           tab.onclick = () => {
+            if (pwInterval === key) return;
             pwInterval = key;
+            pwCount = key === "year";
             render(state);
           };
           toggle.appendChild(tab);
@@ -1675,6 +1947,7 @@ function openPaywall(buying) {
       showing.concat(other).forEach((plan) => {
         list.appendChild(planRow(plan, t(plan.interval === "year" ? "paywall.perYear" : "paywall.perMonth")));
       });
+      pwCount = false;
       body.appendChild(list);
     }
 
@@ -1725,6 +1998,7 @@ function openPaywall(buying) {
 
   const check = () =>
     getJson("/billing").then((state) => {
+      if (state && !state.error) lastBilling = state;
       if (!dialog.open) return;
       if (!state || state.error) {
         return void render({ signedIn: true, unavailable: "unreachable" });
@@ -1743,8 +2017,21 @@ function openPaywall(buying) {
       render(state);
     });
 
-  body.replaceChildren(el("div", "cn-note", t("paywall.checking")));
-  if (!dialog.open) dialog.showModal();
+  // The cards straight away from what is already known. The balance too when
+  // it was already zero — the usual case, and the line then does not jump in
+  // above the cards a moment later — but not a positive one: that number is
+  // stale by definition, since running out is why this opened, and render
+  // leaves the line out when it is undefined. A team's screen is all its
+  // pooled number, so that one waits for the fresh answer.
+  const cached = lastBilling;
+  if (cached && cached.signedIn && !cached.unavailable && !cached.team
+      && Array.isArray(cached.plans) && cached.plans.length) {
+    if (!dialog.open) dialog.showModal();
+    render({ ...cached, balanceMicro: Number(cached.balanceMicro) === 0 ? 0 : undefined });
+  } else {
+    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);
@@ -1891,5 +2178,261 @@ document.getElementById("nav-models").addEventListener("click", () => {
   panelBody.replaceChildren(panelLoading());
   void showModels();
 });
+
+/**
+ * The feedback dialog: a kind, a message, screenshots or recordings, and Send.
+ *
+ * Sent through this app's server, which holds the account's token and adds
+ * the platform; the page adds the app version, which only the desktop shell
+ * knows. Files are picked, pasted or dropped, and uploaded one at a time when
+ * Send is pressed — not when attached, so a file removed again was never sent
+ * anywhere. The result is said inside the dialog rather than as a notice in the
+ * transcript, which is not where anybody sending feedback is looking.
+ */
+const FEEDBACK_KINDS = ["bug", "idea", "other"];
+const FEEDBACK_TYPES = ["image/png", "image/jpeg", "image/gif", "image/webp", "video/mp4", "video/webm", "video/quicktime"];
+const FEEDBACK_MAX_FILES = 5;
+const FEEDBACK_MAX_BYTES = 50 * 1024 * 1024;
+let feedbackKind = "bug";
+/** What is attached: the file, a preview URL, and once uploaded, what the server answered. */
+let feedbackFiles = [];
+let feedbackWired = false;
+
+function feedbackSize(bytes) {
+  return bytes >= 1048576 ? (bytes / 1048576).toFixed(1) + " MB" : Math.max(1, Math.round(bytes / 1024)) + " KB";
+}
+
+function feedbackSay(text, error) {
+  const status = document.getElementById("fb-status");
+  status.textContent = text;
+  status.style.color = error ? "var(--err)" : "";
+}
+
+/** Take files from the picker, a paste or a drop, saying why any are refused. */
+function feedbackAdd(files) {
+  for (const file of files) {
+    if (feedbackFiles.length >= FEEDBACK_MAX_FILES) {
+      feedbackSay(t("feedback.tooMany"), true);
+      break;
+    }
+    if (!FEEDBACK_TYPES.includes(file.type)) {
+      feedbackSay(t("feedback.badType", { name: file.name || "file" }), true);
+      continue;
+    }
+    if (file.size > FEEDBACK_MAX_BYTES) {
+      feedbackSay(t("feedback.tooBig", { name: file.name || "file" }), true);
+      continue;
+    }
+    // A pasted screenshot arrives as "image.png" every time; give it a name
+    // that tells two of them apart on the internal page.
+    const name = file.name && file.name !== "image.png" ? file.name : "screenshot-" + (feedbackFiles.length + 1) + ".png";
+    feedbackFiles.push({ file, name, preview: URL.createObjectURL(file), uploaded: null, state: null });
+  }
+  feedbackPaintFiles();
+}
+
+function feedbackRemove(entry) {
+  URL.revokeObjectURL(entry.preview);
+  feedbackFiles = feedbackFiles.filter((other) => other !== entry);
+  feedbackPaintFiles();
+}
+
+function feedbackClearFiles() {
+  for (const entry of feedbackFiles) URL.revokeObjectURL(entry.preview);
+  feedbackFiles = [];
+  feedbackPaintFiles();
+}
+
+function feedbackPaintFiles() {
+  const list = document.getElementById("fb-files");
+  const tiles = feedbackFiles.map((entry) => {
+    const video = entry.file.type.startsWith("video/");
+    const tile = el("div", "fb-tile" + (video ? " is-video" : "") + (entry.state ? " is-" + entry.state : ""));
+    tile.title = entry.name + " \u00b7 " + feedbackSize(entry.file.size);
+    const thumb = el(video ? "video" : "img", "fb-thumb");
+    thumb.src = entry.preview;
+    if (video) {
+      thumb.muted = true;
+      thumb.preload = "metadata";
+      tile.appendChild(thumb);
+      tile.appendChild(el("span", "fb-play"));
+    } else {
+      thumb.alt = entry.name;
+      tile.appendChild(thumb);
+    }
+    // Only while a send is in flight: one tile uploading, the ones before it done.
+    if (entry.state === "uploading") tile.appendChild(el("span", "fb-spinner"));
+    if (entry.state === "done") tile.appendChild(el("span", "fb-done", "\u2713"));
+    const remove = el("button", "fb-remove", "\u00d7");
+    remove.type = "button";
+    remove.title = t("feedback.remove");
+    remove.setAttribute("aria-label", t("feedback.remove") + " " + entry.name);
+    remove.disabled = Boolean(entry.state);
+    remove.addEventListener("click", () => feedbackRemove(entry));
+    tile.appendChild(remove);
+    return tile;
+  });
+  if (feedbackFiles.length < FEEDBACK_MAX_FILES) {
+    const add = el("button", "fb-tile fb-add");
+    add.type = "button";
+    add.setAttribute("aria-label", t("feedback.attach"));
+    add.title = t("feedback.attach");
+    add.append(svgIcon("image", "fb-add-icon"), el("span", "fb-add-label", t("feedback.add")));
+    add.addEventListener("click", () => document.getElementById("fb-file").click());
+    tiles.push(add);
+  }
+  // What can go here and how much, beside the tiles rather than on a line of
+  // its own: before anything is attached it says what to attach and how;
+  // after, how many of the five are used.
+  const caption = el("div", "fb-caption");
+  caption.appendChild(el("span", "fb-caption-title", t("feedback.mediaTitle")));
+  caption.appendChild(
+    el(
+      "span",
+      "fb-caption-sub",
+      feedbackFiles.length
+        ? t("feedback.mediaCount", { n: feedbackFiles.length, max: FEEDBACK_MAX_FILES })
+        : t("feedback.mediaHint"),
+    ),
+  );
+  tiles.push(caption);
+  list.replaceChildren(...tiles);
+}
+
+/** Upload one file through this server; the answer is what the row stores. */
+async function feedbackUpload(entry) {
+  if (entry.uploaded) return entry.uploaded;
+  const response = await fetch(q("/feedback/upload"), {
+    method: "POST",
+    headers: { "content-type": entry.file.type, "x-filename": encodeURIComponent(entry.name) },
+    body: entry.file,
+    signal: AbortSignal.timeout(15 * 60 * 1000),
+  }).catch((err) => ({ ok: false, json: async () => ({ error: String(err.message || err) }) }));
+  const body = await response.json().catch(() => ({}));
+  if (!response.ok || !body.path) throw new Error(body.error || "upload failed");
+  // Kept, so a retry after a later file fails does not send this one twice.
+  entry.uploaded = { path: body.path, name: body.name || entry.name, type: body.type || entry.file.type, size: body.size || entry.file.size };
+  return entry.uploaded;
+}
+
+/** The listeners that outlive one opening: the picker, paste and drop. */
+function wireFeedback(dialog) {
+  if (feedbackWired) return;
+  feedbackWired = true;
+  const picker = document.getElementById("fb-file");
+  picker.addEventListener("change", () => {
+    feedbackAdd([...picker.files]);
+    picker.value = "";
+  });
+  // A screenshot on the clipboard is the most common attachment of all.
+  document.getElementById("fb-message").addEventListener("paste", (e) => {
+    const files = [...(e.clipboardData ? e.clipboardData.files : [])];
+    if (!files.length) return;
+    e.preventDefault();
+    feedbackAdd(files);
+  });
+  dialog.addEventListener("dragover", (e) => {
+    if (!e.dataTransfer || ![...e.dataTransfer.types].includes("Files")) return;
+    e.preventDefault();
+    dialog.classList.add("fb-dropping");
+  });
+  dialog.addEventListener("dragleave", (e) => {
+    if (e.target === dialog) dialog.classList.remove("fb-dropping");
+  });
+  dialog.addEventListener("drop", (e) => {
+    dialog.classList.remove("fb-dropping");
+    if (!e.dataTransfer || !e.dataTransfer.files.length) return;
+    e.preventDefault();
+    feedbackAdd([...e.dataTransfer.files]);
+  });
+}
+
+function openFeedback() {
+  const dialog = document.getElementById("feedback-dialog");
+  const kinds = document.getElementById("fb-kinds");
+  const message = document.getElementById("fb-message");
+  const send = document.getElementById("fb-send");
+  const cancel = document.getElementById("fb-cancel");
+  wireFeedback(dialog);
+
+  const paintKinds = () => {
+    kinds.replaceChildren(
+      ...FEEDBACK_KINDS.map((kind) => {
+        const chip = el("button", "fb-kind" + (kind === feedbackKind ? " on" : ""), t("feedback.kind." + kind));
+        chip.type = "button";
+        chip.setAttribute("role", "radio");
+        chip.setAttribute("aria-checked", String(kind === feedbackKind));
+        chip.addEventListener("click", () => {
+          feedbackKind = kind;
+          paintKinds();
+        });
+        return chip;
+      }),
+    );
+  };
+
+  paintKinds();
+  feedbackPaintFiles();
+  message.placeholder = t("feedback.placeholder");
+  feedbackSay("");
+  send.disabled = false;
+  send.textContent = t("feedback.send");
+  cancel.onclick = () => dialog.close();
+  // A draft — text and files — survives closing the dialog by accident; it is
+  // cleared only once sent.
+  send.onclick = async () => {
+    const text = message.value.trim();
+    if (!text) {
+      feedbackSay(t("feedback.empty"), true);
+      return void message.focus();
+    }
+    send.disabled = true;
+    const attachments = [];
+    try {
+      for (let i = 0; i < feedbackFiles.length; i++) {
+        const entry = feedbackFiles[i];
+        send.textContent = t("feedback.uploading", { n: i + 1, total: feedbackFiles.length });
+        entry.state = entry.uploaded ? "done" : "uploading";
+        feedbackPaintFiles();
+        attachments.push(await feedbackUpload(entry));
+        entry.state = "done";
+        feedbackPaintFiles();
+      }
+    } catch (err) {
+      // Back to editable; files already uploaded keep their answer, so a
+      // retry only sends the rest.
+      for (const entry of feedbackFiles) entry.state = null;
+      feedbackPaintFiles();
+      send.disabled = false;
+      send.textContent = t("feedback.send");
+      return void feedbackSay(String(err.message || err), true);
+    }
+    send.textContent = t("feedback.sending");
+    const bridge = window.oharness;
+    const result = await api("/feedback", {
+      kind: feedbackKind,
+      message: text,
+      source: bridge && bridge.desktop ? "desktop" : "web",
+      appVersion: (bridge && bridge.app && bridge.app.version) || undefined,
+      attachments,
+    });
+    send.textContent = t("feedback.send");
+    if (!result || result.error) {
+      for (const entry of feedbackFiles) entry.state = null;
+      feedbackPaintFiles();
+      send.disabled = false;
+      return void feedbackSay((result && result.error) || "could not send", true);
+    }
+    track("feedback_sent", { kind: feedbackKind, attachments: attachments.length });
+    message.value = "";
+    feedbackClearFiles();
+    feedbackSay(t("feedback.sent"));
+    setTimeout(() => {
+      if (dialog.open) dialog.close();
+    }, 1400);
+  };
+  if (!dialog.open) dialog.showModal();
+  message.focus();
+}
 `;
 //# sourceMappingURL=account.js.map