fix(benchmark): scenario status in run view and some additional tweaks (#98)

## Description

<!-- Provide a brief description of your changes -->

Summary of Pending Changes (3 files modified)
1. src/components/StatusBadge.tsx (Minor change)
- Changed "COMPLETED" to "COMPLETE" for consistency
- Updated label from "Completed" to "Complete"
2. src/screens/BenchmarkJobDetailScreen.tsx (+59 lines)
Main feature: Fetch actual benchmark run names instead of showing IDs
- Added import for getBenchmarkRun service
- Added runNames state to cache fetched run names
- Added React effect that:
- Collects all run IDs from outcomes and in-progress runs
- Fetches full run details in parallel using getBenchmarkRun()
- Extracts names (falls back to ID if name is null)
- Stores in a Map for fast lookup
- Updated run display logic to use fetched names instead of:
- Old: agent names or "Unknown Agent"
- New: actual benchmark run names from API
3. src/screens/BenchmarkRunDetailScreen.tsx (+263 lines, -53 lines)
Major feature: Display scenario runs within benchmark run details
Added features:
- Scenario runs state and loading
- Overall status section that calculates aggregate status from scenario
runs
- Shows "Failed", "Complete", "In Progress", or "Not Started"
- Displays scenario count
- Scenario runs table with columns:
- ID
- Name
- Status (with colors)
- Score
- Auto-refresh scenario runs every 5 seconds when run is active
- Polling integration to refresh scenario runs alongside run details
Removed:
- Environment Variables section (removed from both detail view and
polling display)

**Note:** PR titles should follow [Conventional
Commits](https://www.conventionalcommits.org/) format (e.g.,
`feat(devbox): add support for custom env vars` or `fix(snapshot):
resolve pagination issue`) as they are used for automatic release notes
generation.

## Type of Change

<!-- Mark the relevant option with an 'x' -->

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] Documentation update
- [ ] Code refactoring
- [ ] Performance improvement
- [ ] Test updates

## Related Issues

<!-- Link to related issues using #issue-number -->
Closes #

## Changes Made

<!-- Describe the changes in detail -->

## Testing

<!-- Describe how you tested your changes -->

- [ ] I have tested locally
- [ ] I have added/updated tests
- [ ] All existing tests pass

## Checklist

- [ ] My code follows the code style of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have updated the documentation accordingly
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published

## Screenshots (if applicable)

<!-- Add screenshots to help explain your changes -->

## Additional Notes

<!-- Any additional information that reviewers should know -->

Author: ross-rl

src/components/StatusBadge.tsx

@@ -140,8 +140,8 @@ export const getStatusDisplay = (status: string): StatusDisplay => {
       return {
         icon: figures.tick,
         color: colors.success,
-        text: "COMPLETED ",
-        label: "Completed",
+        text: "COMPLETE  ",
+        label: "Complete",
       };
     case "canceled":
       return {

src/screens/BenchmarkJobDetailScreen.tsx

@@ -17,6 +17,7 @@ import {
   type ResourceOperation,
 } from "../components/ResourceDetailPage.js";
 import { getBenchmarkJob } from "../services/benchmarkJobService.js";
+import { getBenchmarkRun } from "../services/benchmarkService.js";
 import { SpinnerComponent } from "../components/Spinner.js";
 import { ErrorMessage } from "../components/ErrorMessage.js";
 import { Breadcrumb } from "../components/Breadcrumb.js";
@@ -35,6 +36,9 @@ export function BenchmarkJobDetailScreen({
   const [loading, setLoading] = React.useState(false);
   const [error, setError] = React.useState<Error | null>(null);
   const [fetchedJob, setFetchedJob] = React.useState<BenchmarkJob | null>(null);
+  const [runNames, setRunNames] = React.useState<Map<string, string>>(
+    new Map(),
+  );
 
   // Find job in store first
   const jobFromStore = benchmarkJobs.find((j) => j.id === benchmarkJobId);
@@ -66,6 +70,47 @@ export function BenchmarkJobDetailScreen({
   // Use fetched job for full details, fall back to store for basic display
   const job = fetchedJob || jobFromStore;
 
+  // Fetch run names when job is loaded
+  React.useEffect(() => {
+    if (!job) return;
+
+    const runIds: string[] = [];
+
+    // Collect run IDs from outcomes
+    if (job.benchmark_outcomes) {
+      job.benchmark_outcomes.forEach((outcome) => {
+        runIds.push(outcome.benchmark_run_id);
+      });
+    }
+
+    // Collect run IDs from in-progress runs
+    if (job.in_progress_runs) {
+      job.in_progress_runs.forEach((run) => {
+        if (!runIds.includes(run.benchmark_run_id)) {
+          runIds.push(run.benchmark_run_id);
+        }
+      });
+    }
+
+    // Fetch run details for each run ID
+    Promise.all(
+      runIds.map(async (runId) => {
+        try {
+          const run = await getBenchmarkRun(runId);
+          return { id: runId, name: run.name || runId };
+        } catch {
+          return { id: runId, name: runId };
+        }
+      }),
+    ).then((results) => {
+      const namesMap = new Map<string, string>();
+      results.forEach((result) => {
+        namesMap.set(result.id, result.name);
+      });
+      setRunNames(namesMap);
+    });
+  }, [job]);
+
   // Show loading state
   if (!job && benchmarkJobId && !error) {
     return (
@@ -496,24 +541,26 @@ export function BenchmarkJobDetailScreen({
   }
 
   // Collect benchmark run IDs for operations
-  const benchmarkRunIds: { id: string; agentName: string }[] = [];
+  const benchmarkRunIds: { id: string; name: string }[] = [];
   if (job.benchmark_outcomes) {
     job.benchmark_outcomes.forEach((outcome) => {
+      // Use fetched run name from state, fallback to run ID
+      const runName =
+        runNames.get(outcome.benchmark_run_id) || outcome.benchmark_run_id;
       benchmarkRunIds.push({
         id: outcome.benchmark_run_id,
-        agentName: outcome.agent_name,
+        name: runName,
       });
     });
   }
   if (job.in_progress_runs) {
     job.in_progress_runs.forEach((run) => {
-      let agentName = "Unknown Agent";
-      if (run.agent_config && "name" in run.agent_config) {
-        agentName = (run.agent_config as any).name;
-      }
       // Avoid duplicates
       if (!benchmarkRunIds.find((r) => r.id === run.benchmark_run_id)) {
-        benchmarkRunIds.push({ id: run.benchmark_run_id, agentName });
+        // Use fetched run name from state, fallback to run ID
+        const runName =
+          runNames.get(run.benchmark_run_id) || run.benchmark_run_id;
+        benchmarkRunIds.push({ id: run.benchmark_run_id, name: runName });
       }
     });
   }
@@ -525,7 +572,7 @@ export function BenchmarkJobDetailScreen({
   benchmarkRunIds.slice(0, 9).forEach((run, idx) => {
     operations.push({
       key: `view-run-${idx}`,
-      label: `View Run: ${run.agentName}`,
+      label: `View Run: ${run.name}`,
       color: colors.info,
       icon: figures.arrowRight,
       shortcut: String(idx + 1),