@adecore/agents-react 0.31.11 → 0.32.0

package/dist/usage/LimitsList.js

@@ -1,4 +1,4 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { Fragment } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
@@ -8,65 +8,671 @@ import { Tooltip } from '@adecore/ui';
 import { formatClock, formatWeekdayClock, isSameDay, formatCountdown, formatPercent } from '@adecore/ui/format';
 import { ProviderLogo } from '../agents/ProviderLogo.js';
 import { PROVIDER_COLORS, PROVIDER_LABELS } from './format.js';
-import { accountNote, explain, isSignedOut, nextReset } from './limit-groups.js';
+import { accountNote, evenPace, explain, isSignedOut, nextReset, paceText } from './limit-groups.js';
 /* Red where a window is nearly spent, amber where it is worth knowing; room to spare is not news and takes the text color. */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 function toneOf(used) {
-    return used >= 0.9 ? 'bg-status-error' : used >= 0.7 ? 'bg-status-needs-you' : 'bg-text';
+  return used >= 0.9 ? 'bg-status-error' : used >= 0.7 ? 'bg-status-needs-you' : 'bg-text';
 }
 /* A time of day when the reset is today, a weekday and a time when it is not. */
 function resetAtLabel(resetsAt, now) {
-    return isSameDay(resetsAt, now) ? formatClock(resetsAt) : formatWeekdayClock(resetsAt);
+  return isSameDay(resetsAt, now) ? formatClock(resetsAt) : formatWeekdayClock(resetsAt);
 }
 /* How long the window still has, or nothing once it has run out. */
 function resetInLabel(resetsAt, now) {
-    return resetsAt <= now ? null : formatCountdown(resetsAt - now);
+  return resetsAt <= now ? null : formatCountdown(resetsAt - now);
 }
