authorgravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-09-07 21:01:48-07:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-09-07 21:01:48-07:00
log6ba15c027a6d411c7f75cc0ca59b601a295c3633
tree241c105bd420d230eeabc3426279302540368a36
parenta37c66406830525888465b2eaebf34df2265de86
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/usage/UsageLimitsSection.tsx+24-3
...@@ -97,6 +97,29 @@ function WindowRow(props: {...@@ -97,6 +97,29 @@ function WindowRow(props: {
97 );97 );
98}98}
9999
100function 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/** One account: icon, name and plan on a single line, then its windows. */123/** One account: icon, name and plan on a single line, then its windows. */
101export function AccountLimits(props: {124export function AccountLimits(props: {
102 readonly driver: Driver;125 readonly driver: Driver;
...@@ -128,9 +151,7 @@ export function AccountLimits(props: {...@@ -128,9 +151,7 @@ export function AccountLimits(props: {
128 <View className="min-w-0 flex-1 flex-row items-baseline gap-2">151 <View className="min-w-0 flex-1 flex-row items-baseline gap-2">
129 <Text className="text-base font-t3-medium text-foreground">{props.label}</Text>152 <Text className="text-base font-t3-medium text-foreground">{props.label}</Text>
130 {props.instanceLabel !== props.label ? (153 {props.instanceLabel !== props.label ? (
131 <Text className="shrink text-xs text-foreground-tertiary" numberOfLines={1}>154 <AccountInstanceLabel key={props.instanceLabel} value={props.instanceLabel} />
132 · {props.instanceLabel}
133 </Text>
134 ) : null}155 ) : null}
135 {props.detail ? (156 {props.detail ? (
136 <Text className="shrink text-sm text-foreground-muted" numberOfLines={1}>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,6 +3,7 @@ import { limitsNotice } from "@t3tools/shared/usageLimits";
3import { GaugeIcon } from "lucide-react";3import { GaugeIcon } from "lucide-react";
44
5import { getDriverOption } from "../settings/providerDriverMeta";5import { getDriverOption } from "../settings/providerDriverMeta";
6import { RedactedSensitiveText } from "../settings/RedactedSensitiveText";
6import { LimitWindows, ResetCredits } from "../usage/UsageLimits";7import { LimitWindows, ResetCredits } from "../usage/UsageLimits";
7import { ComposerBanner } from "./ComposerBanner";8import { ComposerBanner } from "./ComposerBanner";
8import type { ComposerBannerStackItem } from "./ComposerBannerStack";9import type { ComposerBannerStackItem } from "./ComposerBannerStack";
...@@ -20,6 +21,27 @@ function accountLabel(account: UsageLimitsReport["accounts"][number]): string {...@@ -20,6 +21,27 @@ function accountLabel(account: UsageLimitsReport["accounts"][number]): string {
20 : driver;21 : driver;
21}22}
2223
24function 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/** The /usage-limits result as a composer notice: it stacks under warnings and dismisses like one. */45/** The /usage-limits result as a composer notice: it stacks under warnings and dismisses like one. */
24export function usageLimitsBannerItem(46export function usageLimitsBannerItem(
25 id: string,47 id: string,
...@@ -29,9 +51,11 @@ export function usageLimitsBannerItem(...@@ -29,9 +51,11 @@ export function usageLimitsBannerItem(
29): ComposerBannerStackItem {51): ComposerBannerStackItem {
30 const [first] = report.accounts;52 const [first] = report.accounts;
31 const single = report.accounts.length === 1 && first ? first : null;53 const single = report.accounts.length === 1 && first ? first : null;
32 const summary = single54 const summary = single ? (
33 ? [accountLabel(single), single.plan].filter(Boolean).join(" · ")55 <AccountSummary account={single} />
34 : `${report.accounts.length} accounts`;56 ) : (
57 `${report.accounts.length} accounts`
58 );
35 return {59 return {
36 id,60 id,
37 variant: "info",61 variant: "info",
...@@ -65,7 +89,7 @@ function UsageLimitsBannerBody({...@@ -65,7 +89,7 @@ function UsageLimitsBannerBody({
65 <div key={account.id} className="flex min-w-0 flex-col gap-1">89 <div key={account.id} className="flex min-w-0 flex-col gap-1">
66 {report.accounts.length > 1 ? (90 {report.accounts.length > 1 ? (
67 <span className="truncate text-xs text-muted-foreground">91 <span className="truncate text-xs text-muted-foreground">
68 {[accountLabel(account), account.plan].filter(Boolean).join(" · ")}92 <AccountSummary account={account} />
69 </span>93 </span>
70 ) : null}94 ) : null}
71 {notice ? (95 {notice ? (