fix(studio): experiment detail view UI polish (ASE-365/366/367)

web/packages/studio/src/components/dataViews/ExperimentSessionsDataView/index.tsx

@@ -123,15 +123,11 @@ export const ExperimentSessionsDataView: FC<ExperimentSessionsDataViewProps> = (
     accessor('input', {
       header: 'Input',
       enableSorting: false,
-      size: 240,
+      size: 400,
       cell: ({ row }) => {
         const value = row.original.input;
         if (!value) return <Text>-</Text>;
-        return (
-          <Tooltip slotContent={value} className={tooltipClassName} side="bottom">
-            <Text className="cursor-default truncate max-w-[220px] block">{value}</Text>
-          </Tooltip>
-        );
+        return <Text className="cursor-default line-clamp-2">{value}</Text>;
       },
     }),
     accessor('started_at', {
@@ -153,6 +149,7 @@ export const ExperimentSessionsDataView: FC<ExperimentSessionsDataViewProps> = (
     accessor('latency_ms', {
       header: 'Latency',
       enableSorting: false,
+      meta: { alignment: 'right' },
       cell: ({ row }) => {
         const ms = row.original.latency_ms;
         return <Text>{ms != null ? `${Math.round(ms)} ms` : '-'}</Text>;
@@ -184,6 +181,7 @@ export const ExperimentSessionsDataView: FC<ExperimentSessionsDataViewProps> = (
         id: 'tokens',
         header: 'Tokens',
         enableSorting: false,
+        meta: { alignment: 'right' },
         cell: ({ row }) => {
           const { input_tokens, output_tokens } = row.original;
           if (input_tokens == null && output_tokens == null) return <Text>-</Text>;
@@ -194,6 +192,7 @@ export const ExperimentSessionsDataView: FC<ExperimentSessionsDataViewProps> = (
     accessor('cost_total_usd', {
       header: 'Cost',
       enableSorting: false,
+      meta: { alignment: 'right' },
       cell: ({ row }) => {
         const cost = row.original.cost_total_usd;
         return <Text>{cost != null ? `$${cost.toFixed(3)}` : '-'}</Text>;
@@ -205,6 +204,7 @@ export const ExperimentSessionsDataView: FC<ExperimentSessionsDataViewProps> = (
         header: snakeCaseToTitleCase(name),
         enableSorting: false,
         size: 130,
+        meta: { alignment: 'right' },
         cell: ({ row }) => {
           const value = row.original.evaluator_scores?.[name];
           return <Text>{value != null ? formatScore(value) : '-'}</Text>;

web/packages/studio/src/routes/ExperimentDetailRoute/ExperimentDetailMetrics.tsx

@@ -43,14 +43,21 @@ export const ExperimentDetailMetrics: FC<ExperimentDetailMetricsProps> = ({ expe
       <Flex align="stretch" gap="density-3xl">
         <KVPair
           label="Dataset Name"
-          value={experiment?.dataset_name || undefined}
-          loading={isLoading}
-          orientation="vertical"
-        />
-        <Divider orientation="vertical" className="grow-0 self-stretch" />
-        <KVPair
-          label="Dataset Version"
-          value={experiment?.dataset_version || undefined}
+          value={
+            experiment?.dataset_name ? (
+              experiment.dataset_version ? (
+                <Tooltip
+                  slotContent={`Version: ${experiment.dataset_version}`}
+                  className={tooltipClassName}
+                  side="bottom"
+                >
+                  <span className="cursor-default">{experiment.dataset_name}</span>
+                </Tooltip>
+              ) : (
+                experiment.dataset_name
+              )
+            ) : undefined
+          }
           loading={isLoading}
           orientation="vertical"
         />

web/packages/studio/src/routes/groups/experimentRoutes.tsx

@@ -22,6 +22,11 @@ const ExperimentDetailRoute = lazy(() =>
     default: module.ExperimentDetailRoute,
   }))
 );
+const ExperimentTraceDetailRoute = lazy(() =>
+  import('@studio/routes/ExperimentTraceDetailRoute').then((module) => ({
+    default: module.ExperimentTraceDetailRoute,
+  }))
+);
 
 export const experimentRoutes: RouteObject[] = gateExperimentRoutes([
   {
@@ -39,4 +44,9 @@ export const experimentRoutes: RouteObject[] = gateExperimentRoutes([
     element: <ExperimentDetailRoute />,
     errorElement: <ErrorPanel title="Experiment" />,
   },
+  {
+    path: ROUTES.workspace.experimentTraceDetail,
+    element: <ExperimentTraceDetailRoute />,
+    errorElement: <ErrorPanel title="Trace" />,
+  },
 ]);