| author |  Julius Marminge <julius0216@outlook.com> 2026-09-07 21:01:48-07:00 |
| committer |  GitHub <noreply@github.com> 2026-09-07 21:01:48-07:00 |
| log | 6ba15c027a6d411c7f75cc0ca59b601a295c3633 |
| tree | 241c105bd420d230eeabc3426279302540368a36 |
| parent | a37c66406830525888465b2eaebf34df2265de86 |
| signature | Signed by PGP key B5690EEEBB952194 |
fix: hide email-bearing account labels in usage limits (#10668)
2 files changed, 52 insertions(+), 7 deletions(-)
apps
mobile
src
features
web
src
components
apps/mobile/src/features/usage/UsageLimitsSection.tsx+24-3
| ... | ... | @@ -97,6 +97,29 @@ function WindowRow(props: { |
| 97 | 97 | ); |
| 98 | 98 | } |
| 99 | 99 | |
| 100 | function AccountInstanceLabel({ value }: { readonly value: string }) { | |
| 101 | const [revealed, setRevealed] = useState(false); | |
| 102 | if (!value.includes("@")) { | |
| 103 | return ( | |
| 104 | <Text className="shrink text-xs text-foreground-tertiary" numberOfLines={1}> | |
| 105 | · {value} | |
| 106 | </Text> | |
| 107 | ); | |
| 108 | } | |
| 109 | return ( | |
| 110 | <Pressable | |
| 111 | className="shrink active:opacity-60" | |
| 112 | accessibilityRole="button" | |
| 113 | accessibilityLabel={revealed ? "Hide account label" : "Reveal account label"} | |
| 114 | onPress={() => setRevealed((current) => !current)} | |
| 115 | > | |
| 116 | <Text className="text-xs text-foreground-tertiary" numberOfLines={1}> | |
| 117 | · {revealed ? value : "••••••@••••••"} | |
| 118 | </Text> | |
| 119 | </Pressable> | |
| 120 | ); | |
| 121 | } | |
| 122 | ||
| 100 | 123 | /** One account: icon, name and plan on a single line, then its windows. */ |
| 101 | 124 | export function AccountLimits(props: { |
| 102 | 125 | readonly driver: Driver; |
| ... | ... | @@ -128,9 +151,7 @@ export function AccountLimits(props: { |
| 128 | 151 | <View className="min-w-0 flex-1 flex-row items-baseline gap-2"> |
| 129 | 152 | <Text className="text-base font-t3-medium text-foreground">{props.label}</Text> |
| 130 | 153 | {props.instanceLabel !== props.label ? ( |
| 131 | <Text className="shrink text-xs text-foreground-tertiary" numberOfLines={1}> | |
| 132 | · {props.instanceLabel} | |
| 133 | </Text> | |
| 154 | <AccountInstanceLabel key={props.instanceLabel} value={props.instanceLabel} /> | |
| 134 | 155 | ) : null} |
| 135 | 156 | {props.detail ? ( |
| 136 | 157 | <Text className="shrink text-sm text-foreground-muted" numberOfLines={1}> |
apps/web/src/components/chat/ComposerUsageLimits.tsx+28-4
| ... | ... | @@ -3,6 +3,7 @@ import { limitsNotice } from "@t3tools/shared/usageLimits"; |
| 3 | 3 | import { GaugeIcon } from "lucide-react"; |
| 4 | 4 | |
| 5 | 5 | import { getDriverOption } from "../settings/providerDriverMeta"; |
| 6 | import { RedactedSensitiveText } from "../settings/RedactedSensitiveText"; | |
| 6 | 7 | import { LimitWindows, ResetCredits } from "../usage/UsageLimits"; |
| 7 | 8 | import { ComposerBanner } from "./ComposerBanner"; |
| 8 | 9 | import type { ComposerBannerStackItem } from "./ComposerBannerStack"; |
| ... | ... | @@ -20,6 +21,27 @@ function accountLabel(account: UsageLimitsReport["accounts"][number]): string { |
| 20 | 21 | : driver; |
| 21 | 22 | } |
| 22 | 23 | |
| 24 | function AccountSummary({ account }: { readonly account: UsageLimitsReport["accounts"][number] }) { | |
| 25 | const label = accountLabel(account); | |
| 26 | return ( | |
| 27 | <> | |
| 28 | {label.includes("@") ? ( | |
| 29 | <RedactedSensitiveText | |
| 30 | key={label} | |
| 31 | value={label} | |
| 32 | ariaLabel="Toggle account label visibility" | |
| 33 | revealTooltip="Click to reveal account" | |
| 34 | hideTooltip="Click to hide account" | |
| 35 | className="max-w-full truncate align-bottom font-sans text-xs leading-normal" | |
| 36 | /> | |
| 37 | ) : ( | |
| 38 | label | |
| 39 | )} | |
| 40 | {account.plan ? ` · ${account.plan}` : null} | |
| 41 | </> | |
| 42 | ); | |
| 43 | } | |
| 44 | ||
| 23 | 45 | /** The /usage-limits result as a composer notice: it stacks under warnings and dismisses like one. */ |
| 24 | 46 | export function usageLimitsBannerItem( |
| 25 | 47 | id: string, |
| ... | ... | @@ -29,9 +51,11 @@ export function usageLimitsBannerItem( |
| 29 | 51 | ): ComposerBannerStackItem { |
| 30 | 52 | const [first] = report.accounts; |
| 31 | 53 | const single = report.accounts.length === 1 && first ? first : null; |
| 32 | const summary = single | |
| 33 | ? [accountLabel(single), single.plan].filter(Boolean).join(" · ") | |
| 34 | : `${report.accounts.length} accounts`; | |
| 54 | const summary = single ? ( | |
| 55 | <AccountSummary account={single} /> | |
| 56 | ) : ( | |
| 57 | `${report.accounts.length} accounts` | |
| 58 | ); | |
| 35 | 59 | return { |
| 36 | 60 | id, |
| 37 | 61 | variant: "info", |
| ... | ... | @@ -65,7 +89,7 @@ function UsageLimitsBannerBody({ |
| 65 | 89 | <div key={account.id} className="flex min-w-0 flex-col gap-1"> |
| 66 | 90 | {report.accounts.length > 1 ? ( |
| 67 | 91 | <span className="truncate text-xs text-muted-foreground"> |
| 68 | {[accountLabel(account), account.plan].filter(Boolean).join(" · ")} | |
| 92 | <AccountSummary account={account} /> | |
| 69 | 93 | </span> |
| 70 | 94 | ) : null} |
| 71 | 95 | {notice ? ( |