feat(web): redesign usage insights

Author: maria-rcks

apps/web/src/components/WorkspacePageContainer.tsx

@@ -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} />;
+}

apps/web/src/components/ui/toggle-group.tsx

@@ -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"
+          : 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",
         className,
       )}
       data-size={size}

apps/web/src/components/ui/toggle.tsx

@@ -18,6 +18,8 @@ const toggleVariants = cva(
           "h-7 min-w-7 rounded-md px-[calc(--spacing(1)-1px)] text-xs before:rounded-[calc(var(--radius-md)-1px)] [&_svg:not([class*='size-'])]:size-3.5",
         default: "h-9 min-w-9 px-[calc(--spacing(2)-1px)] sm:h-8 sm:min-w-8",
         lg: "h-10 min-w-10 px-[calc(--spacing(2.5)-1px)] sm:h-9 sm:min-w-9",
+        segmented:
+          "h-6 min-w-0 rounded-md px-2.5 text-xs before:rounded-[calc(var(--radius-md)-1px)]",
         sm: "h-8 min-w-8 px-[calc(--spacing(1.5)-1px)] sm:h-7 sm:min-w-7",
         xs: "h-7 min-w-7 px-[calc(--spacing(1)-1px)] sm:h-6 sm:min-w-6 rounded-md",
       },
@@ -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",
       },
     },
   },

apps/web/src/components/usage/UsagePage.tsx

@@ -1,5 +1,5 @@
 import type { UsageProviderKind } from "@t3tools/contracts";
-import { useCallback, useMemo, useRef, useState } from "react";
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
 
 import type { DailyTotals, HourlyTotals } from "@t3tools/shared/usageMerge";
 import {
@@ -68,13 +68,7 @@ function buildPeriodColumns(
   });
 }
 
