From 5ad5ba480e3e2625698b3ae3e9eb3c69f49782a5 Mon Sep 17 00:00:00 2001 From: lorenzomicheli Date: Tue, 22 Sep 2026 18:59:37 +0200 Subject: [PATCH 1/3] feat(usage): stack pooled accounts as labeled rows MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Accounts in a window shared one row, each a column of the same bar, so two accounts halved the width and the name was the only thing telling them apart. Give each account its own full-width row, named " · ", and keep its legend row beside it. Co-Authored-By: Claude Opus 5 (1M context) --- .../components/usage/UsageLimitsPooled.tsx | 177 ++++++++++-------- 1 file changed, 98 insertions(+), 79 deletions(-) diff --git a/apps/web/src/components/usage/UsageLimitsPooled.tsx b/apps/web/src/components/usage/UsageLimitsPooled.tsx index d99ce30b475c..b51754d393e1 100644 --- a/apps/web/src/components/usage/UsageLimitsPooled.tsx +++ b/apps/web/src/components/usage/UsageLimitsPooled.tsx @@ -224,6 +224,7 @@ function SegmentPopover({ */ function PoolSegment({ account, + providerLabel, window, reset, color, @@ -232,6 +233,7 @@ function PoolSegment({ showAccountName, }: { readonly account: LimitAccount; + readonly providerLabel: string; readonly window: LimitPoolMember["window"]; readonly reset: LimitPoolWindow["resets"][number] | undefined; readonly color: string; @@ -246,68 +248,79 @@ function PoolSegment({ const credits = account.limits.resetCredits?.availableCount ?? 0; return ( - - } - > - {/* Translucent so the label reads over the fill for any provider colour and theme. */} -
- {/* The spent share is hatched, not blank: it is what the countdown restores. */} - {remaining < 100 && reset ? ( +
+ + } + > + {/* Translucent so the label reads over the fill for any provider colour and theme. */}
- ) : null} - - {index} - -
- {showAccountName ? ( - ) : null} - {remaining}% - {/* Countdown and badge get their own plate: fill and hatching run under them otherwise. */} - - {resetsIn?.replace("resets in ", "↻ ") ?? ""} - {credits ? ( - <> - {resetsIn ? ( - - · - - ) : null} - - - {credits} - - - ) : null} + + {index} -
- - +
+ {showAccountName ? ( + + {providerLabel} + · + + + ) : null} + + {remaining}% + + {/* Countdown and badge get their own plate: fill and hatching run under them otherwise. */} + + {resetsIn?.replace("resets in ", "↻ ") ?? ""} + {credits ? ( + <> + {resetsIn ? ( + + · + + ) : null} + + + {credits} + + + ) : null} + +
+ + +
{account.redeem ? ( } className="min-w-0 @2xl/pool:hidden" > @@ -369,7 +383,11 @@ function LegendRow({ Segment {index} - + + {providerLabel} + · + + {remaining}% {resetsIn?.replace("resets in ", "↻ ") ?? ""} @@ -451,35 +469,33 @@ function RedeemableSegmentPopup({ */ function PoolBar({ pool, + providerLabel, color, now, }: { readonly pool: LimitPoolWindow; + readonly providerLabel: string; readonly color: string; readonly now: number; }) { const restores = new Map(pool.resets.map((reset) => [reset.member.account.key, reset])); return ( -
-
- {pool.columns.map((member, position) => - member.window ? ( - 1} - /> - ) : null, - )} -
+
+ {pool.columns.map((member, position) => + member.window ? ( + 1} + /> + ) : null, + )}
); } @@ -490,12 +506,14 @@ function PoolBar({ */ function PoolWindowCard({ pool, + providerLabel, color, now, label, description, }: { readonly pool: LimitPoolWindow; + readonly providerLabel: string; readonly color: string; readonly now: number; readonly label?: string | undefined; @@ -520,7 +538,7 @@ function PoolWindowCard({ ) : null}
- + {description ? (

{description}

) : null} @@ -550,6 +568,7 @@ function PoolSection({ pool, now }: { readonly pool: LimitPool; readonly now: nu Date: Tue, 22 Sep 2026 19:08:10 +0200 Subject: [PATCH 2/3] fix(usage): do not repeat the provider name on an unnamed instance Co-Authored-By: Claude Opus 5 (1M context) --- .../components/usage/UsageLimitsPooled.tsx | 51 +++++++++++++++---- 1 file changed, 41 insertions(+), 10 deletions(-) diff --git a/apps/web/src/components/usage/UsageLimitsPooled.tsx b/apps/web/src/components/usage/UsageLimitsPooled.tsx index b51754d393e1..d92859742688 100644 --- a/apps/web/src/components/usage/UsageLimitsPooled.tsx +++ b/apps/web/src/components/usage/UsageLimitsPooled.tsx @@ -121,6 +121,37 @@ function AccountName({ ); } +/** + * " · ", so two accounts on one provider are told apart by + * the name their owner gave them. An account with no name of its own would + * render the provider label twice, so it keeps the provider label alone. + */ +function PoolRowName({ + account, + providerLabel, + className, +}: { + readonly account: LimitAccount; + readonly providerLabel: string; + readonly className?: string; +}) { + // An unnamed instance carries the provider's own name, which would print twice. + const named = account.displayName + ? account.displayName.toLowerCase() !== providerLabel.toLowerCase() + : account.email !== undefined; + return ( + + {providerLabel} + {named ? ( + <> + · + + + ) : null} + + ); +} + function Row({ label, children }: { readonly label: string; readonly children: ReactNode }) { return (
@@ -284,11 +315,11 @@ function PoolSegment({
{showAccountName ? ( - - {providerLabel} - · - - + ) : null} {remaining}% @@ -383,11 +414,11 @@ function LegendRow({ Segment {index} - - {providerLabel} - · - - + {remaining}% {resetsIn?.replace("resets in ", "↻ ") ?? ""} From d994582fca99605e3b3ff6da00fad4137e7c6e06 Mon Sep 17 00:00:00 2001 From: lorenzomicheli Date: Wed, 23 Sep 2026 10:32:44 +0200 Subject: [PATCH 3/3] fix(usage): keep an account's place when a window is missing Stacked rows dropped a column whose account reports nothing in that window, so later accounts moved up and no longer lined up with the same account in the provider's other cards. Reserve the row instead. Co-Authored-By: Claude Opus 5 (1M context) --- apps/web/src/components/usage/UsageLimitsPooled.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/apps/web/src/components/usage/UsageLimitsPooled.tsx b/apps/web/src/components/usage/UsageLimitsPooled.tsx index d92859742688..e8543ff9dd31 100644 --- a/apps/web/src/components/usage/UsageLimitsPooled.tsx +++ b/apps/web/src/components/usage/UsageLimitsPooled.tsx @@ -525,7 +525,11 @@ function PoolBar({ index={position + 1} showAccountName={pool.columns.length > 1} /> - ) : null, + ) : ( + // The account reports nothing in this window, but keeps its place: + // a row holds the same account across every card of this provider. +
+ ), )}
);