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

Author: Kraci

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 { formatRelativeDateTime } from '@/lib/utils/formatting'
 import CopyButton from '@/ui/copy-button'
 import { useSandboxContext } from '../context'
 
@@ -22,30 +23,9 @@ 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>
+      <p>{formatRelativeDateTime(new Date(endedAt))}</p>
       <CopyButton value={endedAt} className="text-fg-secondary" />
     </div>
   )

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

@@ -1,5 +1,6 @@
 'use client'
 
+import { formatRelativeDateTime } from '@/lib/utils/formatting'
 import CopyButton from '@/ui/copy-button'
 import { useSandboxContext } from '../context'
 
@@ -11,30 +12,9 @@ export default function StartedAt() {
     return null
   }
 
-  const date = new Date(startedAt)
-  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-1">
-      <p>
-        {prefix}, {timeStr}
-      </p>
+      <p>{formatRelativeDateTime(new Date(startedAt))}</p>
       <CopyButton value={startedAt} />
     </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])