improvement(tables): render date cells wall-clock-faithful via offset-preserved storage

Author: TheodoreSpeaks

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/row-modal/row-modal.tsx

@@ -247,7 +247,7 @@ function ColumnField({ column, value, onChange }: ColumnFieldProps) {
   }
 
   if (column.type === 'date') {
-    const parts = dateValueToLocalParts(formatValueForInput(value, 'date'), timeZone)
+    const parts = dateValueToLocalParts(formatValueForInput(value, 'date'))
     return (
       <ChipModalField type='custom' title={title} required={column.required} hint={hint}>
         <div className='flex items-center gap-2'>

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/cell-render.tsx

@@ -6,7 +6,6 @@ import { Badge, Checkbox, cn, Tooltip } from '@sim/emcn'
 import { parse } from 'tldts'
 import type { RowExecutionMetadata } from '@/lib/table'
 import { StatusBadge } from '@/app/workspace/[workspaceId]/logs/utils'
-import { useTimezone } from '@/hooks/queries/general-settings'
 import { storageToDisplay } from '../../../utils'
 import type { DisplayColumn } from '../types'
 import { SimResourceCell, type SimResourceType } from './sim-resource-cell'
@@ -235,7 +234,6 @@ interface CellRenderProps {
 export function CellRender({ kind, isEditing }: CellRenderProps): React.ReactElement | null {
   const valueText = kind.kind === 'value' ? kind.text : null
   const revealedValueText = useTypewriter(valueText)
-  const timeZone = useTimezone()
 
   switch (kind.kind) {
     case 'value':
@@ -334,7 +332,7 @@ export function CellRender({ kind, isEditing }: CellRenderProps): React.ReactEle
     case 'date':
       return (
         <span className={cn('text-[var(--text-primary)]', isEditing && 'invisible')}>
-          {storageToDisplay(kind.text, { seconds: true, timeZone })}
+          {storageToDisplay(kind.text, { seconds: true })}
         </span>
       )
 

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/expanded-cell-popover.tsx

@@ -46,7 +46,6 @@ export function ExpandedCellPopover({
   const rootRef = useRef<HTMLDivElement>(null)
   const textareaRef = useRef<HTMLTextAreaElement>(null)
   const [rect, setRect] = useState<{ top: number; left: number; width: number } | null>(null)
-  const timeZone = useTimezone()
 
   const target = useMemo(() => {
     if (!expandedCell) return null
@@ -154,10 +153,7 @@ export function ExpandedCellPopover({
           key={`${expandedCell.rowId}:${expandedCell.columnKey ?? expandedCell.columnName}`}
           initialValue={
             target.column.type === 'date'
-              ? storageToDisplay(formatValueForInput(target.value, 'date'), {
-                  seconds: true,
-                  timeZone,
-                })
+              ? storageToDisplay(formatValueForInput(target.value, 'date'), { seconds: true })
               : formatValueForInput(target.value, target.column.type)
           }
           column={target.column}
@@ -215,6 +211,12 @@ function ExpandedCellEditor({
   const timeZone = useTimezone()
 
   const handleSave = () => {
+    // Untouched draft → close without writing. For dates this also avoids
+    // re-stamping the stored offset with this viewer's zone.
+    if (draftValue === initialValue) {
+      onClose()
+      return
+    }
     // Only date columns go through `displayToStorage` — it now parses many
     // date shapes, so a number draft like "2024" must not reach it.
     const raw =

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/inline-editors.tsx

@@ -56,23 +56,20 @@ function InlineDateEditor({
   const timeZone = useTimezone()
 
   const storedValue = formatValueForInput(value, column.type)
-  const [draft, setDraft] = useState(() =>
+  const initialDraft =
     initialCharacter !== undefined
       ? initialCharacter
-      : storageToDisplay(storedValue, { seconds: true, timeZone })
-  )
+      : storageToDisplay(storedValue, { seconds: true })
+  const [draft, setDraft] = useState(initialDraft)
   const [invalid, setInvalid] = useState(false)
   /** Picker commits mutate the draft from timeouts/child handlers; reading it
    *  through a ref keeps the scheduled blur-save from saving a stale draft. */
   const draftRef = useRef(draft)
   draftRef.current = draft
 
-  /** The calendar is zone-agnostic (it works on wall times), so feed it the
-   *  wall representation of the draft in the viewer's effective zone. */
-  const draftParts = dateValueToLocalParts(
-    displayToStorage(draft, timeZone) ?? storedValue,
-    timeZone
-  )
+  /** The calendar works on wall times; feed it the draft's literal wall
+   *  representation. */
+  const draftParts = dateValueToLocalParts(displayToStorage(draft, timeZone) ?? storedValue)
   const pickerValue = draftParts.day
     ? draftParts.time
       ? `${draftParts.day}T${draftParts.time}`
@@ -98,6 +95,14 @@ function InlineDateEditor({
       if (doneRef.current) return
       clearTimeout(blurTimeoutRef.current)
       const current = draftRef.current
+      // Untouched draft → re-save the stored value byte-identical. Re-parsing
+      // the display form would re-stamp the offset with THIS viewer's zone,
+      // silently shifting the instant of a value someone else wrote.
+      if (storageVal === undefined && initialCharacter === undefined && current === initialDraft) {
+        doneRef.current = true
+        onSave(storedValue || null, reason)
+        return
+      }
       const raw = storageVal ?? displayToStorage(current, timeZone) ?? current
       if (raw && Number.isNaN(Date.parse(raw))) {
         if (reason === 'blur') {
@@ -114,7 +119,7 @@ function InlineDateEditor({
       doneRef.current = true
       onSave(raw || null, reason)
     },
-    [invalid, onSave, onCancel, timeZone]
+    [invalid, onSave, onCancel, timeZone, initialDraft, initialCharacter, storedValue]
   )
 
   const handleKeyDown = useCallback(
@@ -169,7 +174,7 @@ function InlineDateEditor({
       }
       const canonical = displayToStorage(picked, timeZone)
       if (!canonical) return
-      setDraft(storageToDisplay(canonical, { seconds: true, timeZone }))
+      setDraft(storageToDisplay(canonical, { seconds: true }))
       setInvalid(false)
       inputRef.current?.focus()
     },

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx

@@ -1414,7 +1414,7 @@ export function TableGrid({
             }
           }
         } else if (column.type === 'date') {
-          text = storageToDisplay(String(val), { seconds: true, timeZone: timeZoneRef.current })
+          text = storageToDisplay(String(val), { seconds: true })
         } else {
           text = String(val)
         }

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/utils.test.ts

@@ -17,49 +17,37 @@ describe('dateValueToLocalParts / localPartsToDateValue', () => {
     expect(localPartsToDateValue('2026-07-06', null)).toBe('2026-07-06')
   })
 
-  it('splits instants into local day/time and round-trips exactly', () => {
-    const stored = new Date(2026, 6, 6, 16, 4, 55).toISOString()
-    const parts = dateValueToLocalParts(stored)
-    expect(parts).toEqual({ day: '2026-07-06', time: '16:04:55' })
-    expect(localPartsToDateValue(parts.day as string, parts.time)).toBe(stored)
-  })
-
-  it('keeps the time when only the day changes', () => {
-    const stored = new Date(2026, 6, 6, 16, 4, 55).toISOString()
-    const parts = dateValueToLocalParts(stored)
-    expect(localPartsToDateValue('2026-07-09', parts.time)).toBe(
-      new Date(2026, 6, 9, 16, 4, 55).toISOString()
+  it('splits instants into their literal wall day/time — no zone conversion', () => {
+    expect(dateValueToLocalParts('2026-07-06T16:04:55-07:00')).toEqual({
+      day: '2026-07-06',
+      time: '16:04:55',
+    })
+    expect(dateValueToLocalParts('2026-07-06T23:04:55Z')).toEqual({
+      day: '2026-07-06',
+      time: '23:04:55',
+    })
+    expect(dateValueToLocalParts('2026-07-06T23:04:55.000Z')).toEqual({
+      day: '2026-07-06',
+      time: '23:04:55',
+    })
+  })
+
+  it('recombines parts stamping the given zone offset, keeping the wall time', () => {
+    expect(localPartsToDateValue('2026-07-06', '16:04:55', 'America/New_York')).toBe(
+      '2026-07-06T16:04:55-04:00'
     )
-  })
-
-  it('accepts HH:mm times, defaulting seconds to zero', () => {
-    expect(localPartsToDateValue('2026-07-06', '16:04')).toBe(
-      new Date(2026, 6, 6, 16, 4, 0).toISOString()
+    expect(localPartsToDateValue('2026-07-09', '16:04:55', 'America/New_York')).toBe(
+      '2026-07-09T16:04:55-04:00'
+    )
+    expect(localPartsToDateValue('2026-07-06', '16:04', 'America/New_York')).toBe(
+      '2026-07-06T16:04:00-04:00'
     )
   })
 
   it('returns null parts for unparseable values', () => {
     expect(dateValueToLocalParts('garbage')).toEqual({ day: null, time: null })
     expect(dateValueToLocalParts('')).toEqual({ day: null, time: null })
   })
-
-  it('reads and recombines parts in an explicit IANA zone', () => {
-    const stored = '2026-07-06T20:04:55.000Z'
-    const parts = dateValueToLocalParts(stored, 'America/New_York')
-    expect(parts).toEqual({ day: '2026-07-06', time: '16:04:55' })
-    expect(localPartsToDateValue(parts.day as string, parts.time, 'America/New_York')).toBe(stored)
-  })
-})
-
-describe('timezone-aware display round-trip', () => {
-  it('parses and renders wall times in the effective zone, not the runtime zone', () => {
-    const zone = 'America/New_York'
-    const stored = displayToStorage('07/06/2026 4:04:55 PM', zone)
-    expect(stored).toBe('2026-07-06T20:04:55.000Z')
-    expect(storageToDisplay(stored as string, { seconds: true, timeZone: zone })).toBe(
-      '07/06/2026 4:04:55 PM'
-    )
-  })
 })
 
 describe('displayToStorage', () => {
@@ -70,22 +58,25 @@ describe('displayToStorage', () => {
     expect(displayToStorage('7/6')).toBe(`${new Date().getFullYear()}-07-06`)
   })
 
-  it('parses M/D/YYYY with a time to a local-zone UTC instant', () => {
-    expect(displayToStorage('07/06/2026 4:04 PM')).toBe(
-      new Date(2026, 6, 6, 16, 4, 0).toISOString()
+  it('parses M/D/YYYY with a time to a wall time stamped with the given zone', () => {
+    expect(displayToStorage('07/06/2026 4:04 PM', 'America/New_York')).toBe(
+      '2026-07-06T16:04:00-04:00'
+    )
+    expect(displayToStorage('07/06/2026 4:04:55 PM', 'America/New_York')).toBe(
+      '2026-07-06T16:04:55-04:00'
     )
-    expect(displayToStorage('07/06/2026 4:04:55 PM')).toBe(
-      new Date(2026, 6, 6, 16, 4, 55).toISOString()
+    expect(displayToStorage('07/06/2026 16:04', 'America/New_York')).toBe(
+      '2026-07-06T16:04:00-04:00'
     )
-    expect(displayToStorage('07/06/2026 16:04')).toBe(new Date(2026, 6, 6, 16, 4, 0).toISOString())
-    expect(displayToStorage('07/06/2026 12:00 AM')).toBe(
-      new Date(2026, 6, 6, 0, 0, 0).toISOString()
+    expect(displayToStorage('07/06/2026 12:00 AM', 'America/New_York')).toBe(
+      '2026-07-06T00:00:00-04:00'
     )
   })
 
-  it('passes canonical instants and offset strings through Date.parse exactly', () => {
-    expect(displayToStorage('2026-07-06T23:04:55.000Z')).toBe('2026-07-06T23:04:55.000Z')
-    expect(displayToStorage('2026-07-06 16:04:55 PDT')).toBe('2026-07-06T23:04:55.000Z')
+  it('preserves the wall time and offset of canonical and offset strings', () => {
+    expect(displayToStorage('2026-07-06T16:04:55-07:00')).toBe('2026-07-06T16:04:55-07:00')
+    expect(displayToStorage('2026-07-06T23:04:55.000Z')).toBe('2026-07-06T23:04:55Z')
+    expect(displayToStorage('2026-07-06 16:04:55 PDT')).toBe('2026-07-06T16:04:55-07:00')
   })
 
   it('rejects invalid dates and times', () => {
@@ -102,18 +93,28 @@ describe('storageToDisplay', () => {
     expect(storageToDisplay('2026-07-06')).toBe('07/06/2026')
   })
 
-  it('round-trips an instant through the editor draft format', () => {
-    const stored = new Date(2026, 6, 6, 16, 4, 55).toISOString()
+  it('renders the literal wall time identically regardless of viewer or offset', () => {
+    expect(storageToDisplay('2026-07-06T16:04:55-07:00', { seconds: true })).toBe(
+      '07/06/2026 4:04:55 PM'
+    )
+    expect(storageToDisplay('2026-07-06T16:04:55+09:00', { seconds: true })).toBe(
+      '07/06/2026 4:04:55 PM'
+    )
+  })
+
+  it('round-trips an instant through the editor draft format without shifting', () => {
+    const stored = displayToStorage('07/06/2026 4:04:55 PM', 'America/New_York') as string
     const draft = storageToDisplay(stored, { seconds: true })
-    expect(displayToStorage(draft)).toBe(stored)
+    expect(draft).toBe('07/06/2026 4:04:55 PM')
+    expect(displayToStorage(draft, 'America/New_York')).toBe(stored)
   })
 })
 
 describe('cleanCellValue', () => {
   it('normalizes date cells to canonical storage', () => {
     const column = { name: 'due', type: 'date' } as const
     expect(cleanCellValue('07/06/2026', column)).toBe('2026-07-06')
-    expect(cleanCellValue('2026-07-06T23:04:55.000Z', column)).toBe('2026-07-06T23:04:55.000Z')
+    expect(cleanCellValue('2026-07-06T16:04:55-07:00', column)).toBe('2026-07-06T16:04:55-07:00')
     expect(cleanCellValue('nope', column)).toBeNull()
     expect(cleanCellValue('', column)).toBeNull()
   })
@@ -127,7 +128,9 @@ describe('cleanCellValue', () => {
 describe('formatValueForInput', () => {
   it('gives editors the canonical value, surfacing legacy UTC midnights as calendar days', () => {
     expect(formatValueForInput('2026-07-06T00:00:00.000Z', 'date')).toBe('2026-07-06')
-    expect(formatValueForInput('2026-07-06T23:04:55.000Z', 'date')).toBe('2026-07-06T23:04:55.000Z')
+    expect(formatValueForInput('2026-07-06T16:04:55-07:00', 'date')).toBe(
+      '2026-07-06T16:04:55-07:00'
+    )
     expect(formatValueForInput('2026-07-06', 'date')).toBe('2026-07-06')
   })
 })

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/utils.ts

@@ -93,35 +93,35 @@ export function formatValueForInput(value: unknown, type: string): string {
   return String(value)
 }
 
-/** A canonical date-cell value split into viewer-local editing parts. */
+/** A canonical date-cell value split into its wall-clock editing parts. */
 export interface DateCellLocalParts {
-  /** Local calendar day `YYYY-MM-DD`, or null when the value is unparseable. */
+  /** Calendar day `YYYY-MM-DD`, or null when the value is unparseable. */
   day: string | null
-  /** Local time-of-day `HH:mm:ss`, or null for calendar-date values. */
+  /** Time-of-day `HH:mm:ss`, or null for calendar-date values. */
   time: string | null
 }
 
 /**
  * Splits a canonical date-cell value into the day and time the date/time
- * pickers edit, read in the given IANA zone (the viewer's effective
- * timezone; runtime-local when omitted). Calendar dates have no time part.
+ * pickers edit — the value's **literal wall time**, no timezone conversion
+ * (display and editing are wall-clock-faithful for every viewer). Calendar
+ * dates have no time part; legacy strings normalize first.
  */
-export function dateValueToLocalParts(value: string, timeZone?: string): DateCellLocalParts {
+export function dateValueToLocalParts(value: string): DateCellLocalParts {
   if (/^\d{4}-\d{2}-\d{2}$/.test(value)) return { day: value, time: null }
-  const ms = Date.parse(value)
-  if (Number.isNaN(ms)) return { day: null, time: null }
-  const wall = getWallClockParts(new Date(ms), timeZone)
-  const pad = (n: number) => String(n).padStart(2, '0')
-  return {
-    day: `${wall.year}-${pad(wall.month)}-${pad(wall.day)}`,
-    time: `${pad(wall.hour)}:${pad(wall.minute)}:${pad(wall.second)}`,
-  }
+  const wall = value.match(
+    /^(\d{4}-\d{2}-\d{2})T(\d{2}:\d{2})(?::(\d{2}))?(?:\.\d+)?(?:Z|[+-]\d{2}:?\d{2})?$/
+  )
+  if (wall) return { day: wall[1], time: `${wall[2]}:${wall[3] ?? '00'}` }
+  const canonical = normalizeDateCellValue(value)
+  if (!canonical || canonical === value) return { day: null, time: null }
+  return dateValueToLocalParts(canonical)
 }
 
 /**
  * Recombines picker-edited parts into a canonical date-cell value: a calendar
- * date when there is no time, else the UTC instant of that wall time in the
- * given zone (runtime-local when omitted).
+ * date when there is no time, else that wall time stamped with the given
+ * zone's offset (runtime-local when omitted).
  */
 export function localPartsToDateValue(day: string, time: string | null, timeZone?: string): string {
   if (!time) return day
@@ -137,23 +137,20 @@ export function todayLocalCalendarDate(timeZone?: string): string {
 
 /**
  * Format a stored date-cell value for display: calendar dates as MM/DD/YYYY,
- * instants in the viewer's effective timezone as MM/DD/YYYY h:mm AM/PM. Pass
- * `seconds: true` for editor drafts so re-saving an untouched cell keeps
- * second precision.
+ * instants as their literal wall time `MM/DD/YYYY h:mm AM/PM` — identical
+ * for every viewer. Pass `seconds: true` for editor drafts so re-saving an
+ * untouched cell keeps second precision.
  */
-export function storageToDisplay(
-  stored: string,
-  options?: { seconds?: boolean; timeZone?: string }
-): string {
+export function storageToDisplay(stored: string, options?: { seconds?: boolean }): string {
   return formatDateCellDisplay(stored, options)
 }
 
 /**
  * Parse a date-cell input string to its canonical storage form: `YYYY-MM-DD`
- * for date-only inputs (MM/DD/YYYY, MM/DD, ISO), a UTC ISO instant for inputs
- * carrying a time. Naive times are interpreted in `timeZone` (the viewer's
- * effective timezone; the runtime's zone when omitted). Returns null when
- * unparseable.
+ * for date-only inputs (MM/DD/YYYY, MM/DD, ISO), an offset-preserved instant
+ * for inputs carrying a time. Naive times are stamped with the offset of
+ * `timeZone` (the writer's effective timezone; the runtime's zone when
+ * omitted). Returns null when unparseable.
  */
 export function displayToStorage(display: string, timeZone?: string): string | null {
   const trimmed = display.trim()