From 4c2839f633628f4f678bf5b1df093f49631da4f5 Mon Sep 17 00:00:00 2001
From: Alex Ray <alray@nvidia.com>
Date: Tue, 16 Jun 2026 15:45:01 -0700
Subject: [PATCH 1/2] refactor(studio): replace deprecated ReadOnlyField with
 KVPair (ASTD-227)

Migrate all usages of the deprecated ReadOnlyField component to KVPair
from @nemo/common and delete the deprecated file.

Signed-off-by: Alex Ray <alray@nvidia.com>
---
 .../src/components/common/ReadOnlyField.tsx   | 39 ----------------
 .../ConfigurationDetailsPanel.tsx             |  8 ++--
 .../Configurations/LLMJudgeDisplay.tsx        | 16 +++----
 .../Configurations/MetricDisplay.tsx          | 44 +++++++++----------
 .../evaluation/Configurations/TaskDisplay.tsx |  8 ++--
 5 files changed, 36 insertions(+), 79 deletions(-)
 delete mode 100644 web/packages/studio/src/components/common/ReadOnlyField.tsx

diff --git a/web/packages/studio/src/components/common/ReadOnlyField.tsx b/web/packages/studio/src/components/common/ReadOnlyField.tsx
deleted file mode 100644
index 4e129454c1..0000000000
--- a/web/packages/studio/src/components/common/ReadOnlyField.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
-// SPDX-License-Identifier: Apache-2.0
-
-import { Flex, Text } from '@nvidia/foundations-react-core';
-import { FC, ReactNode } from 'react';
-
-export interface ReadOnlyFieldProps {
-  label: string;
-  value: ReactNode;
-  className?: string;
-  /** Vertical alignment of label and value. Defaults to "start" for better multi-line content support */
-  align?: 'start' | 'center' | 'end';
-}
-
-// TODO: Remove this component in issue #1132
-/**
- * A reusable component for displaying label/value pairs in read-only mode.
- * Uses tabular layout with fixed label width and aligned values.
- *
- * @deprecated Use KVPair from @nemo/common instead. This component will be removed in a future release.
- * Import: `import { KVPair } from '@nemo/common/src/components/KVPair';`
- */
-export const ReadOnlyField: FC<ReadOnlyFieldProps> = ({
-  label,
-  value,
-  className,
-  align = 'start',
-}) => {
-  return (
-    <Flex align={align} gap="density-md" className={className}>
-      <Text kind="label/regular/md" className="text-subtle w-[140px] flex-shrink-0">
-        {label}
-      </Text>
-      <Text kind="body/regular/md" className="text-wrap">
-        {value || '-'}
-      </Text>
-    </Flex>
-  );
-};
diff --git a/web/packages/studio/src/components/evaluation/Configurations/ConfigurationDetailsPanel.tsx b/web/packages/studio/src/components/evaluation/Configurations/ConfigurationDetailsPanel.tsx
index b6b644a274..4583343828 100644
--- a/web/packages/studio/src/components/evaluation/Configurations/ConfigurationDetailsPanel.tsx
+++ b/web/packages/studio/src/components/evaluation/Configurations/ConfigurationDetailsPanel.tsx
@@ -1,8 +1,8 @@
 // SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
 // SPDX-License-Identifier: Apache-2.0
 
+import { KVPair } from '@nemo/common/src/components/KVPair';
 import { Divider, Stack, Tag, Text } from '@nvidia/foundations-react-core';
