@adecore/agents-react 0.38.0 → 0.40.0

package/dist/usage/UsageLimits.js

@@ -5,13 +5,13 @@ import { LogIn } from 'lucide-react';
 import { AccountDot } from '../agents/AccountDot.js';
 import { Button, Icon, SectionLabel, Segmented, Tooltip, useNow } from '@adecore/ui';
 import { useChatHost } from '../host.js';
-import { PROVIDER_COLORS, PROVIDER_LABELS } from './format.js';
+import { ChartLogo } from './ChartLogo.js';
+import { PROVIDER_LABELS } from './format.js';
 import { accountNote, checkedLabel, hasSeveralAccounts, isSignedOut } from './limit-groups.js';
 import { WindowBar } from './LimitsList.js';
 import { useLimitGroups, useUsageLimits } from './limits.js';
-import { useProviderAccountsStore } from '../state/provider-accounts.js';
+import { useProviderAccounts } from '../state/provider-accounts.js';
 import { useChatScope } from '../scope.js';
-import { ProviderLogo } from '../agents/ProviderLogo.js';
 import { useHostLoginBlocked } from '../host-hooks.js';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const MINUTE_MS = 60_000;
@@ -91,7 +91,7 @@ function LoginButton(t0) {
 }
 /* One account: where its numbers come from, then a bar per window, or why there are none. */
 function LimitCard(t0) {
-  const $ = _c(42);
+  const $ = _c(37);
   const {
     account,
     named,
@@ -132,55 +132,32 @@ function LimitCard(t0) {
     t3 = $[8];
   }
   const checked = t3;
-  const t4 = PROVIDER_COLORS[account.kind];
-  let t5;
-  if ($[9] !== t4) {
-    t5 = {
-      color: t4
-    };
-    $[9] = t4;
-    $[10] = t5;
+  let t4;
+  if ($[9] !== account.kind) {
+    t4 = /*#__PURE__*/_jsx(ChartLogo, {
+      provider: account.kind,
+      className: "shrink-0"
+    });
+    $[9] = account.kind;
+    $[10] = t4;
   } else {
-    t5 = $[10];
+    t4 = $[10];
   }
+  const t5 = PROVIDER_LABELS[account.kind];
   let t6;
-  if ($[11] !== account.kind) {
-    t6 = /*#__PURE__*/_jsx(ProviderLogo, {
-      provider: account.kind
+  if ($[11] !== t5) {
+    t6 = /*#__PURE__*/_jsx("span", {
+      className: "shrink-0",
+      children: t5
     });
-    $[11] = account.kind;
+    $[11] = t5;
     $[12] = t6;
   } else {
     t6 = $[12];
   }
   let t7;
-  if ($[13] !== t5 || $[14] !== t6) {
-    t7 = /*#__PURE__*/_jsx("span", {
-      className: "shrink-0",
-      style: t5,
-      children: t6
-    });
-    $[13] = t5;
-    $[14] = t6;
-    $[15] = t7;
-  } else {
-    t7 = $[15];
-  }
-  const t8 = PROVIDER_LABELS[account.kind];
-  let t9;
-  if ($[16] !== t8) {
-    t9 = /*#__PURE__*/_jsx("span", {
-      className: "shrink-0",
-      children: t8
-    });
-    $[16] = t8;
-    $[17] = t9;
-  } else {
-    t9 = $[17];
-  }
-  let t10;
-  if ($[18] !== account.color || $[19] !== account.name || $[20] !== named) {
-    t10 = named && /*#__PURE__*/_jsxs(_Fragment, {
+  if ($[13] !== account.color || $[14] !== account.name || $[15] !== named) {
+    t7 = named && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("span", {
         className: "text-text-faint",
         children: "\xB7"
@@ -191,53 +168,53 @@ function LimitCard(t0) {
         children: account.name
       })]
     });
-    $[18] = account.color;
-    $[19] = account.name;
-    $[20] = named;
-    $[21] = t10;
+    $[13] = account.color;
+    $[14] = account.name;
+    $[15] = named;
+    $[16] = t7;
   } else {
-    t10 = $[21];
+    t7 = $[16];
   }
-  let t11;
-  if ($[22] !== plan) {
-    t11 = plan && /*#__PURE__*/_jsxs("span", {
+  let t8;
+  if ($[17] !== plan) {
+    t8 = plan && /*#__PURE__*/_jsxs("span", {
       className: "shrink-0 font-normal text-text-muted",
       children: ["\xB7 ", plan]
     });
-    $[22] = plan;
-    $[23] = t11;
+    $[17] = plan;
+    $[18] = t8;
   } else {
-    t11 = $[23];
+    t8 = $[18];
   }
-  let t12;
-  if ($[24] !== checked) {
-    t12 = checked !== null && /*#__PURE__*/_jsx("span", {
+  let t9;
+  if ($[19] !== checked) {
+    t9 = checked !== null && /*#__PURE__*/_jsx("span", {
       className: "ml-auto shrink-0 pl-2 font-normal text-text-faint",
       children: checked
     });
-    $[24] = checked;
-    $[25] = t12;
+    $[19] = checked;
+    $[20] = t9;
   } else {
-    t12 = $[25];
+    t9 = $[20];
   }
-  let t13;
-  if ($[26] !== t10 || $[27] !== t11 || $[28] !== t12 || $[29] !== t7 || $[30] !== t9) {
-    t13 = /*#__PURE__*/_jsxs("p", {
+  let t10;
+  if ($[21] !== t4 || $[22] !== t6 || $[23] !== t7 || $[24] !== t8 || $[25] !== t9) {
+    t10 = /*#__PURE__*/_jsxs("p", {
       className: "flex min-w-0 items-center gap-2 text-xs font-medium",
-      children: [t7, t9, t10, t11, t12]
+      children: [t4, t6, t7, t8, t9]
     });
+    $[21] = t4;
+    $[22] = t6;
+    $[23] = t7;
+    $[24] = t8;
+    $[25] = t9;
     $[26] = t10;
-    $[27] = t11;
-    $[28] = t12;
-    $[29] = t7;
-    $[30] = t9;
-    $[31] = t13;
   } else {
-    t13 = $[31];
+    t10 = $[26];
   }
-  let t14;
-  if ($[32] !== account || $[33] !== login || $[34] !== note || $[35] !== now || $[36] !== signedOut || $[37] !== t) {
-    t14 = signedOut ? /*#__PURE__*/_jsxs(_Fragment, {
+  let t11;
+  if ($[27] !== account || $[28] !== login || $[29] !== note || $[30] !== now || $[31] !== signedOut || $[32] !== t) {
+    t11 = signedOut ? /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("p", {
         className: "text-xs text-text-faint",
         children: t("limits.signedOutDetail")
@@ -256,36 +233,36 @@ function LimitCard(t0) {
         compact: false
       }, window.id))
     });
-    $[32] = account;
-    $[33] = login;
-    $[34] = note;
-    $[35] = now;
-    $[36] = signedOut;
-    $[37] = t;
-    $[38] = t14;
+    $[27] = account;
+    $[28] = login;
+    $[29] = note;
+    $[30] = now;
+    $[31] = signedOut;
+    $[32] = t;
+    $[33] = t11;
   } else {
-    t14 = $[38];
+    t11 = $[33];
   }
-  let t15;
-  if ($[39] !== t13 || $[40] !== t14) {
-    t15 = /*#__PURE__*/_jsxs("div", {
+  let t12;
+  if ($[34] !== t10 || $[35] !== t11) {
+    t12 = /*#__PURE__*/_jsxs("div", {
       className: "flex min-w-0 flex-col gap-3.5 rounded-xl border border-border bg-surface bg-clip-padding px-4 py-3.5",
-      children: [t13, t14]
+      children: [t10, t11]
     });
-    $[39] = t13;
-    $[40] = t14;
-    $[41] = t15;
+    $[34] = t10;
+    $[35] = t11;
+    $[36] = t12;
   } else {
-    t15 = $[41];
+    t12 = $[36];
   }
-  return t15;
+  return t12;
 }
 /*
  * What is left of each plan, asked of the CLIs themselves, a card per account. Nothing here reads a
  * credential: every CLI holds its own login and answers the question when the daemon starts one and asks.
  */
 export function UsageLimits() {
-  const $ = _c(46);
+  const $ = _c(44);
   const host = useChatHost();
   const {
     t
@@ -294,15 +271,7 @@ export function UsageLimits() {
   const groups = useLimitGroups(limits);
   const now = useNow(MINUTE_MS);
   const scopeId = useChatScope().id;
-  let t0;
-  if ($[0] !== scopeId) {
-    t0 = s => s.byScope[scopeId]?.accounts?.loginCommands;
-    $[0] = scopeId;
-    $[1] = t0;
-  } else {
-    t0 = $[1];
-  }
-  const loginCommands = useProviderAccountsStore(t0);
+  const loginCommands = useProviderAccounts(_temp);
   const {
     openLogin
   } = host;
@@ -311,181 +280,184 @@ export function UsageLimits() {
   if (limits === null) {
     return null;
   }
+  let t0;
+  if ($[0] !== groups) {
+    t0 = groups.length > 1 && hasSeveralAccounts(groups);
+    $[0] = groups;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const filterable = t0;
   let t1;
-  if ($[2] !== groups) {
-    t1 = groups.length > 1 && hasSeveralAccounts(groups);
-    $[2] = groups;
-    $[3] = t1;
+  if ($[2] !== filter || $[3] !== filterable || $[4] !== groups) {
+    t1 = filterable && groups.some(group => group.kind === filter) ? filter : "all";
+    $[2] = filter;
+    $[3] = filterable;
+    $[4] = groups;
+    $[5] = t1;
   } else {
-    t1 = $[3];
+    t1 = $[5];
   }
-  const filterable = t1;
+  const current = t1;
   let t2;
-  if ($[4] !== filter || $[5] !== filterable || $[6] !== groups) {
-    t2 = filterable && groups.some(group => group.kind === filter) ? filter : "all";
-    $[4] = filter;
-    $[5] = filterable;
-    $[6] = groups;
-    $[7] = t2;
+  if ($[6] !== current || $[7] !== groups) {
+    t2 = current === "all" ? groups : groups.filter(group_0 => group_0.kind === current);
+    $[6] = current;
+    $[7] = groups;
+    $[8] = t2;
   } else {
-    t2 = $[7];
+    t2 = $[8];
   }
-  const current = t2;
+  const shown = t2;
   let t3;
-  if ($[8] !== current || $[9] !== groups) {
-    t3 = current === "all" ? groups : groups.filter(group_0 => group_0.kind === current);
-    $[8] = current;
-    $[9] = groups;
-    $[10] = t3;
-  } else {
-    t3 = $[10];
-  }
-  const shown = t3;
-  let t4;
-  if ($[11] !== blocked || $[12] !== loginCommands || $[13] !== openLogin || $[14] !== scopeId) {
-    t4 = kind => openLogin === null || loginCommands?.[kind] === undefined ? null : {
+  if ($[9] !== blocked || $[10] !== loginCommands || $[11] !== openLogin || $[12] !== scopeId) {
+    t3 = kind => openLogin === null || loginCommands?.[kind] === undefined ? null : {
       blocked,
       open: account => void openLogin(scopeId, kind, account.id, account.name)
     };
-    $[11] = blocked;
-    $[12] = loginCommands;
-    $[13] = openLogin;
-    $[14] = scopeId;
-    $[15] = t4;
+    $[9] = blocked;
+    $[10] = loginCommands;
+    $[11] = openLogin;
+    $[12] = scopeId;
+    $[13] = t3;
   } else {
-    t4 = $[15];
+    t3 = $[13];
+  }
+  const loginFor = t3;
+  let t4;
+  if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = /*#__PURE__*/_jsx("h2", {});
+    $[14] = t4;
+  } else {
+    t4 = $[14];
   }
-  const loginFor = t4;
   let t5;
-  if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
-    t5 = /*#__PURE__*/_jsx("h2", {});
+  if ($[15] !== t) {
+    t5 = t("limits.title");
+    $[15] = t;
     $[16] = t5;
   } else {
     t5 = $[16];
   }
   let t6;
-  if ($[17] !== t) {
-    t6 = t("limits.title");
-    $[17] = t;
+  if ($[17] !== t5) {
+    t6 = /*#__PURE__*/_jsx(SectionLabel, {
+      render: t4,
+      className: "grow",
+      children: t5
+    });
+    $[17] = t5;
     $[18] = t6;
   } else {
     t6 = $[18];
   }
   let t7;
-  if ($[19] !== t6) {
-    t7 = /*#__PURE__*/_jsx(SectionLabel, {
-      render: t5,
-      className: "grow",
-      children: t6
-    });
-    $[19] = t6;
-    $[20] = t7;
-  } else {
-    t7 = $[20];
-  }
-  let t8;
-  if ($[21] !== current || $[22] !== filterable || $[23] !== groups || $[24] !== t) {
-    t8 = filterable && /*#__PURE__*/_jsx(Segmented, {
+  if ($[19] !== current || $[20] !== filterable || $[21] !== groups || $[22] !== t) {
+    t7 = filterable && /*#__PURE__*/_jsx(Segmented, {
       value: current,
       options: [{
         id: "all",
         label: t("dialog.accounts.all")
-      }, ...groups.map(_temp)],
+      }, ...groups.map(_temp2)],
       onValueChange: setFilter,
       label: t("limits.filter")
     });
-    $[21] = current;
-    $[22] = filterable;
-    $[23] = groups;
-    $[24] = t;
-    $[25] = t8;
+    $[19] = current;
+    $[20] = filterable;
+    $[21] = groups;
+    $[22] = t;
+    $[23] = t7;
   } else {
-    t8 = $[25];
+    t7 = $[23];
   }
-  let t9;
-  if ($[26] !== t7 || $[27] !== t8) {
-    t9 = /*#__PURE__*/_jsxs("div", {
+  let t8;
+  if ($[24] !== t6 || $[25] !== t7) {
+    t8 = /*#__PURE__*/_jsxs("div", {
       className: "flex min-h-8 items-center gap-3",
-      children: [t7, t8]
+      children: [t6, t7]
     });
-    $[26] = t7;
-    $[27] = t8;
+    $[24] = t6;
+    $[25] = t7;
+    $[26] = t8;
+  } else {
+    t8 = $[26];
+  }
+  let t9;
+  if ($[27] !== t) {
+    t9 = t("limits.explain");
+    $[27] = t;
     $[28] = t9;
   } else {
     t9 = $[28];
   }
   let t10;
-  if ($[29] !== t) {
-    t10 = t("limits.explain");
-    $[29] = t;
+  if ($[29] !== t9) {
+    t10 = /*#__PURE__*/_jsx("p", {
+      className: "text-xs text-text-muted",
+      children: t9
+    });
+    $[29] = t9;
     $[30] = t10;
   } else {
     t10 = $[30];
   }
   let t11;
-  if ($[31] !== t10) {
-    t11 = /*#__PURE__*/_jsx("p", {
-      className: "text-xs text-text-muted",
-      children: t10
-    });
-    $[31] = t10;
-    $[32] = t11;
-  } else {
-    t11 = $[32];
-  }
-  let t12;
-  if ($[33] !== loginFor || $[34] !== now || $[35] !== shown) {
-    let t13;
-    if ($[37] !== loginFor || $[38] !== now) {
-      t13 = group_2 => group_2.accounts.map(account_0 => /*#__PURE__*/_jsx(LimitCard, {
+  if ($[31] !== loginFor || $[32] !== now || $[33] !== shown) {
+    let t12;
+    if ($[35] !== loginFor || $[36] !== now) {
+      t12 = group_2 => group_2.accounts.map(account_0 => /*#__PURE__*/_jsx(LimitCard, {
         account: account_0,
         named: group_2.accounts.length > 1,
         now: now,
         login: loginFor(group_2.kind)
       }, account_0.id));
-      $[37] = loginFor;
-      $[38] = now;
-      $[39] = t13;
+      $[35] = loginFor;
+      $[36] = now;
+      $[37] = t12;
     } else {
-      t13 = $[39];
+      t12 = $[37];
     }
-    t12 = shown.flatMap(t13);
-    $[33] = loginFor;
-    $[34] = now;
-    $[35] = shown;
-    $[36] = t12;
+    t11 = shown.flatMap(t12);
+    $[31] = loginFor;
+    $[32] = now;
+    $[33] = shown;
+    $[34] = t11;
   } else {
-    t12 = $[36];
+    t11 = $[34];
   }
-  let t13;
-  if ($[40] !== t12) {
-    t13 = /*#__PURE__*/_jsx("div", {
+  let t12;
+  if ($[38] !== t11) {
+    t12 = /*#__PURE__*/_jsx("div", {
       className: "grid grid-cols-2 gap-3",
-      children: t12
+      children: t11
     });
-    $[40] = t12;
-    $[41] = t13;
+    $[38] = t11;
+    $[39] = t12;
   } else {
-    t13 = $[41];
+    t12 = $[39];
   }
-  let t14;
-  if ($[42] !== t11 || $[43] !== t13 || $[44] !== t9) {
-    t14 = /*#__PURE__*/_jsxs("section", {
+  let t13;
+  if ($[40] !== t10 || $[41] !== t12 || $[42] !== t8) {
+    t13 = /*#__PURE__*/_jsxs("section", {
       className: "flex flex-col gap-3",
-      children: [t9, t11, t13]
+      children: [t8, t10, t12]
     });
-    $[42] = t11;
+    $[40] = t10;
+    $[41] = t12;
+    $[42] = t8;
     $[43] = t13;
-    $[44] = t9;
-    $[45] = t14;
   } else {
-    t14 = $[45];
+    t13 = $[43];
   }
-  return t14;
+  return t13;
 }
-function _temp(group_1) {
+function _temp2(group_1) {
   return {
     id: group_1.kind,
     label: PROVIDER_LABELS[group_1.kind]
   };
+}
+function _temp(row) {
+  return row.accounts?.loginCommands;
 }

package/dist/usage/UsagePage.js

@@ -9,6 +9,7 @@ import { useChatHost } from '../host.js';
 import { useChatScope } from '../scope.js';
 import { useProvidersStore } from '../state/providers.js';
 import { askedKey, summaryPayload, USAGE_PERIODS, useUsage, useUsageStore } from '../state/usage.js';
+import { whenOpen } from '../transport.js';
 import { formatClock, formatCount, formatDate, formatTokens, PROVIDER_LABELS } from './format.js';
 import { useMoney } from './money.js';
 import { deriveUsage, labelEveryFor } from './summary.js';
@@ -174,15 +175,7 @@ function useSummary(scopeId, transport, period, account) {
   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();
-        }
-      });
+      const off = whenOpen(transport, () => void transport.request("usage.subscribe", {}).catch(_temp3));
       return () => {
         off();
         transport.request("usage.unsubscribe", {}).catch(_temp4);
@@ -218,15 +211,8 @@ function useSummary(scopeId, transport, period, account) {
   let t4;
   if ($[8] !== load || $[9] !== transport) {
     t3 = () => {
-      if (transport.status === "open") {
-        load();
-      }
+      const offStatus = whenOpen(transport, load);
       const offChanged = transport.on("usage.changed", load);
-      const offStatus = transport.subscribeStatus(status_0 => {
-        if (status_0 === "open") {
-          load();
-        }
-      });
       return () => {
         offChanged();
         offStatus();

package/dist/usage/UsageSummary.js

@@ -1,8 +1,8 @@
 import { c as _c } from "react/compiler-runtime";
 import { useTranslation } from 'react-i18next';
-import { ProviderLogo } from '../agents/ProviderLogo.js';
 import { totalTokensOf } from '@adecore/agent-contracts';
-import { formatCount, formatTokens, PROVIDER_COLORS, PROVIDER_LABELS } from './format.js';
+import { ChartLogo } from './ChartLogo.js';
+import { formatCount, formatTokens, PROVIDER_LABELS } from './format.js';
 import { useMoney } from './money.js';
 /*
  * The number the page is about, with a row per provider under it. Those rows double as the chart's
@@ -106,13 +106,8 @@ export function UsageSummary(t0) {
     if ($[25] !== money) {
       t9 = provider => /*#__PURE__*/_jsxs("div", {
         className: "flex items-center gap-2 text-xs",
-        children: [/*#__PURE__*/_jsx("span", {
-          style: {
-            color: PROVIDER_COLORS[provider.provider]
-          },
-          children: /*#__PURE__*/_jsx(ProviderLogo, {
-            provider: provider.provider
-          })
+        children: [/*#__PURE__*/_jsx(ChartLogo, {
+          provider: provider.provider
         }), /*#__PURE__*/_jsx("span", {
           className: "text-text",
           children: PROVIDER_LABELS[provider.provider]