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 {...@@ -10,6 +10,7 @@ import {
10 CircleAlertIcon,10 CircleAlertIcon,
11 ChevronDownIcon,11 ChevronDownIcon,
12 CircleDashedIcon,12 CircleDashedIcon,
13 InfoIcon,
13 SlidersHorizontalIcon,14 SlidersHorizontalIcon,
14} from "lucide-react";15} from "lucide-react";
15import { useEffect, useEffectEvent, useMemo, useRef, useState } from "react";16import { useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
...@@ -64,6 +65,7 @@ import { SidebarInset } from "../ui/sidebar";...@@ -64,6 +65,7 @@ import { SidebarInset } from "../ui/sidebar";
64import { Skeleton } from "../ui/skeleton";65import { Skeleton } from "../ui/skeleton";
65import { Toggle, ToggleGroup } from "../ui/toggle-group";66import { Toggle, ToggleGroup } from "../ui/toggle-group";
66import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";67import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
68import { Popover, PopoverPopup, PopoverTrigger } from "../ui/popover";
67import {69import {
68 WorkspaceBreadcrumb,70 WorkspaceBreadcrumb,
69 WorkspaceBreadcrumbItem,71 WorkspaceBreadcrumbItem,
...@@ -486,13 +488,31 @@ export function UsagePage() {...@@ -486,13 +488,31 @@ export function UsagePage() {
486 : formatTokens(merged.totalTokens)}488 : formatTokens(merged.totalTokens)}
487 </span>489 </span>
488 <span className="text-xs text-muted-foreground">490 <span className="text-xs text-muted-foreground">
489 {metric !== "cost"491 {formatCount(merged.sessions)} sessions
490 ? `${formatCount(merged.sessions)} sessions`492 {metric === "cost" && (
491 : merged.costQuality.unpricedShare > 0493 <>
492 ? `${formatCount(merged.sessions)} sessions · API estimate excludes ${formatPercent(494 {" · API estimate"}
493 merged.costQuality.unpricedShare,495 {merged.costQuality.unpricedShare > 0 && (
494 )} unpriced records`496 <>
495 : `${formatCount(merged.sessions)} sessions · API estimate`}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 )}
496 </span>516 </span>
497 </div>517 </div>
498518