@oharness/server 0.9.2 → 0.10.0

package/dist/page/client/account.js

@@ -462,7 +462,11 @@ 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;
   // 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
@@ -1016,6 +1020,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 +1161,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 +1195,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 +1210,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"), {
@@ -1420,6 +1450,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 +1685,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 +1714,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 +1764,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 +1811,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 +1862,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 +1881,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 +2042,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

package/dist/page/client/account.js.map

@@ -1 +1 @@
-{"version":3,"file":"account.js","sourceRoot":"","sources":["../../../src/page/client/account.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA81DhC,CAAC"}
+{"version":3,"file":"account.js","sourceRoot":"","sources":["../../../src/page/client/account.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqvEhC,CAAC"}

package/dist/page/client/base.js

@@ -68,6 +68,8 @@ const ICON_PATHS = {
   // The audio card's button. Drawn in outline like the rest and filled by the
   // card's CSS, so the triangle keeps the set's rounded joins.
   play: ["M5.5 3.9v8.2a.6.6 0 0 0 .92.5l6.3-4.1a.6.6 0 0 0 0-1L6.42 3.4a.6.6 0 0 0-.92.5z"],
+  // The composer's send arrow, for the boxes that send somewhere else.
+  send: ["M8 13V3.4M3.6 7.8 8 3.2l4.4 4.6"],
   pause: ["M5.25 3.75v8.5", "M10.75 3.75v8.5"],
   // A padlock: the shackle as a path, the body as a rect.
   lock: ["M5.33 7.33V5.33a2.67 2.67 0 0 1 5.34 0v2"],
@@ -89,6 +91,10 @@ const ICON_PATHS = {
     "M3.33 3h2.87a1.33 1.33 0 0 1 1.09.57l.85 1.22a1.33 1.33 0 0 0 1.09.57H12.67" +
       "A1.33 1.33 0 0 1 14 6.7v4.97A1.33 1.33 0 0 1 12.67 13H3.33" +
       "A1.33 1.33 0 0 1 2 11.67V4.33A1.33 1.33 0 0 1 3.33 3Z",
+    // The back panel's edge, carried across the front: what makes this a
+    // closed folder rather than a tabbed card, and the line the open one
+    // tips forward from.
+    "M2 7h12",
   ],
   folderOpen: [
     "M4.4 10.3l.87-1.71a1.33 1.33 0 0 1 1.19-.72H12.8a1.33 1.33 0 0 1 1.2 1.6" +
@@ -138,6 +144,11 @@ const ICON_PATHS = {
   close: ["M4.5 4.5l7 7", "M11.5 4.5l-7 7"],
   /* Its counterpart, for adding one. */
   plus: ["M8 3.5v9", "M3.5 8h9"],
+  /* A picture: a frame, a hill and a sun — what "attach an image" looks like
+     everywhere else. */
+  image: ["M2.5 11.5 6 8l3 3 1.5-1.5 3 3"],
+  imageRects: [[2, 2.5, 12, 11, 2]],
+  imageCircles: [[10.5, 6, 1.2]],
   search: ["M11.5 11.5 14 14"],
   searchCircles: [[7.3, 7.3, 4.6]],
   // A shopfront: an awning over a counter, for the list of what is on offer.
@@ -150,6 +161,8 @@ const ICON_PATHS = {
   // transcript: the arc lands on the new node rather than crossing it.
   fork: ["M5 2.6v7.7", "M11 6a5.7 5.7 0 0 1-4.3 6"],
   forkCircles: [[11, 4.3], [5, 12]],
+  // A trunk and the branch that leaves it for a tree of its own.
+  worktree: ["M4.5 2v12", "M4.5 10.5c0-3.5 7-2.5 7-6", "M11.5 2.5a1 1 0 1 1 0 2 1 1 0 1 1 0-2"],
   copy: [
     "M6.67 5.33h6.66a1.33 1.33 0 0 1 1.34 1.34v6.66a1.33 1.33 0 0 1-1.34 1.34" +
       "H6.67a1.33 1.33 0 0 1-1.34-1.34V6.67a1.33 1.33 0 0 1 1.34-1.34Z",
@@ -202,6 +215,12 @@ const ICON_PATHS = {
   // picker draws, because it is the same control.
   calendar: ["M2 6.5h12M5.5 1.5v3M10.5 1.5v3"],
   calendarRects: [[2, 3, 12, 11, 2.5]],
+  // Goal mode: a target, rings closing on the point being aimed at.
+  goal: ["M8 8h.01"],
+  goalCircles: [[8, 8, 6], [8, 8, 3]],
+  // Computer use: a screen on its stand, with the pointer that drives it.
+  computer: ["M5.5 14h5M8 11.5V14", "M7.2 4.6l3.6 1.5-1.6.5-.5 1.6Z"],
+  computerRects: [[1.5, 2, 13, 9.5, 1.6]],
   chevronLeft: ["M10 3.5 5.5 8l4.5 4.5"],
   chevronRight: ["M6 3.5 10.5 8 6 12.5"],
 };
@@ -391,7 +410,7 @@ const jumpBtn = document.getElementById("jump");
 const metaEl = document.getElementById("cost");
 const tokensEl = document.getElementById("tokens");
 const cacheEl = document.getElementById("cache");
-const ctxBar = document.querySelector("#ctx i");
+const ctxRing = document.getElementById("ctx");
 const ctxText = document.getElementById("ctxtext");
 const sessionList = document.getElementById("sessions");
 const sidebarEl = document.querySelector("body > aside");

package/dist/page/client/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","sourceRoot":"","sources":["../../../src/page/client/base.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Y7B,CAAC"}
+{"version":3,"file":"base.js","sourceRoot":"","sources":["../../../src/page/client/base.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8Z7B,CAAC"}