@adecore/agents-react 0.31.12 → 0.32.0

package/dist/usage/UsagePage.js

@@ -1,5 +1,5 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from 'react';
+import { c as _c } from "react/compiler-runtime";
+import { useCallback, useEffect, useState, useSyncExternalStore } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ChartNoAxesColumn, RefreshCw } from 'lucide-react';
 import { USAGE_PROVIDERS } from '@adecore/agent-contracts';
@@ -17,6 +17,7 @@ import { UsageChart } from './UsageChart.js';
 import { UsageLimits } from './UsageLimits.js';
 import { UsageSummary } from './UsageSummary.js';
 import { UsageTiles } from './UsageTiles.js';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const METRICS = ['cost', 'tokens'];
 /* The picker's value for every account, which no account id can be: an id starts with a letter. */
 const ALL_ACCOUNTS = '*';
@@ -24,132 +25,852 @@ const ALL_ACCOUNTS = '*';
 const DIALOG_CENTER = 'pointer-events-none absolute inset-0';
 /* Whether the scope's host answers right now, redrawn as its link comes and goes. */
 function useAnswering(transport) {
-    return useSyncExternalStore(useCallback((onChange) => transport.subscribeStatus(onChange), [transport]), () => transport.status === 'open');
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== transport) {
+    t0 = onChange => transport.subscribeStatus(onChange);
+    $[0] = transport;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  let t1;
+  if ($[2] !== transport.status) {
+    t1 = () => transport.status === "open";
+    $[2] = transport.status;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return useSyncExternalStore(t0, t1);
 }
 /*
  * Which agent CLIs the host has, under an empty usage page: no usage is what a host without any
  * agent looks like too, and the way to fix that is the agent settings.
  */
 function HostAgents() {
-    const host = useChatHost();
-    const { t } = useTranslation('agent-usage');
-    const { id } = useChatScope();
-    const row = useProvidersStore((s) => s.byScope[id]);
-    const installed = useMemo(() => (row?.providers ?? []).filter((provider) => provider.installed), [row]);
-    if (!row?.loaded) {
-        return null;
+  const $ = _c(23);
+  const host = useChatHost();
+  const {
+    t
+  } = useTranslation("agent-usage");
+  const {
+    id
+  } = useChatScope();
+  let t0;
+  if ($[0] !== id) {
+    t0 = s => s.byScope[id];
+    $[0] = id;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const row = useProvidersStore(t0);
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  if ($[2] !== row?.loaded || $[3] !== row?.providers || $[4] !== t) {
+    t4 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const installed = (row?.providers ?? []).filter(_temp);
+      if (!row?.loaded) {
+        t4 = null;
+        break bb0;
+      }
+      t3 = "flex flex-col items-center gap-2";
+      t1 = "text-xs text-text-muted";
+      t2 = installed.length === 0 ? t("agents.none") : t("agents.installed", {
+        list: installed.map(_temp2).join(", ")
+      });
     }
-    return (_jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx("p", { className: "text-xs text-text-muted", children: installed.length === 0 ? t('agents.none') : t('agents.installed', { list: installed.map((provider) => provider.name).join(', ') }) }), _jsx(Button, { size: "sm", variant: "secondary", onClick: () => host.openSettings('agents'), children: t('agents.settings') })] }));
+    $[2] = row?.loaded;
+    $[3] = row?.providers;
+    $[4] = t;
+    $[5] = t1;
+    $[6] = t2;
+    $[7] = t3;
+    $[8] = t4;
+  } else {
+    t1 = $[5];
+    t2 = $[6];
+    t3 = $[7];
+    t4 = $[8];
+  }
+  if (t4 !== Symbol.for("react.early_return_sentinel")) {
+    return t4;
+  }
+  let t5;
+  if ($[9] !== t1 || $[10] !== t2) {
+    t5 = /*#__PURE__*/_jsx("p", {
+      className: t1,
+      children: t2
+    });
+    $[9] = t1;
+    $[10] = t2;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  let t6;
+  if ($[12] !== host) {
+    t6 = () => host.openSettings("agents");
+    $[12] = host;
+    $[13] = t6;
+  } else {
+    t6 = $[13];
+  }
+  let t7;
+  if ($[14] !== t) {
+    t7 = t("agents.settings");
+    $[14] = t;
+    $[15] = t7;
+  } else {
+    t7 = $[15];
+  }
+  let t8;
+  if ($[16] !== t6 || $[17] !== t7) {
+    t8 = /*#__PURE__*/_jsx(Button, {
+      size: "sm",
+      variant: "secondary",
+      onClick: t6,
+      children: t7
+    });
+    $[16] = t6;
+    $[17] = t7;
+    $[18] = t8;
+  } else {
+    t8 = $[18];
+  }
+  let t9;
+  if ($[19] !== t3 || $[20] !== t5 || $[21] !== t8) {
+    t9 = /*#__PURE__*/_jsxs("div", {
+      className: t3,
+      children: [t5, t8]
+    });
+    $[19] = t3;
+    $[20] = t5;
+    $[21] = t8;
+    $[22] = t9;
+  } else {
+    t9 = $[22];
+  }
+  return t9;
 }
 /*
  * Asks the host on screen for the period that is up, keeps the answer under the key of the question
  * it answers, and tells the host to keep scanning while the page is here. A late answer to the period
  * before this one never lands, because the key it carries is no longer the one being shown.
  */
