@adecore/agents-react 0.31.12 → 0.32.0

package/dist/usage/UsageBreakdown.js

@@ -1,17 +1,18 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { useState } from 'react';
 import clsx from 'clsx';
 import { CircleHelp, Folder, Info } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { EmptyState, Icon, SectionLabel, Segmented, Tooltip } from '@adecore/ui';
 import { useChatScope } from '../scope.js';
-import { useChatHost } from '../host.js';
 import { ProviderLogo } from '../agents/ProviderLogo.js';
 import { USAGE_PROVIDERS, totalTokensOf } from '@adecore/agent-contracts';
-import { modelNameFromSlug } from '../agents/model-name.js';
+import { useModelName } from '../agents/model-name.js';
 import { formatCount, formatTokens, PROVIDER_COLORS, PROVIDER_LABELS, shortPath, slotLabel } from './format.js';
 import { useMoney } from './money.js';
 import { deriveDays } from './summary.js';
+import { useHostProjectLook } from '../host-hooks.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ROW = 'flex h-8 items-center gap-2 rounded-md px-2 text-xs hover:bg-surface-hover';
 const HEAD = 'flex h-6 items-center gap-2 px-2 text-xs text-text-faint';
 /* The table pulls the padding that gives a row's hover room back off, so its first column lines up with the page. */
@@ -19,48 +20,888 @@ const TABLE = '-mx-2 flex flex-col';
 const TABS = ['models', 'projects', 'day'];
 /* A share of the biggest row, never under one pixel. A row that did something has to be visible. */
 function barWidth(value, top) {
-    return value <= 0 || top <= 0 ? 0 : Math.max(1, Math.round((value / top) * 100));
+  return value <= 0 || top <= 0 ? 0 : Math.max(1, Math.round(value / top * 100));
 }
