pingdotgg · juliusmarminge · Sep 22, 2026
diff --git a/apps/web/src/components/device/DeviceToolsPanel.tsx b/apps/web/src/components/device/DeviceToolsPanel.tsx
@@ -493,7 +493,8 @@ function SubmitRow(props: {
     >
       <Input
         size="compact"
-        className="min-w-0 flex-1 font-mono"
+        font="mono"
+        className="min-w-0 flex-1"
         placeholder={props.placeholder}
         value={value}
         disabled={props.disabled}
@@ -530,7 +531,8 @@ function LocationSection(props: {
       <div className="flex gap-1.5">
         <Input
           size="compact"
-          className="min-w-0 flex-1 font-mono"
+          font="mono"
+          className="min-w-0 flex-1"
           placeholder="Latitude"
           inputMode="decimal"
           value={latitude}
@@ -539,7 +541,8 @@ function LocationSection(props: {
         />
         <Input
           size="compact"
-          className="min-w-0 flex-1 font-mono"
+          font="mono"
+          className="min-w-0 flex-1"
           placeholder="Longitude"
           inputMode="decimal"
           value={longitude}
@@ -619,7 +622,7 @@ function PermissionsSection(props: {
     <Section title="Permissions">
       <Input
         size="compact"
-        className="font-mono"
+        font="mono"
         placeholder={props.defaultAppId || "App ID"}
         value={appId}
         disabled={props.disabled}

diff --git a/apps/web/src/components/settings/CustomModelEditor.tsx b/apps/web/src/components/settings/CustomModelEditor.tsx
@@ -154,7 +154,8 @@ export function CustomModelEditor({
         value={choice.id}
         onChange={(event) => updateChoice(descriptor.key, choice.key, { id: event.target.value })}
         placeholder="value"
-        className="w-28 font-mono"
+        font="mono"
+        className="w-28"
         spellCheck={false}
         aria-label="Choice value"
       />
@@ -230,7 +231,8 @@ export function CustomModelEditor({
             value={descriptor.id}
             onChange={(event) => updateDescriptor(descriptor.key, { id: event.target.value })}
             placeholder="optionId"
-            className="w-36 font-mono"
+            font="mono"
+            className="w-36"
             spellCheck={false}
             aria-label="Option id"
           />

diff --git a/apps/web/src/components/settings/KeybindingsSettings.tsx b/apps/web/src/components/settings/KeybindingsSettings.tsx
@@ -320,7 +320,7 @@ function WhenVariableSelect({
 
   return (
     <Select value={value} onValueChange={(nextValue) => nextValue && onChange(nextValue)}>
-      <SelectTrigger size="compact" className="min-w-0 flex-1 font-mono">
+      <SelectTrigger size="compact" className="min-w-0 flex-1" font="mono">
         <SelectValue placeholder="Condition" className="leading-7" />
         {unknownIdentifiers && unknownIdentifiers.length > 0 ? (
           <UnknownWhenVariableWarning identifiers={unknownIdentifiers} focusable={false} />
@@ -336,7 +336,8 @@ function WhenVariableSelect({
           <SelectItem
             key={option}
             value={option}
-            className="min-h-7 w-full py-1 font-mono text-[12px]"
+            className="min-h-7 w-full py-1 text-[12px]"
+            font="mono"
           >
             <span className="truncate">{option}</span>
           </SelectItem>
@@ -546,10 +547,10 @@ function WhenExpressionNodeEditor({
             popupClassName="w-fit"
             className="w-fit min-w-24"
           >
-            <SelectItem value="and" className="min-h-7 py-1 font-mono text-[12px]">
+            <SelectItem value="and" className="min-h-7 py-1 text-[12px]" font="mono">
               and
             </SelectItem>
-            <SelectItem value="or" className="min-h-7 py-1 font-mono text-[12px]">
+            <SelectItem value="or" className="min-h-7 py-1 text-[12px]" font="mono">
               or
             </SelectItem>
           </SelectContent>
@@ -877,7 +878,8 @@ function KeybindingKeyControl({
           value={isRecording ? "" : keyDraft}
           placeholder={isRecording ? "Press shortcut" : "Unassigned"}
           size="sm"
-          className={cn("w-44 font-mono", isRecording && "border-primary/70 bg-primary/5")}
+          font="mono"
+          className={cn("w-44", isRecording && "border-primary/70 bg-primary/5")}
           onFocus={() => setDraft({ isRecording: true })}
           onBlur={() => setDraft({ isRecording: false })}
           onChange={(event) => setDraft({ keyDraft: event.currentTarget.value })}
@@ -1190,7 +1192,8 @@ function NewKeybindingKeyInput({
       value={draft.isRecording ? "" : draft.keyDraft}
       placeholder={draft.isRecording ? "Press shortcut" : "Unassigned"}
       size="sm"
-      className={cn("font-mono", draft.isRecording && "border-primary/70 bg-primary/5", className)}
+      font="mono"
+      className={cn(draft.isRecording && "border-primary/70 bg-primary/5", className)}
       onFocus={() => draft.setDraft({ isRecording: true })}
       onBlur={() => draft.setDraft({ isRecording: false })}
       onChange={(event) => draft.setDraft({ keyDraft: event.currentTarget.value })}

diff --git a/apps/web/src/components/settings/ProviderAccentColorPicker.tsx b/apps/web/src/components/settings/ProviderAccentColorPicker.tsx
@@ -56,7 +56,8 @@ function ProviderCustomColorPanel(props: {
             props.onCommit(nextColor);
           }}
           onBlur={() => setHexDraft(null)}
-          className="font-mono text-xs"
+          font="mono"
+          className="text-xs"
           aria-label="Custom hex accent color"
           spellCheck={false}
         />

diff --git a/apps/web/src/components/settings/ProviderInstanceCard.tsx b/apps/web/src/components/settings/ProviderInstanceCard.tsx
@@ -268,7 +268,8 @@ function ProviderEnvironmentSection(props: {
             <div key={variable.id} className="flex min-w-0 flex-wrap items-center gap-1.5">
               <DraftInput
                 size="sm"
-                className="w-full min-w-0 font-mono sm:w-44 sm:shrink-0"
+                font="mono"
+                className="w-full min-w-0 sm:w-44 sm:shrink-0"
                 value={variable.name}
                 onCommit={(name) => updateVariable(variable.id, { name: name.trim() })}
                 placeholder="VARIABLE_NAME"
@@ -280,7 +281,8 @@ function ProviderEnvironmentSection(props: {
               </span>
               <DraftInput
                 size="sm"
-                className="min-w-0 flex-1 font-mono"
+                font="mono"
+                className="min-w-0 flex-1"
                 value={variable.valueRedacted ? "" : variable.value}
                 onCommit={(value) => updateVariable(variable.id, { value })}
                 type={variable.sensitive ? "password" : undefined}

diff --git a/apps/web/src/components/settings/ThemeColorPicker.tsx b/apps/web/src/components/settings/ThemeColorPicker.tsx
@@ -353,7 +353,8 @@ export const ThemeColorField = memo(function ThemeColorField({
         <Input
           aria-invalid={!isColorValue}
           aria-label={`${label} hex value`}
-          className="w-28 shrink-0 rounded-md border-0 bg-black/10 font-mono text-xs text-foreground shadow-none focus-within:bg-black/15 focus-within:ring-0 dark:bg-black/20 dark:focus-within:bg-black/25 [&_[data-slot=input]]:text-right"
+          className="w-28 shrink-0 rounded-md border-0 bg-black/10 text-xs text-foreground shadow-none focus-within:bg-black/15 focus-within:ring-0 dark:bg-black/20 dark:focus-within:bg-black/25 [&_[data-slot=input]]:text-right"
+          font="mono"
           id={`${role}-hex`}
           nativeInput
           onChange={(event) => onChange(role, event.currentTarget.value)}

diff --git a/apps/web/src/components/ui/input.tsx b/apps/web/src/components/ui/input.tsx
@@ -7,13 +7,16 @@ import { cn } from "~/lib/utils";
 
 type InputProps = Omit<InputPrimitive.Props & React.RefAttributes<HTMLInputElement>, "size"> & {
   size?: "sm" | "compact" | "default" | "lg" | number;
+  /** Monospace with tabular digits, for paths, commands, colors and numbers. */
+  font?: "default" | "mono";
   unstyled?: boolean;
   nativeInput?: boolean;
 };
 
 function Input({
   className,
   size = "default",
+  font = "default",
   unstyled = false,
   nativeInput = false,
   ...props
@@ -63,6 +66,7 @@ function Input({
           !unstyled &&
             size === "compact" &&
             "rounded-md before:rounded-[calc(var(--radius-md)-1px)]",
+          font === "mono" && "font-mono tabular-nums",
           className,
         ) || undefined
       }

diff --git a/apps/web/src/components/ui/select.tsx b/apps/web/src/components/ui/select.tsx
@@ -22,6 +22,10 @@ const selectTriggerVariants = cva(
         ghost:
           "border-transparent text-secondary-label focus-visible:ring-2 focus-visible:ring-ring data-pressed:bg-accent [:hover,[data-pressed]]:bg-accent [:hover,[data-pressed]]:text-foreground",
       },
+      font: {
+        default: "",
+        mono: "font-mono tabular-nums",
+      },
       size: {
         compact:
           "h-7 gap-1 rounded-md px-[calc(--spacing(2)-1px)] text-xs before:rounded-[calc(var(--radius-md)-1px)] [&_svg:not([class*='size-'])]:size-3.5",
@@ -38,14 +42,15 @@ function SelectTrigger({
   className,
   size = "default",
   variant = "default",
+  font = "default",
   children,
   icon,
   ...props
 }: SelectPrimitive.Trigger.Props &
   VariantProps<typeof selectTriggerVariants> & { icon?: React.ReactNode }) {
   return (
     <SelectPrimitive.Trigger
-      className={cn(selectTriggerVariants({ size, variant }), className)}
+      className={cn(selectTriggerVariants({ font, size, variant }), className)}
       data-slot="select-trigger"
       {...props}
     >
@@ -141,15 +146,18 @@ function SelectPopup({
 function SelectItem({
   className,
   children,
+  font = "default",
   hideIndicator: _hideIndicator = false,
   ...props
 }: SelectPrimitive.Item.Props & {
+  font?: "default" | "mono";
   hideIndicator?: boolean;
 }) {
   return (
     <SelectPrimitive.Item
       className={cn(
         "flex min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-pointer items-center rounded-sm px-2 py-1 text-base outline-none data-selected:bg-foreground/[0.08] data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        font === "mono" && "font-mono tabular-nums",
         className,
       )}
       data-slot="select-item"

diff --git a/apps/web/src/components/usage/UsagePriceOverrides.tsx b/apps/web/src/components/usage/UsagePriceOverrides.tsx
@@ -429,7 +429,7 @@ export function UsagePriceOverrides({
                                     }
                                     autoComplete="off"
                                     disabled={locked}
-                                    className="tabular-nums"
+                                    font="mono"
                                     onChange={(event) =>
                                       editCell(row, field.key, event.target.value)
                                     }

diff --git a/scripts/lint-restyle-ceiling.ts b/scripts/lint-restyle-ceiling.ts
@@ -8,7 +8,7 @@ import * as NodeURL from "node:url";
 // components/ui exports are migrated to variants (see vite.config.ts). This gate keeps the
 // count from growing: CI fails when findings exceed the ceiling. Lower the ceiling when you
 // migrate a file, and delete this script when the rule becomes an error.
-export const RESTYLE_CEILING = 1106;
+export const RESTYLE_CEILING = 1089;
 
 const RULE = "shadcn(no-restyle)";