fix: fix truncated timestamps in sandbox logs and events and unify date formats

src/features/dashboard/billing/concurrent-sandboxes-addon-dialog.tsx

@@ -142,11 +142,11 @@ function DialogContent_Inner({
   const limitIncreaseText = currentConcurrentSandboxesLimit ? (
     <>
       Increases total concurrent sandbox limit from{' '}
-      <b>{currentConcurrentSandboxesLimit.toLocaleString()}</b> to{' '}
+      <b>{currentConcurrentSandboxesLimit.toLocaleString('en-US')}</b> to{' '}
       <b>
-        {(
-          currentConcurrentSandboxesLimit + SANDBOXES_PER_ADDON
-        ).toLocaleString()}
+        {(currentConcurrentSandboxesLimit + SANDBOXES_PER_ADDON).toLocaleString(
+          'en-US'
+        )}
       </b>
     </>
   ) : (

src/features/dashboard/sandbox/events/table.tsx

@@ -53,7 +53,7 @@ export const SandboxEventsTable = ({
       <TableHeader className="grid sticky top-0 z-1 bg-bg">
         <TableRow className="flex min-w-full">
           <TableHead
-            className="flex w-[174px] px-0 h-min pb-3 pr-4 text-fg"
+            className="flex w-[190px] px-0 h-min pb-3 pr-4 text-fg"
             data-state="selected"
           >
             <Button
@@ -175,7 +175,7 @@ const SandboxEventRow = ({
       virtualizer={virtualizer}
       height={ROW_HEIGHT_PX}
     >
-      <TableCell className="flex w-[174px] items-center px-0 py-0 pr-4">
+      <TableCell className="flex w-[190px] items-center px-0 py-0 pr-4">
         {formattedTimestamp ? (
           <CopyButtonInline
             value={formattedTimestamp.iso}

src/features/dashboard/sandbox/header/ended-at.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { Timestamp } from '@/features/dashboard/shared'
 import CopyButton from '@/ui/copy-button'
 import { useSandboxContext } from '../context'
 
@@ -22,31 +23,14 @@ export default function EndedAt() {
     return <p>N/A</p>
   }
 
-  const date = new Date(endedAt)
-  const now = new Date()
-  const isToday = date.toDateString() === now.toDateString()
-  const isYesterday =
-    date.toDateString() ===
-    new Date(now.setDate(now.getDate() - 1)).toDateString()
-
-  const prefix = isToday
-    ? 'Today'
-    : isYesterday
-      ? 'Yesterday'
-      : date.toLocaleDateString()
-
-  const timeStr = date.toLocaleTimeString([], {
-    hour: 'numeric',
-    minute: '2-digit',
-    second: '2-digit',
-  })
-
   return (
     <div className="flex items-center gap-3">
-      <p>
-        {prefix}, {timeStr}
-      </p>
-      <CopyButton value={endedAt} className="text-fg-secondary" />
+      <Timestamp value={endedAt} />
+      <CopyButton
+        aria-label="Copy ended timestamp"
+        value={endedAt}
+        className="text-fg-secondary"
+      />
     </div>
   )
 }

src/features/dashboard/sandbox/inspect/stopped-banner.tsx

@@ -64,7 +64,7 @@ export function StoppedBanner({ rootNodeCount }: StoppedBannerProps) {
                 : 'Filesystem data is stale and is kept locally on your device.'}
               <span className="text-fg-tertiary">
                 {' '}
-                Last updated: {lastUpdated?.toLocaleTimeString()}
+                Last updated: {lastUpdated?.toLocaleTimeString('en-US')}
               </span>
             </CardDescription>
           </CardHeader>

src/features/dashboard/sandbox/logs/logs-cells.tsx

@@ -1,19 +1,8 @@
 import type { SandboxLogModel } from '@/core/modules/sandboxes/models'
 import { LogLevelBadge } from '@/features/dashboard/common/log-cells'
+import { formatLocalLogStyleTimestamp } from '@/lib/utils/formatting'
 import CopyButtonInline from '@/ui/copy-button-inline'
 
-const LOCAL_DATE_FORMATTER = new Intl.DateTimeFormat(undefined, {
-  month: 'short',
-  day: '2-digit',
-})
-
-const LOCAL_TIME_FORMATTER = new Intl.DateTimeFormat(undefined, {
-  hour: '2-digit',
-  minute: '2-digit',
-  second: '2-digit',
-  hour12: false,
-})
-
 export const LogLevel = ({ level }: { level: SandboxLogModel['level'] }) => {
   return <LogLevelBadge level={level} />
 }
@@ -23,21 +12,21 @@ interface TimestampProps {
 }
 
 export const Timestamp = ({ timestampUnix }: TimestampProps) => {
-  const date = new Date(timestampUnix)
+  const formatted = formatLocalLogStyleTimestamp(timestampUnix, {
+    includeCentiseconds: true,
+  })
 
-  const centiseconds = Math.floor((date.getMilliseconds() / 10) % 100)
-    .toString()
-    .padStart(2, '0')
-  const localDatePart = LOCAL_DATE_FORMATTER.format(date)
-  const localTimePart = LOCAL_TIME_FORMATTER.format(date)
+  if (!formatted) {
+    return <span className="font-mono prose-table-numeric">--</span>
+  }
 
   return (
     <CopyButtonInline
-      value={date.toISOString()}
+      value={formatted.iso}
       className="font-mono group prose-table-numeric truncate"
     >
-      <span className="text-fg-tertiary">{localDatePart}</span> {localTimePart}.
-      {centiseconds}
+      <span className="text-fg-tertiary">{formatted.datePart}</span>{' '}
+      {formatted.timePart}.{formatted.subsecondPart}
     </CopyButtonInline>
   )
 }

src/features/dashboard/sandbox/logs/logs.tsx

@@ -39,7 +39,7 @@ import useLogFilters from './use-log-filters'
 import { useSandboxLogs } from './use-sandbox-logs'
 
 // column widths are calculated as max width of the content + padding
-const COLUMN_WIDTHS_PX = { timestamp: 148 + 16, level: 48 + 16 } as const
+const COLUMN_WIDTHS_PX = { timestamp: 190, level: 48 + 16 } as const
 const ROW_HEIGHT_PX = 26
 const LIVE_STATUS_ROW_HEIGHT_PX = ROW_HEIGHT_PX + 16
 const VIRTUAL_OVERSCAN = 16

src/features/dashboard/sandbox/monitoring/components/monitoring-charts.tsx

@@ -174,7 +174,9 @@ function renderUsageMarker(usedMb: number | null, value: number) {
 
   return (
     <>
-      <span className="text-fg">{normalizedUsedMb.toLocaleString()}</span>
+      <span className="text-fg">
+        {normalizedUsedMb.toLocaleString('en-US')}
+      </span>
       <span className="text-fg-secondary">MB</span>
       <span className="text-fg-tertiary px-0.75">·</span>
       <span className="text-fg">{Math.round(value)}</span>

src/features/dashboard/sandboxes/list/table-cells.tsx

@@ -170,7 +170,7 @@ export function StartedAtCell({
   const dateValue = (getValue() as string | undefined) ?? ''
 
   const formattedTimestamp = useMemo(() => {
-    return formatLocalLogStyleTimestamp(dateValue)
+    return formatLocalLogStyleTimestamp(dateValue, { includeTimezone: true })
   }, [dateValue])
 
   return (

src/features/dashboard/templates/list/table-cells.tsx

@@ -322,6 +322,7 @@ export function CreatedAtCell({
     return formatLocalLogStyleTimestamp(dateValue, {
       includeSeconds: false,
       includeYear: true,
+      includeTimezone: true,
     })
   }, [dateValue])
 
@@ -351,6 +352,7 @@ export function UpdatedAtCell({
     return formatLocalLogStyleTimestamp(dateValue, {
       includeSeconds: false,
       includeYear: true,
+      includeTimezone: true,
     })
   }, [dateValue])
 

src/lib/utils/formatting.ts

@@ -7,37 +7,37 @@
 import { format, isThisYear, isValid } from 'date-fns'
 import { formatInTimeZone } from 'date-fns-tz'
 
-const LOCAL_LOG_STYLE_DATE_FORMATTER = new Intl.DateTimeFormat(undefined, {
+const LOCAL_LOG_STYLE_DATE_FORMATTER = new Intl.DateTimeFormat('en-US', {
   month: 'short',
   day: '2-digit',
 })
 
 const LOCAL_LOG_STYLE_DATE_WITH_YEAR_FORMATTER = new Intl.DateTimeFormat(
-  undefined,
+  'en-US',
   {
     month: 'short',
     day: '2-digit',
     year: 'numeric',
   }
 )
 
-const LOCAL_LOG_STYLE_TIME_FORMATTER = new Intl.DateTimeFormat(undefined, {
+const LOCAL_LOG_STYLE_TIME_FORMATTER = new Intl.DateTimeFormat('en-US', {
   hour: '2-digit',
   minute: '2-digit',
   second: '2-digit',
   hour12: false,
 })
 
 const LOCAL_LOG_STYLE_TIME_NO_SECONDS_FORMATTER = new Intl.DateTimeFormat(
-  undefined,
+  'en-US',
   {
     hour: '2-digit',
     minute: '2-digit',
     hour12: false,
   }
 )
 
-const LOCAL_LOG_STYLE_TIMEZONE_FORMATTER = new Intl.DateTimeFormat(undefined, {
+const LOCAL_LOG_STYLE_TIMEZONE_FORMATTER = new Intl.DateTimeFormat('en-US', {
   timeZoneName: 'short',
 })
 
@@ -55,16 +55,18 @@
     includeSeconds = true,
     includeYear = false,
     includeCentiseconds = false,
+    includeTimezone = false,
   }: {
     includeSeconds?: boolean
     includeYear?: boolean
     includeCentiseconds?: boolean
+    includeTimezone?: boolean
   } = {}
 ): {
   datePart: string
   timePart: string
   subsecondPart: string | null
-  timezonePart: string
+  timezonePart: string | null
   iso: string
 } | null {
   const date = new Date(timestamp)
@@ -73,12 +75,13 @@
     return null
   }
 
-  const timezonePart =
-    LOCAL_LOG_STYLE_TIMEZONE_FORMATTER.formatToParts(date).find(
-      (part) => part.type === 'timeZoneName'
-    )?.value ??
-    Intl.DateTimeFormat().resolvedOptions().timeZone ??
-    'Local'
+  const timezonePart = includeTimezone
+    ? (LOCAL_LOG_STYLE_TIMEZONE_FORMATTER.formatToParts(date).find(
+        (part) => part.type === 'timeZoneName'
+      )?.value ??
+      Intl.DateTimeFormat().resolvedOptions().timeZone ??
+      'Local')
+    : null
 
   return {
     datePart: (includeYear
@@ -148,8 +151,8 @@
     ? 'Today'
     : isYesterday
       ? 'Yesterday'
-      : date.toLocaleDateString()
-  const timeStr = date.toLocaleTimeString([], {
+      : date.toLocaleDateString('en-US')
+  const timeStr = date.toLocaleTimeString('en-US', {
     hour: 'numeric',
     minute: '2-digit',
     second: '2-digit',
@@ -251,19 +254,19 @@
 
   if (isThisYear(timestamp)) {
     return (
       new Intl.DateTimeFormat('en-US', {
         month: 'short',
         day: 'numeric',
       }).format(timestamp) + `, ${hour12}${ampm}`
     )
   }
 
   return (
     new Intl.DateTimeFormat('en-US', {
       year: 'numeric',
       month: 'short',
       day: 'numeric',
     }).format(timestamp) + `, ${hour12}${ampm}`
   )
 }
 

src/ui/primitives/calendar.tsx

@@ -108,10 +108,10 @@ function Calendar({
       disabled={disabledDates}
       formatters={{
         formatMonthDropdown: (date) =>
-          date.toLocaleString('default', { month: 'short' }),
+          date.toLocaleString('en-US', { month: 'short' }),
         formatWeekdayName: (date) =>
           date
-            .toLocaleString('default', { weekday: 'short' })
+            .toLocaleString('en-US', { weekday: 'short' })
             .toUpperCase()
             .slice(0, 3),
         ...formatters,
@@ -255,7 +255,7 @@ function CalendarDayButton({
       ref={ref}
       variant="tertiary"
       size="none"
-      data-day={day.date.toLocaleDateString()}
+      data-day={day.date.toLocaleDateString('en-US')}
       data-selected-single={
         modifiers.selected &&
         !modifiers.range_start &&

src/ui/primitives/chart.tsx

@@ -276,14 +276,14 @@ const ChartTooltipContent = React.forwardRef<
                           {itemConfig?.label || item.name}
                         </span>
                       </div>
-                      {item.value && (
+                      {item.value != null && (
                         <span
                           className={[
                             'font-mono ',
                             'text-fg tabular-nums',
                           ].join(' ')}
                         >
-                          {item.value.toLocaleString()}
+                          {item.value.toLocaleString('en-US')}
                         </span>
                       )}
                     </div>

src/ui/time-range-picker.logic.ts

@@ -193,18 +193,17 @@ export function parsePickerDateTime(
 }
 
 function formatBoundaryDateTime(date: Date, hideTime: boolean): string {
+  const datePart = formatDateValue(date)
   if (hideTime) {
-    return date.toLocaleDateString()
+    return datePart
   }
 
-  return date.toLocaleString(undefined, {
-    year: 'numeric',
-    month: 'numeric',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit',
-  })
+  const timePart = formatTimeValue(
+    date.getHours(),
+    date.getMinutes(),
+    date.getSeconds()
+  )
+  return `${datePart} ${timePart}`
 }
 
 function normalizeTimeValue(time: string | null): string | null {