-function ProviderMark({ provider }) {
-    return (_jsx(Tooltip, { label: PROVIDER_LABELS[provider], children: _jsx("span", { style: { color: PROVIDER_COLORS[provider] }, children: _jsx(ProviderLogo, { provider: provider }) }) }));
+function ProviderMark(t0) {
+  const $ = _c(10);
+  const {
+    provider
+  } = t0;
+  const t1 = PROVIDER_LABELS[provider];
+  const t2 = PROVIDER_COLORS[provider];
+  let t3;
+  if ($[0] !== t2) {
+    t3 = {
+      color: t2
+    };
+    $[0] = t2;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  let t4;
+  if ($[2] !== provider) {
+    t4 = /*#__PURE__*/_jsx(ProviderLogo, {
+      provider: provider
+    });
+    $[2] = provider;
+    $[3] = t4;
+  } else {
+    t4 = $[3];
+  }
+  let t5;
+  if ($[4] !== t3 || $[5] !== t4) {
+    t5 = /*#__PURE__*/_jsx("span", {
+      style: t3,
+      children: t4
+    });
+    $[4] = t3;
+    $[5] = t4;
+    $[6] = t5;
+  } else {
+    t5 = $[6];
+  }
+  let t6;
+  if ($[7] !== t1 || $[8] !== t5) {
+    t6 = /*#__PURE__*/_jsx(Tooltip, {
+      label: t1,
+      children: t5
+    });
+    $[7] = t1;
+    $[8] = t5;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  return t6;
 }
-function ModelRows({ models, metric, total }) {
-    const { t } = useTranslation('agent-usage');
-    const money = useMoney();
-    /* On the tokens metric the biggest row is the one that moved the most, not the dearest. */
-    const sorted = [...models].sort((a, b) => metric === 'tokens' ? totalTokensOf(b.totals) - totalTokensOf(a.totals) : (b.costUsd ?? -1) - (a.costUsd ?? -1));
-    return (_jsxs("div", { className: TABLE, children: [_jsxs("div", { className: HEAD, children: [_jsx("span", { className: "grow", children: t('breakdown.models.model') }), _jsx("span", { className: "w-16 text-right", children: t('breakdown.models.calls') }), _jsx("span", { className: "w-16 text-right", children: t('breakdown.models.input') }), _jsx("span", { className: "w-16 text-right", children: t('breakdown.models.output') }), _jsx("span", { className: "w-24 text-right", children: t('breakdown.models.cache') }), _jsx("span", { className: "w-20 text-right", children: t('breakdown.models.cost') }), _jsx("span", { className: "w-12 text-right", children: t('breakdown.models.share') })] }), sorted.map((model) => (_jsxs("div", { className: ROW, children: [_jsx(ProviderMark, { provider: model.provider }), _jsx("span", { className: "truncate", children: modelNameFromSlug(model.model) }), model.priceBasis === 'family' && model.pricedAs !== null && (_jsx(Tooltip, { label: t('breakdown.models.pricedAs', { model: modelNameFromSlug(model.pricedAs) }), children: _jsx("span", { className: "text-text-faint", children: _jsx(Icon, { icon: Info, size: 12 }) }) })), _jsx("span", { className: "ml-auto w-16 text-right tabular-nums text-text-muted", children: formatCount(model.totals.calls) }), _jsx("span", { className: "w-16 text-right tabular-nums text-text-muted", children: formatTokens(model.totals.input) }), _jsx("span", { className: "w-16 text-right tabular-nums text-text-muted", children: formatTokens(model.totals.output) }), _jsxs("span", { className: "w-24 text-right tabular-nums text-text-muted", children: [formatTokens(model.totals.cacheRead), " / ", formatTokens(model.totals.cacheWrite)] }), _jsx("span", { className: "w-20 text-right tabular-nums", children: model.costUsd === null ? (_jsx(Tooltip, { label: t('breakdown.models.noPrice'), children: _jsxs("span", { className: "inline-flex items-center gap-1 text-text-faint", children: [_jsx(Icon, { icon: CircleHelp, size: 12 }), "?"] }) })) : (money(model.costUsd)) }), _jsx("span", { className: "w-12 text-right tabular-nums text-text-muted", children: model.costUsd === null || total <= 0 ? '' : `${Math.round((model.costUsd / total) * 100)}%` })] }, `${model.provider} ${model.model}`)))] }));
+/* The name the machine's catalog gives the model, where it has the model; the slug made readable where it does not. */
+function ModelName(t0) {
+  const {
+    provider,
+    slug
+  } = t0;
+  return useModelName(provider, slug);
+}
+function PricedAs(t0) {
+  const $ = _c(3);
+  const {
+    provider,
+    slug
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-usage");
+  const t1 = useModelName(provider, slug);
+  let t2;
+  if ($[0] !== t || $[1] !== t1) {
+    t2 = t("breakdown.models.pricedAs", {
+      model: t1
+    });
+    $[0] = t;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  return t2;
+}
+function ModelRows(t0) {
+  const $ = _c(48);
+  const {
+    models,
+    metric,
+    total
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-usage");
+  const money = useMoney();
+  let t1;
+  if ($[0] !== metric || $[1] !== models || $[2] !== money || $[3] !== t || $[4] !== total) {
+    let t2;
+    if ($[6] !== metric) {
+      t2 = (a, b) => metric === "tokens" ? totalTokensOf(b.totals) - totalTokensOf(a.totals) : (b.costUsd ?? -1) - (a.costUsd ?? -1);
+      $[6] = metric;
+      $[7] = t2;
+    } else {
+      t2 = $[7];
+    }
+    const sorted = [...models].sort(t2);
+    let t3;
+    if ($[8] !== t) {
+      t3 = t("breakdown.models.model");
+      $[8] = t;
+      $[9] = t3;
+    } else {
+      t3 = $[9];
+    }
+    let t4;
+    if ($[10] !== t3) {
+      t4 = /*#__PURE__*/_jsx("span", {
+        className: "grow",
+        children: t3
+      });
+      $[10] = t3;
+      $[11] = t4;
+    } else {
+      t4 = $[11];
+    }
+    let t5;
+    if ($[12] !== t) {
+      t5 = t("breakdown.models.calls");
+      $[12] = t;
+      $[13] = t5;
+    } else {
+      t5 = $[13];
+    }
+    let t6;
+    if ($[14] !== t5) {
+      t6 = /*#__PURE__*/_jsx("span", {
+        className: "w-16 text-right",
+        children: t5
+      });
+      $[14] = t5;
+      $[15] = t6;
+    } else {
+      t6 = $[15];
+    }
+    let t7;
+    if ($[16] !== t) {
+      t7 = t("breakdown.models.input");
+      $[16] = t;
+      $[17] = t7;
+    } else {
+      t7 = $[17];
+    }
+    let t8;
+    if ($[18] !== t7) {
+      t8 = /*#__PURE__*/_jsx("span", {
+        className: "w-16 text-right",
+        children: t7
+      });
+      $[18] = t7;
+      $[19] = t8;
+    } else {
+      t8 = $[19];
+    }
+    let t9;
+    if ($[20] !== t) {
+      t9 = t("breakdown.models.output");
+      $[20] = t;
+      $[21] = t9;
+    } else {
+      t9 = $[21];
+    }
+    let t10;
+    if ($[22] !== t9) {
+      t10 = /*#__PURE__*/_jsx("span", {
+        className: "w-16 text-right",
+        children: t9
+      });
+      $[22] = t9;
+      $[23] = t10;
+    } else {
+      t10 = $[23];
+    }
+    let t11;
+    if ($[24] !== t) {
+      t11 = t("breakdown.models.cache");
+      $[24] = t;
+      $[25] = t11;
+    } else {
+      t11 = $[25];
+    }
+    let t12;
+    if ($[26] !== t11) {
+      t12 = /*#__PURE__*/_jsx("span", {
+        className: "w-24 text-right",
+        children: t11
+      });
+      $[26] = t11;
+      $[27] = t12;
+    } else {
+      t12 = $[27];
+    }
+    let t13;
+    if ($[28] !== t) {
+      t13 = t("breakdown.models.cost");
+      $[28] = t;
+      $[29] = t13;
+    } else {
+      t13 = $[29];
+    }
+    let t14;
+    if ($[30] !== t13) {
+      t14 = /*#__PURE__*/_jsx("span", {
+        className: "w-20 text-right",
+        children: t13
+      });
+      $[30] = t13;
+      $[31] = t14;
+    } else {
+      t14 = $[31];
+    }
+    let t15;
+    if ($[32] !== t) {
+      t15 = t("breakdown.models.share");
+      $[32] = t;
+      $[33] = t15;
+    } else {
+      t15 = $[33];
+    }
+    let t16;
+    if ($[34] !== t15) {
+      t16 = /*#__PURE__*/_jsx("span", {
+        className: "w-12 text-right",
+        children: t15
+      });
+      $[34] = t15;
+      $[35] = t16;
+    } else {
+      t16 = $[35];
+    }
+    let t17;
+    if ($[36] !== t10 || $[37] !== t12 || $[38] !== t14 || $[39] !== t16 || $[40] !== t4 || $[41] !== t6 || $[42] !== t8) {
+      t17 = /*#__PURE__*/_jsxs("div", {
+        className: HEAD,
+        children: [t4, t6, t8, t10, t12, t14, t16]
+      });
+      $[36] = t10;
+      $[37] = t12;
+      $[38] = t14;
+      $[39] = t16;
+      $[40] = t4;
+      $[41] = t6;
+      $[42] = t8;
+      $[43] = t17;
+    } else {
+      t17 = $[43];
+    }
+    let t18;
+    if ($[44] !== money || $[45] !== t || $[46] !== total) {
+      t18 = model => /*#__PURE__*/_jsxs("div", {
+        className: ROW,
+        children: [/*#__PURE__*/_jsx(ProviderMark, {
+          provider: model.provider
+        }), /*#__PURE__*/_jsx("span", {
+          className: "truncate",
+          children: /*#__PURE__*/_jsx(ModelName, {
+            provider: model.provider,
+            slug: model.model
+          })
+        }), model.priceBasis === "family" && model.pricedAs !== null && /*#__PURE__*/_jsx(Tooltip, {
+          label: /*#__PURE__*/_jsx(PricedAs, {
+            provider: model.provider,
+            slug: model.pricedAs
+          }),
+          children: /*#__PURE__*/_jsx("span", {
+            className: "text-text-faint",
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: Info,
+              size: 12
+            })
+          })
+        }), /*#__PURE__*/_jsx("span", {
+          className: "ml-auto w-16 text-right tabular-nums text-text-muted",
+          children: formatCount(model.totals.calls)
+        }), /*#__PURE__*/_jsx("span", {
+          className: "w-16 text-right tabular-nums text-text-muted",
+          children: formatTokens(model.totals.input)
+        }), /*#__PURE__*/_jsx("span", {
+          className: "w-16 text-right tabular-nums text-text-muted",
+          children: formatTokens(model.totals.output)
+        }), /*#__PURE__*/_jsxs("span", {
+          className: "w-24 text-right tabular-nums text-text-muted",
+          children: [formatTokens(model.totals.cacheRead), " / ", formatTokens(model.totals.cacheWrite)]
+        }), /*#__PURE__*/_jsx("span", {
+          className: "w-20 text-right tabular-nums",
+          children: model.costUsd === null ? /*#__PURE__*/_jsx(Tooltip, {
+            label: t("breakdown.models.noPrice"),
+            children: /*#__PURE__*/_jsxs("span", {
+              className: "inline-flex items-center gap-1 text-text-faint",
+              children: [/*#__PURE__*/_jsx(Icon, {
+                icon: CircleHelp,
+                size: 12
+              }), "?"]
+            })
+          }) : money(model.costUsd)
+        }), /*#__PURE__*/_jsx("span", {
+          className: "w-12 text-right tabular-nums text-text-muted",
+          children: model.costUsd === null || total <= 0 ? "" : `${Math.round(model.costUsd / total * 100)}%`
+        })]
+      }, `${model.provider} ${model.model}`);
+      $[44] = money;
+      $[45] = t;
+      $[46] = total;
+      $[47] = t18;
+    } else {
+      t18 = $[47];
+    }
+    t1 = /*#__PURE__*/_jsxs("div", {
+      className: TABLE,
+      children: [t17, sorted.map(t18)]
+    });
+    $[0] = metric;
+    $[1] = models;
+    $[2] = money;
+    $[3] = t;
+    $[4] = total;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  return t1;
 }
 /* One project's row, under the name and the mark its host gives it, or its folder's own under a folder. */
-function ProjectRow({ project, top, money }) {
-    const host = useChatHost();
-    // The usage on screen is one host's, so the look of a project is that host's too.
-    const look = host.useProjectLook(useChatScope().id, project.projectId);
-    return (_jsxs("div", { className: `${ROW} h-auto items-start py-1.5`, children: [_jsx("span", { className: "mt-px flex", children: look?.mark ?? (_jsx("span", { className: "text-text-faint", children: _jsx(Icon, { icon: Folder, size: 16 }) })) }), _jsxs("span", { className: "flex min-w-0 grow flex-col", children: [_jsx("span", { className: "truncate", children: look?.name ?? project.name }), _jsx("span", { className: "truncate text-text-faint", children: shortPath(project.folder) })] }), _jsx("span", { className: "mt-1 flex h-[9px] w-32 shrink-0 overflow-hidden rounded-full bg-surface-sunken", children: USAGE_PROVIDERS.map((provider) => {
-                    const share = project.byProvider[provider];
-                    const width = barWidth(share?.costUsd ?? 0, top);
-                    return width === 0 ? null : _jsx("span", { style: { width: `${width}%`, background: PROVIDER_COLORS[provider] } }, provider);
-                }) }), _jsx("span", { className: "w-20 text-right tabular-nums", children: money(project.costUsd) }), _jsx("span", { className: "w-16 text-right tabular-nums text-text-muted", children: formatTokens(totalTokensOf(project.totals)) })] }));
+function ProjectRow(t0) {
+  const $ = _c(33);
+  const {
+    project,
+    top,
+    money
+  } = t0;
+  const look = useHostProjectLook(useChatScope().id, project.projectId);
+  let t1;
+  if ($[0] !== look?.mark) {
+    t1 = look?.mark ?? /*#__PURE__*/_jsx("span", {
+      className: "text-text-faint",
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: Folder,
+        size: 16
+      })
+    });
+    $[0] = look?.mark;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== t1) {
+    t2 = /*#__PURE__*/_jsx("span", {
+      className: "mt-px flex",
+      children: t1
+    });
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const t3 = look?.name ?? project.name;
+  let t4;
+  if ($[4] !== t3) {
+    t4 = /*#__PURE__*/_jsx("span", {
+      className: "truncate",
+      children: t3
+    });
+    $[4] = t3;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  let t5;
+  if ($[6] !== project.folder) {
+    t5 = shortPath(project.folder);
+    $[6] = project.folder;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  let t6;
+  if ($[8] !== t5) {
+    t6 = /*#__PURE__*/_jsx("span", {
+      className: "truncate text-text-faint",
+      children: t5
+    });
+    $[8] = t5;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  let t7;
+  if ($[10] !== t4 || $[11] !== t6) {
+    t7 = /*#__PURE__*/_jsxs("span", {
+      className: "flex min-w-0 grow flex-col",
+      children: [t4, t6]
+    });
+    $[10] = t4;
+    $[11] = t6;
+    $[12] = t7;
+  } else {
+    t7 = $[12];
+  }
+  let t8;
+  if ($[13] !== project.byProvider || $[14] !== top) {
+    t8 = USAGE_PROVIDERS.map(provider => {
+      const share = project.byProvider[provider];
+      const width = barWidth(share?.costUsd ?? 0, top);
+      return width === 0 ? null : /*#__PURE__*/_jsx("span", {
+        style: {
+          width: `${width}%`,
+          background: PROVIDER_COLORS[provider]
+        }
+      }, provider);
+    });
+    $[13] = project.byProvider;
+    $[14] = top;
+    $[15] = t8;
+  } else {
+    t8 = $[15];
+  }
+  let t9;
+  if ($[16] !== t8) {
+    t9 = /*#__PURE__*/_jsx("span", {
+      className: "mt-1 flex h-[9px] w-32 shrink-0 overflow-hidden rounded-full bg-surface-sunken",
+      children: t8
+    });
+    $[16] = t8;
+    $[17] = t9;
+  } else {
+    t9 = $[17];
+  }
+  let t10;
+  if ($[18] !== money || $[19] !== project.costUsd) {
+    t10 = money(project.costUsd);
+    $[18] = money;
+    $[19] = project.costUsd;
+    $[20] = t10;
+  } else {
+    t10 = $[20];
+  }
+  let t11;
+  if ($[21] !== t10) {
+    t11 = /*#__PURE__*/_jsx("span", {
+      className: "w-20 text-right tabular-nums",
+      children: t10
+    });
+    $[21] = t10;
+    $[22] = t11;
+  } else {
+    t11 = $[22];
+  }
+  let t12;
+  if ($[23] !== project.totals) {
+    t12 = formatTokens(totalTokensOf(project.totals));
+    $[23] = project.totals;
+    $[24] = t12;
+  } else {
+    t12 = $[24];
+  }
+  let t13;
+  if ($[25] !== t12) {
+    t13 = /*#__PURE__*/_jsx("span", {
+      className: "w-16 text-right tabular-nums text-text-muted",
+      children: t12
+    });
+    $[25] = t12;
+    $[26] = t13;
+  } else {
+    t13 = $[26];
+  }
+  let t14;
+  if ($[27] !== t11 || $[28] !== t13 || $[29] !== t2 || $[30] !== t7 || $[31] !== t9) {
+    t14 = /*#__PURE__*/_jsxs("div", {
+      className: `${ROW} h-auto items-start py-1.5`,
+      children: [t2, t7, t9, t11, t13]
+    });
+    $[27] = t11;
+    $[28] = t13;
+    $[29] = t2;
+    $[30] = t7;
+    $[31] = t9;
+    $[32] = t14;
+  } else {
+    t14 = $[32];
+  }
+  return t14;
 }
-function ProjectRows({ projects }) {
-    const money = useMoney();
-    const top = Math.max(...projects.map((project) => project.costUsd), 0);
-    return (_jsx("div", { className: clsx(TABLE, 'gap-1'), children: projects.map((project) => (_jsx(ProjectRow, { project: project, top: top, money: money }, project.folder))) }));
+function ProjectRows(t0) {
+  const $ = _c(12);
+  const {
+    projects
+  } = t0;
+  const money = useMoney();
+  let t1;
+  if ($[0] !== projects) {
+    t1 = Math.max(...projects.map(_temp), 0);
+    $[0] = projects;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const top = t1;
+  let t2;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = clsx(TABLE, "gap-1");
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  let t3;
+  if ($[3] !== money || $[4] !== projects || $[5] !== top) {
+    let t4;
+    if ($[7] !== money || $[8] !== top) {
+      t4 = project_0 => /*#__PURE__*/_jsx(ProjectRow, {
+        project: project_0,
+        top: top,
+        money: money
+      }, project_0.folder);
+      $[7] = money;
+      $[8] = top;
+      $[9] = t4;
+    } else {
+      t4 = $[9];
+    }
+    t3 = projects.map(t4);
+    $[3] = money;
+    $[4] = projects;
+    $[5] = top;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[10] !== t3) {
+    t4 = /*#__PURE__*/_jsx("div", {
+      className: t2,
+      children: t3
+    });
+    $[10] = t3;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  return t4;
 }
 /* The chart written out per calendar day, a column per provider that did anything in the period. */
-function DayRows({ summary, providers }) {
-    const { t } = useTranslation('agent-usage');
-    const money = useMoney();
-    const rows = deriveDays(summary);
-    if (rows.length === 0) {
-        return _jsx(EmptyState, { children: t('breakdown.days.empty') });
-    }
-    return (_jsxs("div", { className: TABLE, children: [_jsxs("div", { className: HEAD, children: [_jsx("span", { className: "grow", children: t('breakdown.days.day') }), providers.map((provider) => (_jsx("span", { className: "w-20 text-right", children: PROVIDER_LABELS[provider] }, provider))), _jsx("span", { className: "w-20 text-right", children: t('breakdown.days.total') }), _jsx("span", { className: "w-16 text-right", children: t('breakdown.days.tokens') })] }), rows.map((row) => (_jsxs("div", { className: ROW, children: [_jsx("span", { className: "grow truncate", children: slotLabel(row.slot) }), providers.map((provider) => (_jsx("span", { className: "w-20 text-right tabular-nums text-text-muted", children: row.costByProvider[provider] === undefined ? '' : money(row.costByProvider[provider]) }, provider))), _jsx("span", { className: "w-20 text-right tabular-nums", children: money(row.costUsd) }), _jsx("span", { className: "w-16 text-right tabular-nums text-text-muted", children: formatTokens(row.tokens) })] }, row.slot)))] }));
+function _temp(project) {
+  return project.costUsd;
+}
+function DayRows(t0) {
+  const $ = _c(32);
+  const {
+    summary,
+    providers
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-usage");
+  const money = useMoney();
+  let t1;
+  let t2;
+  if ($[0] !== money || $[1] !== providers || $[2] !== summary || $[3] !== t) {
+    t2 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const rows = deriveDays(summary);
+      if (rows.length === 0) {
+        let t3;
+        if ($[6] !== t) {
+          t3 = t("breakdown.days.empty");
+          $[6] = t;
+          $[7] = t3;
+        } else {
+          t3 = $[7];
+        }
+        let t4;
+        if ($[8] !== t3) {
+          t4 = /*#__PURE__*/_jsx(EmptyState, {
+            children: t3
+          });
+          $[8] = t3;
+          $[9] = t4;
+        } else {
+          t4 = $[9];
+        }
+        t2 = t4;
+        break bb0;
+      }
+      let t3;
+      if ($[10] !== t) {
+        t3 = t("breakdown.days.day");
+        $[10] = t;
+        $[11] = t3;
+      } else {
+        t3 = $[11];
+      }
+      let t4;
+      if ($[12] !== t3) {
+        t4 = /*#__PURE__*/_jsx("span", {
+          className: "grow",
+          children: t3
+        });
+        $[12] = t3;
+        $[13] = t4;
+      } else {
+        t4 = $[13];
+      }
+      let t5;
+      if ($[14] !== providers) {
+        t5 = providers.map(_temp2);
+        $[14] = providers;
+        $[15] = t5;
+      } else {
+        t5 = $[15];
+      }
+      let t6;
+      if ($[16] !== t) {
+        t6 = t("breakdown.days.total");
+        $[16] = t;
+        $[17] = t6;
+      } else {
+        t6 = $[17];
+      }
+      let t7;
+      if ($[18] !== t6) {
+        t7 = /*#__PURE__*/_jsx("span", {
+          className: "w-20 text-right",
+          children: t6
+        });
+        $[18] = t6;
+        $[19] = t7;
+      } else {
+        t7 = $[19];
+      }
+      let t8;
+      if ($[20] !== t) {
+        t8 = t("breakdown.days.tokens");
+        $[20] = t;
+        $[21] = t8;
+      } else {
+        t8 = $[21];
+      }
+      let t9;
+      if ($[22] !== t8) {
+        t9 = /*#__PURE__*/_jsx("span", {
+          className: "w-16 text-right",
+          children: t8
+        });
+        $[22] = t8;
+        $[23] = t9;
+      } else {
+        t9 = $[23];
+      }
+      let t10;
+      if ($[24] !== t4 || $[25] !== t5 || $[26] !== t7 || $[27] !== t9) {
+        t10 = /*#__PURE__*/_jsxs("div", {
+          className: HEAD,
+          children: [t4, t5, t7, t9]
+        });
+        $[24] = t4;
+        $[25] = t5;
+        $[26] = t7;
+        $[27] = t9;
+        $[28] = t10;
+      } else {
+        t10 = $[28];
+      }
+      let t11;
+      if ($[29] !== money || $[30] !== providers) {
+        t11 = row => /*#__PURE__*/_jsxs("div", {
+          className: ROW,
+          children: [/*#__PURE__*/_jsx("span", {
+            className: "grow truncate",
+            children: slotLabel(row.slot)
+          }), providers.map(provider_0 => /*#__PURE__*/_jsx("span", {
+            className: "w-20 text-right tabular-nums text-text-muted",
+            children: row.costByProvider[provider_0] === undefined ? "" : money(row.costByProvider[provider_0])
+          }, provider_0)), /*#__PURE__*/_jsx("span", {
+            className: "w-20 text-right tabular-nums",
+            children: money(row.costUsd)
+          }), /*#__PURE__*/_jsx("span", {
+            className: "w-16 text-right tabular-nums text-text-muted",
+            children: formatTokens(row.tokens)
+          })]
+        }, row.slot);
+        $[29] = money;
+        $[30] = providers;
+        $[31] = t11;
+      } else {
+        t11 = $[31];
+      }
+      t1 = /*#__PURE__*/_jsxs("div", {
+        className: TABLE,
+        children: [t10, rows.map(t11)]
+      });
+    }
+    $[0] = money;
+    $[1] = providers;
+    $[2] = summary;
+    $[3] = t;
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    t1 = $[4];
+    t2 = $[5];
+  }
+  if (t2 !== Symbol.for("react.early_return_sentinel")) {
+    return t2;
+  }
+  return t1;
 }
 /* The same period cut three ways: which model, which checkout, and which day it went on. */
-export function UsageBreakdown({ summary, metric, providers }) {
-    const { t } = useTranslation('agent-usage');
-    const [tab, setTab] = useState('models');
-    const total = summary.models.reduce((sum, model) => sum + (model.costUsd ?? 0), 0);
-    return (_jsxs("section", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(SectionLabel, { render: _jsx("h2", {}), children: t('breakdown.title') }), _jsx("div", { className: "ml-auto", children: _jsx(Segmented, { value: tab, options: TABS.map((id) => ({ id, label: t(`breakdown.tabs.${id}`) })), onValueChange: (id) => setTab(id), label: t('breakdown.title') }) })] }), tab === 'models' && _jsx(ModelRows, { models: summary.models, metric: metric, total: total }), tab === 'projects' && _jsx(ProjectRows, { projects: summary.projects }), tab === 'day' && _jsx(DayRows, { summary: summary, providers: providers })] }));
+function _temp2(provider) {
+  return /*#__PURE__*/_jsx("span", {
+    className: "w-20 text-right",
+    children: PROVIDER_LABELS[provider]
+  }, provider);
+}
+export function UsageBreakdown(t0) {
+  const $ = _c(36);
+  const {
+    summary,
+    metric,
+    providers
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-usage");
+  const [tab, setTab] = useState("models");
+  let t1;
+  if ($[0] !== summary.models) {
+    t1 = summary.models.reduce(_temp3, 0);
+    $[0] = summary.models;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const total = t1;
+  let t2;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = /*#__PURE__*/_jsx("h2", {});
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  let t3;
+  if ($[3] !== t) {
+    t3 = t("breakdown.title");
+    $[3] = t;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  let t4;
+  if ($[5] !== t3) {
+    t4 = /*#__PURE__*/_jsx(SectionLabel, {
+      render: t2,
+      children: t3
+    });
+    $[5] = t3;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  let t5;
+  if ($[7] !== t) {
+    t5 = TABS.map(id => ({
+      id,
+      label: t(`breakdown.tabs.${id}`)
+    }));
+    $[7] = t;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  let t6;
+  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = id_0 => setTab(id_0);
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  let t7;
+  if ($[10] !== t) {
+    t7 = t("breakdown.title");
+    $[10] = t;
+    $[11] = t7;
+  } else {
+    t7 = $[11];
+  }
+  let t8;
+  if ($[12] !== t5 || $[13] !== t7 || $[14] !== tab) {
+    t8 = /*#__PURE__*/_jsx("div", {
+      className: "ml-auto",
+      children: /*#__PURE__*/_jsx(Segmented, {
+        value: tab,
+        options: t5,
+        onValueChange: t6,
+        label: t7
+      })
+    });
+    $[12] = t5;
+    $[13] = t7;
+    $[14] = tab;
+    $[15] = t8;
+  } else {
+    t8 = $[15];
+  }
+  let t9;
+  if ($[16] !== t4 || $[17] !== t8) {
+    t9 = /*#__PURE__*/_jsxs("div", {
+      className: "flex items-center gap-3",
+      children: [t4, t8]
+    });
+    $[16] = t4;
+    $[17] = t8;
+    $[18] = t9;
+  } else {
+    t9 = $[18];
+  }
+  let t10;
+  if ($[19] !== metric || $[20] !== summary.models || $[21] !== tab || $[22] !== total) {
+    t10 = tab === "models" && /*#__PURE__*/_jsx(ModelRows, {
+      models: summary.models,
+      metric: metric,
+      total: total
+    });
+    $[19] = metric;
+    $[20] = summary.models;
+    $[21] = tab;
+    $[22] = total;
+    $[23] = t10;
+  } else {
+    t10 = $[23];
+  }
+  let t11;
+  if ($[24] !== summary.projects || $[25] !== tab) {
+    t11 = tab === "projects" && /*#__PURE__*/_jsx(ProjectRows, {
+      projects: summary.projects
+    });
+    $[24] = summary.projects;
+    $[25] = tab;
+    $[26] = t11;
+  } else {
+    t11 = $[26];
+  }
+  let t12;
+  if ($[27] !== providers || $[28] !== summary || $[29] !== tab) {
+    t12 = tab === "day" && /*#__PURE__*/_jsx(DayRows, {
+      summary: summary,
+      providers: providers
+    });
+    $[27] = providers;
+    $[28] = summary;
+    $[29] = tab;
+    $[30] = t12;
+  } else {
+    t12 = $[30];
+  }
+  let t13;
+  if ($[31] !== t10 || $[32] !== t11 || $[33] !== t12 || $[34] !== t9) {
+    t13 = /*#__PURE__*/_jsxs("section", {
+      className: "flex flex-col gap-3",
+      children: [t9, t10, t11, t12]
+    });
+    $[31] = t10;
+    $[32] = t11;
+    $[33] = t12;
+    $[34] = t9;
+    $[35] = t13;
+  } else {
+    t13 = $[35];
+  }
+  return t13;
 }
+function _temp3(sum, model) {
+  return sum + (model.costUsd ?? 0);
+}