fix(tables): address audit findings across the column-type change

Range filters were the live bug. `buildComparisonClause` fell through to
`?? 'numeric'` for every type whose `jsonbCast` is null but whose id is not
literally 'string', so `>=` on an email/phone/url column emitted
`(data->>'email')::numeric` — a Postgres error on the first non-numeric row,
500ing the whole rows query. Types now declare `orderable`, and a null cast
means text comparison for every type rather than only for `string`.

Date truncation was unsafe twice over. `.slice(0, 10)` assumed a four-digit
year, but the canonical form does not pad it: `0001-01-01T00:00:00Z` (.NET's
DateTime.MinValue, routine in exported CSVs) normalized to `1-01-01T00:00:00Z`
and sliced to `1-01-01T00`, which coerce accepted and validateCell then
rejected. Years are padded at the source and truncation is anchored on a
`YYYY-MM-DD` match. The set-based migration gained the same guard: legacy
columns can hold unparseable strings like `March 5, 2024`, and `left(…, 10)`
would have rewritten them to `March 5, 2` irreversibly.

Precision no longer defaults. Stamping 0 rounded every new percent column in
the grid AND in CSV export (12.5 exporting as 13%), and rode back onto a
number column through a number → percent → number round-trip. Absent keeps
meaning "render as stored" for both owners.

Also: url read `example.com:8080`'s host as a scheme and nulled the cell;
duration rewrote 90.7 to 91 when an editor merely opened and closed; phone
turned a negative number positive; the color picker put raw buttons inside a
role=menu, so it never closed on select and had no keyboard navigation;
`updateColumnMetadata` could let defaultMetadata introduce a key the caller
never sent, wiping times off a legacy date column.

Consolidation: the v2 predicate grammar now asks the registry for its operator
allowlist (it had a private copy, so a restricted type was gated on one wire
shape and not the other); sort-by-label, filter value coercion, filter
pruning, the filter UI, and the grid's dirty check read `storesOpaqueIds` /
`storesMultipleValues` instead of naming `select`; the expanded popover
formats every type through `formatForDisplay` rather than only date and
currency; `formatValueForInput` takes the column instead of synthesizing one
and dropping its metadata.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-config-sidebar.tsx

