@oharness/server 0.8.0 → 0.9.1

package/dist/page/client/usage.js

@@ -597,7 +597,11 @@ function dateRangePicker(options) {
  * The models drawn are the ones with a share worth a band; the rest are
  * summed into one so the columns still add up to the total above them.
  */
-function usageChart(body, models) {
+function usageChart(body, models, opts) {
+  // How a column is read out, and what its date is: dollars by the day for
+  // this machine's transcripts, credits by the day or hour for the account.
+  const money = (opts && opts.money) || ((value) => "$" + value.toFixed(2));
+  const when = (opts && opts.when) || ((at) => new Date(at).toLocaleDateString());
   const series = body.series || {};
   const buckets = series.buckets || [];
   const card = el("div", "row-card chart-card");
@@ -683,9 +687,10 @@ function usageChart(body, models) {
   // ends of the window. Rendered as text beside the plot rather than as axis
   // ticks, which at this size would be four numbers fighting for two pixels.
   const scale = el("div", "chart-scale");
-  const reading = el("span", null, "$" + peak.toFixed(2));
+  const reading = el("span", null, money(peak));
   scale.appendChild(reading);
-  scale.appendChild(el("span", "muted", t(series.step === "week" ? "usage.perWeek" : "usage.perDay")));
+  scale.appendChild(el("span", "muted",
+    t(series.step === "week" ? "usage.perWeek" : series.step === "hour" ? "usage.perHour" : "usage.perDay")));
   card.appendChild(scale);
 
   /*
@@ -710,21 +715,24 @@ function usageChart(body, models) {
     const top = lines
       .map((line) => ({ model: line.model, cost: line.points[at] || 0 }))
       .sort((a, b) => b.cost - a.cost)[0];
-    const on = new Date(bucket.at).toLocaleDateString();
+    const on = when(bucket.at);
     reading.textContent = bucket.costUsd
-      ? on + "  ·  $" + bucket.costUsd.toFixed(2) + (top && top.cost ? "  ·  " + top.model : "")
+      ? on + "  ·  " + money(bucket.costUsd) + (top && top.cost ? "  ·  " + top.model : "")
       : on + "  ·  " + t("usage.nothing");
   });
   svg.addEventListener("mouseleave", () => {
     highlight.setAttribute("opacity", "0");
-    reading.textContent = "$" + peak.toFixed(2);
+    reading.textContent = money(peak);
   });
 
   const span = el("div", "chart-span muted small");
-  span.appendChild(el("span", null, new Date(buckets[0].at).toLocaleDateString()));
-  span.appendChild(el("span", null, new Date(buckets[buckets.length - 1].at).toLocaleDateString()));
+  span.appendChild(el("span", null, when(buckets[0].at)));
+  span.appendChild(el("span", null, when(buckets[buckets.length - 1].at)));
   card.appendChild(span);
 
+  // One band is its own caption: the model is already named in the list
+  // under the chart and in the readout above, and a legend of one is noise.
+  if (lines.length < 2) return card;
   const legend = el("div", "chart-legend");
   lines.forEach((line, index) => {
     const entry = el("span", "legend-item");
@@ -736,18 +744,34 @@ function usageChart(body, models) {
   return card;
 }
 
-async function showUsage() {
-  // The days ride along only when they are the window being asked for; the
-  // server ignores them otherwise, and a preset request that carried a stale
-  // pair would be one keystroke from answering for the wrong fortnight.
-  const asked = usageRange === "custom" && usageFrom && usageTo
-    ? "/usage?range=custom&from=" + encodeURIComponent(usageFrom) + "&to=" + encodeURIComponent(usageTo)
-    : "/usage?range=" + encodeURIComponent(usageRange);
-  const body = await getJson(asked);
-  panelBody.replaceChildren();
-  if (body.error) return void panelBody.appendChild(panelError(body.error));
+/**
+ * Whose figures the page shows: the account's ledger, or this machine's
+ * transcripts. Null until someone picks, which means the account when there
+ * is one — that is where every charge is, and this machine's transcripts are
+ * only the chat that happened on it.
+ */
+let usageSource = null;
+/** Whether the last look found an account, so this machine's view can offer the other. */
+let usageSignedIn = false;
+/** Which kind of spend the account view is narrowed to. */
+let usageKind = "all";
+const USAGE_KINDS = ["all", "text", "image", "video", "audio"];
 
-  const panel = el("div", "panel usage");
+/**
+ * The window being asked about, as a query on path.
+ *
+ * The days ride along only when they are the window being asked for; the
+ * server ignores them otherwise, and a preset request that carried a stale
+ * pair would be one keystroke from answering for the wrong fortnight.
+ */
+function usageQuery(path) {
+  return usageRange === "custom" && usageFrom && usageTo
+    ? path + "?range=custom&from=" + encodeURIComponent(usageFrom) + "&to=" + encodeURIComponent(usageTo)
+    : path + "?range=" + encodeURIComponent(usageRange);
+}
+
+/** The page's heading, its way back, and — for an account — whose figures these are. */
+function usageHead(panel) {
   const head = el("div", "row-head");
   head.appendChild(el("h2", null, t("usage.title")));
   // Back to where this was opened from, because it was opened from a row in
@@ -759,29 +783,45 @@ async function showUsage() {
     setNav("nav-settings");
     void showSettings();
   });
-  head.appendChild(back);
-  panel.appendChild(head);
-
   /*
-   * How far back the page is asking about.
+   * Whose figures these are, as a small switch in the heading rather than a
+   * third row of tabs.
    *
-   * A segmented control rather than a dropdown: there are four answers, they
-   * are read left to right as increasing time, and a menu would hide three of
-   * them behind the one that happens to be chosen. It reloads rather than
-   * filtering what is already here — the totals, the models and the sessions
-   * all answer for the window, and a page where the chart moved and the
-   * figures above it did not would be lying about one of them.
+   * The account is the answer almost every visit wants; this machine's
+   * transcripts are the second look, for chat on a key someone brought. A
+   * switch as loud as the window and the kind would ask to be read first.
    */
+  const actions = el("span", "usage-head-actions");
+  if (usageSignedIn) {
+    const chosen = usageSource || "account";
+    const box = el("div", "seg usage-source");
+    for (const id of ["account", "device"]) {
+      const button = el("button", "seg-item" + (id === chosen ? " on" : ""), t("usage.source." + id));
+      button.type = "button";
+      button.addEventListener("click", () => {
+        if (id === chosen) return;
+        usageSource = id;
+        void showUsage();
+      });
+      box.appendChild(button);
+    }
+    actions.appendChild(box);
+  }
+  actions.appendChild(back);
+  head.appendChild(actions);
+  panel.appendChild(head);
+}
+
+/** The window presets and the calendar, reloading the page on a change. */
+function usageWindowRow(body, presets) {
   const picked = body.range || "30d";
   // What the server says the window is, which is not always what was asked
   // for: a picked range is clamped to today and to a year, and the calendar
   // has to open on the days the figures beside it are actually counting.
   const today = new Date().toISOString().slice(0, 10);
-  const shownFrom = body.from || today;
-  const shownTo = body.to || today;
-  const windowRow = el("div", "usage-window");
+  const row = el("div", "usage-window");
   const ranges = el("div", "seg");
-  for (const id of ["7d", "30d", "90d", "all"]) {
+  for (const id of presets) {
     const button = el("button", "seg-item" + (id === picked ? " on" : ""), t("usage.range." + id));
     button.type = "button";
     button.addEventListener("click", () => {
@@ -791,20 +831,10 @@ async function showUsage() {
     });
     ranges.appendChild(button);
   }
-  windowRow.appendChild(ranges);
-  /*
-   * A window the presets cannot express.
-   *
-   * Beside them rather than as a fifth item on the same control: the presets
-   * are one click each and this one opens a calendar, and a segmented control
-   * whose last segment behaves differently from the other four is a control
-   * that has to be learned. It shows the days it is showing once it is the
-   * chosen window, so the page never has a range on it that nothing on screen
-   * names.
-   */
-  windowRow.appendChild(dateRangePicker({
-    from: shownFrom,
-    to: shownTo,
+  row.appendChild(ranges);
+  row.appendChild(dateRangePicker({
+    from: body.from || today,
+    to: body.to || today,
     max: today,
     maxDays: MAX_CUSTOM_DAYS,
     active: picked === "custom",
@@ -815,7 +845,315 @@ async function showUsage() {
       void showUsage();
     },
   }));
-  panel.appendChild(windowRow);
+  return row;
+}
+
+/** Credits as a bill reads them: at most two decimals, and no trailing zeros. */
+const usageCredits = (micro) => t("usage.credits", { n: creditsOf(micro) });
+const usageCalls = (n) => (n === 1 ? t("usage.callOne") : t("usage.calls", { n: n.toLocaleString(LOCALE) }));
+const usageSeconds = (n) => t("usage.seconds", { n: Math.round(n).toLocaleString(LOCALE) });
+
+/**
+ * The account's spend: chat from every device, and every image, video and
+ * clip of audio, from the same ledger the site's usage page reads.
+ *
+ * Split by kind the way the site splits it, because a credit spent on a video
+ * and one spent on a chat are the same money bought very differently — and
+ * the question someone opening this after a week of generating is asking is
+ * "what did the pictures cost", which a list of forty models does not answer.
+ */
+function showAccountUsage(body) {
+  panelBody.replaceChildren();
+  const panel = el("div", "panel usage");
+  usageHead(panel);
+
+  if (body.unavailable) {
+    panel.appendChild(el("p", "muted",
+      t(body.unavailable === "outdated" ? "usage.accountOutdated" : "usage.accountUnreachable")));
+    if (body.error) panel.appendChild(el("p", "muted small", body.error));
+    panelBody.appendChild(panel);
+    return;
+  }
+
+  panel.appendChild(usageWindowRow(body, ["24h", "7d", "30d", "90d"]));
+  const summary = body.summary || {};
+  const byKind = summary.byKind || {};
+  const kind = body.kind || "all";
+
+  /*
+   * The kinds, as the figures themselves.
+   *
+   * Each card is what that kind cost and how often it ran, and choosing one is
+   * the filter — so the split is read before anything is chosen, and there is
+   * no row of tabs repeating the numbers under it. What the chosen kind was
+   * counted in (tokens, pictures, seconds) is the line under the cards; the
+   * others are not known until they are chosen, because the ledger is read
+   * for one kind at a time.
+   */
+  const cards = el("div", "usage-kinds");
+  const total = Object.values(byKind).reduce((sum, each) => sum + (each.spentMicro || 0), 0);
+  const allCalls = Object.values(byKind).reduce((sum, each) => sum + (each.calls || 0), 0);
+  for (const id of USAGE_KINDS) {
+    const each = id === "all" ? { spentMicro: total, calls: allCalls } : byKind[id] || {};
+    const card = el("button", "usage-kind" + (id === kind ? " on" : "") + (each.spentMicro || each.calls ? "" : " empty"));
+    card.type = "button";
+    card.setAttribute("aria-pressed", id === kind ? "true" : "false");
+    card.appendChild(el("span", "usage-kind-label", t("usage.kind." + id)));
+    card.appendChild(el("span", "usage-kind-value", creditsOf(each.spentMicro || 0)));
+    card.appendChild(el("span", "usage-kind-sub", usageCalls(each.calls || 0)));
+    card.addEventListener("click", () => {
+      if (id === kind) return;
+      usageKind = id;
+      void showUsage();
+    });
+    cards.appendChild(card);
+  }
+  panel.appendChild(cards);
+
+  const media = summary.media || {};
+  const tokens = (summary.inputTokens || 0) + (summary.outputTokens || 0);
+  const counted = [];
+  if (tokens) {
+    counted.push(t("usage.tokens", { n: formatTokens(tokens) }) + "  (" + t("usage.inOut", {
+      in: formatTokens(summary.inputTokens || 0),
+      out: formatTokens(summary.outputTokens || 0),
+    }) + ")");
+  }
+  if (media.images) counted.push(t("usage.images", { n: media.images.toLocaleString(LOCALE) }));
+  if (media.videoSeconds) counted.push(t("usage.videoSeconds", { n: usageSeconds(media.videoSeconds) }));
+  if (media.audioSeconds) counted.push(t("usage.audioSeconds", { n: usageSeconds(media.audioSeconds) }));
+  if (media.characters) counted.push(t("usage.characters", { n: media.characters.toLocaleString(LOCALE) }));
+  if (counted.length) panel.appendChild(el("div", "muted small usage-counted", counted.join("   ·   ")));
+
+  const series = summary.series || [];
+  if (series.length) {
+    const hourly = (summary.days || []).some((day) => day.at.length > 10);
+    const chartBody = {
+      series: {
+        step: hourly ? "hour" : "day",
+        buckets: (summary.days || []).map((day) => ({
+          at: day.at,
+          costUsd: (day.spentMicro || 0) / 1000000,
+          models: Object.fromEntries(Object.entries(day.byKey || {}).map(([key, value]) => [key, value / 1000000])),
+        })),
+      },
+    };
+    panel.appendChild(usageChart(chartBody, series.map((entry) => ({ model: entry.key })), {
+      money: (value) => usageCredits(value * 1000000),
+      // The ledger's buckets are UTC days and hours, and are read as such: a
+      // day drawn in local time would put yesterday's evening under today.
+      when: (at) => at.length > 10
+        ? new Date(at + ":00:00Z").toLocaleString(LOCALE, { month: "short", day: "numeric", hour: "numeric" })
+        : new Date(at + "T00:00:00Z").toLocaleDateString(LOCALE, { timeZone: "UTC" }),
+    }));
+
+    // By model, and under "all" by kind first: forty models in one list is a
+    // list nobody reads, and the kind is the first thing anyone looks for.
+    const groups = kind === "all" ? USAGE_KINDS.slice(1) : [kind];
+    for (const group of groups) {
+      const rows = series.filter((entry) => entry.kind === group);
+      if (!rows.length) continue;
+      const title = el("h3", "section-title usage-kind-title");
+      title.appendChild(el("span", null, kind === "all" ? t("usage.kind." + group) : t("usage.byModel")));
+      title.appendChild(el("span", "muted small",
+        usageCredits(rows.reduce((sum, entry) => sum + (entry.spentMicro || 0), 0))));
+      panel.appendChild(title);
+      for (const entry of rows) {
+        const row = el("div", "row-card");
+        const line = el("div", "row-head");
+        line.appendChild(el("span", "row-title", entry.key));
+        line.appendChild(el("span", "muted small usage-amount", usageCredits(entry.spentMicro || 0)));
+        row.appendChild(line);
+        row.appendChild(el("div", "muted small", usageCalls(entry.calls || 0)));
+        panel.appendChild(row);
+      }
+    }
+  } else {
+    panel.appendChild(el("p", "muted", t(kind === "all" ? "usage.none" : "usage.kindNone")));
+  }
+
+  // What the numbers cover, and where the full ledger lives.
+  panel.appendChild(el("p", "muted small", t(body.team ? "usage.teamScope" : "usage.accountScope")));
+  if (body.site) {
+    const open = el("button", "ghost", t("usage.openSite"));
+    open.type = "button";
+    open.addEventListener("click", () =>
+      window.open(body.site + "/" + LOCALE + "/dashboard/usage", "_blank", "noopener"));
+    panel.appendChild(open);
+  }
+  panelBody.appendChild(panel);
+}
+
+/** How many sessions the usage page lists before "View more". */
+const USAGE_RECENT = 10;
+/** Sessions per request on the sessions page. */
+const USAGE_SESSIONS_PAGE = 50;
+
+/** Prompt tokens sent, and everything moved, for a session row. */
+const usageSent = (row) => (row.input || 0) + (row.cacheRead || 0) + (row.cacheWrite || 0);
+const usageMoved = (row) => usageSent(row) + (row.output || 0);
+
+/**
+ * One session: what it cost, when, on what, and how much of it the cache
+ * carried — and a way back into it, which is what someone scanning a list of
+ * what they spent usually wants next.
+ */
+function usageSessionRow(entry) {
+  const row = el("div", "row-card usage-session");
+  const line = el("div", "row-head");
+  line.appendChild(el("span", "row-title", entry.title || t("session.untitled")));
+  if (entry.current) line.appendChild(el("span", "tag", t("usage.thisSession")));
+  line.appendChild(el("span", "muted small usage-amount", "$" + (entry.costUsd || 0).toFixed(4)));
+  row.appendChild(line);
+  const detail = [ago(entry.updatedAt), entry.model, t("usage.tokens", { n: formatTokens(usageMoved(entry)) })];
+  // The reason one session cost what it did is usually here: two runs of the
+  // same length differ by what the cache carried.
+  if (entry.cacheRead) detail.push(t("usage.cached", { pct: Math.round((entry.cacheRead / usageSent(entry)) * 100) }));
+  row.appendChild(el("div", "muted small", detail.join("  ·  ")));
+  row.tabIndex = 0;
+  row.setAttribute("role", "button");
+  const open = () => {
+    setNav(null);
+    if (panes.has(entry.id)) void focusTab(entry.id);
+    else void openSession(entry.id, entry.cwd);
+  };
+  row.addEventListener("click", open);
+  row.addEventListener("keydown", (event) => { if (event.key === "Enter") open(); });
+  return row;
+}
+
+/** What the sessions page is searching for, kept while the page is open. */
+let usageSessionsQuery = "";
+
+/**
+ * Every session that spent something on this machine, newest first.
+ *
+ * Read a page at a time and drawn as the list is scrolled, because a machine
+ * used daily has thousands and the first screen is the one almost always
+ * wanted. The search runs on the server, so it finds sessions that have not
+ * been loaded yet rather than filtering the ones that have.
+ */
+async function showUsageSessions() {
+  panelBody.replaceChildren();
+  const panel = el("div", "panel usage");
+  const head = el("div", "row-head");
+  head.appendChild(el("h2", null, t("usage.allSessions")));
+  const back = el("button", "ghost", t("usage.backToUsage"));
+  back.type = "button";
+  back.addEventListener("click", () => {
+    setNav("usage");
+    void showUsage();
+  });
+  head.appendChild(back);
+  panel.appendChild(head);
+
+  const search = el("input", "art-search");
+  search.type = "search";
+  search.placeholder = t("usage.searchSessions");
+  search.spellcheck = false;
+  search.autocomplete = "off";
+  search.value = usageSessionsQuery;
+  panel.appendChild(search);
+
+  const count = el("div", "muted small usage-sessions-count");
+  panel.appendChild(count);
+  const list = el("div", "usage-sessions");
+  panel.appendChild(list);
+  const foot = el("div", "muted small usage-sessions-foot");
+  panel.appendChild(foot);
+  panelBody.appendChild(panel);
+
+  // Which search the rows on screen belong to. A reply to an older search
+  // that lands after a newer one started is dropped, not appended.
+  let generation = 0;
+  let offset = 0;
+  let more = true;
+  let loading = false;
+
+  async function load() {
+    if (loading || !more) return;
+    loading = true;
+    const asked = generation;
+    foot.textContent = t("usage.loading");
+    const body = await getJson("/usage/sessions?limit=" + USAGE_SESSIONS_PAGE + "&offset=" + offset +
+      (usageSessionsQuery ? "&q=" + encodeURIComponent(usageSessionsQuery) : ""));
+    loading = false;
+    if (asked !== generation || shownPanel !== "usage-sessions") return;
+    if (body.error) {
+      foot.textContent = body.error;
+      return;
+    }
+    for (const entry of body.sessions || []) list.appendChild(usageSessionRow(entry));
+    offset += (body.sessions || []).length;
+    more = Boolean(body.more);
+    count.textContent = body.total === 1 ? t("usage.sessionsOne") : t("usage.sessionsCount", { n: body.total || 0 });
+    foot.textContent = !body.total
+      ? t(usageSessionsQuery ? "usage.sessionsNoMatch" : "usage.none")
+      : more ? "" : body.truncated ? t("usage.sessionsCapped") : t("usage.sessionsEnd");
+    // A first page shorter than the window leaves nothing to scroll, so the
+    // observer below would never fire; ask again until the list fills it.
+    if (more && sentinel.getBoundingClientRect().top < panelView.clientHeight + 400) void load();
+  }
+
+  function restart() {
+    generation += 1;
+    offset = 0;
+    more = true;
+    loading = false;
+    list.replaceChildren();
+    void load();
+  }
+
+  // Loads the next page as the bottom of the list comes near, not when it is
+  // reached, so scrolling does not stop at a spinner.
+  const sentinel = el("div", "usage-sessions-sentinel");
+  panel.appendChild(sentinel);
+  const observer = new IntersectionObserver((entries) => {
+    if (shownPanel !== "usage-sessions") return void observer.disconnect();
+    if (entries.some((entry) => entry.isIntersecting)) void load();
+  }, { root: panelView, rootMargin: "0px 0px 400px 0px" });
+  observer.observe(sentinel);
+
+  let typing = null;
+  search.addEventListener("input", () => {
+    clearTimeout(typing);
+    typing = setTimeout(() => {
+      usageSessionsQuery = search.value.trim();
+      restart();
+    }, 250);
+  });
+  restart();
+  search.focus();
+}
+
+async function showUsage() {
+  if (usageSource !== "device") {
+    const account = await getJson(
+      usageQuery("/usage/account") + (usageKind !== "all" ? "&kind=" + encodeURIComponent(usageKind) : ""),
+    );
+    if (shownPanel !== "usage") return;
+    usageSignedIn = Boolean(account.signedIn);
+    if (account.signedIn) return void showAccountUsage(account);
+  }
+  const body = await getJson(usageQuery("/usage"));
+  if (shownPanel !== "usage") return;
+  panelBody.replaceChildren();
+  if (body.error) return void panelBody.appendChild(panelError(body.error));
+
+  const panel = el("div", "panel usage");
+  usageHead(panel);
+
+  /*
+   * How far back the page is asking about.
+   *
+   * A segmented control rather than a dropdown: there are four answers, they
+   * are read left to right as increasing time, and a menu would hide three of
+   * them behind the one that happens to be chosen. It reloads rather than
+   * filtering what is already here — the totals, the models and the sessions
+   * all answer for the window, and a page where the chart moved and the
+   * figures above it did not would be lying about one of them.
+   */
+  panel.appendChild(usageWindowRow(body, ["7d", "30d", "90d", "all"]));
 
   // Prompt tokens only. The cache share is a share of what was sent, and
   // nothing that was generated could have come from a cache.
@@ -881,7 +1219,7 @@ async function showUsage() {
       const row = el("div", "row-card");
       const line = el("div", "row-head");
       line.appendChild(el("span", "row-title", entry.model));
-      line.appendChild(el("span", "muted small", "$" + (entry.costUsd || 0).toFixed(2)));
+      line.appendChild(el("span", "muted small usage-amount", "$" + (entry.costUsd || 0).toFixed(2)));
       row.appendChild(line);
       const bits = [
         t("usage.tokens", { n: formatTokens(moved(entry)) }),
@@ -896,27 +1234,19 @@ async function showUsage() {
 
   const sessions = body.sessions || [];
   if (sessions.length) {
-    panel.appendChild(el("h3", "section-title", t("usage.bySession")));
-    for (const entry of sessions) {
-      const row = el("div", "row-card");
-      const line = el("div", "row-head");
-      line.appendChild(el("span", "row-title", entry.title || t("session.untitled")));
-      if (entry.current) line.appendChild(el("span", "tag", t("usage.thisSession")));
-      line.appendChild(el("span", "muted small", "$" + (entry.costUsd || 0).toFixed(4)));
-      row.appendChild(line);
-      const detail = [
-        ago(entry.updatedAt),
-        entry.model,
-        t("usage.tokens", { n: formatTokens(moved(entry)) }),
-      ];
-      // The reason one session cost what it did is usually here: two runs of
-      // the same length differ by what the cache carried, and per-session is
-      // the only place that comparison can be made.
-      const hit = cachePct(entry);
-      if (hit !== null) detail.push(t("usage.cached", { pct: hit }));
-      row.appendChild(el("div", "muted small", detail.join("  ·  ")));
-      panel.appendChild(row);
-    }
+    // The latest few, and a way to all of them: a page of rows here pushed
+    // the scope note below off the screen and still was not every session.
+    const title = el("div", "usage-section-head");
+    title.appendChild(el("h3", "section-title", t("usage.bySession")));
+    const more = el("button", "ghost", t("usage.moreSessions"));
+    more.type = "button";
+    more.addEventListener("click", () => {
+      setNav("usage-sessions");
+      void showUsageSessions();
+    });
+    title.appendChild(more);
+    panel.appendChild(title);
+    for (const entry of sessions.slice(0, USAGE_RECENT)) panel.appendChild(usageSessionRow(entry));
   }
 
   if (!models.length) panel.appendChild(el("p", "muted", t("usage.none")));

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

@@ -1 +1 @@
-{"version":3,"file":"usage.js","sourceRoot":"","sources":["../../../src/page/client/usage.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAk7B3B,CAAC"}
+{"version":3,"file":"usage.js","sourceRoot":"","sources":["../../../src/page/client/usage.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA4vC3B,CAAC"}