From 8fd0e23c803bc033d52d4b2bf369f0622f4690c5 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sun, 6 Nov 2022 16:08:10 +0100
Subject: [PATCH] UX improvements for run script

---
 backend/windmill-api/src/scripts.rs           |   4 +-
 .../lib/components/ButtonAndDropdown.svelte   |   2 +-
 frontend/src/lib/components/Dropdown.svelte   |   9 +-
 .../src/lib/components/FlowBuilder.svelte     |   2 +-
 frontend/src/lib/components/FlowViewer.svelte |   8 +-
 frontend/src/lib/components/RunForm.svelte    |  97 ++-
 frontend/src/lib/components/ShareModal.svelte |   6 +-
 .../common/actionRow/ActionRow.svelte         |   6 +-
 .../lib/components/landing/ScriptBox.svelte   |   2 +-
 frontend/src/lib/utils.ts                     |   6 +-
 frontend/src/routes/__layout@root.svelte      |  16 +-
 .../src/routes/flows/get/[...path].svelte     | 358 +++++------
 .../src/routes/flows/run/[...path].svelte     |  89 ++-
 frontend/src/routes/run/[...run].svelte       |  40 +-
 .../src/routes/scripts/get/[...hash].svelte   | 599 +++++++++---------
 .../src/routes/scripts/run/[...hash].svelte   | 111 +++-
 16 files changed, 790 insertions(+), 565 deletions(-)

