Improve: Usage Page (#181)

<!-- CURSOR_SUMMARY -->
> [!NOTE]
> Adds fullscreen mode for usage metric charts, tweaks bar chart styling
and time range label, removes initial prefix logic, and standardizes
cost display formatting.
> 
> - **Usage Charts UI**:
> - **Fullscreen mode**: Adds hover "expand" button and dialog-based
fullscreen view for `sandboxes`, `cost`, `vcpu`, `ram` charts via
`UsageMetricChart` and context (`fullscreenMetric`,
`setFullscreenMetric`).
> - **Chart styling**: Adjusts bar appearance in `compute-usage-chart`
(`borderWidth`, `opacity`, decal `symbolSize`, `dashArrayY`,
`barCategoryGap`).
> - **Timeframe & Display**:
> - Removes initial data-point prefix logic; default range now always
falls back to `INITIAL_TIMEFRAME_FALLBACK_RANGE_MS`.
>   - Updates time range label to show timezone on end date.
> - **Formatting**:
>   - Uses `formatCurrency` for `cost` in hovered and total displays.
> - **Components**:
> - `DialogContent` supports `closeButtonClassName` and refines close
button classes.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
5a5e27f. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: ben-fornefeld

src/features/dashboard/usage/compute-usage-chart/index.tsx

@@ -141,19 +141,19 @@ function ComputeUsageChart({
       itemStyle: {
         color: 'transparent',
         borderColor: barColor,
-        borderWidth: 0.3,
+        borderWidth: 0.25,
         borderCap: 'square',
-        opacity: 1,
+        opacity: 0.8,
         decal: {
           symbol: 'line',
-          symbolSize: 1.5,
+          symbolSize: 0.8,
           rotation: -Math.PI / 4,
           dashArrayX: [1, 0],
-          dashArrayY: [2, 4],
+          dashArrayY: [1, 1.5],
           color: barColor,
         },
       },
-      barCategoryGap: '15%',
+      barCategoryGap: '28%',
       emphasis: {
         itemStyle: {
           opacity: 1,

src/features/dashboard/usage/constants.ts

@@ -5,12 +5,6 @@ import {
   ComputeChartType,
 } from './compute-usage-chart/types'
 
-/**
- * Initial timeframe prefix in milliseconds (3 days)
- * Used to set the default time range for displaying usage data
- */
-export const INITIAL_TIMEFRAME_DATA_POINT_PREFIX_MS = 3 * 24 * 60 * 60 * 1000
-
 /**
  * Default fallback range in milliseconds (30 days)
  * Used when no data is available to determine the appropriate range

src/features/dashboard/usage/display-utils.ts

@@ -1,4 +1,5 @@
 import {
+  formatCurrency,
   formatDateRange,
   formatDay,
   formatHour,
@@ -133,7 +134,7 @@ export function formatHoveredValues(
       timestamp: timestampLabel,
     },
     cost: {
-      displayValue: `$${cost.toFixed(2)}`,
+      displayValue: formatCurrency(cost),
       label,
       timestamp: timestampLabel,
     },
@@ -171,7 +172,7 @@ export function formatTotalValues(totals: {
       timestamp: null,
     },
     cost: {
-      displayValue: `$${totals.cost.toFixed(2)}`,
+      displayValue: formatCurrency(totals.cost),
       label: 'total over range',
       timestamp: null,
     },

src/features/dashboard/usage/usage-charts-context.tsx

@@ -11,10 +11,7 @@ import {
   useMemo,
   useState,
 } from 'react'
-import {
-  INITIAL_TIMEFRAME_DATA_POINT_PREFIX_MS,
-  INITIAL_TIMEFRAME_FALLBACK_RANGE_MS,
-} from './constants'
+import { INITIAL_TIMEFRAME_FALLBACK_RANGE_MS } from './constants'
 import {
   calculateTotals,
   formatAxisDate,
@@ -49,6 +46,10 @@ interface UsageChartsContextValue {
     vcpu: DisplayValue
     ram: DisplayValue
   }
+  fullscreenMetric: 'sandboxes' | 'cost' | 'vcpu' | 'ram' | null
+  setFullscreenMetric: (
+    metric: 'sandboxes' | 'cost' | 'vcpu' | 'ram' | null
+  ) => void
 }
 
 const UsageChartsContext = createContext<UsageChartsContextValue | undefined>(
@@ -77,20 +78,16 @@ export function UsageChartsProvider({
   })
 
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
+  const [fullscreenMetric, setFullscreenMetric] = useState<
+    'sandboxes' | 'cost' | 'vcpu' | 'ram' | null
+  >(null)
 
   // DERIVED STATE
 
   const defaultRange = useMemo(() => {
     const now = Date.now()
-
-    if (data.hour_usages && data.hour_usages.length > 0) {
-      const firstTimestamp = data.hour_usages[0]!.timestamp
-      const start = firstTimestamp - INITIAL_TIMEFRAME_DATA_POINT_PREFIX_MS
-      return { start, end: now }
-    }
-
     return { start: now - INITIAL_TIMEFRAME_FALLBACK_RANGE_MS, end: now }
-  }, [data])
+  }, [])
 
   const timeframe = useMemo(
     () => ({
@@ -242,6 +239,8 @@ export function UsageChartsProvider({
       totals,
       samplingMode,
       displayValues,
+      fullscreenMetric,
+      setFullscreenMetric,
     }),
     [
       displayedData,
@@ -251,6 +250,7 @@ export function UsageChartsProvider({
       totals,
       samplingMode,
       displayValues,
+      fullscreenMetric,
     ]
   )
 

src/features/dashboard/usage/usage-metric-chart.tsx

@@ -2,7 +2,17 @@
 
 import { AnimatedMetricDisplay } from '@/features/dashboard/sandboxes/monitoring/charts/animated-metric-display'
 import { cn } from '@/lib/utils'
-import { Card, CardContent, CardHeader } from '@/ui/primitives/card'
+import { Button } from '@/ui/primitives/button'
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  cardVariants,
+} from '@/ui/primitives/card'
+import { Dialog, DialogContent } from '@/ui/primitives/dialog'
+import { DialogTitle } from '@radix-ui/react-dialog'
+import { Maximize2 } from 'lucide-react'
+import { useState } from 'react'
 import ComputeUsageChart from './compute-usage-chart'
 import { useUsageCharts } from './usage-charts-context'
 import { UsageTimeRangeControls } from './usage-time-range-controls'
@@ -20,17 +30,17 @@ const METRIC_CONFIGS: Record<UsageMetricType, MetricConfig> = {
   ram: { title: 'RAM Hours' },
 }
 
-interface UsageMetricChartProps {
+interface UsageMetricChartContentProps {
   metric: UsageMetricType
-  className?: string
   timeRangeControlsClassName?: string
+  isFullscreen?: boolean
 }
 
-export function UsageMetricChart({
+function UsageMetricChartContent({
   metric,
-  className,
   timeRangeControlsClassName,
-}: UsageMetricChartProps) {
+  isFullscreen,
+}: UsageMetricChartContentProps) {
   const {
     displayedData,
     setHoveredIndex,
@@ -39,14 +49,17 @@ export function UsageMetricChart({
     displayValues,
     samplingMode,
     onBrushEnd,
+    setFullscreenMetric,
   } = useUsageCharts()
 
+  const [isChartHovered, setIsChartHovered] = useState(false)
+
   const config = METRIC_CONFIGS[metric]
   const { displayValue, label, timestamp } = displayValues[metric]
   const data = displayedData[metric]
 
   return (
-    <Card className={cn('h-full flex flex-col', className)}>
+    <>
       <CardHeader className="space-y-2">
         <div className="flex flex-col lg:flex-row lg:justify-between lg:items-center gap-2">
           <span className="prose-label-highlight uppercase max-md:text-sm">
@@ -55,7 +68,10 @@ export function UsageMetricChart({
           <UsageTimeRangeControls
             timeframe={timeframe}
             onTimeRangeChange={setTimeframe}
-            className={cn('max-lg:self-start', timeRangeControlsClassName)}
+            className={cn('max-lg:self-start', {
+              [timeRangeControlsClassName ?? '']: !isFullscreen,
+              'mr-8': isFullscreen,
+            })}
           />
         </div>
         <AnimatedMetricDisplay
@@ -65,7 +81,11 @@ export function UsageMetricChart({
         />
       </CardHeader>
       <CardContent className="flex flex-col gap-4 flex-1 min-h-0">
-        <div className="flex-1 min-h-0">
+        <div
+          className="flex-1 min-h-0 relative"
+          onMouseEnter={() => setIsChartHovered(true)}
+          onMouseLeave={() => setIsChartHovered(false)}
+        >
           <ComputeUsageChart
             type={metric}
             data={data}
@@ -74,8 +94,76 @@ export function UsageMetricChart({
             onHoverEnd={() => setHoveredIndex(null)}
             onBrushEnd={onBrushEnd}
           />
+          {isChartHovered && !isFullscreen && (
+            <Button
+              onClick={() => setFullscreenMetric(metric)}
+              variant="ghost"
+              size="iconSm"
+              className={cn(
+                cardVariants({ variant: 'layer' }),
+                'hidden lg:flex absolute top-4 right-4 opacity-70 hover:opacity-100 animate-fade-slide-in'
+              )}
+              aria-label="Expand chart to fullscreen"
+            >
+              <Maximize2 className="size-4" />
+            </Button>
+          )}
         </div>
       </CardContent>
-    </Card>
+    </>
+  )
+}
+
+interface UsageMetricChartProps {
+  metric: UsageMetricType
+  timeRangeControlsClassName?: string
+  className?: string
+}
+
+export function UsageMetricChart({
+  metric,
+  className,
+  timeRangeControlsClassName,
+}: UsageMetricChartProps) {
+  const { fullscreenMetric, setFullscreenMetric } = useUsageCharts()
+
+  const isFullscreen = fullscreenMetric === metric
+
+  return (
+    <>
+      {!isFullscreen && (
+        <Card className={cn('h-full flex flex-col', className)}>
+          <UsageMetricChartContent
+            metric={metric}
+            timeRangeControlsClassName={timeRangeControlsClassName}
+            isFullscreen={isFullscreen}
+          />
+        </Card>
+      )}
+
+      {isFullscreen && (
+        <Dialog
+          open={isFullscreen}
+          onOpenChange={(open) => !open && setFullscreenMetric(null)}
+        >
+          <DialogContent
+            className="sm:max-w-[min(90svw,2200px)] w-full max-h-[min(70svh,1200px)] h-full border-0 p-0"
+            closeButtonClassName="top-7.5 right-6.5"
+          >
+            {/* title just here to avoid accessibility dev error from radix */}
+            <DialogTitle className="sr-only">
+              {METRIC_CONFIGS[metric].title}
+            </DialogTitle>
+            <Card className="h-full flex flex-col border-0">
+              <UsageMetricChartContent
+                metric={metric}
+                timeRangeControlsClassName={timeRangeControlsClassName}
+                isFullscreen={isFullscreen}
+              />
+            </Card>
+          </DialogContent>
+        </Dialog>
+      )}
+    </>
   )
 }

