From c7d8ae18bb0fe3834f27e1deb998a3a6bae92357 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 3 May 2026 22:54:31 +0000
Subject: [PATCH 1/5] Don't show fractional bytes in file size display

filesize's `pad: true` option pads results like "5 B" to "5.00 B", but
fractional bytes are nonsensical. Add a `formatBytes` wrapper that
suppresses padding when the unit is bytes, and use it in FileInput and
the image upload progress display.

Closes #3209
---
 app/forms/image-upload.tsx |  6 ++----
 app/ui/lib/FileInput.tsx   |  4 ++--
 app/util/units.spec.ts     | 30 ++++++++++++++++++++++++++++++
 app/util/units.ts          | 13 +++++++++++++
 4 files changed, 47 insertions(+), 6 deletions(-)
 create mode 100644 app/util/units.spec.ts

diff --git a/app/forms/image-upload.tsx b/app/forms/image-upload.tsx
index facc6b28ea..c14a554419 100644
--- a/app/forms/image-upload.tsx
+++ b/app/forms/image-upload.tsx
@@ -7,7 +7,6 @@
  */
 import { skipToken, useQuery } from '@tanstack/react-query'
 import cn from 'classnames'
-import { filesize } from 'filesize'
 import pMap from 'p-map'
 import pRetry from 'p-retry'
 import { useRef, useState } from 'react'
@@ -50,10 +49,9 @@ import { invariant } from '~/util/invariant'
 import { docLinks, links } from '~/util/links'
 import { pb } from '~/util/path-builder'
 import { isAllZeros } from '~/util/str'
-import { GiB, KiB } from '~/util/units'
+import { formatBytes, GiB, KiB } from '~/util/units'
 