-import { ReadOnlyField } from '@studio/components/common/ReadOnlyField';
 import { TaskDisplay } from '@studio/components/evaluation/Configurations/TaskDisplay';
 import { useWorkspaceFromPath } from '@studio/hooks/useWorkspaceFromPath';
 import {
@@ -48,11 +48,11 @@ export const ConfigurationDetailsPanel: FC<ConfigurationDetailsPanelProps> = ({
   return (
     <Stack gap="density-2xl" className={`overflow-y-auto w-full ${className || ''}`}>
       <Stack gap="density-2xl" className="w-full">
-        <ReadOnlyField label="Configuration Name" value={configName} />
-        <ReadOnlyField label="Configuration ID" value={configId} />
+        <KVPair label="Configuration Name" value={configName} />
+        <KVPair label="Configuration ID" value={configId} />
 
         {tags && tags.length > 0 && (
-          <ReadOnlyField
+          <KVPair
             label="Tags"
             value={
               <Stack gap="density-sm" direction="row">
diff --git a/web/packages/studio/src/components/evaluation/Configurations/LLMJudgeDisplay.tsx b/web/packages/studio/src/components/evaluation/Configurations/LLMJudgeDisplay.tsx
index 8614e6e4d6..620e950f12 100644
--- a/web/packages/studio/src/components/evaluation/Configurations/LLMJudgeDisplay.tsx
+++ b/web/packages/studio/src/components/evaluation/Configurations/LLMJudgeDisplay.tsx
@@ -1,9 +1,9 @@
 // SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
 // SPDX-License-Identifier: Apache-2.0
 
+import { KVPair } from '@nemo/common/src/components/KVPair';
 import { Stack, Text } from '@nvidia/foundations-react-core';
 import { Pre } from '@studio/components/common/Pre';
-import { ReadOnlyField } from '@studio/components/common/ReadOnlyField';
 import { FC } from 'react';
 
 const getStr = (params: Record<string, unknown> | undefined, key: string): string | undefined => {
@@ -46,20 +46,20 @@ export const LLMJudgeDisplay: FC<LLMJudgeDisplayProps> = ({ metricName, metricCo
   return (
     <Stack gap="density-2xl">
       <Text kind="label/bold/md">{metricName}</Text>
-      <ReadOnlyField label="Type" value={metricConfig.type} />
+      <KVPair label="Type" value={metricConfig.type} />
 
       <Stack gap="density-2xl">
-        <ReadOnlyField label="Model" value={modelName} />
-        <ReadOnlyField
+        <KVPair label="Model" value={modelName} />
+        <KVPair
           label="System Message"
-          value={systemMessage ? <Pre>{systemMessage}</Pre> : '-'}
+          value={systemMessage ? <Pre>{systemMessage}</Pre> : undefined}
         />
-        <ReadOnlyField label="User Message" value={userMessage ? <Pre>{userMessage}</Pre> : '-'} />
+        <KVPair label="User Message" value={userMessage ? <Pre>{userMessage}</Pre> : undefined} />
       </Stack>
 
       <Stack gap="density-2xl">
-        <ReadOnlyField label="Score Type" value={scoreType || '-'} />
-        <ReadOnlyField label="Parser Pattern" value={parserPattern || '-'} />
+        <KVPair label="Score Type" value={scoreType} />
+        <KVPair label="Parser Pattern" value={parserPattern} />
       </Stack>
     </Stack>
   );
diff --git a/web/packages/studio/src/components/evaluation/Configurations/MetricDisplay.tsx b/web/packages/studio/src/components/evaluation/Configurations/MetricDisplay.tsx
index 7ff81bf965..362b0c9eea 100644
--- a/web/packages/studio/src/components/evaluation/Configurations/MetricDisplay.tsx
+++ b/web/packages/studio/src/components/evaluation/Configurations/MetricDisplay.tsx
@@ -1,9 +1,9 @@
 // SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
 // SPDX-License-Identifier: Apache-2.0
 
+import { KVPair } from '@nemo/common/src/components/KVPair';
 import { Stack, Text } from '@nvidia/foundations-react-core';
 import { Pre } from '@studio/components/common/Pre';
-import { ReadOnlyField } from '@studio/components/common/ReadOnlyField';
 import { FC } from 'react';
 
 export interface MetricDisplayProps {
@@ -28,69 +28,65 @@ export const MetricDisplay: FC<MetricDisplayProps> = ({ metricName, metricConfig
   return (
     <Stack gap="density-sm">
       <Text kind="label/bold/md">{metricName}</Text>
-      <ReadOnlyField label="Type" value={metricConfig.type} />
+      <KVPair label="Type" value={metricConfig.type} />
 
       {type === 'string-check' && (
-        <ReadOnlyField
+        <KVPair
           label="Check Pattern"
           value={
-            params.check ? (
-              Array.isArray(params.check) ? (
-                <Pre>{params.check.join(',')}</Pre>
-              ) : (
-                String(params.check)
-              )
-            ) : (
-              '-'
-            )
+            params.check
+              ? Array.isArray(params.check)
+                ? params.check.join(',')
+                : String(params.check)
+              : undefined
           }
         />
       )}
 
       {type === 'bleu' && (
         <>
-          <ReadOnlyField
+          <KVPair
             label="References"
-            value={params.references ? <Pre>{String(params.references)}</Pre> : '-'}
+            value={params.references ? <Pre>{String(params.references)}</Pre> : undefined}
           />
           {params.candidate && (
-            <ReadOnlyField label="Candidate" value={<Pre>{String(params.candidate)}</Pre>} />
+            <KVPair label="Candidate" value={<Pre>{String(params.candidate)}</Pre>} />
           )}
         </>
       )}
 
       {type === 'rouge' && (
         <>
-          <ReadOnlyField
+          <KVPair
             label="Ground Truth Reference"
-            value={params.ground_truth ? <Pre>{String(params.ground_truth)}</Pre> : '-'}
+            value={params.ground_truth ? <Pre>{String(params.ground_truth)}</Pre> : undefined}
           />
           {params.prediction && (
-            <ReadOnlyField label="Prediction" value={<Pre>{String(params.prediction)}</Pre>} />
+            <KVPair label="Prediction" value={<Pre>{String(params.prediction)}</Pre>} />
           )}
         </>
       )}
 
       {type === 'em' && (
         <>
-          <ReadOnlyField
+          <KVPair
             label="Ground Truth Reference"
-            value={params.ground_truth ? <Pre>{String(params.ground_truth)}</Pre> : '-'}
+            value={params.ground_truth ? <Pre>{String(params.ground_truth)}</Pre> : undefined}
           />
           {params.prediction && (
-            <ReadOnlyField label="Prediction" value={<Pre>{String(params.prediction)}</Pre>} />
+            <KVPair label="Prediction" value={<Pre>{String(params.prediction)}</Pre>} />
           )}
         </>
       )}
 
       {type === 'f1' && (
         <>
-          <ReadOnlyField
+          <KVPair
             label="Ground Truth Reference"
-            value={params.ground_truth ? <Pre>{String(params.ground_truth)}</Pre> : '-'}
+            value={params.ground_truth ? <Pre>{String(params.ground_truth)}</Pre> : undefined}
           />
           {params.prediction && (
-            <ReadOnlyField label="Prediction" value={<Pre>{String(params.prediction)}</Pre>} />
+            <KVPair label="Prediction" value={<Pre>{String(params.prediction)}</Pre>} />
           )}
         </>
       )}
diff --git a/web/packages/studio/src/components/evaluation/Configurations/TaskDisplay.tsx b/web/packages/studio/src/components/evaluation/Configurations/TaskDisplay.tsx
index 87575b1f1a..3434914de0 100644
--- a/web/packages/studio/src/components/evaluation/Configurations/TaskDisplay.tsx
+++ b/web/packages/studio/src/components/evaluation/Configurations/TaskDisplay.tsx
@@ -1,8 +1,8 @@
 // SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
 // SPDX-License-Identifier: Apache-2.0
 
+import { KVPair } from '@nemo/common/src/components/KVPair';
 import { Stack, Text } from '@nvidia/foundations-react-core';
-import { ReadOnlyField } from '@studio/components/common/ReadOnlyField';
 import { LLMJudgeDisplay } from '@studio/components/evaluation/Configurations/LLMJudgeDisplay';
 import { MetricDisplay } from '@studio/components/evaluation/Configurations/MetricDisplay';
 import { DatasetFileLink } from '@studio/components/evaluation/DatasetFileLink';
@@ -36,10 +36,10 @@ export const TaskDisplay: FC<{
 
   return (
     <Stack gap="density-xl" className="w-full">
-      <ReadOnlyField label="Task Name" value={taskName} />
-      <ReadOnlyField label="Target Type" value={targetType} />
+      <KVPair label="Task Name" value={taskName} />
+      <KVPair label="Target Type" value={targetType} />
       {filesetInfo && (
-        <ReadOnlyField
+        <KVPair
           label="Input File"
           value={<DatasetFileLink label={filesetInfo.fileDisplayName} url={filesetInfo.linkUrl} />}
         />

From 156908a7a2d4f08c16fe35972ad6eacf6281a8eb Mon Sep 17 00:00:00 2001
From: Alex Ray <alray@nvidia.com>
Date: Mon, 22 Jun 2026 10:30:50 -0700
Subject: [PATCH 2/2] fix(studio): use nullish checks for metric params to
 preserve falsy values (ASTD-227)

Signed-off-by: Alex Ray <alray@nvidia.com>
---
 .../Configurations/MetricDisplay.tsx          | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/web/packages/studio/src/components/evaluation/Configurations/MetricDisplay.tsx b/web/packages/studio/src/components/evaluation/Configurations/MetricDisplay.tsx
index 362b0c9eea..c93f312d73 100644
--- a/web/packages/studio/src/components/evaluation/Configurations/MetricDisplay.tsx
+++ b/web/packages/studio/src/components/evaluation/Configurations/MetricDisplay.tsx
@@ -34,7 +34,7 @@ export const MetricDisplay: FC<MetricDisplayProps> = ({ metricName, metricConfig
         <KVPair
           label="Check Pattern"
           value={
-            params.check
+            params.check != null
               ? Array.isArray(params.check)
                 ? params.check.join(',')
                 : String(params.check)
@@ -47,9 +47,9 @@ export const MetricDisplay: FC<MetricDisplayProps> = ({ metricName, metricConfig
         <>
           <KVPair
             label="References"
-            value={params.references ? <Pre>{String(params.references)}</Pre> : undefined}
+            value={params.references != null ? <Pre>{String(params.references)}</Pre> : undefined}
           />
-          {params.candidate && (
+          {params.candidate != null && (
             <KVPair label="Candidate" value={<Pre>{String(params.candidate)}</Pre>} />
           )}
         </>
@@ -59,9 +59,11 @@ export const MetricDisplay: FC<MetricDisplayProps> = ({ metricName, metricConfig
         <>
           <KVPair
             label="Ground Truth Reference"
-            value={params.ground_truth ? <Pre>{String(params.ground_truth)}</Pre> : undefined}
+            value={
+              params.ground_truth != null ? <Pre>{String(params.ground_truth)}</Pre> : undefined
+            }
           />
-          {params.prediction && (
+          {params.prediction != null && (
             <KVPair label="Prediction" value={<Pre>{String(params.prediction)}</Pre>} />
           )}
         </>
@@ -71,9 +73,11 @@ export const MetricDisplay: FC<MetricDisplayProps> = ({ metricName, metricConfig
         <>
           <KVPair
             label="Ground Truth Reference"
-            value={params.ground_truth ? <Pre>{String(params.ground_truth)}</Pre> : undefined}
+            value={
+              params.ground_truth != null ? <Pre>{String(params.ground_truth)}</Pre> : undefined
+            }
           />
-          {params.prediction && (
+          {params.prediction != null && (
             <KVPair label="Prediction" value={<Pre>{String(params.prediction)}</Pre>} />
           )}
         </>
@@ -83,9 +87,11 @@ export const MetricDisplay: FC<MetricDisplayProps> = ({ metricName, metricConfig
         <>
           <KVPair
             label="Ground Truth Reference"
-            value={params.ground_truth ? <Pre>{String(params.ground_truth)}</Pre> : undefined}
+            value={
+              params.ground_truth != null ? <Pre>{String(params.ground_truth)}</Pre> : undefined
+            }
           />
-          {params.prediction && (
+          {params.prediction != null && (
             <KVPair label="Prediction" value={<Pre>{String(params.prediction)}</Pre>} />
           )}
         </>