authorgravatar for admin@snappeh.comTristan Knight <admin@snappeh.com> 2026-09-28 00:23:29+01:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-09-27 18:23:29-05:00
logd15210cd3da79f9a1a495a6309d912d76362a046
tree7c8f4ed680675c4467dee3c1a2eca06df27bf61a
parent94f92a7a386a26c98892b24fabdd0ea9fa804ce3
signature Signed by PGP key B5690EEEBB952194

fix(web): prevent usage summary shift for unpriced records (#13991)


1 files changed, 27 insertions(+), 7 deletions(-)

apps/web/src/components/usage/UsagePage.tsx+27-7
......@@ -10,6 +10,7 @@ import {
1010 CircleAlertIcon,
1111 ChevronDownIcon,
1212 CircleDashedIcon,
13 InfoIcon,
1314 SlidersHorizontalIcon,
1415} from "lucide-react";
1516import { useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
......@@ -64,6 +65,7 @@ import { SidebarInset } from "../ui/sidebar";
6465import { Skeleton } from "../ui/skeleton";
6566import { Toggle, ToggleGroup } from "../ui/toggle-group";
6667import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
68import { Popover, PopoverPopup, PopoverTrigger } from "../ui/popover";
6769import {
6870 WorkspaceBreadcrumb,
6971 WorkspaceBreadcrumbItem,
......@@ -486,13 +488,31 @@ export function UsagePage() {
486488 : formatTokens(merged.totalTokens)}
487489 </span>
488490 <span className="text-xs text-muted-foreground">
489 {metric !== "cost"
490 ? `${formatCount(merged.sessions)} sessions`
491 : merged.costQuality.unpricedShare > 0
492 ? `${formatCount(merged.sessions)} sessions · API estimate excludes ${formatPercent(
493 merged.costQuality.unpricedShare,
494 )} unpriced records`
495 : `${formatCount(merged.sessions)} sessions · API estimate`}
491 {formatCount(merged.sessions)} sessions
492 {metric === "cost" && (
493 <>
494 {" · API estimate"}
495 {merged.costQuality.unpricedShare > 0 && (
496 <>
497 {" "}
498 <Popover>
499 <PopoverTrigger
500 openOnHover
501 render={<InlineButton tone="muted" />}
502 aria-label="Unpriced usage details"
503 >
504 <InfoIcon className="size-3" aria-hidden />
505 </PopoverTrigger>
506 <PopoverPopup side="top" tooltipStyle>
507 API estimate excludes{" "}
508 {formatPercent(merged.costQuality.unpricedShare)} unpriced
509 records.
510 </PopoverPopup>
511 </Popover>
512 </>
513 )}
514 </>
515 )}
496516 </span>
497517 </div>
498518