src/features/dashboard/usage/usage-time-range-controls.tsx

@@ -21,7 +21,6 @@ import {
   normalizeToEndOfSamplingPeriod,
   normalizeToStartOfSamplingPeriod,
 } from './sampling-utils'
-import { useUsageCharts } from './usage-charts-context'
 
 interface UsageTimeRangeControlsProps {
   timeframe: {
@@ -51,12 +50,19 @@ export function UsageTimeRangeControls({
   )
 
   const rangeLabel = useMemo(() => {
-    const formatter = new Intl.DateTimeFormat('en-US', {
+    const opt: Intl.DateTimeFormatOptions = {
       year: 'numeric',
       month: 'short',
       day: 'numeric',
+    }
+
+    const firstFormatter = new Intl.DateTimeFormat('en-US', opt)
+
+    const lastFormatter = new Intl.DateTimeFormat('en-US', {
+      ...opt,
+      timeZoneName: 'short',
     })
-    return `${formatter.format(timeframe.start)} - ${formatter.format(timeframe.end)}`
+    return `${firstFormatter.format(timeframe.start)} - ${lastFormatter.format(timeframe.end)}`
   }, [timeframe.start, timeframe.end])
 
   const rangeCopyValue = useMemo(

src/ui/primitives/dialog.tsx

@@ -49,12 +49,14 @@ function DialogOverlay({
 interface DialogContentProps
   extends React.ComponentProps<typeof DialogPrimitive.Content> {
   hideClose?: boolean
+  closeButtonClassName?: string
 }
 
 function DialogContent({
   className,
   children,
   hideClose,
+  closeButtonClassName,
   ...props
 }: DialogContentProps) {
   return (
@@ -71,7 +73,12 @@ function DialogContent({
       >
         {children}
         {!hideClose && (
-          <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg- data-[state=open]:text-muted-foreground absolute top-4 right-4  opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+          <DialogPrimitive.Close
+            className={cn(
+              `ring-offset-bg cursor-pointer focus:ring-ring data-[state=open]:text-fg-tertiary absolute top-4 right-4 opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+              closeButtonClassName
+            )}
+          >
             <XIcon />
             <span className="sr-only">Close</span>
           </DialogPrimitive.Close>