-/**
- * Monotone cubic tangents (Fritsch-Carlson).
- *
- * Plain cubic smoothing overshoots on spiky daily data and would dip the area
- * below zero between points, which reads as negative spend. This variant is
- * shape-preserving, so a smoothed series never leaves the range of its samples.
- */
+/** Shape-preserving cubic tangents that cannot overshoot spiky usage data. */
 function monotoneTangents(points: readonly Point[]): readonly number[] {
   const count = points.length;
   if (count < 2) return [0];
@@ -115,15 +109,13 @@ function monotoneTangents(points: readonly Point[]): readonly number[] {
   return tangents;
 }
 
-/** One cubic segment of a smoothed boundary. */
 interface CurveSegment {
   readonly from: Point;
   readonly c1: Point;
   readonly c2: Point;
   readonly to: Point;
 }
 
-/** Smoothed polyline through `points`, as explicit cubic control points. */
 function smoothCurve(points: readonly Point[]): readonly CurveSegment[] {
   if (points.length < 2) return [];
   const tangents = monotoneTangents(points);
@@ -144,10 +136,10 @@ function smoothCurve(points: readonly Point[]): readonly CurveSegment[] {
   return segments;
 }
 
-function curvePath(segments: readonly CurveSegment[], startCommand: "M" | "L"): string {
+function curvePath(segments: readonly CurveSegment[]): string {
   const first = segments[0];
   if (first === undefined) return "";
-  let path = `${startCommand}${first.from.x.toFixed(2)},${first.from.y.toFixed(2)}`;
+  let path = `M${first.from.x.toFixed(2)},${first.from.y.toFixed(2)}`;
   for (const segment of segments) {
     path += ` C${segment.c1.x.toFixed(2)},${segment.c1.y.toFixed(2)} ${segment.c2.x.toFixed(2)},${segment.c2.y.toFixed(2)} ${segment.to.x.toFixed(2)},${segment.to.y.toFixed(2)}`;
   }
@@ -179,10 +171,8 @@ export function niceScale(peak: number, count: number): { max: number; ticks: re
 /**
  * Turns the merged daily totals into one column per day.
  *
- * Values are absolute, not cumulative: the series are layered from a shared
- * zero baseline rather than stacked. A stacked chart puts whichever provider is
- * drawn last permanently above the other, which reads as "that one is bigger"
- * even on days where it is not.
+ * Values are absolute, not cumulative: each provider is drawn from the same
+ * zero baseline so the chart never implies that one provider is always larger.
  *
  * The chart paths and the hover readout both consume this, so the number under
  * the cursor is by construction the number that was plotted rather than a
@@ -216,42 +206,39 @@ export function UsageProviderChart({
   );
   const [hoverIndex, setHoverIndex] = useState<number | null>(null);
   const plotRef = useRef<HTMLDivElement | null>(null);
+  const tooltipRef = useRef<HTMLDivElement | null>(null);
+  const hoverPositionRef = useRef<{ x: number; y: number } | null>(null);
 
-  const { paths, ticks, stepX, toY, series } = useMemo(() => {
+  const { paths, series, stepX, ticks, toY } = useMemo(() => {
     if (periods.length === 0) {
       return {
         paths: [],
-        ticks: [0] as readonly number[],
+        series: [] as readonly DayColumn[],
         stepX: 0,
+        ticks: [0] as readonly number[],
         toY: () => VIEW_HEIGHT,
-        series: [] as readonly DayColumn[],
       };
     }
 
     const columns = buildPeriodColumns(periods, byPeriod, metric);
-
-    // The scale tops out at the largest single provider-day, not the largest
-    // sum: layered series each measure from zero, so a combined peak would
-    // leave the plot permanently half empty.
     const peak = columns.reduce(
       (max, column) => column.bands.reduce((inner, band) => Math.max(inner, band.value), max),
       0,
     );
     const { max, ticks: tickValues } = niceScale(peak, TICK_COUNT);
     const step = periods.length === 1 ? 0 : VIEW_WIDTH / (periods.length - 1);
-    // Reserve a sliver above the top gridline so the series stroke, which is
-    // drawn at constant screen width, is not shaved off at a peak.
     const toY = (value: number) =>
       max === 0 ? VIEW_HEIGHT : VIEW_HEIGHT - (value / max) * (VIEW_HEIGHT - PLOT_TOP);
 
     const built = PROVIDER_ORDER.map((provider, providerIndex) => {
-      const curve = smoothCurve(
-        columns.map((column, dayIndex) => ({
-          x: dayIndex * step,
-          y: toY(column.bands[providerIndex]?.value ?? 0),
-        })),
+      const line = curvePath(
+        smoothCurve(
+          columns.map((column, periodIndex) => ({
+            x: periodIndex * step,
+            y: toY(column.bands[providerIndex]?.value ?? 0),
+          })),
+        ),
       );
-      const line = curvePath(curve, "M");
       return {
         provider,
         total: columns.reduce((sum, column) => sum + (column.bands[providerIndex]?.value ?? 0), 0),
@@ -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),
+      series: columns,
+      stepX: step,
+      ticks: tickValues,
+      toY,
+    };
   }, [byPeriod, metric, periods]);
 
   const format = metric === "tokens" ? formatTokens : formatUsd;
 
+  const positionTooltip = useCallback(() => {
+    const plot = plotRef.current;
+    const tooltip = tooltipRef.current;
+    const hoverPosition = hoverPositionRef.current;
+    if (plot === null || tooltip === null || hoverPosition === null) return;
+
+    const gap = 12;
+    const tooltipWidth = tooltip.offsetWidth;
+    const tooltipHeight = tooltip.offsetHeight;
+    const plotWidth = plot.clientWidth;
+    const plotHeight = plot.clientHeight;
+    const preferredLeft =
+      hoverPosition.x + gap + tooltipWidth <= plotWidth
+        ? hoverPosition.x + gap
+        : hoverPosition.x - gap - tooltipWidth;
+    const preferredTop =
+      hoverPosition.y + gap + tooltipHeight <= plotHeight
+        ? hoverPosition.y + gap
+        : hoverPosition.y - gap - tooltipHeight;
+    const left = Math.min(Math.max(0, preferredLeft), Math.max(0, plotWidth - tooltipWidth));
+    const top = Math.min(Math.max(0, preferredTop), Math.max(0, plotHeight - tooltipHeight));
+    plot.style.setProperty("--usage-tooltip-left", `${left}px`);
+    plot.style.setProperty("--usage-tooltip-top", `${top}px`);
+  }, []);
+
+  useLayoutEffect(() => {
+    if (hoverIndex === null) return;
+    positionTooltip();
+
+    const plot = plotRef.current;
+    const tooltip = tooltipRef.current;
+    if (plot === null || tooltip === null || typeof ResizeObserver === "undefined") return;
+
+    const observer = new ResizeObserver(positionTooltip);
+    observer.observe(plot);
+    observer.observe(tooltip);
+    return () => observer.disconnect();
+  }, [hoverIndex, positionTooltip]);
+
   const handleMove = useCallback(
     (event: React.MouseEvent<HTMLDivElement>) => {
-      const bounds = plotRef.current?.getBoundingClientRect();
-      if (bounds === undefined || bounds.width === 0 || periods.length === 0) return;
-      const fraction = (event.clientX - bounds.left) / bounds.width;
+      const plot = plotRef.current;
+      if (plot === null || periods.length === 0) return;
+      const bounds = plot.getBoundingClientRect();
+      if (bounds.width === 0) return;
+      const localX = Math.min(bounds.width, Math.max(0, event.clientX - bounds.left));
+      const localY = Math.min(bounds.height, Math.max(0, event.clientY - bounds.top));
+      const fraction = localX / bounds.width;
       const index = Math.round(fraction * (periods.length - 1));
+      hoverPositionRef.current = { x: localX, y: localY };
+      positionTooltip();
       setHoverIndex(Math.min(periods.length - 1, Math.max(0, index)));
     },
-    [periods.length],
+    [periods.length, positionTooltip],
   );
 
   const hoveredPeriod = hoverIndex === null ? undefined : periods[hoverIndex];
   const hoveredColumn = hoverIndex === null ? undefined : series[hoverIndex];
-  const hoverLeft = periods.length <= 1 ? 0 : ((hoverIndex ?? 0) / (periods.length - 1)) * 100;
   const formatPeriod = (period: string) =>
     resolution === "hour" ? formatHourShort(period, timeZone) : formatDayShort(period);
   const formatTooltipPeriod = (period: string) =>
@@ -311,7 +343,10 @@ export function UsageProviderChart({
           ref={plotRef}
           className="relative h-56 flex-1"
           onMouseMove={handleMove}
-          onMouseLeave={() => setHoverIndex(null)}
+          onMouseLeave={() => {
+            hoverPositionRef.current = null;
+            setHoverIndex(null);
+          }}
         >
           <svg
             className="h-full w-full"
@@ -337,7 +372,6 @@ export function UsageProviderChart({
               );
             })}
 
-            {/* Fills first, then every stroke, so no series covers another's line. */}
             {paths.map(({ provider, area }) => (
               <path
                 key={provider}
@@ -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="surface-glass pointer-events-none absolute z-10 min-w-36 max-w-full rounded-xl border border-border/50 px-2.5 py-2 text-xs shadow-lg"
               style={{
-                left: `${hoverLeft}%`,
-                transform: hoverLeft > 60 ? "translateX(-100%)" : "translateX(0)",
+                left: "var(--usage-tooltip-left, 0px)",
+                top: "var(--usage-tooltip-top, 0px)",
               }}
             >
               <div className="mb-1 text-muted-foreground">{formatTooltipPeriod(hoveredPeriod)}</div>
@@ -423,21 +458,3 @@ export function UsageProviderChart({
     </div>
   );
 }
-
-export function UsageChartLegend() {
-  return (
-    <div className="flex items-center gap-4">
-      {PROVIDER_ORDER.map((provider) => {
-        // Brand marks keep monochrome providers identifiable even when their
-        // chart series use distinct colors.
-        const { label, mark: Mark } = PROVIDER_PRESENTATION[provider];
-        return (
-          <span key={provider} className="flex items-center gap-1.5 text-xs text-muted-foreground">
-            <Mark className="size-3.5 shrink-0" aria-hidden />
-            {label}
-          </span>
-        );
-      })}
-    </div>
-  );
-}

apps/web/src/components/usage/UsageProviderChart.tsx

@@ -26,5 +26,5 @@ export const PROVIDER_PRESENTATION = {
   },
 } satisfies Record<UsageProviderKind, UsageProviderPresentation>;
 
-/** The chart layers every series from zero, so order only controls how it is read. */
+/** Stable provider reading order across charts, summaries, tables, and hover rows. */
 export const PROVIDER_ORDER = Object.keys(PROVIDER_PRESENTATION) as UsageProviderKind[];

apps/web/src/components/usage/usageProviders.ts

@@ -138,6 +138,12 @@ describe("mergeUsage", () => {
       "claude",
       "codex",
     ]);
+    expect(merged.sessions).toBe(2);
+    expect(
+      Object.fromEntries(
+        merged.providers.map((provider) => [provider.provider, provider.sessions]),
+      ),
+    ).toEqual({ claude: 1, codex: 1 });
   });
 
   it("excludes an environment reporting an older contract version", () => {
@@ -248,6 +254,7 @@ describe("mergeUsage", () => {
     );
 
     expect(merged.sessions).toBe(1);
+    expect(merged.providers[0]?.sessions).toBe(1);
   });
 
   it("returns empty totals with no environments", () => {