-/* How much of the window has run, or null when the provider named neither a reset nor a length. */
-function elapsedShare(window, now) {
-    if (window.resetsAt === null || window.durationMs === null || window.durationMs <= 0) {
-        return null;
-    }
-    return Math.min(1, Math.max(0, 1 - (window.resetsAt - now) / window.durationMs));
-}
-export function WindowBar({ window, now, compact }) {
-    const { t } = useTranslation('agent-usage');
+const PACE_LINES = {
+  ahead: 'limits.faster',
+  behind: 'limits.slower',
+  even: 'limits.even'
+};
+export function WindowBar(t0) {
+  const $ = _c(43);
+  const {
+    window,
+    now,
+    compact
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-usage");
+  let t1;
+  if ($[0] !== compact || $[1] !== now || $[2] !== t || $[3] !== window) {
     const percent = Math.round(window.used * 100);
-    const elapsed = elapsedShare(window, now);
-    // The bar fills as the quota is spent, so the mark beside it is how much of the window has run.
-    const mark = elapsed === null ? null : Math.round(elapsed * 100);
+    const pace = evenPace(window, now);
+    const mark = pace?.percent ?? null;
     const resetsAt = window.resetsAt === null ? null : resetAtLabel(window.resetsAt, now);
-    const resetsIn = window.resetsAt === null ? null : resetInLabel(window.resetsAt, now);
-    const bar = (_jsxs("div", { role: "progressbar", "aria-label": t('limits.bar', { window: window.label, percent }), "aria-valuenow": percent, "aria-valuemin": 0, "aria-valuemax": 100, className: clsx('relative cursor-default', compact ? 'h-4' : 'h-6'), children: [_jsx("div", { className: clsx('absolute inset-x-0 rounded-full bg-surface-sunken', compact ? 'inset-y-1' : 'inset-y-1.5') }), _jsx("div", { className: clsx('absolute left-0 rounded-full', compact ? 'inset-y-1' : 'inset-y-1.5', toneOf(window.used)), style: { width: `${Math.min(100, percent)}%` } }), mark !== null && (_jsx("span", { "aria-hidden": true, className: clsx('absolute inset-y-0.5 w-px -translate-x-1/2', mark <= percent ? 'bg-surface' : 'bg-text-muted'), style: { left: `${mark}%` } }))] }));
-    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-baseline gap-2 text-xs", children: [_jsx("span", { className: "text-text", children: window.label }), _jsx("span", { className: "ml-auto tabular-nums text-text-muted", children: t('limits.used', { percent }) })] }), compact ? (bar) : (_jsx(Tooltip, { label: _jsxs("span", { className: "flex flex-col gap-0.5", children: [_jsxs("span", { children: [t('limits.used', { percent }), mark !== null && ` · ${t('limits.windowPassed', { percent: mark })}`] }), mark !== null && _jsx("span", { className: "text-text-muted", children: mark <= percent ? t('limits.faster') : t('limits.slower') })] }), children: bar })), resetsAt !== null && (_jsxs("p", { className: "text-xs whitespace-nowrap text-text-faint", children: [t('limits.resets', { at: resetsAt }), resetsIn !== null && ` · ${resetsIn}`] }))] }));
+    let t2;
+    if ($[5] !== now || $[6] !== window.resetsAt) {
+      t2 = window.resetsAt === null ? null : resetInLabel(window.resetsAt, now);
+      $[5] = now;
+      $[6] = window.resetsAt;
+      $[7] = t2;
+    } else {
+      t2 = $[7];
+    }
+    const resetsIn = t2;
+    const t3 = t("limits.bar", {
+      window: window.label,
+      percent
+    });
+    let t4;
+    if ($[8] !== now || $[9] !== window) {
+      t4 = paceText(window, now);
+      $[8] = now;
+      $[9] = window;
+      $[10] = t4;
+    } else {
+      t4 = $[10];
+    }
+    const t5 = compact ? "h-4" : "h-6";
+    let t6;
+    if ($[11] !== t5) {
+      t6 = clsx("relative cursor-default", t5);
+      $[11] = t5;
+      $[12] = t6;
+    } else {
+      t6 = $[12];
+    }
+    const t7 = compact ? "inset-y-1" : "inset-y-1.5";
+    let t8;
+    if ($[13] !== t7) {
+      t8 = clsx("absolute inset-x-0 rounded-full bg-surface-sunken", t7);
+      $[13] = t7;
+      $[14] = t8;
+    } else {
+      t8 = $[14];
+    }
+    let t9;
+    if ($[15] !== t8) {
+      t9 = /*#__PURE__*/_jsx("div", {
+        className: t8
+      });
+      $[15] = t8;
+      $[16] = t9;
+    } else {
+      t9 = $[16];
+    }
+    const t10 = compact ? "inset-y-1" : "inset-y-1.5";
+    let t11;
+    if ($[17] !== t10 || $[18] !== window.used) {
+      t11 = clsx("absolute left-0 rounded-full", t10, toneOf(window.used));
+      $[17] = t10;
+      $[18] = window.used;
+      $[19] = t11;
+    } else {
+      t11 = $[19];
+    }
+    const t12 = `${Math.min(100, percent)}%`;
+    let t13;
+    if ($[20] !== t12) {
+      t13 = {
+        width: t12
+      };
+      $[20] = t12;
+      $[21] = t13;
+    } else {
+      t13 = $[21];
+    }
+    let t14;
+    if ($[22] !== t11 || $[23] !== t13) {
+      t14 = /*#__PURE__*/_jsx("div", {
+        className: t11,
+        style: t13
+      });
+      $[22] = t11;
+      $[23] = t13;
+      $[24] = t14;
+    } else {
+      t14 = $[24];
+    }
+    const t15 = mark !== null && /*#__PURE__*/_jsx("span", {
+      "aria-hidden": true,
+      className: clsx("absolute inset-y-0.5 w-px -translate-x-1/2", mark <= percent ? "bg-surface" : "bg-text-muted"),
+      style: {
+        left: `${mark}%`
+      }
+    });
+    let t16;
+    if ($[25] !== percent || $[26] !== t14 || $[27] !== t15 || $[28] !== t3 || $[29] !== t4 || $[30] !== t6 || $[31] !== t9) {
+      t16 = /*#__PURE__*/_jsxs("div", {
+        role: "progressbar",
+        "aria-label": t3,
+        "aria-valuenow": percent,
+        "aria-valuetext": t4,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        className: t6,
+        children: [t9, t14, t15]
+      });
+      $[25] = percent;
+      $[26] = t14;
+      $[27] = t15;
+      $[28] = t3;
+      $[29] = t4;
+      $[30] = t6;
+      $[31] = t9;
+      $[32] = t16;
+    } else {
+      t16 = $[32];
+    }
+    const bar = t16;
+    let t17;
+    if ($[33] !== window.label) {
+      t17 = /*#__PURE__*/_jsx("span", {
+        className: "text-text",
+        children: window.label
+      });
+      $[33] = window.label;
+      $[34] = t17;
+    } else {
+      t17 = $[34];
+    }
+    let t18;
+    if ($[35] !== percent || $[36] !== t) {
+      t18 = t("limits.used", {
+        percent
+      });
+      $[35] = percent;
+      $[36] = t;
+      $[37] = t18;
+    } else {
+      t18 = $[37];
+    }
+    let t19;
+    if ($[38] !== t18) {
+      t19 = /*#__PURE__*/_jsx("span", {
+        className: "ml-auto tabular-nums text-text-muted",
+        children: t18
+      });
+      $[38] = t18;
+      $[39] = t19;
+    } else {
+      t19 = $[39];
+    }
+    let t20;
+    if ($[40] !== t17 || $[41] !== t19) {
+      t20 = /*#__PURE__*/_jsxs("div", {
+        className: "flex items-baseline gap-2 text-xs",
+        children: [t17, t19]
+      });
+      $[40] = t17;
+      $[41] = t19;
+      $[42] = t20;
+    } else {
+      t20 = $[42];
+    }
+    t1 = /*#__PURE__*/_jsxs("div", {
+      className: "flex flex-col gap-1",
+      children: [t20, compact ? bar : /*#__PURE__*/_jsx(Tooltip, {
+        label: /*#__PURE__*/_jsxs("span", {
+          className: "flex flex-col gap-0.5",
+          children: [/*#__PURE__*/_jsxs("span", {
+            children: [t("limits.used", {
+              percent
+            }), mark !== null && ` · ${t("limits.windowPassed", {
+              percent: mark
+            })}`]
+          }), pace !== null && /*#__PURE__*/_jsx("span", {
+            className: "text-text-muted",
+            children: t(PACE_LINES[pace.standing])
+          })]
+        }),
+        children: bar
+      }), resetsAt !== null && /*#__PURE__*/_jsxs("p", {
+        className: "text-xs whitespace-nowrap text-text-faint",
+        children: [t("limits.resets", {
+          at: resetsAt
+        }), resetsIn !== null && ` · ${resetsIn}`]
+      })]
+    });
+    $[0] = compact;
+    $[1] = now;
+    $[2] = t;
+    $[3] = window;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  return t1;
 }
 /* Every provider with what its plan has left, shared by the usage page and the sidebar card. */
-export function LimitsList({ limits, now, compact = false }) {
-    return (_jsx("div", { className: clsx('flex flex-col', compact ? 'gap-4' : 'gap-6'), children: limits.providers.map((provider) => {
-            const note = explain(provider);
-            return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("p", { className: "flex items-center gap-2 text-xs font-medium", children: [_jsx("span", { style: { color: PROVIDER_COLORS[provider.kind] }, children: _jsx(ProviderLogo, { provider: provider.kind }) }), PROVIDER_LABELS[provider.kind], provider.plan !== null && _jsxs("span", { className: "text-text-muted", children: ["\u00B7 ", provider.plan] })] }), note === null ? (_jsx("div", { className: clsx('flex flex-col', compact ? 'gap-3' : 'gap-4'), children: provider.windows.map((window) => (_jsx(WindowBar, { window: window, now: now, compact: compact }, window.id))) })) : (_jsx("p", { className: "text-xs text-text-faint", children: note }))] }, limitsAccountId(provider)));
-        }) }));
+export function LimitsList(t0) {
+  const $ = _c(12);
+  const {
+    limits,
+    now,
+    compact: t1
+  } = t0;
+  const compact = t1 === undefined ? false : t1;
+  const t2 = compact ? "gap-4" : "gap-6";
+  let t3;
+  if ($[0] !== t2) {
+    t3 = clsx("flex flex-col", t2);
+    $[0] = t2;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  let t4;
+  if ($[2] !== compact || $[3] !== limits.providers || $[4] !== now) {
+    let t5;
+    if ($[6] !== compact || $[7] !== now) {
+      t5 = provider => {
+        const note = explain(provider);
+        return /*#__PURE__*/_jsxs("div", {
+          className: "flex flex-col gap-2",
+          children: [/*#__PURE__*/_jsxs("p", {
+            className: "flex items-center gap-2 text-xs font-medium",
+            children: [/*#__PURE__*/_jsx("span", {
+              style: {
+                color: PROVIDER_COLORS[provider.kind]
+              },
+              children: /*#__PURE__*/_jsx(ProviderLogo, {
+                provider: provider.kind
+              })
+            }), PROVIDER_LABELS[provider.kind], provider.plan !== null && /*#__PURE__*/_jsxs("span", {
+              className: "text-text-muted",
+              children: ["\xB7 ", provider.plan]
+            })]
+          }), note === null ? /*#__PURE__*/_jsx("div", {
+            className: clsx("flex flex-col", compact ? "gap-3" : "gap-4"),
+            children: provider.windows.map(window => /*#__PURE__*/_jsx(WindowBar, {
+              window: window,
+              now: now,
+              compact: compact
+            }, window.id))
+          }) : /*#__PURE__*/_jsx("p", {
+            className: "text-xs text-text-faint",
+            children: note
+          })]
+        }, limitsAccountId(provider));
+      };
+      $[6] = compact;
+      $[7] = now;
+      $[8] = t5;
+    } else {
+      t5 = $[8];
+    }
+    t4 = limits.providers.map(t5);
+    $[2] = compact;
+    $[3] = limits.providers;
+    $[4] = now;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  let t5;
+  if ($[9] !== t3 || $[10] !== t4) {
+    t5 = /*#__PURE__*/_jsx("div", {
+      className: t3,
+      children: t4
+    });
+    $[9] = t3;
+    $[10] = t4;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  return t5;
 }
 /* One window on one line, for a card that holds several accounts: the label, a thin bar with the elapsed mark, the percent. */
-function WindowLine({ window, now }) {
-    const { t } = useTranslation('agent-usage');
-    const percent = Math.round(window.used * 100);
-    const elapsed = elapsedShare(window, now);
-    const mark = elapsed === null ? null : Math.round(elapsed * 100);
-    return (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-text-muted", children: window.label }), _jsxs("div", { role: "progressbar", "aria-label": t('limits.bar', { window: window.label, percent }), "aria-valuenow": percent, "aria-valuemin": 0, "aria-valuemax": 100, className: "relative h-1.5 rounded-full bg-surface-sunken", children: [_jsx("div", { className: clsx('absolute inset-y-0 left-0 rounded-full', toneOf(window.used)), style: { width: `${Math.min(100, percent)}%` } }), mark !== null && (_jsx("span", { "aria-hidden": true, className: clsx('absolute -inset-y-0.5 w-px -translate-x-1/2', mark <= percent ? 'bg-surface-raised' : 'bg-text-muted'), style: { left: `${mark}%` } }))] }), _jsx("span", { className: clsx('text-right tabular-nums', window.used >= 0.9 ? 'text-status-error' : 'text-text'), children: formatPercent(percent) })] }));
+function WindowLine(t0) {
+  const $ = _c(44);
+  const {
+    window,
+    now
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-usage");
+  let mark;
+  let percent;
+  let t1;
+  let t2;
+  let t3;
+  if ($[0] !== now || $[1] !== t || $[2] !== window) {
+    percent = Math.round(window.used * 100);
+    let t4;
+    if ($[8] !== now || $[9] !== window) {
+      t4 = evenPace(window, now)?.percent ?? null;
+      $[8] = now;
+      $[9] = window;
+      $[10] = t4;
+    } else {
+      t4 = $[10];
+    }
+    mark = t4;
+    if ($[11] !== window.label) {
+      t3 = /*#__PURE__*/_jsx("span", {
+        className: "text-text-muted",
+        children: window.label
+      });
+      $[11] = window.label;
+      $[12] = t3;
+    } else {
+      t3 = $[12];
+    }
+    t1 = "progressbar";
+    t2 = t("limits.bar", {
+      window: window.label,
+      percent
+    });
+    $[0] = now;
+    $[1] = t;
+    $[2] = window;
+    $[3] = mark;
+    $[4] = percent;
+    $[5] = t1;
+    $[6] = t2;
+    $[7] = t3;
+  } else {
+    mark = $[3];
+    percent = $[4];
+    t1 = $[5];
+    t2 = $[6];
+    t3 = $[7];
+  }
+  let t4;
+  if ($[13] !== now || $[14] !== window) {
+    t4 = paceText(window, now);
+    $[13] = now;
+    $[14] = window;
+    $[15] = t4;
+  } else {
+    t4 = $[15];
+  }
+  let t5;
+  if ($[16] !== window.used) {
+    t5 = clsx("absolute inset-y-0 left-0 rounded-full", toneOf(window.used));
+    $[16] = window.used;
+    $[17] = t5;
+  } else {
+    t5 = $[17];
+  }
+  const t6 = `${Math.min(100, percent)}%`;
+  let t7;
+  if ($[18] !== t6) {
+    t7 = {
+      width: t6
+    };
+    $[18] = t6;
+    $[19] = t7;
+  } else {
+    t7 = $[19];
+  }
+  let t8;
+  if ($[20] !== t5 || $[21] !== t7) {
+    t8 = /*#__PURE__*/_jsx("div", {
+      className: t5,
+      style: t7
+    });
+    $[20] = t5;
+    $[21] = t7;
+    $[22] = t8;
+  } else {
+    t8 = $[22];
+  }
+  let t9;
+  if ($[23] !== mark || $[24] !== percent) {
+    t9 = mark !== null && /*#__PURE__*/_jsx("span", {
+      "aria-hidden": true,
+      className: clsx("absolute -inset-y-0.5 w-px -translate-x-1/2", mark <= percent ? "bg-surface-raised" : "bg-text-muted"),
+      style: {
+        left: `${mark}%`
+      }
+    });
+    $[23] = mark;
+    $[24] = percent;
+    $[25] = t9;
+  } else {
+    t9 = $[25];
+  }
+  let t10;
+  if ($[26] !== percent || $[27] !== t1 || $[28] !== t2 || $[29] !== t4 || $[30] !== t8 || $[31] !== t9) {
+    t10 = /*#__PURE__*/_jsxs("div", {
+      role: t1,
+      "aria-label": t2,
+      "aria-valuenow": percent,
+      "aria-valuetext": t4,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      className: "relative h-1.5 rounded-full bg-surface-sunken",
+      children: [t8, t9]
+    });
+    $[26] = percent;
+    $[27] = t1;
+    $[28] = t2;
+    $[29] = t4;
+    $[30] = t8;
+    $[31] = t9;
+    $[32] = t10;
+  } else {
+    t10 = $[32];
+  }
+  const t11 = window.used >= 0.9 ? "text-status-error" : "text-text";
+  let t12;
+  if ($[33] !== t11) {
+    t12 = clsx("text-right tabular-nums", t11);
+    $[33] = t11;
+    $[34] = t12;
+  } else {
+    t12 = $[34];
+  }
+  let t13;
+  if ($[35] !== percent) {
+    t13 = formatPercent(percent);
+    $[35] = percent;
+    $[36] = t13;
+  } else {
+    t13 = $[36];
+  }
+  let t14;
+  if ($[37] !== t12 || $[38] !== t13) {
+    t14 = /*#__PURE__*/_jsx("span", {
+      className: t12,
+      children: t13
+    });
+    $[37] = t12;
+    $[38] = t13;
+    $[39] = t14;
+  } else {
+    t14 = $[39];
+  }
+  let t15;
+  if ($[40] !== t10 || $[41] !== t14 || $[42] !== t3) {
+    t15 = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [t3, t10, t14]
+    });
+    $[40] = t10;
+    $[41] = t14;
+    $[42] = t3;
+    $[43] = t15;
+  } else {
+    t15 = $[43];
+  }
+  return t15;
 }
-function AccountLines({ account, now }) {
-    const { t } = useTranslation('agent-usage');
-    const signedOut = isSignedOut(account);
-    const note = signedOut ? null : accountNote(account);
-    const windows = signedOut || note !== null ? [] : (account.entry?.windows ?? []);
+function AccountLines(t0) {
+  const $ = _c(29);
+  const {
+    account,
+    now
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-usage");
+  let t1;
+  if ($[0] !== account) {
+    t1 = isSignedOut(account);
+    $[0] = account;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const signedOut = t1;
+  let t2;
+  if ($[2] !== account || $[3] !== signedOut) {
+    t2 = signedOut ? null : accountNote(account);
+    $[2] = account;
+    $[3] = signedOut;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const note = t2;
+  let t3;
+  if ($[5] !== account.color || $[6] !== account.entry || $[7] !== account.name || $[8] !== note || $[9] !== now || $[10] !== signedOut || $[11] !== t) {
+    const windows = signedOut || note !== null ? [] : account.entry?.windows ?? [];
     const next = nextReset(windows, now);
     const resetsIn = next === null ? null : resetInLabel(next.resetsAt, now);
-    return (_jsxs(_Fragment, { children: [_jsxs("p", { className: "col-span-full mt-2 flex min-w-0 items-center gap-2", children: [_jsx(AccountDot, { color: account.color }), _jsx("span", { className: "truncate", children: account.name }), signedOut ? (_jsxs("span", { className: "shrink-0 text-text-faint", children: ["\u00B7 ", t('limits.signedOut')] })) : (account.entry?.plan && _jsxs("span", { className: "shrink-0 text-text-muted", children: ["\u00B7 ", account.entry.plan] }))] }), note !== null && _jsx("p", { className: "col-span-full text-text-faint", children: note }), windows.map((window) => (_jsx(WindowLine, { window: window, now: now }, window.id))), next !== null && (_jsxs("p", { className: "col-span-full whitespace-nowrap text-text-faint", children: [t('limits.nextReset', { window: next.label, at: resetAtLabel(next.resetsAt, now) }), resetsIn !== null && ` · ${resetsIn}`] }))] }));
+    let t4;
+    if ($[13] !== account.color) {
+      t4 = /*#__PURE__*/_jsx(AccountDot, {
+        color: account.color
+      });
+      $[13] = account.color;
+      $[14] = t4;
+    } else {
+      t4 = $[14];
+    }
+    let t5;
+    if ($[15] !== account.name) {
+      t5 = /*#__PURE__*/_jsx("span", {
+        className: "truncate",
+        children: account.name
+      });
+      $[15] = account.name;
+      $[16] = t5;
+    } else {
+      t5 = $[16];
+    }
+    let t6;
+    if ($[17] !== account.entry || $[18] !== signedOut || $[19] !== t) {
+      t6 = signedOut ? /*#__PURE__*/_jsxs("span", {
+        className: "shrink-0 text-text-faint",
+        children: ["\xB7 ", t("limits.signedOut")]
+      }) : account.entry?.plan && /*#__PURE__*/_jsxs("span", {
+        className: "shrink-0 text-text-muted",
+        children: ["\xB7 ", account.entry.plan]
+      });
+      $[17] = account.entry;
+      $[18] = signedOut;
+      $[19] = t;
+      $[20] = t6;
+    } else {
+      t6 = $[20];
+    }
+    let t7;
+    if ($[21] !== t4 || $[22] !== t5 || $[23] !== t6) {
+      t7 = /*#__PURE__*/_jsxs("p", {
+        className: "col-span-full mt-2 flex min-w-0 items-center gap-2",
+        children: [t4, t5, t6]
+      });
+      $[21] = t4;
+      $[22] = t5;
+      $[23] = t6;
+      $[24] = t7;
+    } else {
+      t7 = $[24];
+    }
+    let t8;
+    if ($[25] !== note) {
+      t8 = note !== null && /*#__PURE__*/_jsx("p", {
+        className: "col-span-full text-text-faint",
+        children: note
+      });
+      $[25] = note;
+      $[26] = t8;
+    } else {
+      t8 = $[26];
+    }
+    let t9;
+    if ($[27] !== now) {
+      t9 = window => /*#__PURE__*/_jsx(WindowLine, {
+        window: window,
+        now: now
+      }, window.id);
+      $[27] = now;
+      $[28] = t9;
+    } else {
+      t9 = $[28];
+    }
+    t3 = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [t7, t8, windows.map(t9), next !== null && /*#__PURE__*/_jsxs("p", {
+        className: "col-span-full whitespace-nowrap text-text-faint",
+        children: [t("limits.nextReset", {
+          window: next.label,
+          at: resetAtLabel(next.resetsAt, now)
+        }), resetsIn !== null && ` · ${resetsIn}`]
+      })]
+    });
+    $[5] = account.color;
+    $[6] = account.entry;
+    $[7] = account.name;
+    $[8] = note;
+    $[9] = now;
+    $[10] = signedOut;
+    $[11] = t;
+    $[12] = t3;
+  } else {
+    t3 = $[12];
+  }
+  return t3;
 }
 /*
  * The hover card once a CLI has several accounts: a block per account, a line per window. One grid over
  * the whole card, so the bars of every account start and end at the same place whatever their labels.
  */
-export function AccountLimitsList({ groups, now }) {
-    return (_jsx("div", { className: "grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-2 gap-y-1 text-xs", children: groups.map((group) => (_jsxs(Fragment, { children: [_jsxs("p", { className: "col-span-full mt-3 flex items-center gap-2 font-medium first:mt-0", children: [_jsx("span", { style: { color: PROVIDER_COLORS[group.kind] }, children: _jsx(ProviderLogo, { provider: group.kind }) }), PROVIDER_LABELS[group.kind]] }), group.accounts.map((account) => (_jsx(AccountLines, { account: account, now: now }, account.id)))] }, group.kind))) }));
-}
+export function AccountLimitsList(t0) {
+  const $ = _c(7);
+  const {
+    groups,
+    now
+  } = t0;
+  let t1;
+  if ($[0] !== groups || $[1] !== now) {
+    let t2;
+    if ($[3] !== now) {
+      t2 = group => /*#__PURE__*/_jsxs(Fragment, {
+        children: [/*#__PURE__*/_jsxs("p", {
+          className: "col-span-full mt-3 flex items-center gap-2 font-medium first:mt-0",
+          children: [/*#__PURE__*/_jsx("span", {
+            style: {
+              color: PROVIDER_COLORS[group.kind]
+            },
+            children: /*#__PURE__*/_jsx(ProviderLogo, {
+              provider: group.kind
+            })
+          }), PROVIDER_LABELS[group.kind]]
+        }), group.accounts.map(account => /*#__PURE__*/_jsx(AccountLines, {
+          account: account,
+          now: now
+        }, account.id))]
+      }, group.kind);
+      $[3] = now;
+      $[4] = t2;
+    } else {
+      t2 = $[4];
+    }
+    t1 = groups.map(t2);
+    $[0] = groups;
+    $[1] = now;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[5] !== t1) {
+    t2 = /*#__PURE__*/_jsx("div", {
+      className: "grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-2 gap-y-1 text-xs",
+      children: t1
+    });
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
+}