diff --git a/backend/windmill-api/src/scripts.rs b/backend/windmill-api/src/scripts.rs
index bf2333ef5b..a7e7a78a02 100644
--- a/backend/windmill-api/src/scripts.rs
+++ b/backend/windmill-api/src/scripts.rs
@@ -621,8 +621,8 @@ async fn delete_script_by_hash(
 
     require_admin(authed.is_admin, &authed.username)?;
     let script = sqlx::query_as::<_, Script>(
-        "UPDATE script SET content = '', archived = true, deleted = true WHERE hash = $1 AND \
-         workspace_id = $2RETURNING *",
+        "UPDATE script SET content = '', archived = true, deleted = true, lock = '', schema = null WHERE hash = $1 AND \
+         workspace_id = $2 RETURNING *",
     )
     .bind(&hash.0)
     .bind(&w_id)
diff --git a/frontend/src/lib/components/ButtonAndDropdown.svelte b/frontend/src/lib/components/ButtonAndDropdown.svelte
index 05349ab68f..efb7a88129 100644
--- a/frontend/src/lib/components/ButtonAndDropdown.svelte
+++ b/frontend/src/lib/components/ButtonAndDropdown.svelte
@@ -22,7 +22,7 @@
 		class="border-l border-gray-300 px-2 inline-block py-0 my-0"
 		on:click={() => dispatch('clickDropdown')}
 	>
-		<div slot="name" class="py-0 my-0">
+		<div class="py-0 my-0">
 			<Icon class="text-white align-top py-0 my-0" data={faSortDown} />
 		</div>
 	</Dropdown>
diff --git a/frontend/src/lib/components/Dropdown.svelte b/frontend/src/lib/components/Dropdown.svelte
index 816cdf6c9e..961603036d 100644
--- a/frontend/src/lib/components/Dropdown.svelte
+++ b/frontend/src/lib/components/Dropdown.svelte
@@ -15,6 +15,7 @@
 	// This can cause the dropdown to be hidden if it is in an overflow-hidden div.
 	// In that case, set relative to false and control the dropdown positioning from the div
 	export let relative = true
+	export let left = true
 
 	const dispatch = createEventDispatcher()
 
@@ -33,14 +34,16 @@
 	on:click_outside={handleClickOutsideMenu}
 >
 	<Button color="light" size="xs" btnClasses="!text-blue-500 bg-transparent" on:click={toggle}>
-		{#if !name}
+		{#if !$$slots}
 			<Icon data={faEllipsisH} scale={1.2} />
 		{:else}
-			{name}
+			<slot />
 		{/if}
 	</Button>
 	<div
-		class="flex flex-col z-50 origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none {open
+		class="flex flex-col z-50 origin-top-right absolute {left
+			? 'right-0'
+			: 'left-0'} mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none {open
 			? 'visible'
 			: 'hidden'}"
 		role="menu"
diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte
index 311caf641e..8435293a2a 100644
--- a/frontend/src/lib/components/FlowBuilder.svelte
+++ b/frontend/src/lib/components/FlowBuilder.svelte
@@ -185,7 +185,7 @@
 
 <UnsavedConfirmationModal />
 
-<div class="flex flex-col flex-1 h-full">
+<div class="flex flex-col flex-1 h-screen">
 	<!-- Nav between steps-->
 	<div class="justify-between flex flex-row w-full py-2 px-4 space-x-4">
 		<div class="flex flex-row space-x-2">
diff --git a/frontend/src/lib/components/FlowViewer.svelte b/frontend/src/lib/components/FlowViewer.svelte
index 2242fa4867..000e2404c2 100644
--- a/frontend/src/lib/components/FlowViewer.svelte
+++ b/frontend/src/lib/components/FlowViewer.svelte
@@ -26,6 +26,8 @@
 	}
 
 	export let tab: 'ui' | 'json' | 'schema' = 'ui'
+	export let noSummary = false
+
 	let open: { [id: number]: boolean } = {}
 	if (initialOpen) {
 		open[initialOpen] = true
@@ -44,8 +46,10 @@
 	<svelte:fragment slot="content">
 		<TabContent value="ui">
 			<div class="flow-root w-full pb-4">
-				<h2 class="my-4">{flow.summary}</h2>
-				<SvelteMarkdown source={flow.description ?? ''} />
+				{#if !noSummary}
+					<h2 class="my-4">{flow.summary}</h2>
+					<SvelteMarkdown source={flow.description ?? ''} />
+				{/if}
 
 				<p class="font-black text-lg w-full my-4">
 					<span>Inputs</span>
diff --git a/frontend/src/lib/components/RunForm.svelte b/frontend/src/lib/components/RunForm.svelte
index b17f110792..0b30ff8fde 100644
--- a/frontend/src/lib/components/RunForm.svelte
+++ b/frontend/src/lib/components/RunForm.svelte
@@ -1,16 +1,36 @@
 <script lang="ts">
 	import { page } from '$app/stores'
-	import { decodeArgs, decodeState, getToday } from '$lib/utils'
+	import {
+		decodeArgs,
+		defaultIfEmptyString,
+		displayDaysAgo,
+		emptyString,
+		getToday,
+		truncateHash
+	} from '$lib/utils'
 	import { slide } from 'svelte/transition'
 
 	import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
-	import SvelteMarkdown from 'svelte-markdown'
 	import SchemaForm from './SchemaForm.svelte'
-	import Tooltip from './Tooltip.svelte'
 	import type { Schema } from '$lib/common'
-	import { Button } from './common'
+	import { Badge, Button } from './common'
+	import SharedBadge from './SharedBadge.svelte'
 
-	export let runnable: { summary?: string; schema?: Schema; description?: string } | undefined
+	export let runnable:
+		| {
+				summary?: string
+				schema?: Schema
+				description?: string
+				path?: string
+				is_template?: boolean
+				hash?: string
+				kind?: string
+				can_write?: boolean
+				created_at?: string
+				created_by?: string
+				extra_perms?: Record<string, boolean>
+		  }
+		| undefined
 	export let runAction: (scheduledForStr: string | undefined, args: Record<string, any>) => void
 	export let buttonText = 'Run'
 	export let schedulable = true
@@ -18,7 +38,11 @@
 
 	export let args: Record<string, any> = decodeArgs($page.url.searchParams.get('args') ?? undefined)
 
-	let isValid = true
+	export function run() {
+		runAction(scheduledForStr, args)
+	}
+
+	export let isValid = true
 
 	// Run later
 	let viewOptions = false
@@ -27,34 +51,49 @@
 
 <div class="max-w-6xl">
 	{#if detailed}
-		<div class="grid grid-cols-3 gap-2">
-			<div>
-				<h2 class="mb-1">Summary</h2>
-				<div class="mb-2 md:mb-3 text-sm">
-					{runnable?.summary ? runnable?.summary : 'No summary'}
-				</div>
-			</div>
-			<div class="col-span-2">
-				<h2 class="mb-1">Description</h2>
-				<div class="mb-2 md:mb-6">
-					<div class="prose text-sm">
-						<SvelteMarkdown
-							source={runnable?.description ? runnable?.description : 'No description'}
-						/>
+		{#if runnable}
+			<div class="flex flex-row flex-wrap justify-between gap-4">
+				<div>
+					<div class="flex flex-col mb-2">
+						<h1 class="break-words py-2 mr-2">
+							{defaultIfEmptyString(runnable.summary, runnable.path ?? '')}
+						</h1>
+						{#if !emptyString(runnable.summary)}
+							<h2 class="font-bold pb-4">{runnable.path}</h2>
+						{/if}
+
+						<div class="flex items-center gap-2">
+							<span class="text-sm text-gray-500">
+								{#if runnable}
+									Edited {displayDaysAgo(runnable.created_at || '')} by {runnable.created_by ||
+										'unknown'}
+								{/if}
+							</span>
+							<Badge color="dark-gray">
+								{truncateHash(runnable?.hash ?? '')}
+							</Badge>
+							{#if runnable?.is_template}
+								<Badge color="blue">Template</Badge>
+							{/if}
+							{#if runnable && runnable.kind !== 'runnable'}
+								<Badge color="blue">
+									{runnable?.kind}
+								</Badge>
+							{/if}
+							<SharedBadge
+								canWrite={runnable.can_write ?? true}
+								extraPerms={runnable?.extra_perms ?? {}}
+							/>
+						</div>
 					</div>
 				</div>
 			</div>
-		</div>
+		{:else}
+			<h1>Loading...</h1>
+		{/if}
 	{/if}
 	{#if runnable?.schema}
-		{#if detailed}
-			<h2>
-				Arguments
-				<Tooltip>
-					The optional fields, if left blank, will use the placeholder value as default.
-				</Tooltip>
-			</h2>
-		{/if}
+		<div class="my-2" />
 		{#if !runnable.schema.properties || Object.keys(runnable.schema.properties).length === 0}
 			<div class="text-sm p-4">No arguments</div>
 		{:else}
diff --git a/frontend/src/lib/components/ShareModal.svelte b/frontend/src/lib/components/ShareModal.svelte
index 90a03cc483..2a767c7e59 100644
--- a/frontend/src/lib/components/ShareModal.svelte
+++ b/frontend/src/lib/components/ShareModal.svelte
@@ -84,8 +84,8 @@
 	<DrawerContent title="Share {path}" on:close={drawer.closeDrawer}>
 		<div>
 			<Alert type="info" title="Owners/Editors/Readers"
-				>Owner is the user or group that is prefix of a given path. Sharing allow other users or
-				group to be able to read or write to this item without being an owner.</Alert
+				>Owner is the user or group that is prefix of its path. Sharing allow other users or group
+				to be able to read or write to this item without being an owner.</Alert
 			>
 			<div class="flex flex-row flex-wrap pb-0 my-5  items-end">
 				<div class="flex gap-4 mr-2 flex-row">
@@ -122,7 +122,7 @@
 						<Toggle bind:checked={write} />
 					</label>
 				</div>
-				<div>
+				<div class="mt-2">
 					<Button size="sm" on:click={() => addAcl(newOwner, write)}>Add permission</Button>
 				</div>
 			</div>
diff --git a/frontend/src/lib/components/common/actionRow/ActionRow.svelte b/frontend/src/lib/components/common/actionRow/ActionRow.svelte
index 314668bdcc..5c6194cf2b 100644
--- a/frontend/src/lib/components/common/actionRow/ActionRow.svelte
+++ b/frontend/src/lib/components/common/actionRow/ActionRow.svelte
@@ -2,7 +2,7 @@
 	export let applyPageWidth = false
 	export let stickToTop = false
 
-	$: wide = applyPageWidth ? 'max-w-6xl mx-auto px-4 sm:px-6 md:px-8 ' : ''
+	$: wide = applyPageWidth ? 'max-w-6xl mx-auto px-4 sm:px-6 md:px-8' : ''
 
 	let scrollY: number
 </script>
@@ -10,8 +10,8 @@
 <svelte:window bind:scrollY />
 
 <div
-	class={'bg-white py-3 ' +
-		(stickToTop ? 'sticky top-0 ' + (scrollY >= 30 ? 'border-b ' : '') : '') +
+	class={'bg-white py-3 w-full ' +
+		(stickToTop ? 'lg:sticky lg:top-0 ' + (scrollY >= 30 ? 'border-b ' : '') : '') +
 		$$props.class}
 >
 	<div class={'w-full flex flex-wrap justify-between items-center gap-4 ' + wide}>
diff --git a/frontend/src/lib/components/landing/ScriptBox.svelte b/frontend/src/lib/components/landing/ScriptBox.svelte
index ce5debbbd1..cd81f6cc89 100644
--- a/frontend/src/lib/components/landing/ScriptBox.svelte
+++ b/frontend/src/lib/components/landing/ScriptBox.svelte
@@ -4,7 +4,7 @@
 
 	import { truncateHash } from '$lib/utils'
 	import { faPencil, faPlay } from '@fortawesome/free-solid-svg-icons'
-	import { Button, Badge, ActionRow } from '$lib/components/common'
+	import { Button, Badge } from '$lib/components/common'
 
 	export let script: Script
 </script>
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index eb7b938dc9..2fbdd484f8 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -194,8 +194,12 @@ export function canWrite(
 	return false
 }
 
+export function emptyString(str: string | undefined | null): boolean {
+	return str === undefined || str === null || str === ''
+}
+
 export function defaultIfEmptyString(str: string | undefined, dflt: string): string {
-	return str == undefined || str == '' ? dflt : str
+	return emptyString(str) ? dflt : str!
 }
 
 export function removeKeysWithEmptyValues(obj: any): any {
diff --git a/frontend/src/routes/__layout@root.svelte b/frontend/src/routes/__layout@root.svelte
index 1e366a47f7..763246cc94 100644
--- a/frontend/src/routes/__layout@root.svelte
+++ b/frontend/src/routes/__layout@root.svelte
@@ -34,7 +34,7 @@
 
 	let innerWidth = window.innerWidth
 
-	$: innerWidth < 1248 && innerWidth > 768 && (isCollapsed = true)
+	$: innerWidth < 1248 && innerWidth >= 768 && (isCollapsed = true)
 	$: (innerWidth >= 1248 || innerWidth < 768) && (isCollapsed = false)
 </script>
 
@@ -100,7 +100,10 @@
 						</button>
 					</div>
 					<div class="bg-blue-500 h-full">
-						<div class="flex items-center gap-x-2 flex-shrink-0 p-4 font-extrabold text-white w-40">
+						<div
+							class="flex items-center gap-x-2 flex-shrink-0 p-4 font-extrabold text-white w-10"
+							class:w-40={!isCollapsed}
+						>
 							<WindmillIcon white={true} height="20px" width="20px" />
 							{#if !isCollapsed}Windmill{/if}
 						</div>
@@ -131,7 +134,10 @@
 						isCollapsed = !isCollapsed
 					}}
 				>
-					<div class="flex items-center gap-x-2 flex-shrink-0 p-4 font-extrabold text-white w-40">
+					<div
+						class="flex items-center gap-x-2 flex-shrink-0 p-4 font-extrabold text-white w-14"
+						class:w-40={!isCollapsed}
+					>
 						<WindmillIcon white={true} height="20px" width="20px" />
 						{#if !isCollapsed}Windmill{/if}
 					</div>
@@ -164,9 +170,9 @@
 				</div>
 			</div>
 		</div>
-		<div class={classNames('flex flex-col flex-1', isCollapsed ? 'md:pl-12' : 'md:pl-48')}>
+		<div class={classNames('w-full flex flex-col flex-1', isCollapsed ? 'md:pl-12' : 'md:pl-48')}>
 			<main>
-				<div class="w-full h-screen overflow-auto">
+				<div class="w-full relative">
 					<div
 						class="py-2 px-2 sm:px-4 md:px-8 flex justify-between items-center shadow-sm max-w-6xl mx-auto md:hidden"
 					>
diff --git a/frontend/src/routes/flows/get/[...path].svelte b/frontend/src/routes/flows/get/[...path].svelte
index 64f176786e..97745e914b 100644
--- a/frontend/src/routes/flows/get/[...path].svelte
+++ b/frontend/src/routes/flows/get/[...path].svelte
@@ -15,7 +15,8 @@
 		sendUserToast,
 		defaultIfEmptyString,
 		flowToHubUrl,
-		copyToClipboard
+		copyToClipboard,
+		emptyString
 	} from '$lib/utils'
 	import {
 		faPlay,
@@ -38,10 +39,8 @@
 	import Dropdown from '$lib/components/Dropdown.svelte'
 	import CenteredPage from '$lib/components/CenteredPage.svelte'
 	import FlowViewer from '$lib/components/FlowViewer.svelte'
-	import ObjectViewer from '$lib/components/propertyPicker/ObjectViewer.svelte'
 	import { Button, ActionRow, Skeleton, Badge } from '$lib/components/common'
 	import UserSettings from '$lib/components/UserSettings.svelte'
-	import ArgInput from '$lib/components/ArgInput.svelte'
 	import JobArgs from '$lib/components/JobArgs.svelte'
 	import CronInput from '$lib/components/CronInput.svelte'
 
@@ -101,193 +100,184 @@
 
 <UserSettings bind:this={userSettings} />
 
-<Skeleton
-	class="!max-w-6xl !px-4 sm:!px-6 md:!px-8"
-	loading={!flow}
-	layout={[0.75, [2, 0, 2], 2.25, [{ h: 1.5, w: 40 }], 0.2, [{ h: 1, w: 30 }]]}
-/>
-{#if flow}
-	<ActionRow applyPageWidth stickToTop>
-		<svelte:fragment slot="left">
-			<Button
-				href="/flows/run/{path}"
-				variant="contained"
-				color="blue"
-				size="xs"
-				startIcon={{ icon: faPlay }}
-			>
-				Run
-			</Button>
-			<Button
-				href="/flows/edit/{path}"
-				variant="contained"
-				color="blue"
-				size="xs"
-				startIcon={{ icon: faEdit }}
-				disabled={!can_write}
-			>
-				Edit
-			</Button>
-			<Button
-				href="/flows/add?template={flow.path}"
-				variant="contained"
-				color="blue"
-				size="xs"
-				startIcon={{ icon: faCodeFork }}
-			>
-				Use as template/Fork
-			</Button>
-		</svelte:fragment>
-		<svelte:fragment slot="right">
-			<Button
-				href="/runs/{flow.path}"
-				variant="border"
-				color="blue"
-				size="xs"
-				startIcon={{ icon: faList }}
-			>
-				View runs
-			</Button>
-			<Button
-				target="_blank"
-				href={flowToHubUrl(flow).toString()}
-				variant="border"
-				color="blue"
-				size="xs"
-				startIcon={{ icon: faGlobe }}
-			>
-				Publish to Hub
-			</Button>
-			<Dropdown
-				dropdownItems={[
-					{
-						displayName: 'Use as template',
-						icon: faEdit,
-						href: `/flows/add?template=${flow.path}`
-					},
-					{
-						displayName: 'Share',
-						icon: faShare,
-						action: () => {
-							shareModal.openDrawer()
-						},
-						disabled: !can_write
-					},
-					{
-						displayName: 'Schedule',
-						icon: faCalendar,
-						href: `/schedule/add?path=${flow.path}&isFlow=true`
-					},
-					{
-						displayName: 'Archive',
-						icon: faArchive,
-						type: 'delete',
-						action: () => {
-							flow?.path && archiveFlow()
-						},
-						disabled: flow.archived || !can_write
-					}
-				]}
-			/>
-		</svelte:fragment>
-	</ActionRow>
-{/if}
-
-<CenteredPage>
+<div class="relative h-screen overflow-auto">
+	<Skeleton
+		class="!max-w-6xl !px-4 sm:!px-6 md:!px-8"
+		loading={!flow}
+		layout={[0.75, [2, 0, 2], 2.25, [{ h: 1.5, w: 40 }], 0.2, [{ h: 1, w: 30 }]]}
+	/>
 	{#if flow}
-		<h1>
-			<a href="/flows/get/{path}">{flow?.path}</a>
-			<SharedBadge canWrite={can_write} extraPerms={flow?.extra_perms ?? {}} />
-		</h1>
+		<ActionRow applyPageWidth stickToTop>
+			<svelte:fragment slot="left">
+				<Button
+					on:click={() => flow?.path && archiveFlow()}
+					variant="border"
+					color="red"
+					size="xs"
+					startIcon={{ icon: faArchive }}
+					disabled={flow.archived || !can_write}
+				>
+					Archive
+				</Button>
+				<Button
+					target="_blank"
+					href={flowToHubUrl(flow).toString()}
+					variant="border"
+					color="light"
+					size="xs"
+					startIcon={{ icon: faGlobe }}
+				>
+					Publish to Hub
+				</Button>
+				<Button
+					href="/schedule/add?path={flow.path}&isFlow=true"
+					variant="border"
+					color="light"
+					size="xs"
+					startIcon={{ icon: faCalendar }}
+				>
+					Schedule
+				</Button>
+				<Button
+					on:click={() => shareModal.openDrawer()}
+					variant="border"
+					color="light"
+					size="xs"
+					startIcon={{ icon: faShare }}
+					disabled={!can_write}
+				>
+					Share
+				</Button>
+			</svelte:fragment>
+			<svelte:fragment slot="right">
+				<Button
+					href="/flows/run/{path}"
+					variant="contained"
+					color="blue"
+					size="xs"
+					startIcon={{ icon: faPlay }}
+				>
+					Run
+				</Button>
+				<Button
+					href="/flows/edit/{path}"
+					variant="contained"
+					color="blue"
+					size="xs"
+					startIcon={{ icon: faEdit }}
+					disabled={!can_write}
+				>
+					Edit
+				</Button>
+				<Button
+					href="/flows/add?template={flow.path}"
+					variant="contained"
+					color="blue"
+					size="xs"
+					startIcon={{ icon: faCodeFork }}
+				>
+					Use as template/Fork
+				</Button>
+				<Button href="/runs/{flow.path}" color="blue" size="xs" startIcon={{ icon: faList }}>
+					View runs
+				</Button>
+			</svelte:fragment>
+		</ActionRow>
 	{/if}
 
-	<ShareModal bind:this={shareModal} kind="flow" path={flow?.path ?? ''} />
-
-	<div class="grid grid-cols-1 gap-6 max-w-7xl pb-6">
-		<Skeleton
-			loading={!flow}
-			layout={[[{ h: 1.5, w: 40 }], 1, [4], 2.25, [{ h: 1.5, w: 30 }], 1, [10]]}
-		/>
+	<CenteredPage>
 		{#if flow}
-			<p class="text-sm text-gray-600"
-				>Edited {displayDaysAgo(flow.edited_at ?? '')} by {flow.edited_by}</p
-			>
-			<div>
-				<h2 class="font-bold mb-2"
-					>{flow.summary && flow.summary != '' ? flow.summary : 'No summary'}</h2
-				>
-				<div class="prose text-xs box">
-					<SvelteMarkdown source={defaultIfEmptyString(flow.description, 'No description')} />
-				</div>
-			</div>
-			{#if flow.archived}
-				<div class="bg-red-100 border-l-4 border-red-500 text-orange-700 p-4" role="alert">
-					<p class="font-bold">Archived</p>
-					<p>This version was archived</p>
-				</div>
+			<h1 class="break-words py-2 mr-2">
+				{defaultIfEmptyString(flow.summary, flow.path)}
+			</h1>
+			{#if !emptyString(flow.summary)}
+				<h2 class="font-bold pb-4">{flow.path}</h2>
 			{/if}
-			<div>
-				<h2 class="text-gray-700 pb-1 mb-3 border-b">Flow</h2>
-				<FlowViewer {flow} />
+		{/if}
 
-				<h2 class="my-4 text-gray-700 pb-1 mb-3 border-b"
-					>Webhook<Tooltip
-						>To trigger this script with a webhook, do a POST request to the endpoint below. Flows
-						are not public and can only be run by users with at least view rights on them. You will
-						need to pass a bearer token to authentify as a user. You can either pass it as a Bearer
-						token or as query arg `?token=XXX`. <a
-							href="https://docs.windmill.dev/docs/getting_started/webhooks">See docs</a
-						></Tooltip
-					></h2
+		<ShareModal bind:this={shareModal} kind="flow" path={flow?.path ?? ''} />
+
+		<div class="grid grid-cols-1 gap-6 max-w-7xl pb-6">
+			<Skeleton
+				loading={!flow}
+				layout={[[{ h: 1.5, w: 40 }], 1, [4], 2.25, [{ h: 1.5, w: 30 }], 1, [10]]}
+			/>
+			{#if flow}
+				<p class="text-sm text-gray-600"
+					>Edited {displayDaysAgo(flow.edited_at ?? '')} by {flow.edited_by}</p
 				>
-				<div class="box max-w-2xl">
-					<div class="flex flex-row gap-x-2 w-full">
-						<a
-							href={$page.url.protocol + '//' + url}
-							class="whitespace-nowrap text-ellipsis overflow-hidden mr-1"
-						>
-							{url}
-						</a>
-						<Button
-							on:click={() => copyToClipboard($page.url.protocol + '//' + url)}
-							color="blue"
-							size="xs"
-							startIcon={{ icon: faClipboard }}
-							btnClasses="ml-2"
-						>
-							Copy
-						</Button>
-						<Button size="xs" on:click={userSettings.toggleDrawer}>Create token</Button>
-					</div>
-				</div>
-				{#if schedule}
-					<div class="mt-8">
-						<h2 class="text-gray-700 pb-1 mb-3 border-b inline-flex flex-row items-center gap-x-4"
-							><div>Primary Schedule </div>
-							<Badge color="gray">{schedule.schedule}</Badge>
-							<Toggle
-								checked={schedule.enabled}
-								on:change={(e) => {
-									if (can_write) {
-										setScheduleEnabled(path, e.detail)
-									} else {
-										sendUserToast('not enough permission', true)
-									}
-								}}
-							/>
-							<Button size="xs" href="/schedule/add?edit={flow.path}&isFlow=true"
-								>Edit schedule</Button
-							>
-						</h2>
-						<div class="max-w-lg">
-							<JobArgs args={schedule.args ?? {}} />
-						</div>
-						<div class="box max-w-lg mt-2">
-							<CronInput disabled={true} schedule={schedule.schedule} />
-						</div>
+
+				{#if flow.archived}
+					<div class="bg-red-100 border-l-4 border-red-500 text-orange-700 p-4" role="alert">
+						<p class="font-bold">Archived</p>
+						<p>This version was archived</p>
 					</div>
 				{/if}
-			</div>
-		{/if}
-	</div>
-</CenteredPage>
+				<div class="prose text-sm box max-w-6xl w-full">
+					<SvelteMarkdown source={defaultIfEmptyString(flow?.description, 'No description')} />
+				</div>
+				<div>
+					<FlowViewer {flow} noSummary={true} />
+
+					<h2 class="my-4 text-gray-700 pb-1 mb-3 border-b"
+						>Webhook<Tooltip
+							>To trigger this script with a webhook, do a POST request to the endpoint below. Flows
+							are not public and can only be run by users with at least view rights on them. You
+							will need to pass a bearer token to authentify as a user. You can either pass it as a
+							Bearer token or as query arg `?token=XXX`. <a
+								href="https://docs.windmill.dev/docs/getting_started/webhooks">See docs</a
+							></Tooltip
+						></h2
+					>
+					<div class="box max-w-2xl">
+						<div class="flex flex-row gap-x-2 w-full">
+							<a
+								href={$page.url.protocol + '//' + url}
+								class="whitespace-nowrap text-ellipsis overflow-hidden mr-1"
+							>
+								{url}
+							</a>
+							<Button
+								on:click={() => copyToClipboard($page.url.protocol + '//' + url)}
+								color="blue"
+								size="xs"
+								startIcon={{ icon: faClipboard }}
+								btnClasses="ml-2"
+							>
+								Copy
+							</Button>
+							<Button size="xs" on:click={userSettings.toggleDrawer}>Create token</Button>
+						</div>
+					</div>
+					{#if schedule}
+						<div class="mt-8">
+							<h2 class="text-gray-700 pb-1 mb-3 border-b inline-flex flex-row items-center gap-x-4"
+								><div>Primary Schedule </div>
+								<Badge color="gray">{schedule.schedule}</Badge>
+								<Toggle
+									checked={schedule.enabled}
+									on:change={(e) => {
+										if (can_write) {
+											setScheduleEnabled(path, e.detail)
+										} else {
+											sendUserToast('not enough permission', true)
+										}
+									}}
+								/>
+								<Button size="xs" href="/schedule/add?edit={flow.path}&isFlow=true"
+									>Edit schedule</Button
+								>
+							</h2>
+							<div class="max-w-lg">
+								<JobArgs args={schedule.args ?? {}} />
+							</div>
+							<div class="box max-w-lg mt-2">
+								<CronInput disabled={true} schedule={schedule.schedule} />
+							</div>
+						</div>
+					{/if}
+				</div>
+			{/if}
+		</div>
+	</CenteredPage>
+</div>
diff --git a/frontend/src/routes/flows/run/[...path].svelte b/frontend/src/routes/flows/run/[...path].svelte
index 7f09e6b7c1..5d9907d227 100644
--- a/frontend/src/routes/flows/run/[...path].svelte
+++ b/frontend/src/routes/flows/run/[...path].svelte
@@ -8,21 +8,35 @@
 
 <script lang="ts">
 	import { page } from '$app/stores'
-	import { sendUserToast } from '$lib/utils'
+	import {
+		canWrite,
+		defaultIfEmptyString,
+		displayDaysAgo,
+		emptyString,
+		sendUserToast
+	} from '$lib/utils'
 	import { FlowService, type Flow, JobService } from '$lib/gen'
 	import { goto } from '$app/navigation'
-	import { workspaceStore } from '$lib/stores'
+	import { userStore, workspaceStore } from '$lib/stores'
 	import CenteredPage from '$lib/components/CenteredPage.svelte'
 	import RunForm from '$lib/components/RunForm.svelte'
-	import PageHeader from '$lib/components/PageHeader.svelte'
+	import { Button } from '$lib/components/common'
+	import { faPlay, faScroll } from '@fortawesome/free-solid-svg-icons'
+	import SharedBadge from '$lib/components/SharedBadge.svelte'
+	import SvelteMarkdown from 'svelte-markdown'
 
 	const path = $page.params.path
 	let flow: Flow | undefined
+	let runForm: RunForm | undefined
+	let isValid = true
+	let can_write = false
 
 	async function loadFlow() {
 		try {
 			if (path) {
 				flow = await FlowService.getFlowByPath({ workspace: $workspaceStore!, path })
+				can_write =
+					flow.workspace_id == $workspaceStore && canWrite(flow.path, flow.extra_perms!, $userStore)
 			} else {
 				sendUserToast(`Failed to fetch flow path from URL`, true)
 			}
@@ -40,7 +54,7 @@
 			requestBody: args,
 			scheduledFor
 		})
-		sendUserToast(`Job <a href='/run/${run}'>${run}</a> was created.`)
+		sendUserToast(`Job <a href='/run/${run}'>${run}</a> started`)
 		goto('/run/' + run)
 	}
 
@@ -49,11 +63,70 @@
 			loadFlow()
 		}
 	}
+	function onKeyDown(event: KeyboardEvent) {
+		switch (event.key) {
+			case 'Enter':
+				if (event.ctrlKey) {
+					if (isValid) {
+						event.preventDefault()
+						runForm?.run()
+					} else {
+						sendUserToast('Please fix errors before running', true)
+					}
+				}
+				break
+		}
+	}
 </script>
 
+<svelte:window on:keydown={onKeyDown} />
+
 <CenteredPage>
-	<PageHeader title="Run flow {flow?.path ?? '...'}">
-		<a href="/flows/get/{flow?.path}">View flow {flow?.path ?? ''} details</a>
-	</PageHeader>
-	<RunForm runnable={flow} runAction={runFlow} />
+	{#if flow}
+		<div class="flex flex-row flex-wrap justify-between gap-4">
+			<div class="w-full">
+				<div class="flex flex-col mt-6 mb-2 w-full">
+					<div class="flex flex-row flex-wrap w-full justify-between "
+						><div class="flex flex-col">
+							<h1 class="break-words py-2 mr-2">
+								{defaultIfEmptyString(flow.summary, flow.path)}
+							</h1>
+							{#if !emptyString(flow.summary)}
+								<h2 class="font-bold pb-4">{flow.path}</h2>
+							{/if}
+						</div>
+						<div class="flex-row hidden lg:flex">
+							<div>
+								<Button
+									startIcon={{ icon: faScroll }}
+									disabled={flow == undefined}
+									btnClasses="mr-4"
+									variant="border"
+									href="/flows/get/{flow?.path}">View flow</Button
+								>
+								<Button
+									startIcon={{ icon: faPlay }}
+									disabled={runForm == undefined || !isValid}
+									on:click={() => runForm?.run()}>Run (Ctrl+Enter)</Button
+								>
+							</div>
+						</div></div
+					>
+					<div class="flex items-center gap-2">
+						<span class="text-sm text-gray-500">
+							{#if flow}
+								Edited {displayDaysAgo(flow.edited_at || '')} by {flow.edited_by || 'unknown'}
+							{/if}
+						</span>
+
+						<SharedBadge canWrite={can_write} extraPerms={flow?.extra_perms ?? {}} />
+					</div>
+				</div>
+			</div>
+			<div class="prose text-sm box max-w-6xl w-full mb-4">
+				<SvelteMarkdown source={defaultIfEmptyString(flow.description, 'No description')} />
+			</div>
+		</div>
+	{/if}
+	<RunForm bind:this={runForm} bind:isValid detailed={false} runnable={flow} runAction={runFlow} />
 </CenteredPage>
diff --git a/frontend/src/routes/run/[...run].svelte b/frontend/src/routes/run/[...run].svelte
index a8006123d2..252839aa58 100644
--- a/frontend/src/routes/run/[...run].svelte
+++ b/frontend/src/routes/run/[...run].svelte
@@ -105,6 +105,30 @@
 {#if job?.job_kind === 'script' || job?.job_kind === 'flow'}
 	<ActionRow applyPageWidth stickToTop>
 		<svelte:fragment slot="left">
+			{@const isScript = job?.job_kind === 'script'}
+			{@const runsHref = `/runs/${job?.script_path}${!isScript ? '?jobKind=flow' : ''}`}
+			{#if job && 'deleted' in job && !job?.deleted && ($userStore?.is_admin ?? false)}
+				<Button
+					variant="border"
+					color="red"
+					size="xs"
+					startIcon={{ icon: faTrash }}
+					on:click={() => job?.id && deleteCompletedJob(job.id)}
+				>
+					Delete
+				</Button>
+				<Button
+					href={runsHref}
+					variant="border"
+					color="blue"
+					size="xs"
+					startIcon={{ icon: faList }}
+				>
+					View runs
+				</Button>
+			{/if}
+		</svelte:fragment>
+		<svelte:fragment slot="right">
 			{@const stem = `/${job?.job_kind}s`}
 			{@const isScript = job?.job_kind === 'script'}
 			{@const route = isScript ? job?.script_hash : job?.script_path}
@@ -146,22 +170,6 @@
 			<Button href={viewHref} color="blue" size="xs" startIcon={{ icon: faScroll }}>
 				View {job?.job_kind}
 			</Button>
-			<Button href={runsHref} variant="border" color="blue" size="xs" startIcon={{ icon: faList }}>
-				View runs
-			</Button>
-		</svelte:fragment>
-		<svelte:fragment slot="right">
-			{#if job && 'deleted' in job && !job?.deleted && ($userStore?.is_admin ?? false)}
-				<Button
-					variant="border"
-					color="red"
-					size="xs"
-					startIcon={{ icon: faTrash }}
-					on:click={() => job?.id && deleteCompletedJob(job.id)}
-				>
-					Delete
-				</Button>
-			{/if}
 		</svelte:fragment>
 	</ActionRow>
 {/if}
diff --git a/frontend/src/routes/scripts/get/[...hash].svelte b/frontend/src/routes/scripts/get/[...hash].svelte
index 703b4a49c7..36ba7fdf81 100644
--- a/frontend/src/routes/scripts/get/[...hash].svelte
+++ b/frontend/src/routes/scripts/get/[...hash].svelte
@@ -16,7 +16,8 @@
 		canWrite,
 		defaultIfEmptyString,
 		scriptToHubUrl,
-		copyToClipboard
+		copyToClipboard,
+		emptyString
 	} from '$lib/utils'
 	import {
 		faPlay,
@@ -133,320 +134,322 @@
 <UserSettings bind:this={userSettings} />
 
 <Skeleton {loading} class="!px-4 sm:!px-6 md:!px-8 !max-w-6xl" layout={[0.75, [2, 0, 2], 1]} />
-{#if script}
-	<ActionRow applyPageWidth stickToTop>
-		<svelte:fragment slot="left">
-			<Button
-				href={`/scripts/run/${script.hash}`}
-				color="blue"
-				size="xs"
-				startIcon={{ icon: faPlay }}
-			>
-				Run
-			</Button>
-			<Button
-				href={`/scripts/edit/${script.hash}?step=2`}
-				color="blue"
-				size="xs"
-				startIcon={{ icon: faEdit }}
-				disabled={!can_write}
-			>
-				Edit
-			</Button>
-			{#if !topHash}
+<div class="h-screen relative overflow-auto">
+	{#if script}
+		<ActionRow applyPageWidth stickToTop>
+			<svelte:fragment slot="left">
+				<Dropdown
+					left={false}
+					dropdownItems={[
+						{
+							displayName: 'Archive',
+							icon: faArchive,
+							type: 'delete',
+							action: () => {
+								script?.hash && archiveScript(script.hash)
+							},
+							disabled: script.archived || !can_write
+						},
+						{
+							displayName: 'Delete',
+							icon: faTrash,
+							type: 'delete',
+							action: () => {
+								script?.hash && deleteScript(script.hash)
+							},
+							disabled: script.deleted || !($userStore?.is_admin ?? false)
+						}
+					]}><span class="text-red-500">delete...</span></Dropdown
+				>
 				<Button
-					href={`/scripts/add?template=${script.path}`}
+					disabled={deploymentInProgress}
+					target="_blank"
+					href={scriptToHubUrl(
+						script.content,
+						script.summary,
+						script.description ?? '',
+						script.kind,
+						script.language,
+						script.schema,
+						script.language == 'deno' ? '' : script.lock
+					).toString()}
+					variant="border"
+					color="light"
+					size="xs"
+					startIcon={{ icon: faGlobe }}
+				>
+					Publish to Hub
+				</Button>
+				<Button
+					on:click={() => shareModal.openDrawer()}
+					variant="border"
+					color="light"
+					size="xs"
+					startIcon={{ icon: faShare }}
+					disabled={!can_write}
+				>
+					Share
+				</Button>
+				<Button
+					href="/schedule/add?path={script.path}"
+					variant="border"
+					color="light"
+					size="xs"
+					startIcon={{ icon: faCalendar }}
+				>
+					Schedule
+				</Button>
+			</svelte:fragment>
+			<svelte:fragment slot="right">
+				<Button
+					href={`/scripts/run/${script.hash}`}
 					color="blue"
 					size="xs"
-					startIcon={{ icon: faCodeFork }}
+					startIcon={{ icon: faPlay }}
 				>
-					Use as template/Fork
+					Run
 				</Button>
-			{/if}
-		</svelte:fragment>
-		<svelte:fragment slot="right">
-			<Button
-				href={`/runs/${script.path}`}
-				variant="border"
-				color="blue"
-				size="xs"
-				startIcon={{ icon: faList }}
-			>
-				View runs
-			</Button>
-			<Button
-				disabled={deploymentInProgress}
-				target="_blank"
-				href={scriptToHubUrl(
-					script.content,
-					script.summary,
-					script.description ?? '',
-					script.kind,
-					script.language,
-					script.schema,
-					script.language == 'deno' ? '' : script.lock
-				).toString()}
-				variant="border"
-				color="blue"
-				size="xs"
-				startIcon={{ icon: faGlobe }}
-			>
-				Publish to Hub
-			</Button>
-			<Dropdown
-				dropdownItems={[
-					{
-						displayName: 'Use as template',
-						icon: faEdit,
-						href: `/scripts/add?template=${script.path}`
-					},
-					{
-						displayName: 'Share',
-						icon: faShare,
-						action: () => {
-							shareModal.openDrawer()
-						},
-						disabled: !can_write
-					},
-					{
-						displayName: 'Schedule',
-						icon: faCalendar,
-						href: `/schedule/add?path=${script.path}`
-					},
-					{
-						displayName: 'Archive',
-						icon: faArchive,
-						type: 'delete',
-						action: () => {
-							script?.hash && archiveScript(script.hash)
-						},
-						disabled: script.archived || !can_write
-					},
-					{
-						displayName: 'Delete',
-						icon: faTrash,
-						type: 'delete',
-						action: () => {
-							script?.hash && deleteScript(script.hash)
-						},
-						disabled: script.deleted || !($userStore?.is_admin ?? false)
-					}
-				]}
-			/>
-		</svelte:fragment>
-	</ActionRow>
-{/if}
-<CenteredPage>
-	<Skeleton {loading} layout={[[{ h: 1.5, w: 40 }], 1, [{ h: 1, w: 30 }]]} />
-	{#if script}
-		<div class="flex flex-row flex-wrap justify-between gap-4">
-			<div>
-				<div class="flex items-center flex-wrap mb-2">
-					<h1 class="font-bold text-blue-500 break-words !p-0 mr-2">
-						{script?.path ?? 'Loading...'}
-					</h1>
-					<div class="flex items-center gap-2">
-						<Badge color="dark-gray">
-							{truncateHash(script?.hash ?? '')}
-						</Badge>
-						{#if script?.is_template}
-							<Badge color="blue">Template</Badge>
+				<Button
+					href={`/scripts/edit/${script.hash}?step=2`}
+					color="blue"
+					size="xs"
+					startIcon={{ icon: faEdit }}
+					disabled={!can_write}
+				>
+					Edit
+				</Button>
+				{#if !topHash}
+					<Button
+						href={`/scripts/add?template=${script.path}`}
+						color="blue"
+						size="xs"
+						startIcon={{ icon: faCodeFork }}
+					>
+						Use as template/Fork
+					</Button>
+				{/if}
+				<Button href={`/runs/${script.path}`} size="xs" startIcon={{ icon: faList }}>
+					View runs
+				</Button>
+			</svelte:fragment>
+		</ActionRow>
+	{/if}
+	<CenteredPage>
+		<Skeleton {loading} layout={[[{ h: 1.5, w: 40 }], 1, [{ h: 1, w: 30 }]]} />
+		{#if script}
+			<div class="flex flex-row flex-wrap justify-between gap-4">
+				<div>
+					<div class="flex flex-col mb-2">
+						<h1 class="break-words py-2 mr-2">
+							{defaultIfEmptyString(script.summary, script.path)}
+						</h1>
+						{#if !emptyString(script.summary)}
+							<h2 class="font-bold pb-4">{script.path}</h2>
 						{/if}
-						{#if script && script.kind !== 'script'}
-							<Badge color="blue">
-								{script?.kind}
+
+						<div class="flex items-center gap-2">
+							<span class="text-sm text-gray-500">
+								{#if script}
+									Edited {displayDaysAgo(script.created_at || '')} by {script.created_by ||
+										'unknown'}
+								{/if}
+							</span>
+							<Badge color="dark-gray">
+								{truncateHash(script?.hash ?? '')}
 							</Badge>
-						{/if}
-						{#if deploymentInProgress}
-							<Badge
-								color="yellow"
-								icon={{ data: faSpinner, position: 'right', class: 'animate-spin' }}
-							>
-								Deployment in progress
-							</Badge>
-						{/if}
+							{#if script?.is_template}
+								<Badge color="blue">Template</Badge>
+							{/if}
+							{#if script && script.kind !== 'script'}
+								<Badge color="blue">
+									{script?.kind}
+								</Badge>
+							{/if}
+							{#if deploymentInProgress}
+								<Badge
+									color="yellow"
+									icon={{ data: faSpinner, position: 'right', class: 'animate-spin' }}
+								>
+									Deployment in progress
+								</Badge>
+							{/if}
+							<SharedBadge canWrite={can_write} extraPerms={script?.extra_perms ?? {}} />
+						</div>
 					</div>
 				</div>
-				<p class="mb-2">
-					<SharedBadge canWrite={can_write} extraPerms={script?.extra_perms ?? {}} />
-					<span class="text-sm text-gray-500">
-						{#if script}
-							Edited {displayDaysAgo(script.created_at || '')} by {script.created_by || 'unknown'}
-						{/if}
-					</span>
-				</p>
 			</div>
-		</div>
-	{/if}
-
-	<ShareModal bind:this={shareModal} kind="script" path={script?.path ?? ''} />
-
-	<div class="flex flex-col gap-8 max-w-7xl pt-4 pb-2">
-		<Skeleton {loading} layout={[[3], 1]} />
-		{#if script}
-			<div>
-				<h2 class="font-bold mb-2"
-					>{script.summary && script.summary != '' ? script.summary : 'No summary'}</h2
-				>
-				<div class="prose text-xs box">
-					<SvelteMarkdown source={defaultIfEmptyString(script.description, 'No description')} />
-				</div>
-			</div>
-
-			{#if script.lock_error_logs || topHash || script.archived || script.deleted}
-				<div class="flex flex-col gap-2">
-					{#if script.lock_error_logs}
-						<div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4" role="alert">
-							<p class="font-bold">Error deploying this script</p>
-							<p>This script has not been deployed successfully because of the following errors:</p>
-							<pre class="w-full text-xs mt-2 whitespace-pre-wrap">{script.lock_error_logs}</pre>
-						</div>
-					{/if}
-					{#if topHash}
-						<div
-							class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4"
-							role="alert"
-						>
-							<p class="font-bold">Not HEAD</p>
-							<p>
-								This hash is not HEAD (latest non-archived version at this path) :
-								<a href="/scripts/get/{topHash}">Go to the HEAD of this path</a>
-							</p>
-						</div>
-					{/if}
-					{#if script.archived}
-						<div class="bg-red-100 border-l-4 border-red-500 text-orange-700 p-4" role="alert">
-							<p class="font-bold">Archived</p>
-							<p>This version was archived</p>
-						</div>
-					{/if}
-					{#if script.deleted}
-						<div class="bg-red-100 border-l-4 border-red-600 text-orange-700 p-4" role="alert">
-							<p class="font-bold">Deleted</p>
-							<p>The content of this script was deleted (by an admin, no less)</p>
-						</div>
-					{/if}
-				</div>
-			{/if}
 		{/if}
 
-		<div class="">
-			<h2 class="text-lg mb-1 font-bold text-gray-600">
-				Arguments JSON schema
-				<Tooltip>
-					The jsonschema defines the constraints that the payload must respect to be compatible with
-					the input parameters of this script. The UI form is generated automatically from the
-					script jsonschema. See
-					<a href="https://json-schema.org/"> jsonschema documentation </a>
-				</Tooltip>
-			</h2>
-			<Skeleton {loading} layout={[[15]]} />
+		<ShareModal bind:this={shareModal} kind="script" path={script?.path ?? ''} />
+
+		<div class="flex flex-col gap-8 max-w-7xl pt-4 pb-2">
+			<Skeleton {loading} layout={[[3], 1]} />
+
 			{#if script}
-				<div class="box mt-2">
-					<SchemaViewer schema={script.schema} />
-				</div>
-			{/if}
-		</div>
-		<div>
-			<h2 class="text-lg mb-1 font-bold text-gray-600 border-b">Code</h2>
-			<Skeleton {loading} layout={[[20]]} />
-			{#if script}
-				<HighlightCode language={script.language} code={script.content} />
-			{/if}
-		</div>
-	</div>
-	<div class="flex flex-col lg:flex-row gap-4 mt-8">
-		<div class="lg:w-1/2">
-			<h3 class="text-lg mb-1 font-bold text-gray-600"
-				>Webhooks<Tooltip
-					>To trigger this script with a webhook, do a POST request to the endpoints below. Scripts
-					are not public and can only be run by users with at least view rights on them. You will
-					need to pass a bearer token to authentify as a user. You can either pass it as a Bearer
-					token or as query arg `?token=XXX`. <a
-						href="https://docs.windmill.dev/docs/getting_started/webhooks">See docs</a
-					></Tooltip
-				></h3
-			>
-			<Skeleton {loading} layout={[[8.5]]} />
-			{#if script}
-				<div class="box">
-					<Tabs selected="uuid">
-						<Tab value="uuid">UUID</Tab>
-						<Tab value="result">Result</Tab>
-						<svelte:fragment slot="content">
-							{#each Object.keys(webhooks) as key}
-								<TabContent value={key}>
-									<ul>
-										{#each Object.keys(webhooks[key]) as type}
-											{@const url = webhooks[key][type]}
-											<li class="flex justify-between items-center mt-2">
-												<a
-													href={$page.url.protocol + '//' + url}
-													class="whitespace-nowrap text-ellipsis overflow-hidden mr-1"
-												>
-													{url}
-												</a>
-												<div class="flex">
-													<Badge color="dark-gray" capitalize>
-														{type}
-													</Badge>
-													<Button
-														on:click={() => copyToClipboard($page.url.protocol + '//' + url)}
-														color="blue"
-														size="xs"
-														startIcon={{ icon: faClipboard }}
-														btnClasses="ml-2"
-													>
-														Copy
-													</Button>
-												</div>
+				<div class="flex flex-col lg:flex-row gap-4">
+					<div class="lg:w-1/2">
+						<h3 class="text-lg mb-1 font-bold text-gray-600">Description</h3>
+
+						<div class="prose text-sm box">
+							<SvelteMarkdown source={defaultIfEmptyString(script.description, 'No description')} />
+						</div>
+					</div>
+					<div class="lg:w-1/2">
+						<h3 class="text-lg mb-1 font-bold text-gray-600">Versions</h3>
+						<Skeleton {loading} layout={[[8.5]]} />
+						{#if script}
+							<div class="box">
+								<h4 class="font-bold text-gray-500">Current</h4>
+								<div class="mt-1">
+									{script?.hash}
+								</div>
+								<h4 class="font-bold text-gray-500 mt-2">Previous</h4>
+								{#if script?.parent_hashes?.length}
+									<ul class="max-h-20 overflow-y-auto">
+										{#each script.parent_hashes as hash}
+											<li class="mt-1">
+												<a href="/scripts/get/{hash}">{hash}</a>
 											</li>
 										{/each}
 									</ul>
-									<div class="flex flex-row-reverse mt-2">
-										<Button size="xs" on:click={userSettings.toggleDrawer}>Create token</Button>
-									</div>
-								</TabContent>
-							{/each}
-						</svelte:fragment>
-					</Tabs>
-				</div>
-			{/if}
-		</div>
-		<div class="lg:w-1/2">
-			<h3 class="text-lg mb-1 font-bold text-gray-600">Versions</h3>
-			<Skeleton {loading} layout={[[8.5]]} />
-			{#if script}
-				<div class="box">
-					<h4 class="font-bold text-gray-500">Current</h4>
-					<div class="mt-1">
-						{script?.hash}
+								{:else}
+									<p class="text-sm text-gray-500">There are no previous versions</p>
+								{/if}
+							</div>
+						{/if}
 					</div>
-					<h4 class="font-bold text-gray-500 mt-2">Previous</h4>
-					{#if script?.parent_hashes?.length}
-						<ul class="max-h-20 overflow-y-auto">
-							{#each script.parent_hashes as hash}
-								<li class="mt-1">
-									<a href="/scripts/get/{hash}">{hash}</a>
-								</li>
-							{/each}
-						</ul>
-					{:else}
-						<p class="text-sm text-gray-500">There are no previous versions</p>
-					{/if}
 				</div>
+
+				{#if script.lock_error_logs || topHash || script.archived || script.deleted}
+					<div class="flex flex-col gap-2">
+						{#if script.lock_error_logs}
+							<div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4" role="alert">
+								<p class="font-bold">Error deploying this script</p>
+								<p
+									>This script has not been deployed successfully because of the following errors:</p
+								>
+								<pre class="w-full text-xs mt-2 whitespace-pre-wrap">{script.lock_error_logs}</pre>
+							</div>
+						{/if}
+						{#if topHash}
+							<div
+								class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4"
+								role="alert"
+							>
+								<p class="font-bold">Not HEAD</p>
+								<p>
+									This hash is not HEAD (latest non-archived version at this path) :
+									<a href="/scripts/get/{topHash}">Go to the HEAD of this path</a>
+								</p>
+							</div>
+						{/if}
+						{#if script.archived}
+							<div class="bg-red-100 border-l-4 border-red-500 text-orange-700 p-4" role="alert">
+								<p class="font-bold">Archived</p>
+								<p>This version was archived</p>
+							</div>
+						{/if}
+						{#if script.deleted}
+							<div class="bg-red-100 border-l-4 border-red-600 text-orange-700 p-4" role="alert">
+								<p class="font-bold">Deleted</p>
+								<p>The content of this script was deleted (by an admin, no less)</p>
+							</div>
+						{/if}
+					</div>
+				{/if}
+			{/if}
+
+			<div class="">
+				<h2 class="text-lg mb-1 font-bold text-gray-600">
+					Arguments JSON schema
+					<Tooltip>
+						The jsonschema defines the constraints that the payload must respect to be compatible
+						with the input parameters of this script. The UI form is generated automatically from
+						the script jsonschema. See
+						<a href="https://json-schema.org/"> jsonschema documentation </a>
+					</Tooltip>
+				</h2>
+				<Skeleton {loading} layout={[[15]]} />
+				{#if script}
+					<div class="box mt-2">
+						<SchemaViewer schema={script.schema} />
+					</div>
+				{/if}
+			</div>
+			<div>
+				<h2 class="text-lg mb-1 font-bold text-gray-600 border-b">Code</h2>
+				<Skeleton {loading} layout={[[20]]} />
+				{#if script}
+					<HighlightCode language={script.language} code={script.content} />
+				{/if}
+			</div>
+		</div>
+
+		<h3 class="text-lg mb-1 mt-8 font-bold text-gray-600"
+			>Webhooks<Tooltip
+				>To trigger this script with a webhook, do a POST request to the endpoints below. Scripts
+				are not public and can only be run by users with at least view rights on them. You will need
+				to pass a bearer token to authentify as a user. You can either pass it as a Bearer token or
+				as query arg `?token=XXX`. <a href="https://docs.windmill.dev/docs/getting_started/webhooks"
+					>See docs</a
+				></Tooltip
+			></h3
+		>
+		<Skeleton {loading} layout={[[8.5]]} />
+		{#if script}
+			<div class="box max-w-3xl">
+				<Tabs selected="uuid">
+					<Tab value="uuid">UUID</Tab>
+					<Tab value="result">Result</Tab>
+					<svelte:fragment slot="content">
+						{#each Object.keys(webhooks) as key}
+							<TabContent value={key}>
+								<ul>
+									{#each Object.keys(webhooks[key]) as type}
+										{@const url = webhooks[key][type]}
+										<li class="flex justify-between items-center mt-2">
+											<a
+												href={$page.url.protocol + '//' + url}
+												class="whitespace-nowrap text-ellipsis overflow-hidden mr-1"
+											>
+												{url}
+											</a>
+											<div class="flex">
+												<Badge color="dark-gray" capitalize>
+													{type}
+												</Badge>
+												<Button
+													on:click={() => copyToClipboard($page.url.protocol + '//' + url)}
+													color="blue"
+													size="xs"
+													startIcon={{ icon: faClipboard }}
+													btnClasses="ml-2"
+												>
+													Copy
+												</Button>
+											</div>
+										</li>
+									{/each}
+								</ul>
+								<div class="flex flex-row-reverse mt-2">
+									<Button size="xs" on:click={userSettings.toggleDrawer}>Create token</Button>
+								</div>
+							</TabContent>
+						{/each}
+					</svelte:fragment>
+				</Tabs>
+			</div>
+		{/if}
+		<div>
+			<h2 class="text-lg mb-1 font-bold text-gray-600 border-b mt-8">Dependencies lock file</h2>
+			<Skeleton {loading} layout={[[5]]} />
+			{#if script}
+				{#if script?.lock}
+					<pre class="text-xs overflow-auto">{script.lock}</pre>
+				{:else}
+					<p class="text-sm text-gray-500">There is no lock file for this script</p>
+				{/if}
 			{/if}
 		</div>
-	</div>
-	<div>
-		<h2 class="text-lg mb-1 font-bold text-gray-600 border-b mt-8">Dependencies lock file</h2>
-		<Skeleton {loading} layout={[[5]]} />
-		{#if script}
-			{#if script?.lock}
-				<pre class="text-xs">{script.lock}</pre>
-			{:else}
-				<p class="text-sm text-gray-500">There is no lock file for this script</p>
-			{/if}
-		{/if}
-	</div>
-</CenteredPage>
+	</CenteredPage>
+</div>
diff --git a/frontend/src/routes/scripts/run/[...hash].svelte b/frontend/src/routes/scripts/run/[...hash].svelte
index 4a0a6b6220..ec6d100a54 100644
--- a/frontend/src/routes/scripts/run/[...hash].svelte
+++ b/frontend/src/routes/scripts/run/[...hash].svelte
@@ -8,17 +8,31 @@
 
 <script lang="ts">
 	import { page } from '$app/stores'
-	import { emptySchema, sendUserToast } from '$lib/utils'
+	import {
+		canWrite,
+		defaultIfEmptyString,
+		displayDaysAgo,
+		emptySchema,
+		emptyString,
+		sendUserToast,
+		truncateHash
+	} from '$lib/utils'
 	import { ScriptService, type Script, JobService } from '$lib/gen'
 	import { goto } from '$app/navigation'
-	import { workspaceStore } from '$lib/stores'
+	import { userStore, workspaceStore } from '$lib/stores'
 	import { inferArgs } from '$lib/infer'
 	import CenteredPage from '$lib/components/CenteredPage.svelte'
 	import RunForm from '$lib/components/RunForm.svelte'
-	import PageHeader from '$lib/components/PageHeader.svelte'
+	import { Badge, Button } from '$lib/components/common'
+	import SharedBadge from '$lib/components/SharedBadge.svelte'
+	import SvelteMarkdown from 'svelte-markdown'
+	import { faPlay, faScroll } from '@fortawesome/free-solid-svg-icons'
 
 	const hash = $page.params.hash
 	let script: Script | undefined
+	let runForm: RunForm | undefined
+	let isValid = true
+	let can_write = false
 
 	async function loadScript() {
 		if (hash) {
@@ -28,6 +42,9 @@
 				inferArgs(script.language, script.content, script.schema)
 				script = script
 			}
+			can_write =
+				script.workspace_id == $workspaceStore &&
+				canWrite(script.path, script.extra_perms!, $userStore)
 		} else {
 			sendUserToast(`Failed to fetch script hash from URL`, true)
 		}
@@ -42,7 +59,7 @@
 				requestBody: args,
 				scheduledFor
 			})
-			sendUserToast(`Job <a href='/run/${run}'>${run}</a> was created.`)
+			sendUserToast(`Job <a href='/run/${run}'>${run}</a> started`)
 			goto('/run/' + run)
 		} catch (err) {
 			sendUserToast(`Could not create job: ${err}`, true)
@@ -54,12 +71,84 @@
 			loadScript()
 		}
 	}
+
+	function onKeyDown(event: KeyboardEvent) {
+		switch (event.key) {
+			case 'Enter':
+				if (event.ctrlKey) {
+					if (isValid) {
+						event.preventDefault()
+						runForm?.run()
+					} else {
+						sendUserToast('Please fix errors before running', true)
+					}
+				}
+				break
+		}
+	}
 </script>
 
+<svelte:window on:keydown={onKeyDown} />
+
 <CenteredPage>
-	<PageHeader title="Run script {script?.path ?? '...'}">
-		<a href="/scripts/get/{script?.hash}">View script {script?.path} at hash {script?.hash}</a>
-	</PageHeader>
+	{#if script}
+		<div class="flex flex-row flex-wrap justify-between gap-4">
+			<div class="w-full">
+				<div class="flex flex-col mt-6 mb-2 w-full">
+					<div class="flex flex-row flex-wrap w-full justify-between "
+						><div class="flex flex-col">
+							<h1 class="break-words py-2 mr-2">
+								{defaultIfEmptyString(script.summary, script.path)}
+							</h1>
+							{#if !emptyString(script.summary)}
+								<h2 class="font-bold pb-4">{script.path}</h2>
+							{/if}
+						</div>
+						<div class="flex-row hidden lg:flex">
+							<div>
+								<Button
+									startIcon={{ icon: faScroll }}
+									disabled={script == undefined}
+									btnClasses="mr-4"
+									variant="border"
+									href="/scripts/get/{script?.hash}">View script</Button
+								>
+								<Button
+									startIcon={{ icon: faPlay }}
+									disabled={runForm == undefined || !isValid}
+									on:click={() => runForm?.run()}>Run (Ctrl+Enter)</Button
+								>
+							</div>
+						</div></div
+					>
+					<div class="flex items-center gap-2">
+						<span class="text-sm text-gray-500">
+							{#if script}
+								Edited {displayDaysAgo(script.created_at || '')} by {script.created_by || 'unknown'}
+							{/if}
+						</span>
+						<Badge color="dark-gray">
+							{truncateHash(script?.hash ?? '')}
+						</Badge>
+						{#if script?.is_template}
+							<Badge color="blue">Template</Badge>
+						{/if}
+						{#if script && script.kind !== 'script'}
+							<Badge color="blue">
+								{script?.kind}
+							</Badge>
+						{/if}
+
+						<SharedBadge canWrite={can_write} extraPerms={script?.extra_perms ?? {}} />
+					</div>
+				</div>
+			</div>
+			<div class="prose text-sm box max-w-6xl w-full mb-4">
+				<SvelteMarkdown source={defaultIfEmptyString(script.description, 'No description')} />
+			</div>
+		</div>
+	{/if}
+
 	{#if script?.lock_error_logs}
 		<div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4" role="alert">
 			<p class="font-bold">Not deployed properly</p>
@@ -75,6 +164,12 @@
 			<p>Refresh this page in a few seconds.</p>
 		</div>
 	{:else}
-		<RunForm runnable={script} runAction={runScript} />
+		<RunForm
+			detailed={false}
+			bind:isValid
+			bind:this={runForm}
+			runnable={script}
+			runAction={runScript}
+		/>
 	{/if}
 </CenteredPage>