feat(web): redesign usage insights#7147

@@ -571,70 +554,54 @@ function UsageDeviceStrip({
   );
 }
 
-/** Deterministic bar heights (each unique: they double as keys). */
-const SKELETON_BAR_HEIGHTS = [34, 58, 41, 72, 22, 12, 49, 63, 80, 38, 55, 26, 44, 67];
-
 /**
- * Static stand-in with the loaded page's shape: headline, provider split,
- * chart and metrics strip. No shimmer; blocks fill in exactly once when the
- * last device answers.
+ * Static stand-in with the loaded page's shape. No shimmer; blocks fill in
+ * exactly once when the last device answers.
  */
-function UsageSkeleton({ resolution }: { readonly resolution: "day" | "hour" }) {
+function UsageSkeleton() {
   return (
     <>
-      <section className="grid gap-6 lg:grid-cols-[minmax(0,20rem)_minmax(0,1fr)]">
+      <section className="grid gap-6 lg:grid-cols-[minmax(0,16rem)_minmax(0,1fr)]">
         <div className="flex flex-col gap-5">
           <div className="flex flex-col gap-1">
-            <span className="text-xs tracking-wide text-muted-foreground uppercase">
-              Raw token cost
-            </span>
-            <div className="my-1.5 h-8 w-36 rounded-sm bg-muted" />
-            <div className="h-3 w-28 rounded-sm bg-muted" />
+            <div className="h-8 w-36 rounded-sm bg-muted" />
+            <div className="h-3 w-32 rounded-sm bg-muted" />
           </div>
-
           {PROVIDER_ORDER.map((provider) => (
-            <div key={provider} className="flex flex-col gap-1.5">
-              <div className="flex items-center justify-between">
-                <span className="flex items-center gap-2 text-sm text-foreground">
+            <div key={provider} className="flex flex-col gap-1">
+              <div className="flex items-center justify-between gap-4">
+                <span className="flex items-center gap-2">
                   <ProviderMark provider={provider} className="size-4" />
-                  {PROVIDER_PRESENTATION[provider].label}
+                  <div className="h-3.5 w-20 rounded-sm bg-muted" />

@@ -373,10 +407,11 @@ export function UsageProviderChart({
 
           {hoveredPeriod === undefined ? null : (
             <div
-              className="pointer-events-none absolute top-0 z-10 min-w-36 border border-border bg-background/95 px-2 py-1.5 text-xs"
+              ref={tooltipRef}
+              className="pointer-events-none absolute z-10 min-w-36 max-w-full rounded-xl border border-border/50 bg-background/65 px-2.5 py-2 text-xs shadow-lg backdrop-blur-xl backdrop-saturate-150"

@@ -260,30 +247,75 @@ export function UsageProviderChart({
       };
     });
 
-    // Paint the heavier series first so the lighter one is never buried under
-    // it. The fills are faint enough that the order barely shows, but the
-    // strokes are drawn in a second pass regardless, so neither can be hidden.
-    const ordered = [...built].sort((a, b) => b.total - a.total);
-
-    return { paths: ordered, ticks: tickValues, stepX: step, toY, series: columns };
+    return {
+      paths: built.toSorted((a, b) => b.total - a.total),

@@ -52,3 +52,11 @@ export function WorkspacePageHeader({
     />
   );
 }
+
+/** Keeps an icon glyph on the content edge while its larger hit target extends outward. */
+export function WorkspacePageHeaderEdgeControl({
+  className,
+  ...props
+}: ComponentPropsWithoutRef<"div">) {
+  return <div className={cn("-me-[7px] flex shrink-0", className)} {...props} />;

@@ -34,6 +44,40 @@ const WINDOW_OPTIONS = [
   { days: 90, label: "90 days" },
 ] as const;
 
+function UsageHeaderMenu<Value extends string>({
+  label,
+  value,
+  options,
+  onChange,
+}: {
+  label: string;
+  value: Value;
+  options: ReadonlyArray<{ value: Value; label: string }>;
+  onChange: (value: Value) => void;
+}) {
+  const current = options.find((option) => option.value === value) ?? options[0]!;
+  return (
+    <Menu>
+      <MenuTrigger
+        aria-label={label}
+        className="inline-flex h-7 shrink-0 items-center gap-1 rounded-md px-1.5 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground"

@@ -358,7 +351,7 @@ export function UsagePage() {
                           merged.models.map((model) => (
                             <tr
                               key={`${model.provider}:${model.model}`}
-                              className="border-b border-border/50"
+                              className="hover:bg-muted/20"

@@ -27,6 +29,8 @@ const toggleVariants = cva(
           "border-transparent text-foreground shadow-none [:disabled,:active,[data-pressed]]:shadow-none before:shadow-none data-pressed:bg-accent data-pressed:text-accent-foreground disabled:opacity-100 disabled:text-muted-foreground disabled:[&_svg]:opacity-100",
         outline:
           "border-input bg-background not-dark:bg-clip-padding shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:data-pressed:bg-input dark:hover:bg-input/64 dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] dark:not-disabled:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/2%)] [:disabled,:active,[data-pressed]]:shadow-none",
+        segmented:
+          "border-transparent text-muted-foreground shadow-none transition-colors before:shadow-none hover:bg-accent/45 hover:text-foreground data-pressed:bg-accent data-pressed:text-foreground data-pressed:shadow-xs/5",

@@ -102,78 +94,113 @@ export function UsagePage() {
       setWindowSelection({ days: windowDays, window: nextWindow });
     }
   };
+  const windowLabel =
+    isPast24Hours && window.sinceTime !== undefined && window.untilTime !== undefined
+      ? `${formatDateTimeShort(window.sinceTime, window.timeZone)} to ${formatDateTimeShort(window.untilTime, window.timeZone)}`
+      : `${formatDayShort(window.sinceDay)} to ${formatDayShort(window.untilDay)}`;
+  const topbarContent = (
+    <div className="flex w-full min-w-0 items-center gap-3">
+      <WorkspaceBreadcrumb ariaLabel="Usage breadcrumb" className="min-w-0">
+        <WorkspaceBreadcrumbItem current>
+          <h1>Usage</h1>
+        </WorkspaceBreadcrumbItem>
+        <WorkspaceBreadcrumbSeparator className="hidden md:flex" />
+        <WorkspaceBreadcrumbItem className="hidden min-w-0 shrink md:flex">
+          <span className="truncate">{windowLabel}</span>
+        </WorkspaceBreadcrumbItem>
+      </WorkspaceBreadcrumb>
+      <div className="ms-auto hidden min-w-0 items-center justify-end gap-2 lg:flex">
+        <ToggleGroup
+          aria-label="Usage metric"
+          variant="segmented"
+          value={[metric]}
+          onValueChange={(next) => {
+            const value = next[0];
+            if (value === "cost" || value === "tokens") setMetric(value);
+          }}
+        >
+          {(["cost", "tokens"] as const).map((option) => (
+            <Toggle key={option} value={option}>
+              {option === "cost" ? "Cost" : "Tokens"}
+            </Toggle>
+          ))}
+        </ToggleGroup>
+        <ToggleGroup
+          aria-label="Usage period"
+          variant="segmented"
+          value={[String(windowDays)]}
+          onValueChange={(next) => {
+            const value = next[0];
+            if (value) selectWindow(Number(value));
+          }}
+        >
+          {WINDOW_OPTIONS.map((option) => (
+            <Toggle key={option.days} value={String(option.days)}>
+              {option.label}
+            </Toggle>
+          ))}
+        </ToggleGroup>
+        <Button onClick={refreshWindow} aria-label="Refresh usage" size="icon-sm" variant="ghost">
+          <RefreshCwIcon className="size-3.5" />
+        </Button>
+      </div>
+      <div className="ms-auto flex min-w-0 items-center justify-end gap-1 lg:hidden">
+        <Select
+          value={metric}
+          onValueChange={(value) => {
+            if (value === "cost" || value === "tokens") setMetric(value);
+          }}
+        >
+          <SelectTrigger
+            aria-label="Usage metric"
+            size="compact"
+            variant="ghost"
+            className="w-auto min-w-0"
+          >
+            <SelectValue>{metric === "cost" ? "Cost" : "Tokens"}</SelectValue>
+          </SelectTrigger>
+          <SelectPopup align="end">

@@ -30,7 +30,7 @@ function ToggleGroup({
         orientation === "horizontal"
           ? "*:pointer-coarse:after:min-w-auto"
           : "*:pointer-coarse:after:min-h-auto",
-        variant === "default"
+        variant === "default" || variant === "segmented"

@@ -0,0 +1,48 @@
+import { ChevronDownIcon } from "lucide-react";
+
+import { Button } from "./ui/button";
+import { Menu, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuTrigger } from "./ui/menu";
+
+export interface HeaderFilterMenuOption<Value extends string> {
+  value: Value;
+  label: string;
+}
+
+export function HeaderFilterMenu<Value extends string>({
+  label,
+  value,
+  options,
+  onChange,
+  align = "start",
+  popupClassName,
+}: {
+  label: string;
+  value: Value;
+  options: ReadonlyArray<HeaderFilterMenuOption<Value>>;

@@ -30,11 +30,13 @@ function ToggleGroup({
         orientation === "horizontal"
           ? "*:pointer-coarse:after:min-w-auto"
           : "*:pointer-coarse:after:min-h-auto",
-        variant === "default"
-          ? "gap-0.5"
-          : orientation === "horizontal"
-            ? "*:not-first:not-data-[slot=separator]:before:-start-[0.5px] *:not-last:not-data-[slot=separator]:before:-end-[0.5px] *:not-first:rounded-s-none *:not-last:rounded-e-none *:not-first:border-s-0 *:not-last:border-e-0 *:not-first:before:rounded-s-none *:not-last:before:rounded-e-none"
-            : "*:not-first:not-data-[slot=separator]:before:-top-[0.5px] *:not-last:not-data-[slot=separator]:before:-bottom-[0.5px] flex-col *:not-first:rounded-t-none *:not-last:rounded-b-none *:not-first:border-t-0 *:not-last:border-b-0 *:not-first:before:rounded-t-none *:not-last:before:rounded-b-none *:data-[slot=toggle]:not-last:before:hidden dark:*:last:before:hidden dark:*:first:before:block",
+        variant === "segmented"
+          ? "gap-0.5 rounded-lg bg-input/40 p-0.5"

@@ -0,0 +1,40 @@
+import type { ComponentProps, HTMLAttributes } from "react";
+
+import { cn } from "~/lib/utils";
+import { Toggle } from "~/components/ui/toggle";
+
+function SegmentedTabList({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "inline-flex w-fit items-center gap-0.5 rounded-lg bg-muted/45 p-0.5",
+        className,
+      )}
+      role="group"
+      {...props}
+    />
+  );
+}
+
+function SegmentedTab({
+  selected,
+  density = "default",
+  className,
+  ...props
+}: {
+  selected: boolean;
+  density?: "default" | "compact";

@@ -30,7 +30,7 @@ function ToggleGroup({
         orientation === "horizontal"
           ? "*:pointer-coarse:after:min-w-auto"
           : "*:pointer-coarse:after:min-h-auto",
-        variant === "default"
+        variant === "default" || variant === "segmented"

@@ -571,70 +555,59 @@ function UsageDeviceStrip({
   );
 }
 
-/** Deterministic bar heights (each unique: they double as keys). */
-const SKELETON_BAR_HEIGHTS = [34, 58, 41, 72, 22, 12, 49, 63, 80, 38, 55, 26, 44, 67];
-
 /**
- * Static stand-in with the loaded page's shape: headline, provider split,
- * chart and metrics strip. No shimmer; blocks fill in exactly once when the
- * last device answers.
+ * Static stand-in with the loaded page's shape. No shimmer; blocks fill in
+ * exactly once when the last device answers.
  */
-function UsageSkeleton({ resolution }: { readonly resolution: "day" | "hour" }) {
+function UsageSkeleton() {
   return (
     <>
-      <section className="grid gap-6 lg:grid-cols-[minmax(0,20rem)_minmax(0,1fr)]">
+      <section className="grid gap-6 lg:grid-cols-[minmax(0,16rem)_minmax(0,1fr)]">
         <div className="flex flex-col gap-5">
           <div className="flex flex-col gap-1">
-            <span className="text-xs tracking-wide text-muted-foreground uppercase">
-              Raw token cost
-            </span>
-            <div className="my-1.5 h-8 w-36 rounded-sm bg-muted" />
-            <div className="h-3 w-28 rounded-sm bg-muted" />
+            <div className="h-8 w-36 rounded-sm bg-muted" />
+            <div className="h-3 w-32 rounded-sm bg-muted" />
           </div>
-
           {PROVIDER_ORDER.map((provider) => (
-            <div key={provider} className="flex flex-col gap-1.5">
-              <div className="flex items-center justify-between">
-                <span className="flex items-center gap-2 text-sm text-foreground">
+            <div key={provider} className="flex flex-col gap-1">
+              <div className="flex items-center justify-between gap-4">
+                <span className="flex items-center gap-2">
+                  <span
+                    aria-hidden
+                    className="size-2 shrink-0 rounded-full"
+                    style={{ backgroundColor: PROVIDER_PRESENTATION[provider].color }}
+                  />
                   <ProviderMark provider={provider} className="size-4" />
-                  {PROVIDER_PRESENTATION[provider].label}
+                  <div className="h-3.5 w-20 rounded-sm bg-muted" />
                 </span>
                 <div className="h-3.5 w-14 rounded-sm bg-muted" />
               </div>
-              <div className="h-1 w-full rounded-full bg-muted" />
               <div className="h-3 w-36 rounded-sm bg-muted" />

@@ -0,0 +1,59 @@
+import { ChevronDownIcon } from "lucide-react";
+import type { ReactNode } from "react";
+
+import { Button } from "./ui/button";
+import { Menu, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuTrigger } from "./ui/menu";
+
+export interface HeaderFilterMenuOption<Value extends string> {
+  value: Value;
+  label: string;
+  icon?: ReactNode;
+  disabledReason?: string;
+}
+
+export function HeaderFilterMenu<Value extends string>({
+  label,
+  value,
+  options,
+  onChange,
+  align = "start",
+  popupClassName,
+}: {
+  label: string;
+  value: Value;
+  options: ReadonlyArray<HeaderFilterMenuOption<Value>>;
+  onChange: (value: Value) => void;
+  align?: "start" | "center" | "end";
+  popupClassName?: string;
+}) {
+  const current = options.find((option) => option.value === value) ?? options[0]!;
+  return (
+    <Menu>
+      <MenuTrigger
+        render={
+          <Button size="compact" variant="ghost-muted" aria-label={label} className="text-sm" />

@@ -100,78 +94,66 @@ export function UsagePage() {
       setWindowSelection({ days: windowDays, window: nextWindow });
     }
   };
+  const windowLabel =
+    isPast24Hours && window.sinceTime !== undefined && window.untilTime !== undefined
+      ? `${formatDateTimeShort(window.sinceTime, window.timeZone)} to ${formatDateTimeShort(window.untilTime, window.timeZone)}`
+      : `${formatDayShort(window.sinceDay)} to ${formatDayShort(window.untilDay)}`;
+  const topbarContent = (
+    <div className="flex w-full min-w-0 flex-wrap items-center gap-x-3 gap-y-2">
+      <WorkspaceBreadcrumb ariaLabel="Usage breadcrumb" className="min-w-0">
+        <WorkspaceBreadcrumbItem current>
+          <h1>Usage</h1>
+        </WorkspaceBreadcrumbItem>
+        <WorkspaceBreadcrumbSeparator />
+        <WorkspaceBreadcrumbItem className="min-w-0 shrink">
+          <span className="truncate">{windowLabel}</span>
+        </WorkspaceBreadcrumbItem>
+      </WorkspaceBreadcrumb>
+      <div className="ms-auto flex min-w-0 basis-full flex-wrap items-center justify-end gap-2 sm:basis-auto">
+        <SegmentedTabList aria-label="Usage metric">
+          {(["cost", "tokens"] as const).map((option) => (
+            <SegmentedTab
+              key={option}
+              selected={option === metric}
+              onClick={() => setMetric(option)}
+            >
+              {option === "cost" ? "Cost" : "Tokens"}
+            </SegmentedTab>
+          ))}
+        </SegmentedTabList>
+        <SegmentedTabList aria-label="Usage period">
+          {WINDOW_OPTIONS.map((option) => (
+            <SegmentedTab
+              key={option.days}
+              selected={option.days === windowDays}
+              onClick={() => selectWindow(option.days)}
+            >
+              {option.label}
+            </SegmentedTab>
+          ))}
+        </SegmentedTabList>
+        <WorkspacePageHeaderEdgeControl>
+          <Button onClick={refreshWindow} aria-label="Refresh usage" size="icon-sm" variant="ghost">
+            <RefreshCwIcon className="size-3.5" />
+          </Button>
+        </WorkspacePageHeaderEdgeControl>
+      </div>
+    </div>
+  );
 
   return (
     <SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none bg-background text-foreground isolate">
       <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-background text-foreground">
-        {!isElectron && (
-          <header
-            className={cn(
-              "flex h-[var(--workspace-topbar-height)] min-h-[var(--workspace-topbar-height)] shrink-0 items-center px-3 transition-[padding-left] duration-200 ease-linear motion-reduce:transition-none sm:px-5",
-              COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS,
-            )}
-          >
-            <WorkspaceBreadcrumb ariaLabel="Usage breadcrumb">
-              <WorkspaceBreadcrumbItem current>Usage</WorkspaceBreadcrumbItem>
-            </WorkspaceBreadcrumb>
-          </header>
-        )}
-
-        {isElectron && (
-          <div
-            className={cn(
-              "drag-region flex h-[52px] shrink-0 items-center px-5 transition-[padding-left] duration-200 ease-linear motion-reduce:transition-none wco:h-[env(titlebar-area-height)] wco:pr-[calc(100vw-env(titlebar-area-width)-env(titlebar-area-x)+1em)]",
-              COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS,
-            )}
-          >
-            <WorkspaceBreadcrumb ariaLabel="Usage breadcrumb">
-              <WorkspaceBreadcrumbItem current>Usage</WorkspaceBreadcrumbItem>
-            </WorkspaceBreadcrumb>
-          </div>
-        )}
+        <WorkspacePageHeader electron={isElectron} className="h-auto py-2">

@@ -181,88 +191,64 @@ export function UsagePage() {
                   staleEnvironments={merged.staleEnvironments}
                 />
 
-                {/* Cost first: the financial answer, then the provider split. */}
-                <section className="grid gap-6 lg:grid-cols-[minmax(0,20rem)_minmax(0,1fr)]">
-                  {/* The summary follows the chart toggle, so the headline and the
-                  series are always reading the same units. */}
-                  <div className="flex flex-col gap-5">
+                <section className="grid gap-6 lg:grid-cols-[minmax(0,16rem)_minmax(0,1fr)]">
+                  <div className="flex min-w-0 flex-col gap-5">
                     <div className="flex flex-col gap-1">
-                      <span className="text-xs tracking-wide text-muted-foreground uppercase">
-                        {metric === "cost" ? "Raw token cost" : "Processed tokens"}
-                      </span>
                       <span className="text-4xl font-semibold text-foreground tabular-nums">
                         {metric === "cost"
-                          ? `${formatUsd(merged.costUsd)}*`
+                          ? formatUsd(merged.costUsd)
                           : formatTokens(merged.totalTokens)}
                       </span>
                       <span className="text-xs text-muted-foreground">
                         {metric === "cost"
-                          ? "* if billed at full API rate"
-                          : `Input, cache reads and output across ${formatCount(merged.sessions)} sessions.`}
+                          ? `${formatCount(merged.sessions)} sessions · API estimate`
+                          : `${formatCount(merged.sessions)} sessions`}
                       </span>
                     </div>
 
-                    {orderedProviders.map((provider) => {
-                      const share = metric === "cost" ? provider.costShare : provider.tokenShare;
+                    {PROVIDER_ORDER.map((provider) => {
+                      const totals = merged.providers.find((entry) => entry.provider === provider);
+                      const share =
+                        metric === "cost" ? (totals?.costShare ?? 0) : (totals?.tokenShare ?? 0);
+                      const providerSessions = totals?.sessions ?? 0;
+                      const sessionLabel = `${formatCount(providerSessions)} ${
+                        providerSessions === 1 ? "session" : "sessions"
+                      }`;
                       return (
-                        <div key={provider.provider} className="flex flex-col gap-1.5">
-                          <div className="flex items-baseline justify-between">
-                            <span className="flex items-center gap-2 text-sm text-foreground">
-                              <ProviderMark provider={provider.provider} className="size-4" />
-                              {PROVIDER_PRESENTATION[provider.provider].label}
+                        <div key={provider} className="flex flex-col gap-1">
+                          <div className="flex items-baseline justify-between gap-4">
+                            <span className="flex min-w-0 items-center gap-2 text-sm text-foreground">
+                              <ProviderMark provider={provider} className="size-4" />

@@ -17,7 +17,7 @@ const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariant
 function ToggleGroup({
   className,
   variant = "default",
-  size = "default",
+  size = variant === "segmented" ? "segmented" : "default",

@@ -0,0 +1,38 @@
+import type { ComponentProps, HTMLAttributes } from "react";
+
+import { cn } from "~/lib/utils";
+import { Toggle } from "~/components/ui/toggle";
+
+function SegmentedTabList({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "inline-flex w-fit items-center gap-0.5 rounded-lg bg-muted/45 p-0.5",
+        className,
+      )}
+      role="group"
+      {...props}
+    />
+  );
+}

@@ -100,78 +95,103 @@ export function UsagePage() {
       setWindowSelection({ days: windowDays, window: nextWindow });
     }
   };
+  const windowLabel =
+    isPast24Hours && window.sinceTime !== undefined && window.untilTime !== undefined
+      ? `${formatDateTimeShort(window.sinceTime, window.timeZone)} to ${formatDateTimeShort(window.untilTime, window.timeZone)}`
+      : `${formatDayShort(window.sinceDay)} to ${formatDayShort(window.untilDay)}`;
+  const topbarContent = (
+    <div className="flex w-full min-w-0 items-center gap-3">
+      <WorkspaceBreadcrumb ariaLabel="Usage breadcrumb" className="min-w-0">
+        <WorkspaceBreadcrumbItem current>
+          <h1>Usage</h1>
+        </WorkspaceBreadcrumbItem>
+        <WorkspaceBreadcrumbSeparator className="hidden md:flex" />
+        <WorkspaceBreadcrumbItem className="hidden min-w-0 shrink md:flex">
+          <span className="truncate">{windowLabel}</span>
+        </WorkspaceBreadcrumbItem>
+      </WorkspaceBreadcrumb>
+      <div className="ms-auto hidden min-w-0 items-center justify-end gap-2 lg:flex">
+        <ToggleGroup
+          aria-label="Usage metric"
+          size="segmented"
+          variant="segmented"
+          value={[metric]}
+          onValueChange={(next) => {
+            const value = next[0];
+            if (value === "cost" || value === "tokens") setMetric(value);
+          }}
+        >
+          {(["cost", "tokens"] as const).map((option) => (
+            <Toggle key={option} value={option}>
+              {option === "cost" ? "Cost" : "Tokens"}
+            </Toggle>
+          ))}
+        </ToggleGroup>
+        <ToggleGroup
+          aria-label="Usage period"
+          size="segmented"
+          variant="segmented"
+          value={[String(windowDays)]}
+          onValueChange={(next) => {
+            const value = next[0];
+            if (value) selectWindow(Number(value));
+          }}
+        >
+          {WINDOW_OPTIONS.map((option) => (
+            <Toggle key={option.days} value={String(option.days)}>
+              {option.label}
+            </Toggle>
+          ))}
+        </ToggleGroup>
+        <WorkspacePageHeaderEdgeControl>
+          <Button onClick={refreshWindow} aria-label="Refresh usage" size="icon-sm" variant="ghost">
+            <RefreshCwIcon className="size-3.5" />
+          </Button>
+        </WorkspacePageHeaderEdgeControl>
+      </div>
+      <div className="ms-auto flex min-w-0 items-center justify-end gap-1 lg:hidden">
+        <HeaderFilterMenu
+          label="Usage metric"
+          value={metric}
+          options={[
+            { value: "cost", label: "Cost" },
+            { value: "tokens", label: "Tokens" },
+          ]}
+          onChange={setMetric}
+          align="end"
+          popupClassName="min-w-32"
+        />
+        <HeaderFilterMenu
+          label="Usage period"
+          value={String(windowDays)}
+          options={WINDOW_OPTIONS.map((option) => ({
+            value: String(option.days),
+            label: option.label,
+          }))}
+          onChange={(value) => selectWindow(Number(value))}
+          align="end"
+          popupClassName="min-w-32"
+        />
+        <WorkspacePageHeaderEdgeControl>
+          <Button onClick={refreshWindow} aria-label="Refresh usage" size="icon-sm" variant="ghost">
+            <RefreshCwIcon className="size-3.5" />
+          </Button>
+        </WorkspacePageHeaderEdgeControl>
+      </div>

@@ -102,78 +93,121 @@ export function UsagePage() {
       setWindowSelection({ days: windowDays, window: nextWindow });
     }
   };
+  const windowLabel =
+    isPast24Hours && window.sinceTime !== undefined && window.untilTime !== undefined
+      ? `${formatDateTimeShort(window.sinceTime, window.timeZone)} to ${formatDateTimeShort(window.untilTime, window.timeZone)}`
+      : `${formatDayShort(window.sinceDay)} to ${formatDayShort(window.untilDay)}`;
+  const topbarContent = (
+    <div className="flex w-full min-w-0 items-center gap-3">
+      <WorkspaceBreadcrumb ariaLabel="Usage breadcrumb" className="min-w-0">
+        <WorkspaceBreadcrumbItem current>
+          <h1>Usage</h1>
+        </WorkspaceBreadcrumbItem>
+        <WorkspaceBreadcrumbItem className="hidden min-w-0 shrink gap-3 md:flex">
+          <span aria-hidden="true" className="text-icon-muted">
+            /
+          </span>
+          <span className="truncate">{windowLabel}</span>

@@ -0,0 +1,59 @@
+import { ChevronDownIcon } from "lucide-react";
+import type { ReactNode } from "react";
+
+import { Button } from "./ui/button";
+import { Menu, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuTrigger } from "./ui/menu";
+
+export interface HeaderFilterMenuOption<Value extends string> {
+  value: Value;
+  label: string;
+  icon?: ReactNode;
+  disabledReason?: string;
+}
+
+export function HeaderFilterMenu<Value extends string>({
+  label,
+  value,
+  options,
+  onChange,
+  align = "start",
+  popupClassName,
+}: {
+  label: string;
+  value: Value;
+  options: ReadonlyArray<HeaderFilterMenuOption<Value>>;
+  onChange: (value: Value) => void;
+  align?: "start" | "center" | "end";
+  popupClassName?: string;
+}) {
+  const current = options.find((option) => option.value === value) ?? options[0]!;
+  return (
+    <Menu>
+      <MenuTrigger
+        render={
+          <Button size="compact" variant="ghost-muted" aria-label={label} className="text-sm" />
+        }
+      >
+        {current.label}
+        <ChevronDownIcon aria-hidden className="size-3 text-muted-foreground/70" />
+      </MenuTrigger>
+      <MenuPopup align={align} side="bottom" className={popupClassName ?? "min-w-40"}>
+        <MenuRadioGroup value={value} onValueChange={(next) => onChange(next as Value)}>

@@ -102,78 +94,113 @@ export function UsagePage() {
       setWindowSelection({ days: windowDays, window: nextWindow });
     }
   };
+  const windowLabel =
+    isPast24Hours && window.sinceTime !== undefined && window.untilTime !== undefined
+      ? `${formatDateTimeShort(window.sinceTime, window.timeZone)} to ${formatDateTimeShort(window.untilTime, window.timeZone)}`
+      : `${formatDayShort(window.sinceDay)} to ${formatDayShort(window.untilDay)}`;
+  const topbarContent = (
+    <div className="flex w-full min-w-0 items-center gap-3">
+      <WorkspaceBreadcrumb ariaLabel="Usage breadcrumb" className="min-w-0">
+        <WorkspaceBreadcrumbItem current>
+          <h1>Usage</h1>
+        </WorkspaceBreadcrumbItem>
+        <WorkspaceBreadcrumbSeparator className="hidden md:flex" />
+        <WorkspaceBreadcrumbItem className="hidden min-w-0 shrink md:flex">
+          <span className="truncate">{windowLabel}</span>
+        </WorkspaceBreadcrumbItem>
+      </WorkspaceBreadcrumb>
+      <div className="ms-auto hidden min-w-0 items-center justify-end gap-2 lg:flex">
+        <ToggleGroup
+          aria-label="Usage metric"
+          variant="segmented"
+          value={[metric]}
+          onValueChange={(next) => {
+            const value = next[0];
+            if (value === "cost" || value === "tokens") setMetric(value);
+          }}
+        >
+          {(["cost", "tokens"] as const).map((option) => (
+            <Toggle key={option} value={option}>
+              {option === "cost" ? "Cost" : "Tokens"}
+            </Toggle>
+          ))}
+        </ToggleGroup>
+        <ToggleGroup
+          aria-label="Usage period"
+          variant="segmented"
+          value={[String(windowDays)]}
+          onValueChange={(next) => {
+            const value = next[0];
+            if (value) selectWindow(Number(value));
+          }}
+        >
+          {WINDOW_OPTIONS.map((option) => (
+            <Toggle key={option.days} value={String(option.days)}>
+              {option.label}
+            </Toggle>
+          ))}
+        </ToggleGroup>
+        <Button onClick={refreshWindow} aria-label="Refresh usage" size="icon-sm" variant="ghost">
+          <RefreshCwIcon className="size-3.5" />
+        </Button>
+      </div>
+      <div className="ms-auto flex min-w-0 items-center justify-end gap-1 lg:hidden">
+        <Select
+          value={metric}
+          onValueChange={(value) => {
+            if (value === "cost" || value === "tokens") setMetric(value);
+          }}
+        >
+          <SelectTrigger
+            aria-label="Usage metric"
+            size="compact"
+            variant="ghost"
+            className="w-auto min-w-0"
+          >
+            <SelectValue>{metric === "cost" ? "Cost" : "Tokens"}</SelectValue>
+          </SelectTrigger>
+          <SelectPopup align="end">

@@ -255,12 +263,20 @@ export function mergeUsage(
   const contributingEnvironments: EnvironmentId[] = [];
 
   for (const environment of current) {
-    const { buckets, sessions: environmentSessions } = ownedContribution(
-      environment,
-      ownerByFingerprint,
-    );
+    const { buckets, sessionsByProvider } = ownedContribution(environment, ownerByFingerprint);
     if (buckets.length > 0) contributingEnvironments.push(environment.environmentId);
-    sessions += environmentSessions;
+
+    for (const [providerKind, providerSessions] of sessionsByProvider) {
+      sessions += providerSessions;
+      const provider = providerAccumulator.get(providerKind) ?? {
+        costUsd: 0,
+        totalTokens: 0,
+        records: 0,
+        sessions: 0,
+      };
+      provider.sessions += providerSessions;
+      providerAccumulator.set(providerKind, provider);
+    }

@@ -571,70 +556,51 @@ function UsageDeviceStrip({
   );
 }
 
-/** Deterministic bar heights (each unique: they double as keys). */
-const SKELETON_BAR_HEIGHTS = [34, 58, 41, 72, 22, 12, 49, 63, 80, 38, 55, 26, 44, 67];
-
 /**
- * Static stand-in with the loaded page's shape: headline, provider split,
- * chart and metrics strip. No shimmer; blocks fill in exactly once when the
- * last device answers.
+ * Static stand-in with the loaded page's shape. No shimmer; blocks fill in
+ * exactly once when the last device answers.
  */
-function UsageSkeleton({ resolution }: { readonly resolution: "day" | "hour" }) {
+function UsageSkeleton() {
   return (
     <>
-      <section className="grid gap-6 lg:grid-cols-[minmax(0,20rem)_minmax(0,1fr)]">
+      <section className="grid gap-6 lg:grid-cols-[minmax(0,16rem)_minmax(0,1fr)]">
         <div className="flex flex-col gap-5">
           <div className="flex flex-col gap-1">
-            <span className="text-xs tracking-wide text-muted-foreground uppercase">
-              Raw token cost
-            </span>
-            <div className="my-1.5 h-8 w-36 rounded-sm bg-muted" />
-            <div className="h-3 w-28 rounded-sm bg-muted" />
+            <div className="h-8 w-36 rounded-sm bg-muted" />
+            <div className="h-3 w-32 rounded-sm bg-muted" />
           </div>
-
           {PROVIDER_ORDER.map((provider) => (
-            <div key={provider} className="flex flex-col gap-1.5">
-              <div className="flex items-center justify-between">
-                <span className="flex items-center gap-2 text-sm text-foreground">
+            <div key={provider} className="flex flex-col gap-1">
+              <div className="flex items-center justify-between gap-4">
+                <span className="flex items-center gap-2">
                   <ProviderMark provider={provider} className="size-4" />
-                  {PROVIDER_PRESENTATION[provider].label}
+                  <div className="h-3.5 w-20 rounded-sm bg-muted" />
                 </span>
                 <div className="h-3.5 w-14 rounded-sm bg-muted" />
               </div>
-              <div className="h-1 w-full rounded-full bg-muted" />
               <div className="h-3 w-36 rounded-sm bg-muted" />
             </div>
           ))}
         </div>
 
         <div className="flex flex-col gap-3">
-          <h2 className="py-1 text-sm font-medium text-foreground">
-            {resolution === "hour" ? "Hourly" : "Daily"} cost
-          </h2>
-          {/* Mirrors the chart's h-56 body and w-14 axis gutter to avoid a
-              relayout when the real chart swaps in. */}
-          <div className="flex h-56 items-end gap-1 pl-16">
-            {SKELETON_BAR_HEIGHTS.map((height) => (
-              <div
-                key={height}
-                className="flex-1 rounded-sm bg-muted"
-                style={{ height: `${height}%` }}
-              />
-            ))}
-          </div>
+          <div className="h-4 w-24 rounded-sm bg-muted" />
+          <div className="h-56 rounded-sm bg-muted/35" />

@@ -0,0 +1,38 @@
+import type { ComponentProps, HTMLAttributes } from "react";
+
+import { cn } from "~/lib/utils";
+import { Toggle } from "~/components/ui/toggle";
+
+function SegmentedTabList({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "inline-flex w-fit items-center gap-0.5 rounded-lg bg-muted/45 p-0.5",
+        className,
+      )}
+      role="group"
+      {...props}
+    />
+  );
+}

@@ -27,6 +29,8 @@ const toggleVariants = cva(
           "border-transparent text-foreground shadow-none [:disabled,:active,[data-pressed]]:shadow-none before:shadow-none data-pressed:bg-accent data-pressed:text-accent-foreground disabled:opacity-100 disabled:text-muted-foreground disabled:[&_svg]:opacity-100",
         outline:
           "border-input bg-background not-dark:bg-clip-padding shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:data-pressed:bg-input dark:hover:bg-input/64 dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] dark:not-disabled:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/2%)] [:disabled,:active,[data-pressed]]:shadow-none",
+        segmented:
+          "border-transparent text-muted-foreground shadow-none transition-colors before:shadow-none hover:bg-background/55 hover:text-foreground data-pressed:bg-background data-pressed:text-foreground data-pressed:shadow-xs/10",