-/** Format file size with two decimal points */
-const fsize = (bytes: number) => filesize(bytes, { base: 2, pad: true })
+const fsize = (bytes: number) => formatBytes(bytes, { pad: true })
 
 type FormValues = {
   imageName: string
diff --git a/app/ui/lib/FileInput.tsx b/app/ui/lib/FileInput.tsx
index 11b9c060c7..8fbaf40e9e 100644
--- a/app/ui/lib/FileInput.tsx
+++ b/app/ui/lib/FileInput.tsx
@@ -6,7 +6,6 @@
  * Copyright Oxide Computer Company
  */
 import cn from 'classnames'
-import { filesize } from 'filesize'
 import {
   useRef,
   useState,
@@ -20,6 +19,7 @@ import { mergeRefs } from 'react-merge-refs'
 import { Document16Icon, Error16Icon } from '@oxide/design-system/icons/react'
 
 import { Truncate } from '~/ui/lib/Truncate'
+import { formatBytes } from '~/util/units'
 
 export type FileInputProps = Omit<ComponentProps<'input'>, 'type' | 'onChange'> & {
   onChange: (f: File | null) => void
@@ -100,7 +100,7 @@ export function FileInput({
             <div className="text-raise flex items-center">
               <Truncate text={file.name} maxLength={32} position="middle" />
               <span className="text-tertiary ml-1">
-                ({filesize(file.size, { base: 2, pad: true })})
+                ({formatBytes(file.size, { pad: true })})
               </span>
               <button
                 type="button"
diff --git a/app/util/units.spec.ts b/app/util/units.spec.ts
new file mode 100644
index 0000000000..40423c1c3f
--- /dev/null
+++ b/app/util/units.spec.ts
@@ -0,0 +1,30 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+import { expect, it } from 'vitest'
+
+import { formatBytes, GiB, KiB, MiB } from './units'
+
+it.each([
+  // bytes: never padded (fractional bytes don't make sense)
+  [0, undefined, '0 B'],
+  [0, { pad: true }, '0 B'],
+  [5, undefined, '5 B'],
+  [5, { pad: true }, '5 B'],
+  [500, { pad: true }, '500 B'],
+  // fractional inputs are rounded to whole bytes
+  [2.5, { pad: true }, '3 B'],
+  [0.5, { pad: true }, '1 B'],
+  // KiB and larger: padded when requested
+  [KiB, undefined, '1 KiB'],
+  [KiB, { pad: true }, '1.00 KiB'],
+  [1500, { pad: true }, '1.46 KiB'],
+  [MiB, { pad: true }, '1.00 MiB'],
+  [GiB, { pad: true }, '1.00 GiB'],
+])('formatBytes(%d, %o) -> %s', (bytes, opts, expected) => {
+  expect(formatBytes(bytes, opts)).toEqual(expected)
+})
diff --git a/app/util/units.ts b/app/util/units.ts
index e88a5672a5..1e8e034e7c 100644
--- a/app/util/units.ts
+++ b/app/util/units.ts
@@ -5,6 +5,8 @@
  *
  * Copyright Oxide Computer Company
  */
+import { filesize } from 'filesize'
+
 import { round } from './math'
 
 export const KiB = 1024
@@ -14,3 +16,14 @@ export const TiB = 1024 * GiB
 
 export const bytesToGiB = (b: number, digits = 2) => round(b / GiB, digits)
 export const bytesToTiB = (b: number, digits = 2) => round(b / TiB, digits)
+
+/**
+ * Format a byte count for display, e.g. `1.50 KiB`. Always uses base 2 (binary
+ * units like KiB, MiB). When `pad` is true, scaled units get trailing zeros
+ * (e.g. `1.00 KiB`), but bytes never do — fractional bytes don't make sense.
+ */
+export function formatBytes(bytes: number, { pad = false }: { pad?: boolean } = {}) {
+  // peek at the unit so we can suppress padding for raw bytes
+  const { unit } = filesize(bytes, { base: 2, output: 'object' })
+  return filesize(bytes, { base: 2, pad: pad && unit !== 'B' })
+}

From df7931cfb8312fecff2c611d85463873ba4666ce Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Tue, 5 May 2026 14:22:27 -0500
Subject: [PATCH 2/5] use formatByes everywhere

---
 app/forms/disk-create.tsx                     |  5 ++--
 app/forms/image-from-snapshot.tsx             |  4 +--
 app/forms/image-upload.tsx                    |  2 +-
 app/pages/project/instances/InstancePage.tsx  |  5 ++--
 app/pages/project/instances/InstancesPage.tsx |  4 +--
 app/pages/system/inventory/sled/SledPage.tsx  |  4 +--
 app/table/cells/InstanceResourceCell.tsx      |  6 ++--
 app/table/columns/common.tsx                  |  5 ++--
 app/ui/lib/FileInput.tsx                      |  4 +--
 app/util/units.spec.ts                        | 30 +++++++++----------
 app/util/units.ts                             | 26 ++++++++++++----
 11 files changed, 51 insertions(+), 44 deletions(-)

diff --git a/app/forms/disk-create.tsx b/app/forms/disk-create.tsx
index b1f3b81f6f..2e8f182d43 100644
--- a/app/forms/disk-create.tsx
+++ b/app/forms/disk-create.tsx
@@ -6,7 +6,6 @@
  * Copyright Oxide Computer Company
  */
 import { useQuery } from '@tanstack/react-query'
-import { filesize } from 'filesize'
 import { useMemo } from 'react'
 import { useController, useForm, type Control } from 'react-hook-form'
 import { match } from 'ts-pattern'
@@ -43,7 +42,7 @@ import { TipIcon } from '~/ui/lib/TipIcon'
 import { toLocaleDateString } from '~/util/date'
 import { docLinks } from '~/util/links'
 import { diskSizeNearest10 } from '~/util/math'
-import { bytesToGiB, GiB } from '~/util/units'
+import { bytesToGiB, formatBytes, GiB } from '~/util/units'
 
 /**
  * Same as DiskSource but with image and snapshot ID optional, reflecting The
@@ -416,7 +415,7 @@ const SnapshotSelectField = ({ control }: { control: Control<DiskCreateForm> })
       label="Source snapshot"
       placeholder="Select a snapshot"
       items={snapshots.map((i) => {
-        const formattedSize = filesize(i.size, { base: 2, output: 'object' })
+        const formattedSize = formatBytes(i.size)
         return {
           value: i.id,
           selectedLabel: i.name,
diff --git a/app/forms/image-from-snapshot.tsx b/app/forms/image-from-snapshot.tsx
index 7c6f49acb8..b6f7767e88 100644
--- a/app/forms/image-from-snapshot.tsx
+++ b/app/forms/image-from-snapshot.tsx
@@ -5,7 +5,6 @@
  *
  * Copyright Oxide Computer Company
  */
-import { filesize } from 'filesize'
 import { useForm } from 'react-hook-form'
 import { useNavigate, type LoaderFunctionArgs } from 'react-router'
 
@@ -31,6 +30,7 @@ import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { docLinks } from '~/util/links'
 import { pb } from '~/util/path-builder'
 import type * as PP from '~/util/path-params'
+import { formatBytes } from '~/util/units'
 
 const defaultValues: Omit<ImageCreate, 'source'> = {
   name: '',
@@ -94,7 +94,7 @@ export default function CreateImageFromSnapshotSideModalForm() {
         <PropertiesTable.Row label="Snapshot">{data.name}</PropertiesTable.Row>
         <PropertiesTable.Row label="Project">{project}</PropertiesTable.Row>
         <PropertiesTable.Row label="Size">
-          {filesize(data.size, { base: 2 })}
+          {formatBytes(data.size).label}
         </PropertiesTable.Row>
       </PropertiesTable>
 
diff --git a/app/forms/image-upload.tsx b/app/forms/image-upload.tsx
index c14a554419..f0eda1a093 100644
--- a/app/forms/image-upload.tsx
+++ b/app/forms/image-upload.tsx
@@ -51,7 +51,7 @@ import { pb } from '~/util/path-builder'
 import { isAllZeros } from '~/util/str'
 import { formatBytes, GiB, KiB } from '~/util/units'
 
-const fsize = (bytes: number) => formatBytes(bytes, { pad: true })
+const fsize = (bytes: number) => formatBytes(bytes).label
 
 type FormValues = {
   imageName: string
diff --git a/app/pages/project/instances/InstancePage.tsx b/app/pages/project/instances/InstancePage.tsx
index 9e337fa344..0a02ccc6ca 100644
--- a/app/pages/project/instances/InstancePage.tsx
+++ b/app/pages/project/instances/InstancePage.tsx
@@ -6,7 +6,6 @@
  * Copyright Oxide Computer Company
  */
 import { useQuery } from '@tanstack/react-query'
-import { filesize } from 'filesize'
 import { useId, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { Link, useNavigate, type LoaderFunctionArgs } from 'react-router'
@@ -56,7 +55,7 @@ import { truncate } from '~/ui/lib/Truncate'
 import { instanceMetricsBase, pb } from '~/util/path-builder'
 import type * as PP from '~/util/path-params'
 import { pluralize } from '~/util/str'
-import { GiB } from '~/util/units'
+import { formatBytes, GiB } from '~/util/units'
 
 import { useMakeInstanceActions } from './actions'
 
@@ -168,7 +167,7 @@ export default function InstancePage() {
     enabled: !!primaryVpcId,
   })
 
-  const memory = filesize(instance.memory, { output: 'object', base: 2 })
+  const memory = formatBytes(instance.memory)
 
   return (
     <>
diff --git a/app/pages/project/instances/InstancesPage.tsx b/app/pages/project/instances/InstancesPage.tsx
index 7c44a8ec11..19af2687db 100644
--- a/app/pages/project/instances/InstancesPage.tsx
+++ b/app/pages/project/instances/InstancesPage.tsx
@@ -7,7 +7,6 @@
  */
 import { useQuery, type UseQueryOptions } from '@tanstack/react-query'
 import { createColumnHelper } from '@tanstack/react-table'
-import { filesize } from 'filesize'
 import { useMemo, useRef, useState } from 'react'
 import { type LoaderFunctionArgs } from 'react-router'
 
@@ -42,6 +41,7 @@ import { ALL_ISH } from '~/util/consts'
 import { toLocaleTimeString } from '~/util/date'
 import { pb } from '~/util/path-builder'
 import { pluralize } from '~/util/str'
+import { formatBytes } from '~/util/units'
 
 import { useMakeInstanceActions } from './actions'
 import { ResizeInstanceModal } from './InstancePage'
@@ -113,7 +113,7 @@ export default function InstancesPage() {
       colHelper.accessor('memory', {
         header: 'Memory',
         cell: (info) => {
-          const memory = filesize(info.getValue(), { output: 'object', base: 2 })
+          const memory = formatBytes(info.getValue())
           return (
             <>
               {memory.value} <span className="text-tertiary ml-1">{memory.unit}</span>
diff --git a/app/pages/system/inventory/sled/SledPage.tsx b/app/pages/system/inventory/sled/SledPage.tsx
index f60dfc91c2..7947e6c661 100644
--- a/app/pages/system/inventory/sled/SledPage.tsx
+++ b/app/pages/system/inventory/sled/SledPage.tsx
@@ -5,7 +5,6 @@
  *
  * Copyright Oxide Computer Company
  */
-import { filesize } from 'filesize'
 import type { LoaderFunctionArgs } from 'react-router'
 
 import { api, q, queryClient, usePrefetchedQuery } from '@oxide/api'
@@ -19,6 +18,7 @@ import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { truncate } from '~/ui/lib/Truncate'
 import { pb } from '~/util/path-builder'
 import type * as PP from '~/util/path-params'
+import { formatBytes } from '~/util/units'
 
 import { ProvisionPolicyBadge, SledKindBadge, SledStateBadge } from './SledBadges'
 
@@ -38,7 +38,7 @@ export default function SledPage() {
   const { sledId } = useSledParams()
   const { data: sled } = usePrefetchedQuery(sledView({ sledId }))
 
-  const ram = filesize(sled.usablePhysicalRam, { output: 'object', base: 2 })
+  const ram = formatBytes(sled.usablePhysicalRam)
 
   return (
     <>
diff --git a/app/table/cells/InstanceResourceCell.tsx b/app/table/cells/InstanceResourceCell.tsx
index acc3f1e626..a735f54e14 100644
--- a/app/table/cells/InstanceResourceCell.tsx
+++ b/app/table/cells/InstanceResourceCell.tsx
@@ -5,14 +5,14 @@
  *
  * Copyright Oxide Computer Company
  */
-import { filesize } from 'filesize'
-
 import type { Instance } from '@oxide/api'
 
+import { formatBytes } from '~/util/units'
+
 type Props = { value: Pick<Instance, 'ncpus' | 'memory'> }
 
 export const InstanceResourceCell = ({ value }: Props) => {
-  const memory = filesize(value.memory, { output: 'object', base: 2 })
+  const memory = formatBytes(value.memory)
   return (
     <div className="space-y-0.5">
       <div>
diff --git a/app/table/columns/common.tsx b/app/table/columns/common.tsx
index e6cb831039..99f0aa8d57 100644
--- a/app/table/columns/common.tsx
+++ b/app/table/columns/common.tsx
@@ -6,13 +6,12 @@
  * Copyright Oxide Computer Company
  */
 
-import { filesize } from 'filesize'
-
 import type { InstanceState } from '~/api'
 import { InstanceStateBadge } from '~/components/StateBadge'
 import { DescriptionCell } from '~/table/cells/DescriptionCell'
 import { CopyToClipboard } from '~/ui/lib/CopyToClipboard'
 import { DateTime } from '~/ui/lib/DateTime'
+import { formatBytes } from '~/util/units'
 
 // the full type of the info arg is CellContext<Row, Item> from RT, but in these
 // cells we only care about the return value of getValue
@@ -40,7 +39,7 @@ function instanceStateCell(info: Info<InstanceState>) {
 
 // not using Info<number> so this can also be used for minitables
 export function sizeCellInner(value: number) {
-  const size = filesize(value, { base: 2, output: 'object' })
+  const size = formatBytes(value)
   return (
     <span className="text-default">
       {size.value} <span className="text-tertiary">{size.unit}</span>
diff --git a/app/ui/lib/FileInput.tsx b/app/ui/lib/FileInput.tsx
index 8fbaf40e9e..3728a1d8ed 100644
--- a/app/ui/lib/FileInput.tsx
+++ b/app/ui/lib/FileInput.tsx
@@ -99,9 +99,7 @@ export function FileInput({
           {file && !dragOver ? (
             <div className="text-raise flex items-center">
               <Truncate text={file.name} maxLength={32} position="middle" />
-              <span className="text-tertiary ml-1">
-                ({formatBytes(file.size, { pad: true })})
-              </span>
+              <span className="text-tertiary ml-1">({formatBytes(file.size).label})</span>
               <button
                 type="button"
                 onClick={handleResetInput}
diff --git a/app/util/units.spec.ts b/app/util/units.spec.ts
index 40423c1c3f..7d904cd935 100644
--- a/app/util/units.spec.ts
+++ b/app/util/units.spec.ts
@@ -10,21 +10,19 @@ import { expect, it } from 'vitest'
 import { formatBytes, GiB, KiB, MiB } from './units'
 
 it.each([
-  // bytes: never padded (fractional bytes don't make sense)
-  [0, undefined, '0 B'],
-  [0, { pad: true }, '0 B'],
-  [5, undefined, '5 B'],
-  [5, { pad: true }, '5 B'],
-  [500, { pad: true }, '500 B'],
+  // bytes: never padded because fractional bytes don't make sense
+  [0, '0', 'B', '0 B'],
+  [5, '5', 'B', '5 B'],
+  [500, '500', 'B', '500 B'],
   // fractional inputs are rounded to whole bytes
-  [2.5, { pad: true }, '3 B'],
-  [0.5, { pad: true }, '1 B'],
-  // KiB and larger: padded when requested
-  [KiB, undefined, '1 KiB'],
-  [KiB, { pad: true }, '1.00 KiB'],
-  [1500, { pad: true }, '1.46 KiB'],
-  [MiB, { pad: true }, '1.00 MiB'],
-  [GiB, { pad: true }, '1.00 GiB'],
-])('formatBytes(%d, %o) -> %s', (bytes, opts, expected) => {
-  expect(formatBytes(bytes, opts)).toEqual(expected)
+  [2.5, '3', 'B', '3 B'],
+  [0.5, '1', 'B', '1 B'],
+  // KiB and larger: always padded
+  [1023.5, '1.00', 'KiB', '1.00 KiB'],
+  [KiB, '1.00', 'KiB', '1.00 KiB'],
+  [1500, '1.46', 'KiB', '1.46 KiB'],
+  [MiB, '1.00', 'MiB', '1.00 MiB'],
+  [GiB, '1.00', 'GiB', '1.00 GiB'],
+])('formatBytes(%d)', (bytes, value, unit, label) => {
+  expect(formatBytes(bytes)).toEqual({ value, unit, label })
 })
diff --git a/app/util/units.ts b/app/util/units.ts
index 1e8e034e7c..fb44240a3f 100644
--- a/app/util/units.ts
+++ b/app/util/units.ts
@@ -17,13 +17,27 @@ export const TiB = 1024 * GiB
 export const bytesToGiB = (b: number, digits = 2) => round(b / GiB, digits)
 export const bytesToTiB = (b: number, digits = 2) => round(b / TiB, digits)
 
+export type FormattedBytes = {
+  /** Numeric portion of the formatted byte count, e.g. `1.50`. */
+  value: string
+  /** Binary unit label, e.g. `KiB`. */
+  unit: string
+  /** Full display string combining `value` and `unit`, e.g. `1.50 KiB`. */
+  label: string
+}
+
 /**
  * Format a byte count for display, e.g. `1.50 KiB`. Always uses base 2 (binary
- * units like KiB, MiB). When `pad` is true, scaled units get trailing zeros
- * (e.g. `1.00 KiB`), but bytes never do — fractional bytes don't make sense.
+ * units like KiB, MiB), pads scaled units to two decimal places, and leaves
+ * bytes unpadded because fractional bytes don't make sense.
  */
-export function formatBytes(bytes: number, { pad = false }: { pad?: boolean } = {}) {
-  // peek at the unit so we can suppress padding for raw bytes
-  const { unit } = filesize(bytes, { base: 2, output: 'object' })
-  return filesize(bytes, { base: 2, pad: pad && unit !== 'B' })
+export function formatBytes(bytes: number): FormattedBytes {
+  const { value, unit } = filesize(bytes, { base: 2, output: 'object' })
+  const formattedValue = unit === 'B' ? String(value) : Number(value).toFixed(2)
+
+  return {
+    value: formattedValue,
+    unit,
+    label: `${formattedValue} ${unit}`,
+  }
 }

From f41eebb9edac1163cb3b64e5639180eed50889e8 Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Tue, 5 May 2026 14:31:17 -0500
Subject: [PATCH 3/5] ok maybe we don't need padding then

---
 app/util/units.spec.ts | 10 +++++-----
 app/util/units.ts      | 12 ++++++------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/app/util/units.spec.ts b/app/util/units.spec.ts
index 7d904cd935..ecc443d442 100644
--- a/app/util/units.spec.ts
+++ b/app/util/units.spec.ts
@@ -17,12 +17,12 @@ it.each([
   // fractional inputs are rounded to whole bytes
   [2.5, '3', 'B', '3 B'],
   [0.5, '1', 'B', '1 B'],
-  // KiB and larger: always padded
-  [1023.5, '1.00', 'KiB', '1.00 KiB'],
-  [KiB, '1.00', 'KiB', '1.00 KiB'],
+  // KiB and larger: scaled but not padded
+  [1023.5, '1', 'KiB', '1 KiB'],
+  [KiB, '1', 'KiB', '1 KiB'],
   [1500, '1.46', 'KiB', '1.46 KiB'],
-  [MiB, '1.00', 'MiB', '1.00 MiB'],
-  [GiB, '1.00', 'GiB', '1.00 GiB'],
+  [MiB, '1', 'MiB', '1 MiB'],
+  [GiB, '1', 'GiB', '1 GiB'],
 ])('formatBytes(%d)', (bytes, value, unit, label) => {
   expect(formatBytes(bytes)).toEqual({ value, unit, label })
 })
diff --git a/app/util/units.ts b/app/util/units.ts
index fb44240a3f..1fe0af1298 100644
--- a/app/util/units.ts
+++ b/app/util/units.ts
@@ -18,22 +18,22 @@ export const bytesToGiB = (b: number, digits = 2) => round(b / GiB, digits)
 export const bytesToTiB = (b: number, digits = 2) => round(b / TiB, digits)
 
 export type FormattedBytes = {
-  /** Numeric portion of the formatted byte count, e.g. `1.50`. */
+  /** Numeric portion of the formatted byte count, e.g. `1.5`. */
   value: string
   /** Binary unit label, e.g. `KiB`. */
   unit: string
-  /** Full display string combining `value` and `unit`, e.g. `1.50 KiB`. */
+  /** Full display string combining `value` and `unit`, e.g. `1.5 KiB`. */
   label: string
 }
 
 /**
- * Format a byte count for display, e.g. `1.50 KiB`. Always uses base 2 (binary
- * units like KiB, MiB), pads scaled units to two decimal places, and leaves
- * bytes unpadded because fractional bytes don't make sense.
+ * Format a byte count for display, e.g. `1.5 KiB`. Always uses base 2 (binary
+ * units like KiB, MiB) and leaves bytes unpadded because fractional bytes don't
+ * make sense.
  */
 export function formatBytes(bytes: number): FormattedBytes {
   const { value, unit } = filesize(bytes, { base: 2, output: 'object' })
-  const formattedValue = unit === 'B' ? String(value) : Number(value).toFixed(2)
+  const formattedValue = String(value)
 
   return {
     value: formattedValue,

From fb5407826adcaf6c26b8bd36a0573c19db1bdf1a Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Tue, 5 May 2026 14:39:00 -0500
Subject: [PATCH 4/5] bring back padding for image upload only

---
 app/forms/image-upload.tsx |  4 +++-
 app/util/units.spec.ts     | 31 +++++++++++++++++++------------
 app/util/units.ts          | 16 ++++++++++++----
 3 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/app/forms/image-upload.tsx b/app/forms/image-upload.tsx
index f0eda1a093..93e92573d6 100644
--- a/app/forms/image-upload.tsx
+++ b/app/forms/image-upload.tsx
@@ -51,7 +51,9 @@ import { pb } from '~/util/path-builder'
 import { isAllZeros } from '~/util/str'
 import { formatBytes, GiB, KiB } from '~/util/units'
 
-const fsize = (bytes: number) => formatBytes(bytes).label
+// Padded because otherwise the numbers jump around a bit, e.g., when it goes
+// from 10.55 to 14.7 to 19.23
+const fsize = (bytes: number) => formatBytes(bytes, { pad: true }).label
 
 type FormValues = {
   imageName: string
diff --git a/app/util/units.spec.ts b/app/util/units.spec.ts
index ecc443d442..01e60c7c32 100644
--- a/app/util/units.spec.ts
+++ b/app/util/units.spec.ts
@@ -11,18 +11,25 @@ import { formatBytes, GiB, KiB, MiB } from './units'
 
 it.each([
   // bytes: never padded because fractional bytes don't make sense
-  [0, '0', 'B', '0 B'],
-  [5, '5', 'B', '5 B'],
-  [500, '500', 'B', '500 B'],
+  [0, undefined, '0', 'B', '0 B'],
+  [0, { pad: true }, '0', 'B', '0 B'],
+  [5, undefined, '5', 'B', '5 B'],
+  [5, { pad: true }, '5', 'B', '5 B'],
+  [500, { pad: true }, '500', 'B', '500 B'],
   // fractional inputs are rounded to whole bytes
-  [2.5, '3', 'B', '3 B'],
-  [0.5, '1', 'B', '1 B'],
+  [2.5, { pad: true }, '3', 'B', '3 B'],
+  [0.5, { pad: true }, '1', 'B', '1 B'],
   // KiB and larger: scaled but not padded
-  [1023.5, '1', 'KiB', '1 KiB'],
-  [KiB, '1', 'KiB', '1 KiB'],
-  [1500, '1.46', 'KiB', '1.46 KiB'],
-  [MiB, '1', 'MiB', '1 MiB'],
-  [GiB, '1', 'GiB', '1 GiB'],
-])('formatBytes(%d)', (bytes, value, unit, label) => {
-  expect(formatBytes(bytes)).toEqual({ value, unit, label })
+  [1023.5, undefined, '1', 'KiB', '1 KiB'],
+  [KiB, undefined, '1', 'KiB', '1 KiB'],
+  [1500, undefined, '1.46', 'KiB', '1.46 KiB'],
+  [MiB, undefined, '1', 'MiB', '1 MiB'],
+  [GiB, undefined, '1', 'GiB', '1 GiB'],
+  // padding is opt-in for scaled units
+  [KiB, { pad: true }, '1.00', 'KiB', '1.00 KiB'],
+  [1500, { pad: true }, '1.46', 'KiB', '1.46 KiB'],
+  [MiB, { pad: true }, '1.00', 'MiB', '1.00 MiB'],
+  [GiB, { pad: true }, '1.00', 'GiB', '1.00 GiB'],
+])('formatBytes(%d, %o)', (bytes, opts, value, unit, label) => {
+  expect(formatBytes(bytes, opts)).toEqual({ value, unit, label })
 })
diff --git a/app/util/units.ts b/app/util/units.ts
index 1fe0af1298..47b444ed2e 100644
--- a/app/util/units.ts
+++ b/app/util/units.ts
@@ -26,14 +26,22 @@ export type FormattedBytes = {
   label: string
 }
 
+type FormatBytesOptions = {
+  /** Pad scaled units to two decimal places, e.g. `1.00 KiB`. Bytes are never padded. */
+  pad?: boolean
+}
+
 /**
  * Format a byte count for display, e.g. `1.5 KiB`. Always uses base 2 (binary
- * units like KiB, MiB) and leaves bytes unpadded because fractional bytes don't
- * make sense.
+ * units like KiB, MiB). Bytes are never padded because fractional bytes don't
+ * make sense, even when `pad` is true.
  */
-export function formatBytes(bytes: number): FormattedBytes {
+export function formatBytes(
+  bytes: number,
+  { pad = false }: FormatBytesOptions = {}
+): FormattedBytes {
   const { value, unit } = filesize(bytes, { base: 2, output: 'object' })
-  const formattedValue = String(value)
+  const formattedValue = pad && unit !== 'B' ? Number(value).toFixed(2) : String(value)
 
   return {
     value: formattedValue,

From 33623656c8f64725aae588845cea874cbffe40b7 Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Tue, 5 May 2026 16:17:05 -0500
Subject: [PATCH 5/5] lint rule to prevent filesize imports

---
 .oxlintrc.json    | 12 ++++++++++--
 app/util/units.ts |  2 ++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/.oxlintrc.json b/.oxlintrc.json
index 901a1248cc..f373775e6e 100644
--- a/.oxlintrc.json
+++ b/.oxlintrc.json
@@ -54,8 +54,16 @@
     "no-restricted-imports": [
       "error",
       {
-        // prevent confusion due to auto-imports and barrel files
-        "paths": ["."],
+        "paths": [
+          {
+            "name": ".",
+            "message": "Import from the file directly to avoid confusion due to auto-imports and barrel files."
+          },
+          {
+            "name": "filesize",
+            "message": "Import formatBytes from ~/util/units instead."
+          }
+        ],
         "patterns": [
           // import all CSS except index.css at top level through CSS @import statements
           // to avoid bad ordering situations. See https://github.com/oxidecomputer/console/pull/2035
diff --git a/app/util/units.ts b/app/util/units.ts
index 47b444ed2e..7e64c9ad26 100644
--- a/app/util/units.ts
+++ b/app/util/units.ts
@@ -5,6 +5,8 @@
  *
  * Copyright Oxide Computer Company
  */
+// formatBytes wraps filesize so the rest of the app gets a consistent API
+// eslint-disable-next-line no-restricted-imports
 import { filesize } from 'filesize'
 
 import { round } from './math'