diff --git a/apps/web/src/components/usage/UsagePage.tsx b/apps/web/src/components/usage/UsagePage.tsx index 3ced333c9633..f77963ebac77 100644 --- a/apps/web/src/components/usage/UsagePage.tsx +++ b/apps/web/src/components/usage/UsagePage.tsx @@ -10,6 +10,7 @@ import { CircleAlertIcon, ChevronDownIcon, CircleDashedIcon, + InfoIcon, SlidersHorizontalIcon, } from "lucide-react"; import { useEffect, useEffectEvent, useMemo, useRef, useState } from "react"; @@ -64,6 +65,7 @@ import { SidebarInset } from "../ui/sidebar"; import { Skeleton } from "../ui/skeleton"; import { Toggle, ToggleGroup } from "../ui/toggle-group"; import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip"; +import { Popover, PopoverPopup, PopoverTrigger } from "../ui/popover"; import { WorkspaceBreadcrumb, WorkspaceBreadcrumbItem, @@ -486,13 +488,31 @@ export function UsagePage() { : formatTokens(merged.totalTokens)} - {metric !== "cost" - ? `${formatCount(merged.sessions)} sessions` - : merged.costQuality.unpricedShare > 0 - ? `${formatCount(merged.sessions)} sessions · API estimate excludes ${formatPercent( - merged.costQuality.unpricedShare, - )} unpriced records` - : `${formatCount(merged.sessions)} sessions · API estimate`} + {formatCount(merged.sessions)} sessions + {metric === "cost" && ( + <> + {" · API estimate"} + {merged.costQuality.unpricedShare > 0 && ( + <> + {" "} + + } + aria-label="Unpriced usage details" + > + + + + API estimate excludes{" "} + {formatPercent(merged.costQuality.unpricedShare)} unpriced + records. + + + + )} + + )}