diff --git a/apps/studio/src/components/RunEvalModal.tsx b/apps/studio/src/components/RunEvalModal.tsx
index 5a17fc85e..db7bd0d13 100644
--- a/apps/studio/src/components/RunEvalModal.tsx
+++ b/apps/studio/src/components/RunEvalModal.tsx
@@ -14,6 +14,7 @@
 import { useQueryClient } from '@tanstack/react-query';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
+import { useNavigate } from '@tanstack/react-router';
 import {
   launchEvalRun,
   previewEvalCommand,
@@ -40,6 +41,7 @@ export interface RunEvalModalProps {
 
 export function RunEvalModal({ open, onClose, benchmarkId, prefill }: RunEvalModalProps) {
   const queryClient = useQueryClient();
+  const navigate = useNavigate();
 
   // Form state
   const [suiteFilter, setSuiteFilter] = useState(prefill?.suiteFilter ?? '');
@@ -148,9 +150,18 @@ export function RunEvalModal({ open, onClose, benchmarkId, prefill }: RunEvalMod
   // ── Active run view ────────────────────────────────────────────────────
 
   if (activeRunId && runStatus) {
+    function handleRunInBackground() {
+      onClose();
+      navigate({ to: '/', search: { tab: 'runs' } as Record<string, string> });
+    }
     return (
       <ModalShell onClose={onClose} title="Eval Run">
-        <RunStatusView status={runStatus} onClose={onClose} />
+        <RunStatusView
+          status={runStatus}
+          onClose={onClose}
+          onRunInBackground={handleRunInBackground}
+          runId={activeRunId}
+        />
       </ModalShell>
     );
   }
@@ -392,9 +403,13 @@ function ModalShell({
 function RunStatusView({
   status,
   onClose,
+  onRunInBackground,
+  runId,
 }: {
   status: import('~/lib/types').EvalRunStatus;
   onClose: () => void;
+  onRunInBackground?: () => void;
+  runId?: string;
 }) {
   const isTerminal = status.status === 'finished' || status.status === 'failed';
 
@@ -437,12 +452,26 @@ function RunStatusView({
         </div>
       )}
 
-      {isTerminal && (
-        <div className="flex items-center justify-between">
-          <span className="text-xs text-gray-500">
-            Exit code: {status.exit_code}
-            {status.finished_at && ` · ${new Date(status.finished_at).toLocaleTimeString()}`}
-          </span>
+      <div className="flex items-center justify-between">
+        <span className="text-xs text-gray-500">
+          {isTerminal ? (
+            <>
+              Exit code: {status.exit_code}
+              {status.finished_at && ` · ${new Date(status.finished_at).toLocaleTimeString()}`}
+            </>
+          ) : (
+            runId && (
+              <button
+                type="button"
+                onClick={onRunInBackground}
+                className="text-xs text-gray-400 hover:text-cyan-400"
+              >
+                Run in background
+              </button>
+            )
+          )}
+        </span>
+        {isTerminal && (
           <button
             type="button"
             onClick={onClose}
@@ -450,8 +479,8 @@ function RunStatusView({
           >
             Close
           </button>
-        </div>
-      )}
+        )}
+      </div>
     </div>
   );
 }
diff --git a/apps/studio/src/components/Sidebar.tsx b/apps/studio/src/components/Sidebar.tsx
index a0886eba7..3bc35f0fd 100644
--- a/apps/studio/src/components/Sidebar.tsx
+++ b/apps/studio/src/components/Sidebar.tsx
@@ -23,6 +23,7 @@ import {
   useBenchmarkRunDetail,
   useBenchmarkRunList,
   useCategorySuites,
+  useEvalRuns,
   useExperiments,
   useRunDetail,
   useRunList,
@@ -166,12 +167,23 @@ function RunSidebar() {
   const { data: aggregatedData } = useAllBenchmarkRuns();
   const data = useAggregated ? aggregatedData : localData;
 
+  const { data: evalRunsData } = useEvalRuns();
+  const activeRunCount = (evalRunsData?.runs ?? []).filter(
+    (r) => r.status === 'starting' || r.status === 'running',
+  ).length;
+
   return (
     <SidebarShell>
       <div className="flex items-center gap-2 border-b border-gray-800 px-4 py-4">
         <Link to="/" className="text-lg font-semibold text-white hover:text-cyan-400">
           AgentV Studio
         </Link>
+        {activeRunCount > 0 && (
+          <span className="flex items-center gap-1 rounded-full bg-cyan-900/40 px-2 py-0.5 text-xs text-cyan-400">
+            <span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-cyan-400" />
+            {activeRunCount}
+          </span>
+        )}
       </div>
 
       <nav className="flex-1 overflow-y-auto px-2 py-3">
diff --git a/apps/studio/src/lib/api.ts b/apps/studio/src/lib/api.ts
index ddfe8ce1a..75721d398 100644
--- a/apps/studio/src/lib/api.ts
+++ b/apps/studio/src/lib/api.ts
@@ -15,6 +15,7 @@ import type {
   EvalDetailResponse,
   EvalDiscoverResponse,
   EvalPreviewResponse,
+  EvalRunListResponse,
   EvalRunResponse,
   EvalRunStatus,
   EvalTargetsResponse,
@@ -512,6 +513,19 @@ export function useEvalRunStatus(runId: string | null) {
   return useQuery(evalRunStatusOptions(runId));
 }
 
+export function evalRunsOptions(benchmarkId?: string) {
+  const url = benchmarkId ? `${benchmarkApiBase(benchmarkId)}/eval/runs` : '/api/eval/runs';
+  return queryOptions({
+    queryKey: ['eval-runs', benchmarkId ?? ''],
+    queryFn: () => fetchJson<EvalRunListResponse>(url),
+    refetchInterval: 3_000,
+  });
+}
+
+export function useEvalRuns(benchmarkId?: string) {
+  return useQuery(evalRunsOptions(benchmarkId));
+}
+
 export async function previewEvalCommand(
   body: RunEvalRequest,
   benchmarkId?: string,
diff --git a/apps/studio/src/routeTree.gen.ts b/apps/studio/src/routeTree.gen.ts
index c52359e26..f1552a6c6 100644
--- a/apps/studio/src/routeTree.gen.ts
+++ b/apps/studio/src/routeTree.gen.ts
@@ -13,6 +13,7 @@ import { Route as SettingsRouteImport } from './routes/settings'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as RunsRunIdRouteImport } from './routes/runs/$runId'
 import { Route as ProjectsBenchmarkIdRouteImport } from './routes/projects/$benchmarkId'
+import { Route as JobsRunIdRouteImport } from './routes/jobs/$runId'
 import { Route as ExperimentsExperimentNameRouteImport } from './routes/experiments/$experimentName'
 import { Route as EvalsRunIdEvalIdRouteImport } from './routes/evals/$runId.$evalId'
 import { Route as RunsRunIdSuiteSuiteRouteImport } from './routes/runs/$runId_.suite.$suite'
@@ -40,6 +41,11 @@ const ProjectsBenchmarkIdRoute = ProjectsBenchmarkIdRouteImport.update({
   path: '/projects/$benchmarkId',
   getParentRoute: () => rootRouteImport,
 } as any)
+const JobsRunIdRoute = JobsRunIdRouteImport.update({
+  id: '/jobs/$runId',
+  path: '/jobs/$runId',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const ExperimentsExperimentNameRoute =
   ExperimentsExperimentNameRouteImport.update({
     id: '/experiments/$experimentName',
@@ -79,6 +85,7 @@ export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/settings': typeof SettingsRoute
   '/experiments/$experimentName': typeof ExperimentsExperimentNameRoute
+  '/jobs/$runId': typeof JobsRunIdRoute
   '/projects/$benchmarkId': typeof ProjectsBenchmarkIdRoute
   '/runs/$runId': typeof RunsRunIdRoute
   '/evals/$runId/$evalId': typeof EvalsRunIdEvalIdRoute
@@ -91,6 +98,7 @@ export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/settings': typeof SettingsRoute
   '/experiments/$experimentName': typeof ExperimentsExperimentNameRoute
+  '/jobs/$runId': typeof JobsRunIdRoute
   '/projects/$benchmarkId': typeof ProjectsBenchmarkIdRoute
   '/runs/$runId': typeof RunsRunIdRoute
   '/evals/$runId/$evalId': typeof EvalsRunIdEvalIdRoute
@@ -104,6 +112,7 @@ export interface FileRoutesById {
   '/': typeof IndexRoute
   '/settings': typeof SettingsRoute
   '/experiments/$experimentName': typeof ExperimentsExperimentNameRoute
+  '/jobs/$runId': typeof JobsRunIdRoute
   '/projects/$benchmarkId': typeof ProjectsBenchmarkIdRoute
   '/runs/$runId': typeof RunsRunIdRoute
   '/evals/$runId/$evalId': typeof EvalsRunIdEvalIdRoute
@@ -118,6 +127,7 @@ export interface FileRouteTypes {
     | '/'
     | '/settings'
     | '/experiments/$experimentName'
+    | '/jobs/$runId'
     | '/projects/$benchmarkId'
     | '/runs/$runId'
     | '/evals/$runId/$evalId'
@@ -130,6 +140,7 @@ export interface FileRouteTypes {
     | '/'
     | '/settings'
     | '/experiments/$experimentName'
+    | '/jobs/$runId'
     | '/projects/$benchmarkId'
     | '/runs/$runId'
     | '/evals/$runId/$evalId'
@@ -142,6 +153,7 @@ export interface FileRouteTypes {
     | '/'
     | '/settings'
     | '/experiments/$experimentName'
+    | '/jobs/$runId'
     | '/projects/$benchmarkId'
     | '/runs/$runId'
     | '/evals/$runId/$evalId'
@@ -155,6 +167,7 @@ export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   SettingsRoute: typeof SettingsRoute
   ExperimentsExperimentNameRoute: typeof ExperimentsExperimentNameRoute
+  JobsRunIdRoute: typeof JobsRunIdRoute
   ProjectsBenchmarkIdRoute: typeof ProjectsBenchmarkIdRoute
   RunsRunIdRoute: typeof RunsRunIdRoute
   EvalsRunIdEvalIdRoute: typeof EvalsRunIdEvalIdRoute
@@ -194,6 +207,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ProjectsBenchmarkIdRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/jobs/$runId': {
+      id: '/jobs/$runId'
+      path: '/jobs/$runId'
+      fullPath: '/jobs/$runId'
+      preLoaderRoute: typeof JobsRunIdRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/experiments/$experimentName': {
       id: '/experiments/$experimentName'
       path: '/experiments/$experimentName'
@@ -243,6 +263,7 @@ const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   SettingsRoute: SettingsRoute,
   ExperimentsExperimentNameRoute: ExperimentsExperimentNameRoute,
+  JobsRunIdRoute: JobsRunIdRoute,
   ProjectsBenchmarkIdRoute: ProjectsBenchmarkIdRoute,
   RunsRunIdRoute: RunsRunIdRoute,
   EvalsRunIdEvalIdRoute: EvalsRunIdEvalIdRoute,
diff --git a/apps/studio/src/routes/index.tsx b/apps/studio/src/routes/index.tsx
index 10732d68f..4dd892ee9 100644
--- a/apps/studio/src/routes/index.tsx
+++ b/apps/studio/src/routes/index.tsx
@@ -6,7 +6,7 @@
  * Uses URL search param `?tab=` for tab persistence.
  */
 
-import { createFileRoute, useNavigate, useRouterState } from '@tanstack/react-router';
+import { Link, createFileRoute, useNavigate, useRouterState } from '@tanstack/react-router';
 import { useState } from 'react';
 
 import { useQueryClient } from '@tanstack/react-query';
@@ -23,6 +23,7 @@ import {
   syncRemoteResultsApi,
   useBenchmarkList,
   useCompare,
+  useEvalRuns,
   useRemoteStatus,
   useRunList,
   useStudioConfig,
@@ -319,6 +320,7 @@ function RunsTabContent({
 
   return (
     <div className="space-y-4">
+      <ActiveRunsSection />
       <RunSourceToolbar
         filter={sourceFilter}
         onFilterChange={onSourceFilterChange}
@@ -364,6 +366,45 @@ function RunsTabContent({
   );
 }
 
+// ── Active runs section ───────────────────────────────────────────────────
+
+function ActiveRunsSection() {
+  const { data } = useEvalRuns();
+  const activeRuns = (data?.runs ?? []).filter(
+    (r) => r.status === 'starting' || r.status === 'running',
+  );
+
+  if (activeRuns.length === 0) return null;
+
+  return (
+    <div className="rounded-lg border border-cyan-900/40 bg-cyan-950/10">
+      <div className="border-b border-cyan-900/30 px-4 py-2.5">
+        <span className="text-xs font-medium uppercase tracking-wider text-cyan-400">Active</span>
+      </div>
+      <ul className="divide-y divide-gray-800/50">
+        {activeRuns.map((run) => (
+          <li key={run.id} className="flex items-center justify-between px-4 py-3">
+            <div className="flex items-center gap-3 min-w-0">
+              <span className="inline-block h-2 w-2 flex-shrink-0 animate-pulse rounded-full bg-cyan-400" />
+              <span className="truncate font-mono text-sm text-gray-300">{run.id}</span>
+              <span className="flex-shrink-0 text-xs text-gray-500">
+                {new Date(run.started_at).toLocaleTimeString()}
+              </span>
+            </div>
+            <Link
+              to="/jobs/$runId"
+              params={{ runId: run.id }}
+              className="ml-4 flex-shrink-0 text-xs text-cyan-400 hover:text-cyan-300"
+            >
+              View Log →
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
 function LoadingSkeleton() {
   return (
     <div className="space-y-2">
diff --git a/apps/studio/src/routes/jobs/$runId.tsx b/apps/studio/src/routes/jobs/$runId.tsx
new file mode 100644
index 000000000..4a5fceae7
--- /dev/null
+++ b/apps/studio/src/routes/jobs/$runId.tsx
@@ -0,0 +1,147 @@
+/**
+ * Job detail route: shows live stdout/stderr for a Studio-launched eval run.
+ *
+ * Accessible via /jobs/:runId. Polls /api/eval/status/:id until the run
+ * reaches a terminal state (finished or failed), then stops polling.
+ *
+ * Entry point: "View Log →" button in the Active Runs section on the home page.
+ */
+
+import { Link, createFileRoute } from '@tanstack/react-router';
+
+import { useEvalRunStatus } from '~/lib/api';
+
+export const Route = createFileRoute('/jobs/$runId')({
+  component: JobDetailPage,
+});
+
+function JobDetailPage() {
+  const { runId } = Route.useParams();
+  const { data: status, isLoading, error } = useEvalRunStatus(runId);
+
+  if (isLoading) {
+    return (
+      <div className="space-y-4">
+        <BackLink />
+        <div className="h-8 w-48 animate-pulse rounded bg-gray-800" />
+        <div className="h-64 animate-pulse rounded-lg bg-gray-900" />
+      </div>
+    );
+  }
+
+  if (error || !status) {
+    return (
+      <div className="space-y-4">
+        <BackLink />
+        <div className="rounded-lg border border-red-900/50 bg-red-950/20 p-4 text-sm text-red-400">
+          {error ? `Failed to load run: ${error.message}` : 'Run not found.'}
+        </div>
+      </div>
+    );
+  }
+
+  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 />
+
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-xl font-semibold text-white">{runId}</h1>
+          <p className="mt-0.5 text-xs text-gray-500">
+            Started {new Date(status.started_at).toLocaleString()}
+            {status.finished_at && (
+              <>
+                {' · '}Finished {new Date(status.finished_at).toLocaleString()}
+                {' · '}
+                {Math.round(
+                  (new Date(status.finished_at).getTime() - new Date(status.started_at).getTime()) /
+                    1000,
+                )}
+                s
+              </>
+            )}
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <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" />
+          )}
+        </div>
+      </div>
+
+      {/* Command */}
+      <div className="rounded-md border border-gray-700 bg-gray-950 px-4 py-3">
+        <p className="mb-1 text-xs font-medium uppercase tracking-wider text-gray-500">Command</p>
+        <code className="break-all text-xs text-cyan-300">{status.command}</code>
+      </div>
+
+      {/* Stdout */}
+      {status.stdout ? (
+        <div>
+          <p className="mb-1 text-xs font-medium uppercase tracking-wider text-gray-500">Output</p>
+          <div className="max-h-[60vh] overflow-y-auto rounded-lg border border-gray-700 bg-gray-950 p-4">
+            <pre className="whitespace-pre-wrap font-mono text-xs text-gray-200">
+              {status.stdout}
+            </pre>
+          </div>
+        </div>
+      ) : (
+        !isTerminal && (
+          <div className="flex items-center gap-2 text-sm text-gray-500">
+            <span className="inline-block h-2.5 w-2.5 animate-spin rounded-full border-2 border-gray-500 border-t-transparent" />
+            Waiting for output…
+          </div>
+        )
+      )}
+
+      {/* Stderr */}
+      {status.stderr && (
+        <div>
+          <p className="mb-1 text-xs font-medium uppercase tracking-wider text-red-500">Stderr</p>
+          <div className="max-h-48 overflow-y-auto rounded-lg border border-red-900/40 bg-red-950/20 p-4">
+            <pre className="whitespace-pre-wrap font-mono text-xs text-red-300">
+              {status.stderr}
+            </pre>
+          </div>
+        </div>
+      )}
+
+      {/* Exit code */}
+      {isTerminal && (
+        <p className="text-xs text-gray-500">
+          Exit code:{' '}
+          <span className={status.exit_code === 0 ? 'text-emerald-400' : 'text-red-400'}>
+            {status.exit_code}
+          </span>
+        </p>
+      )}
+    </div>
+  );
+}
+
+function BackLink() {
+  return (
+    <Link
+      to="/"
+      search={{ tab: 'runs' } as Record<string, string>}
+      className="text-xs text-gray-400 hover:text-cyan-400"
+    >
+      ← Back to Runs
+    </Link>
+  );
+}