@@ -131,8 +131,15 @@ function ColumnConfigBody({
       ? resolveCurrencyCode(existingColumn?.currencyCode)
       : DEFAULT_CURRENCY_CODE
   )
-  const [precisionInput, setPrecisionInput] = useState<number>(() =>
-    clampPrecision(existingColumn?.precision)
+  // The RAW string, not a number. A numeric state round-tripped through
+  // `Number()` on every keystroke cannot be cleared (`'' → 0`) and clamps
+  // mid-typing (`1`, then `2` → `10`, never `12`). Parsing happens on commit,
+  // matching `usage-limit-field`. Empty means "no precision declared", which is
+  // what keeps a column rendering its values as stored.
+  const [precisionInput, setPrecisionInput] = useState<string>(() =>
+    config.mode === 'edit' && existingColumn?.precision !== undefined
+      ? String(existingColumn.precision)
+      : ''
   )
   const [includeTimeInput, setIncludeTimeInput] = useState<boolean>(() =>
     // Absent means a column created before the key existed, and those hold
@@ -151,6 +158,10 @@ function ColumnConfigBody({
   // type that loses it cannot leave a stale control behind.
   const wantsCurrency = typeOwnsMetadataKey(typeInput, 'currencyCode')
   const wantsPrecision = typeOwnsMetadataKey(typeInput, 'precision')
+  // `undefined` (blank field) is meaningful: it leaves the column rendering
+  // values exactly as stored rather than forcing a decimal count.
+  const parsedPrecision =
+    precisionInput.trim() === '' ? undefined : clampPrecision(Number(precisionInput))
   const wantsIncludeTime = typeOwnsMetadataKey(typeInput, 'includeTime')
   const trimmedOptions = optionsInput.map((o) => ({ ...o, name: o.name.trim() }))
 
@@ -186,7 +197,9 @@ function ColumnConfigBody({
           ...(wantsOptions ? { options: trimmedOptions } : {}),
           ...(wantsOptions && multipleInput ? { multiple: true } : {}),
           ...(wantsCurrency ? { currencyCode: currencyInput } : {}),
-          ...(wantsPrecision ? { precision: precisionInput } : {}),
+          ...(wantsPrecision && parsedPrecision !== undefined
+            ? { precision: parsedPrecision }
+            : {}),
           ...(wantsIncludeTime ? { includeTime: includeTimeInput } : {}),
         })
         toast.success(`Added "${trimmedName}"`)
@@ -208,8 +221,7 @@ function ColumnConfigBody({
       const multipleChanged = wantsOptions && !!existingColumn?.multiple !== multipleInput
       const currencyChanged =
         wantsCurrency && resolveCurrencyCode(existingColumn?.currencyCode) !== currencyInput
-      const precisionChanged =
-        wantsPrecision && clampPrecision(existingColumn?.precision) !== precisionInput
+      const precisionChanged = wantsPrecision && existingColumn?.precision !== parsedPrecision
       const includeTimeChanged =
         wantsIncludeTime && (existingColumn?.includeTime !== false) !== includeTimeInput
 
@@ -232,8 +244,8 @@ function ColumnConfigBody({
         ...(wantsCurrency && (typeChanged || currencyChanged)
           ? { currencyCode: currencyInput }
           : {}),
-        ...(wantsPrecision && (typeChanged || precisionChanged)
-          ? { precision: precisionInput }
+        ...(wantsPrecision && (typeChanged || precisionChanged) && parsedPrecision !== undefined
+          ? { precision: parsedPrecision }
           : {}),
         ...(wantsIncludeTime && (typeChanged || includeTimeChanged)
           ? { includeTime: includeTimeInput }
@@ -339,14 +351,17 @@ function ColumnConfigBody({
           <>
             <FieldDivider />
             <div className='flex flex-col gap-[9.5px]'>
-              <RequiredLabel>Decimal places</RequiredLabel>
+              <RequiredLabel htmlFor='column-sidebar-precision'>Decimal places</RequiredLabel>
               <ChipInput
+                id='column-sidebar-precision'
                 type='number'
                 inputMode='numeric'
                 min={DEFAULT_PRECISION.min}
                 max={DEFAULT_PRECISION.max}
-                value={String(precisionInput)}
-                onChange={(e) => setPrecisionInput(clampPrecision(Number(e.target.value)))}
+                value={precisionInput}
+                onChange={(e) => setPrecisionInput(e.target.value)}
+                placeholder='As stored'
+                inputClassName='[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none'
               />
             </div>
           </>

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

@@ -18,8 +18,7 @@ import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
 import { useParams } from 'next/navigation'
 import type { ColumnDefinition, TableInfo, TableRow } from '@/lib/table'
-import { columnTypeOf } from '@/lib/table/column-types'
-import { resolveCurrencyCode } from '@/lib/table/currency'
+import { columnTypeOf, describeColumnType } from '@/lib/table/column-types'
 import { useTimezone } from '@/hooks/queries/general-settings'
 import { useDeleteTableRow, useDeleteTableRows, useUpdateTableRow } from '@/hooks/queries/tables'
 import {
@@ -211,13 +210,11 @@ function ColumnField({ column, value, onChange }: ColumnFieldProps) {
       )}
     </>
   )
-  // Currency names its code — the modal edits the bare amount, so without it
-  // there is nothing on screen saying which currency the number is in.
-  const typeLabel =
-    column.type === 'currency'
-      ? `currency (${resolveCurrencyCode(column.currencyCode)})`
-      : column.type
-  const hint = `Type: ${typeLabel}${column.required ? '' : ' (optional)'}`
+  // The type's own description, which folds in the configuration that changes
+  // what a cell means — a currency's code, a date's time, a number's decimals.
+  // This also reads the registry's LABEL rather than the raw id, so the hint
+  // says "Text" and not "string".
+  const hint = `Type: ${describeColumnType(column)}${column.required ? '' : ' (optional)'}`
   const definition = columnTypeOf(column)
 
   if (definition.editor === 'toggle') {
@@ -251,7 +248,7 @@ function ColumnField({ column, value, onChange }: ColumnFieldProps) {
         required={column.required}
         hint={hint}
         mono
-        value={formatValueForInput(value, column.type)}
+        value={formatValueForInput(value, column)}
         onChange={onChange}
         placeholder='{"key": "value"}'
         rows={4}
@@ -260,7 +257,12 @@ function ColumnField({ column, value, onChange }: ColumnFieldProps) {
   }
 
   if (definition.editor === 'date') {
-    const parts = dateValueToLocalParts(formatValueForInput(value, 'date'))
+    const parts = dateValueToLocalParts(formatValueForInput(value, column))
+    // A date-only column must not offer a time the write path is going to
+    // truncate. `includeTime` absent means a column predating the key, which
+    // still stores instants — so only an explicit false drops the picker,
+    // matching `date.coerce`.
+    const withTime = column.includeTime !== false
     return (
       <ChipModalField type='custom' title={title} required={column.required} hint={hint}>
         <div className='flex items-center gap-2'>
@@ -272,17 +274,23 @@ function ColumnField({ column, value, onChange }: ColumnFieldProps) {
             flush
             className='flex-1'
           />
-          <ChipTimePicker
-            value={parts.time?.slice(0, 5)}
-            onChange={(time) =>
-              onChange(
-                localPartsToDateValue(parts.day ?? todayLocalCalendarDate(timeZone), time, timeZone)
-              )
-            }
-            placeholder='Add time'
-            flush
-            className='w-[110px]'
-          />
+          {withTime && (
+            <ChipTimePicker
+              value={parts.time?.slice(0, 5)}
+              onChange={(time) =>
+                onChange(
+                  localPartsToDateValue(
+                    parts.day ?? todayLocalCalendarDate(timeZone),
+                    time,
+                    timeZone
+                  )
+                )
+              }
+              placeholder='Add time'
+              flush
+              className='w-[110px]'
+            />
+          )}
         </div>
       </ChipModalField>
     )
@@ -308,7 +316,7 @@ function ColumnField({ column, value, onChange }: ColumnFieldProps) {
       inputType={
         definition.inputMode === 'decimal' && !definition.acceptsFormattedInput ? 'number' : 'text'
       }
-      value={formatValueForInput(value, column.type)}
+      value={formatValueForInput(value, column)}
       onChange={onChange}
       placeholder={`Enter ${column.name}`}
     />

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-color-picker.tsx

@@ -1,6 +1,13 @@
 'use client'
 
-import { Badge, DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@sim/emcn'
+import {
+  Badge,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from '@sim/emcn'
 import { SELECT_OPTION_COLORS, type SelectOptionColor } from '@/lib/table'
 
 interface SelectColorPickerProps {
@@ -10,38 +17,50 @@ interface SelectColorPickerProps {
   optionName: string
 }
 
+/** Sentence-cased for display; the stored value stays the lowercase token. */
+function labelFor(color: SelectOptionColor): string {
+  return color.charAt(0).toUpperCase() + color.slice(1)
+}
+
 /**
- * Swatch dropdown for one option's pill color.
+ * Colour picker for one option's pill.
+ *
+ * A named list rather than a bare swatch grid, for two reasons. Colour is then
+ * not the only signal — the name is readable when the swatches are not
+ * distinguishable to the viewer — and it lets the menu use the real
+ * `DropdownMenuRadioItem` primitive: mutually exclusive `menuitemradio`
+ * semantics, roving focus and typeahead, a visible selected indicator, and
+ * close-on-select. Raw `<button>`s inside a `role="menu"` get none of that, and
+ * notably leave the menu open after a pick.
  *
- * Each swatch is a real `Badge` in the variant it selects, so the menu shows the
- * exact chrome the pill will have in both themes rather than an approximation
- * of it — the badge stays the single owner of its colors.
+ * Each swatch is a real `Badge` in the variant it selects, so the menu shows
+ * the exact chrome the pill will have in both themes — the badge stays the one
+ * owner of its colours.
  */
 export function SelectColorPicker({ color, onChange, optionName }: SelectColorPickerProps) {
   const current = color ?? 'gray'
   return (
     <DropdownMenu>
       <DropdownMenuTrigger
-        className='size-7 shrink-0 rounded-md p-1'
-        aria-label={`Color for ${optionName || 'option'}`}
+        className='flex size-7 shrink-0 items-center justify-center'
+        aria-label={`Color for ${optionName || 'option'}: ${labelFor(current)}`}
       >
-        <Badge variant={current} size='sm' className='size-full justify-center p-0'>
-          <span className='sr-only'>{current}</span>
-        </Badge>
+        <Badge variant={current} size='swatch' />
       </DropdownMenuTrigger>
-      <DropdownMenuContent align='end' className='grid grid-cols-5 gap-1 p-1.5'>
-        {SELECT_OPTION_COLORS.map((swatch) => (
-          <button
-            key={swatch}
-            type='button'
-            onClick={() => onChange(swatch)}
-            aria-label={swatch}
-            aria-pressed={swatch === current}
-            className='rounded-md p-0.5 transition-colors hover-hover:bg-[var(--surface-5)]'
-          >
-            <Badge variant={swatch} size='sm' className='size-5 justify-center p-0' />
-          </button>
-        ))}
+      <DropdownMenuContent align='start' className='min-w-[160px]'>
+        <DropdownMenuRadioGroup
+          value={current}
+          onValueChange={(next) => onChange(next as SelectOptionColor)}
+        >
+          {SELECT_OPTION_COLORS.map((swatch) => (
+            <DropdownMenuRadioItem key={swatch} value={swatch}>
+              <span className='flex items-center gap-2'>
+                <Badge variant={swatch} size='swatch' />
+                {labelFor(swatch)}
+              </span>
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
       </DropdownMenuContent>
     </DropdownMenu>
   )

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-options-editor.tsx

@@ -19,15 +19,18 @@ interface SelectOptionsEditorProps {
  * option and focus jumps into it so typing flows straight through.
  */
 export function SelectOptionsEditor({ options, onChange }: SelectOptionsEditorProps) {
-  const inputRefs = useRef<Map<string, HTMLInputElement>>(new Map())
+  // Lazy-init: `useRef(new Map())` allocates a Map on every render and throws
+  // all but the first away.
+  const inputRefs = useRef<Map<string, HTMLInputElement> | null>(null)
+  inputRefs.current ??= new Map()
   const trailingRef = useRef<HTMLInputElement>(null)
   const [pendingFocusId, setPendingFocusId] = useState<string | null>(null)
 
   // The new row and `pendingFocusId` land in the same commit, so the ref is
   // registered by the time this effect runs.
   useEffect(() => {
     if (!pendingFocusId) return
-    const el = inputRefs.current.get(pendingFocusId)
+    const el = inputRefs.current?.get(pendingFocusId)
     if (el) {
       el.focus()
       const end = el.value.length
@@ -41,7 +44,7 @@ export function SelectOptionsEditor({ options, onChange }: SelectOptionsEditorPr
   }
 
   const remove = (id: string) => {
-    inputRefs.current.delete(id)
+    inputRefs.current?.delete(id)
     onChange(options.filter((o) => o.id !== id))
   }
 
@@ -70,8 +73,8 @@ export function SelectOptionsEditor({ options, onChange }: SelectOptionsEditorPr
           />
           <ChipInput
             ref={(el) => {
-              if (el) inputRefs.current.set(option.id, el)
-              else inputRefs.current.delete(option.id)
+              if (el) inputRefs.current?.set(option.id, el)
+              else inputRefs.current?.delete(option.id)
             }}
             value={option.name}
             onChange={(e) => update(option.id, { name: e.target.value })}

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

@@ -6,6 +6,7 @@ import { Plus, X } from '@sim/emcn/icons'
 import { generateShortId } from '@sim/utils/id'
 import type { ColumnDefinition, FilterRule, TablePredicate } from '@/lib/table'
 import { getColumnId } from '@/lib/table/column-keys'
+import { columnTypeOf, storesMultipleValues } from '@/lib/table/column-types'
 import {
   COMPARISON_OPERATORS,
   MULTI_SELECT_FILTER_OPERATORS,
@@ -25,7 +26,19 @@ const MULTI_SELECT_COMPARISON_OPERATORS = COMPARISON_OPERATORS.filter((o) =>
 )
 
 function selectFilterOperators(column: ColumnDefinition | undefined): Set<string> {
-  return column?.multiple ? MULTI_SELECT_FILTER_OPERATORS : SINGLE_SELECT_FILTER_OPERATORS
+  return column && storesMultipleValues(column)
+    ? MULTI_SELECT_FILTER_OPERATORS
+    : SINGLE_SELECT_FILTER_OPERATORS
+}
+
+/**
+ * Whether a column's filter value is picked from a declared option set rather
+ * than typed. Asks the registry, so a future opaque-id type gets the dropdown
+ * and the restricted operator list instead of a free-text box and the full
+ * operator menu that the server would then reject.
+ */
+function picksFromOptions(column: ColumnDefinition | undefined): boolean {
+  return column ? columnTypeOf(column).storesOpaqueIds : false
 }
 
 interface TableFilterProps {
@@ -88,13 +101,13 @@ export function TableFilter({ columns, filter, onApply, onClose }: TableFilterPr
           if (r.id !== id) return r
           const previous = columnById.get(r.column)
           const next = columnById.get(columnId)
-          const wasSelect = previous?.type === 'select'
-          const isSelect = next?.type === 'select'
+          const wasSelect = picksFromOptions(previous)
+          const isSelect = picksFromOptions(next)
           if (!wasSelect && !isSelect) return { ...r, column: columnId }
           // Single- and multi-select take different operators, so a switch
           // between them has to fall back too, not just select ↔ non-select.
           const allowed = selectFilterOperators(next)
-          const fallback = next?.multiple ? 'contains' : 'eq'
+          const fallback = next && storesMultipleValues(next) ? 'contains' : 'eq'
           const operator = isSelect && !allowed.has(r.operator) ? fallback : r.operator
           return { ...r, column: columnId, operator, value: '' }
         })
@@ -204,17 +217,17 @@ const FilterRuleRow = memo(function FilterRuleRow({
       : columns
 
   const selectedColumn = columnById.get(rule.column)
-  const isSelect = selectedColumn?.type === 'select'
+  const isSelect = picksFromOptions(selectedColumn)
   const operatorOptions = !isSelect
     ? COMPARISON_OPERATORS
-    : selectedColumn?.multiple
+    : selectedColumn && storesMultipleValues(selectedColumn)
       ? MULTI_SELECT_COMPARISON_OPERATORS
       : SINGLE_SELECT_COMPARISON_OPERATORS
 
   // A stale id (option since deleted) stays selectable so the rule still shows.
   const selectValueOptions = isSelect
     ? (() => {
-        const opts = (selectedColumn.options ?? []).map((o) => ({ value: o.id, label: o.name }))
+        const opts = (selectedColumn?.options ?? []).map((o) => ({ value: o.id, label: o.name }))
         return rule.value && !opts.some((o) => o.value === rule.value)
           ? [...opts, { value: rule.value, label: rule.value }]
           : opts
@@ -297,8 +310,9 @@ function createRule(columns: ColumnDefinition[]): FilterRule {
     id: generateShortId(),
     logicalOperator: 'and',
     column: first ? getColumnId(first) : '',
-    // A multi-select can't be compared for equality — default it to membership.
-    operator: first?.type === 'select' && first.multiple ? 'contains' : 'eq',
+    // A multi-valued column can't be compared for equality — default it to
+    // membership.
+    operator: first && storesMultipleValues(first) ? 'contains' : 'eq',
     value: '',
   }
 }

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

@@ -150,8 +150,12 @@ export function resolveCellRender({
     case 'text':
       return { kind: 'text', text: cell.text }
     default: {
+      // Compile-time exhaustiveness gate. At RUNTIME an unrecognised kind must
+      // degrade to a blank cell — returning the value itself would hand a
+      // `CellRenderKind` switch a shape it has no arm for.
       const _exhaustive: never = cell
-      return _exhaustive
+      void _exhaustive
+      return { kind: 'empty' }
     }
   }
 }