+function _temp2(provider_0) {
+  return provider_0.name;
+}
+function _temp(provider) {
+  return provider.installed;
+}
 function useSummary(scopeId, transport, period, account) {
-    useEffect(() => {
-        const subscribe = () => void transport.request('usage.subscribe', {}).catch(() => undefined);
-        if (transport.status === 'open') {
-            subscribe();
+  const $ = _c(12);
+  let t0;
+  let t1;
+  if ($[0] !== transport) {
+    t0 = () => {
+      const subscribe = () => void transport.request("usage.subscribe", {}).catch(_temp3);
+      if (transport.status === "open") {
+        subscribe();
+      }
+      const off = transport.subscribeStatus(status => {
+        if (status === "open") {
+          subscribe();
         }
-        // A host knows its followers per link, so every connection has to be told again, on a reconnect and on a move to another host.
-        const off = transport.subscribeStatus((status) => {
-            if (status === 'open') {
-                subscribe();
-            }
-        });
-        return () => {
-            off();
-            void transport.request('usage.unsubscribe', {}).catch(() => undefined);
-        };
-    }, [transport]);
-    const load = useCallback(() => {
-        const payload = summaryPayload(period, account);
-        const asked = askedKey(payload);
-        useUsageStore.getState().setLoading(scopeId, true);
-        transport
-            .request('usage.summary', payload)
-            .then((summary) => useUsageStore.getState().receive(scopeId, asked, summary))
-            .catch(() => useUsageStore.getState().fail(scopeId));
-    }, [transport, scopeId, period, account]);
-    useEffect(() => {
-        if (transport.status === 'open') {
-            load();
+      });
+      return () => {
+        off();
+        transport.request("usage.unsubscribe", {}).catch(_temp4);
+      };
+    };
+    t1 = [transport];
+    $[0] = transport;
+    $[1] = t0;
+    $[2] = t1;
+  } else {
+    t0 = $[1];
+    t1 = $[2];
+  }
+  useEffect(t0, t1);
+  let t2;
+  if ($[3] !== account || $[4] !== period || $[5] !== scopeId || $[6] !== transport) {
+    t2 = () => {
+      const payload = summaryPayload(period, account);
+      const asked = askedKey(payload);
+      useUsageStore.getState().setLoading(scopeId, true);
+      transport.request("usage.summary", payload).then(summary => useUsageStore.getState().receive(scopeId, asked, summary)).catch(() => useUsageStore.getState().fail(scopeId));
+    };
+    $[3] = account;
+    $[4] = period;
+    $[5] = scopeId;
+    $[6] = transport;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  const load = t2;
+  let t3;
+  let t4;
+  if ($[8] !== load || $[9] !== transport) {
+    t3 = () => {
+      if (transport.status === "open") {
+        load();
+      }
+      const offChanged = transport.on("usage.changed", load);
+      const offStatus = transport.subscribeStatus(status_0 => {
+        if (status_0 === "open") {
+          load();
         }
-        // A scan that found something is the sign to ask again; nothing else changes the numbers.
-        const offChanged = transport.on('usage.changed', load);
-        // Until the other host answers there is nothing to ask, and what is on screen is the host that left.
-        const offStatus = transport.subscribeStatus((status) => {
-            if (status === 'open') {
-                load();
-            }
-        });
-        return () => {
-            offChanged();
-            offStatus();
-        };
-    }, [transport, load]);
-    return load;
+      });
+      return () => {
+        offChanged();
+        offStatus();
+      };
+    };
+    t4 = [transport, load];
+    $[8] = load;
+    $[9] = transport;
+    $[10] = t3;
+    $[11] = t4;
+  } else {
+    t3 = $[10];
+    t4 = $[11];
+  }
+  useEffect(t3, t4);
+  return load;
 }
+function _temp4() {}
+function _temp3() {}
 function Provenance() {
-    const { t } = useTranslation('agent-usage');
-    const summary = useUsage((s) => s.summary);
-    const currency = useUsage((s) => s.currency);
-    const failed = useUsage((s) => s.failed);
-    if (failed) {
-        return _jsx(FormError, { className: "mt-auto text-center", children: t('provenance.failed') });
+  const $ = _c(19);
+  const {
+    t
+  } = useTranslation("agent-usage");
+  const summary = useUsage(_temp5);
+  const currency = useUsage(_temp6);
+  const failed = useUsage(_temp7);
+  if (failed) {
+    let t0;
+    if ($[0] !== t) {
+      t0 = t("provenance.failed");
+      $[0] = t;
+      $[1] = t0;
+    } else {
+      t0 = $[1];
     }
-    if (summary === null) {
-        return null;
+    let t1;
+    if ($[2] !== t0) {
+      t1 = /*#__PURE__*/_jsx(FormError, {
+        className: "mt-auto text-center",
+        children: t0
+      });
+      $[2] = t0;
+      $[3] = t1;
+    } else {
+      t1 = $[3];
     }
-    const prices = summary.pricing.fetchedAt === null ? t('provenance.bundledPrices') : t('provenance.fetchedPrices', { date: formatDate(summary.pricing.fetchedAt) });
-    // The rate is named only when it is being used, so a page in dollars says nothing about euros.
-    const rate = currency === 'USD' || summary.rate === null ? null : t('provenance.rate', { currency: summary.rate.currency, date: summary.rate.date });
-    return (_jsxs("p", { className: "mt-auto text-center text-xs text-text-muted", children: [t('provenance.scanned', { count: summary.scan.files, time: formatClock(summary.scan.at), files: formatCount(summary.scan.files) }), " \u00B7 ", prices, rate !== null && ` · ${rate}`] }));
+    return t1;
+  }
+  if (summary === null) {
+    return null;
+  }
+  let t0;
+  if ($[4] !== summary.pricing.fetchedAt || $[5] !== t) {
+    t0 = summary.pricing.fetchedAt === null ? t("provenance.bundledPrices") : t("provenance.fetchedPrices", {
+      date: formatDate(summary.pricing.fetchedAt)
+    });
+    $[4] = summary.pricing.fetchedAt;
+    $[5] = t;
+    $[6] = t0;
+  } else {
+    t0 = $[6];
+  }
+  const prices = t0;
+  let t1;
+  if ($[7] !== currency || $[8] !== summary.rate || $[9] !== t) {
+    t1 = currency === "USD" || summary.rate === null ? null : t("provenance.rate", {
+      currency: summary.rate.currency,
+      date: summary.rate.date
+    });
+    $[7] = currency;
+    $[8] = summary.rate;
+    $[9] = t;
+    $[10] = t1;
+  } else {
+    t1 = $[10];
+  }
+  const rate = t1;
+  let t2;
+  if ($[11] !== summary.scan.at || $[12] !== summary.scan.files || $[13] !== t) {
+    t2 = t("provenance.scanned", {
+      count: summary.scan.files,
+      time: formatClock(summary.scan.at),
+      files: formatCount(summary.scan.files)
+    });
+    $[11] = summary.scan.at;
+    $[12] = summary.scan.files;
+    $[13] = t;
+    $[14] = t2;
+  } else {
+    t2 = $[14];
+  }
+  const t3 = rate !== null && ` · ${rate}`;
+  let t4;
+  if ($[15] !== prices || $[16] !== t2 || $[17] !== t3) {
+    t4 = /*#__PURE__*/_jsxs("p", {
+      className: "mt-auto text-center text-xs text-text-muted",
+      children: [t2, " \xB7 ", prices, t3]
+    });
+    $[15] = prices;
+    $[16] = t2;
+    $[17] = t3;
+    $[18] = t4;
+  } else {
+    t4 = $[18];
+  }
+  return t4;
+}
+function _temp7(s_1) {
+  return s_1.failed;
+}
+function _temp6(s_0) {
+  return s_0.currency;
+}
+function _temp5(s) {
+  return s.summary;
 }
 function LoadingBody() {
-    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("div", { className: "grid gap-6 lg:grid-cols-[18rem_1fr]", children: [_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(Skeleton, { className: "h-10 w-40" }), _jsx(Skeleton, { className: "w-56" }), _jsx(Skeleton, { className: "w-48" })] }), _jsx(Skeleton, { className: "h-56 w-full" })] }), _jsx("div", { className: "grid grid-cols-2 gap-2 md:grid-cols-6", children: [0, 1, 2, 3, 4, 5].map((tile) => (_jsx(Skeleton, { className: "h-16 w-full rounded-xl" }, tile))) })] }));
+  const $ = _c(2);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = /*#__PURE__*/_jsxs("div", {
+      className: "grid gap-6 lg:grid-cols-[18rem_1fr]",
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "flex flex-col gap-3",
+        children: [/*#__PURE__*/_jsx(Skeleton, {
+          className: "h-10 w-40"
+        }), /*#__PURE__*/_jsx(Skeleton, {
+          className: "w-56"
+        }), /*#__PURE__*/_jsx(Skeleton, {
+          className: "w-48"
+        })]
+      }), /*#__PURE__*/_jsx(Skeleton, {
+        className: "h-56 w-full"
+      })]
+    });
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = /*#__PURE__*/_jsxs("div", {
+      className: "flex flex-col gap-6",
+      children: [t0, /*#__PURE__*/_jsx("div", {
+        className: "grid grid-cols-2 gap-2 md:grid-cols-6",
+        children: [0, 1, 2, 3, 4, 5].map(_temp8)
+      })]
+    });
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
 }
 /*
  * Every account of the host, once a CLI has more than one: picking one narrows the page to what that
  * account spent. The chart keeps its split per CLI, since an account's color is a dot and not a series.
  */
