From 48a317d4521b1510c481cca0eadbcce617d80271 Mon Sep 17 00:00:00 2001
From: Orlando Valverde <orlando.jesig.va@gmail.com>
Date: Mon, 19 May 2025 23:42:55 -0600
Subject: [PATCH 1/9] Replace Listbox in Create Disk side modal with Combobox

---
 app/forms/disk-create.tsx | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/app/forms/disk-create.tsx b/app/forms/disk-create.tsx
index ded6cec33..7eae56bc6 100644
--- a/app/forms/disk-create.tsx
+++ b/app/forms/disk-create.tsx
@@ -20,10 +20,10 @@ import {
   type Image,
 } from '@oxide/api'
 
+import { ComboboxField } from '~/components/form/fields/ComboboxField'
 import { DescriptionField } from '~/components/form/fields/DescriptionField'
 import { DiskSizeField } from '~/components/form/fields/DiskSizeField'
 import { toImageComboboxItem } from '~/components/form/fields/ImageSelectField'
-import { ListboxField } from '~/components/form/fields/ListboxField'
 import { NameField } from '~/components/form/fields/NameField'
 import { RadioField } from '~/components/form/fields/RadioField'
 import { SideModalForm } from '~/components/form/SideModalForm'
@@ -171,6 +171,7 @@ const DiskSourceField = ({
     field: { value, onChange },
   } = useController({ control, name: 'diskSource' })
   const diskSizeField = useController({ control, name: 'size' }).field
+  const diskImageIdField = useController({ control, name: 'diskSource.imageId' }).field
 
   return (
     <>
@@ -210,14 +211,17 @@ const DiskSourceField = ({
           />
         )}
         {value.type === 'image' && (
-          <ListboxField
+          <ComboboxField
             control={control}
             name="diskSource.imageId"
             label="Source image"
-            placeholder="Select an image"
+            placeholder="Select an image or enter an image name"
             isLoading={areImagesLoading}
             items={images.map((i) => toImageComboboxItem(i, true))}
             required
+            onInputChange={() => {
+              diskImageIdField.onChange()
+            }}
             onChange={(id) => {
               const image = images.find((i) => i.id === id)! // if it's selected, it must be present
               const imageSizeGiB = image.size / GiB
@@ -252,13 +256,17 @@ const SnapshotSelectField = ({ control }: { control: Control<DiskCreate> }) => {
 
   const snapshots = snapshotsQuery.data?.items || []
   const diskSizeField = useController({ control, name: 'size' }).field
+  const diskSnapshotIdField = useController({
+    control,
+    name: 'diskSource.snapshotId',
+  }).field
 
   return (
-    <ListboxField
+    <ComboboxField
       control={control}
       name="diskSource.snapshotId"
       label="Source snapshot"
-      placeholder="Select a snapshot"
+      placeholder="Select a snapshot or enter a snapshot name"
       items={snapshots.map((i) => {
         const formattedSize = filesize(i.size, { base: 2, output: 'object' })
         return {
@@ -278,6 +286,9 @@ const SnapshotSelectField = ({ control }: { control: Control<DiskCreate> }) => {
       })}
       isLoading={snapshotsQuery.isPending}
       required
+      onInputChange={() => {
+        diskSnapshotIdField.onChange()
+      }}
       onChange={(id) => {
         const snapshot = snapshots.find((i) => i.id === id)! // if it's selected, it must be present
         const snapshotSizeGiB = snapshot.size / GiB

From b3a0a7d3044270a48fd96328e3cda2dfc67b3f18 Mon Sep 17 00:00:00 2001
From: Orlando Valverde <orlando.jesig.va@gmail.com>
Date: Tue, 20 May 2025 09:51:13 -0600
Subject: [PATCH 2/9] Update e2e tests to account for the comboboxes

---
 test/e2e/disks.e2e.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/test/e2e/disks.e2e.ts b/test/e2e/disks.e2e.ts
index 13482ad3e..f3895e54a 100644
--- a/test/e2e/disks.e2e.ts
+++ b/test/e2e/disks.e2e.ts
@@ -80,20 +80,20 @@ test.describe('Disk create', () => {
 
   test('from snapshot', async ({ page }) => {
     await page.getByRole('radio', { name: 'Snapshot' }).click()
-    await page.getByRole('button', { name: 'Source snapshot' }).click()
+    await page.getByPlaceholder('Select a snapshot or enter a snapshot name', { exact: true }).click()
     await page.getByRole('option', { name: 'delete-500' }).click()
   })
 
   // max-size snapshot required a fix
   test('from max-size snapshot', async ({ page }) => {
     await page.getByRole('radio', { name: 'Snapshot' }).click()
-    await page.getByRole('button', { name: 'Source snapshot' }).click()
+    await page.getByPlaceholder('Select a snapshot or enter a snapshot name', { exact: true }).click()
     await page.getByRole('option', { name: 'snapshot-max' }).click()
   })
 
   test('from image', async ({ page }) => {
     await page.getByRole('radio', { name: 'Image' }).click()
-    await page.getByRole('button', { name: 'Source image' }).click()
+    await page.getByPlaceholder('Select an image or enter an image name', { exact: true }).click()
     await page.getByRole('option', { name: 'image-3' }).click()
   })
 

From a01a795dea9ff2dfaafcabc3fbe9d8b9f5dafe06 Mon Sep 17 00:00:00 2001
From: Orlando Valverde <orlando.jesig.va@gmail.com>
Date: Wed, 21 May 2025 18:09:45 -0600
Subject: [PATCH 3/9] Fix issues raised by CI pipeline

---
 test/e2e/disks.e2e.ts          | 12 +++++++++---
 test/e2e/instance-disks.e2e.ts |  4 +++-
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/test/e2e/disks.e2e.ts b/test/e2e/disks.e2e.ts
index f3895e54a..ffbae0cde 100644
--- a/test/e2e/disks.e2e.ts
+++ b/test/e2e/disks.e2e.ts
@@ -80,20 +80,26 @@ test.describe('Disk create', () => {
 
   test('from snapshot', async ({ page }) => {
     await page.getByRole('radio', { name: 'Snapshot' }).click()
-    await page.getByPlaceholder('Select a snapshot or enter a snapshot name', { exact: true }).click()
+    await page
+      .getByPlaceholder('Select a snapshot or enter a snapshot name', { exact: true })
+      .click()
     await page.getByRole('option', { name: 'delete-500' }).click()
   })
 
   // max-size snapshot required a fix
   test('from max-size snapshot', async ({ page }) => {
     await page.getByRole('radio', { name: 'Snapshot' }).click()
-    await page.getByPlaceholder('Select a snapshot or enter a snapshot name', { exact: true }).click()
+    await page
+      .getByPlaceholder('Select a snapshot or enter a snapshot name', { exact: true })
+      .click()
     await page.getByRole('option', { name: 'snapshot-max' }).click()
   })
 
   test('from image', async ({ page }) => {
     await page.getByRole('radio', { name: 'Image' }).click()
-    await page.getByPlaceholder('Select an image or enter an image name', { exact: true }).click()
+    await page
+      .getByPlaceholder('Select an image or enter an image name', { exact: true })
+      .click()
     await page.getByRole('option', { name: 'image-3' }).click()
   })
 
diff --git a/test/e2e/instance-disks.e2e.ts b/test/e2e/instance-disks.e2e.ts
index f6c59b063..f5a3bef04 100644
--- a/test/e2e/instance-disks.e2e.ts
+++ b/test/e2e/instance-disks.e2e.ts
@@ -117,7 +117,9 @@ test('Create disk', async ({ page }) => {
   await expect(createForm.getByRole('textbox', { name: 'Description' })).toBeVisible()
 
   await page.getByRole('radio', { name: 'Snapshot' }).click()
-  await page.getByRole('button', { name: 'Source snapshot' }).click()
+  await page
+    .getByPlaceholder('Select a snapshot or enter a snapshot name', { exact: true })
+    .click()
   await page.getByRole('option', { name: 'snapshot-heavy' }).click()
 
   await createForm.getByRole('button', { name: 'Create disk' }).click()

From 7f6b651ae362265dcc37b7e89d9925a45d8e332d Mon Sep 17 00:00:00 2001
From: Orlando Valverde <orlando.jesig.va@gmail.com>
Date: Fri, 23 May 2025 14:28:30 -0600
Subject: [PATCH 4/9] Fix issues stated in code review

---
 test/e2e/disks.e2e.ts          | 12 +++---------
 test/e2e/instance-disks.e2e.ts |  4 +---
 2 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/test/e2e/disks.e2e.ts b/test/e2e/disks.e2e.ts
index ffbae0cde..eb4a573f2 100644
--- a/test/e2e/disks.e2e.ts
+++ b/test/e2e/disks.e2e.ts
@@ -80,26 +80,20 @@ test.describe('Disk create', () => {
 
   test('from snapshot', async ({ page }) => {
     await page.getByRole('radio', { name: 'Snapshot' }).click()
-    await page
-      .getByPlaceholder('Select a snapshot or enter a snapshot name', { exact: true })
-      .click()
+    await page.getByRole('combobox', { name: 'Source snapshot' }).click()
     await page.getByRole('option', { name: 'delete-500' }).click()
   })
 
   // max-size snapshot required a fix
   test('from max-size snapshot', async ({ page }) => {
     await page.getByRole('radio', { name: 'Snapshot' }).click()
-    await page
-      .getByPlaceholder('Select a snapshot or enter a snapshot name', { exact: true })
-      .click()
+    await page.getByRole('combobox', { name: 'Source snapshot' }).click()
     await page.getByRole('option', { name: 'snapshot-max' }).click()
   })
 
   test('from image', async ({ page }) => {
     await page.getByRole('radio', { name: 'Image' }).click()
-    await page
-      .getByPlaceholder('Select an image or enter an image name', { exact: true })
-      .click()
+    await page.getByRole('combobox', { name: 'Source image' }).click()
     await page.getByRole('option', { name: 'image-3' }).click()
   })
 
diff --git a/test/e2e/instance-disks.e2e.ts b/test/e2e/instance-disks.e2e.ts
index f5a3bef04..a8569f4ec 100644
--- a/test/e2e/instance-disks.e2e.ts
+++ b/test/e2e/instance-disks.e2e.ts
@@ -117,9 +117,7 @@ test('Create disk', async ({ page }) => {
   await expect(createForm.getByRole('textbox', { name: 'Description' })).toBeVisible()
 
   await page.getByRole('radio', { name: 'Snapshot' }).click()
-  await page
-    .getByPlaceholder('Select a snapshot or enter a snapshot name', { exact: true })
-    .click()
+  await page.getByRole('combobox', { name: 'Source snapshot' }).click()
   await page.getByRole('option', { name: 'snapshot-heavy' }).click()
 
   await createForm.getByRole('button', { name: 'Create disk' }).click()

From 19621a5f6d8f246d1755b4127e2bd35cfaeadf4c Mon Sep 17 00:00:00 2001
From: Orlando Valverde <orlando.jesig.va@gmail.com>
Date: Thu, 29 May 2025 14:37:52 -0600
Subject: [PATCH 5/9] Revert changes in placeholders

---
 app/forms/disk-create.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/forms/disk-create.tsx b/app/forms/disk-create.tsx
index 7eae56bc6..8cb8418f3 100644
--- a/app/forms/disk-create.tsx
+++ b/app/forms/disk-create.tsx
@@ -215,7 +215,7 @@ const DiskSourceField = ({
             control={control}
             name="diskSource.imageId"
             label="Source image"
-            placeholder="Select an image or enter an image name"
+            placeholder="Select an image"
             isLoading={areImagesLoading}
             items={images.map((i) => toImageComboboxItem(i, true))}
             required
@@ -266,7 +266,7 @@ const SnapshotSelectField = ({ control }: { control: Control<DiskCreate> }) => {
       control={control}
       name="diskSource.snapshotId"
       label="Source snapshot"
-      placeholder="Select a snapshot or enter a snapshot name"
+      placeholder="Select a snapshot"
       items={snapshots.map((i) => {
         const formattedSize = filesize(i.size, { base: 2, output: 'object' })
         return {

From 5c7b0eee2d3ac00e035f7b60e71eb6daf3013998 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Tue, 22 Jul 2025 15:49:29 -0700
Subject: [PATCH 6/9] refactor combobox input editing and add tests

---
 app/components/form/fields/ComboboxField.tsx |  6 ++
 app/forms/disk-create.tsx                    | 11 ---
 app/ui/lib/Combobox.tsx                      |  2 +-
 app/ui/lib/FileInput.tsx                     |  4 +-
 test/e2e/instance-create.e2e.ts              | 80 ++++++++++++++++++--
 5 files changed, 82 insertions(+), 21 deletions(-)

diff --git a/app/components/form/fields/ComboboxField.tsx b/app/components/form/fields/ComboboxField.tsx
index efa055829..ce122b748 100644
--- a/app/components/form/fields/ComboboxField.tsx
+++ b/app/components/form/fields/ComboboxField.tsx
@@ -45,6 +45,7 @@ export function ComboboxField<
   label = capitalize(name),
   required,
   onChange,
+  onInputChange,
   allowArbitraryValues,
   placeholder,
   // Intent is to not show both a placeholder and a description, while still having good defaults; prefer a description to a placeholder
@@ -88,6 +89,11 @@ export function ComboboxField<
           onChange?.(value)
           setSelectedItemLabel(getSelectedLabelFromValue(items, value))
         }}
+        onInputChange={(value) => {
+          // If the user edits the input field, if arbitrary values are allowed, set the field's value; otherwise, clear the selected value
+          field.onChange(allowArbitraryValues ? value : undefined)
+          onInputChange?.(value)
+        }}
         allowArbitraryValues={allowArbitraryValues}
         inputRef={field.ref}
         transform={transform}
diff --git a/app/forms/disk-create.tsx b/app/forms/disk-create.tsx
index 8cb8418f3..13e909b13 100644
--- a/app/forms/disk-create.tsx
+++ b/app/forms/disk-create.tsx
@@ -171,7 +171,6 @@ const DiskSourceField = ({
     field: { value, onChange },
   } = useController({ control, name: 'diskSource' })
   const diskSizeField = useController({ control, name: 'size' }).field
-  const diskImageIdField = useController({ control, name: 'diskSource.imageId' }).field
 
   return (
     <>
@@ -219,9 +218,6 @@ const DiskSourceField = ({
             isLoading={areImagesLoading}
             items={images.map((i) => toImageComboboxItem(i, true))}
             required
-            onInputChange={() => {
-              diskImageIdField.onChange()
-            }}
             onChange={(id) => {
               const image = images.find((i) => i.id === id)! // if it's selected, it must be present
               const imageSizeGiB = image.size / GiB
@@ -256,10 +252,6 @@ const SnapshotSelectField = ({ control }: { control: Control<DiskCreate> }) => {
 
   const snapshots = snapshotsQuery.data?.items || []
   const diskSizeField = useController({ control, name: 'size' }).field
-  const diskSnapshotIdField = useController({
-    control,
-    name: 'diskSource.snapshotId',
-  }).field
 
   return (
     <ComboboxField
@@ -286,9 +278,6 @@ const SnapshotSelectField = ({ control }: { control: Control<DiskCreate> }) => {
       })}
       isLoading={snapshotsQuery.isPending}
       required
-      onInputChange={() => {
-        diskSnapshotIdField.onChange()
-      }}
       onChange={(id) => {
         const snapshot = snapshots.find((i) => i.id === id)! // if it's selected, it must be present
         const snapshotSizeGiB = snapshot.size / GiB
diff --git a/app/ui/lib/Combobox.tsx b/app/ui/lib/Combobox.tsx
index d146c0912..dcd11fdc7 100644
--- a/app/ui/lib/Combobox.tsx
+++ b/app/ui/lib/Combobox.tsx
@@ -265,7 +265,7 @@ export const Combobox = ({
                     // of those rules one by one. Better to rely on the shared classes.
                     <div
                       className={cn('ox-menu-item', {
-                        'is-selected': selected && query !== item.value,
+                        'is-selected': selected,
                         'is-highlighted': focus,
                       })}
                     >
diff --git a/app/ui/lib/FileInput.tsx b/app/ui/lib/FileInput.tsx
index 38302be29..022f4a31b 100644
--- a/app/ui/lib/FileInput.tsx
+++ b/app/ui/lib/FileInput.tsx
@@ -36,6 +36,7 @@ export function FileInput({
   onChange,
   error,
   ref,
+  id,
   ...inputProps
 }: FileInputProps) {
   const inputRef = useRef<HTMLInputElement>(null)
@@ -63,8 +64,9 @@ export function FileInput({
   }
 
   return (
-    <label className={cn(className, 'group relative block')}>
+    <label htmlFor={id} className={cn(className, 'group relative block')}>
       <input
+        id={id}
         ref={mergeRefs([inputRef, ref])}
         type="file"
         name="file"
diff --git a/test/e2e/instance-create.e2e.ts b/test/e2e/instance-create.e2e.ts
index 52a5f0ea0..52f3caa68 100644
--- a/test/e2e/instance-create.e2e.ts
+++ b/test/e2e/instance-create.e2e.ts
@@ -37,6 +37,16 @@ const selectAnExistingDisk = async (page: Page, name: string) => {
   await page.getByRole('option', { name }).click()
 }
 
+/** Ensure that certain combobox options are present, others are hidden */
+const expectOptions = async (page: Page, present: string[], hidden: string[]) => {
+  for (const option of present) {
+    await expect(page.getByRole('option', { name: option })).toBeVisible()
+  }
+  for (const option of hidden) {
+    await expect(page.getByRole('option', { name: option })).toBeHidden()
+  }
+}
+
 test('can create an instance', async ({ page }) => {
   await page.goto('/projects/mock-project/instances')
   await page.locator('text="New Instance"').click()
@@ -513,18 +523,16 @@ test('attaching additional disks allows for combobox filtering', async ({ page }
   await attachExistingDiskButton.click()
   await selectADisk.click()
   // several disks should be shown
-  await expect(page.getByRole('option', { name: 'disk-0001' })).toBeVisible()
-  await expect(page.getByRole('option', { name: 'disk-0002' })).toBeVisible()
-  await expect(page.getByRole('option', { name: 'disk-1000' })).toBeVisible()
+  await expectOptions(page, ['disk-0001', 'disk-0002', 'disk-1000'], [])
 
   // type in a string to use as a filter
   await selectADisk.fill('disk-010')
   // only disks with that substring should be shown
-  await expect(page.getByRole('option', { name: 'disk-0100' })).toBeVisible()
-  await expect(page.getByRole('option', { name: 'disk-0101' })).toBeVisible()
-  await expect(page.getByRole('option', { name: 'disk-0102' })).toBeVisible()
-  await expect(page.getByRole('option', { name: 'disk-0001' })).toBeHidden()
-  await expect(page.getByRole('option', { name: 'disk-1000' })).toBeHidden()
+  await expectOptions(
+    page,
+    ['disk-0100', 'disk-0101', 'disk-0102'],
+    ['disk-0001', 'disk-1000']
+  )
 
   // select one
   await page.getByRole('option', { name: 'disk-0102' }).click()
@@ -649,3 +657,59 @@ test('Validate CPU and RAM', async ({ page }) => {
   await expect(cpuMsg).toBeVisible()
   await expect(memMsg).toBeVisible()
 })
+
+test('clears silo image selection when typing arbitrary text and blurring', async ({
+  page,
+}) => {
+  const instanceName = 'test-instance'
+  const validImage = 'ubuntu-22-04'
+  const alternateImage1 = 'ubuntu-20-04'
+  const alternateImage2 = 'arch-2022-06-01'
+
+  await page.goto('/projects/mock-project/instances-new')
+  await page.getByRole('textbox', { name: 'Name', exact: true }).fill(instanceName)
+
+  const imageSelectCombobox = page.getByRole('combobox', { name: 'Image' })
+  await imageSelectCombobox.scrollIntoViewIfNeeded()
+
+  // Ensure the combobox is visible and has the expected options
+  await expect(imageSelectCombobox).toHaveValue('')
+  await imageSelectCombobox.click()
+  await expectOptions(page, [validImage, alternateImage1, alternateImage2], [])
+
+  // Filter the combobox for a particular silo image pattern
+  await imageSelectCombobox.fill('ubuntu')
+
+  // Ensure that only show the options that match the filter are visible
+  await expectOptions(page, [validImage, alternateImage1], [alternateImage2])
+
+  // Select an image
+  await page.getByRole('option', { name: validImage }).click()
+  await expect(imageSelectCombobox).toHaveValue(validImage)
+
+  // Delete four characters from the end to reveal more options
+  await page.keyboard.press('Backspace')
+  await page.keyboard.press('Backspace')
+  await page.keyboard.press('Backspace')
+  await page.keyboard.press('Backspace')
+
+  // There should now be an invalid value in the combobox, but we should be able to see both the ubuntu options: `ubuntu-22-04` and `ubuntu-20-04`
+  // and we should NOT be able to see the `arch-2022-06-01` option
+  await expect(imageSelectCombobox).toHaveValue('ubuntu-2')
+  await expectOptions(page, [validImage, alternateImage1], [alternateImage2])
+
+  // Blur the field by clicking elsewhere; because the value is not a valid silo image, the selection should be cleared
+  await page.getByRole('textbox', { name: 'Name', exact: true }).click()
+
+  // The selection should be cleared since allowArbitraryValues=false
+  await expect(imageSelectCombobox).toHaveValue('')
+
+  // Re-focus and select the original option again
+  await imageSelectCombobox.click()
+  await page.getByRole('option', { name: validImage }).click()
+  await expect(imageSelectCombobox).toHaveValue(validImage)
+
+  // Should be able to continue with instance creation
+  await page.getByRole('button', { name: 'Create instance' }).click()
+  await expect(page).toHaveURL(`/projects/mock-project/instances/${instanceName}/storage`)
+})

From da2f383c15741272ad5f1208f14b76781ddd781b Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Tue, 22 Jul 2025 17:58:48 -0700
Subject: [PATCH 7/9] add mock images and stress test combobox; memoize as much
 as possible

---
 app/components/form/fields/ComboboxField.tsx |  73 +++---
 app/forms/disk-create.tsx                    |  29 ++-
 app/ui/lib/Combobox.tsx                      | 231 +++++++++++--------
 3 files changed, 211 insertions(+), 122 deletions(-)

diff --git a/app/components/form/fields/ComboboxField.tsx b/app/components/form/fields/ComboboxField.tsx
index ce122b748..ea39f0a9c 100644
--- a/app/components/form/fields/ComboboxField.tsx
+++ b/app/components/form/fields/ComboboxField.tsx
@@ -6,7 +6,7 @@
  * Copyright Oxide Computer Company
  */
 
-import { useState } from 'react'
+import { useCallback, useMemo } from 'react'
 import {
   useController,
   type Control,
@@ -48,18 +48,7 @@ export function ComboboxField<
   onInputChange,
   allowArbitraryValues,
   placeholder,
-  // Intent is to not show both a placeholder and a description, while still having good defaults; prefer a description to a placeholder
-  /*
-   * If description is provided, use it.
-   * If not, but a placeholder is provided, the default description should be undefined.
-   * If no placeholder is provided and arbitrary values are allowed, the default description should be 'Select an option or enter a custom value'.
-   * If no placeholder is provided and arbitrary values are not allowed, the default description should be 'Select an option'.
-   */
-  description = placeholder
-    ? undefined
-    : allowArbitraryValues
-      ? 'Select an option or enter a custom value'
-      : 'Select an option',
+  description,
   items,
   transform,
   validate,
@@ -70,30 +59,62 @@ export function ComboboxField<
     control,
     rules: { required, validate },
   })
-  const [selectedItemLabel, setSelectedItemLabel] = useState(
-    getSelectedLabelFromValue(items, field.value || '')
+
+  // Memoize description computation to avoid recalculating on every render
+  const memoizedDescription = useMemo(() => {
+    // Intent is to not show both a placeholder and a description, while still having good defaults; prefer a description to a placeholder
+    /*
+     * If description is provided, use it.
+     * If not, but a placeholder is provided, the default description should be undefined.
+     * If no placeholder is provided and arbitrary values are allowed, the default description should be 'Select an option or enter a custom value'.
+     * If no placeholder is provided and arbitrary values are not allowed, the default description should be 'Select an option'.
+     */
+    return description !== undefined
+      ? description
+      : placeholder
+        ? undefined
+        : allowArbitraryValues
+          ? 'Select an option or enter a custom value'
+          : 'Select an option'
+  }, [description, placeholder, allowArbitraryValues])
+
+  // Memoize the selected label calculation to avoid recalculation when items/value haven't changed
+  const selectedItemLabel = useMemo(
+    () => getSelectedLabelFromValue(items, field.value || ''),
+    [items, field.value]
+  )
+
+  // Memoize onChange callback to prevent unnecessary re-renders
+  const handleChange = useCallback(
+    (value: string) => {
+      field.onChange(value)
+      onChange?.(value)
+    },
+    [field, onChange]
+  )
+
+  // Memoize onInputChange callback to prevent unnecessary re-renders
+  const handleInputChange = useCallback(
+    (value: string) => {
+      // If the user edits the input field, if arbitrary values are allowed, set the field's value; otherwise, clear the selected value
+      field.onChange(allowArbitraryValues ? value : undefined)
+      onInputChange?.(value)
+    },
+    [field, allowArbitraryValues, onInputChange]
   )
   return (
     <div className="max-w-lg">
       <Combobox
         label={label}
         placeholder={placeholder}
-        description={description}
+        description={memoizedDescription}
         items={items}
         required={required}
         selectedItemValue={field.value}
         selectedItemLabel={selectedItemLabel}
         hasError={fieldState.error !== undefined}
-        onChange={(value) => {
-          field.onChange(value)
-          onChange?.(value)
-          setSelectedItemLabel(getSelectedLabelFromValue(items, value))
-        }}
-        onInputChange={(value) => {
-          // If the user edits the input field, if arbitrary values are allowed, set the field's value; otherwise, clear the selected value
-          field.onChange(allowArbitraryValues ? value : undefined)
-          onInputChange?.(value)
-        }}
+        onChange={handleChange}
+        onInputChange={handleInputChange}
         allowArbitraryValues={allowArbitraryValues}
         inputRef={field.ref}
         transform={transform}
diff --git a/app/forms/disk-create.tsx b/app/forms/disk-create.tsx
index 13e909b13..16271e3d1 100644
--- a/app/forms/disk-create.tsx
+++ b/app/forms/disk-create.tsx
@@ -6,7 +6,6 @@
  * Copyright Oxide Computer Company
  */
 import { filesize } from 'filesize'
-import { useMemo } from 'react'
 import { useController, useForm, type Control } from 'react-hook-form'
 
 import {
@@ -87,10 +86,30 @@ export function CreateDiskSideModalForm({
 
   // put project images first because if there are any, there probably aren't
   // very many and they're probably relevant
-  const images = useMemo(
-    () => [...(projectImages.data?.items || []), ...(siloImages.data?.items || [])],
-    [projectImages.data, siloImages.data]
-  )
+  const realImages = [
+    ...(projectImages.data?.items || []),
+    ...(siloImages.data?.items || []),
+  ]
+
+  // TODO: REMOVE THIS AFTER STRESS TESTING IS DONE
+  // Generate 1000 mock items for stress testing
+  const mockImages: Image[] = Array.from({ length: 1000 }, (_, i) => ({
+    id: `mock-image-${i}`,
+    name: `Mock Image ${i.toString().padStart(4, '0')}`,
+    size: 1073741824, // 1GB
+    version: '1.0.0',
+    description: `This is mock image ${i} for stress testing the combobox`,
+    digest: {
+      type: 'sha256',
+      value: '0'.repeat(64),
+    },
+    blockSize: 512,
+    timeCreated: new Date(),
+    timeModified: new Date(),
+    os: 'linux',
+  }))
+
+  const images = [...realImages, ...mockImages]
   const areImagesLoading = projectImages.isPending || siloImages.isPending
 
   const snapshotsQuery = useApiQuery('snapshotList', { query: { project } })
diff --git a/app/ui/lib/Combobox.tsx b/app/ui/lib/Combobox.tsx
index dcd11fdc7..8652b213e 100644
--- a/app/ui/lib/Combobox.tsx
+++ b/app/ui/lib/Combobox.tsx
@@ -13,9 +13,16 @@ import {
   ComboboxOptions,
   Combobox as HCombobox,
 } from '@headlessui/react'
-import cn from 'classnames'
 import { matchSorter } from 'match-sorter'
-import { useEffect, useId, useState, type ReactNode, type Ref } from 'react'
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useState,
+  type ReactNode,
+  type Ref,
+} from 'react'
 
 import { SelectArrows6Icon } from '@oxide/design-system/icons/react'
 
@@ -100,12 +107,45 @@ export const Combobox = ({
   transform,
   ...props
 }: ComboboxProps) => {
-  const [query, setQuery] = useState(selectedItemValue || '')
-  const q = query.toLowerCase().replace(/\s*/g, '')
-  const filteredItems = matchSorter(items, q, {
-    keys: ['selectedLabel', 'label'],
-    sorter: (items) => items, // preserve original order, don't sort by match
-  })
+  const [query, setQuery] = useState(() =>
+    selectedItemValue ? (allowArbitraryValues ? selectedItemValue : selectedItemLabel) : ''
+  )
+
+  // Memoize query processing to avoid recalculation on every render
+  const normalizedQuery = useMemo(() => query.toLowerCase().replace(/\s*/g, ''), [query])
+
+  // Memoize filtered items to avoid re-filtering on every render
+  const filteredItems = useMemo(() => {
+    return matchSorter(items, normalizedQuery, {
+      keys: ['selectedLabel', 'label'],
+      sorter: (items) => items, // preserve original order, don't sort by match
+    })
+  }, [items, normalizedQuery])
+
+  // Memoize custom arbitrary value label to avoid recreation on every render
+  const customValueItem = useMemo(() => {
+    if (
+      allowArbitraryValues &&
+      query.length > 0 &&
+      !filteredItems.some((i) => i.selectedLabel === query)
+    ) {
+      return {
+        value: query,
+        label: (
+          <>
+            <span className="text-default">Custom:</span> {query}
+          </>
+        ),
+        selectedLabel: query,
+      }
+    }
+    return null
+  }, [allowArbitraryValues, query, filteredItems])
+
+  // Final items list with custom value if applicable
+  const finalFilteredItems = useMemo(() => {
+    return customValueItem ? [...filteredItems, customValueItem] : filteredItems
+  }, [filteredItems, customValueItem])
 
   // In the arbitraryValues case, clear the query whenever the value is cleared.
   // this is necessary, e.g., for the firewall rules form when you submit the
@@ -126,33 +166,94 @@ export const Combobox = ({
     }
   }, [allowArbitraryValues, selectedItemValue])
 
-  // If the user has typed in a value that isn't in the list,
-  // add it as an option if `allowArbitraryValues` is true
-  if (
-    allowArbitraryValues &&
-    query.length > 0 &&
-    !filteredItems.some((i) => i.selectedLabel === query)
-  ) {
-    filteredItems.push({
-      value: query,
-      label: (
-        <>
-          <span className="text-default">Custom:</span> {query}
-        </>
-      ),
-      selectedLabel: query,
-    })
-  }
+  // Memoize callbacks to prevent unnecessary re-renders; fallback to '' allows clearing field to work
+  const handleChange = useCallback((val: string | null) => onChange(val || ''), [onChange])
+  const handleClose = useCallback(() => setQuery(''), [])
+  // We only want to keep the query on close when arbitrary values are allowed
+  const onCloseHandler = allowArbitraryValues ? undefined : handleClose
+
+  // Memoize input onChange callback to prevent function recreation on every render
+  const handleInputChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const value = transform ? transform(event.target.value) : event.target.value
+      // updates the query state as the user types, in order to filter the list of items
+      setQuery(value)
+      // if the parent component wants to know about input changes, call the callback
+      onInputChange?.(value)
+    },
+    [transform, onInputChange]
+  )
+
+  // Memoize onKeyDown callback to prevent function recreation on every render
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>, open: boolean) => {
+      // If the caller is using onEnter to override enter behavior, preventDefault
+      // in order to prevent the containing form from being submitted too. We don't
+      // need to do this when the combobox is open because that enter keypress is
+      // already handled internally (selects the highlighted item). So we only do
+      // this when the combobox is closed.
+      if (e.key === 'Enter' && onEnter && !open) {
+        e.preventDefault()
+        onEnter(e)
+      }
+    },
+    [onEnter]
+  )
+
   const zIndex = usePopoverZIndex()
   const id = useId()
+
+  const containerClassName = useMemo(
+    () =>
+      `flex rounded border focus-within:ring-2 ${
+        hasError
+          ? 'focus-error border-error-secondary focus-within:ring-error-secondary hover:border-error'
+          : 'border-default focus-within:ring-accent-secondary hover:border-hover'
+      } ${
+        disabled
+          ? 'cursor-not-allowed text-disabled bg-disabled !border-default'
+          : 'bg-default'
+      } ${disabled && hasError ? '!border-error-secondary' : ''}`,
+    [hasError, disabled]
+  )
+
+  const inputClassName = useMemo(
+    () =>
+      `h-10 w-full rounded !border-none px-3 py-2 !outline-none text-sans-md text-raise placeholder:text-tertiary ${disabled ? 'cursor-not-allowed text-disabled bg-disabled !border-default' : 'bg-default'} ${hasError ? 'focus-error' : ''}`,
+    [hasError, disabled]
+  )
+
+  const buttonClassName = useMemo(
+    () =>
+      `my-1.5 flex items-center border-l px-3 border-secondary ${disabled ? 'cursor-not-allowed bg-disabled' : 'bg-default'}`,
+    [disabled]
+  )
+
+  // 13px gap is presumably because it's measured from inside the outline or something
+  const optionsClassName = useMemo(
+    () =>
+      `ox-menu pointer-events-auto ${zIndex} relative w-[calc(var(--input-width)+var(--button-width))] overflow-y-auto border !outline-none border-secondary [--anchor-gap:13px] empty:hidden`,
+    [zIndex]
+  )
+
+  // Memoize input value computation to avoid recalculation on every render
+  // If an option has been selected, display either the selected item's label or value.
+  // If no option has been selected yet, or the user has started editing the input, display the query.
+  // We are using value here, as opposed to Headless UI's displayValue, so we can normalize the value entered into the input (via the onChange event).
+  const inputValue = useMemo(() => {
+    return selectedItemValue
+      ? allowArbitraryValues
+        ? selectedItemValue
+        : selectedItemLabel
+      : query
+  }, [selectedItemValue, allowArbitraryValues, selectedItemLabel, query])
+
   return (
     <HCombobox
       // necessary, as the displayed "value" is not the same as the actual selected item's *value*
       value={selectedItemValue}
-      // fallback to '' allows clearing field to work
-      onChange={(val) => onChange(val || '')}
-      // we only want to keep the query on close when arbitrary values are allowed
-      onClose={allowArbitraryValues ? undefined : () => setQuery('')}
+      onChange={handleChange}
+      onClose={onCloseHandler}
       disabled={disabled || isLoading}
       immediate
       {...props}
@@ -160,7 +261,6 @@ export const Combobox = ({
       {({ open }) => (
         <div>
           {label && (
-            // TODO: FieldLabel needs a real ID
             <div className="mb-2">
               <FieldLabel
                 id={`${id}-label`}
@@ -175,16 +275,7 @@ export const Combobox = ({
             </div>
           )}
           <div
-            className={cn(
-              `flex rounded border focus-within:ring-2`,
-              hasError
-                ? 'focus-error border-error-secondary focus-within:ring-error-secondary hover:border-error'
-                : 'border-default focus-within:ring-accent-secondary hover:border-hover',
-              disabled
-                ? 'cursor-not-allowed text-disabled bg-disabled !border-default'
-                : 'bg-default',
-              disabled && hasError && '!border-error-secondary'
-            )}
+            className={containerClassName}
             // Putting the inputRef on the div makes it so the div can be focused by RHF when there's an error.
             // We want to focus on the div (rather than the input) so the combobox doesn't open automatically
             // and obscure the error message.
@@ -194,53 +285,15 @@ export const Combobox = ({
           >
             <ComboboxInput
               id={`${id}-input`}
-              // If an option has been selected, display either the selected item's label or value.
-              // If no option has been selected yet, or the user has started editing the input, display the query.
-              // We are using value here, as opposed to Headless UI's displayValue, so we can normalize
-              // the value entered into the input (via the onChange event).
-              value={
-                selectedItemValue
-                  ? allowArbitraryValues
-                    ? selectedItemValue
-                    : selectedItemLabel
-                  : query
-              }
-              onChange={(event) => {
-                const value = transform ? transform(event.target.value) : event.target.value
-                // updates the query state as the user types, in order to filter the list of items
-                setQuery(value)
-                // if the parent component wants to know about input changes, call the callback
-                onInputChange?.(value)
-              }}
-              onKeyDown={(e) => {
-                // If the caller is using onEnter to override enter behavior, preventDefault
-                // in order to prevent the containing form from being submitted too. We don't
-                // need to do this when the combobox is open because that enter keypress is
-                // already handled internally (selects the highlighted item). So we only do
-                // this when the combobox is closed.
-                if (e.key === 'Enter' && onEnter && !open) {
-                  e.preventDefault()
-                  onEnter(e)
-                }
-              }}
+              value={inputValue}
+              onChange={handleInputChange}
+              onKeyDown={(e) => handleKeyDown(e, open)}
               placeholder={placeholder}
               disabled={disabled || isLoading}
-              className={cn(
-                `h-10 w-full rounded !border-none px-3 py-2 !outline-none text-sans-md text-raise placeholder:text-tertiary`,
-                disabled
-                  ? 'cursor-not-allowed text-disabled bg-disabled !border-default'
-                  : 'bg-default',
-                hasError && 'focus-error'
-              )}
+              className={inputClassName}
             />
             {items.length > 0 && (
-              <ComboboxButton
-                className={cn(
-                  'my-1.5 flex items-center border-l px-3 border-secondary',
-                  disabled ? 'cursor-not-allowed bg-disabled' : 'bg-default'
-                )}
-                aria-hidden
-              >
+              <ComboboxButton className={buttonClassName} aria-hidden>
                 <SelectArrows6Icon title="Select" className="w-2 text-secondary" />
               </ComboboxButton>
             )}
@@ -248,11 +301,10 @@ export const Combobox = ({
           {(items.length > 0 || allowArbitraryValues) && (
             <ComboboxOptions
               anchor="bottom start"
-              // 13px gap is presumably because it's measured from inside the outline or something
-              className={`ox-menu pointer-events-auto ${zIndex} relative w-[calc(var(--input-width)+var(--button-width))] overflow-y-auto border !outline-none border-secondary [--anchor-gap:13px] empty:hidden`}
+              className={optionsClassName}
               modal={false}
             >
-              {filteredItems.map((item) => (
+              {finalFilteredItems.map((item) => (
                 <ComboboxOption
                   key={item.value}
                   value={item.value}
@@ -264,17 +316,14 @@ export const Combobox = ({
                     // not our .is-selected and .is-highlighted, so we'd have to copy the pieces
                     // of those rules one by one. Better to rely on the shared classes.
                     <div
-                      className={cn('ox-menu-item', {
-                        'is-selected': selected,
-                        'is-highlighted': focus,
-                      })}
+                      className={`ox-menu-item ${selected ? 'is-selected' : ''} ${focus ? 'is-highlighted' : ''}`}
                     >
                       {item.label}
                     </div>
                   )}
                 </ComboboxOption>
               ))}
-              {!allowArbitraryValues && filteredItems.length === 0 && (
+              {!allowArbitraryValues && finalFilteredItems.length === 0 && (
                 <ComboboxOption disabled value="no-matches" className="relative">
                   <div className="ox-menu-item !text-disabled">No items match</div>
                 </ComboboxOption>

From ff21799e1168893525df8a63737a50360e961dd0 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Wed, 23 Jul 2025 14:40:18 -0700
Subject: [PATCH 8/9] More memoizations and attempts to speed up Chrome
 rendering for large lists

---
 app/components/form/fields/ComboboxField.tsx  |   2 +-
 .../form/fields/ImageSelectField.tsx          |  73 +++++++---
 app/forms/disk-create.tsx                     | 128 +++++++++++-------
 app/ui/lib/Combobox.tsx                       |  96 +++++++++----
 app/ui/styles/components/menu-list.css        |   5 +
 5 files changed, 205 insertions(+), 99 deletions(-)

diff --git a/app/components/form/fields/ComboboxField.tsx b/app/components/form/fields/ComboboxField.tsx
index ea39f0a9c..885e7e78b 100644
--- a/app/components/form/fields/ComboboxField.tsx
+++ b/app/components/form/fields/ComboboxField.tsx
@@ -110,7 +110,7 @@ export function ComboboxField<
         description={memoizedDescription}
         items={items}
         required={required}
-        selectedItemValue={field.value}
+        selectedItemValue={field.value || ''}
         selectedItemLabel={selectedItemLabel}
         hasError={fieldState.error !== undefined}
         onChange={handleChange}
diff --git a/app/components/form/fields/ImageSelectField.tsx b/app/components/form/fields/ImageSelectField.tsx
index 13bb17663..c84bc8a5a 100644
--- a/app/components/form/fields/ImageSelectField.tsx
+++ b/app/components/form/fields/ImageSelectField.tsx
@@ -5,6 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
+import { useCallback, useMemo } from 'react'
 import { useController, type Control } from 'react-hook-form'
 
 import type { Image } from '@oxide/api'
@@ -31,6 +32,29 @@ export function BootDiskImageSelectField({
   name,
 }: ImageSelectFieldProps) {
   const diskSizeField = useController({ control, name: 'bootDiskSize' }).field
+
+  // Memoize the expensive toImageComboboxItem mapping to avoid recalculating on every render
+  const imageComboboxItems = useMemo(
+    () => images.map((i) => toImageComboboxItem(i)),
+    [images]
+  )
+
+  // Memoize onChange callback to prevent function recreation on every render
+  const handleChange = useCallback(
+    (id: string) => {
+      const image = images.find((i) => i.id === id)
+      // the most likely scenario where image would be undefined is if the user has
+      // manually cleared the ComboboxField; they will need to pick a boot disk image
+      // in order to submit the form, so we don't need to do anything here
+      if (!image) return
+      const imageSizeGiB = image.size / GiB
+      if (diskSizeField.value < imageSizeGiB) {
+        diskSizeField.onChange(diskSizeNearest10(imageSizeGiB))
+      }
+    },
+    [images, diskSizeField]
+  )
+
   return (
     <ComboboxField
       disabled={disabled}
@@ -40,42 +64,47 @@ export function BootDiskImageSelectField({
       placeholder={
         name === 'siloImageSource' ? 'Select a silo image' : 'Select a project image'
       }
-      items={images.map((i) => toImageComboboxItem(i))}
+      items={imageComboboxItems}
       required
-      onChange={(id) => {
-        const image = images.find((i) => i.id === id)
-        // the most likely scenario where image would be undefined is if the user has
-        // manually cleared the ComboboxField; they will need to pick a boot disk image
-        // in order to submit the form, so we don't need to do anything here
-        if (!image) return
-        const imageSizeGiB = image.size / GiB
-        if (diskSizeField.value < imageSizeGiB) {
-          diskSizeField.onChange(diskSizeNearest10(imageSizeGiB))
-        }
-      }}
+      onChange={(id) => handleChange(id || '')}
     />
   )
 }
 
+// Memoize expensive bytesToGiB calculations
+const sizeCache = new Map<number, string>()
+
+function getCachedSizeGiB(size: number): string {
+  if (!sizeCache.has(size)) {
+    sizeCache.set(size, `${bytesToGiB(size, 1)} GiB`)
+  }
+  return sizeCache.get(size)!
+}
+
 export function toImageComboboxItem(
   image: Image,
   includeProjectSiloIndicator = false
 ): ComboboxItem {
   const { id, name, os, projectId, size, version } = image
 
-  // for metadata showing in the dropdown's options, include the project / silo indicator if requested
   const projectSiloIndicator = includeProjectSiloIndicator
     ? `${projectId ? 'Project' : 'Silo'} image`
     : null
-  // filter out undefined metadata and create a `<Slash />`-separated list for each comboboxitem
-  const itemMetadata = [os, version, `${bytesToGiB(size, 1)} GiB`, projectSiloIndicator]
-    .filter((i) => !!i)
-    .map((i, index) => (
-      <span key={`${i}`}>
-        {index > 0 ? <Slash /> : ''}
-        {i}
-      </span>
-    ))
+
+  // Build metadata array more efficiently
+  const metadata = []
+  if (os) metadata.push(os)
+  if (version) metadata.push(version)
+  if (size) metadata.push(getCachedSizeGiB(size))
+  if (projectSiloIndicator) metadata.push(projectSiloIndicator)
+
+  const itemMetadata = metadata.map((item, index) => (
+    <span key={item}>
+      {index > 0 && <Slash />}
+      {item}
+    </span>
+  ))
+
   return {
     value: id,
     selectedLabel: name,
diff --git a/app/forms/disk-create.tsx b/app/forms/disk-create.tsx
index 16271e3d1..0a5522e39 100644
--- a/app/forms/disk-create.tsx
+++ b/app/forms/disk-create.tsx
@@ -6,6 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import { filesize } from 'filesize'
+import { useMemo } from 'react'
 import { useController, useForm, type Control } from 'react-hook-form'
 
 import {
@@ -84,52 +85,66 @@ export function CreateDiskSideModalForm({
   const projectImages = useApiQuery('imageList', { query: { project } })
   const siloImages = useApiQuery('imageList', {})
 
+  // Memoize real images array to prevent recreation on every render
   // put project images first because if there are any, there probably aren't
   // very many and they're probably relevant
-  const realImages = [
-    ...(projectImages.data?.items || []),
-    ...(siloImages.data?.items || []),
-  ]
+  const realImages = useMemo(
+    () => [...(projectImages.data?.items || []), ...(siloImages.data?.items || [])],
+    [projectImages.data?.items, siloImages.data?.items]
+  )
 
-  // TODO: REMOVE THIS AFTER STRESS TESTING IS DONE
-  // Generate 1000 mock items for stress testing
-  const mockImages: Image[] = Array.from({ length: 1000 }, (_, i) => ({
-    id: `mock-image-${i}`,
-    name: `Mock Image ${i.toString().padStart(4, '0')}`,
-    size: 1073741824, // 1GB
-    version: '1.0.0',
-    description: `This is mock image ${i} for stress testing the combobox`,
-    digest: {
-      type: 'sha256',
-      value: '0'.repeat(64),
-    },
-    blockSize: 512,
-    timeCreated: new Date(),
-    timeModified: new Date(),
-    os: 'linux',
-  }))
+  // Memoize mock images array (only create once)
+  const mockImages = useMemo((): Image[] => {
+    // TODO: REMOVE THIS AFTER STRESS TESTING IS DONE
+    // Generate 1000 mock items for stress testing
+    return Array.from({ length: 1000 }, (_, i) => ({
+      id: `mock-image-${i}`,
+      name: `Mock Image ${i.toString().padStart(4, '0')}`,
+      size: 1073741824, // 1GB
+      version: '1.0.0',
+      description: `This is mock image ${i} for stress testing the combobox`,
+      digest: {
+        type: 'sha256',
+        value: '0'.repeat(64),
+      },
+      blockSize: 512,
+      timeCreated: new Date(),
+      timeModified: new Date(),
+      os: 'linux',
+    }))
+  }, [])
 
-  const images = [...realImages, ...mockImages]
+  // Memoize combined images array
+  const images = useMemo(() => [...realImages, ...mockImages], [realImages, mockImages])
   const areImagesLoading = projectImages.isPending || siloImages.isPending
 
   const snapshotsQuery = useApiQuery('snapshotList', { query: { project } })
-  const snapshots = snapshotsQuery.data?.items || []
+  const snapshots = useMemo(
+    () => snapshotsQuery.data?.items || [],
+    [snapshotsQuery.data?.items]
+  )
 
-  // validate disk source size
-  const diskSource = form.watch('diskSource').type
+  // Use useController for targeted watching instead of form.watch() to reduce re-renders
+  const diskSourceController = useController({ control: form.control, name: 'diskSource' })
+  const diskSource = diskSourceController.field.value.type
 
-  let validateSizeGiB: number | undefined = undefined
-  if (diskSource === 'snapshot') {
-    const selectedSnapshotId = form.watch('diskSource.snapshotId')
-    const selectedSnapshotSize = snapshots.find(
-      (snapshot) => snapshot.id === selectedSnapshotId
-    )?.size
-    validateSizeGiB = selectedSnapshotSize ? bytesToGiB(selectedSnapshotSize) : undefined
-  } else if (diskSource === 'image') {
-    const selectedImageId = form.watch('diskSource.imageId')
-    const selectedImageSize = images.find((image) => image.id === selectedImageId)?.size
-    validateSizeGiB = selectedImageSize ? bytesToGiB(selectedImageSize) : undefined
-  }
+  // Memoize size validation to avoid expensive lookups on every render
+  const validateSizeGiB = useMemo(() => {
+    if (diskSource === 'snapshot') {
+      const selectedSnapshotId = diskSourceController.field.value.snapshotId
+      if (!selectedSnapshotId) return undefined
+      const selectedSnapshotSize = snapshots.find(
+        (snapshot) => snapshot.id === selectedSnapshotId
+      )?.size
+      return selectedSnapshotSize ? bytesToGiB(selectedSnapshotSize) : undefined
+    } else if (diskSource === 'image') {
+      const selectedImageId = diskSourceController.field.value.imageId
+      if (!selectedImageId) return undefined
+      const selectedImageSize = images.find((image) => image.id === selectedImageId)?.size
+      return selectedImageSize ? bytesToGiB(selectedImageSize) : undefined
+    }
+    return undefined
+  }, [diskSource, diskSourceController.field.value, snapshots, images])
 
   return (
     <SideModalForm
@@ -191,6 +206,12 @@ const DiskSourceField = ({
   } = useController({ control, name: 'diskSource' })
   const diskSizeField = useController({ control, name: 'size' }).field
 
+  // Memoize the expensive toImageComboboxItem mapping to avoid recalculating on every render
+  const imageComboboxItems = useMemo(
+    () => images.map((i) => toImageComboboxItem(i, true)),
+    [images]
+  )
+
   return (
     <>
       <div className="max-w-lg space-y-2">
@@ -235,10 +256,11 @@ const DiskSourceField = ({
             label="Source image"
             placeholder="Select an image"
             isLoading={areImagesLoading}
-            items={images.map((i) => toImageComboboxItem(i, true))}
+            items={imageComboboxItems}
             required
             onChange={(id) => {
-              const image = images.find((i) => i.id === id)! // if it's selected, it must be present
+              const image = images.find((i) => i.id === id)
+              if (!image) return
               const imageSizeGiB = image.size / GiB
               if (diskSizeField.value < imageSizeGiB) {
                 diskSizeField.onChange(diskSizeNearest10(imageSizeGiB))
@@ -269,16 +291,16 @@ const SnapshotSelectField = ({ control }: { control: Control<DiskCreate> }) => {
   const { project } = useProjectSelector()
   const snapshotsQuery = useApiQuery('snapshotList', { query: { project } })
 
-  const snapshots = snapshotsQuery.data?.items || []
+  const snapshots = useMemo(
+    () => snapshotsQuery.data?.items || [],
+    [snapshotsQuery.data?.items]
+  )
   const diskSizeField = useController({ control, name: 'size' }).field
 
-  return (
-    <ComboboxField
-      control={control}
-      name="diskSource.snapshotId"
-      label="Source snapshot"
-      placeholder="Select a snapshot"
-      items={snapshots.map((i) => {
+  // Memoize the expensive snapshot ComboboxItem mapping to avoid recalculating on every render
+  const snapshotComboboxItems = useMemo(
+    () =>
+      snapshots.map((i) => {
         const formattedSize = filesize(i.size, { base: 2, output: 'object' })
         return {
           value: i.id,
@@ -294,7 +316,17 @@ const SnapshotSelectField = ({ control }: { control: Control<DiskCreate> }) => {
             </>
           ),
         }
-      })}
+      }),
+    [snapshots]
+  )
+
+  return (
+    <ComboboxField
+      control={control}
+      name="diskSource.snapshotId"
+      label="Source snapshot"
+      placeholder="Select a snapshot"
+      items={snapshotComboboxItems}
       isLoading={snapshotsQuery.isPending}
       required
       onChange={(id) => {
diff --git a/app/ui/lib/Combobox.tsx b/app/ui/lib/Combobox.tsx
index 8652b213e..f29a997ad 100644
--- a/app/ui/lib/Combobox.tsx
+++ b/app/ui/lib/Combobox.tsx
@@ -15,6 +15,7 @@ import {
 } from '@headlessui/react'
 import { matchSorter } from 'match-sorter'
 import {
+  memo,
   useCallback,
   useEffect,
   useId,
@@ -23,6 +24,7 @@ import {
   type ReactNode,
   type Ref,
 } from 'react'
+import { useDebounce } from 'use-debounce'
 
 import { SelectArrows6Icon } from '@oxide/design-system/icons/react'
 
@@ -32,6 +34,23 @@ import { TextInputHint } from './TextInput'
 
 export type ComboboxItem = { value: string; label: ReactNode; selectedLabel: string }
 
+// Memoized component for individual options - only re-renders when focus/selected actually changes for THIS item
+const MemoizedComboboxOptionContent = memo(function ComboboxOptionContent({
+  item,
+  focus,
+  selected,
+}: {
+  item: ComboboxItem
+  focus: boolean
+  selected: boolean
+}) {
+  return (
+    <div className="ox-menu-item" data-selected={selected} data-highlighted={focus}>
+      {item.label}
+    </div>
+  )
+})
+
 /** Convert an array of items with a `name` attribute to an array of ComboboxItems
  *  Useful when the rendered label and value are the same; in more complex cases,
  *  you may want to create a custom ComboboxItem object (see toImageComboboxItem).
@@ -43,10 +62,23 @@ export const toComboboxItems = (items?: Array<{ name: string }>): Array<Combobox
     selectedLabel: name,
   })) || []
 
+// Create a cached lookup map for O(1) selectedLabel lookups
+const labelLookupCache = new WeakMap<Array<ComboboxItem>, Map<string, string>>()
+
 export const getSelectedLabelFromValue = (
   items: Array<ComboboxItem>,
   selectedValue: string
-): string => items.find((item) => item.value === selectedValue)?.selectedLabel || ''
+): string => {
+  if (!labelLookupCache.has(items)) {
+    // Create lookup map for this items array
+    const lookupMap = new Map<string, string>()
+    items.forEach((item) => lookupMap.set(item.value, item.selectedLabel))
+    labelLookupCache.set(items, lookupMap)
+  }
+
+  const lookupMap = labelLookupCache.get(items)!
+  return lookupMap.get(selectedValue) || ''
+}
 
 /** Simple non-generic props shared with ComboboxField */
 export type ComboboxBaseProps = {
@@ -111,8 +143,14 @@ export const Combobox = ({
     selectedItemValue ? (allowArbitraryValues ? selectedItemValue : selectedItemLabel) : ''
   )
 
+  // Debounce the query for filtering to reduce expensive operations while typing
+  const [debouncedQuery] = useDebounce(query, 150)
+
   // Memoize query processing to avoid recalculation on every render
-  const normalizedQuery = useMemo(() => query.toLowerCase().replace(/\s*/g, ''), [query])
+  const normalizedQuery = useMemo(
+    () => debouncedQuery.toLowerCase().replace(/\s*/g, ''),
+    [debouncedQuery]
+  )
 
   // Memoize filtered items to avoid re-filtering on every render
   const filteredItems = useMemo(() => {
@@ -123,28 +161,32 @@ export const Combobox = ({
   }, [items, normalizedQuery])
 
   // Memoize custom arbitrary value label to avoid recreation on every render
+  // Use immediate query (not debounced) so custom option appears immediately
   const customValueItem = useMemo(() => {
     if (
-      allowArbitraryValues &&
-      query.length > 0 &&
-      !filteredItems.some((i) => i.selectedLabel === query)
+      !allowArbitraryValues ||
+      query.length === 0 ||
+      filteredItems.some((i) => i.selectedLabel === query)
     ) {
-      return {
-        value: query,
-        label: (
-          <>
-            <span className="text-default">Custom:</span> {query}
-          </>
-        ),
-        selectedLabel: query,
-      }
+      return null
+    }
+    return {
+      value: query,
+      label: (
+        <>
+          <span className="text-default">Custom:</span> {query}
+        </>
+      ),
+      selectedLabel: query,
     }
-    return null
   }, [allowArbitraryValues, query, filteredItems])
 
   // Final items list with custom value if applicable
   const finalFilteredItems = useMemo(() => {
-    return customValueItem ? [...filteredItems, customValueItem] : filteredItems
+    const itemsWithCustomValue = customValueItem
+      ? [...filteredItems, customValueItem]
+      : filteredItems
+    return itemsWithCustomValue
   }, [filteredItems, customValueItem])
 
   // In the arbitraryValues case, clear the query whenever the value is cleared.
@@ -244,18 +286,20 @@ export const Combobox = ({
     return selectedItemValue
       ? allowArbitraryValues
         ? selectedItemValue
-        : selectedItemLabel
-      : query
+        : selectedItemLabel || ''
+      : query || ''
   }, [selectedItemValue, allowArbitraryValues, selectedItemLabel, query])
 
   return (
     <HCombobox
       // necessary, as the displayed "value" is not the same as the actual selected item's *value*
-      value={selectedItemValue}
+      value={selectedItemValue || ''}
       onChange={handleChange}
       onClose={onCloseHandler}
       disabled={disabled || isLoading}
       immediate
+      // Virtual scrolling requires string[] for options, but we have complex objects
+      // The current performance optimizations (memoization, callbacks, CSS) should handle 1000+ items well
       {...props}
     >
       {({ open }) => (
@@ -311,15 +355,11 @@ export const Combobox = ({
                   className="relative border-b border-secondary last:border-0"
                 >
                   {({ focus, selected }) => (
-                    // This *could* be done with data-[focus] and data-[selected] instead, but
-                    // it would be a lot more verbose. those can only be used with TW classes,
-                    // not our .is-selected and .is-highlighted, so we'd have to copy the pieces
-                    // of those rules one by one. Better to rely on the shared classes.
-                    <div
-                      className={`ox-menu-item ${selected ? 'is-selected' : ''} ${focus ? 'is-highlighted' : ''}`}
-                    >
-                      {item.label}
-                    </div>
+                    <MemoizedComboboxOptionContent
+                      item={item}
+                      focus={focus}
+                      selected={selected}
+                    />
                   )}
                 </ComboboxOption>
               ))}
diff --git a/app/ui/styles/components/menu-list.css b/app/ui/styles/components/menu-list.css
index 8f678db7d..95236605a 100644
--- a/app/ui/styles/components/menu-list.css
+++ b/app/ui/styles/components/menu-list.css
@@ -14,18 +14,22 @@
   @apply relative cursor-pointer px-3 py-2 text-sans-md text-raise;
 }
 
+.ox-menu-item[data-highlighted='true'],
 .ox-menu-item.is-highlighted {
   @apply bg-hover;
 }
 
+.ox-menu-item[data-highlighted='true'][data-selected='true'],
 .ox-menu-item.is-highlighted.is-selected {
   @apply bg-accent-secondary-hover;
 }
 
+.ox-menu-item[data-selected='true'][data-highlighted],
 .ox-menu-item.is-selected[data-highlighted] {
   @apply bg-accent-secondary-hover;
 }
 
+.ox-menu-item[data-selected='true'],
 .ox-menu-item.is-selected {
   @apply border-0 text-accent bg-accent-secondary hover:bg-accent-secondary-hover;
   .ox-badge {
@@ -34,6 +38,7 @@
 }
 
 /* beautiful ring */
+.ox-menu-item[data-selected='true']:after,
 .ox-menu-item.is-selected:after {
   content: '';
   @apply absolute bottom-0 left-0 right-0 top-0 block rounded border border-accent;

From e4133563ebdc346ef469a6696a4696f9108f1dad Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Wed, 23 Jul 2025 18:53:46 -0700
Subject: [PATCH 9/9] virtualize long combobox lists

---
 app/components/form/fields/ComboboxField.tsx |   2 +-
 app/ui/lib/Combobox.tsx                      | 185 +++++++++++++------
 app/ui/lib/MiniTable.tsx                     |   3 +-
 package-lock.json                            |  49 +++++
 package.json                                 |   3 +
 5 files changed, 182 insertions(+), 60 deletions(-)

diff --git a/app/components/form/fields/ComboboxField.tsx b/app/components/form/fields/ComboboxField.tsx
index 885e7e78b..b31696eac 100644
--- a/app/components/form/fields/ComboboxField.tsx
+++ b/app/components/form/fields/ComboboxField.tsx
@@ -25,7 +25,7 @@ import { capitalize } from '~/util/str'
 
 import { ErrorMessage } from './ErrorMessage'
 
-export type ComboboxFieldProps<
+type ComboboxFieldProps<
   TFieldValues extends FieldValues,
   TName extends FieldPath<TFieldValues>,
 > = {
diff --git a/app/ui/lib/Combobox.tsx b/app/ui/lib/Combobox.tsx
index f29a997ad..8b04571be 100644
--- a/app/ui/lib/Combobox.tsx
+++ b/app/ui/lib/Combobox.tsx
@@ -24,6 +24,7 @@ import {
   type ReactNode,
   type Ref,
 } from 'react'
+import { FixedSizeList as List } from 'react-window'
 import { useDebounce } from 'use-debounce'
 
 import { SelectArrows6Icon } from '@oxide/design-system/icons/react'
@@ -51,6 +52,46 @@ const MemoizedComboboxOptionContent = memo(function ComboboxOptionContent({
   )
 })
 
+type VirtualizedItemProps = {
+  index: number
+  style: React.CSSProperties
+  data: {
+    items: ComboboxItem[]
+    selectedValue: string
+    onSelect: (value: string) => void
+    query: string
+  }
+}
+
+// Virtualized item component for react-window
+const VirtualizedItem = memo(function VirtualizedItem({
+  index,
+  style,
+  data,
+}: VirtualizedItemProps) {
+  const item = data.items[index]
+  const isSelected = item.value === data.selectedValue
+
+  return (
+    <div style={style}>
+      <ComboboxOption
+        value={item.value}
+        className="relative border-b border-secondary last:border-0"
+        onClick={() => data.onSelect(item.value)}
+      >
+        {({ focus, selected }) => (
+          <MemoizedComboboxOptionContent
+            item={item}
+            focus={focus}
+            selected={(selected || isSelected) && item.value !== data.query}
+          />
+        )}
+      </ComboboxOption>
+    </div>
+  )
+})
+
+// === UTILITY FUNCTIONS ===
 /** Convert an array of items with a `name` attribute to an array of ComboboxItems
  *  Useful when the rendered label and value are the same; in more complex cases,
  *  you may want to create a custom ComboboxItem object (see toImageComboboxItem).
@@ -119,6 +160,7 @@ type ComboboxProps = {
   inputRef?: Ref<HTMLInputElement>
 } & ComboboxBaseProps
 
+// === MAIN COMPONENT ===
 export const Combobox = ({
   description,
   items = [],
@@ -142,6 +184,7 @@ export const Combobox = ({
   const [query, setQuery] = useState(() =>
     selectedItemValue ? (allowArbitraryValues ? selectedItemValue : selectedItemLabel) : ''
   )
+  const [itemHeight, setItemHeight] = useState<number | null>(null) // Will be measured from actual DOM
 
   // Debounce the query for filtering to reduce expensive operations while typing
   const [debouncedQuery] = useDebounce(query, 150)
@@ -189,6 +232,27 @@ export const Combobox = ({
     return itemsWithCustomValue
   }, [filteredItems, customValueItem])
 
+  // Limit items to 1 during measurement phase, all items after
+  const itemsToRender = useMemo(() => {
+    if (itemHeight === null) {
+      return finalFilteredItems.slice(0, 1) // Only first item for measurement
+    }
+    return finalFilteredItems // All items after measurement
+  }, [finalFilteredItems, itemHeight])
+
+  // Callback ref to measure item height immediately when element is available
+  const measureCallbackRef = useCallback(
+    (element: HTMLElement | null) => {
+      if (element && itemHeight === null) {
+        const height = element.getBoundingClientRect().height
+        if (height > 0) {
+          setItemHeight(Math.ceil(height))
+        }
+      }
+    },
+    [itemHeight]
+  )
+
   // In the arbitraryValues case, clear the query whenever the value is cleared.
   // this is necessary, e.g., for the firewall rules form when you submit the
   // targets subform and clear the field. Two possible changes we might want to make
@@ -242,41 +306,19 @@ export const Combobox = ({
     [onEnter]
   )
 
-  const zIndex = usePopoverZIndex()
-  const id = useId()
-
-  const containerClassName = useMemo(
-    () =>
-      `flex rounded border focus-within:ring-2 ${
-        hasError
-          ? 'focus-error border-error-secondary focus-within:ring-error-secondary hover:border-error'
-          : 'border-default focus-within:ring-accent-secondary hover:border-hover'
-      } ${
-        disabled
-          ? 'cursor-not-allowed text-disabled bg-disabled !border-default'
-          : 'bg-default'
-      } ${disabled && hasError ? '!border-error-secondary' : ''}`,
-    [hasError, disabled]
-  )
-
-  const inputClassName = useMemo(
-    () =>
-      `h-10 w-full rounded !border-none px-3 py-2 !outline-none text-sans-md text-raise placeholder:text-tertiary ${disabled ? 'cursor-not-allowed text-disabled bg-disabled !border-default' : 'bg-default'} ${hasError ? 'focus-error' : ''}`,
-    [hasError, disabled]
+  // Memoize itemData for virtual list to prevent unnecessary re-renders
+  const virtualItemData = useMemo(
+    () => ({
+      items: finalFilteredItems,
+      selectedValue: selectedItemValue || '',
+      onSelect: handleChange,
+      query,
+    }),
+    [finalFilteredItems, selectedItemValue, handleChange, query]
   )
 
-  const buttonClassName = useMemo(
-    () =>
-      `my-1.5 flex items-center border-l px-3 border-secondary ${disabled ? 'cursor-not-allowed bg-disabled' : 'bg-default'}`,
-    [disabled]
-  )
-
-  // 13px gap is presumably because it's measured from inside the outline or something
-  const optionsClassName = useMemo(
-    () =>
-      `ox-menu pointer-events-auto ${zIndex} relative w-[calc(var(--input-width)+var(--button-width))] overflow-y-auto border !outline-none border-secondary [--anchor-gap:13px] empty:hidden`,
-    [zIndex]
-  )
+  const zIndex = usePopoverZIndex()
+  const id = useId()
 
   // Memoize input value computation to avoid recalculation on every render
   // If an option has been selected, display either the selected item's label or value.
@@ -298,8 +340,6 @@ export const Combobox = ({
       onClose={onCloseHandler}
       disabled={disabled || isLoading}
       immediate
-      // Virtual scrolling requires string[] for options, but we have complex objects
-      // The current performance optimizations (memoization, callbacks, CSS) should handle 1000+ items well
       {...props}
     >
       {({ open }) => (
@@ -319,7 +359,15 @@ export const Combobox = ({
             </div>
           )}
           <div
-            className={containerClassName}
+            className={`flex rounded border focus-within:ring-2 ${
+              hasError
+                ? 'focus-error border-error-secondary focus-within:ring-error-secondary hover:border-error'
+                : 'border-default focus-within:ring-accent-secondary hover:border-hover'
+            } ${
+              disabled
+                ? 'cursor-not-allowed text-disabled bg-disabled !border-default'
+                : 'bg-default'
+            } ${disabled && hasError ? '!border-error-secondary' : ''}`}
             // Putting the inputRef on the div makes it so the div can be focused by RHF when there's an error.
             // We want to focus on the div (rather than the input) so the combobox doesn't open automatically
             // and obscure the error message.
@@ -334,10 +382,13 @@ export const Combobox = ({
               onKeyDown={(e) => handleKeyDown(e, open)}
               placeholder={placeholder}
               disabled={disabled || isLoading}
-              className={inputClassName}
+              className={`h-10 w-full rounded !border-none px-3 py-2 !outline-none text-sans-md text-raise placeholder:text-tertiary ${disabled ? 'cursor-not-allowed text-disabled bg-disabled !border-default' : 'bg-default'} ${hasError ? 'focus-error' : ''}`}
             />
             {items.length > 0 && (
-              <ComboboxButton className={buttonClassName} aria-hidden>
+              <ComboboxButton
+                className={`my-1.5 flex items-center border-l px-3 border-secondary ${disabled ? 'cursor-not-allowed bg-disabled' : 'bg-default'}`}
+                aria-hidden
+              >
                 <SelectArrows6Icon title="Select" className="w-2 text-secondary" />
               </ComboboxButton>
             )}
@@ -345,28 +396,46 @@ export const Combobox = ({
           {(items.length > 0 || allowArbitraryValues) && (
             <ComboboxOptions
               anchor="bottom start"
-              className={optionsClassName}
+              className={`ox-menu pointer-events-auto ${zIndex} relative w-[calc(var(--input-width)+var(--button-width))] overflow-y-auto border !outline-none border-secondary [--anchor-gap:13px] empty:hidden`}
               modal={false}
             >
-              {finalFilteredItems.map((item) => (
-                <ComboboxOption
-                  key={item.value}
-                  value={item.value}
-                  className="relative border-b border-secondary last:border-0"
-                >
-                  {({ focus, selected }) => (
-                    <MemoizedComboboxOptionContent
-                      item={item}
-                      focus={focus}
-                      selected={selected}
-                    />
-                  )}
-                </ComboboxOption>
-              ))}
-              {!allowArbitraryValues && finalFilteredItems.length === 0 && (
-                <ComboboxOption disabled value="no-matches" className="relative">
-                  <div className="ox-menu-item !text-disabled">No items match</div>
-                </ComboboxOption>
+              {finalFilteredItems.length > 0 ? (
+                itemHeight === null || finalFilteredItems.length <= 100 ? (
+                  // Regular rendering: 1 item during measurement, all items for small lists
+                  itemsToRender.map((item) => (
+                    <ComboboxOption
+                      key={item.value}
+                      value={item.value}
+                      className="relative border-b border-secondary last:border-0"
+                      ref={itemHeight === null ? measureCallbackRef : undefined}
+                    >
+                      {({ focus, selected }) => (
+                        <MemoizedComboboxOptionContent
+                          item={item}
+                          focus={focus}
+                          selected={selected && item.value !== query}
+                        />
+                      )}
+                    </ComboboxOption>
+                  ))
+                ) : (
+                  // Virtualized rendering for large lists (after measurement)
+                  <List
+                    height={Math.min(finalFilteredItems.length * itemHeight, 400)}
+                    width="100%"
+                    itemCount={finalFilteredItems.length}
+                    itemSize={itemHeight}
+                    itemData={virtualItemData}
+                  >
+                    {VirtualizedItem}
+                  </List>
+                )
+              ) : (
+                !allowArbitraryValues && (
+                  <ComboboxOption disabled value="no-matches" className="relative">
+                    <div className="ox-menu-item !text-disabled">No items match</div>
+                  </ComboboxOption>
+                )
               )}
             </ComboboxOptions>
           )}
diff --git a/app/ui/lib/MiniTable.tsx b/app/ui/lib/MiniTable.tsx
index 18e31fc0f..37bff5412 100644
--- a/app/ui/lib/MiniTable.tsx
+++ b/app/ui/lib/MiniTable.tsx
@@ -144,7 +144,8 @@ export function MiniTable<T>({
         {columns.map((column, index) => (
           <HeadCell key={index}>{column.header}</HeadCell>
         ))}
-        <HeadCell /> {/* For remove button */}
+        {/* For remove button column */}
+        <HeadCell />
       </Header>
 
       <Body>
diff --git a/package-lock.json b/package-lock.json
index 6a37219d4..026339ba0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42,6 +42,8 @@
         "react-merge-refs": "^2.1.1",
         "react-router": "^7.5.3",
         "react-stately": "^3.32.2",
+        "react-window": "^1.8.11",
+        "react-window-infinite-loader": "^1.0.10",
         "recharts": "^2.15.1",
         "remeda": "^2.14.0",
         "simplebar-react": "^3.2.6",
@@ -67,6 +69,7 @@
         "@types/react": "^19.1.2",
         "@types/react-dom": "^19.1.2",
         "@types/react-is": "^19.0.0",
+        "@types/react-window": "^1.8.8",
         "@types/semver": "^7.5.8",
         "@types/uuid": "^10.0.0",
         "@typescript-eslint/eslint-plugin": "~8.30.1",
@@ -4881,6 +4884,16 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-window": {
+      "version": "1.8.8",
+      "resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.8.tgz",
+      "integrity": "sha512-8Ls660bHR1AUA2kuRvVG9D/4XpRC6wjAaPT9dil7Ckc76eP9TKWZwwmgfq8Q1LANX3QNDnoU4Zp48A3w+zK69Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/retry": {
       "version": "0.12.2",
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.2.tgz",
@@ -10155,6 +10168,12 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==",
+      "license": "MIT"
+    },
     "node_modules/merge-descriptors": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
@@ -12202,6 +12221,36 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/react-window": {
+      "version": "1.8.11",
+      "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.11.tgz",
+      "integrity": "sha512-+SRbUVT2scadgFSWx+R1P754xHPEqvcfSfVX10QYg6POOz+WNgkN48pS+BtZNIMGiL1HYrSEiCkwsMS15QogEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.0.0",
+        "memoize-one": ">=3.1.1 <6"
+      },
+      "engines": {
+        "node": ">8.0.0"
+      },
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/react-window-infinite-loader": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/react-window-infinite-loader/-/react-window-infinite-loader-1.0.10.tgz",
+      "integrity": "sha512-NO/csdHlxjWqA2RJZfzQgagAjGHspbO2ik9GtWZb0BY1Nnapq0auG8ErI+OhGCzpjYJsCYerqUlK6hkq9dfAAA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">8.0.0"
+      },
+      "peerDependencies": {
+        "react": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index 57f9bf1d6..7a4041ffa 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,8 @@
     "react-merge-refs": "^2.1.1",
     "react-router": "^7.5.3",
     "react-stately": "^3.32.2",
+    "react-window": "^1.8.11",
+    "react-window-infinite-loader": "^1.0.10",
     "recharts": "^2.15.1",
     "remeda": "^2.14.0",
     "simplebar-react": "^3.2.6",
@@ -90,6 +92,7 @@
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
     "@types/react-is": "^19.0.0",
+    "@types/react-window": "^1.8.8",
     "@types/semver": "^7.5.8",
     "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "~8.30.1",