diff --git a/frontend/src/lib/components/MemoryFootprintViewer.svelte b/frontend/src/lib/components/MemoryFootprintViewer.svelte
index 9547861bc3..14ad1a2b06 100644
--- a/frontend/src/lib/components/MemoryFootprintViewer.svelte
+++ b/frontend/src/lib/components/MemoryFootprintViewer.svelte
@@ -3,7 +3,7 @@
 
 	import { type MetricDataPoint, MetricsService } from '$lib/gen'
 	import { displayTime } from '$lib/utils'
-	import { workspaceStore } from '$lib/stores'
+	import { useOperatingWorkspace } from './operatingWorkspace.svelte'
 	import {
 		CategoryScale,
 		Chart as ChartJS,
@@ -26,6 +26,8 @@
 
 	let { jobId, jobUpdateLastFetch }: Props = $props();
 
+	const operatingWorkspace = useOperatingWorkspace()
+
 	let jobMetricsLastFetch: Date | undefined = undefined
 	let jobMemoryStats: MetricDataPoint[] | undefined = $state(undefined)
 
@@ -38,7 +40,7 @@
 	async function loadMetricsData() {
 		try {
 			let jobStatsPromise = MetricsService.getJobMetrics({
-				workspace: $workspaceStore!,
+				workspace: $operatingWorkspace!,
 				id: jobId,
 				requestBody: {
 					from_timestamp: jobMetricsLastFetch?.toISOString(),
diff --git a/frontend/src/lib/components/runs/RunDetail.svelte b/frontend/src/lib/components/runs/RunDetail.svelte
new file mode 100644
index 0000000000..1241bc9c60
--- /dev/null
+++ b/frontend/src/lib/components/runs/RunDetail.svelte
@@ -0,0 +1,1450 @@
+<script lang="ts">
+	import {
+		JobService,
+		type Job,
+		ScriptService,
+		type Script,
+		type WorkflowStatus,
+		type NewScript,
+		ConcurrencyGroupsService,
+		MetricsService,
+		WorkerService,
+		type ScriptArgs
+	} from '$lib/gen'
+	import {
+		computeSharableHash,
+		copyToClipboard,
+		encodeState,
+		findMatchingCustomTag,
+		getHubFlowIdFromPath,
+		isHubFlowPath,
+		isFlowPreview,
+		isNotFlow,
+		isScriptPreview
+	} from '$lib/utils'
+	import BarsStaggered from '$lib/components/icons/BarsStaggered.svelte'
+
+	import {
+		Activity,
+		Calendar,
+		List,
+		Pen,
+		RefreshCw,
+		TimerOff,
+		Trash,
+		Code2,
+		ClipboardCopy,
+		GitBranch,
+		EllipsisVertical,
+		Share2,
+		Globe,
+		Users,
+		Play,
+		SearchX,
+		ArrowRight
+	} from 'lucide-svelte'
+	import WorkspaceIcon from '$lib/components/workspace/WorkspaceIcon.svelte'
+	import { forLater } from '$lib/forLater'
+
+	import { isJobResolvable } from '$lib/utils'
+	import {
+		claimRerunOrigin,
+		offerToResolveOriginal,
+		rememberRerunOrigin
+	} from '$lib/components/runs/rerunResolution.svelte'
+	import DisplayResult from '$lib/components/DisplayResult.svelte'
+	import DbtRunGraph from '$lib/components/dbt/DbtRunGraph.svelte'
+	import DispatchEventsPanel from '$lib/components/runs/DispatchEventsPanel.svelte'
+	import UpstreamSnapshotsPanel from '$lib/components/runs/UpstreamSnapshotsPanel.svelte'
+	import { enterpriseLicense, initialArgsStore, superadmin, userWorkspaces } from '$lib/stores'
+	import FlowStatusViewer from '$lib/components/FlowStatusViewer.svelte'
+	import HighlightCode from '$lib/components/HighlightCode.svelte'
+	import JobLoader from '$lib/components/JobLoader.svelte'
+	import LogViewer from '$lib/components/LogViewer.svelte'
+	import { Button, Skeleton, Tab, Alert, DrawerContent } from '$lib/components/common'
+	import PageHeaderContent from '$lib/components/PageHeaderContent.svelte'
+	import { pageHeader } from '$lib/components/pageHeaderRegistry.svelte'
+	import JobDetailHeader from '$lib/components/runs/JobDetailHeader.svelte'
+	import ScriptRetryChain from '$lib/components/runs/ScriptRetryChain.svelte'
+	import FlowExecutionStatus from '$lib/components/runs/FlowExecutionStatus.svelte'
+	import JobArgs from '$lib/components/JobArgs.svelte'
+	import FlowProgressBar from '$lib/components/flows/FlowProgressBar.svelte'
+	import JobProgressBar from '$lib/components/jobs/JobProgressBar.svelte'
+	import Tabs from '$lib/components/common/tabs/TabsV2.svelte'
+	import { goto } from '$lib/navigation'
+	import { sendUserToast } from '$lib/toast'
+	import Dropdown from '$lib/components/DropdownV2.svelte'
+	import PersistentScriptDrawer from '$lib/components/PersistentScriptDrawer.svelte'
+	import Portal from '$lib/components/Portal.svelte'
+
+	import MemoryFootprintViewer from '$lib/components/MemoryFootprintViewer.svelte'
+	import Drawer from '$lib/components/common/drawer/Drawer.svelte'
+	import { Highlight } from 'svelte-highlight'
+	import { json } from 'svelte-highlight/languages'
+	import Toggle from '$lib/components/Toggle.svelte'
+	import WorkflowTimeline from '$lib/components/WorkflowTimeline.svelte'
+
+	import HighlightTheme from '$lib/components/HighlightTheme.svelte'
+
+	import ExecutionDuration from '$lib/components/ExecutionDuration.svelte'
+	import { isWindmillTooBigObject } from '$lib/components/job_args'
+	import ScheduleEditor from '$lib/components/triggers/schedules/ScheduleEditor.svelte'
+	import OpenInSessionButton from '$lib/components/sessions/OpenInSessionButton.svelte'
+	import { onDestroy, setContext, untrack } from 'svelte'
+	import { getJobStatusKind, resetFavicon, setStatusFavicon } from '$lib/favicon'
+
+	import FlowAssetsHandler, {
+		initFlowGraphAssetsCtx
+	} from '$lib/components/flows/FlowAssetsHandler.svelte'
+	import JobAssetsViewer from '$lib/components/assets/JobAssetsViewer.svelte'
+	import { setViewToken } from '$lib/viewToken'
+	import { twMerge } from 'tailwind-merge'
+	import FlowRestartButton from '$lib/components/FlowRestartButton.svelte'
+	import { useNestedRestartState } from '$lib/components/useNestedRestartState.svelte'
+	import JobOtelTraces from '$lib/components/JobOtelTraces.svelte'
+	import {
+		canUserBypassRuleKindInRulesets,
+		fetchProtectionRulesForWorkspace,
+		isRuleActiveInRulesets,
+		protectionRulesState
+	} from '$lib/workspaceProtectionRules.svelte'
+	import {
+		buildForkEditUrl,
+		editInForkAllowed,
+		editInForkLabel,
+		onEditInForkClick,
+		openEditInFork
+	} from '$lib/utils/editInFork'
+	import { resource } from 'runed'
+	import {
+		setOperatingWorkspace,
+		useOperatingUser
+	} from '$lib/components/operatingWorkspace.svelte'
+	import { isCloudHosted } from '$lib/cloud'
+	import { useEditRights } from '$lib/operatorWriteRights'
+	import { AGENT_STEP_ID } from '$lib/components/flows/conversations/agentEditorChat'
+
+	let {
+		id: runId,
+		workspace: workspaceId,
+		viewToken,
+		onNavigate = goto,
+		embedded = false
+	}: {
+		/** The `[...run]` route segment: the job's id. */
+		id: string
+		workspace: string | undefined
+		/** Share-link token of the URL this run was opened at (`view_token`). */
+		viewToken?: string
+		onNavigate?: (url: string) => void | Promise<void>
+		/** Rendered inside a page that is not the run's own (an AI session preview tab): the
+		 * layout's header, the favicon and the request-wide view token all belong to that page. */
+		embedded?: boolean
+	} = $props()
+
+	// Fixed for the component's life: a host mounts it embedded or it is the route's page.
+	const ownsPage = untrack(() => !embedded)
+
+	// Every workspace-scoped call below and in the panels this page mounts targets `workspace`,
+	// not the nav store: a session views a run in its own workspace.
+	setOperatingWorkspace(() => workspaceId)
+	// Roles are per-workspace, so every gate below asks about `workspace` rather than about the
+	// one the browser is navigated to.
+	const operatingUser = useOperatingUser()
+	const actingUser = $derived(operatingUser.current)
+	const editRights = useEditRights()
+
+	// Protection rules are only kept loaded for the navigation workspace.
+	const foreignRulesets = resource(
+		() => (workspaceId !== protectionRulesState.workspace ? workspaceId : undefined),
+		async (ws) => (ws ? await fetchProtectionRulesForWorkspace(ws) : undefined)
+	)
+	const rulesets = $derived(
+		workspaceId === protectionRulesState.workspace
+			? protectionRulesState.rulesets
+			: foreignRulesets.current
+	)
+
+	let job: (Job & { result?: any; result_stream?: string }) | undefined = $state()
+	let jobUpdateLastFetch: Date | undefined = $state()
+
+	// A re-run launched from a failed run offers to resolve that failure once it succeeds.
+	// The claim happens here rather than at init because SvelteKit reuses this component
+	// across /run/<id> navigations, so init only runs for the first run viewed.
+	// Only ever an offer: a re-run is a fresh execution, not proof the old failure was handled.
+	let offeredForJobId: string | undefined = $state(undefined)
+	$effect(() => {
+		if (!job || offeredForJobId === job.id) return
+		if ('success' in job && job.success) {
+			const origin = claimRerunOrigin(job.id)
+			if (origin) {
+				offeredForJobId = job.id
+				offerToResolveOriginal(origin)
+			}
+		}
+	})
+
+	let scriptProgress: number | undefined = $state(undefined)
+	let currentJobIsLongRunning: boolean = $state(false)
+
+	let viewTab: 'logs' | 'code' | 'stats' | 'assets' | 'traces' = $state('logs')
+	let selectedJobStep: string | undefined = $state(undefined)
+
+	// Mirror of the graph's per-module display state (selected iteration of each
+	// ForLoop, etc.). Drives both the iteration pre-fill and the iteration-count
+	// selectors in the restart popup.
+	let graphModuleStates: Record<string, import('$lib/components/graph').GraphModuleState> = $state(
+		{}
+	)
+	let expandedSubflows: Record<
+		string,
+		{ modules: import('$lib/gen').FlowModule[]; groups?: any[] }
+	> = $state({})
+	const selectedRestart = useNestedRestartState({
+		selectedJobStep: () => selectedJobStep,
+		job: () => job,
+		graphModuleStates: () => graphModuleStates,
+		expandedSubflows: () => expandedSubflows
+	})
+	// When the selection can't be restarted from (nothing clicked, Input/Result,
+	// a step inside a parallel loop), the button targets the top-level step that
+	// failed the run, so it is visible without hunting for it in a large graph.
+	// A continue-on-error step keeps its `Failure` status on a run that succeeds,
+	// so only a failed run counts, and its last `Failure` is the one that ended it.
+	const failedTopLevelStep = $derived.by(() => {
+		if (job?.type !== 'CompletedJob' || job.success !== false || job.canceled) return undefined
+		const failures = job.flow_status?.modules?.filter((m) => m.type === 'Failure') ?? []
+		return failures[failures.length - 1]?.id
+	})
+	const failedRestart = useNestedRestartState({
+		selectedJobStep: () => failedTopLevelStep,
+		job: () => job,
+		graphModuleStates: () => graphModuleStates,
+		expandedSubflows: () => expandedSubflows
+	})
+	const selectionRestartable = $derived(
+		selectedJobStep !== undefined &&
+			(selectedRestart.topLevelRestartable || selectedRestart.nestedRestartSupported)
+	)
+	const restartStep = $derived(selectionRestartable ? selectedJobStep : failedTopLevelStep)
+	const restart = $derived(selectionRestartable ? selectedRestart : failedRestart)
+	function canRestart(state: ReturnType<typeof useNestedRestartState>) {
+		return (
+			job?.type === 'CompletedJob' &&
+			job.job_kind === 'flow' &&
+			(state.topLevelRestartable || state.nestedRestartSupported)
+		)
+	}
+
+	let testIsLoading = $state(false)
+	let jobLoader: JobLoader | undefined = $state(undefined)
+	let loadError: { status?: number; message?: string } | undefined = $state(undefined)
+
+	// Flow execution status state
+	let suspendStatus: import('$lib/utils').StateStore<Record<string, { job: Job; nb: number }>> =
+		$state({ val: {} })
+	let isOwner: boolean = $state(false)
+
+	let persistentScriptDrawer: PersistentScriptDrawer | undefined = $state(undefined)
+
+	let showExplicitProgressTip: boolean = $state(
+		(localStorage.getItem('hideExplicitProgressTip') ?? 'false') == 'false'
+	)
+
+	let lastJobId: string | undefined = $state(undefined)
+	let concurrencyKey: string | undefined = $state(undefined)
+
+	setContext(
+		'FlowGraphAssetContext',
+		initFlowGraphAssetsCtx({ getModules: () => job?.raw_flow?.modules ?? [] })
+	)
+
+	async function getConcurrencyKey(job: Job | undefined) {
+		if (!job) return
+		lastJobId = job.id
+		concurrencyKey = await ConcurrencyGroupsService.getConcurrencyKey({ id: job.id })
+	}
+
+	// Share read link: if the URL carries a `view_token`, install it so every job
+	// read on this page (incl. flow steps, args, logs, SSE) is authorized by it.
+	// Set eagerly at init (before JobLoader mounts and fires its first fetch), and
+	// reactively keep it in sync across client-side navigation.
+	// The token rides on every request the window makes, so only the run's own page installs
+	// one: embedded, it would authorize the host's requests too and clear another run's token.
+	if (ownsPage) {
+		setViewToken(untrack(() => viewToken))
+		$effect(() => {
+			setViewToken(viewToken)
+		})
+		onDestroy(() => setViewToken(undefined))
+	}
+
+	async function shareReadLink(id: string): Promise<void> {
+		try {
+			const workspace = workspaceId!
+			const token = (await JobService.getJobViewToken({ workspace, id })).trim()
+			// Pin the workspace in the link: the token is signed with this workspace's
+			// key, and the logged layout only switches `$workspaceStore` when the URL
+			// carries `workspace=`. Without it a recipient whose active workspace
+			// differs would open the run (and validate the token) against the wrong one.
+			const url = `${window.location.origin}/run/${id}?workspace=${encodeURIComponent(
+				workspace
+			)}&view_token=${encodeURIComponent(token)}`
+			copyToClipboard(url)
+			sendUserToast('Read-only share link copied to clipboard')
+		} catch (e) {
+			sendUserToast(`Failed to create share link: ${e}`, true)
+		}
+	}
+
+	async function sharePublicLink(id: string): Promise<void> {
+		try {
+			const workspace = workspaceId!
+			const token = (await JobService.getJobPublicViewToken({ workspace, id })).trim()
+			// The workspace is a path segment here: the public run page is outside the
+			// logged layout and has no workspace store to fall back on.
+			const url = `${window.location.origin}/public_run/${encodeURIComponent(
+				workspace
+			)}/${id}?view_token=${encodeURIComponent(token)}`
+			copyToClipboard(url)
+			sendUserToast('Public link copied to clipboard — anyone with it can view this run')
+		} catch (e) {
+			sendUserToast(`Failed to create public link: ${e}`, true)
+		}
+	}
+
+	async function deleteCompletedJob(id: string): Promise<void> {
+		await JobService.deleteCompletedJob({ workspace: workspaceId!, id })
+		getJob()
+	}
+
+	async function cancelJob(id: string) {
+		try {
+			if (forceCancel) {
+				await JobService.forceCancelQueuedJob({ workspace: workspaceId!, id, requestBody: {} })
+				setTimeout(getJob, 5000)
+			} else {
+				await JobService.cancelQueuedJob({ workspace: workspaceId!, id, requestBody: {} })
+			}
+			sendUserToast(`job ${id} canceled`)
+		} catch (err) {
+			sendUserToast('could not cancel job', true)
+		}
+	}
+
+	// A schedule's upcoming tick sits on a whole second and the backend refuses it; a tick
+	// deferred by a concurrency limit lands on a sub-second instant and can still start now.
+	let canRunNow = $derived(
+		job?.type === 'QueuedJob' &&
+			!job.running &&
+			!job.suspend &&
+			!!job.scheduled_for &&
+			forLater(job.scheduled_for) &&
+			!(job.schedule_path && new Date(job.scheduled_for).getMilliseconds() === 0)
+	)
+
+	async function runJobNow(id: string) {
+		try {
+			await JobService.runQueuedJobNow({ workspace: workspaceId!, id })
+			sendUserToast(`job ${id} will start as soon as a worker is available`)
+			getJob()
+		} catch (err) {
+			sendUserToast(`could not start job now: ${err?.body ?? err}`, true)
+		}
+	}
+
+	// Initialize view tab to logs since result is now outside tabs
+	function initView(): void {
+		// Result is now displayed outside tabs, so always default to logs
+		viewTab = 'logs'
+	}
+
+	async function getJob() {
+		await jobLoader?.watchJob(runId ?? '', {
+			change(job: Job & { result_stream?: string }) {
+				// Result is now displayed outside tabs, no need to switch tabs
+			},
+			done(job) {
+				// Result is now displayed outside tabs, no need to switch tabs
+			}
+		})
+		initView()
+	}
+
+	let persistentScriptDefinition: Script | undefined = $state(undefined)
+
+	async function onJobLoaded() {
+		// We want to set up scriptProgress once job is loaded
+		// We need this to show progress bar if job has progress and is finished
+		if (
+			job &&
+			job.type == 'CompletedJob' &&
+			(job.job_kind == 'script' || isScriptPreview(job.job_kind))
+		) {
+			// If error occurred and job is completed
+			// than we fetch progress from server to display on what progress did it fail
+			// Could be displayed after run or as a historical page
+			// If opening page without running job (e.g. reloading page after run) progress will be displayed instantly
+			MetricsService.getJobProgress({
+				workspace: job.workspace_id ?? 'NO_WORKSPACE',
+				id: job.id
+			}).then((progress) => {
+				// Returned progress is not always 100%, could be 65%, 33%, anything
+				// Its ok if its a failure and we want to keep that value
+				// But we want progress to be 100% if job has been succeeded
+				scriptProgress = progress
+			})
+		}
+
+		if (
+			job &&
+			job.job_kind === 'script' &&
+			job.script_hash &&
+			persistentScriptDefinition === undefined
+		) {
+			const script = await ScriptService.getScriptByHash({
+				workspace: workspaceId!,
+				hash: job.script_hash
+			})
+			if (script.restart_unless_cancelled ?? false) {
+				persistentScriptDefinition = script
+			}
+		}
+	}
+
+	function onRunsPageChangeWithLoader() {
+		forceCancel = false
+		getJob()
+	}
+
+	function onRunsPageChange() {
+		job = undefined
+		persistentScriptDefinition = undefined
+	}
+
+	let notfound = $state(false)
+	let forceCancel = $state(false)
+
+	let debugViewer: Drawer | undefined = $state(undefined)
+	let debugContent: any = $state(undefined)
+	async function debugInfo() {
+		if (job?.id) {
+			debugContent = await JobService.getFlowDebugInfo({ workspace: workspaceId!, id: job?.id })
+			debugViewer?.openDrawer()
+		} else {
+			sendUserToast('Job has no id', true)
+		}
+	}
+
+	function removeSensitiveInfos(
+		jobs: { [job: string]: { args: any; result: any; logs: string } },
+		redactSensitive: boolean
+	) {
+		if (!redactSensitive) {
+			return jobs
+		}
+		if (jobs === undefined || typeof jobs !== 'object') {
+			return []
+		}
+		return Object.fromEntries(
+			Object.entries(jobs).map(([k, job]) => {
+				return [
+					k,
+					{
+						...job,
+						args: '[redacted]',
+						result: '[redacted]',
+						logs: '[redacted]'
+					}
+				]
+			})
+		)
+	}
+
+	let redactSensitive = $state(false)
+
+	function asWorkflowStatus(x: any): Record<string, WorkflowStatus> {
+		if (!x || typeof x !== 'object') return {}
+		const result: Record<string, WorkflowStatus> = {}
+		for (const [k, v] of Object.entries(x)) {
+			if (!k.startsWith('_') || k.startsWith('_step/')) result[k] = v as WorkflowStatus
+		}
+		return result
+	}
+
+	function getStepResults(x: any): Record<string, any> {
+		return x?._checkpoint?.completed_steps ?? {}
+	}
+
+	function forkPreview() {
+		if (isFlowPreview(job?.job_kind)) {
+			if (isHubFlowPath(job?.script_path)) {
+				const hubFlowId = getHubFlowIdFromPath(job?.script_path)
+				if (hubFlowId === undefined) {
+					sendUserToast('Could not determine the hub flow to fork', true)
+					return
+				}
+				$initialArgsStore = job?.args
+				window.open(`/flows/add?hub=${hubFlowId}`)
+				return
+			}
+
+			const state = {
+				flow: { value: job?.raw_flow },
+				path: job?.script_path + '_fork',
+				initialArgs: job?.args
+			}
+			try {
+				localStorage.setItem('fork_flow', JSON.stringify(state))
+			} catch {
+				// Flow too large for localStorage, pass via window reference
+				;(window as any).__forkPreviewData = state
+			}
+			window.open('/flows/add?fork=true')
+		} else {
+			$initialArgsStore = job?.args
+			let n: NewScript = {
+				path: job?.script_path + '_fork',
+				summary: 'Fork of preview of ' + job?.script_path,
+				language: job?.language as NewScript['language'],
+				description: '',
+				content: job?.raw_code ?? '',
+				kind: 'script'
+			}
+			const encodedArgs = encodeState(job?.args)
+			window.open(`/scripts/add?initial_args=${encodedArgs}#${encodeState(n)}`)
+		}
+	}
+
+	let scheduleEditor: ScheduleEditor | undefined = $state(undefined)
+
+	// A job's stored tag is usually backend-derived (language/flow default, possibly
+	// workspace-suffixed) and would be rejected by the CUSTOM_TAGS check if passed back
+	// explicitly. Only carry it into a re-run when it maps back to a custom-tag entry —
+	// the set the override dropdown offers — using the raw (possibly templated) entry.
+	// Pass the run's args if already fetched; template matching needs the full args
+	// (job.args may be truncated for large runs) and fetches them itself otherwise.
+	let customTags: { workspace: string; tags: string[] } | undefined = undefined
+	async function getRerunTagOverride(
+		args: Record<string, any> | undefined
+	): Promise<string | undefined> {
+		const tag = job?.tag
+		const workspace = workspaceId!
+		if (!tag) {
+			return undefined
+		}
+		try {
+			if (customTags?.workspace !== workspace) {
+				customTags = {
+					workspace,
+					tags: await WorkerService.getCustomTagsForWorkspace({ workspace })
+				}
+			}
+		} catch (e) {
+			console.error('Could not load custom tags, not carrying tag over for re-run', e)
+			return undefined
+		}
+		if (customTags.tags.includes(tag)) {
+			return tag
+		}
+		if (isWindmillTooBigObject(args)) {
+			try {
+				args = (await JobService.getJobArgs({ workspace, id: job?.id! })) as Record<string, any>
+			} catch (e) {
+				console.error('Could not load full args, not carrying tag over for re-run', e)
+				return undefined
+			}
+		}
+		return findMatchingCustomTag(tag, customTags.tags, workspace, args)
+	}
+
+	let runImmediatelyLoading = $state(false)
+	// An override may be a function, because the arguments it merges into are not
+	// known until they are here: a `WINDMILL_TOO_BIG` payload is a placeholder
+	// until fetched, and merging over that one drops what the fetch was for.
+	async function runImmediately(argsOverride?: ScriptArgs | ((args: ScriptArgs) => ScriptArgs)) {
+		runImmediatelyLoading = true
+		try {
+			let args = job?.args as ScriptArgs
+			if (isWindmillTooBigObject(args)) {
+				args = (await JobService.getJobArgs({
+					workspace: workspaceId!,
+					id: job?.id!
+				})) as ScriptArgs
+			}
+			args =
+				typeof argsOverride === 'function'
+					? argsOverride(args ?? {})
+					: { ...args, ...(argsOverride ?? {}) }
+
+			const commonArgs = {
+				workspace: workspaceId!,
+				requestBody: args,
+				tag: await getRerunTagOverride(args)
+			}
+			if (job?.job_kind == 'script' || job?.job_kind == 'script_hub' || job?.job_kind == 'flow') {
+				let id
+
+				if (job?.job_kind == 'script') {
+					id = await JobService.runScriptByHash({
+						...commonArgs,
+						hash: job.script_hash!,
+						skipPreprocessor: true
+					})
+				} else if (job?.job_kind == 'script_hub') {
+					id = await JobService.runScriptByPath({
+						...commonArgs,
+						path: job.script_path!,
+						skipPreprocessor: true
+					})
+				} else {
+					id = await JobService.runFlowByPath({
+						...commonArgs,
+						path: job.script_path!,
+						skipPreprocessor: true
+					})
+				}
+
+				// Offer to resolve this failure once the re-run succeeds. Captured here because the
+				// new job carries no back-pointer to the run it supersedes. An already-resolved
+				// failure needs no offer, and its note must not be restated as a supersession.
+				if (job && isJobResolvable(job) && !job.resolved && !actingUser?.operator) {
+					rememberRerunOrigin({ originalId: job.id, rerunId: id, workspace: workspaceId! })
+				}
+				await onNavigate('/run/' + id + '?workspace=' + workspaceId)
+			} else {
+				sendUserToast('Cannot run this job immediately', true)
+			}
+		} catch (err) {
+			// A refusal is the interesting case here: the worker rejects a `dbt
+			// retry` whose run is no longer the saved one, and a caller who saw
+			// nothing happen would just click again.
+			sendUserToast(`Could not create job: ${err}`, true)
+		} finally {
+			runImmediatelyLoading = false
+		}
+	}
+
+	// Whether a `dbt retry` submitted from here would resume THIS run: only the
+	// latest failure of a script is kept per principal, so a later run of it — or
+	// one that failed with nothing to rebuild — leaves this page's retry refused.
+	// Both entry points to it, the dropdown item and the graph's banner, ask.
+	let dbtResumable = $state(false)
+	$effect(() => {
+		const ws = workspaceId
+		const id = job?.id
+		const failed = job?.language === 'dbt' && job?.type === 'CompletedJob' && !job?.success
+		dbtResumable = false
+		if (!ws || !id || !failed) return
+		JobService.getDbtResumable({ workspace: ws, id })
+			.then((held) => {
+				// The page may have moved on, or the workspace changed, in flight.
+				if (job?.id === id && workspaceId === ws) dbtResumable = held === id
+			})
+			.catch(() => {})
+	})
+
+	// The retry goes through `runImmediately` so it carries the run's own arguments
+	// and resolved tag: worker tags, debounce and concurrency keys interpolate from
+	// the submitted arguments at enqueue, while the ones being resumed are restored
+	// later, inside the worker.
+	async function resumeDbtRun() {
+		// Merged INTO the run's own block, not put in its place: those fields are
+		// what a `$args[command.vars.tenant]` tag or concurrency key interpolates
+		// from at enqueue. The worker ignores them for a retry — it rebuilds with
+		// the arguments the failed run had — but the queue has already read them.
+		await runImmediately((args) => ({
+			...args,
+			command: {
+				...((args?.['command'] as Record<string, any> | undefined) ?? {}),
+				label: 'retry',
+				dbt_retry_job: job?.id
+			}
+		}))
+	}
+
+	let showEditButton = $derived(!isRuleActiveInRulesets(rulesets ?? [], 'DisableDirectDeployment'))
+
+	// Admins always pass the backend gate. Everyone else fails closed while the rulesets
+	// are still loading, so the item is never briefly offered to a restricted user.
+	let canSharePublicly = $derived(
+		!!actingUser?.is_admin ||
+			!!actingUser?.is_super_admin ||
+			(rulesets !== undefined &&
+				canUserBypassRuleKindInRulesets(
+					rulesets,
+					'RestrictPublicRunSharing',
+					actingUser ?? undefined
+				))
+	)
+
+	// The dev workspace's editor is not one the session panel can host, so from a preview tab
+	// it opens in a new browser tab, as the session editors' own entry does.
+	function editInFork(e: Event | undefined, kind: 'script' | 'flow', itemPath: string) {
+		if (!embedded) {
+			return onEditInForkClick(e, kind, itemPath, { hasHref: true, prodWorkspace: workspaceId })
+		}
+		const m = e as MouseEvent | undefined
+		if (m && (m.metaKey || m.ctrlKey || m.shiftKey || m.altKey || (m.button ?? 0) !== 0)) return
+		e?.preventDefault()
+		return openEditInFork(kind, itemPath, workspaceId)
+	}
+
+	$effect(() => {
+		job?.id && lastJobId !== job.id && untrack(() => getConcurrencyKey(job))
+	})
+	$effect(() => {
+		workspaceId && runId && untrack(() => onRunsPageChange())
+	})
+	$effect(() => {
+		workspaceId && runId && jobLoader && untrack(() => onRunsPageChangeWithLoader())
+	})
+	$effect(() => {
+		job && untrack(() => onJobLoaded())
+	})
+	if (ownsPage) {
+		$effect(() => {
+			const status = getJobStatusKind(job)
+			if (status) {
+				setStatusFavicon(status)
+			} else {
+				resetFavicon()
+			}
+		})
+		onDestroy(resetFavicon)
+	}
+
+	// The bar shares its row with the breadcrumb, and this page's name is a uuid that gives way
+	// grudgingly, so the buttons drop their labels rather than push each other off the end.
+	// Embedded, the buttons have a row of their own that wraps.
+	const compactBar = $derived(!embedded && pageHeader.barWidth > 0 && pageHeader.barWidth < 1150)
+</script>
+
+<HighlightTheme />
+
+<ScheduleEditor bind:this={scheduleEditor} />
+
+{#if (job?.job_kind == 'flow' || isFlowPreview(job?.job_kind)) && job?.['running'] && job?.parent_job == undefined}
+	<Drawer bind:this={debugViewer} size="800px">
+		<DrawerContent title="Debug Detail" on:close={debugViewer.closeDrawer}>
+			{#snippet actions()}
+				<div class="flex items-center gap-1">
+					<div class="w-60 pt-2">
+						<Toggle bind:checked={redactSensitive} options={{ right: 'Redact args/result/logs' }} />
+					</div>
+					<Button
+						on:click={() =>
+							copyToClipboard(
+								JSON.stringify(removeSensitiveInfos(debugContent, redactSensitive), null, 4)
+							)}
+						unifiedSize="md"
+						variant="subtle"
+					>
+						<div class="flex gap-2 items-center">Copy <ClipboardCopy /> </div>
+					</Button>
+				</div>
+			{/snippet}
+			<pre
+				><code class="text-2xs p-2">
+					<Highlight
+						language={json}
+						code={JSON.stringify(removeSensitiveInfos(debugContent, redactSensitive), null, 4)}
+					/>
+			</code></pre
+			>
+		</DrawerContent>
+	</Drawer>
+{/if}
+{#if !job || (job?.job_kind != 'flow' && job?.job_kind != 'flownode' && job?.job_kind != 'flowpreview')}
+	<JobLoader
+		bind:scriptProgress
+		bind:this={jobLoader}
+		bind:isLoading={testIsLoading}
+		bind:job
+		bind:jobUpdateLastFetch
+		workspaceOverride={workspaceId}
+		bind:notfound
+		bind:loadError
+	/>
+{/if}
+
+{#snippet flowRestartButton(
+	state: ReturnType<typeof useNestedRestartState>,
+	step: string,
+	triggerStyle: 'button' | 'link'
+)}
+	{#if job}
+		<FlowRestartButton
+			jobId={job.id}
+			selectedJobStep={step}
+			selectedJobStepType={state.selectedJobStepType}
+			restartBranchNames={state.restartBranchNames}
+			nestedPath={state.nestedRestartSupported ? state.nestedRestartPath : undefined}
+			nestedTopStepId={state.nestedRestartTopStepId}
+			nestedTopBranchOrIterationN={state.nestedRestartTopBranchOrIterationN}
+			presetIterationN={state.topLevelLoopIteration}
+			iterationCounts={state.iterationCounts}
+			nestedPathIterationCounts={state.nestedPathIterationCounts}
+			onRestartComplete={(newJobId) => {
+				onNavigate('/run/' + newJobId + '?workspace=' + workspaceId)
+			}}
+			flowPath={job.script_path}
+			flowVersionId={job.script_hash ? parseInt(job.script_hash, 16) : undefined}
+			disabled={!$enterpriseLicense}
+			enterpriseOnly={!$enterpriseLicense}
+			{triggerStyle}
+			unifiedSize="sm"
+		/>
+	{/if}
+{/snippet}
+
+<Portal name="persistent-run">
+	<PersistentScriptDrawer bind:this={persistentScriptDrawer} />
+</Portal>
+
+{#if loadError?.status === 403}
+	<div class="max-w-3xl px-4 mx-auto w-full">
+		<div class="mt-6">
+			<Alert type="warning" title="You don't have access to this run">
+				<div class="flex flex-col gap-2">
+					<p>
+						This run exists in <span class="font-semibold">{workspaceId}</span>, but you don't have
+						permission to view it.
+					</p>
+					<p>
+						Ask a colleague who can see it to open the run and use the
+						<span class="font-semibold">Share</span> button to send you a read-only link. Opening that
+						link will grant you access to this run (and its steps).
+					</p>
+				</div>
+			</Alert>
+			<div class="mt-4">
+				<Button href="/runs" unifiedSize="md" variant="accent">Go to runs page</Button>
+			</div>
+		</div>
+	</div>
+{:else if notfound || (job?.workspace_id != undefined && workspaceId != undefined && job?.workspace_id != workspaceId)}
+	{@const currentWorkspace = $userWorkspaces.find((w) => w.id === workspaceId)}
+	{@const otherWorkspaces = $userWorkspaces.filter((w) => w.id !== workspaceId)}
+	<div class="max-w-lg px-4 mx-auto w-full py-16">
+		<div class="flex flex-col items-center text-center gap-3">
+			<div class="rounded-full bg-surface-secondary p-3">
+				<SearchX size={24} class="text-secondary" />
+			</div>
+			<h1 class="text-lg font-semibold text-emphasis">Run not found</h1>
+			<p class="text-xs text-secondary">
+				No run with ID
+				<span class="font-mono text-emphasis break-all">{runId}</span>
+				exists in
+				<span class="font-semibold text-emphasis">{currentWorkspace?.name ?? workspaceId}</span>. It
+				may belong to another workspace, or it may have been deleted.
+			</p>
+		</div>
+
+		{#if otherWorkspaces.length > 0}
+			<div class="mt-8 flex flex-col gap-2">
+				<h2 class="text-xs font-semibold text-emphasis">Look in another workspace</h2>
+				<div
+					class="flex flex-col rounded-md border border-light bg-surface-tertiary divide-y divide-border-light overflow-hidden"
+				>
+					{#each otherWorkspaces as workspace (workspace.id)}
+						<Button
+							variant="subtle"
+							unifiedSize="md"
+							btnClasses="h-auto justify-start text-left gap-3 px-3 py-2 rounded-none"
+							endIcon={{ icon: ArrowRight, classes: 'text-hint' }}
+							onClick={() => onNavigate(`/run/${runId}?workspace=${workspace.id}`)}
+						>
+							<WorkspaceIcon workspaceColor={workspace.color} padding="p-1" size={12} />
+							<div class="flex flex-col min-w-0 grow">
+								<span class="text-xs font-semibold text-emphasis truncate">{workspace.name}</span>
+								<span class="text-2xs text-secondary truncate">{workspace.id}</span>
+							</div>
+						</Button>
+					{/each}
+				</div>
+			</div>
+		{/if}
+
+		<div class="mt-6 flex justify-center">
+			<Button href="/runs" unifiedSize="md" variant="default">Go to runs page</Button>
+		</div>
+	</div>
+{:else}
+	<Skeleton
+		class="max-w-7xl p-4 mx-auto w-full"
+		loading={!job}
+		layout={[
+			// 1. Job Header
+			[{ h: 12, w: 100 }],
+			1,
+			// 2. Progress Bar
+			[{ h: 2, w: 100 }],
+			1.5
+		]}
+	/>
+	<!-- `section`, not an item: a run is not a workspace item the picker can open, so the trail
+	     ends with its id as a plain name. -->
+	{#if embedded}
+		<div class="max-w-7xl mx-auto w-full px-4 pt-4 flex flex-wrap items-center justify-end gap-2">
+			{@render runActions()}
+		</div>
+	{:else}
+		<PageHeaderContent section={{ label: `run/${runId}` }} actions={runActions} />
+	{/if}
+
+	{#snippet runActions()}
+		{@const isScript = job?.job_kind === 'script'}
+		{@const isHubFlowPreview = isFlowPreview(job?.job_kind) && isHubFlowPath(job?.script_path)}
+		{@const runsHref = `/runs/${job?.script_path}${!isScript ? '?jobKind=flow' : ''}`}
+		{#if job && 'deleted' in job && !job?.deleted && ($superadmin || (actingUser?.is_admin ?? false))}
+			<Dropdown
+				items={[
+					{
+						displayName: 'Delete result, logs and args (admin only)',
+						action: () => {
+							job?.id && deleteCompletedJob(job.id)
+						},
+						type: 'delete'
+					}
+				]}
+			>
+				{#snippet buttonReplacement()}
+					<Button nonCaptureEvent variant="default" unifiedSize="sm" startIcon={{ icon: Trash }} />
+				{/snippet}
+			</Dropdown>
+			{#if job?.job_kind === 'script' || job?.job_kind === 'flow'}
+				<Button
+					href={runsHref}
+					variant="default"
+					unifiedSize="sm"
+					iconOnly={compactBar}
+					title="View runs"
+					startIcon={{ icon: List }}
+				>
+					View runs
+				</Button>
+			{/if}
+		{/if}
+		{#if job}
+			<Dropdown
+				customWidth={280}
+				items={[
+					{
+						displayName: 'Copy link for members',
+						icon: Users,
+						tooltip:
+							'Read-only link to this run for another member of this workspace. They must be logged in.',
+						action: () => job && shareReadLink(job.id)
+					},
+					{
+						displayName: 'Copy public link',
+						icon: Globe,
+						disabled: !canSharePublicly,
+						tooltip: canSharePublicly
+							? "Read-only link that anyone on the internet can open, without logging in. It shows a minimal version of this page: this run's inputs, result and logs, and for a flow its graph plus every step's inputs, result, logs and code. The link cannot be revoked."
+							: 'Sharing a run publicly is restricted in this workspace. Ask an admin to share it, or to grant you a bypass on the ruleset.',
+						action: () => job && sharePublicLink(job.id)
+					}
+				]}
+			>
+				{#snippet buttonReplacement()}
+					<Button
+						nonCaptureEvent
+						variant="default"
+						unifiedSize="sm"
+						iconOnly={compactBar}
+						title="Share"
+						startIcon={{ icon: Share2 }}
+					>
+						Share
+					</Button>
+				{/snippet}
+			</Dropdown>
+		{/if}
+		{@const stem = job?.job_kind === 'script_hub' ? '/scripts' : `/${job?.job_kind}s`}
+		<!-- A script is addressed by the hash this run executed. Embedded, that goes in the query:
+		     the host's tabs are keyed by an item's path, and a hash there would be a tab on no item. -->
+		{@const viewHref =
+			isScript && embedded
+				? `/scripts/get/${job?.script_path}?version=${job?.script_hash}`
+				: `${stem}/get/${isScript ? job?.script_hash : job?.script_path}`}
+		{#if (job?.job_kind == 'flow' || isFlowPreview(job?.job_kind)) && job?.['running'] && job?.parent_job == undefined}
+			<div class="inline">
+				<Dropdown
+					items={[
+						{
+							displayName: 'Show Flow Debug Info',
+							action: () => {
+								debugInfo()
+							}
+						}
+					]}
+					class="h-auto"
+				>
+					{#snippet buttonReplacement()}
+						<Button nonCaptureEvent unifiedSize="sm" variant="subtle">
+							<div class="flex flex-row items-center">
+								<EllipsisVertical size={14} />
+							</div>
+						</Button>
+					{/snippet}
+				</Dropdown>
+			</div>
+		{/if}
+		{#if isFlowPreview(job?.job_kind) || isScriptPreview(job?.job_kind)}
+			<Button
+				unifiedSize="sm"
+				variant="default"
+				iconOnly={compactBar}
+				title={isHubFlowPreview
+					? 'Fork flow into workspace'
+					: `Fork ${isFlowPreview(job?.job_kind) ? 'flow' : 'code'} preview`}
+				startIcon={{ icon: GitBranch }}
+				on:click={forkPreview}
+			>
+				{isHubFlowPreview
+					? 'Fork flow into workspace'
+					: `Fork ${isFlowPreview(job?.job_kind) ? 'flow' : 'code'} preview`}
+			</Button>
+		{/if}
+		{#if persistentScriptDefinition !== undefined}
+			<Button
+				unifiedSize="sm"
+				variant="default"
+				iconOnly={compactBar}
+				title="Current runs"
+				startIcon={{ icon: Activity }}
+				on:click={() => {
+					persistentScriptDrawer?.open?.(persistentScriptDefinition)
+				}}
+			>
+				Current runs
+			</Button>
+		{/if}
+		{#if canRunNow}
+			<Button
+				unifiedSize="md"
+				variant="default"
+				startIcon={{ icon: Play }}
+				on:click={() => job?.id && runJobNow(job.id)}
+				title="Start this job now instead of at its scheduled time, skipping any remaining delay or sleep. It keeps the same id, and a concurrency limit is still enforced."
+			>
+				Run now
+			</Button>
+		{/if}
+		{#if job && job?.type != 'CompletedJob' && (!job?.schedule_path || job?.['running'] == true)}
+			{#if !forceCancel}
+				<Button
+					unifiedSize="sm"
+					variant="accent"
+					destructive
+					startIcon={{ icon: TimerOff }}
+					on:click|once={() => {
+						if (job?.id) {
+							cancelJob(job?.id)
+							setTimeout(() => {
+								forceCancel = true
+							}, 3001)
+						}
+					}}
+					title={`Cancel the ${job?.job_kind === 'script' ? 'script' : job?.job_kind === 'flow' ? 'flow' : 'job'}`}
+				>
+					Cancel
+				</Button>
+			{:else}
+				<Button
+					unifiedSize="sm"
+					variant="accent"
+					destructive
+					startIcon={{ icon: TimerOff }}
+					on:click|once={() => {
+						if (job?.id) {
+							cancelJob(job?.id)
+						}
+					}}
+				>
+					Force Cancel
+				</Button>
+			{/if}
+		{/if}
+		{#if job?.schedule_path}
+			<Button
+				unifiedSize="sm"
+				variant="default"
+				on:click={() => {
+					if (!job || !job.schedule_path) {
+						return
+					}
+					scheduleEditor?.openEdit(job.schedule_path, job.job_kind == 'flow')
+				}}
+				startIcon={{ icon: Calendar }}>Edit schedule</Button
+			>
+		{/if}
+		{#if restartStep !== undefined && canRestart(restart)}
+			{@render flowRestartButton(restart, restartStep, 'button')}
+		{/if}
+		{#if job?.job_kind === 'script' || job?.job_kind === 'script_hub' || job?.job_kind === 'flow'}
+			<Button
+				on:click={async () => {
+					// The form this lands on rebuilds the whole project. When resuming
+					// THIS run is the cheaper thing to do, name it so the form can
+					// offer that in one click rather than leaving the reader to know.
+					const from = dbtResumable
+						? `${viewHref.includes('?') ? '&' : '?'}dbt_retry_from=${job?.id}`
+						: ''
+					onNavigate(
+						viewHref +
+							from +
+							`#${computeSharableHash(job?.args, await getRerunTagOverride(job?.args))}`
+					)
+				}}
+				unifiedSize="sm"
+				variant="default"
+				iconOnly={compactBar}
+				title="Run again"
+				startIcon={{ icon: RefreshCw }}
+				loading={runImmediatelyLoading}
+				dropdownItems={[
+					// A failed dbt run's cheap next step is resuming its failed and skipped
+					// nodes rather than rebuilding the project, and `dbt_command` is the
+					// only argument that differs. Offered first, and only while the saved
+					// failure is still this run — which is what `dbtResumable` answers.
+					...(dbtResumable ? [{ label: 'dbt retry with same args', onClick: resumeDbtRun }] : []),
+					{
+						label: 'Run immediately with same args',
+						onClick: () => runImmediately()
+					}
+				]}
+			>
+				Run again
+			</Button>
+		{/if}
+		{#if job?.job_kind === 'script' || job?.job_kind === 'flow'}
+			{#if !actingUser?.operator}
+				{#if editRights.canEditItem(isScript ? 'script' : 'flow', job?.script_path ?? '', {})}
+					<Button
+						href={`${stem}/edit/${job?.script_path}?workspace=${workspaceId}`}
+						on:click={() => {
+							$initialArgsStore = job?.args
+						}}
+						unifiedSize="sm"
+						variant="default"
+						disabled={!showEditButton}
+						iconOnly={compactBar}
+						title="Edit"
+						startIcon={{ icon: Pen }}>Edit</Button
+					>
+					{#if showEditButton}
+						<!-- Opens the deployed runnable at this job's path, like Edit — unlike
+							     "View script", which pins the hash this run executed. Same gate as
+							     Edit: where direct deployment is off, the way in is "Edit in fork". -->
+						<OpenInSessionButton
+							source={{
+								target: { kind: isScript ? 'script' : 'flow', path: job?.script_path ?? '' },
+								workspaceId: workspaceId ?? undefined
+							}}
+							btnProps={{ unifiedSize: 'sm' }}
+						/>
+					{/if}
+				{/if}
+				{#if !showEditButton && !isCloudHosted() && editInForkAllowed(workspaceId, $userWorkspaces)}
+					<Button
+						href={buildForkEditUrl(
+							isScript ? 'script' : 'flow',
+							job?.script_path ?? '',
+							workspaceId
+						)}
+						onClick={(e) => editInFork(e, isScript ? 'script' : 'flow', job?.script_path ?? '')}
+						unifiedSize="sm"
+						variant="default"
+						iconOnly={compactBar}
+						title={editInForkLabel(workspaceId, $userWorkspaces)}
+						startIcon={{ icon: Pen }}>{editInForkLabel(workspaceId, $userWorkspaces)}</Button
+					>
+				{/if}
+			{/if}
+		{/if}
+		{#if job?.job_kind === 'script' || job?.job_kind === 'script_hub' || job?.job_kind === 'flow'}
+			<Button
+				href={viewHref}
+				unifiedSize="sm"
+				variant="accent"
+				iconOnly={compactBar}
+				title="View {job?.job_kind === 'script_hub' ? 'script' : job?.job_kind}"
+				startIcon={{
+					icon:
+						job?.job_kind === 'script' || job?.job_kind === 'script_hub'
+							? Code2
+							: job?.job_kind === 'flow'
+								? BarsStaggered
+								: Code2
+				}}
+			>
+				View {job?.job_kind === 'script_hub' ? 'script' : job?.job_kind}
+			</Button>
+		{/if}
+	{/snippet}
+	<div class={twMerge('w-full', isNotFlow(job?.job_kind) && 'pb-8')}>
+		<!-- Flow Detail Header Card -->
+		<div class="max-w-7xl mx-auto px-4 pt-4">
+			<Skeleton loading={!job} layout={[[24]]} />
+			{#if job}
+				<JobDetailHeader
+					{job}
+					{scheduleEditor}
+					displayPersistentScriptDefinition={!!persistentScriptDefinition}
+					openPersistentScriptDrawer={() => {
+						persistentScriptDrawer?.open?.(persistentScriptDefinition)
+					}}
+					{concurrencyKey}
+				/>
+			{/if}
+		</div>
+		{#if job?.['deleted']}
+			<div class="max-w-7xl mx-auto w-full px-4 mt-6">
+				<Alert type="error" title="Deleted">
+					The content of this run was deleted (by an admin, no less)
+				</Alert>
+			</div>
+			<div class="my-4"></div>
+		{/if}
+
+		<!-- Flow Progress Bar (for flows only) -->
+		{#if job?.job_kind === 'flow' || job?.job_kind === 'flowpreview'}
+			<div class="max-w-7xl mx-auto w-full px-4 flex flex-col gap-4 mt-2">
+				<FlowProgressBar
+					{job}
+					bind:currentSubJobProgress={scriptProgress}
+					class="w-full"
+					textPosition="bottom"
+					slim
+					showStepId
+				>
+					{#snippet errorAction()}
+						<!-- A saved agent's run is its one step: naming it adds nothing. -->
+						{#if failedTopLevelStep && failedTopLevelStep !== AGENT_STEP_ID}
+							<span>at step {failedTopLevelStep}</span>
+							{#if $enterpriseLicense && canRestart(failedRestart)}
+								<span>·</span>
+								{@render flowRestartButton(failedRestart, failedTopLevelStep, 'link')}
+								<span>on this flow version, or on a new one after you fix it</span>
+							{/if}
+						{/if}
+					{/snippet}
+				</FlowProgressBar>
+				{#if suspendStatus}
+					<FlowExecutionStatus
+						{job}
+						{isOwner}
+						{suspendStatus}
+						innerModules={job?.flow_status?.modules}
+					/>
+				{/if}
+			</div>
+		{/if}
+
+		<!-- Arguments and actions -->
+		<div class="max-w-7xl mx-auto w-full px-4 mt-12">
+			<div class="text-xs text-emphasis font-semibold mb-1">Inputs</div>
+			<div class="flex flex-col gap-y-6">
+				<JobArgs
+					workspace={job?.workspace_id ?? workspaceId ?? 'no_w'}
+					id={job?.id}
+					args={job?.args}
+				/>
+				{#if job && currentJobIsLongRunning && showExplicitProgressTip && !scriptProgress && 'running' in job}
+					<Alert
+						class="p-1 flex flex-row relative text-center"
+						size="xs"
+						type="info"
+						title="tip: Track progress of longer jobs"
+						tooltip="For better transparency and verbosity, you can try setting progress from within the script."
+						documentationLink="https://www.windmill.dev/docs/advanced/explicit_progress"
+					>
+						<button
+							type="button"
+							onclick={() => {
+								localStorage.setItem('hideExplicitProgressTip', 'true')
+								showExplicitProgressTip = false
+							}}
+							class="absolute m-2 top-0 right-0 inline-flex rounded-md bg-surface-secondary text-primary hover:text-primary focus:outline-none"
+						>
+							<span class="sr-only">Close</span>
+							<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+								<path
+									d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+								/>
+							</svg>
+						</button>
+					</Alert>
+				{/if}
+			</div>
+		</div>
+
+		{#if job}
+			<ScriptRetryChain {job} {onNavigate} />
+		{/if}
+
+		{#if isNotFlow(job?.job_kind)}
+			{#if ['python3', 'bun', 'deno'].includes(job?.language ?? '') && (job?.job_kind == 'script' || isScriptPreview(job?.job_kind))}
+				<ExecutionDuration {job} bind:longRunning={currentJobIsLongRunning} />
+			{/if}
+			<div class="max-w-7xl mx-auto w-full px-4 mb-10">
+				{#if job?.workflow_as_code_status && job.job_kind !== 'aiagent'}
+					<div class="mr-2 sm:mr-0 mt-12 mb-6">
+						<h3 class="text-xs font-semibold text-emphasis mb-1">Workflow Timeline</h3>
+						<div class="border rounded-md overflow-hidden">
+							<WorkflowTimeline
+								flow_status={asWorkflowStatus(job.workflow_as_code_status)}
+								flowDone={job.type == 'CompletedJob'}
+								stepResults={getStepResults(job.workflow_as_code_status)}
+								result={job.result}
+								success={(job as any).success !== false}
+								jobId={job.id}
+							/>
+						</div>
+					</div>
+				{/if}
+				{#if scriptProgress}
+					<JobProgressBar {job} {scriptProgress} class="py-4" hideStepTitle={true} />
+				{/if}
+
+				<!-- The models a dbt run touches, above its result: the run page is
+				     where you land on a running job, and the per-node table below
+				     only exists once the job has produced one. -->
+				{#if job?.language === 'dbt' && job?.script_path}
+					<div class="mr-2 sm:mr-0 mt-12">
+						<h3 class="text-xs font-semibold text-emphasis mb-1">Models</h3>
+						<DbtRunGraph
+							scriptPath={job.script_path}
+							jobId={job.id}
+							running={job.type !== 'CompletedJob'}
+							result={job.type === 'CompletedJob' ? job.result : undefined}
+							scriptHash={job.script_hash}
+							runArgs={job.args}
+							canResume={dbtResumable}
+							onResume={resumeDbtRun}
+						/>
+					</div>
+				{/if}
+
+				<!-- Result Section (moved outside tabs) -->
+				{#if job}
+					<div class="mr-2 sm:mr-0 mt-12 mb-6">
+						<h3 class="text-xs font-semibold text-emphasis mb-1">Result</h3>
+						<div class="border rounded-md bg-surface-tertiary p-4 overflow-auto max-h-screen">
+							{#if job.result_stream || (job.type == 'CompletedJob' && job.result !== undefined)}
+								<DisplayResult
+									workspaceId={job?.workspace_id}
+									result_stream={job.result_stream}
+									jobId={job?.id}
+									result={job.result}
+									language={job?.language}
+									isTest={false}
+								/>
+							{:else}
+								<div class="text-secondary text-sm">No output is available yet</div>
+							{/if}
+						</div>
+					</div>
+					{#if job.id && job.workspace_id}
+						<UpstreamSnapshotsPanel args={job.args} />
+						<DispatchEventsPanel workspace={job.workspace_id} jobId={job.id} />
+					{/if}
+				{/if}
+
+				<!-- Logs and outputs-->
+				<div class="mr-2 sm:mr-0 mt-6">
+					<Tabs bind:selected={viewTab}>
+						<Tab value="logs" label="Logs" />
+						<Tab value="stats" label="Metrics" />
+						<Tab value="traces" label="Traces" />
+						<Tab value="assets" label="Assets" />
+						{#if isScriptPreview(job?.job_kind)}
+							<Tab value="code" label="Code" />
+						{/if}
+					</Tabs>
+
+					<Skeleton loading={!job} layout={[[5]]} />
+					{#if job}
+						<div
+							class={twMerge(
+								'flex flex-row border rounded-md p-2 mt-2 overflow-auto min-h-[600px]',
+								viewTab == 'logs' ? 'bg-surface-secondary' : 'bg-surface-tertiary'
+							)}
+						>
+							{#if viewTab == 'logs'}
+								<div class="w-full">
+									<LogViewer
+										jobId={job.id}
+										duration={job?.['duration_ms']}
+										mem={job?.['mem_peak']}
+										isLoading={job?.['running'] == false}
+										content={job?.logs}
+										tag={job?.tag}
+									/>
+								</div>
+							{:else if viewTab == 'assets'}
+								<div class="w-full">
+									<JobAssetsViewer {job} />
+								</div>
+							{:else if viewTab == 'traces'}
+								<div class="w-full">
+									<JobOtelTraces jobId={job.id} />
+								</div>
+							{:else if viewTab == 'code'}
+								{#if job && 'raw_code' in job && job.raw_code}
+									<div class="text-xs">
+										<HighlightCode lines language={job.language} code={job.raw_code} />
+									</div>
+								{:else if job}
+									<span class="text-sm">No code available</span>
+								{:else}
+									<Skeleton layout={[[5]]} />
+								{/if}
+							{:else if viewTab == 'stats'}
+								<div class="w-full">
+									<MemoryFootprintViewer jobId={job.id} {jobUpdateLastFetch} />
+								</div>
+							{:else}
+								<div class="w-full p-4 text-secondary">Select a tab to view content</div>
+							{/if}
+						</div>
+					{/if}
+				</div>
+			</div>
+		{:else if !job?.['deleted']}
+			<div class="mt-10"></div>
+
+			<div class="w-full mt-10">
+				{#if job?.id}
+					<FlowStatusViewer
+						jobId={job?.id ?? ''}
+						onJobsLoaded={({ job: newJob }) => {
+							job = newJob
+						}}
+						onDone={({ job: newJob }) => {
+							job = newJob
+						}}
+						initialJob={job}
+						{workspaceId}
+						bind:selectedJobStep
+						bind:suspendStatus
+						bind:isOwner
+						bind:localModuleStates={graphModuleStates}
+						bind:expandedSubflows
+					/>
+				{:else}
+					<Skeleton layout={[[5]]} />
+				{/if}
+			</div>
+		{/if}
+	</div>
+{/if}
+
+<FlowAssetsHandler
+	modules={job?.raw_flow?.modules ?? []}
+	enableDbExplore
+	enablePathScriptAndFlowAssets
+/>
diff --git a/frontend/src/lib/components/runs/ScriptRetryChain.svelte b/frontend/src/lib/components/runs/ScriptRetryChain.svelte
index 2b2fc2449b..f7334467da 100644
--- a/frontend/src/lib/components/runs/ScriptRetryChain.svelte
+++ b/frontend/src/lib/components/runs/ScriptRetryChain.svelte
@@ -6,7 +6,10 @@
 	import { resource } from 'runed'
 	import { canSkipRetryChainQuery } from './scriptRetryChain'
 
-	let { job }: { job: Job } = $props()
+	let {
+		job,
+		onNavigate = goto
+	}: { job: Job; onNavigate?: (url: string) => void | Promise<void> } = $props()
 
 	type AttemptColor = 'green' | 'red' | 'blue' | 'gray'
 	type Attempt = { id: string; color: AttemptColor; current: boolean }
@@ -141,7 +144,7 @@
 					size="xs"
 					color="gray"
 					variant="border"
-					onclick={() => goto(`/run/${self?.handledJob}?workspace=${ws}`)}
+					onclick={() => onNavigate(`/run/${self?.handledJob}?workspace=${ws}`)}
 				>
 					Handled run
 				</Button>
@@ -163,7 +166,7 @@
 						size="xs"
 						color={attempt.color}
 						variant={attempt.current ? 'contained' : 'border'}
-						onclick={() => goto(`/run/${attempt.id}?workspace=${ws}`)}
+						onclick={() => onNavigate(`/run/${attempt.id}?workspace=${ws}`)}
 					>
 						{i === 0 ? 'Original' : `Attempt ${i}`}
 					</Button>
@@ -180,7 +183,7 @@
 						size="xs"
 						color={handler.color}
 						variant="border"
-						onclick={() => goto(`/run/${handler.id}?workspace=${ws}`)}
+						onclick={() => onNavigate(`/run/${handler.id}?workspace=${ws}`)}
 					>
 						{HANDLER_LABEL[handler.kind]}
 					</Button>
diff --git a/frontend/src/lib/components/sessions/ItemViewerView.svelte b/frontend/src/lib/components/sessions/ItemViewerView.svelte
index ca5fc2a0e5..5c8299de15 100644
--- a/frontend/src/lib/components/sessions/ItemViewerView.svelte
+++ b/frontend/src/lib/components/sessions/ItemViewerView.svelte
@@ -28,6 +28,8 @@
 		kind,
 		path,
 		version,
+		locationHash = '',
+		dbtRetryFrom,
 		workspaceId,
 		tabId,
 		container,
@@ -42,6 +44,10 @@
 		path: string
 		/** Deployed version this tab is pinned to, from its URL's `?version=`. */
 		version?: string
+		/** `#`-fragment of the tab's URL: the args a run's `Run again` prefills the form with. */
+		locationHash?: string
+		/** The failed dbt run that `Run again` offers to resume, from `?dbt_retry_from=`. */
+		dbtRetryFrom?: string
 		workspaceId: string
 		/** Whether this side is the one on screen. Hidden sides stay mounted, so this gates
 		 * the window-level keyboard handler — several instances listen on the window. */
@@ -83,10 +89,20 @@
 		reloadKey++
 	}
 
-	const searchParams = $derived(version ? new URLSearchParams({ version }) : undefined)
+	const searchParams = $derived(
+		version || dbtRetryFrom
+			? new URLSearchParams({
+					...(version ? { version } : {}),
+					...(dbtRetryFrom ? { dbt_retry_from: dbtRetryFrom } : {})
+				})
+			: undefined
+	)
 
 	// Remounts the detail page below, which loads on mount.
-	const loadKey = $derived(`${workspaceId}/${kind}/${path}/${version ?? ''}/${reloadKey}`)
+	// The fragment is part of it: the detail pages seed their form from it once, on mount.
+	const loadKey = $derived(
+		`${workspaceId}/${kind}/${path}/${version ?? ''}/${locationHash}/${reloadKey}`
+	)
 	// Nothing deployed at this path. Stamped with the load it answers, so a refetch or a
 	// re-pointed tab is never answered from an earlier load's verdict.
 	let notFoundFor: string | undefined = $state(undefined)
@@ -214,6 +230,7 @@
 			hash={path}
 			workspace={workspaceId}
 			{searchParams}
+			{locationHash}
 			{onNavigate}
 			{active}
 			embedded
@@ -224,6 +241,7 @@
 			{path}
 			workspace={workspaceId}
 			{searchParams}
+			{locationHash}
 			{onNavigate}
 			{active}
 			embedded
diff --git a/frontend/src/lib/components/sessions/PreviewTabHost.svelte b/frontend/src/lib/components/sessions/PreviewTabHost.svelte
index 3b8e722441..1ecb921c98 100644
--- a/frontend/src/lib/components/sessions/PreviewTabHost.svelte
+++ b/frontend/src/lib/components/sessions/PreviewTabHost.svelte
@@ -97,6 +97,9 @@
 			? (new URL(tab.url, 'http://x').searchParams.get('version') ?? undefined)
 			: undefined
 	)
+	// What a run's `Run again` hands the deployed page it opens: the run's args in the
+	// fragment, and for a dbt run the failure it could resume instead.
+	const viewerUrl = $derived(slot.kind === 'viewer' ? new URL(tab.url, 'http://x') : undefined)
 
 	// The path an editor reports is its deployed one, which a staged rename can make
 	// differ from this tab's — so the view opens on what actually exists.
@@ -147,6 +150,7 @@
 	// A page item's editor reads its draft only when it loads, so a reload remounts it.
 	let pageItemReloadNonce = $state(0)
 	let pageListReloadNonce = $state(0)
+	let runReloadNonce = $state(0)
 
 	export function reload() {
 		// A live editor shares the runtime store the chat mutates, so generic chat
@@ -168,6 +172,10 @@
 			pageListReloadNonce++
 			return
 		}
+		if (slot.kind === 'run') {
+			runReloadNonce++
+			return
+		}
 		try {
 			const win = frame?.contentWindow
 			if (!win) return
@@ -393,6 +401,8 @@
 						kind={itemKind}
 						path={itemPath}
 						version={pinnedVersion}
+						locationHash={viewerUrl?.hash}
+						dbtRetryFrom={viewerUrl?.searchParams.get('dbt_retry_from') ?? undefined}
 						{workspaceId}
 						tabId={tab.id}
 						container={overlayHostEl}
@@ -444,6 +454,29 @@
 			{/await}
 		{/if}
 	</div>
+{:else if slot.kind === 'run' && mounted && runtime}
+	<div
+		bind:this={overlayHostEl}
+		class="absolute inset-0 flex flex-col min-h-0 bg-surface {visibility}"
+		aria-hidden={!active}
+	>
+		{#if overlayHostEl}
+			{#await import('./RunViewerView.svelte')}
+				{@render editorLoading()}
+			{:then Module}
+				<!-- A run stays in the workspace it ran in, which the tab's URL names: the
+				     session's own can change under an open tab (a staged fork committing). -->
+				<Module.default
+					{runtime}
+					jobId={slot.jobId}
+					workspaceId={slot.workspace ?? workspaceId}
+					tabId={tab.id}
+					container={overlayHostEl}
+					reloadNonce={runReloadNonce}
+				/>
+			{/await}
+		{/if}
+	</div>
 {:else if slot.kind === 'artifact' && mounted}
 	<div
 		bind:this={overlayHostEl}
diff --git a/frontend/src/lib/components/sessions/RunViewerView.svelte b/frontend/src/lib/components/sessions/RunViewerView.svelte
new file mode 100644
index 0000000000..0266327f89
--- /dev/null
+++ b/frontend/src/lib/components/sessions/RunViewerView.svelte
@@ -0,0 +1,106 @@
+<script lang="ts">
+	/*
+	 * A run in a session preview tab, rendered by the component the workspace `/run/<id>` page
+	 * renders. Everything it reaches is scoped to the run's workspace through `workspace`, and
+	 * every navigation it attempts is caught here and turned into a move inside the preview
+	 * panel, so nothing takes the browser out of the session.
+	 */
+	import { setContext, untrack } from 'svelte'
+	import RunDetail from '$lib/components/runs/RunDetail.svelte'
+	import type { SessionRuntime } from './sessionRuntime.svelte'
+	import {
+		parseHistoricalScriptEdit,
+		parsePreviewItemRoute,
+		parseRunRoute,
+		previewLocationLabel,
+		barePath
+	} from './previewRouter'
+
+	let {
+		runtime,
+		jobId,
+		workspaceId,
+		tabId,
+		container,
+		reloadNonce = 0
+	}: {
+		runtime: SessionRuntime
+		jobId: string
+		workspaceId: string
+		/** The preview tab hosting this run, which a move to another run re-points. */
+		tabId: string
+		/** The tab's host element, which also holds the overlays the page portals out. */
+		container: HTMLElement | undefined
+		/** Bumped to load the run again from the server. */
+		reloadNonce?: number
+	} = $props()
+
+	// Mounted in the preview panel, outside the chat's own subtree, as ItemViewerView is: the
+	// run page's AI entry points would otherwise offer a session from inside one.
+	setContext(
+		'aiChatManager',
+		untrack(() => runtime.manager)
+	)
+
+	// Everything the run page navigates to, resolved against the preview panel. Another run —
+	// a re-run, a retry, the parent job — is still this tab's subject, so it re-points in
+	// place; an item or any other page opens beside it. Nothing reaches the top-level router.
+	function onNavigate(url: string): void {
+		const parsed = new URL(url, window.location.origin)
+		const href = `${parsed.pathname}${parsed.search}${parsed.hash}`
+		if (parseRunRoute(href)) {
+			runtime.previewTabs.navigate({ type: 'page', href, label: previewLocationLabel(href) }, tabId)
+			return
+		}
+		const route = parsePreviewItemRoute(href)
+		// Legacy drag-and-drop apps and historical script edits have no in-panel host, so they
+		// fall through to a page tab. So does `Run again`, whose args ride in the fragment, and
+		// a link to one version: opening an item focuses a tab already on it as it stands,
+		// where a page tab's URL is written whole, pin and fragment included.
+		if (
+			route &&
+			(route.kind !== 'app' || route.raw_app) &&
+			!parseHistoricalScriptEdit(href) &&
+			!parsed.hash &&
+			!parsed.searchParams.has('version')
+		) {
+			runtime.previewTabs.open({
+				type: 'item',
+				item: { path: route.itemPath, summary: '', kind: route.kind, raw_app: route.raw_app },
+				mode: route.mode
+			})
+			return
+		}
+		runtime.previewTabs.open({ type: 'page', href, label: previewLocationLabel(barePath(href)) })
+	}
+
+	// Every in-app link under the tab, not only the ones that call `onNavigate`: a plain anchor
+	// followed by the browser would take it out of the session. Listened for on `body`, as
+	// ItemViewerView does and for the same reason.
+	$effect(() => {
+		const el = container
+		if (!el) return
+		function onClick(e: MouseEvent) {
+			if (e.defaultPrevented || e.button !== 0) return
+			if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return
+			const target = e.target as Element | null
+			if (!target || !el!.contains(target)) return
+			const a = target.closest?.('a[href]') as HTMLAnchorElement | null
+			if (!a || (a.target && a.target !== '_self') || a.hasAttribute('download')) return
+			const url = new URL(a.href, window.location.href)
+			if (url.origin !== window.location.origin) return
+			e.preventDefault()
+			if (a.getAttribute('href')?.startsWith('#')) return
+			onNavigate(`${url.pathname}${url.search}${url.hash}`)
+		}
+		document.body.addEventListener('click', onClick)
+		return () => document.body.removeEventListener('click', onClick)
+	})
+</script>
+
+<div class="flex h-full min-h-0 flex-col overflow-auto">
+	<!-- Keyed: the run page binds one job's loaders and panels for its lifetime. -->
+	{#key `${workspaceId}/${jobId}/${reloadNonce}`}
+		<RunDetail id={jobId} workspace={workspaceId} {onNavigate} embedded />
+	{/key}
+</div>
diff --git a/frontend/src/lib/components/sessions/previewRouter.test.ts b/frontend/src/lib/components/sessions/previewRouter.test.ts
index 038691da55..8c9da253bb 100644
--- a/frontend/src/lib/components/sessions/previewRouter.test.ts
+++ b/frontend/src/lib/components/sessions/previewRouter.test.ts
@@ -316,6 +316,18 @@ describe('resolvePreviewTab', () => {
 		expect(resolvePreviewTab('/runs')).toEqual({ kind: 'iframe' })
 	})
 
+	it('mounts a run in process, in the workspace its URL names', () => {
+		expect(resolvePreviewTab('/run/01a0?workspace=fork')).toEqual({
+			kind: 'run',
+			jobId: '01a0',
+			workspace: 'fork'
+		})
+		expect(resolvePreviewTab('/run/01a0')).toEqual({ kind: 'run', jobId: '01a0' })
+		expect(resolvePreviewTab('/run/01a0?workspace=fork&view_token=t')).toEqual({ kind: 'iframe' })
+		// The runs of one item are a list page, not a run.
+		expect(resolvePreviewTab('/runs/f/a/b')).toEqual({ kind: 'iframe' })
+	})
+
 	it('mounts the list page of a page item kind in process, whatever its filters', () => {
 		expect(resolvePreviewTab('/variables?path_start=f%2Fa%2F')).toEqual({
 			kind: 'pagelist',
diff --git a/frontend/src/lib/components/sessions/previewRouter.ts b/frontend/src/lib/components/sessions/previewRouter.ts
index 2de5354c4d..e9d8c432fe 100644
--- a/frontend/src/lib/components/sessions/previewRouter.ts
+++ b/frontend/src/lib/components/sessions/previewRouter.ts
@@ -464,9 +464,9 @@ export function previewLocationLabel(url: string): string {
 	if (page) return page.label
 	const trigger = triggerLabelForPath(url)
 	if (trigger) return trigger
-	const run = barePath(url).match(/^\/run\/([^/?#]+)/)
+	const run = parseRunRoute(url)
 	// Job ids are time-ordered, so runs started moments apart share their head.
-	if (run) return `Run ${decodeURIComponent(run[1]).slice(-8)}`
+	if (run) return `Run ${run.jobId.slice(-8)}`
 	// The runs of one item, as a detail page's Runs button links them.
 	const itemRuns = barePath(url).match(/^\/runs\/(.+)$/)
 	if (itemRuns) return `Runs · ${decodeURIComponent(itemRuns[1]).split('/').pop()}`
@@ -550,6 +550,25 @@ export function parseRunFormRoute(url: string): { toolCallId: string; label: str
 	}
 }
 
+/** The run a `/run/<id>` location shows, in the workspace its query names (the opener's,
+ * when it names none). */
+export function parseRunRoute(
+	url: string
+): { jobId: string; workspace?: string; viewToken: boolean } | null {
+	const m = barePath(url).match(/^\/run\/([^/?#]+)$/)
+	if (!m) return null
+	try {
+		const query = new URL(url, 'http://_').searchParams
+		return {
+			jobId: decodeURIComponent(m[1]),
+			workspace: query.get('workspace') || undefined,
+			viewToken: query.has('view_token')
+		}
+	} catch {
+		return null
+	}
+}
+
 export function runFormUrl(toolCallId: string, label: string): string {
 	return `runform:${encodeURIComponent(toolCallId)}#${encodeURIComponent(label)}`
 }
@@ -575,7 +594,7 @@ export const isArtifactKey = (key: string) => key.startsWith('artifact:')
 // flow, raw app) mounts its per-(kind,path) cell editor on `/edit/` and its viewer
 // on `/get/`; a `/pipeline/<folder>` route mounts the data-pipeline graph editor of
 // that folder (`path` is the folder); the list page of a page item kind mounts that
-// list; everything
+// list; a `/run/<id>` route without a share token mounts that run's page; everything
 // else (static pages, regular drag-and-drop apps, any other route) stays an iframe.
 export type PreviewSlot =
 	| { kind: 'editor'; editorKind: SessionTargetKind | 'pipeline'; path: string }
@@ -584,6 +603,7 @@ export type PreviewSlot =
 	| { kind: 'runform'; toolCallId: string }
 	| { kind: 'pageitem'; ref: PageItemRef }
 	| { kind: 'pagelist'; path: string }
+	| { kind: 'run'; jobId: string; workspace?: string }
 	| { kind: 'iframe' }
 
 export function resolvePreviewTab(url: string): PreviewSlot {
@@ -595,6 +615,12 @@ export function resolvePreviewTab(url: string): PreviewSlot {
 	if (pageItem) return { kind: 'pageitem', ref: pageItem }
 	const route = barePath(url)
 	if (isPageItemListPath(route)) return { kind: 'pagelist', path: route }
+	const run = parseRunRoute(url)
+	// A share link's token authorizes every request of the window that installs it, so a run
+	// opened through one keeps a frame of its own rather than lending the token to the session.
+	if (run && !run.viewToken) {
+		return { kind: 'run', jobId: run.jobId, ...(run.workspace && { workspace: run.workspace }) }
+	}
 	const pipelineFolder = parsePipelineRoute(url)
 	if (pipelineFolder) {
 		return { kind: 'editor', editorKind: 'pipeline', path: pipelineFolder }
@@ -628,6 +654,7 @@ export function workspacePageHref(location: string): string | undefined {
 		case 'editor':
 		case 'viewer':
 		case 'pagelist':
+		case 'run':
 		case 'iframe':
 			return location
 		default: {
diff --git a/frontend/src/lib/components/sessions/sessionRuntime.svelte.ts b/frontend/src/lib/components/sessions/sessionRuntime.svelte.ts
index 2995366ae0..8d242912dc 100644
--- a/frontend/src/lib/components/sessions/sessionRuntime.svelte.ts
+++ b/frontend/src/lib/components/sessions/sessionRuntime.svelte.ts
@@ -471,6 +471,7 @@ function createRuntime(session: Session): SessionRuntime {
 			slotKind !== 'iframe' &&
 			slotKind !== 'pageitem' &&
 			slotKind !== 'pagelist' &&
+			slotKind !== 'run' &&
 			slotKind !== 'viewer'
 		)
 			return undefined
@@ -593,8 +594,8 @@ function createRuntime(session: Session): SessionRuntime {
 		onTabOpened: logTabUsage
 	})
 
-	// Let the jobs tray open a run in this session's preview panel (as an iframe
-	// tab over the run page). The global side-panel chat leaves this unset and
+	// Let the jobs tray open a run in this session's preview panel (as a tab on
+	// the run's page). The global side-panel chat leaves this unset and
 	// falls back to a new browser tab.
 	manager.openRunInPreview = ({ jobId, workspace, label }) => {
 		previewTabs.open({
diff --git a/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte b/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
index 48931c7871..ca5d8c83ad 100644
--- a/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
@@ -1,1373 +1,13 @@
 <script lang="ts">
-	import {
-		JobService,
-		type Job,
-		ScriptService,
-		type Script,
-		type WorkflowStatus,
-		type NewScript,
-		ConcurrencyGroupsService,
-		MetricsService,
-		WorkerService,
-		type ScriptArgs
-	} from '$lib/gen'
-	import {
-		computeSharableHash,
-		copyToClipboard,
-		encodeState,
-		findMatchingCustomTag,
-		getHubFlowIdFromPath,
-		isHubFlowPath,
-		isFlowPreview,
-		isNotFlow,
-		isScriptPreview
-	} from '$lib/utils'
-	import BarsStaggered from '$lib/components/icons/BarsStaggered.svelte'
-
-	import {
-		Activity,
-		Calendar,
-		List,
-		Pen,
-		RefreshCw,
-		TimerOff,
-		Trash,
-		Code2,
-		ClipboardCopy,
-		GitBranch,
-		EllipsisVertical,
-		Share2,
-		Globe,
-		Users,
-		Play,
-		SearchX,
-		ArrowRight
-	} from 'lucide-svelte'
-	import WorkspaceIcon from '$lib/components/workspace/WorkspaceIcon.svelte'
-	import { forLater } from '$lib/forLater'
-
-	import { isJobResolvable } from '$lib/utils'
-	import {
-		claimRerunOrigin,
-		offerToResolveOriginal,
-		rememberRerunOrigin
-	} from '$lib/components/runs/rerunResolution.svelte'
-	import DisplayResult from '$lib/components/DisplayResult.svelte'
-	import DbtRunGraph from '$lib/components/dbt/DbtRunGraph.svelte'
-	import DispatchEventsPanel from '$lib/components/runs/DispatchEventsPanel.svelte'
-	import UpstreamSnapshotsPanel from '$lib/components/runs/UpstreamSnapshotsPanel.svelte'
-	import {
-		enterpriseLicense,
-		initialArgsStore,
-		superadmin,
-		userStore,
-		userWorkspaces,
-		workspaceStore
-	} from '$lib/stores'
-	import FlowStatusViewer from '$lib/components/FlowStatusViewer.svelte'
-	import HighlightCode from '$lib/components/HighlightCode.svelte'
-	import JobLoader from '$lib/components/JobLoader.svelte'
-	import LogViewer from '$lib/components/LogViewer.svelte'
-	import { Button, Skeleton, Tab, Alert, DrawerContent } from '$lib/components/common'
-	import PageHeaderContent from '$lib/components/PageHeaderContent.svelte'
-	import { pageHeader } from '$lib/components/pageHeaderRegistry.svelte'
-	import JobDetailHeader from '$lib/components/runs/JobDetailHeader.svelte'
-	import ScriptRetryChain from '$lib/components/runs/ScriptRetryChain.svelte'
-	import FlowExecutionStatus from '$lib/components/runs/FlowExecutionStatus.svelte'
-	import JobArgs from '$lib/components/JobArgs.svelte'
-	import FlowProgressBar from '$lib/components/flows/FlowProgressBar.svelte'
-	import JobProgressBar from '$lib/components/jobs/JobProgressBar.svelte'
-	import Tabs from '$lib/components/common/tabs/TabsV2.svelte'
-	import { goto } from '$lib/navigation'
-	import { sendUserToast } from '$lib/toast'
-	import Dropdown from '$lib/components/DropdownV2.svelte'
-	import PersistentScriptDrawer from '$lib/components/PersistentScriptDrawer.svelte'
-	import Portal from '$lib/components/Portal.svelte'
-
-	import MemoryFootprintViewer from '$lib/components/MemoryFootprintViewer.svelte'
-	import Drawer from '$lib/components/common/drawer/Drawer.svelte'
-	import { Highlight } from 'svelte-highlight'
-	import { json } from 'svelte-highlight/languages'
-	import Toggle from '$lib/components/Toggle.svelte'
-	import WorkflowTimeline from '$lib/components/WorkflowTimeline.svelte'
-
-	import HighlightTheme from '$lib/components/HighlightTheme.svelte'
-
-	import ExecutionDuration from '$lib/components/ExecutionDuration.svelte'
-	import { isWindmillTooBigObject } from '$lib/components/job_args'
-	import ScheduleEditor from '$lib/components/triggers/schedules/ScheduleEditor.svelte'
-	import OpenInSessionButton from '$lib/components/sessions/OpenInSessionButton.svelte'
-	import { onDestroy, setContext, untrack } from 'svelte'
-	import { getJobStatusKind, resetFavicon, setStatusFavicon } from '$lib/favicon'
-
-	import FlowAssetsHandler, {
-		initFlowGraphAssetsCtx
-	} from '$lib/components/flows/FlowAssetsHandler.svelte'
-	import JobAssetsViewer from '$lib/components/assets/JobAssetsViewer.svelte'
 	import { page } from '$app/state'
-	import { setViewToken } from '$lib/viewToken'
-	import { twMerge } from 'tailwind-merge'
-	import FlowRestartButton from '$lib/components/FlowRestartButton.svelte'
-	import { useNestedRestartState } from '$lib/components/useNestedRestartState.svelte'
-	import JobOtelTraces from '$lib/components/JobOtelTraces.svelte'
-	import {
-		canUserBypassRuleKind,
-		isRuleActive,
-		protectionRulesState
-	} from '$lib/workspaceProtectionRules.svelte'
-	import {
-		buildForkEditUrl,
-		editInForkAllowed,
-		editInForkLabel,
-		onEditInForkClick
-	} from '$lib/utils/editInFork'
-	import { isCloudHosted } from '$lib/cloud'
-	import { useEditRights } from '$lib/operatorWriteRights'
-	import { AGENT_STEP_ID } from '$lib/components/flows/conversations/agentEditorChat'
-	const editRights = useEditRights()
-	let job: (Job & { result?: any; result_stream?: string }) | undefined = $state()
-	let jobUpdateLastFetch: Date | undefined = $state()
-
-	// A re-run launched from a failed run offers to resolve that failure once it succeeds.
-	// The claim happens here rather than at init because SvelteKit reuses this component
-	// across /run/<id> navigations, so init only runs for the first run viewed.
-	// Only ever an offer: a re-run is a fresh execution, not proof the old failure was handled.
-	let offeredForJobId: string | undefined = $state(undefined)
-	$effect(() => {
-		if (!job || offeredForJobId === job.id) return
-		if ('success' in job && job.success) {
-			const origin = claimRerunOrigin(job.id)
-			if (origin) {
-				offeredForJobId = job.id
-				offerToResolveOriginal(origin)
-			}
-		}
-	})
-
-	let scriptProgress: number | undefined = $state(undefined)
-	let currentJobIsLongRunning: boolean = $state(false)
-
-	let viewTab: 'logs' | 'code' | 'stats' | 'assets' | 'traces' = $state('logs')
-	let selectedJobStep: string | undefined = $state(undefined)
-
-	// Mirror of the graph's per-module display state (selected iteration of each
-	// ForLoop, etc.). Drives both the iteration pre-fill and the iteration-count
-	// selectors in the restart popup.
-	let graphModuleStates: Record<string, import('$lib/components/graph').GraphModuleState> = $state(
-		{}
-	)
-	let expandedSubflows: Record<
-		string,
-		{ modules: import('$lib/gen').FlowModule[]; groups?: any[] }
-	> = $state({})
-	const selectedRestart = useNestedRestartState({
-		selectedJobStep: () => selectedJobStep,
-		job: () => job,
-		graphModuleStates: () => graphModuleStates,
-		expandedSubflows: () => expandedSubflows
-	})
-	// When the selection can't be restarted from (nothing clicked, Input/Result,
-	// a step inside a parallel loop), the button targets the top-level step that
-	// failed the run, so it is visible without hunting for it in a large graph.
-	// A continue-on-error step keeps its `Failure` status on a run that succeeds,
-	// so only a failed run counts, and its last `Failure` is the one that ended it.
-	const failedTopLevelStep = $derived.by(() => {
-		if (job?.type !== 'CompletedJob' || job.success !== false || job.canceled) return undefined
-		const failures = job.flow_status?.modules?.filter((m) => m.type === 'Failure') ?? []
-		return failures[failures.length - 1]?.id
-	})
-	const failedRestart = useNestedRestartState({
-		selectedJobStep: () => failedTopLevelStep,
-		job: () => job,
-		graphModuleStates: () => graphModuleStates,
-		expandedSubflows: () => expandedSubflows
-	})
-	const selectionRestartable = $derived(
-		selectedJobStep !== undefined &&
-			(selectedRestart.topLevelRestartable || selectedRestart.nestedRestartSupported)
-	)
-	const restartStep = $derived(selectionRestartable ? selectedJobStep : failedTopLevelStep)
-	const restart = $derived(selectionRestartable ? selectedRestart : failedRestart)
-	function canRestart(state: ReturnType<typeof useNestedRestartState>) {
-		return (
-			job?.type === 'CompletedJob' &&
-			job.job_kind === 'flow' &&
-			(state.topLevelRestartable || state.nestedRestartSupported)
-		)
-	}
-
-	let testIsLoading = $state(false)
-	let jobLoader: JobLoader | undefined = $state(undefined)
-	let loadError: { status?: number; message?: string } | undefined = $state(undefined)
-
-	// Flow execution status state
-	let suspendStatus: import('$lib/utils').StateStore<Record<string, { job: Job; nb: number }>> =
-		$state({ val: {} })
-	let isOwner: boolean = $state(false)
-
-	let persistentScriptDrawer: PersistentScriptDrawer | undefined = $state(undefined)
-
-	let showExplicitProgressTip: boolean = $state(
-		(localStorage.getItem('hideExplicitProgressTip') ?? 'false') == 'false'
-	)
-
-	let lastJobId: string | undefined = $state(undefined)
-	let concurrencyKey: string | undefined = $state(undefined)
-
-	setContext(
-		'FlowGraphAssetContext',
-		initFlowGraphAssetsCtx({ getModules: () => job?.raw_flow?.modules ?? [] })
-	)
-
-	async function getConcurrencyKey(job: Job | undefined) {
-		if (!job) return
-		lastJobId = job.id
-		concurrencyKey = await ConcurrencyGroupsService.getConcurrencyKey({ id: job.id })
-	}
-
-	// Share read link: if the URL carries a `view_token`, install it so every job
-	// read on this page (incl. flow steps, args, logs, SSE) is authorized by it.
-	// Set eagerly at init (before JobLoader mounts and fires its first fetch), and
-	// reactively keep it in sync across client-side navigation.
-	setViewToken(page.url.searchParams.get('view_token') ?? undefined)
-	$effect(() => {
-		setViewToken(page.url.searchParams.get('view_token') ?? undefined)
-	})
-	onDestroy(() => setViewToken(undefined))
-
-	async function shareReadLink(id: string): Promise<void> {
-		try {
-			const workspace = $workspaceStore!
-			const token = (await JobService.getJobViewToken({ workspace, id })).trim()
-			// Pin the workspace in the link: the token is signed with this workspace's
-			// key, and the logged layout only switches `$workspaceStore` when the URL
-			// carries `workspace=`. Without it a recipient whose active workspace
-			// differs would open the run (and validate the token) against the wrong one.
-			const url = `${window.location.origin}/run/${id}?workspace=${encodeURIComponent(
-				workspace
-			)}&view_token=${encodeURIComponent(token)}`
-			copyToClipboard(url)
-			sendUserToast('Read-only share link copied to clipboard')
-		} catch (e) {
-			sendUserToast(`Failed to create share link: ${e}`, true)
-		}
-	}
-
-	async function sharePublicLink(id: string): Promise<void> {
-		try {
-			const workspace = $workspaceStore!
-			const token = (await JobService.getJobPublicViewToken({ workspace, id })).trim()
-			// The workspace is a path segment here: the public run page is outside the
-			// logged layout and has no workspace store to fall back on.
-			const url = `${window.location.origin}/public_run/${encodeURIComponent(
-				workspace
-			)}/${id}?view_token=${encodeURIComponent(token)}`
-			copyToClipboard(url)
-			sendUserToast('Public link copied to clipboard — anyone with it can view this run')
-		} catch (e) {
-			sendUserToast(`Failed to create public link: ${e}`, true)
-		}
-	}
-
-	async function deleteCompletedJob(id: string): Promise<void> {
-		await JobService.deleteCompletedJob({ workspace: $workspaceStore!, id })
-		getJob()
-	}
-
-	async function cancelJob(id: string) {
-		try {
-			if (forceCancel) {
-				await JobService.forceCancelQueuedJob({ workspace: $workspaceStore!, id, requestBody: {} })
-				setTimeout(getJob, 5000)
-			} else {
-				await JobService.cancelQueuedJob({ workspace: $workspaceStore!, id, requestBody: {} })
-			}
-			sendUserToast(`job ${id} canceled`)
-		} catch (err) {
-			sendUserToast('could not cancel job', true)
-		}
-	}
-
-	// A schedule's upcoming tick sits on a whole second and the backend refuses it; a tick
-	// deferred by a concurrency limit lands on a sub-second instant and can still start now.
-	let canRunNow = $derived(
-		job?.type === 'QueuedJob' &&
-			!job.running &&
-			!job.suspend &&
-			!!job.scheduled_for &&
-			forLater(job.scheduled_for) &&
-			!(job.schedule_path && new Date(job.scheduled_for).getMilliseconds() === 0)
-	)
-
-	async function runJobNow(id: string) {
-		try {
-			await JobService.runQueuedJobNow({ workspace: $workspaceStore!, id })
-			sendUserToast(`job ${id} will start as soon as a worker is available`)
-			getJob()
-		} catch (err) {
-			sendUserToast(`could not start job now: ${err?.body ?? err}`, true)
-		}
-	}
-
-	// Initialize view tab to logs since result is now outside tabs
-	function initView(): void {
-		// Result is now displayed outside tabs, so always default to logs
-		viewTab = 'logs'
-	}
-
-	async function getJob() {
-		await jobLoader?.watchJob(page.params.run ?? '', {
-			change(job: Job & { result_stream?: string }) {
-				// Result is now displayed outside tabs, no need to switch tabs
-			},
-			done(job) {
-				// Result is now displayed outside tabs, no need to switch tabs
-			}
-		})
-		initView()
-	}
-
-	let persistentScriptDefinition: Script | undefined = $state(undefined)
-
-	async function onJobLoaded() {
-		// We want to set up scriptProgress once job is loaded
-		// We need this to show progress bar if job has progress and is finished
-		if (
-			job &&
-			job.type == 'CompletedJob' &&
-			(job.job_kind == 'script' || isScriptPreview(job.job_kind))
-		) {
-			// If error occurred and job is completed
-			// than we fetch progress from server to display on what progress did it fail
-			// Could be displayed after run or as a historical page
-			// If opening page without running job (e.g. reloading page after run) progress will be displayed instantly
-			MetricsService.getJobProgress({
-				workspace: job.workspace_id ?? 'NO_WORKSPACE',
-				id: job.id
-			}).then((progress) => {
-				// Returned progress is not always 100%, could be 65%, 33%, anything
-				// Its ok if its a failure and we want to keep that value
-				// But we want progress to be 100% if job has been succeeded
-				scriptProgress = progress
-			})
-		}
-
-		if (
-			job &&
-			job.job_kind === 'script' &&
-			job.script_hash &&
-			persistentScriptDefinition === undefined
-		) {
-			const script = await ScriptService.getScriptByHash({
-				workspace: $workspaceStore!,
-				hash: job.script_hash
-			})
-			if (script.restart_unless_cancelled ?? false) {
-				persistentScriptDefinition = script
-			}
-		}
-	}
-
-	function onRunsPageChangeWithLoader() {
-		forceCancel = false
-		getJob()
-	}
-
-	function onRunsPageChange() {
-		job = undefined
-		persistentScriptDefinition = undefined
-	}
-
-	let notfound = $state(false)
-	let forceCancel = $state(false)
-
-	let debugViewer: Drawer | undefined = $state(undefined)
-	let debugContent: any = $state(undefined)
-	async function debugInfo() {
-		if (job?.id) {
-			debugContent = await JobService.getFlowDebugInfo({ workspace: $workspaceStore!, id: job?.id })
-			debugViewer?.openDrawer()
-		} else {
-			sendUserToast('Job has no id', true)
-		}
-	}
-
-	function removeSensitiveInfos(
-		jobs: { [job: string]: { args: any; result: any; logs: string } },
-		redactSensitive: boolean
-	) {
-		if (!redactSensitive) {
-			return jobs
-		}
-		if (jobs === undefined || typeof jobs !== 'object') {
-			return []
-		}
-		return Object.fromEntries(
-			Object.entries(jobs).map(([k, job]) => {
-				return [
-					k,
-					{
-						...job,
-						args: '[redacted]',
-						result: '[redacted]',
-						logs: '[redacted]'
-					}
-				]
-			})
-		)
-	}
-
-	let redactSensitive = $state(false)
-
-	function asWorkflowStatus(x: any): Record<string, WorkflowStatus> {
-		if (!x || typeof x !== 'object') return {}
-		const result: Record<string, WorkflowStatus> = {}
-		for (const [k, v] of Object.entries(x)) {
-			if (!k.startsWith('_') || k.startsWith('_step/')) result[k] = v as WorkflowStatus
-		}
-		return result
-	}
-
-	function getStepResults(x: any): Record<string, any> {
-		return x?._checkpoint?.completed_steps ?? {}
-	}
-
-	function forkPreview() {
-		if (isFlowPreview(job?.job_kind)) {
-			if (isHubFlowPath(job?.script_path)) {
-				const hubFlowId = getHubFlowIdFromPath(job?.script_path)
-				if (hubFlowId === undefined) {
-					sendUserToast('Could not determine the hub flow to fork', true)
-					return
-				}
-				$initialArgsStore = job?.args
-				window.open(`/flows/add?hub=${hubFlowId}`)
-				return
-			}
-
-			const state = {
-				flow: { value: job?.raw_flow },
-				path: job?.script_path + '_fork',
-				initialArgs: job?.args
-			}
-			try {
-				localStorage.setItem('fork_flow', JSON.stringify(state))
-			} catch {
-				// Flow too large for localStorage, pass via window reference
-				;(window as any).__forkPreviewData = state
-			}
-			window.open('/flows/add?fork=true')
-		} else {
-			$initialArgsStore = job?.args
-			let n: NewScript = {
-				path: job?.script_path + '_fork',
-				summary: 'Fork of preview of ' + job?.script_path,
-				language: job?.language as NewScript['language'],
-				description: '',
-				content: job?.raw_code ?? '',
-				kind: 'script'
-			}
-			const encodedArgs = encodeState(job?.args)
-			window.open(`/scripts/add?initial_args=${encodedArgs}#${encodeState(n)}`)
-		}
-	}
-
-	let scheduleEditor: ScheduleEditor | undefined = $state(undefined)
-
-	// A job's stored tag is usually backend-derived (language/flow default, possibly
-	// workspace-suffixed) and would be rejected by the CUSTOM_TAGS check if passed back
-	// explicitly. Only carry it into a re-run when it maps back to a custom-tag entry —
-	// the set the override dropdown offers — using the raw (possibly templated) entry.
-	// Pass the run's args if already fetched; template matching needs the full args
-	// (job.args may be truncated for large runs) and fetches them itself otherwise.
-	let customTags: { workspace: string; tags: string[] } | undefined = undefined
-	async function getRerunTagOverride(
-		args: Record<string, any> | undefined
-	): Promise<string | undefined> {
-		const tag = job?.tag
-		const workspace = $workspaceStore!
-		if (!tag) {
-			return undefined
-		}
-		try {
-			if (customTags?.workspace !== workspace) {
-				customTags = {
-					workspace,
-					tags: await WorkerService.getCustomTagsForWorkspace({ workspace })
-				}
-			}
-		} catch (e) {
-			console.error('Could not load custom tags, not carrying tag over for re-run', e)
-			return undefined
-		}
-		if (customTags.tags.includes(tag)) {
-			return tag
-		}
-		if (isWindmillTooBigObject(args)) {
-			try {
-				args = (await JobService.getJobArgs({ workspace, id: job?.id! })) as Record<string, any>
-			} catch (e) {
-				console.error('Could not load full args, not carrying tag over for re-run', e)
-				return undefined
-			}
-		}
-		return findMatchingCustomTag(tag, customTags.tags, workspace, args)
-	}
-
-	let runImmediatelyLoading = $state(false)
-	// An override may be a function, because the arguments it merges into are not
-	// known until they are here: a `WINDMILL_TOO_BIG` payload is a placeholder
-	// until fetched, and merging over that one drops what the fetch was for.
-	async function runImmediately(argsOverride?: ScriptArgs | ((args: ScriptArgs) => ScriptArgs)) {
-		runImmediatelyLoading = true
-		try {
-			let args = job?.args as ScriptArgs
-			if (isWindmillTooBigObject(args)) {
-				args = (await JobService.getJobArgs({
-					workspace: $workspaceStore!,
-					id: job?.id!
-				})) as ScriptArgs
-			}
-			args =
-				typeof argsOverride === 'function'
-					? argsOverride(args ?? {})
-					: { ...args, ...(argsOverride ?? {}) }
-
-			const commonArgs = {
-				workspace: $workspaceStore!,
-				requestBody: args,
-				tag: await getRerunTagOverride(args)
-			}
-			if (job?.job_kind == 'script' || job?.job_kind == 'script_hub' || job?.job_kind == 'flow') {
-				let id
-
-				if (job?.job_kind == 'script') {
-					id = await JobService.runScriptByHash({
-						...commonArgs,
-						hash: job.script_hash!,
-						skipPreprocessor: true
-					})
-				} else if (job?.job_kind == 'script_hub') {
-					id = await JobService.runScriptByPath({
-						...commonArgs,
-						path: job.script_path!,
-						skipPreprocessor: true
-					})
-				} else {
-					id = await JobService.runFlowByPath({
-						...commonArgs,
-						path: job.script_path!,
-						skipPreprocessor: true
-					})
-				}
-
-				// Offer to resolve this failure once the re-run succeeds. Captured here because the
-				// new job carries no back-pointer to the run it supersedes. An already-resolved
-				// failure needs no offer, and its note must not be restated as a supersession.
-				if (job && isJobResolvable(job) && !job.resolved && !$userStore?.operator) {
-					rememberRerunOrigin({ originalId: job.id, rerunId: id, workspace: $workspaceStore! })
-				}
-				await goto('/run/' + id + '?workspace=' + $workspaceStore)
-			} else {
-				sendUserToast('Cannot run this job immediately', true)
-			}
-		} catch (err) {
-			// A refusal is the interesting case here: the worker rejects a `dbt
-			// retry` whose run is no longer the saved one, and a caller who saw
-			// nothing happen would just click again.
-			sendUserToast(`Could not create job: ${err}`, true)
-		} finally {
-			runImmediatelyLoading = false
-		}
-	}
-
-	// Whether a `dbt retry` submitted from here would resume THIS run: only the
-	// latest failure of a script is kept per principal, so a later run of it — or
-	// one that failed with nothing to rebuild — leaves this page's retry refused.
-	// Both entry points to it, the dropdown item and the graph's banner, ask.
-	let dbtResumable = $state(false)
-	$effect(() => {
-		const ws = $workspaceStore
-		const id = job?.id
-		const failed = job?.language === 'dbt' && job?.type === 'CompletedJob' && !job?.success
-		dbtResumable = false
-		if (!ws || !id || !failed) return
-		JobService.getDbtResumable({ workspace: ws, id })
-			.then((held) => {
-				// The page may have moved on, or the workspace changed, in flight.
-				if (job?.id === id && $workspaceStore === ws) dbtResumable = held === id
-			})
-			.catch(() => {})
-	})
-
-	// The retry goes through `runImmediately` so it carries the run's own arguments
-	// and resolved tag: worker tags, debounce and concurrency keys interpolate from
-	// the submitted arguments at enqueue, while the ones being resumed are restored
-	// later, inside the worker.
-	async function resumeDbtRun() {
-		// Merged INTO the run's own block, not put in its place: those fields are
-		// what a `$args[command.vars.tenant]` tag or concurrency key interpolates
-		// from at enqueue. The worker ignores them for a retry — it rebuilds with
-		// the arguments the failed run had — but the queue has already read them.
-		await runImmediately((args) => ({
-			...args,
-			command: {
-				...((args?.['command'] as Record<string, any> | undefined) ?? {}),
-				label: 'retry',
-				dbt_retry_job: job?.id
-			}
-		}))
-	}
-
-	let showEditButton = $derived(!isRuleActive('DisableDirectDeployment'))
-
-	// Admins always pass the backend gate. Everyone else fails closed while the rulesets
-	// are still loading, so the item is never briefly offered to a restricted user.
-	let canSharePublicly = $derived(
-		!!$userStore?.is_admin ||
-			!!$userStore?.is_super_admin ||
-			(protectionRulesState.rulesets !== undefined &&
-				canUserBypassRuleKind('RestrictPublicRunSharing', $userStore ?? undefined))
-	)
-
-	$effect(() => {
-		job?.id && lastJobId !== job.id && untrack(() => getConcurrencyKey(job))
-	})
-	$effect(() => {
-		$workspaceStore && page.params.run && untrack(() => onRunsPageChange())
-	})
-	$effect(() => {
-		$workspaceStore && page.params.run && jobLoader && untrack(() => onRunsPageChangeWithLoader())
-	})
-	$effect(() => {
-		job && untrack(() => onJobLoaded())
-	})
-	$effect(() => {
-		const status = getJobStatusKind(job)
-		if (status) {
-			setStatusFavicon(status)
-		} else {
-			resetFavicon()
-		}
-	})
-	onDestroy(resetFavicon)
-
-	// The bar shares its row with the breadcrumb, and this page's name is a uuid that gives way
-	// grudgingly, so the buttons drop their labels rather than push each other off the end.
-	const compactBar = $derived(pageHeader.barWidth > 0 && pageHeader.barWidth < 1150)
+	import { goto } from '$lib/navigation'
+	import { workspaceStore } from '$lib/stores'
+	import RunDetail from '$lib/components/runs/RunDetail.svelte'
 </script>
 
-<HighlightTheme />
-
-<ScheduleEditor bind:this={scheduleEditor} />
-
-{#if (job?.job_kind == 'flow' || isFlowPreview(job?.job_kind)) && job?.['running'] && job?.parent_job == undefined}
-	<Drawer bind:this={debugViewer} size="800px">
-		<DrawerContent title="Debug Detail" on:close={debugViewer.closeDrawer}>
-			{#snippet actions()}
-				<div class="flex items-center gap-1">
-					<div class="w-60 pt-2">
-						<Toggle bind:checked={redactSensitive} options={{ right: 'Redact args/result/logs' }} />
-					</div>
-					<Button
-						on:click={() =>
-							copyToClipboard(
-								JSON.stringify(removeSensitiveInfos(debugContent, redactSensitive), null, 4)
-							)}
-						unifiedSize="md"
-						variant="subtle"
-					>
-						<div class="flex gap-2 items-center">Copy <ClipboardCopy /> </div>
-					</Button>
-				</div>
-			{/snippet}
-			<pre
-				><code class="text-2xs p-2">
-					<Highlight
-						language={json}
-						code={JSON.stringify(removeSensitiveInfos(debugContent, redactSensitive), null, 4)}
-					/>
-			</code></pre
-			>
-		</DrawerContent>
-	</Drawer>
-{/if}
-{#if !job || (job?.job_kind != 'flow' && job?.job_kind != 'flownode' && job?.job_kind != 'flowpreview')}
-	<JobLoader
-		bind:scriptProgress
-		bind:this={jobLoader}
-		bind:isLoading={testIsLoading}
-		bind:job
-		bind:jobUpdateLastFetch
-		workspaceOverride={$workspaceStore}
-		bind:notfound
-		bind:loadError
-	/>
-{/if}
-
-{#snippet flowRestartButton(
-	state: ReturnType<typeof useNestedRestartState>,
-	step: string,
-	triggerStyle: 'button' | 'link'
-)}
-	{#if job}
-		<FlowRestartButton
-			jobId={job.id}
-			selectedJobStep={step}
-			selectedJobStepType={state.selectedJobStepType}
-			restartBranchNames={state.restartBranchNames}
-			nestedPath={state.nestedRestartSupported ? state.nestedRestartPath : undefined}
-			nestedTopStepId={state.nestedRestartTopStepId}
-			nestedTopBranchOrIterationN={state.nestedRestartTopBranchOrIterationN}
-			presetIterationN={state.topLevelLoopIteration}
-			iterationCounts={state.iterationCounts}
-			nestedPathIterationCounts={state.nestedPathIterationCounts}
-			onRestartComplete={(newJobId) => {
-				goto('/run/' + newJobId + '?workspace=' + $workspaceStore)
-			}}
-			flowPath={job.script_path}
-			flowVersionId={job.script_hash ? parseInt(job.script_hash, 16) : undefined}
-			disabled={!$enterpriseLicense}
-			enterpriseOnly={!$enterpriseLicense}
-			{triggerStyle}
-			unifiedSize="sm"
-		/>
-	{/if}
-{/snippet}
-
-<Portal name="persistent-run">
-	<PersistentScriptDrawer bind:this={persistentScriptDrawer} />
-</Portal>
-
-{#if loadError?.status === 403}
-	<div class="max-w-3xl px-4 mx-auto w-full">
-		<div class="mt-6">
-			<Alert type="warning" title="You don't have access to this run">
-				<div class="flex flex-col gap-2">
-					<p>
-						This run exists in <span class="font-semibold">{$workspaceStore}</span>, but you don't
-						have permission to view it.
-					</p>
-					<p>
-						Ask a colleague who can see it to open the run and use the
-						<span class="font-semibold">Share</span> button to send you a read-only link. Opening that
-						link will grant you access to this run (and its steps).
-					</p>
-				</div>
-			</Alert>
-			<div class="mt-4">
-				<Button href="/runs" unifiedSize="md" variant="accent">Go to runs page</Button>
-			</div>
-		</div>
-	</div>
-{:else if notfound || (job?.workspace_id != undefined && $workspaceStore != undefined && job?.workspace_id != $workspaceStore)}
-	{@const currentWorkspace = $userWorkspaces.find((w) => w.id === $workspaceStore)}
-	{@const otherWorkspaces = $userWorkspaces.filter((w) => w.id !== $workspaceStore)}
-	<div class="max-w-lg px-4 mx-auto w-full py-16">
-		<div class="flex flex-col items-center text-center gap-3">
-			<div class="rounded-full bg-surface-secondary p-3">
-				<SearchX size={24} class="text-secondary" />
-			</div>
-			<h1 class="text-lg font-semibold text-emphasis">Run not found</h1>
-			<p class="text-xs text-secondary">
-				No run with ID
-				<span class="font-mono text-emphasis break-all">{page.params.run}</span>
-				exists in
-				<span class="font-semibold text-emphasis">{currentWorkspace?.name ?? $workspaceStore}</span
-				>. It may belong to another workspace, or it may have been deleted.
-			</p>
-		</div>
-
-		{#if otherWorkspaces.length > 0}
-			<div class="mt-8 flex flex-col gap-2">
-				<h2 class="text-xs font-semibold text-emphasis">Look in another workspace</h2>
-				<div
-					class="flex flex-col rounded-md border border-light bg-surface-tertiary divide-y divide-border-light overflow-hidden"
-				>
-					{#each otherWorkspaces as workspace (workspace.id)}
-						<Button
-							variant="subtle"
-							unifiedSize="md"
-							btnClasses="h-auto justify-start text-left gap-3 px-3 py-2 rounded-none"
-							endIcon={{ icon: ArrowRight, classes: 'text-hint' }}
-							onClick={() => goto(`/run/${page.params.run}?workspace=${workspace.id}`)}
-						>
-							<WorkspaceIcon workspaceColor={workspace.color} padding="p-1" size={12} />
-							<div class="flex flex-col min-w-0 grow">
-								<span class="text-xs font-semibold text-emphasis truncate">{workspace.name}</span>
-								<span class="text-2xs text-secondary truncate">{workspace.id}</span>
-							</div>
-						</Button>
-					{/each}
-				</div>
-			</div>
-		{/if}
-
-		<div class="mt-6 flex justify-center">
-			<Button href="/runs" unifiedSize="md" variant="default">Go to runs page</Button>
-		</div>
-	</div>
-{:else}
-	<Skeleton
-		class="max-w-7xl p-4 mx-auto w-full"
-		loading={!job}
-		layout={[
-			// 1. Job Header
-			[{ h: 12, w: 100 }],
-			1,
-			// 2. Progress Bar
-			[{ h: 2, w: 100 }],
-			1.5
-		]}
-	/>
-	<!-- `section`, not an item: a run is not a workspace item the picker can open, so the trail
-	     ends with its id as a plain name. -->
-	<PageHeaderContent section={{ label: `run/${page.params.run}` }} actions={runActions} />
-
-	{#snippet runActions()}
-		{@const isScript = job?.job_kind === 'script'}
-		{@const isHubFlowPreview = isFlowPreview(job?.job_kind) && isHubFlowPath(job?.script_path)}
-		{@const runsHref = `/runs/${job?.script_path}${!isScript ? '?jobKind=flow' : ''}`}
-		{#if job && 'deleted' in job && !job?.deleted && ($superadmin || ($userStore?.is_admin ?? false))}
-			<Dropdown
-				items={[
-					{
-						displayName: 'Delete result, logs and args (admin only)',
-						action: () => {
-							job?.id && deleteCompletedJob(job.id)
-						},
-						type: 'delete'
-					}
-				]}
-			>
-				{#snippet buttonReplacement()}
-					<Button nonCaptureEvent variant="default" unifiedSize="sm" startIcon={{ icon: Trash }} />
-				{/snippet}
-			</Dropdown>
-			{#if job?.job_kind === 'script' || job?.job_kind === 'flow'}
-				<Button
-					href={runsHref}
-					variant="default"
-					unifiedSize="sm"
-					iconOnly={compactBar}
-					title="View runs"
-					startIcon={{ icon: List }}
-				>
-					View runs
-				</Button>
-			{/if}
-		{/if}
-		{#if job}
-			<Dropdown
-				customWidth={280}
-				items={[
-					{
-						displayName: 'Copy link for members',
-						icon: Users,
-						tooltip:
-							'Read-only link to this run for another member of this workspace. They must be logged in.',
-						action: () => job && shareReadLink(job.id)
-					},
-					{
-						displayName: 'Copy public link',
-						icon: Globe,
-						disabled: !canSharePublicly,
-						tooltip: canSharePublicly
-							? "Read-only link that anyone on the internet can open, without logging in. It shows a minimal version of this page: this run's inputs, result and logs, and for a flow its graph plus every step's inputs, result, logs and code. The link cannot be revoked."
-							: 'Sharing a run publicly is restricted in this workspace. Ask an admin to share it, or to grant you a bypass on the ruleset.',
-						action: () => job && sharePublicLink(job.id)
-					}
-				]}
-			>
-				{#snippet buttonReplacement()}
-					<Button
-						nonCaptureEvent
-						variant="default"
-						unifiedSize="sm"
-						iconOnly={compactBar}
-						title="Share"
-						startIcon={{ icon: Share2 }}
-					>
-						Share
-					</Button>
-				{/snippet}
-			</Dropdown>
-		{/if}
-		{@const stem = job?.job_kind === 'script_hub' ? '/scripts' : `/${job?.job_kind}s`}
-		{@const viewHref = `${stem}/get/${isScript ? job?.script_hash : job?.script_path}`}
-		{#if (job?.job_kind == 'flow' || isFlowPreview(job?.job_kind)) && job?.['running'] && job?.parent_job == undefined}
-			<div class="inline">
-				<Dropdown
-					items={[
-						{
-							displayName: 'Show Flow Debug Info',
-							action: () => {
-								debugInfo()
-							}
-						}
-					]}
-					class="h-auto"
-				>
-					{#snippet buttonReplacement()}
-						<Button nonCaptureEvent unifiedSize="sm" variant="subtle">
-							<div class="flex flex-row items-center">
-								<EllipsisVertical size={14} />
-							</div>
-						</Button>
-					{/snippet}
-				</Dropdown>
-			</div>
-		{/if}
-		{#if isFlowPreview(job?.job_kind) || isScriptPreview(job?.job_kind)}
-			<Button
-				unifiedSize="sm"
-				variant="default"
-				iconOnly={compactBar}
-				title={isHubFlowPreview
-					? 'Fork flow into workspace'
-					: `Fork ${isFlowPreview(job?.job_kind) ? 'flow' : 'code'} preview`}
-				startIcon={{ icon: GitBranch }}
-				on:click={forkPreview}
-			>
-				{isHubFlowPreview
-					? 'Fork flow into workspace'
-					: `Fork ${isFlowPreview(job?.job_kind) ? 'flow' : 'code'} preview`}
-			</Button>
-		{/if}
-		{#if persistentScriptDefinition !== undefined}
-			<Button
-				unifiedSize="sm"
-				variant="default"
-				iconOnly={compactBar}
-				title="Current runs"
-				startIcon={{ icon: Activity }}
-				on:click={() => {
-					persistentScriptDrawer?.open?.(persistentScriptDefinition)
-				}}
-			>
-				Current runs
-			</Button>
-		{/if}
-		{#if canRunNow}
-			<Button
-				unifiedSize="md"
-				variant="default"
-				startIcon={{ icon: Play }}
-				on:click={() => job?.id && runJobNow(job.id)}
-				title="Start this job now instead of at its scheduled time, skipping any remaining delay or sleep. It keeps the same id, and a concurrency limit is still enforced."
-			>
-				Run now
-			</Button>
-		{/if}
-		{#if job && job?.type != 'CompletedJob' && (!job?.schedule_path || job?.['running'] == true)}
-			{#if !forceCancel}
-				<Button
-					unifiedSize="sm"
-					variant="accent"
-					destructive
-					startIcon={{ icon: TimerOff }}
-					on:click|once={() => {
-						if (job?.id) {
-							cancelJob(job?.id)
-							setTimeout(() => {
-								forceCancel = true
-							}, 3001)
-						}
-					}}
-					title={`Cancel the ${job?.job_kind === 'script' ? 'script' : job?.job_kind === 'flow' ? 'flow' : 'job'}`}
-				>
-					Cancel
-				</Button>
-			{:else}
-				<Button
-					unifiedSize="sm"
-					variant="accent"
-					destructive
-					startIcon={{ icon: TimerOff }}
-					on:click|once={() => {
-						if (job?.id) {
-							cancelJob(job?.id)
-						}
-					}}
-				>
-					Force Cancel
-				</Button>
-			{/if}
-		{/if}
-		{#if job?.schedule_path}
-			<Button
-				unifiedSize="sm"
-				variant="default"
-				on:click={() => {
-					if (!job || !job.schedule_path) {
-						return
-					}
-					scheduleEditor?.openEdit(job.schedule_path, job.job_kind == 'flow')
-				}}
-				startIcon={{ icon: Calendar }}>Edit schedule</Button
-			>
-		{/if}
-		{#if restartStep !== undefined && canRestart(restart)}
-			{@render flowRestartButton(restart, restartStep, 'button')}
-		{/if}
-		{#if job?.job_kind === 'script' || job?.job_kind === 'script_hub' || job?.job_kind === 'flow'}
-			<Button
-				on:click|once={async () => {
-					// The form this lands on rebuilds the whole project. When resuming
-					// THIS run is the cheaper thing to do, name it so the form can
-					// offer that in one click rather than leaving the reader to know.
-					const from = dbtResumable ? `?dbt_retry_from=${job?.id}` : ''
-					goto(
-						viewHref +
-							from +
-							`#${computeSharableHash(job?.args, await getRerunTagOverride(job?.args))}`
-					)
-				}}
-				unifiedSize="sm"
-				variant="default"
-				iconOnly={compactBar}
-				title="Run again"
-				startIcon={{ icon: RefreshCw }}
-				loading={runImmediatelyLoading}
-				dropdownItems={[
-					// A failed dbt run's cheap next step is resuming its failed and skipped
-					// nodes rather than rebuilding the project, and `dbt_command` is the
-					// only argument that differs. Offered first, and only while the saved
-					// failure is still this run — which is what `dbtResumable` answers.
-					...(dbtResumable ? [{ label: 'dbt retry with same args', onClick: resumeDbtRun }] : []),
-					{
-						label: 'Run immediately with same args',
-						onClick: () => runImmediately()
-					}
-				]}
-			>
-				Run again
-			</Button>
-		{/if}
-		{#if job?.job_kind === 'script' || job?.job_kind === 'flow'}
-			{#if !$userStore?.operator}
-				{#if editRights.canEditItem(isScript ? 'script' : 'flow', job?.script_path ?? '', {})}
-					<Button
-						href={`${stem}/edit/${job?.script_path}?workspace=${$workspaceStore}`}
-						on:click={() => {
-							$initialArgsStore = job?.args
-						}}
-						unifiedSize="sm"
-						variant="default"
-						disabled={!showEditButton}
-						iconOnly={compactBar}
-						title="Edit"
-						startIcon={{ icon: Pen }}>Edit</Button
-					>
-					{#if showEditButton}
-						<!-- Opens the deployed runnable at this job's path, like Edit — unlike
-							     "View script", which pins the hash this run executed. Same gate as
-							     Edit: where direct deployment is off, the way in is "Edit in fork". -->
-						<OpenInSessionButton
-							source={{
-								target: { kind: isScript ? 'script' : 'flow', path: job?.script_path ?? '' },
-								workspaceId: $workspaceStore ?? undefined
-							}}
-							btnProps={{ unifiedSize: 'sm' }}
-						/>
-					{/if}
-				{/if}
-				{#if !showEditButton && !isCloudHosted() && editInForkAllowed($workspaceStore, $userWorkspaces)}
-					<Button
-						href={buildForkEditUrl(isScript ? 'script' : 'flow', job?.script_path ?? '')}
-						onClick={(e) =>
-							onEditInForkClick(e, isScript ? 'script' : 'flow', job?.script_path ?? '', {
-								hasHref: true
-							})}
-						unifiedSize="sm"
-						variant="default"
-						iconOnly={compactBar}
-						title={editInForkLabel($workspaceStore, $userWorkspaces)}
-						startIcon={{ icon: Pen }}>{editInForkLabel($workspaceStore, $userWorkspaces)}</Button
-					>
-				{/if}
-			{/if}
-		{/if}
-		{#if job?.job_kind === 'script' || job?.job_kind === 'script_hub' || job?.job_kind === 'flow'}
-			<Button
-				href={viewHref}
-				unifiedSize="sm"
-				variant="accent"
-				iconOnly={compactBar}
-				title="View {job?.job_kind === 'script_hub' ? 'script' : job?.job_kind}"
-				startIcon={{
-					icon:
-						job?.job_kind === 'script' || job?.job_kind === 'script_hub'
-							? Code2
-							: job?.job_kind === 'flow'
-								? BarsStaggered
-								: Code2
-				}}
-			>
-				View {job?.job_kind === 'script_hub' ? 'script' : job?.job_kind}
-			</Button>
-		{/if}
-	{/snippet}
-	<div class={twMerge('w-full', isNotFlow(job?.job_kind) && 'pb-8')}>
-		<!-- Flow Detail Header Card -->
-		<div class="max-w-7xl mx-auto px-4 pt-4">
-			<Skeleton loading={!job} layout={[[24]]} />
-			{#if job}
-				<JobDetailHeader
-					{job}
-					{scheduleEditor}
-					displayPersistentScriptDefinition={!!persistentScriptDefinition}
-					openPersistentScriptDrawer={() => {
-						persistentScriptDrawer?.open?.(persistentScriptDefinition)
-					}}
-					{concurrencyKey}
-				/>
-			{/if}
-		</div>
-		{#if job?.['deleted']}
-			<div class="max-w-7xl mx-auto w-full px-4 mt-6">
-				<Alert type="error" title="Deleted">
-					The content of this run was deleted (by an admin, no less)
-				</Alert>
-			</div>
-			<div class="my-4"></div>
-		{/if}
-
-		<!-- Flow Progress Bar (for flows only) -->
-		{#if job?.job_kind === 'flow' || job?.job_kind === 'flowpreview'}
-			<div class="max-w-7xl mx-auto w-full px-4 flex flex-col gap-4 mt-2">
-				<FlowProgressBar
-					{job}
-					bind:currentSubJobProgress={scriptProgress}
-					class="w-full"
-					textPosition="bottom"
-					slim
-					showStepId
-				>
-					{#snippet errorAction()}
-						<!-- A saved agent's run is its one step: naming it adds nothing. -->
-						{#if failedTopLevelStep && failedTopLevelStep !== AGENT_STEP_ID}
-							<span>at step {failedTopLevelStep}</span>
-							{#if $enterpriseLicense && canRestart(failedRestart)}
-								<span>·</span>
-								{@render flowRestartButton(failedRestart, failedTopLevelStep, 'link')}
-								<span>on this flow version, or on a new one after you fix it</span>
-							{/if}
-						{/if}
-					{/snippet}
-				</FlowProgressBar>
-				{#if suspendStatus}
-					<FlowExecutionStatus
-						{job}
-						{isOwner}
-						{suspendStatus}
-						innerModules={job?.flow_status?.modules}
-					/>
-				{/if}
-			</div>
-		{/if}
-
-		<!-- Arguments and actions -->
-		<div class="max-w-7xl mx-auto w-full px-4 mt-12">
-			<div class="text-xs text-emphasis font-semibold mb-1">Inputs</div>
-			<div class="flex flex-col gap-y-6">
-				<JobArgs
-					workspace={job?.workspace_id ?? $workspaceStore ?? 'no_w'}
-					id={job?.id}
-					args={job?.args}
-				/>
-				{#if job && currentJobIsLongRunning && showExplicitProgressTip && !scriptProgress && 'running' in job}
-					<Alert
-						class="p-1 flex flex-row relative text-center"
-						size="xs"
-						type="info"
-						title="tip: Track progress of longer jobs"
-						tooltip="For better transparency and verbosity, you can try setting progress from within the script."
-						documentationLink="https://www.windmill.dev/docs/advanced/explicit_progress"
-					>
-						<button
-							type="button"
-							onclick={() => {
-								localStorage.setItem('hideExplicitProgressTip', 'true')
-								showExplicitProgressTip = false
-							}}
-							class="absolute m-2 top-0 right-0 inline-flex rounded-md bg-surface-secondary text-primary hover:text-primary focus:outline-none"
-						>
-							<span class="sr-only">Close</span>
-							<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-								<path
-									d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
-								/>
-							</svg>
-						</button>
-					</Alert>
-				{/if}
-			</div>
-		</div>
-
-		{#if job}
-			<ScriptRetryChain {job} />
-		{/if}
-
-		{#if isNotFlow(job?.job_kind)}
-			{#if ['python3', 'bun', 'deno'].includes(job?.language ?? '') && (job?.job_kind == 'script' || isScriptPreview(job?.job_kind))}
-				<ExecutionDuration {job} bind:longRunning={currentJobIsLongRunning} />
-			{/if}
-			<div class="max-w-7xl mx-auto w-full px-4 mb-10">
-				{#if job?.workflow_as_code_status && job.job_kind !== 'aiagent'}
-					<div class="mr-2 sm:mr-0 mt-12 mb-6">
-						<h3 class="text-xs font-semibold text-emphasis mb-1">Workflow Timeline</h3>
-						<div class="border rounded-md overflow-hidden">
-							<WorkflowTimeline
-								flow_status={asWorkflowStatus(job.workflow_as_code_status)}
-								flowDone={job.type == 'CompletedJob'}
-								stepResults={getStepResults(job.workflow_as_code_status)}
-								result={job.result}
-								success={(job as any).success !== false}
-								jobId={job.id}
-							/>
-						</div>
-					</div>
-				{/if}
-				{#if scriptProgress}
-					<JobProgressBar {job} {scriptProgress} class="py-4" hideStepTitle={true} />
-				{/if}
-
-				<!-- The models a dbt run touches, above its result: the run page is
-				     where you land on a running job, and the per-node table below
-				     only exists once the job has produced one. -->
-				{#if job?.language === 'dbt' && job?.script_path}
-					<div class="mr-2 sm:mr-0 mt-12">
-						<h3 class="text-xs font-semibold text-emphasis mb-1">Models</h3>
-						<DbtRunGraph
-							scriptPath={job.script_path}
-							jobId={job.id}
-							running={job.type !== 'CompletedJob'}
-							result={job.type === 'CompletedJob' ? job.result : undefined}
-							scriptHash={job.script_hash}
-							runArgs={job.args}
-							canResume={dbtResumable}
-							onResume={resumeDbtRun}
-						/>
-					</div>
-				{/if}
-
-				<!-- Result Section (moved outside tabs) -->
-				{#if job}
-					<div class="mr-2 sm:mr-0 mt-12 mb-6">
-						<h3 class="text-xs font-semibold text-emphasis mb-1">Result</h3>
-						<div class="border rounded-md bg-surface-tertiary p-4 overflow-auto max-h-screen">
-							{#if job.result_stream || (job.type == 'CompletedJob' && job.result !== undefined)}
-								<DisplayResult
-									workspaceId={job?.workspace_id}
-									result_stream={job.result_stream}
-									jobId={job?.id}
-									result={job.result}
-									language={job?.language}
-									isTest={false}
-								/>
-							{:else}
-								<div class="text-secondary text-sm">No output is available yet</div>
-							{/if}
-						</div>
-					</div>
-					{#if job.id && job.workspace_id}
-						<UpstreamSnapshotsPanel args={job.args} />
-						<DispatchEventsPanel workspace={job.workspace_id} jobId={job.id} />
-					{/if}
-				{/if}
-
-				<!-- Logs and outputs-->
-				<div class="mr-2 sm:mr-0 mt-6">
-					<Tabs bind:selected={viewTab}>
-						<Tab value="logs" label="Logs" />
-						<Tab value="stats" label="Metrics" />
-						<Tab value="traces" label="Traces" />
-						<Tab value="assets" label="Assets" />
-						{#if isScriptPreview(job?.job_kind)}
-							<Tab value="code" label="Code" />
-						{/if}
-					</Tabs>
-
-					<Skeleton loading={!job} layout={[[5]]} />
-					{#if job}
-						<div
-							class={twMerge(
-								'flex flex-row border rounded-md p-2 mt-2 overflow-auto min-h-[600px]',
-								viewTab == 'logs' ? 'bg-surface-secondary' : 'bg-surface-tertiary'
-							)}
-						>
-							{#if viewTab == 'logs'}
-								<div class="w-full">
-									<LogViewer
-										jobId={job.id}
-										duration={job?.['duration_ms']}
-										mem={job?.['mem_peak']}
-										isLoading={job?.['running'] == false}
-										content={job?.logs}
-										tag={job?.tag}
-									/>
-								</div>
-							{:else if viewTab == 'assets'}
-								<div class="w-full">
-									<JobAssetsViewer {job} />
-								</div>
-							{:else if viewTab == 'traces'}
-								<div class="w-full">
-									<JobOtelTraces jobId={job.id} />
-								</div>
-							{:else if viewTab == 'code'}
-								{#if job && 'raw_code' in job && job.raw_code}
-									<div class="text-xs">
-										<HighlightCode lines language={job.language} code={job.raw_code} />
-									</div>
-								{:else if job}
-									<span class="text-sm">No code available</span>
-								{:else}
-									<Skeleton layout={[[5]]} />
-								{/if}
-							{:else if viewTab == 'stats'}
-								<div class="w-full">
-									<MemoryFootprintViewer jobId={job.id} {jobUpdateLastFetch} />
-								</div>
-							{:else}
-								<div class="w-full p-4 text-secondary">Select a tab to view content</div>
-							{/if}
-						</div>
-					{/if}
-				</div>
-			</div>
-		{:else if !job?.['deleted']}
-			<div class="mt-10"></div>
-
-			<div class="w-full mt-10">
-				{#if job?.id}
-					<FlowStatusViewer
-						jobId={job?.id ?? ''}
-						onJobsLoaded={({ job: newJob }) => {
-							job = newJob
-						}}
-						onDone={({ job: newJob }) => {
-							job = newJob
-						}}
-						initialJob={job}
-						workspaceId={$workspaceStore}
-						bind:selectedJobStep
-						bind:suspendStatus
-						bind:isOwner
-						bind:localModuleStates={graphModuleStates}
-						bind:expandedSubflows
-					/>
-				{:else}
-					<Skeleton layout={[[5]]} />
-				{/if}
-			</div>
-		{/if}
-	</div>
-{/if}
-
-<FlowAssetsHandler
-	modules={job?.raw_flow?.modules ?? []}
-	enableDbExplore
-	enablePathScriptAndFlowAssets
+<RunDetail
+	id={page.params.run ?? ''}
+	workspace={$workspaceStore}
+	viewToken={page.url.searchParams.get('view_token') ?? undefined}
+	onNavigate={goto}
 />