Repository navigation
feat(usage): show reserve and deficit pace on Limits #11095
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -9,11 +9,12 @@ import type { | |
| UsageProviderKind, | ||
| } from "@t3tools/contracts"; | ||
| import { | ||
| evenPaceRemainingPercent, | ||
| formatAllowancePace, | ||
| formatDuration, | ||
| formatResetsIn, | ||
| limitsNotice, | ||
| paceDetail, | ||
| remainingPercent, | ||
| } from "@t3tools/shared/usageLimits"; | ||
| import { type ReactNode, useState } from "react"; | ||
|
|
@@ -26,8 +27,6 @@ import { serverEnvironment } from "../../state/server"; | |
| import { useAtomCommand } from "../../state/use-atom-command"; | ||
| import { useProviderColors } from "./usageProviders"; | ||
|
|
||
| type Driver = ServerProvider["driver"]; | ||
|
|
||
| /** The series colour the usage chart uses for this driver, so the two views read as one. */ | ||
|
|
@@ -40,9 +39,8 @@ function useBarColor(driver: Driver): string | null { | |
|
|
||
| /** | ||
| * One window as a bar spanning its whole duration: the fill is quota left, | ||
| * a colored pill sits at even pace when reserve or deficit is large enough. | ||
| * The pace chip rides the header row; the countdown sits under the bar. | ||
| */ | ||
| function WindowRow(props: { | ||
| readonly window: ServerProviderUsageWindow; | ||
|
|
@@ -51,19 +49,28 @@ function WindowRow(props: { | |
| }) { | ||
| const { window, now } = props; | ||
| const remaining = remainingPercent(window); | ||
| const detail = paceDetail(window, now); | ||
| const pace = detail ? formatAllowancePace(detail) : null; | ||
| const resetsIn = formatResetsIn(window, now); | ||
| return ( | ||
| <View className="gap-1"> | ||
| <View className="flex-row items-baseline justify-between gap-3"> | ||
| <Text className="text-sm text-foreground">{window.label}</Text> | ||
| <View className="flex-row items-center gap-1.5"> | ||
| <Text className="text-sm font-t3-medium tabular-nums text-foreground"> | ||
| {remaining}% left | ||
| </Text> | ||
| {pace ? ( | ||
| <Text | ||
| className="text-xs tabular-nums text-foreground-tertiary" | ||
| accessibilityLabel={pace.explanation} | ||
| > | ||
| {pace.percent} | ||
| </Text> | ||
|
There was a problem hiding this comment.
Whenever pace is available, this renders only AGENTS.md reference: AGENTS.md:L65-L70 Useful? React with 👍 / 👎. |
||
| ) : null} | ||
| </View> | ||
| </View> | ||
| <View className="h-3.5 justify-center"> | ||
| <View className="h-1.5 flex-row overflow-hidden rounded-full bg-subtle"> | ||
| <View | ||
| className={ | ||
|
|
@@ -80,18 +87,19 @@ function WindowRow(props: { | |
| /> | ||
| <View style={{ flex: 100 - remaining }} /> | ||
| </View> | ||
| {detail ? ( | ||
| <View | ||
| className={ | ||
| detail.status === "deficit" | ||
| ? "absolute top-0 h-3.5 w-0.5 rounded-full bg-red-500" | ||
| : "absolute top-0 h-3.5 w-0.5 rounded-full bg-emerald-500" | ||
| } | ||
| style={{ left: `${evenPaceRemainingPercent(detail)}%`, marginLeft: -1 }} | ||
| /> | ||
| ) : null} | ||
| </View> | ||
| {resetsIn ? ( | ||
| <Text className="text-xs tabular-nums text-foreground-tertiary">{resetsIn}</Text> | ||
| ) : null} | ||
| </View> | ||
| ); | ||
|
|
||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🟡 Medium
usage/UsageLimitsPooled.tsx:116The header displays the same bare value such as
20%for both reserve and deficit, so single-account cards do not communicate whether the pace is ahead or behind. The status distinction is currently available only throughaccessibilityLabeland the separate tick; includepaceReadout.markerin the visible readout.🤖 Copy this AI Prompt to have your agent fix this:
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is invalid, it would render as
24% 24% in reserve.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sorry, I'm unable to act on this request because you do not have permissions within this repository.