From c8c97d03f44eb2e8a8ce6037803689bb39e585eb Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Thu, 11 Jun 2026 18:11:44 -0700
Subject: [PATCH] Add OS and version columns to image lists

---
 app/pages/SiloImagesPage.tsx            |  8 ++++++++
 app/pages/project/images/ImagesPage.tsx |  8 ++++++++
 test/e2e/images.e2e.ts                  | 19 +++++++++++++++++++
 3 files changed, 35 insertions(+)

diff --git a/app/pages/SiloImagesPage.tsx b/app/pages/SiloImagesPage.tsx
index 6a830e377..d723ac882 100644
--- a/app/pages/SiloImagesPage.tsx
+++ b/app/pages/SiloImagesPage.tsx
@@ -23,6 +23,7 @@ import { HL } from '~/components/HL'
 import { useQuickActions } from '~/hooks/use-quick-actions'
 import { confirmDelete } from '~/stores/confirm-delete'
 import { addToast } from '~/stores/toast'
+import { EmptyCell } from '~/table/cells/EmptyCell'
 import { makeLinkCell } from '~/table/cells/LinkCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
@@ -60,6 +61,13 @@ const staticCols = [
     cell: makeLinkCell((image) => pb.siloImageEdit({ image })),
   }),
   colHelper.accessor('description', Columns.description),
+  colHelper.accessor('os', {
+    header: 'OS',
+    cell: (info) => info.getValue() || <EmptyCell />,
+  }),
+  colHelper.accessor('version', {
+    cell: (info) => info.getValue() || <EmptyCell />,
+  }),
   colHelper.accessor('size', Columns.size),
   colHelper.accessor('timeCreated', Columns.timeCreated),
 ]
diff --git a/app/pages/project/images/ImagesPage.tsx b/app/pages/project/images/ImagesPage.tsx
index f3e788007..6c61da609 100644
--- a/app/pages/project/images/ImagesPage.tsx
+++ b/app/pages/project/images/ImagesPage.tsx
@@ -20,6 +20,7 @@ import { getProjectSelector, useProjectSelector } from '~/hooks/use-params'
 import { useQuickActions } from '~/hooks/use-quick-actions'
 import { confirmDelete } from '~/stores/confirm-delete'
 import { addToast } from '~/stores/toast'
+import { EmptyCell } from '~/table/cells/EmptyCell'
 import { makeLinkCell } from '~/table/cells/LinkCell'
 import { getActionsCol, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
@@ -98,6 +99,13 @@ export default function ImagesPage() {
         cell: makeLinkCell((image) => pb.projectImageEdit({ project, image })),
       }),
       colHelper.accessor('description', Columns.description),
+      colHelper.accessor('os', {
+        header: 'OS',
+        cell: (info) => info.getValue() || <EmptyCell />,
+      }),
+      colHelper.accessor('version', {
+        cell: (info) => info.getValue() || <EmptyCell />,
+      }),
       colHelper.accessor('size', Columns.size),
       colHelper.accessor('timeCreated', Columns.timeCreated),
       getActionsCol(makeActions),
diff --git a/test/e2e/images.e2e.ts b/test/e2e/images.e2e.ts
index 1c3ef736c..278f3a831 100644
--- a/test/e2e/images.e2e.ts
+++ b/test/e2e/images.e2e.ts
@@ -12,12 +12,31 @@ import {
   clipboardText,
   expect,
   expectNotVisible,
+  expectRowVisible,
   expectToast,
   expectVisible,
   getPageAsUser,
   selectOption,
 } from './utils'
 
+test('shows OS and Version columns', async ({ page }) => {
+  await page.goto('/images')
+  await expectRowVisible(page.getByRole('table'), {
+    name: 'ubuntu-22-04',
+    OS: 'ubuntu',
+    version: '22.04',
+    size: '1 GiB',
+  })
+
+  await page.goto('/projects/mock-project/images')
+  await expectRowVisible(page.getByRole('table'), {
+    name: 'image-1',
+    OS: 'alpine',
+    version: 'edge1',
+    size: '4 GiB',
+  })
+})
+
 test('can promote an image from silo', async ({ page }) => {
   await page.goto('/images')
   await page.click('role=button[name="Promote image"]')