feat(studio): surface active eval jobs as a dedicated table (#1397)

Signed-off-by: Nathan Walston <nwalston@nvidia.com>

Author: walston

web/packages/studio/src/routes/agents/AgentDetailRoute/EvaluationsTab.tsx

@@ -1,7 +1,8 @@
 // SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import { SegmentedControl, Stack } from '@nvidia/foundations-react-core';
+import { PlatformJobTerminalStatuses } from '@nemo/common/src/constants/query';
+import { SegmentedControl, Stack, Text } from '@nvidia/foundations-react-core';
 import type { EvalJobRow } from '@studio/api/evaluation/utils';
 import { EvaluationsTable } from '@studio/routes/agents/AgentDetailRoute/evaluations/EvaluationsTable';
 import { ExperimentsTable } from '@studio/routes/agents/AgentDetailRoute/evaluations/ExperimentsTable';
@@ -12,10 +13,8 @@ import { type FC, useMemo, useState } from 'react';
 
 const VIEW_EVALUATIONS = 'evaluations';
 const VIEW_EXPERIMENTS = 'experiments';
-const VIEW_JOBS = 'jobs';
 
 const VIEW_ITEMS = [
-  { value: VIEW_JOBS, children: 'Active Jobs' },
   { value: VIEW_EVALUATIONS, children: 'Completed Evaluations' },
   { value: VIEW_EXPERIMENTS, children: 'Experiments' },
 ];
@@ -26,15 +25,27 @@ interface EvaluationsTabProps {
   jobs: EvalJobRow[];
 }
 
-/** Three readings of the same work: published evaluations flat, rolled up by experiment, or the
- *  jobs that produced them. Jobs are separate because they answer a different question — what is
- *  running right now — which Intake cannot answer until a run publishes. */
+/** Two readings of the same published work — flat evaluations or rolled up by experiment — with
+ *  the jobs still running pinned above them. Active jobs answer a different question ("what is
+ *  running right now") that Intake cannot answer until a run publishes, so they get their own
+ *  always-visible section instead of a segmented-control tab. */
 export const EvaluationsTab: FC<EvaluationsTabProps> = ({ workspace, evals, jobs }) => {
-  const [view, setView] = useState<string>(VIEW_JOBS);
+  const [view, setView] = useState<string>(VIEW_EVALUATIONS);
   const experiments = useMemo(() => groupByExperiment(evals), [evals]);
+  const activeJobs = useMemo(
+    () =>
+      jobs.filter((job) => !PlatformJobTerminalStatuses.some((status) => status === job.status)),
+    [jobs]
+  );
 
   return (
     <Stack gap="density-lg" className="w-full">
+      {activeJobs.length > 0 && (
+        <Stack gap="density-sm">
+          <Text kind="title/sm">Active jobs</Text>
+          <JobsTable workspace={workspace} jobs={activeJobs} evaluations={evals} />
+        </Stack>
+      )}
       <SegmentedControl
         className="w-fit"
         aria-label="Evaluation view"
@@ -45,8 +56,9 @@ export const EvaluationsTab: FC<EvaluationsTabProps> = ({ workspace, evals, jobs
       {view === VIEW_EXPERIMENTS && (
         <ExperimentsTable workspace={workspace} experiments={experiments} />
       )}
-      {view === VIEW_JOBS && <JobsTable workspace={workspace} jobs={jobs} evaluations={evals} />}
-      {view === VIEW_EVALUATIONS && <EvaluationsTable workspace={workspace} evaluations={evals} />}
+      {view === VIEW_EVALUATIONS && (
+        <EvaluationsTable workspace={workspace} evaluations={evals} jobs={jobs} />
+      )}
     </Stack>
   );
 };

web/packages/studio/src/routes/agents/AgentDetailRoute/evaluations/EvaluationsTable.tsx

@@ -10,6 +10,7 @@ import { TableEmptyState } from '@nemo/common/src/components/TableEmptyState';
 import { useStudioDataViewState } from '@nemo/common/src/hooks/useStudioDataViewState';
 import { deleteEvaluation, getListEvaluationsQueryKey } from '@nemo/sdk/generated/platform/api';
 import { Button, Flex, Text } from '@nvidia/foundations-react-core';
+import { type EvalJobRow, evalJobDetailRoute } from '@studio/api/evaluation/utils';
 import { BulkDeleteModal } from '@studio/components/BulkDeleteModal';
 import {
   evaluatorScores,
@@ -20,20 +21,30 @@ import type { AgentEvaluationRow } from '@studio/routes/agents/AgentDetailRoute/
 import { getEvaluationDetailRoute } from '@studio/routes/utils';
 import { useQueryClient } from '@tanstack/react-query';
 import { FlaskConical, Trash } from 'lucide-react';
-import { type ComponentProps, type FC, useCallback, useState } from 'react';
+import { type ComponentProps, type FC, useCallback, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router';
 
 interface EvaluationsTableProps {
   workspace: string;
   evaluations: AgentEvaluationRow[];
+  /** All evaluator jobs for the agent (any status), used to link a published evaluation back to
+   *  the job that produced it. Absent until the reverse join finds a match. */
+  jobs: EvalJobRow[];
 }
 
 /** Every published evaluation for the agent, ungrouped. */
-export const EvaluationsTable: FC<EvaluationsTableProps> = ({ workspace, evaluations }) => {
+export const EvaluationsTable: FC<EvaluationsTableProps> = ({ workspace, evaluations, jobs }) => {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
   const dataViewState = useStudioDataViewState();
   const [deleteRows, setDeleteRows] = useState<AgentEvaluationRow[]>([]);
+  // Reverse of JobsTable's job -> evaluation link: a completed job carries the evaluation it
+  // published to, so index by that name to recover the job from an evaluation row.
+  const jobByEvaluation = useMemo(() => {
+    const map: Record<string, EvalJobRow> = {};
+    for (const job of jobs) if (job.evaluationName) map[job.evaluationName] = job;
+    return map;
+  }, [jobs]);
 
   const handleDelete = useCallback(
     async (rows: AgentEvaluationRow[]) => {
@@ -55,7 +66,7 @@ export const EvaluationsTable: FC<EvaluationsTableProps> = ({ workspace, evaluat
 
   const makeColumns: ComponentProps<typeof StudioDataView<AgentEvaluationRow>>['makeColumns'] =
     useCallback(
-      ({ accessor }, { rowSelectionColumn }) => [
+      ({ accessor }, { rowSelectionColumn, rowActionsColumn }) => [
         rowSelectionColumn({ size: ROW_SELECTION_COLUMN_SIZE }),
         accessor('name', {
           header: 'Evaluation',
@@ -109,8 +120,21 @@ export const EvaluationsTable: FC<EvaluationsTableProps> = ({ workspace, evaluat
           cell: ({ row }) =>
             row.original.created_at ? <RelativeTime datetime={row.original.created_at} /> : '—',
         }),
+        rowActionsColumn({
+          rowActions: (row) => {
+            const job = jobByEvaluation[row.name];
+            return job
+              ? [
+                  {
+                    children: 'View job',
+                    onSelect: () => navigate(evalJobDetailRoute(workspace, job)),
+                  },
+                ]
+              : false;
+          },
+        }),
       ],
-      []
+      [jobByEvaluation, navigate, workspace]
     );
 
   return (

web/packages/studio/src/routes/agents/AgentDetailRoute/evaluations/JobsTable.tsx

@@ -79,7 +79,7 @@ export const JobsTable: FC<JobsTableProps> = ({ workspace, jobs, evaluations })
   );
 
   const makeColumns: ComponentProps<typeof StudioDataView<EvalJobRow>>['makeColumns'] = useCallback(
-    ({ accessor }) => [
+    ({ accessor }, { rowActionsColumn }) => [
       accessor('name', {
         header: 'Job',
         cell: ({ row }) => <Text title={row.original.name}>{row.original.name}</Text>,
@@ -115,8 +115,16 @@ export const JobsTable: FC<JobsTableProps> = ({ workspace, jobs, evaluations })
           <DurationCell row={row.original} durationMs={getValue<number | undefined>()} />
         ),
       }),
+      rowActionsColumn({
+        rowActions: (row) => [
+          {
+            children: 'View job',
+            onSelect: () => navigate(evalJobDetailRoute(workspace, row)),
+          },
+        ],
+      }),
     ],
-    [durationMsFor]
+    [durationMsFor, navigate, workspace]
   );
 
   return (