| ... | ... | @@ -10,6 +10,7 @@ import { |
| 10 | 10 | CircleAlertIcon, |
| 11 | 11 | ChevronDownIcon, |
| 12 | 12 | CircleDashedIcon, |
| 13 | InfoIcon, |
| 13 | 14 | SlidersHorizontalIcon, |
| 14 | 15 | } from "lucide-react"; |
| 15 | 16 | import { useEffect, useEffectEvent, useMemo, useRef, useState } from "react"; |
| ... | ... | @@ -64,6 +65,7 @@ import { SidebarInset } from "../ui/sidebar"; |
| 64 | 65 | import { Skeleton } from "../ui/skeleton"; |
| 65 | 66 | import { Toggle, ToggleGroup } from "../ui/toggle-group"; |
| 66 | 67 | import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip"; |
| 68 | import { Popover, PopoverPopup, PopoverTrigger } from "../ui/popover"; |
| 67 | 69 | import { |
| 68 | 70 | WorkspaceBreadcrumb, |
| 69 | 71 | WorkspaceBreadcrumbItem, |
| ... | ... | @@ -486,13 +488,31 @@ export function UsagePage() { |
| 486 | 488 | : formatTokens(merged.totalTokens)} |
| 487 | 489 | </span> |
| 488 | 490 | <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 | )} |
| 496 | 516 | </span> |
| 497 | 517 | </div> |
| 498 | 518 | |