-function AccountPicker({ accounts, value, onChange }) {
-    const { t } = useTranslation('agent-usage');
-    if (!USAGE_PROVIDERS.some((kind) => accounts.filter((account) => account.kind === kind).length > 1)) {
-        return null;
-    }
-    return (_jsx(Select, { value: value ?? ALL_ACCOUNTS, items: [
-            { value: ALL_ACCOUNTS, label: t('dialog.accounts.all') },
-            ...accounts.map((account) => ({
-                value: account.id,
-                label: account.label,
-                icon: _jsx(AccountDot, { color: account.color }),
-                description: account.label === PROVIDER_LABELS[account.kind] ? undefined : PROVIDER_LABELS[account.kind]
-            }))
-        ], onValueChange: (id) => onChange(id === ALL_ACCOUNTS ? null : id), label: t('dialog.accounts.label'), align: "end" }));
+function _temp8(tile) {
+  return /*#__PURE__*/_jsx(Skeleton, {
+    className: "h-16 w-full rounded-xl"
+  }, tile);
+}
+function AccountPicker(t0) {
+  const $ = _c(16);
+  const {
+    accounts,
+    value,
+    onChange
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-usage");
+  if (!USAGE_PROVIDERS.some(kind => accounts.filter(account => account.kind === kind).length > 1)) {
+    return null;
+  }
+  const t1 = value ?? ALL_ACCOUNTS;
+  let t2;
+  if ($[0] !== t) {
+    t2 = t("dialog.accounts.all");
+    $[0] = t;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] !== t2) {
+    t3 = {
+      value: ALL_ACCOUNTS,
+      label: t2
+    };
+    $[2] = t2;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== accounts || $[5] !== t3) {
+    t4 = [t3, ...accounts.map(_temp9)];
+    $[4] = accounts;
+    $[5] = t3;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  let t5;
+  if ($[7] !== onChange) {
+    t5 = id => onChange(id === ALL_ACCOUNTS ? null : id);
+    $[7] = onChange;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  let t6;
+  if ($[9] !== t) {
+    t6 = t("dialog.accounts.label");
+    $[9] = t;
+    $[10] = t6;
+  } else {
+    t6 = $[10];
+  }
+  let t7;
+  if ($[11] !== t1 || $[12] !== t4 || $[13] !== t5 || $[14] !== t6) {
+    t7 = /*#__PURE__*/_jsx(Select, {
+      value: t1,
+      items: t4,
+      onValueChange: t5,
+      label: t6,
+      align: "end"
+    });
+    $[11] = t1;
+    $[12] = t4;
+    $[13] = t5;
+    $[14] = t6;
+    $[15] = t7;
+  } else {
+    t7 = $[15];
+  }
+  return t7;
 }
 /*
  * What the CLIs of one host cost and how much of their plans is left: the host of the scope this is
  * rendered in. It is the body of a dialog (`UsageDialog`); the page remounts per host, so nothing of
  * one outlives a switch to another.
  */
-export function UsagePage({ pickers, notice }) {
-    const { t } = useTranslation('agent-usage');
-    const scope = useChatScope();
-    const period = useUsage((s) => s.period);
-    const metric = useUsage((s) => s.metric);
-    const summary = useUsage((s) => s.summary);
-    const asked = useUsage((s) => s.asked);
-    const loading = useUsage((s) => s.loading);
-    // Per host, since account ids are a host's own.
-    const [account, setAccount] = useState(null);
-    const reload = useSummary(scope.id, scope.transport, period, account);
-    const money = useMoney();
-    const answering = useAnswering(scope.transport);
-    const shown = summary !== null && asked === askedKey(summaryPayload(period, account)) ? summary : null;
+function _temp9(account_0) {
+  return {
+    value: account_0.id,
+    label: account_0.label,
+    icon: /*#__PURE__*/_jsx(AccountDot, {
+      color: account_0.color
+    }),
+    description: account_0.label === PROVIDER_LABELS[account_0.kind] ? undefined : PROVIDER_LABELS[account_0.kind]
+  };
+}
+export function UsagePage(t0) {
+  const $ = _c(98);
+  const {
+    pickers,
+    notice
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-usage");
+  const scope = useChatScope();
+  const period = useUsage(_temp0);
+  const metric = useUsage(_temp1);
+  const summary = useUsage(_temp10);
+  const asked = useUsage(_temp11);
+  const loading = useUsage(_temp12);
+  const [account, setAccount] = useState(null);
+  const reload = useSummary(scope.id, scope.transport, period, account);
+  const money = useMoney();
+  const answering = useAnswering(scope.transport);
+  let t1;
+  if ($[0] !== account || $[1] !== asked || $[2] !== period || $[3] !== summary) {
+    t1 = summary !== null && asked === askedKey(summaryPayload(period, account)) ? summary : null;
+    $[0] = account;
+    $[1] = asked;
+    $[2] = period;
+    $[3] = summary;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  const shown = t1;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  let t6;
+  let t7;
+  let t8;
+  let t9;
+  if ($[5] !== account || $[6] !== answering || $[7] !== loading || $[8] !== metric || $[9] !== money || $[10] !== notice || $[11] !== period || $[12] !== pickers || $[13] !== reload || $[14] !== shown || $[15] !== summary?.accounts || $[16] !== t) {
     const derived = shown === null ? null : deriveUsage(shown, metric);
-    const value = metric === 'cost' ? money : formatTokens;
-    const noRoots = shown !== null && shown.roots.every((root) => root.status === 'missing');
-    return (_jsxs("div", { className: "flex min-h-0 grow flex-col", children: [_jsxs("header", { className: "flex shrink-0 flex-wrap items-center gap-3 border-b border-border py-3 pr-3 pl-6 max-[960px]:pl-4", children: [_jsx(Dialog.Title, { children: t('dialog.title') }), _jsxs("div", { className: "ml-auto flex flex-wrap items-center gap-2", children: [pickers, _jsx(AccountPicker, { accounts: summary?.accounts ?? [], value: account, onChange: setAccount }), _jsx(Segmented, { value: period, options: USAGE_PERIODS.map((entry) => ({ id: entry.id, label: t(`dialog.periods.${entry.id}`) })), onValueChange: (id) => useUsageStore.getState().setPeriod(id), label: t('dialog.period') }), _jsx(Segmented, { value: metric, options: METRICS.map((id) => ({ id, label: t(`dialog.metrics.${id}`) })), onValueChange: (id) => useUsageStore.getState().setMetric(id), label: t('dialog.metric') }), _jsx(IconButton, { icon: RefreshCw, label: t('dialog.rescan'), busy: loading, onClick: reload, disabled: loading || !answering }), _jsx(CloseButton, { label: t('dialog.close'), dialog: true })] })] }), _jsxs("div", { className: "flex min-h-0 grow flex-col gap-6 overflow-y-auto px-6 pt-4 pb-6 max-[960px]:px-4", children: [notice?.(shown !== null), noRoots && (_jsx(EmptyState, { className: DIALOG_CENTER, icon: ChartNoAxesColumn, action: _jsx(HostAgents, {}), children: t('empty.noTranscripts') })), shown === null && answering && _jsx(LoadingBody, {}), shown === null && !answering && (_jsx(EmptyState, { className: DIALOG_CENTER, icon: ChartNoAxesColumn, action: _jsx(HostAgents, {}), children: t('empty.noUsage') })), shown !== null && derived !== null && !noRoots && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid gap-6 lg:grid-cols-[18rem_1fr]", children: [_jsx(UsageSummary, { metric: metric, costUsd: derived.costUsd, totals: derived.totals, sessions: shown.sessions, providers: derived.providers }), _jsx(UsageChart, { slots: derived.slots, providers: derived.active, format: value, labelEvery: labelEveryFor(derived.slots.length) })] }), _jsx(UsageTiles, { totals: derived.totals, cacheSavingsUsd: derived.cacheSavingsUsd }), _jsx(UsageBreakdown, { summary: shown, metric: metric, providers: derived.active }), _jsx(UsageLimits, {})] })), _jsx(Provenance, {})] })] }));
+    const value = metric === "cost" ? money : formatTokens;
+    let t10;
+    if ($[25] !== shown) {
+      t10 = shown !== null && shown.roots.every(_temp13);
+      $[25] = shown;
+      $[26] = t10;
+    } else {
+      t10 = $[26];
+    }
+    const noRoots = t10;
+    t8 = "flex min-h-0 grow flex-col";
+    let t11;
+    if ($[27] !== t) {
+      t11 = t("dialog.title");
+      $[27] = t;
+      $[28] = t11;
+    } else {
+      t11 = $[28];
+    }
+    let t12;
+    if ($[29] !== t11) {
+      t12 = /*#__PURE__*/_jsx(Dialog.Title, {
+        children: t11
+      });
+      $[29] = t11;
+      $[30] = t12;
+    } else {
+      t12 = $[30];
+    }
+    let t13;
+    if ($[31] !== summary?.accounts) {
+      t13 = summary?.accounts ?? [];
+      $[31] = summary?.accounts;
+      $[32] = t13;
+    } else {
+      t13 = $[32];
+    }
+    let t14;
+    if ($[33] !== account || $[34] !== t13) {
+      t14 = /*#__PURE__*/_jsx(AccountPicker, {
+        accounts: t13,
+        value: account,
+        onChange: setAccount
+      });
+      $[33] = account;
+      $[34] = t13;
+      $[35] = t14;
+    } else {
+      t14 = $[35];
+    }
+    let t15;
+    if ($[36] !== t) {
+      t15 = USAGE_PERIODS.map(entry => ({
+        id: entry.id,
+        label: t(`dialog.periods.${entry.id}`)
+      }));
+      $[36] = t;
+      $[37] = t15;
+    } else {
+      t15 = $[37];
+    }
+    let t16;
+    if ($[38] !== t) {
+      t16 = t("dialog.period");
+      $[38] = t;
+      $[39] = t16;
+    } else {
+      t16 = $[39];
+    }
+    let t17;
+    if ($[40] !== period || $[41] !== t15 || $[42] !== t16) {
+      t17 = /*#__PURE__*/_jsx(Segmented, {
+        value: period,
+        options: t15,
+        onValueChange: _temp14,
+        label: t16
+      });
+      $[40] = period;
+      $[41] = t15;
+      $[42] = t16;
+      $[43] = t17;
+    } else {
+      t17 = $[43];
+    }
+    let t18;
+    if ($[44] !== t) {
+      t18 = METRICS.map(id_0 => ({
+        id: id_0,
+        label: t(`dialog.metrics.${id_0}`)
+      }));
+      $[44] = t;
+      $[45] = t18;
+    } else {
+      t18 = $[45];
+    }
+    let t19;
+    if ($[46] !== t) {
+      t19 = t("dialog.metric");
+      $[46] = t;
+      $[47] = t19;
+    } else {
+      t19 = $[47];
+    }
+    let t20;
+    if ($[48] !== metric || $[49] !== t18 || $[50] !== t19) {
+      t20 = /*#__PURE__*/_jsx(Segmented, {
+        value: metric,
+        options: t18,
+        onValueChange: _temp15,
+        label: t19
+      });
+      $[48] = metric;
+      $[49] = t18;
+      $[50] = t19;
+      $[51] = t20;
+    } else {
+      t20 = $[51];
+    }
+    let t21;
+    if ($[52] !== t) {
+      t21 = t("dialog.rescan");
+      $[52] = t;
+      $[53] = t21;
+    } else {
+      t21 = $[53];
+    }
+    const t22 = loading || !answering;
+    let t23;
+    if ($[54] !== loading || $[55] !== reload || $[56] !== t21 || $[57] !== t22) {
+      t23 = /*#__PURE__*/_jsx(IconButton, {
+        icon: RefreshCw,
+        label: t21,
+        busy: loading,
+        onClick: reload,
+        disabled: t22
+      });
+      $[54] = loading;
+      $[55] = reload;
+      $[56] = t21;
+      $[57] = t22;
+      $[58] = t23;
+    } else {
+      t23 = $[58];
+    }
+    let t24;
+    if ($[59] !== t) {
+      t24 = t("dialog.close");
+      $[59] = t;
+      $[60] = t24;
+    } else {
+      t24 = $[60];
+    }
+    let t25;
+    if ($[61] !== t24) {
+      t25 = /*#__PURE__*/_jsx(CloseButton, {
+        label: t24,
+        dialog: true
+      });
+      $[61] = t24;
+      $[62] = t25;
+    } else {
+      t25 = $[62];
+    }
+    let t26;
+    if ($[63] !== pickers || $[64] !== t14 || $[65] !== t17 || $[66] !== t20 || $[67] !== t23 || $[68] !== t25) {
+      t26 = /*#__PURE__*/_jsxs("div", {
+        className: "ml-auto flex flex-wrap items-center gap-2",
+        children: [pickers, t14, t17, t20, t23, t25]
+      });
+      $[63] = pickers;
+      $[64] = t14;
+      $[65] = t17;
+      $[66] = t20;
+      $[67] = t23;
+      $[68] = t25;
+      $[69] = t26;
+    } else {
+      t26 = $[69];
+    }
+    if ($[70] !== t12 || $[71] !== t26) {
+      t9 = /*#__PURE__*/_jsxs("header", {
+        className: "flex shrink-0 flex-wrap items-center gap-3 border-b border-border py-3 pr-3 pl-6 max-[960px]:pl-4",
+        children: [t12, t26]
+      });
+      $[70] = t12;
+      $[71] = t26;
+      $[72] = t9;
+    } else {
+      t9 = $[72];
+    }
+    t2 = "flex min-h-0 grow flex-col gap-6 overflow-y-auto px-6 pt-4 pb-6 max-[960px]:px-4";
+    if ($[73] !== notice || $[74] !== shown) {
+      t3 = notice?.(shown !== null);
+      $[73] = notice;
+      $[74] = shown;
+      $[75] = t3;
+    } else {
+      t3 = $[75];
+    }
+    if ($[76] !== noRoots || $[77] !== t) {
+      t4 = noRoots && /*#__PURE__*/_jsx(EmptyState, {
+        className: DIALOG_CENTER,
+        icon: ChartNoAxesColumn,
+        action: /*#__PURE__*/_jsx(HostAgents, {}),
+        children: t("empty.noTranscripts")
+      });
+      $[76] = noRoots;
+      $[77] = t;
+      $[78] = t4;
+    } else {
+      t4 = $[78];
+    }
+    if ($[79] !== answering || $[80] !== shown) {
+      t5 = shown === null && answering && /*#__PURE__*/_jsx(LoadingBody, {});
+      $[79] = answering;
+      $[80] = shown;
+      $[81] = t5;
+    } else {
+      t5 = $[81];
+    }
+    if ($[82] !== answering || $[83] !== shown || $[84] !== t) {
+      t6 = shown === null && !answering && /*#__PURE__*/_jsx(EmptyState, {
+        className: DIALOG_CENTER,
+        icon: ChartNoAxesColumn,
+        action: /*#__PURE__*/_jsx(HostAgents, {}),
+        children: t("empty.noUsage")
+      });
+      $[82] = answering;
+      $[83] = shown;
+      $[84] = t;
+      $[85] = t6;
+    } else {
+      t6 = $[85];
+    }
+    t7 = shown !== null && derived !== null && !noRoots && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "grid gap-6 lg:grid-cols-[18rem_1fr]",
+        children: [/*#__PURE__*/_jsx(UsageSummary, {
+          metric: metric,
+          costUsd: derived.costUsd,
+          totals: derived.totals,
+          sessions: shown.sessions,
+          providers: derived.providers
+        }), /*#__PURE__*/_jsx(UsageChart, {
+          slots: derived.slots,
+          providers: derived.active,
+          format: value,
+          labelEvery: labelEveryFor(derived.slots.length)
+        })]
+      }), /*#__PURE__*/_jsx(UsageTiles, {
+        totals: derived.totals,
+        cacheSavingsUsd: derived.cacheSavingsUsd
+      }), /*#__PURE__*/_jsx(UsageBreakdown, {
+        summary: shown,
+        metric: metric,
+        providers: derived.active
+      }), /*#__PURE__*/_jsx(UsageLimits, {})]
+    });
+    $[5] = account;
+    $[6] = answering;
+    $[7] = loading;
+    $[8] = metric;
+    $[9] = money;
+    $[10] = notice;
+    $[11] = period;
+    $[12] = pickers;
+    $[13] = reload;
+    $[14] = shown;
+    $[15] = summary?.accounts;
+    $[16] = t;
+    $[17] = t2;
+    $[18] = t3;
+    $[19] = t4;
+    $[20] = t5;
+    $[21] = t6;
+    $[22] = t7;
+    $[23] = t8;
+    $[24] = t9;
+  } else {
+    t2 = $[17];
+    t3 = $[18];
+    t4 = $[19];
+    t5 = $[20];
+    t6 = $[21];
+    t7 = $[22];
+    t8 = $[23];
+    t9 = $[24];
+  }
+  let t10;
+  if ($[86] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = /*#__PURE__*/_jsx(Provenance, {});
+    $[86] = t10;
+  } else {
+    t10 = $[86];
+  }
+  let t11;
+  if ($[87] !== t2 || $[88] !== t3 || $[89] !== t4 || $[90] !== t5 || $[91] !== t6 || $[92] !== t7) {
+    t11 = /*#__PURE__*/_jsxs("div", {
+      className: t2,
+      children: [t3, t4, t5, t6, t7, t10]
+    });
+    $[87] = t2;
+    $[88] = t3;
+    $[89] = t4;
+    $[90] = t5;
+    $[91] = t6;
+    $[92] = t7;
+    $[93] = t11;
+  } else {
+    t11 = $[93];
+  }
+  let t12;
+  if ($[94] !== t11 || $[95] !== t8 || $[96] !== t9) {
+    t12 = /*#__PURE__*/_jsxs("div", {
+      className: t8,
+      children: [t9, t11]
+    });
+    $[94] = t11;
+    $[95] = t8;
+    $[96] = t9;
+    $[97] = t12;
+  } else {
+    t12 = $[97];
+  }
+  return t12;
+}
+function _temp15(id_1) {
+  return useUsageStore.getState().setMetric(id_1);
+}
+function _temp14(id) {
+  return useUsageStore.getState().setPeriod(id);
+}
+function _temp13(root) {
+  return root.status === "missing";
+}
+function _temp12(s_3) {
+  return s_3.loading;
+}
+function _temp11(s_2) {
+  return s_2.asked;
+}
+function _temp10(s_1) {
+  return s_1.summary;
+}
+function _temp1(s_0) {
+  return s_0.metric;
 }
+function _temp0(s) {
+  return s.period;
+}