From a9783858903f6dc8c6889abdd873b01925d84545 Mon Sep 17 00:00:00 2001
From: Christopher <christso@gmail.com>
Date: Tue, 26 May 2026 15:48:54 +1000
Subject: [PATCH 1/4] hide resume actions for active eval runs

---
 apps/cli/src/commands/results/serve.ts                 |  2 ++
 apps/studio/src/components/ResumeRunActions.tsx        |  5 ++++-
 apps/studio/src/components/resume-run-helpers.test.ts  | 10 ++++++++++
 apps/studio/src/components/resume-run-helpers.ts       |  4 ++++
 apps/studio/src/lib/types.ts                           |  2 ++
 .../src/routes/projects/$projectId_/runs/$runId.tsx    |  1 +
 apps/studio/src/routes/runs/$runId.tsx                 |  1 +
 7 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/apps/cli/src/commands/results/serve.ts b/apps/cli/src/commands/results/serve.ts
index 9eac714d..1cbac71f 100644
--- a/apps/cli/src/commands/results/serve.ts
+++ b/apps/cli/src/commands/results/serve.ts
@@ -435,10 +435,12 @@ async function handleRunDetail(c: C, { searchDir }: DataContext) {
     // Studio-side resume against this exact run. Remote runs live in the
     // results-repo cache and cannot be resumed in place, so omit both fields.
     const resumeMeta = meta.source === 'local' ? deriveResumeMeta(searchDir, meta.path) : {};
+    const liveStatus = meta.source === 'local' ? getActiveRunStatus(meta.path) : undefined;
     return c.json({
       results: stripHeavyFields(loaded),
       source: meta.source,
       source_label: meta.displayName,
+      ...(liveStatus && { status: liveStatus }),
       ...resumeMeta,
     });
   } catch {
diff --git a/apps/studio/src/components/ResumeRunActions.tsx b/apps/studio/src/components/ResumeRunActions.tsx
index c7f6f521..b9232444 100644
--- a/apps/studio/src/components/ResumeRunActions.tsx
+++ b/apps/studio/src/components/ResumeRunActions.tsx
@@ -27,6 +27,7 @@ import {
   buildResumeRequestBody,
   shouldShowResumeActions,
 } from './resume-run-helpers';
+import type { RunStatus } from './stop-run-helpers';
 
 export interface ResumeRunActionsProps {
   results: EvalResult[];
@@ -36,6 +37,7 @@ export interface ResumeRunActionsProps {
   projectId?: string;
   isReadOnly: boolean;
   plannedTestCount?: number;
+  runStatus?: RunStatus;
 }
 
 export function ResumeRunActions({
@@ -46,12 +48,13 @@ export function ResumeRunActions({
   projectId,
   isReadOnly,
   plannedTestCount,
+  runStatus,
 }: ResumeRunActionsProps) {
   const navigate = useNavigate();
   const [busy, setBusy] = useState<ResumeMode | null>(null);
   const [error, setError] = useState<string | null>(null);
 
-  if (!shouldShowResumeActions(results, isReadOnly, plannedTestCount)) return null;
+  if (!shouldShowResumeActions(results, isReadOnly, plannedTestCount, runStatus)) return null;
 
   // Both actions need the run dir + the original eval file. Without those
   // we can't target the existing run workspace, so we render the buttons
diff --git a/apps/studio/src/components/resume-run-helpers.test.ts b/apps/studio/src/components/resume-run-helpers.test.ts
index 9ceb7187..62ed9441 100644
--- a/apps/studio/src/components/resume-run-helpers.test.ts
+++ b/apps/studio/src/components/resume-run-helpers.test.ts
@@ -25,6 +25,16 @@ describe('shouldShowResumeActions', () => {
     expect(shouldShowResumeActions([ok('a'), errored('b')], false)).toBe(true);
   });
 
+  it('hides while the run is still active even if it looks incomplete', () => {
+    expect(shouldShowResumeActions([ok('a')], false, 5, 'running')).toBe(false);
+    expect(shouldShowResumeActions([errored('a')], false, undefined, 'starting')).toBe(false);
+  });
+
+  it('shows once the run is terminal and resumable', () => {
+    expect(shouldShowResumeActions([ok('a')], false, 5, 'failed')).toBe(true);
+    expect(shouldShowResumeActions([errored('a')], false, undefined, 'finished')).toBe(true);
+  });
+
   it('hides in read-only mode even when execution errors are present', () => {
     expect(shouldShowResumeActions([errored('a')], true)).toBe(false);
   });
diff --git a/apps/studio/src/components/resume-run-helpers.ts b/apps/studio/src/components/resume-run-helpers.ts
index b8e6451f..8cd4e075 100644
--- a/apps/studio/src/components/resume-run-helpers.ts
+++ b/apps/studio/src/components/resume-run-helpers.ts
@@ -11,6 +11,8 @@
 
 import type { EvalResult, RunEvalRequest } from '~/lib/types';
 
+import { isTerminalRunStatus, type RunStatus } from './stop-run-helpers';
+
 export type ResumeMode = 'resume' | 'rerun';
 
 export interface BuildResumeRequestParams {
@@ -39,8 +41,10 @@ export function shouldShowResumeActions(
   results: EvalResult[],
   isReadOnly: boolean,
   plannedTestCount?: number,
+  runStatus?: RunStatus,
 ): boolean {
   if (isReadOnly) return false;
+  if (runStatus && !isTerminalRunStatus(runStatus)) return false;
   if (results.some((r) => r.executionStatus === 'execution_error')) return true;
   if (plannedTestCount !== undefined && results.length < plannedTestCount) return true;
   return false;
diff --git a/apps/studio/src/lib/types.ts b/apps/studio/src/lib/types.ts
index 595babb0..998daef3 100644
--- a/apps/studio/src/lib/types.ts
+++ b/apps/studio/src/lib/types.ts
@@ -84,6 +84,8 @@ export interface RunDetailResponse {
   results: EvalResult[];
   source: 'local' | 'remote';
   source_label?: string;
+  /** Live execution status when this run is still tracked in-memory by Studio. */
+  status?: 'starting' | 'running' | 'finished' | 'failed';
   /** Path to the run workspace directory (relative to cwd when inside, otherwise absolute). Local runs only. */
   run_dir?: string;
   /** Eval file path the run was launched against, if recorded in benchmark.json. Local runs only. */
diff --git a/apps/studio/src/routes/projects/$projectId_/runs/$runId.tsx b/apps/studio/src/routes/projects/$projectId_/runs/$runId.tsx
index 84e5c989..7ce7ee0b 100644
--- a/apps/studio/src/routes/projects/$projectId_/runs/$runId.tsx
+++ b/apps/studio/src/routes/projects/$projectId_/runs/$runId.tsx
@@ -78,6 +78,7 @@ function ProjectRunDetailPage() {
             projectId={projectId}
             isReadOnly={isReadOnly}
             plannedTestCount={data?.planned_test_count}
+            runStatus={data?.status}
           />
           {!isReadOnly && (
             <button
diff --git a/apps/studio/src/routes/runs/$runId.tsx b/apps/studio/src/routes/runs/$runId.tsx
index 91de76c7..43c1b570 100644
--- a/apps/studio/src/routes/runs/$runId.tsx
+++ b/apps/studio/src/routes/runs/$runId.tsx
@@ -78,6 +78,7 @@ function RunDetailPage() {
             target={target ?? undefined}
             isReadOnly={isReadOnly}
             plannedTestCount={data?.planned_test_count}
+            runStatus={data?.status}
           />
           {!isReadOnly && (
             <button

From 4e410fa655a0f52094f4909cc8a91b174adbeabe Mon Sep 17 00:00:00 2001
From: Christopher <christso@gmail.com>
Date: Tue, 26 May 2026 15:49:46 +1000
Subject: [PATCH 2/4] sort resume helper imports

---
 apps/studio/src/components/resume-run-helpers.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/studio/src/components/resume-run-helpers.ts b/apps/studio/src/components/resume-run-helpers.ts
index 8cd4e075..1736adf3 100644
--- a/apps/studio/src/components/resume-run-helpers.ts
+++ b/apps/studio/src/components/resume-run-helpers.ts
@@ -11,7 +11,7 @@
 
 import type { EvalResult, RunEvalRequest } from '~/lib/types';
 
-import { isTerminalRunStatus, type RunStatus } from './stop-run-helpers';
+import { type RunStatus, isTerminalRunStatus } from './stop-run-helpers';
 
 export type ResumeMode = 'resume' | 'rerun';
 

From 35559e94d7c1e6263990182216c9138dc66bd6d0 Mon Sep 17 00:00:00 2001
From: Christopher <christso@gmail.com>
Date: Tue, 26 May 2026 16:03:32 +1000
Subject: [PATCH 3/4] show stop action on active run detail

---
 .../projects/$projectId_/runs/$runId.tsx      | 34 +++++++++++++------
 apps/studio/src/routes/runs/$runId.tsx        | 27 +++++++++------
 2 files changed, 40 insertions(+), 21 deletions(-)

diff --git a/apps/studio/src/routes/projects/$projectId_/runs/$runId.tsx b/apps/studio/src/routes/projects/$projectId_/runs/$runId.tsx
index 7ce7ee0b..c6dcc756 100644
--- a/apps/studio/src/routes/projects/$projectId_/runs/$runId.tsx
+++ b/apps/studio/src/routes/projects/$projectId_/runs/$runId.tsx
@@ -8,6 +8,7 @@ import { useState } from 'react';
 import { ResumeRunActions } from '~/components/ResumeRunActions';
 import { RunDetail } from '~/components/RunDetail';
 import { RunEvalModal } from '~/components/RunEvalModal';
+import { StopRunButton } from '~/components/StopRunButton';
 import { useProjectRunDetail, useStudioConfig } from '~/lib/api';
 
 export const Route = createFileRoute('/projects/$projectId_/runs/$runId')({
@@ -47,6 +48,8 @@ function ProjectRunDetailPage() {
   const experiment = firstResult?.experiment;
   const timestamp = firstResult?.timestamp;
   const prefill = target ? { target } : undefined;
+  const runStatus = data?.status;
+  const isActiveRun = runStatus === 'starting' || runStatus === 'running';
 
   const heading = (() => {
     const parts = [experiment, target].filter((p) => p && p !== 'default');
@@ -70,17 +73,26 @@ function ProjectRunDetailPage() {
           <p className="mt-1 text-sm text-gray-500">{meta}</p>
         </div>
         <div className="flex items-center gap-3">
-          <ResumeRunActions
-            results={data?.results ?? []}
-            runDir={data?.run_dir}
-            suiteFilter={data?.suite_filter}
-            target={target ?? undefined}
-            projectId={projectId}
-            isReadOnly={isReadOnly}
-            plannedTestCount={data?.planned_test_count}
-            runStatus={data?.status}
-          />
-          {!isReadOnly && (
+          {!isReadOnly && isActiveRun ? (
+            <StopRunButton
+              runId={runId}
+              status={runStatus}
+              isReadOnly={isReadOnly}
+              projectId={projectId}
+            />
+          ) : (
+            <ResumeRunActions
+              results={data?.results ?? []}
+              runDir={data?.run_dir}
+              suiteFilter={data?.suite_filter}
+              target={target ?? undefined}
+              projectId={projectId}
+              isReadOnly={isReadOnly}
+              plannedTestCount={data?.planned_test_count}
+              runStatus={runStatus}
+            />
+          )}
+          {!isReadOnly && !isActiveRun && (
             <button
               type="button"
               onClick={() => setShowRunEval(true)}
diff --git a/apps/studio/src/routes/runs/$runId.tsx b/apps/studio/src/routes/runs/$runId.tsx
index 43c1b570..7ea176b2 100644
--- a/apps/studio/src/routes/runs/$runId.tsx
+++ b/apps/studio/src/routes/runs/$runId.tsx
@@ -8,6 +8,7 @@ import { useState } from 'react';
 import { ResumeRunActions } from '~/components/ResumeRunActions';
 import { RunDetail } from '~/components/RunDetail';
 import { RunEvalModal } from '~/components/RunEvalModal';
+import { StopRunButton } from '~/components/StopRunButton';
 import { useRunDetail, useStudioConfig } from '~/lib/api';
 
 export const Route = createFileRoute('/runs/$runId')({
@@ -48,6 +49,8 @@ function RunDetailPage() {
   const timestamp = firstResult?.timestamp;
 
   const prefill = target ? { target } : undefined;
+  const runStatus = data?.status;
+  const isActiveRun = runStatus === 'starting' || runStatus === 'running';
 
   const heading = (() => {
     const parts = [experiment, target].filter((p) => p && p !== 'default');
@@ -71,16 +74,20 @@ function RunDetailPage() {
           <p className="mt-1 text-sm text-gray-500">{meta}</p>
         </div>
         <div className="flex items-center gap-3">
-          <ResumeRunActions
-            results={data?.results ?? []}
-            runDir={data?.run_dir}
-            suiteFilter={data?.suite_filter}
-            target={target ?? undefined}
-            isReadOnly={isReadOnly}
-            plannedTestCount={data?.planned_test_count}
-            runStatus={data?.status}
-          />
-          {!isReadOnly && (
+          {!isReadOnly && isActiveRun ? (
+            <StopRunButton runId={runId} status={runStatus} isReadOnly={isReadOnly} />
+          ) : (
+            <ResumeRunActions
+              results={data?.results ?? []}
+              runDir={data?.run_dir}
+              suiteFilter={data?.suite_filter}
+              target={target ?? undefined}
+              isReadOnly={isReadOnly}
+              plannedTestCount={data?.planned_test_count}
+              runStatus={runStatus}
+            />
+          )}
+          {!isReadOnly && !isActiveRun && (
             <button
               type="button"
               onClick={() => setShowRunEval(true)}

From c4ba020b64ec04078e5e67c4152514c3334dfae0 Mon Sep 17 00:00:00 2001
From: Christopher <christso@gmail.com>
Date: Tue, 26 May 2026 16:31:44 +1000
Subject: [PATCH 4/4] share studio run status UI

---
 .../src/components/RunStatusIndicator.tsx     | 33 +++++++++++++++++++
 apps/studio/src/components/StopRunButton.tsx  | 22 +++++++++----
 apps/studio/src/routes/jobs/$runId.tsx        | 17 ++--------
 .../projects/$projectId_/jobs/$runId.tsx      | 17 ++--------
 .../projects/$projectId_/runs/$runId.tsx      |  2 ++
 apps/studio/src/routes/runs/$runId.tsx        |  2 ++
 6 files changed, 56 insertions(+), 37 deletions(-)
 create mode 100644 apps/studio/src/components/RunStatusIndicator.tsx

diff --git a/apps/studio/src/components/RunStatusIndicator.tsx b/apps/studio/src/components/RunStatusIndicator.tsx
new file mode 100644
index 00000000..28339967
--- /dev/null
+++ b/apps/studio/src/components/RunStatusIndicator.tsx
@@ -0,0 +1,33 @@
+/**
+ * RunStatusIndicator — shared live/terminal status badge for Studio-launched
+ * eval runs. Used anywhere the UI needs the same colored status label and
+ * active spinner so run/job views stay visually consistent.
+ */
+
+import type { RunStatus } from './stop-run-helpers';
+
+export interface RunStatusIndicatorProps {
+  status: RunStatus;
+}
+
+export function RunStatusIndicator({ status }: RunStatusIndicatorProps) {
+  const isTerminal = status === 'finished' || status === 'failed';
+  const statusColors: Record<string, string> = {
+    starting: 'text-yellow-400',
+    running: 'text-cyan-400',
+    finished: 'text-emerald-400',
+    failed: 'text-red-400',
+  };
+  const statusColor = statusColors[status] ?? 'text-gray-400';
+
+  return (
+    <>
+      <span className={`text-sm font-medium ${statusColor}`}>
+        {status.charAt(0).toUpperCase() + status.slice(1)}
+      </span>
+      {!isTerminal && (
+        <span className="inline-block h-3 w-3 animate-spin rounded-full border-2 border-cyan-400 border-t-transparent" />
+      )}
+    </>
+  );
+}
diff --git a/apps/studio/src/components/StopRunButton.tsx b/apps/studio/src/components/StopRunButton.tsx
index cc297367..534a7710 100644
--- a/apps/studio/src/components/StopRunButton.tsx
+++ b/apps/studio/src/components/StopRunButton.tsx
@@ -1,8 +1,9 @@
 /**
- * StopRunButton — pause-style affordance on /jobs/:runId that interrupts
- * a Studio-launched eval. Stop is part of the stop → resume → complete
- * workflow, not a destructive cancel: the partial index.jsonl is
- * preserved and can be resumed in one click from the run-detail page.
+ * StopRunButton — stop affordance on /jobs/:runId and active run detail
+ * views that interrupts a Studio-launched eval. Stop is part of the
+ * stop → resume → complete workflow, not a destructive cancel: the
+ * partial index.jsonl is preserved and can be resumed in one click from
+ * the run-detail page.
  *
  * Calls POST /api/eval/run/:id/stop (or the project-scoped variant).
  * Optimistically flips the local label to "Stopping…" until the next
@@ -10,7 +11,7 @@
  * point the button hides via `shouldShowStopButton`.
  *
  * Styling is intentionally neutral (gray, not red) to signal that this
- * is a pause, not a kill.
+ * stops execution without deleting the partial run workspace.
  */
 
 import { useState } from 'react';
@@ -51,10 +52,17 @@ export function StopRunButton({ runId, status, isReadOnly, projectId }: StopRunB
         type="button"
         onClick={onClick}
         disabled={stopping}
-        className="rounded-md border border-gray-700 bg-transparent px-3 py-1.5 text-sm font-medium text-gray-300 hover:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-50"
+        className="inline-flex items-center gap-2 rounded-md border border-gray-700 bg-transparent px-3 py-1.5 text-sm font-medium text-gray-300 hover:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-50"
         data-testid="stop-run-button"
       >
-        {stopping ? 'Stopping…' : '⏸ Stop'}
+        {stopping ? (
+          'Stopping…'
+        ) : (
+          <>
+            <span aria-hidden="true" className="inline-block h-2.5 w-2.5 rounded-[1px] bg-current" />
+            Stop
+          </>
+        )}
       </button>
       {error && <p className="text-xs text-red-400">{error}</p>}
     </div>
diff --git a/apps/studio/src/routes/jobs/$runId.tsx b/apps/studio/src/routes/jobs/$runId.tsx
index 3107b0b8..2ab73192 100644
--- a/apps/studio/src/routes/jobs/$runId.tsx
+++ b/apps/studio/src/routes/jobs/$runId.tsx
@@ -9,6 +9,7 @@
 
 import { Link, createFileRoute } from '@tanstack/react-router';
 
+import { RunStatusIndicator } from '~/components/RunStatusIndicator';
 import { StopRunButton } from '~/components/StopRunButton';
 import { useEvalRunStatus, useStudioConfig } from '~/lib/api';
 
@@ -45,15 +46,6 @@ function JobDetailPage() {
 
   const isTerminal = status.status === 'finished' || status.status === 'failed';
 
-  const statusColors: Record<string, string> = {
-    starting: 'text-yellow-400',
-    running: 'text-cyan-400',
-    finished: 'text-emerald-400',
-    failed: 'text-red-400',
-  };
-
-  const statusColor = statusColors[status.status] ?? 'text-gray-400';
-
   return (
     <div className="space-y-4">
       <BackLink />
@@ -79,12 +71,7 @@ function JobDetailPage() {
         </div>
         <div className="flex flex-shrink-0 items-center gap-3">
           <StopRunButton runId={runId} status={status.status} isReadOnly={isReadOnly} />
-          <span className={`text-sm font-medium ${statusColor}`}>
-            {status.status.charAt(0).toUpperCase() + status.status.slice(1)}
-          </span>
-          {!isTerminal && (
-            <span className="inline-block h-3 w-3 animate-spin rounded-full border-2 border-cyan-400 border-t-transparent" />
-          )}
+          <RunStatusIndicator status={status.status} />
         </div>
       </div>
 
diff --git a/apps/studio/src/routes/projects/$projectId_/jobs/$runId.tsx b/apps/studio/src/routes/projects/$projectId_/jobs/$runId.tsx
index 8c509502..a1535ce2 100644
--- a/apps/studio/src/routes/projects/$projectId_/jobs/$runId.tsx
+++ b/apps/studio/src/routes/projects/$projectId_/jobs/$runId.tsx
@@ -4,6 +4,7 @@
 
 import { Link, createFileRoute } from '@tanstack/react-router';
 
+import { RunStatusIndicator } from '~/components/RunStatusIndicator';
 import { StopRunButton } from '~/components/StopRunButton';
 import { useEvalRunStatus, useStudioConfig } from '~/lib/api';
 
@@ -40,15 +41,6 @@ function ProjectJobDetailPage() {
 
   const isTerminal = status.status === 'finished' || status.status === 'failed';
 
-  const statusColors: Record<string, string> = {
-    starting: 'text-yellow-400',
-    running: 'text-cyan-400',
-    finished: 'text-emerald-400',
-    failed: 'text-red-400',
-  };
-
-  const statusColor = statusColors[status.status] ?? 'text-gray-400';
-
   return (
     <div className="space-y-4">
       <BackLink projectId={projectId} />
@@ -78,12 +70,7 @@ function ProjectJobDetailPage() {
             isReadOnly={isReadOnly}
             projectId={projectId}
           />
-          <span className={`text-sm font-medium ${statusColor}`}>
-            {status.status.charAt(0).toUpperCase() + status.status.slice(1)}
-          </span>
-          {!isTerminal && (
-            <span className="inline-block h-3 w-3 animate-spin rounded-full border-2 border-cyan-400 border-t-transparent" />
-          )}
+          <RunStatusIndicator status={status.status} />
         </div>
       </div>
 
diff --git a/apps/studio/src/routes/projects/$projectId_/runs/$runId.tsx b/apps/studio/src/routes/projects/$projectId_/runs/$runId.tsx
index c6dcc756..e18e267c 100644
--- a/apps/studio/src/routes/projects/$projectId_/runs/$runId.tsx
+++ b/apps/studio/src/routes/projects/$projectId_/runs/$runId.tsx
@@ -8,6 +8,7 @@ import { useState } from 'react';
 import { ResumeRunActions } from '~/components/ResumeRunActions';
 import { RunDetail } from '~/components/RunDetail';
 import { RunEvalModal } from '~/components/RunEvalModal';
+import { RunStatusIndicator } from '~/components/RunStatusIndicator';
 import { StopRunButton } from '~/components/StopRunButton';
 import { useProjectRunDetail, useStudioConfig } from '~/lib/api';
 
@@ -92,6 +93,7 @@ function ProjectRunDetailPage() {
               runStatus={runStatus}
             />
           )}
+          {runStatus && <RunStatusIndicator status={runStatus} />}
           {!isReadOnly && !isActiveRun && (
             <button
               type="button"
diff --git a/apps/studio/src/routes/runs/$runId.tsx b/apps/studio/src/routes/runs/$runId.tsx
index 7ea176b2..cc17e5b7 100644
--- a/apps/studio/src/routes/runs/$runId.tsx
+++ b/apps/studio/src/routes/runs/$runId.tsx
@@ -8,6 +8,7 @@ import { useState } from 'react';
 import { ResumeRunActions } from '~/components/ResumeRunActions';
 import { RunDetail } from '~/components/RunDetail';
 import { RunEvalModal } from '~/components/RunEvalModal';
+import { RunStatusIndicator } from '~/components/RunStatusIndicator';
 import { StopRunButton } from '~/components/StopRunButton';
 import { useRunDetail, useStudioConfig } from '~/lib/api';
 
@@ -87,6 +88,7 @@ function RunDetailPage() {
               runStatus={runStatus}
             />
           )}
+          {runStatus && <RunStatusIndicator status={runStatus} />}
           {!isReadOnly && !isActiveRun && (
             <button
               type="button"