From b579db61ec1d54e2ea0e026f576c85cfb707071e Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@windmill.dev>
Date: Tue, 8 Oct 2024 19:34:54 -0700
Subject: [PATCH] allow more customisation of frontend (#4508)

* all

* npm check
---
 frontend/package.json                         |  22 ++
 ...ppConnectLightweightResourcePicker.svelte} |  16 +-
 frontend/src/lib/components/ArgInput.svelte   |   8 +-
 .../src/lib/components/CustomPopover.svelte   |   2 +-
 .../src/lib/components/DisplayResult.svelte   |   2 +-
 .../src/lib/components/FlowBuilder.svelte     |   2 +
 .../src/lib/components/FlowInputViewer.svelte |  29 +++
 .../src/lib/components/FlowMetadata.svelte    |   4 +-
 frontend/src/lib/components/FlowViewer.svelte |  24 +-
 .../LightweightResourcePicker.svelte          |  66 ++---
 .../src/lib/components/ManualPopover.svelte   |   2 +-
 .../lib/components/ObjectResourceInput.svelte |   8 +-
 frontend/src/lib/components/Popover.svelte    |   2 +-
 frontend/src/lib/components/Portal.svelte     |  15 +-
 .../src/lib/components/ResourceEditor.svelte  |   9 +-
 .../src/lib/components/ResourcePicker.svelte  |  26 +-
 frontend/src/lib/components/RunForm.svelte    |   2 +-
 .../src/lib/components/SavedInputs.svelte     |   4 +-
 .../components/ScriptVersionHistory.svelte    | 113 +++++----
 frontend/src/lib/components/TimeAgo.svelte    |  11 +-
 .../apps/components/buttons/AppButton.svelte  |   2 +-
 .../display/dbtable/AppDbExplorer.svelte      |   2 +-
 .../components/inputs/AppMultiSelect.svelte   |   2 +-
 .../components/inputs/AppMultiSelectV2.svelte |   2 +-
 .../apps/components/layout/AppDrawer.svelte   |   2 +-
 .../apps/components/layout/AppModal.svelte    |   2 +-
 .../apps/editor/GridEditorMenu.svelte         |   2 +-
 .../lib/ConditionalPortal.svelte              |   2 +-
 .../lib/ConditionalPortalGlobal.svelte        |   2 +-
 .../common/button/ButtonDropdown.svelte       |   2 +-
 .../common/drawer/ConditionalPortal.svelte    |   2 +-
 .../lib/components/common/menu/MenuV2.svelte  |   2 +-
 .../common/modal/AlwaysMountedModal.svelte    |   2 +-
 .../components/common/popup/PopupV2.svelte    |   2 +-
 .../src/lib/components/details/Menu.svelte    |   2 +-
 .../lib/components/flows/FlowEditor.svelte    |   3 +-
 .../lib/components/flows/FlowHistory.svelte   | 214 +----------------
 .../components/flows/FlowHistoryInner.svelte  | 212 +++++++++++++++++
 .../flows/content/FlowEditorPanel.svelte      |   3 +-
 .../components/flows/content/FlowInput.svelte | 128 +++++-----
 .../flows/content/FlowModuleScript.svelte     |   2 +-
 .../flows/map/FlowModuleSchemaMap.svelte      |   2 +-
 .../lib/components/icons/WindmillIcon.svelte  | 225 ++++++++++--------
 frontend/src/lib/components/icons/store.ts    |   1 +
 .../multiselect/MultiSelectWrapper.svelte     |   2 +-
 .../propertyPicker/ObjectViewer.svelte        |   2 +-
 .../src/lib/components/runs/RunRow.svelte     |  10 +-
 .../schema/FlowPropertyEditor.svelte          |   1 +
 .../search/GlobalSearchModal.svelte           |   2 +-
 .../lib/init_scripts/python_failure_module.ts |   8 -
 .../src/lib/init_scripts/python_init_code.ts  |  40 ----
 .../init_scripts/python_init_code_clear.ts    |   5 -
 .../init_scripts/python_init_code_trigger.ts  |  14 --
 frontend/src/lib/script_helpers.ts            | 146 ++++++++----
 .../(logged)/flows/get/[...path]/+page.svelte |  16 +-
 .../(root)/(logged)/run/[...run]/+page.svelte |  37 ++-
 .../scripts/get/[...hash]/+page.svelte        |   3 +-
 .../(logged)/workspace_settings/+page.svelte  |  16 +-
 .../src/routes/(root)/embed_connect/+page.js  |   5 -
 59 files changed, 786 insertions(+), 708 deletions(-)
 rename frontend/src/{routes/(root)/embed_connect/+page.svelte => lib/components/AppConnectLightweightResourcePicker.svelte} (77%)
 create mode 100644 frontend/src/lib/components/FlowInputViewer.svelte
 create mode 100644 frontend/src/lib/components/flows/FlowHistoryInner.svelte
 create mode 100644 frontend/src/lib/components/icons/store.ts
 delete mode 100644 frontend/src/lib/init_scripts/python_failure_module.ts
 delete mode 100644 frontend/src/lib/init_scripts/python_init_code.ts
 delete mode 100644 frontend/src/lib/init_scripts/python_init_code_clear.ts
 delete mode 100644 frontend/src/lib/init_scripts/python_init_code_trigger.ts
 delete mode 100644 frontend/src/routes/(root)/embed_connect/+page.js

diff --git a/frontend/package.json b/frontend/package.json
index 4fc20b556a..02a438827a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -300,6 +300,14 @@
 			"types": "./package/utils.d.ts",
 			"default": "./package/utils.js"
 		},
+		"./icons/store": {
+			"types": "./package/icons/store.d.ts",
+			"default": "./package/icons/store.js"
+		},
+		"./script_helpers": {
+			"types": "./package/script_helpers.d.ts",
+			"default": "./package/script_helpers.js"
+		},
 		"./infer": {
 			"types": "./package/infer.d.ts",
 			"default": "./package/infer.js"
@@ -341,6 +349,11 @@
 			"types": "./package/components/DropdownV2.svelte.d.ts",
 			"svelte": "./package/components/DropdownV2.svelte",
 			"default": "./package/components/DropdownV2.svelte"
+		},
+		"./components/flows/FlowHistoryInner.svelte": {
+			"types": "./package/components/flows/FlowHistoryInner.svelte.d.ts",
+			"svelte": "./package/components/flows/FlowHistoryInner.svelte",
+			"default": "./package/components/flows/FlowHistoryInner.svelte"
 		}
 	},
 	"files": [
@@ -426,6 +439,9 @@
 			"components/EditableSchemaWrapper.svelte": [
 				"./package/components/schema/EditableSchemaWrapper.svelte.d.ts"
 			],
+			"components/flows/FlowHistoryInner.svelte": [
+				"./package/components/flows/FlowHistoryInner.svelte.d.ts"
+			],
 			"utils": [
 				"./package/utils.d.ts"
 			],
@@ -461,6 +477,12 @@
 			],
 			"components/DropdownV2.svelte": [
 				"./package/components/DropdownV2.svelte.d.ts"
+			],
+			"script_helpers": [
+				"./package/script_helpers.d.ts"
+			],
+			"icons/store": [
+				"./package/icons/store.d.ts"
 			]
 		}
 	},
diff --git a/frontend/src/routes/(root)/embed_connect/+page.svelte b/frontend/src/lib/components/AppConnectLightweightResourcePicker.svelte
similarity index 77%
rename from frontend/src/routes/(root)/embed_connect/+page.svelte
rename to frontend/src/lib/components/AppConnectLightweightResourcePicker.svelte
index 87ae396e55..4e59ea7858 100644
--- a/frontend/src/routes/(root)/embed_connect/+page.svelte
+++ b/frontend/src/lib/components/AppConnectLightweightResourcePicker.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { page } from '$app/stores'
 	import { base } from '$app/paths'
 
 	import AppConnectInner from '$lib/components/AppConnectInner.svelte'
@@ -8,7 +7,10 @@
 	import { workspaceStore } from '$lib/stores'
 	import { onMount } from 'svelte'
 
-	let resourceType = $page.url.searchParams.get('resource_type') ?? undefined
+	export let resourceType: string | undefined = undefined
+	export let workspace: string
+	export let express = false
+
 	let step = 1
 	let disabled = false
 	let isGoogleSignin = false
@@ -17,8 +19,6 @@
 	let appConnect: AppConnectInner | undefined = undefined
 
 	let darkMode: boolean = false
-	const workspace = $page.url.searchParams.get('workspace')
-	const express = $page.url.searchParams.get('express') == 'true'
 
 	if (workspace) {
 		$workspaceStore = workspace
@@ -68,11 +68,7 @@
 		bind:isGoogleSignin
 		bind:disabled
 		bind:manual
-		on:error={(e) => {
-			window?.parent?.postMessage({ type: 'error', error: e.detail }, '*')
-		}}
-		on:refresh={(e) => {
-			window?.parent?.postMessage({ type: 'refresh', detail: e.detail }, '*')
-		}}
+		on:error
+		on:refresh
 	/>
 </div>
diff --git a/frontend/src/lib/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte
index 070a174688..093d7010dc 100644
--- a/frontend/src/lib/components/ArgInput.svelte
+++ b/frontend/src/lib/components/ArgInput.svelte
@@ -89,6 +89,7 @@
 	export let editor: SimpleEditor | undefined = undefined
 	export let orderEditable = false
 	export let shouldDispatchChanges: boolean = false
+	export let noDefaultOnSelectFirst: boolean = false
 	export let helperScript:
 		| { type: 'inline'; path?: string; lang: Script['language']; code: string }
 		| { type: 'hash'; hash: string }
@@ -537,11 +538,14 @@
 			{:else if inputCat == 'resource-object' && (resourceTypes == undefined || (format.split('-').length > 1 && resourceTypes.includes(format.substring('resource-'.length))))}
 				<ObjectResourceInput
 					{defaultValue}
-					selectFirst
+					selectFirst={!noDefaultOnSelectFirst}
 					{disablePortal}
 					{format}
 					bind:value
 					bind:editor
+					on:clear={() => {
+						defaultValue = null
+					}}
 					{showSchemaExplorer}
 				/>
 			{:else if inputCat == 'resource-object' && format.split('-').length > 1 && format
@@ -807,7 +811,7 @@
 				</div>
 			{:else if inputCat == 'resource-string'}
 				<ResourcePicker
-					selectFirst
+					selectFirst={noDefaultOnSelectFirst}
 					{disablePortal}
 					bind:value
 					initialValue={defaultValue}
diff --git a/frontend/src/lib/components/CustomPopover.svelte b/frontend/src/lib/components/CustomPopover.svelte
index b8330749c5..8e933049cc 100644
--- a/frontend/src/lib/components/CustomPopover.svelte
+++ b/frontend/src/lib/components/CustomPopover.svelte
@@ -67,7 +67,7 @@
 	</button>
 {/if}
 {#if showTooltip && !disablePopup}
-	<Portal>
+	<Portal name="custom-popover">
 		<!-- svelte-ignore a11y-no-static-element-interactions -->
 		<div
 			use:popperContent={popperOptions}
diff --git a/frontend/src/lib/components/DisplayResult.svelte b/frontend/src/lib/components/DisplayResult.svelte
index 3fec8d0941..e09dfaa895 100644
--- a/frontend/src/lib/components/DisplayResult.svelte
+++ b/frontend/src/lib/components/DisplayResult.svelte
@@ -854,7 +854,7 @@
 			</DrawerContent>
 		</Drawer>
 
-		<Portal>
+		<Portal name="s3filepicker">
 			<S3FilePicker bind:this={s3FileViewer} readOnlyMode={true} />
 		</Portal>
 	{/if}
diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte
index f33841a4f6..4d9cd4b768 100644
--- a/frontend/src/lib/components/FlowBuilder.svelte
+++ b/frontend/src/lib/components/FlowBuilder.svelte
@@ -99,6 +99,7 @@
 	export let diffDrawer: DiffDrawer | undefined = undefined
 	export let customUi: FlowBuilderWhitelabelCustomUi = {}
 	export let disableAi: boolean = false
+	export let disabledFlowInputs = false
 
 	$: setContext('customUi', customUi)
 
@@ -1326,6 +1327,7 @@
 			<!-- metadata -->
 			{#if $flowStateStore}
 				<FlowEditor
+					{disabledFlowInputs}
 					disableAi={disableAi || customUi?.stepInputs?.ai == false}
 					disableSettings={customUi?.settingsPanel === false}
 					{loading}
diff --git a/frontend/src/lib/components/FlowInputViewer.svelte b/frontend/src/lib/components/FlowInputViewer.svelte
new file mode 100644
index 0000000000..94c25ffcc4
--- /dev/null
+++ b/frontend/src/lib/components/FlowInputViewer.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { Schema } from '$lib/common'
+
+	import FieldHeader from './FieldHeader.svelte'
+
+	export let schema: Schema | { [key: string]: unknown } | undefined
+</script>
+
+<ul class="my-2">
+	{#if schema == undefined}
+		<li class="text-secondary text-xs italic mb-4">No inputs</li>
+	{:else}
+		{#each Object.entries(schema.properties ?? {}) as [inp, v]}
+			<li class="list-disc flex flex-row items-center">
+				<FieldHeader
+					label={inp}
+					required={Array.isArray(schema.required) && schema.required?.includes(inp)}
+					type={v?.type}
+					contentEncoding={v?.contentEncoding}
+					format={v?.format}
+				/><span class="ml-4 mt-1 text-xs"
+					>{v?.default != undefined && v?.default != ''
+						? 'default: ' + JSON.stringify(v?.default)
+						: ''}</span
+				>
+			</li>
+		{/each}
+	{/if}
+</ul>
diff --git a/frontend/src/lib/components/FlowMetadata.svelte b/frontend/src/lib/components/FlowMetadata.svelte
index 46e0a6fda9..3ab5d3d416 100644
--- a/frontend/src/lib/components/FlowMetadata.svelte
+++ b/frontend/src/lib/components/FlowMetadata.svelte
@@ -26,7 +26,7 @@
 			{#if job['success'] != undefined}
 				Received job: {displayDate(job.created_at ?? '')}
 			{:else}
-				Received job <TimeAgo withDate date={job.created_at ?? ''} />
+				Received job <TimeAgo date={job.created_at ?? ''} />
 			{/if}
 			<Tooltip small>{job?.created_at}</Tooltip>
 		</span>
@@ -35,7 +35,7 @@
 		<div class="flex flex-row gap-2 items-center text-sm">
 			<Clock size={SMALL_ICON_SIZE} class="text-secondary min-w-3.5" />
 			<span class="whitespace-nowrap">
-				Started <TimeAgo withDate agoOnlyIfRecent date={job.started_at ?? ''} />
+				Started <TimeAgo agoOnlyIfRecent date={job.started_at ?? ''} />
 				<Tooltip small>{job?.started_at}</Tooltip>
 			</span>
 		</div>
diff --git a/frontend/src/lib/components/FlowViewer.svelte b/frontend/src/lib/components/FlowViewer.svelte
index 66d37704bf..cc1350b75a 100644
--- a/frontend/src/lib/components/FlowViewer.svelte
+++ b/frontend/src/lib/components/FlowViewer.svelte
@@ -2,11 +2,11 @@
 	import type { FlowValue } from '$lib/gen'
 	import { Tab, Tabs, TabContent } from './common'
 	import SchemaViewer from './SchemaViewer.svelte'
-	import FieldHeader from './FieldHeader.svelte'
 	import FlowGraphViewer from './FlowGraphViewer.svelte'
 
 	import HighlightTheme from './HighlightTheme.svelte'
 	import FlowViewerInner from './FlowViewerInner.svelte'
+	import FlowInputViewer from './FlowInputViewer.svelte'
 
 	export let flow: {
 		summary: string
@@ -27,10 +27,6 @@
 	if (initialOpen) {
 		open[initialOpen] = true
 	}
-
-	function toAny(x: unknown): any {
-		return x as any
-	}
 </script>
 
 <HighlightTheme />
@@ -54,23 +50,7 @@
 					<span>Flow Input</span>
 				</p>
 				{#if flow.schema && flow.schema.properties && Object.keys(flow.schema.properties).length > 0 && flow.schema}
-					<ul class="my-2">
-						{#each Object.entries(flow.schema.properties) as [inp, v]}
-							<li class="list-disc flex flex-row">
-								<FieldHeader
-									label={inp}
-									required={flow.schema.required?.includes(inp)}
-									type={toAny(v)?.type}
-									contentEncoding={toAny(v)?.contentEncoding}
-									format={toAny(v)?.format}
-								/><span class="ml-4 mt-2 text-xs"
-									>{toAny(v)?.default != undefined
-										? 'default: ' + JSON.stringify(toAny(v)?.default)
-										: ''}</span
-								>
-							</li>
-						{/each}
-					</ul>
+					<FlowInputViewer schema={flow.schema} />
 				{:else}
 					<div class="text-secondary text-xs italic mb-4">No inputs</div>
 				{/if}
diff --git a/frontend/src/lib/components/LightweightResourcePicker.svelte b/frontend/src/lib/components/LightweightResourcePicker.svelte
index c5b34f9af9..e0c250f32f 100644
--- a/frontend/src/lib/components/LightweightResourcePicker.svelte
+++ b/frontend/src/lib/components/LightweightResourcePicker.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { ResourceService } from '$lib/gen'
-	import { base } from '$lib/base'
 	import { workspaceStore } from '$lib/stores'
 	import { createEventDispatcher, getContext } from 'svelte'
 	import Select from './apps/svelte-select/lib/index'
@@ -8,7 +7,7 @@
 
 	import DarkModeObserver from './DarkModeObserver.svelte'
 	import { Button, Drawer, DrawerContent } from './common'
-	import { Plus } from 'lucide-svelte'
+	import { Plus, Loader2 } from 'lucide-svelte'
 	import type { AppViewerContext } from './apps/types'
 	import { sendUserToast } from '$lib/toast'
 
@@ -65,23 +64,6 @@
 		refreshCount += 1
 		open = true
 	}
-
-	function processEvent(event: MessageEvent) {
-		if (event.origin !== window.location.origin) {
-			return
-		}
-
-		if (event.data.type === 'error') {
-			sendUserToast(event.data.error, true)
-		}
-		if (event.data.type === 'refresh') {
-			window.removeEventListener('message', processEvent)
-			value = event.data.detail
-			valueSelect = { value, label: value }
-			drawer?.closeDrawer?.()
-			open = false
-		}
-	}
 </script>
 
 <DarkModeObserver bind:darkMode />
@@ -89,12 +71,15 @@
 {#if expressOAuthSetup}
 	{#if open}
 		{#key refreshCount}
-			<iframe
-				title="App connection"
-				class="w-full h-full hidden"
-				src="{base}/embed_connect?resource_type={resourceType}&workspace={appViewerContext?.workspace ??
-					$workspaceStore}&express=true"
-			/>
+			{#await import('./AppConnectLightweightResourcePicker.svelte')}
+				<Loader2 class="animate-spin" />
+			{:then Module}
+				<Module.default
+					workspace={appViewerContext?.workspace ?? $workspaceStore}
+					{resourceType}
+					express={true}
+				/>
+			{/await}
 		{/key}
 	{/if}
 {:else}
@@ -105,12 +90,31 @@
 			tooltip="Resources represent connections to third party systems. Learn more on how to integrate external APIs."
 			documentationLink="https://www.windmill.dev/docs/integrations/integrations_on_windmill"
 		>
-			<iframe
+			{#await import('./AppConnectLightweightResourcePicker.svelte')}
+				<Loader2 class="animate-spin" />
+			{:then Module}
+				<Module.default
+					workspace={appViewerContext?.workspace ?? $workspaceStore}
+					{resourceType}
+					express={false}
+					on:error={(e) => {
+						sendUserToast(e.detail, true)
+					}}
+					on:refresh={(e) => {
+						value = e.detail
+						valueSelect = { value, label: value }
+						drawer?.closeDrawer?.()
+						open = false
+					}}
+				/>
+			{/await}
+
+			<!-- <iframe
 				title="App connection"
 				class="w-full h-full"
 				src="{base}/embed_connect?resource_type={resourceType}&workspace={appViewerContext?.workspace ??
 					$workspaceStore}&express=false"
-			/>
+			/> -->
 		</DrawerContent>
 	</Drawer>
 {/if}
@@ -142,13 +146,11 @@
 			<Button
 				{disabled}
 				color="light"
-				variant="border"
-				size="xs"
+				variant="contained"
+				btnClasses="w-8 px-0.5 py-1.5"
+				size="sm"
 				on:click={() => {
 					open = true
-					window.removeEventListener('message', processEvent)
-					window.addEventListener('message', processEvent)
-
 					drawer?.openDrawer?.()
 				}}
 				startIcon={{ icon: Plus }}
diff --git a/frontend/src/lib/components/ManualPopover.svelte b/frontend/src/lib/components/ManualPopover.svelte
index 084c706684..ddeadf79cc 100644
--- a/frontend/src/lib/components/ManualPopover.svelte
+++ b/frontend/src/lib/components/ManualPopover.svelte
@@ -27,7 +27,7 @@
 	<slot />
 </fragment>
 {#if showTooltip}
-	<Portal>
+	<Portal name="manual-popover">
 		<div
 			use:popperContent
 			class={twMerge('z-[901] rounded-lg shadow-md border p-4 bg-surface', $$props.class)}
diff --git a/frontend/src/lib/components/ObjectResourceInput.svelte b/frontend/src/lib/components/ObjectResourceInput.svelte
index 305dd4d4dc..90320705e9 100644
--- a/frontend/src/lib/components/ObjectResourceInput.svelte
+++ b/frontend/src/lib/components/ObjectResourceInput.svelte
@@ -11,7 +11,6 @@
 	export let selectFirst = false
 	export let defaultValue: any
 	export let editor: SimpleEditor | undefined = undefined
-
 	function isString(value: any) {
 		return typeof value === 'string' || value instanceof String
 	}
@@ -19,7 +18,7 @@
 	export let path: string = ''
 
 	function resourceToValue() {
-		if (path) {
+		if (path && path != '') {
 			value = `$res:${path}`
 		} else {
 			value = undefined
@@ -50,8 +49,11 @@
 				path = e.detail
 				resourceToValue()
 			}}
+			on:clear
 			bind:value={path}
-			initialValue={defaultValue}
+			initialValue={typeof defaultValue == 'string' && defaultValue.startsWith('$res:')
+				? defaultValue.substr('$res:'.length)
+				: defaultValue}
 			resourceType={format.split('-').length > 1 ? format.substring('resource-'.length) : undefined}
 			{showSchemaExplorer}
 		/>
diff --git a/frontend/src/lib/components/Popover.svelte b/frontend/src/lib/components/Popover.svelte
index 7ba0460e31..c7fed6ce71 100644
--- a/frontend/src/lib/components/Popover.svelte
+++ b/frontend/src/lib/components/Popover.svelte
@@ -67,7 +67,7 @@
 	</button>
 {/if}
 {#if showTooltip && !disablePopup}
-	<Portal>
+	<Portal name="popover">
 		<!-- svelte-ignore a11y-no-static-element-interactions -->
 		<div
 			use:popperContent={popperOptions}
diff --git a/frontend/src/lib/components/Portal.svelte b/frontend/src/lib/components/Portal.svelte
index f4dcbc0aea..020a17b236 100644
--- a/frontend/src/lib/components/Portal.svelte
+++ b/frontend/src/lib/components/Portal.svelte
@@ -1,13 +1,8 @@
 <script context="module">
 	import { tick } from 'svelte'
 
-	/**
-	 * Usage: <div use:portal={'css selector'}> or <div use:portal={document.body}>
-	 *
-	 * @param {HTMLElement} el
-	 * @param {HTMLElement|string} target DOM Element or CSS Selector
-	 */
-	export function portal(el, target = 'body') {
+	export function portal(el, options) {
+		let { target, name } = options
 		let targetEl
 		async function update(newTarget) {
 			target = newTarget
@@ -32,6 +27,9 @@
 			if (!el.classList.contains('windmill-app')) {
 				el.classList.add('windmill-app')
 			}
+			if (name && !el.classList.contains(name)) {
+				el.classList.add(name)
+			}
 			targetEl.appendChild(el)
 			el.hidden = false
 		}
@@ -56,8 +54,9 @@
 	 * @type { HTMLElement|string}
 	 */
 	export let target = 'body'
+	export let name = undefined
 </script>
 
-<div use:portal={target} hidden>
+<div use:portal={{ target, name }} hidden>
 	<slot />
 </div>
diff --git a/frontend/src/lib/components/ResourceEditor.svelte b/frontend/src/lib/components/ResourceEditor.svelte
index 42c299267d..e6bd21e40b 100644
--- a/frontend/src/lib/components/ResourceEditor.svelte
+++ b/frontend/src/lib/components/ResourceEditor.svelte
@@ -86,7 +86,7 @@
 			sendUserToast(`Updated resource at ${path}`)
 			dispatch('refresh', path)
 		} else {
-			throw Error('Cannot edit undefined resourceToEdit')
+			throw Error('Cannot edit undefined resource')
 		}
 	}
 
@@ -231,11 +231,10 @@
 				<Skeleton layout={[[4]]} />
 			{:else if !viewJsonSchema && resourceSchema && resourceSchema?.properties}
 				{#if resourceTypeInfo?.format_extension}
-						<h5 class="mt-4 inline-flex items-center gap-4 pb-2">
-							File content ({resourceTypeInfo.format_extension})
-						</h5>
+					<h5 class="mt-4 inline-flex items-center gap-4 pb-2">
+						File content ({resourceTypeInfo.format_extension})
+					</h5>
 					<div class="h-full w-full border p-1 rounded">
-
 						<SimpleEditor
 							autoHeight
 							class="editor"
diff --git a/frontend/src/lib/components/ResourcePicker.svelte b/frontend/src/lib/components/ResourcePicker.svelte
index a3234f37b8..c783d56192 100644
--- a/frontend/src/lib/components/ResourcePicker.svelte
+++ b/frontend/src/lib/components/ResourcePicker.svelte
@@ -116,7 +116,7 @@
 />
 
 <div class="flex flex-col w-full items-start">
-	<div class="flex flex-row gap-x-1 w-full items-center">
+	<div class="flex flex-row w-full items-center">
 		{#if collection?.length > 0}
 			<Select
 				{disabled}
@@ -128,9 +128,11 @@
 					valueSelect = e.detail
 				}}
 				on:clear={() => {
+					initialValue = undefined
 					value = undefined
 					valueType = undefined
 					valueSelect = undefined
+					dispatch('clear')
 				}}
 				items={collection}
 				class="text-clip grow min-w-0"
@@ -143,14 +145,15 @@
 		{:else if !loading}
 			<div class="text-2xs text-tertiary mr-2">0 found</div>
 		{/if}
-
 		{#if !loading}
+			<div class="mx-0.5" />
 			{#if value && value != ''}
 				<Button
 					{disabled}
 					color="light"
-					variant="border"
-					size="xs"
+					variant="contained"
+					size="sm"
+					btnClasses="w-8 px-0.5 py-1.5"
 					on:click={() => resourceEditor?.initEdit?.(value ?? '')}
 					startIcon={{ icon: Pen }}
 					iconOnly
@@ -162,8 +165,9 @@
 					<Button
 						{disabled}
 						color="light"
-						variant="border"
-						size="xs"
+						variant="contained"
+						size="sm"
+						btnClasses="w-8 px-0.5 py-1.5"
 						on:click={() => appConnect?.open?.(rt)}
 						startIcon={{ icon: Plus }}>{rt}</Button
 					>
@@ -172,8 +176,9 @@
 				<Button
 					{disabled}
 					color="light"
-					variant="border"
-					size="xs"
+					variant="contained"
+					size="sm"
+					btnClasses="w-8 px-0.5 py-1.5"
 					on:click={() => appConnect?.open?.(resourceType, expressOAuthSetup)}
 					startIcon={{ icon: Plus }}
 					iconOnly={collection?.length > 0}
@@ -185,9 +190,10 @@
 		{/if}
 
 		<Button
-			variant="border"
+			variant="contained"
 			color="light"
-			size="xs"
+			btnClasses="w-8 px-0.5 py-1.5"
+			size="sm"
 			on:click={() => {
 				loadResources(resourceType)
 			}}
diff --git a/frontend/src/lib/components/RunForm.svelte b/frontend/src/lib/components/RunForm.svelte
index 6a759b762d..7c605b43e2 100644
--- a/frontend/src/lib/components/RunForm.svelte
+++ b/frontend/src/lib/components/RunForm.svelte
@@ -107,7 +107,7 @@
 						<div class="flex items-center gap-2">
 							<span class="text-sm text-tertiary">
 								{#if runnable}
-									Edited <TimeAgo withDate agoOnlyIfRecent date={runnable.created_at || ''} /> by {runnable.created_by ||
+									Edited <TimeAgo agoOnlyIfRecent date={runnable.created_at || ''} /> by {runnable.created_by ||
 										'unknown'}
 								{/if}
 							</span>
diff --git a/frontend/src/lib/components/SavedInputs.svelte b/frontend/src/lib/components/SavedInputs.svelte
index 33409d7d9c..09ccc321ec 100644
--- a/frontend/src/lib/components/SavedInputs.svelte
+++ b/frontend/src/lib/components/SavedInputs.svelte
@@ -364,7 +364,7 @@
 									<div
 										class="whitespace-nowrap col-span-3 !text-tertiary !text-2xs overflow-hidden text-ellipsis flex-shrink text-center"
 									>
-										<TimeAgo date={i.started_at ?? ''} />
+										<TimeAgo noDate date={i.started_at ?? ''} />
 									</div>
 									<div class="col-span-2">
 										<a
@@ -425,7 +425,7 @@
 									<div
 										class="whitespace-nowrap col-span-2 !text-tertiary !text-2xs overflow-hidden text-ellipsis flex-shrink text-center"
 									>
-										<TimeAgo date={i.created_at ?? ''} />
+										<TimeAgo noDate date={i.created_at ?? ''} />
 									</div>
 									<div class="col-span-1">
 										<a
diff --git a/frontend/src/lib/components/ScriptVersionHistory.svelte b/frontend/src/lib/components/ScriptVersionHistory.svelte
index 584ea95596..7d66e7213d 100644
--- a/frontend/src/lib/components/ScriptVersionHistory.svelte
+++ b/frontend/src/lib/components/ScriptVersionHistory.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
-	import PanelSection from './apps/editor/settingsPanel/common/PanelSection.svelte'
 	import { classNames, emptyString } from '$lib/utils'
 	import { ScriptService, type ScriptHistory } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
@@ -63,70 +62,66 @@
 
 <Splitpanes class="!overflow-visible">
 	<Pane size={20}>
-		<PanelSection title="Past Versions">
-			<div class="flex flex-col gap-2 w-full">
-				{#if !loading}
-					{#if versions && versions.length > 0}
-						<div class="flex gap-2 flex-col">
-							{#each versions ?? [] as version, versionIndex}
-								<!-- svelte-ignore a11y-click-events-have-key-events -->
-								<!-- svelte-ignore a11y-no-static-element-interactions -->
-								<div
-									class={classNames(
-										'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer ',
-										selectedVersion?.script_hash == version.script_hash
-											? 'bg-surface-selected'
-											: '',
-										'hover:bg-surface-hover'
-									)}
-									on:click={() => {
-										selectedVersion = version
-										selectedVersionIndex = versionIndex
+		<div class="flex flex-col gap-2 px-2 pt-2 w-full">
+			{#if !loading}
+				{#if versions && versions.length > 0}
+					<div class="flex gap-2 flex-col">
+						{#each versions ?? [] as version, versionIndex}
+							<!-- svelte-ignore a11y-click-events-have-key-events -->
+							<!-- svelte-ignore a11y-no-static-element-interactions -->
+							<div
+								class={classNames(
+									'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer ',
+									selectedVersion?.script_hash == version.script_hash ? 'bg-surface-selected' : '',
+									'hover:bg-surface-hover'
+								)}
+								on:click={() => {
+									selectedVersion = version
+									selectedVersionIndex = versionIndex
 
-										if (showDiff && versions && selectedVersionIndex === versions.length - 1) {
-											showDiff = false
-										}
+									if (showDiff && versions && selectedVersionIndex === versions.length - 1) {
+										showDiff = false
+									}
 
-										const availableVersions = versions?.slice(selectedVersionIndex + 1)
+									const availableVersions = versions?.slice(selectedVersionIndex + 1)
 
-										if (
-											previousHash &&
-											!availableVersions?.find((v) => v.script_hash === previousHash)
-										) {
-											previousHash = availableVersions?.[0]?.script_hash
-										}
+									if (
+										previousHash &&
+										!availableVersions?.find((v) => v.script_hash === previousHash)
+									) {
+										previousHash = availableVersions?.[0]?.script_hash
+									}
 
-										deploymentMsgUpdate = undefined
-										deploymentMsgUpdateMode = false
-									}}
-								>
-									<span class="text-xs truncate">
-										{#if emptyString(version.deployment_msg)}Version {version.script_hash}{:else}{version.deployment_msg}{/if}
-									</span>
-									{#if openDetails}
-										<Button
-											on:click={() => {
-												dispatch('openDetails', { version: version.script_hash })
-											}}
-											class="ml-2 inline-flex gap-1 text-xs items-center"
-											size="xs"
-											color="light"
-											variant="border"
-										>
-											Run page<ExternalLink size={14} />
-										</Button>
-									{/if}
-								</div>
-							{/each}
-						</div>
-					{:else}
-						<div class="text-sm text-tertiary">No items</div>
-					{/if}
+									deploymentMsgUpdate = undefined
+									deploymentMsgUpdateMode = false
+								}}
+							>
+								<span class="text-xs truncate">
+									{#if emptyString(version.deployment_msg)}Version {version.script_hash}{:else}{version.deployment_msg}{/if}
+								</span>
+								{#if openDetails}
+									<Button
+										on:click={() => {
+											dispatch('openDetails', { version: version.script_hash })
+										}}
+										class="ml-2 inline-flex gap-1 text-xs items-center"
+										size="xs"
+										color="light"
+										variant="border"
+									>
+										Run page<ExternalLink size={14} />
+									</Button>
+								{/if}
+							</div>
+						{/each}
+					</div>
 				{:else}
-					<Skeleton layout={[[40], [40], [40], [40], [40]]} />
+					<div class="text-sm text-tertiary">No items</div>
 				{/if}
-			</div>
-		</PanelSection>
+			{:else}
+				<Skeleton layout={[[40], [40], [40], [40], [40]]} />
+			{/if}
+		</div>
 	</Pane>
 	<Pane size={80}>
 		<div class="h-full w-full overflow-auto">
diff --git a/frontend/src/lib/components/TimeAgo.svelte b/frontend/src/lib/components/TimeAgo.svelte
index c89f410121..059bc3fddf 100644
--- a/frontend/src/lib/components/TimeAgo.svelte
+++ b/frontend/src/lib/components/TimeAgo.svelte
@@ -4,8 +4,8 @@
 	import { onDestroy, onMount } from 'svelte'
 
 	export let date: string
-	export let withDate: boolean = false
 	export let agoOnlyIfRecent: boolean = false
+	export let noDate = false
 
 	let computedTimeAgo: string | undefined = undefined
 
@@ -63,21 +63,20 @@
 			let dAgo = daysAgo(date)
 			if (dAgo == 0) {
 				return `yesterday at ${date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`
-			} else if (dAgo > 7 && withDate) {
+			} else if (dAgo > 7 && !noDate) {
 				return `${dAgo + 1} days ago at ${date.toLocaleTimeString([], {
 					hour: '2-digit',
 					minute: '2-digit'
 				})}`
 			} else {
-				return !withDate ? displayDate(dateString, false, withDate) : ''
+				return displayDate(dateString, false, !noDate)
 			}
 		}
 	}
 </script>
 
-{#if withDate}
-	{displayDate(date)}
-{/if}
 {#if computedTimeAgo && (!agoOnlyIfRecent || isRecent)}
 	{computedTimeAgo}
+{:else}
+	{displayDate(date)}
 {/if}
diff --git a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
index b05d8e3d6e..ce9cd67c36 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
@@ -244,7 +244,7 @@
 </RunnableWrapper>
 
 {#if resolvedConfig?.confirmationModal?.selected === 'confirmationModal'}
-	<Portal target="#app-editor-top-level-drawer">
+	<Portal name="app-button" target="#app-editor-top-level-drawer">
 		<ConfirmationModal
 			open={Boolean(confirmedCallback)}
 			title={resolvedConfig?.confirmationModal?.configuration?.confirmationModal?.title ?? ''}
diff --git a/frontend/src/lib/components/apps/components/display/dbtable/AppDbExplorer.svelte b/frontend/src/lib/components/apps/components/display/dbtable/AppDbExplorer.svelte
index 1bd13f6d7f..3456d5a0e0 100644
--- a/frontend/src/lib/components/apps/components/display/dbtable/AppDbExplorer.svelte
+++ b/frontend/src/lib/components/apps/components/display/dbtable/AppDbExplorer.svelte
@@ -695,7 +695,7 @@
 		{/if}
 	</div>
 </RunnableWrapper>
-<Portal>
+<Portal name="db-explorer">
 	<Drawer bind:this={insertDrawer} size="800px">
 		<DrawerContent title="Insert row" on:close={insertDrawer.closeDrawer}>
 			<svelte:fragment slot="actions">
diff --git a/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte b/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte
index 7e20df7975..7b75d6391e 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte
@@ -186,7 +186,7 @@
 					{option}
 				</div>
 			</MultiSelect>
-			<Portal>
+			<Portal name="app-multiselect">
 				<div use:floatingContent class="z5000" hidden={!open}>
 					<!-- svelte-ignore a11y-no-static-element-interactions -->
 					<!-- svelte-ignore a11y-click-events-have-key-events -->
diff --git a/frontend/src/lib/components/apps/components/inputs/AppMultiSelectV2.svelte b/frontend/src/lib/components/apps/components/inputs/AppMultiSelectV2.svelte
index 717fa0aa6f..261fea0317 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppMultiSelectV2.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppMultiSelectV2.svelte
@@ -184,7 +184,7 @@
 					{option}
 				</div>
 			</MultiSelect>
-			<Portal>
+			<Portal name="app-multiselect-v2">
 				<div use:floatingContent class="z5000" hidden={!open}>
 					<!-- svelte-ignore a11y-click-events-have-key-events -->
 					<!-- svelte-ignore a11y-no-static-element-interactions -->
diff --git a/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte b/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte
index af9688cdf1..e5e73536d0 100644
--- a/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte
@@ -113,7 +113,7 @@
 	</AlignWrapper>
 </div>
 
-<Portal target="#app-editor-top-level-drawer">
+<Portal target="#app-editor-top-level-drawer" name="app-drawer">
 	<Drawer
 		let:open
 		bind:this={appDrawer}
diff --git a/frontend/src/lib/components/apps/components/layout/AppModal.svelte b/frontend/src/lib/components/apps/components/layout/AppModal.svelte
index 6c27b56709..1a4bd62cce 100644
--- a/frontend/src/lib/components/apps/components/layout/AppModal.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppModal.svelte
@@ -145,7 +145,7 @@
 		</AlignWrapper>
 	</div>
 {/if}
-<Portal target="#app-editor-top-level-drawer">
+<Portal target="#app-editor-top-level-drawer" name="app-modal">
 	<Disposable
 		{id}
 		let:handleClickAway
diff --git a/frontend/src/lib/components/apps/editor/GridEditorMenu.svelte b/frontend/src/lib/components/apps/editor/GridEditorMenu.svelte
index be91a3a6a9..9b9a5f66f2 100644
--- a/frontend/src/lib/components/apps/editor/GridEditorMenu.svelte
+++ b/frontend/src/lib/components/apps/editor/GridEditorMenu.svelte
@@ -167,7 +167,7 @@
 	<slot />
 
 	{#if contextMenuVisible}
-		<Portal>
+		<Portal name="grid-editor">
 			<div style="position: fixed; top: {menuY}px; left: {menuX}px; z-index:6000;">
 				<div class="rounded-md bg-surface border shadow-md divide-y w-64">
 					<div class="p-1" use:clickOutside={false}>
diff --git a/frontend/src/lib/components/apps/svelte-select/lib/ConditionalPortal.svelte b/frontend/src/lib/components/apps/svelte-select/lib/ConditionalPortal.svelte
index 85b998719d..f5086874c4 100644
--- a/frontend/src/lib/components/apps/svelte-select/lib/ConditionalPortal.svelte
+++ b/frontend/src/lib/components/apps/svelte-select/lib/ConditionalPortal.svelte
@@ -12,7 +12,7 @@
 </script>
 
 {#if condition}
-	<Portal {target}><slot /></Portal>
+	<Portal name="conditional-portal-select" {target}><slot /></Portal>
 {:else}
 	<slot />
 {/if}
diff --git a/frontend/src/lib/components/apps/svelte-select/lib/ConditionalPortalGlobal.svelte b/frontend/src/lib/components/apps/svelte-select/lib/ConditionalPortalGlobal.svelte
index c0f18c32bf..44d2beebe3 100644
--- a/frontend/src/lib/components/apps/svelte-select/lib/ConditionalPortalGlobal.svelte
+++ b/frontend/src/lib/components/apps/svelte-select/lib/ConditionalPortalGlobal.svelte
@@ -5,7 +5,7 @@
 </script>
 
 {#if condition}
-	<Portal><slot /></Portal>
+	<Portal name="conditional-portal-global"><slot /></Portal>
 {:else}
 	<slot />
 {/if}
diff --git a/frontend/src/lib/components/common/button/ButtonDropdown.svelte b/frontend/src/lib/components/common/button/ButtonDropdown.svelte
index d2c5408ad5..b617c04323 100644
--- a/frontend/src/lib/components/common/button/ButtonDropdown.svelte
+++ b/frontend/src/lib/components/common/button/ButtonDropdown.svelte
@@ -41,7 +41,7 @@
 		</MenuButton>
 	</span>
 
-	<Portal {target}>
+	<Portal name="button-dropdown" {target}>
 		<div use:popperContent={popperOptions} class="z-[6000]">
 			<Transition
 				show={open}
diff --git a/frontend/src/lib/components/common/drawer/ConditionalPortal.svelte b/frontend/src/lib/components/common/drawer/ConditionalPortal.svelte
index 2fecd242be..50cb2f2d8b 100644
--- a/frontend/src/lib/components/common/drawer/ConditionalPortal.svelte
+++ b/frontend/src/lib/components/common/drawer/ConditionalPortal.svelte
@@ -6,7 +6,7 @@
 </script>
 
 {#if condition}
-	<Portal {target}><slot /></Portal>
+	<Portal name="conditional-portal" {target}><slot /></Portal>
 {:else}
 	<slot />
 {/if}
diff --git a/frontend/src/lib/components/common/menu/MenuV2.svelte b/frontend/src/lib/components/common/menu/MenuV2.svelte
index 416a88d29e..6354ed4cb1 100644
--- a/frontend/src/lib/components/common/menu/MenuV2.svelte
+++ b/frontend/src/lib/components/common/menu/MenuV2.svelte
@@ -25,7 +25,7 @@
 			<slot name="trigger" />
 		</MenuButton>
 	</div>
-	<Portal>
+	<Portal name="menu-v2">
 		<div use:floatingContent class="z-[6000]">
 			<Transition
 				{open}
diff --git a/frontend/src/lib/components/common/modal/AlwaysMountedModal.svelte b/frontend/src/lib/components/common/modal/AlwaysMountedModal.svelte
index ddcfa453a6..8c14d3b997 100644
--- a/frontend/src/lib/components/common/modal/AlwaysMountedModal.svelte
+++ b/frontend/src/lib/components/common/modal/AlwaysMountedModal.svelte
@@ -24,7 +24,7 @@
 	}
 </script>
 
-<Portal target="#app-editor-top-level-drawer">
+<Portal name="always-mounted" target="#app-editor-top-level-drawer">
 	<div
 		class={twMerge(
 			`${
diff --git a/frontend/src/lib/components/common/popup/PopupV2.svelte b/frontend/src/lib/components/common/popup/PopupV2.svelte
index a70bc1c2be..b5ae79f3d8 100644
--- a/frontend/src/lib/components/common/popup/PopupV2.svelte
+++ b/frontend/src/lib/components/common/popup/PopupV2.svelte
@@ -40,7 +40,7 @@
 	<slot {pointerup} {pointerdown} name="button" />
 </div>
 
-<Portal {target}>
+<Portal name="popup-v2" {target}>
 	{#if open}
 		<div
 			class="border rounded-lg shadow-lg bg-surface z5000"
diff --git a/frontend/src/lib/components/details/Menu.svelte b/frontend/src/lib/components/details/Menu.svelte
index e875d6bf7e..baa8999974 100644
--- a/frontend/src/lib/components/details/Menu.svelte
+++ b/frontend/src/lib/components/details/Menu.svelte
@@ -38,7 +38,7 @@
 		</MenuButton>
 	</span>
 
-	<Portal>
+	<Portal name="menu">
 		<div use:popperContent={popperOptions} class="z-[2000]">
 			<Transition
 				show={open}
diff --git a/frontend/src/lib/components/flows/FlowEditor.svelte b/frontend/src/lib/components/flows/FlowEditor.svelte
index 0b7414804c..ef951a2910 100644
--- a/frontend/src/lib/components/flows/FlowEditor.svelte
+++ b/frontend/src/lib/components/flows/FlowEditor.svelte
@@ -16,6 +16,7 @@
 	export let disableTutorials = false
 	export let disableAi = false
 	export let disableSettings = false
+	export let disabledFlowInputs = false
 	export let smallErrorHandler = false
 
 	let size = 50
@@ -61,7 +62,7 @@
 					</div>
 				</div>
 			{:else}
-				<FlowEditorPanel enableAi={!disableAi} />
+				<FlowEditorPanel {disabledFlowInputs} enableAi={!disableAi} />
 			{/if}
 		</Pane>
 	</Splitpanes>
diff --git a/frontend/src/lib/components/flows/FlowHistory.svelte b/frontend/src/lib/components/flows/FlowHistory.svelte
index e98d3a2778..eadc9430f9 100644
--- a/frontend/src/lib/components/flows/FlowHistory.svelte
+++ b/frontend/src/lib/components/flows/FlowHistory.svelte
@@ -1,88 +1,18 @@
 <script lang="ts">
-	import { Pane, Splitpanes } from 'svelte-splitpanes'
-	import PanelSection from '../apps/editor/settingsPanel/common/PanelSection.svelte'
-	import { classNames, displayDate, emptyString, sendUserToast } from '$lib/utils'
-	import { type Flow, FlowService, type FlowVersion } from '$lib/gen'
-	import { workspaceStore } from '$lib/stores'
-	import { Skeleton } from '$lib/components/common'
+	import { createEventDispatcher } from 'svelte'
 	import Drawer from '../common/drawer/Drawer.svelte'
 	import DrawerContent from '../common/drawer/DrawerContent.svelte'
-	import Button from '../common/button/Button.svelte'
-	import { ArrowRight, Loader2, Pencil, X } from 'lucide-svelte'
-	import { createEventDispatcher } from 'svelte'
+
+	import FlowHistoryInner from './FlowHistoryInner.svelte'
 
 	export let path: string
 	let drawer: Drawer
-	let loading: boolean = false
-
-	let versions: FlowVersion[] = []
-
-	let selectedVersion: FlowVersion | undefined = undefined
-	let selected: Flow | undefined = undefined
-	let deploymentMsgUpdateMode = false
-	let deploymentMsgUpdate: string | undefined = undefined
 
 	export function open() {
-		loadVersions()
 		drawer.openDrawer()
 	}
 
-	async function loadFlow(version: number) {
-		selected = await FlowService.getFlowVersion({
-			workspace: $workspaceStore!,
-			version,
-			path
-		})
-	}
-
-	async function loadVersions() {
-		loading = true
-		versions = await FlowService.getFlowHistory({
-			workspace: $workspaceStore!,
-			path: path
-		})
-		loading = false
-	}
-
-	async function updateDeploymentMsg(version: number | undefined) {
-		if (
-			selectedVersion === undefined ||
-			version === undefined ||
-			emptyString(deploymentMsgUpdate)
-		) {
-			return
-		}
-		await FlowService.updateFlowHistory({
-			workspace: $workspaceStore!,
-			version,
-			path,
-			requestBody: {
-				deployment_msg: deploymentMsgUpdate!
-			}
-		})
-		selectedVersion.deployment_msg = deploymentMsgUpdate
-		deploymentMsgUpdateMode = false
-		loadVersions()
-	}
-
 	const dispatch = createEventDispatcher()
-
-	async function restoreVersion(flow: Flow | undefined) {
-		if (!flow) return
-		await FlowService.updateFlow({
-			workspace: $workspaceStore!,
-			requestBody: {
-				...flow,
-				path
-			},
-			path
-		})
-		dispatch('historyRestore')
-		drawer?.closeDrawer()
-		sendUserToast('Flow restored from previous deployment')
-	}
-
-	$: selectedVersion !== undefined && loadFlow(selectedVersion.id)
 </script>
 
 <Drawer bind:this={drawer} size="1200px">
@@ -91,136 +21,14 @@
 			drawer?.closeDrawer()
 		}}
 		noPadding
+		title="Deployment History"
 	>
-		<Splitpanes class="!overflow-visible">
-			<Pane size={20}>
-				<PanelSection title="Past Deployments">
-					<div class="flex flex-col gap-2 w-full">
-						{#if !loading}
-							{#if versions.length > 0}
-								<div class="flex gap-2 flex-col">
-									{#each versions ?? [] as version}
-										<!-- svelte-ignore a11y-click-events-have-key-events -->
-										<div
-											class={classNames(
-												'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-blue-50 hover:text-blue-400',
-												selectedVersion?.id == version.id ? 'bg-blue-100 text-blue-600' : ''
-											)}
-											role="button"
-											tabindex="0"
-											on:click={() => {
-												selectedVersion = version
-											}}
-										>
-											<span class="text-xs truncate">
-												{#if emptyString(version.deployment_msg)}Version {version.id}{:else}{version.deployment_msg}{/if}
-											</span>
-										</div>
-									{/each}
-								</div>
-							{:else}
-								<div class="text-sm text-tertiary">No items</div>
-							{/if}
-						{:else}
-							<Skeleton layout={[[40], [40], [40], [40], [40]]} />
-						{/if}
-					</div>
-				</PanelSection>
-			</Pane>
-			<Pane size={80}>
-				<div class="h-full w-full overflow-auto">
-					{#if selectedVersion}
-						{#if selected}
-							<div class="px-2 flex flex-col gap-2">
-								<span class="flex flex-row text-sm p-1 text-tertiary">
-									{#if deploymentMsgUpdateMode}
-										<div class="flex w-full">
-											<input
-												type="text"
-												bind:value={deploymentMsgUpdate}
-												class="!w-auto grow"
-												on:click|stopPropagation={() => {}}
-												on:keydown|stopPropagation
-												on:keypress|stopPropagation={({ key }) => {
-													if (key === 'Enter') updateDeploymentMsg(selectedVersion?.id)
-												}}
-											/>
-											<Button
-												size="xs"
-												color="blue"
-												buttonType="button"
-												btnClasses="!p-1 !w-[34px] !ml-1"
-												aria-label="Save Deployment Message"
-												on:click={() => {
-													updateDeploymentMsg(selectedVersion?.id)
-												}}
-											>
-												<ArrowRight size={14} />
-											</Button>
-											<Button
-												size="xs"
-												color="light"
-												buttonType="button"
-												btnClasses="!p-1 !w-[34px] !ml-1"
-												aria-label="Abort"
-												on:click={() => {
-													deploymentMsgUpdateMode = false
-													deploymentMsgUpdate = undefined
-												}}
-											>
-												<X size={14} />
-											</Button>
-										</div>
-									{:else}
-										{#if selectedVersion.deployment_msg}
-											{selectedVersion.deployment_msg}
-										{:else}
-											Deployed {displayDate(selected.edited_at)} by {selected.edited_by}
-										{/if}
-										<button
-											on:click={() => {
-												deploymentMsgUpdate = selectedVersion?.deployment_msg
-												deploymentMsgUpdateMode = true
-											}}
-											title="Update commit message"
-											class="flex items-center px-1 rounded-sm hover:text-primary text-secondary h-5"
-											aria-label="Update commit message"
-										>
-											<Pencil size={14} />
-										</button>
-									{/if}
-								</span>
-								<div class="flex p-1 gap-2">
-									<Button
-										size="xs"
-										on:click={() =>
-											window.open(
-												`/flows/add?template_id=${selectedVersion?.id}&template=${path}`,
-												'_blank'
-											)}
-									>
-										Restore as fork
-									</Button>
-									<Button size="xs" on:click={() => restoreVersion(selected)}
-										>Redeploy with that version
-									</Button>
-								</div>
-								{#await import('$lib/components/FlowViewer.svelte')}
-									<Loader2 class="animate-spin" />
-								{:then Module}
-									<Module.default flow={selected} />
-								{/await}
-							</div>
-						{:else}
-							<Skeleton layout={[[40]]} />
-						{/if}
-					{:else}
-						<div class="text-sm p-2 text-tertiary"
-							>Select a deployment version to see its details</div
-						>
-					{/if}
-				</div>
-			</Pane>
-		</Splitpanes>
+		<FlowHistoryInner
+			on:historyRestore={() => {
+				drawer.closeDrawer()
+				dispatch('historyRestore')
+			}}
+			{path}
+		/>
 	</DrawerContent>
 </Drawer>
diff --git a/frontend/src/lib/components/flows/FlowHistoryInner.svelte b/frontend/src/lib/components/flows/FlowHistoryInner.svelte
new file mode 100644
index 0000000000..b2c79ed762
--- /dev/null
+++ b/frontend/src/lib/components/flows/FlowHistoryInner.svelte
@@ -0,0 +1,212 @@
+<script lang="ts">
+	import { Pane, Splitpanes } from 'svelte-splitpanes'
+	import { classNames, displayDate, emptyString, sendUserToast } from '$lib/utils'
+	import { type Flow, FlowService, type FlowVersion } from '$lib/gen'
+	import { workspaceStore } from '$lib/stores'
+	import { Skeleton } from '$lib/components/common'
+	import Button from '../common/button/Button.svelte'
+	import { ArrowRight, Loader2, Pencil, X } from 'lucide-svelte'
+	import { createEventDispatcher } from 'svelte'
+
+	export let path: string
+	let loading: boolean = false
+
+	let versions: FlowVersion[] = []
+
+	let selectedVersion: FlowVersion | undefined = undefined
+	let selected: Flow | undefined = undefined
+	let deploymentMsgUpdateMode = false
+	let deploymentMsgUpdate: string | undefined = undefined
+
+	async function loadFlow(version: number) {
+		selected = await FlowService.getFlowVersion({
+			workspace: $workspaceStore!,
+			version,
+			path
+		})
+	}
+
+	async function loadVersions() {
+		loading = true
+		versions = await FlowService.getFlowHistory({
+			workspace: $workspaceStore!,
+			path: path
+		})
+		loading = false
+	}
+
+	async function updateDeploymentMsg(version: number | undefined) {
+		if (
+			selectedVersion === undefined ||
+			version === undefined ||
+			emptyString(deploymentMsgUpdate)
+		) {
+			return
+		}
+		await FlowService.updateFlowHistory({
+			workspace: $workspaceStore!,
+			version,
+			path,
+			requestBody: {
+				deployment_msg: deploymentMsgUpdate!
+			}
+		})
+		selectedVersion.deployment_msg = deploymentMsgUpdate
+		deploymentMsgUpdateMode = false
+		loadVersions()
+	}
+
+	const dispatch = createEventDispatcher()
+
+	async function restoreVersion(flow: Flow | undefined) {
+		if (!flow) return
+		await FlowService.updateFlow({
+			workspace: $workspaceStore!,
+			requestBody: {
+				...flow,
+				path
+			},
+			path
+		})
+		dispatch('historyRestore')
+		sendUserToast('Flow restored from previous deployment')
+	}
+
+	loadVersions()
+
+	$: selectedVersion !== undefined && loadFlow(selectedVersion.id)
+</script>
+
+<Splitpanes class="!overflow-visible">
+	<Pane size={20}>
+		<div class="flex flex-col gap-2 w-full px-2 py-2">
+			{#if !loading}
+				{#if versions.length > 0}
+					<div class="flex gap-2 flex-col">
+						{#each versions ?? [] as version}
+							<!-- svelte-ignore a11y-click-events-have-key-events -->
+							<div
+								class={classNames(
+									'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-surface-hover hover:text-primary',
+									selectedVersion?.id == version.id ? 'bg-surface-selected text-primary' : ''
+								)}
+								role="button"
+								tabindex="0"
+								on:click={() => {
+									selectedVersion = version
+								}}
+							>
+								<span class="text-xs truncate">
+									{#if emptyString(version.deployment_msg)}Version {version.id}{:else}{version.deployment_msg}{/if}
+								</span>
+							</div>
+						{/each}
+					</div>
+				{:else}
+					<div class="text-sm text-tertiary">No items</div>
+				{/if}
+			{:else}
+				<Skeleton layout={[[40], [40], [40], [40], [40]]} />
+			{/if}
+		</div>
+	</Pane>
+	<Pane size={80}>
+		<div class="h-full w-full overflow-auto pt-2">
+			{#if selectedVersion}
+				{#if selected}
+					<div class="px-2 flex flex-col gap-2">
+						<div class="flex justify-between">
+							<span class="flex flex-row text-sm p-1 text-tertiary">
+								{#if deploymentMsgUpdateMode}
+									<div class="flex w-full">
+										<input
+											type="text"
+											bind:value={deploymentMsgUpdate}
+											class="!w-auto grow"
+											on:click|stopPropagation={() => {}}
+											on:keydown|stopPropagation
+											on:keypress|stopPropagation={({ key }) => {
+												if (key === 'Enter') updateDeploymentMsg(selectedVersion?.id)
+											}}
+										/>
+										<Button
+											size="xs"
+											color="blue"
+											buttonType="button"
+											btnClasses="!p-1 !w-[34px] !ml-1"
+											aria-label="Save Deployment Message"
+											on:click={() => {
+												updateDeploymentMsg(selectedVersion?.id)
+											}}
+										>
+											<ArrowRight size={14} />
+										</Button>
+										<Button
+											size="xs"
+											color="light"
+											buttonType="button"
+											btnClasses="!p-1 !w-[34px] !ml-1"
+											aria-label="Abort"
+											on:click={() => {
+												deploymentMsgUpdateMode = false
+												deploymentMsgUpdate = undefined
+											}}
+										>
+											<X size={14} />
+										</Button>
+									</div>
+								{:else}
+									{#if selectedVersion.deployment_msg}
+										{selectedVersion.deployment_msg}
+									{:else}
+										Deployed {displayDate(selected.edited_at)} by {selected.edited_by}
+									{/if}
+									<button
+										on:click={() => {
+											deploymentMsgUpdate = selectedVersion?.deployment_msg
+											deploymentMsgUpdateMode = true
+										}}
+										title="Update commit message"
+										class="flex items-center px-1 rounded-sm hover:text-primary text-secondary h-5"
+										aria-label="Update commit message"
+									>
+										<Pencil size={14} />
+									</button>
+								{/if}
+							</span>
+							<div class="flex p-1 gap-2">
+								<div class="flex">
+									<Button
+										size="sm"
+										color="dark"
+										on:click={() =>
+											window.open(
+												`/flows/add?template_id=${selectedVersion?.id}&template=${path}`,
+												'_blank'
+											)}
+									>
+										Restore as fork
+									</Button>
+								</div>
+								<div class="flex">
+									<Button size="sm" color="dark" on:click={() => restoreVersion(selected)}
+										>Redeploy with that version
+									</Button>
+								</div>
+							</div>
+						</div>
+						{#await import('$lib/components/FlowViewer.svelte')}
+							<Loader2 class="animate-spin" />
+						{:then Module}
+							<Module.default flow={selected} />
+						{/await}
+					</div>
+				{:else}
+					<Skeleton layout={[[40]]} />
+				{/if}
+			{:else}
+				<div class="text-sm p-2 text-tertiary">Select a deployment version to see its details</div>
+			{/if}
+		</div>
+	</Pane>
+</Splitpanes>
diff --git a/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte b/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
index 79a283a982..d7a870ea05 100644
--- a/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
+++ b/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
@@ -14,6 +14,7 @@
 
 	export let noEditor = false
 	export let enableAi = false
+	export let disabledFlowInputs = false
 
 	const { selectedId, flowStore, flowStateStore, flowInputsStore } =
 		getContext<FlowEditorContext>('FlowEditorContext')
@@ -57,7 +58,7 @@
 {#if $selectedId?.startsWith('settings')}
 	<FlowSettings {noEditor} />
 {:else if $selectedId === 'Input'}
-	<FlowInput {noEditor} />
+	<FlowInput {noEditor} disabled={disabledFlowInputs} />
 {:else if $selectedId === 'Result'}
 	<p class="p-4 text-secondary">Nothing to show about the result node. Happy flow building!</p>
 {:else if $selectedId === 'constants'}
diff --git a/frontend/src/lib/components/flows/content/FlowInput.svelte b/frontend/src/lib/components/flows/content/FlowInput.svelte
index 3e485d5a9b..cb7ed9ad80 100644
--- a/frontend/src/lib/components/flows/content/FlowInput.svelte
+++ b/frontend/src/lib/components/flows/content/FlowInput.svelte
@@ -12,8 +12,10 @@
 	import SavedInputs from '$lib/components/SavedInputs.svelte'
 	import EditableSchemaForm from '$lib/components/EditableSchemaForm.svelte'
 	import AddProperty from '$lib/components/schema/AddProperty.svelte'
+	import FlowInputViewer from '$lib/components/FlowInputViewer.svelte'
 
 	export let noEditor: boolean
+	export let disabled: boolean
 
 	const { flowStore, flowStateStore, previewArgs, initialPath } =
 		getContext<FlowEditorContext>('FlowEditorContext')
@@ -42,67 +44,73 @@
 <CapturePayload bind:this={capturePayload} />
 
 <FlowCard {noEditor} title="Flow Input">
-	<div class="flex flex-row items-center gap-2 px-4 py-2 border-b">
-		<div>Copy input's schema from</div>
-		<Button
-			color="dark"
-			size="xs"
-			on:click={() => {
-				capturePayload.openDrawer()
-			}}
-		>
-			A request
-		</Button>
-		<Button
-			color="dark"
-			size="xs"
-			on:click={() => {
-				jsonPayload.openDrawer()
-			}}
-		>
-			A JSON
-		</Button>
-		<Button
-			color="dark"
-			size="xs"
-			on:click={() => {
-				inputLibraryDrawer.openDrawer()
-			}}
-		>
-			Past Runs/Input library
-		</Button>
-		<Button
-			color="dark"
-			size="xs"
-			disabled={$flowStore.value.modules.length === 0 ||
-				$flowStore.value.modules[0].value.type == 'identity'}
-			on:click={() => copyFirstStepSchema($flowStateStore, flowStore)}
-		>
-			First step's inputs
-		</Button>
-	</div>
-	<div class="p-4 border-b">
-		<AddProperty
-			bind:schema={$flowStore.schema}
-			bind:this={addProperty}
-			on:change={() => {
-				$flowStore = $flowStore
-			}}
-		/>
-	</div>
+	{#if !disabled}
+		<div class="flex flex-row items-center gap-2 px-4 py-2 border-b">
+			<div>Copy input's schema from</div>
+			<Button
+				color="dark"
+				size="xs"
+				on:click={() => {
+					capturePayload.openDrawer()
+				}}
+			>
+				A request
+			</Button>
+			<Button
+				color="dark"
+				size="xs"
+				on:click={() => {
+					jsonPayload.openDrawer()
+				}}
+			>
+				A JSON
+			</Button>
+			<Button
+				color="dark"
+				size="xs"
+				on:click={() => {
+					inputLibraryDrawer.openDrawer()
+				}}
+			>
+				Past Runs/Input library
+			</Button>
+			<Button
+				color="dark"
+				size="xs"
+				disabled={$flowStore.value.modules.length === 0 ||
+					$flowStore.value.modules[0].value.type == 'identity'}
+				on:click={() => copyFirstStepSchema($flowStateStore, flowStore)}
+			>
+				First step's inputs
+			</Button>
+		</div>
+		<div class="p-4 border-b">
+			<AddProperty
+				bind:schema={$flowStore.schema}
+				bind:this={addProperty}
+				on:change={() => {
+					$flowStore = $flowStore
+				}}
+			/>
+		</div>
 
-	<EditableSchemaForm
-		bind:schema={$flowStore.schema}
-		isFlowInput
-		on:edit={(e) => {
-			addProperty?.openDrawer(e.detail)
-		}}
-		on:delete={(e) => {
-			addProperty?.handleDeleteArgument([e.detail])
-		}}
-		offset={yOffset}
-		displayWebhookWarning
-	/>
+		<EditableSchemaForm
+			bind:schema={$flowStore.schema}
+			isFlowInput
+			on:edit={(e) => {
+				addProperty?.openDrawer(e.detail)
+			}}
+			on:delete={(e) => {
+				addProperty?.handleDeleteArgument([e.detail])
+			}}
+			offset={yOffset}
+			displayWebhookWarning
+		/>
+	{:else}
+		<div class="p-4 border-b">
+			<FlowInputViewer schema={$flowStore.schema} />
+		</div>
+	{/if}
 </FlowCard>
 
 <Drawer bind:this={jsonPayload} size="800px">
diff --git a/frontend/src/lib/components/flows/content/FlowModuleScript.svelte b/frontend/src/lib/components/flows/content/FlowModuleScript.svelte
index 452b8f3ae2..ab65558328 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleScript.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleScript.svelte
@@ -61,7 +61,7 @@
 
 <div class="flex flex-col flex-1 h-full overflow-auto p-2">
 	{#if showDate && date}
-		<span class="text-xs text-tertiary mb-4"><TimeAgo agoOnlyIfRecent withDate {date} /></span>
+		<span class="text-xs text-tertiary mb-4"><TimeAgo agoOnlyIfRecent {date} /></span>
 	{/if}
 	{#if notFound}
 		<div class="text-red-400">script not found at {path} in workspace {$workspaceStore}</div>
diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
index a8922d9417..00e098e9c2 100644
--- a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
+++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
@@ -256,7 +256,7 @@
 	}
 </script>
 
-<Portal>
+<Portal name="flow-module">
 	<ConfirmationModal
 		title="Confirm deleting step with dependents"
 		confirmationText="Delete step"
diff --git a/frontend/src/lib/components/icons/WindmillIcon.svelte b/frontend/src/lib/components/icons/WindmillIcon.svelte
index ea49d7cd6e..d360e145b4 100644
--- a/frontend/src/lib/components/icons/WindmillIcon.svelte
+++ b/frontend/src/lib/components/icons/WindmillIcon.svelte
@@ -1,114 +1,129 @@
 <script lang="ts">
+	import { customIcon } from './store'
+
 	export let height = '24px'
 	export let width = '24px'
 	export let white = false
 	export let spin: 'slow' | 'medium' | 'fast' | 'veryfast' | undefined = undefined
 </script>
 
-<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg
-	class={$$props.class}
-	class:animate-[spin_2s_linear_infinite]={spin === 'veryfast'}
-	class:animate-[spin_5s_linear_infinite]={spin === 'fast'}
-	class:animate-[spin_15s_linear_infinite]={spin === 'medium'}
-	class:animate-[spin_50s_linear_infinite]={spin === 'slow'}
-	version="1.1"
-	id="Calque_1"
-	xmlns="http://www.w3.org/2000/svg"
-	xmlns:xlink="http://www.w3.org/1999/xlink"
-	x="0px"
-	y="0px"
-	{width}
-	{height}
-	viewBox="0 0 256 256"
-	style="enable-background:new 0 0 256 256;"
-	xml:space="preserve"
->
-	<style type="text/css">
-		.st0 {
-			fill: #ffffff;
-		}
-		.st1 {
-			opacity: 0.4;
-			fill: #ffffff;
-		}
-		.st2 {
-			fill: #bcd4fc;
-		}
-		.st2-gray {
-			fill: #cccccc;
-		}
-		.st3 {
-			fill: #3b82f6;
-		}
-		.st4 {
-			fill: #b3b3b3;
-		}
-		.st5 {
-			fill: url(#SVGID_1_);
-		}
-		.st6 {
-			fill: url(#SVGID_00000021089067129159788970000008246765442136188072_);
-		}
-		.st7 {
-			fill: url(#SVGID_00000117639240116366130650000015074833605515028638_);
-		}
-		.st8 {
-			opacity: 0.4;
-			fill: url(#SVGID_00000101781798616409025840000016567063639337360777_);
-		}
-		.st9 {
-			opacity: 0.4;
-			fill: url(#SVGID_00000052086836598721292040000002033117744178971046_);
-		}
-		.st10 {
-			opacity: 0.4;
-			fill: url(#SVGID_00000159460939004760751800000002448009281983951536_);
-		}
-		.st11 {
-			opacity: 0.4;
-			fill: url(#SVGID_00000013177830667419993080000017721442101626521532_);
-		}
-		.st12 {
-			opacity: 0.4;
-			fill: url(#SVGID_00000152235521444854938490000006526001119318383285_);
-		}
-		.st13 {
-			opacity: 0.4;
-			fill: url(#SVGID_00000119823135212293698520000012774889010992664993_);
-		}
-	</style>
-	<g>
-		<polygon
-			class:st2={!white}
-			class:st2-gray={white}
-			points="134.78,14.22 114.31,48.21 101.33,69.75 158.22,69.75 177.97,36.95 191.67,14.22 	"
+{#if customIcon}
+	{#if white}
+		<img src={customIcon.white} alt="Windmill Custom icon" {width} {height} class={$$props.class} />
+	{:else}
+		<img
+			src={customIcon.normal}
+			alt="Windmill Custom icon"
+			{width}
+			{height}
+			class={$$props.class}
 		/>
-		<polygon
-			class:st3={!white}
-			class:st0={white}
-			points="227.55,69.75 186.61,69.75 101.33,69.75 129.78,119.02 158.16,119.02 228.61,119.02 256,119.02 	"
-		/>
-		<polygon
-			class:st3={!white}
-			class:st0={white}
-			points="136.93,132.47 116.46,167.93 73.82,241.78 130.71,241.78 144.9,217.2 180.13,156.18 193.82,132.46 	
+	{/if}
+{:else}
+	<svg
+		class={$$props.class}
+		class:animate-[spin_2s_linear_infinite]={spin === 'veryfast'}
+		class:animate-[spin_5s_linear_infinite]={spin === 'fast'}
+		class:animate-[spin_15s_linear_infinite]={spin === 'medium'}
+		class:animate-[spin_50s_linear_infinite]={spin === 'slow'}
+		version="1.1"
+		id="Calque_1"
+		xmlns="http://www.w3.org/2000/svg"
+		xmlns:xlink="http://www.w3.org/1999/xlink"
+		x="0px"
+		y="0px"
+		{width}
+		{height}
+		viewBox="0 0 256 256"
+		style="enable-background:new 0 0 256 256;"
+		xml:space="preserve"
+	>
+		<style type="text/css">
+			.st0 {
+				fill: #ffffff;
+			}
+			.st1 {
+				opacity: 0.4;
+				fill: #ffffff;
+			}
+			.st2 {
+				fill: #bcd4fc;
+			}
+			.st2-gray {
+				fill: #cccccc;
+			}
+			.st3 {
+				fill: #3b82f6;
+			}
+			.st4 {
+				fill: #b3b3b3;
+			}
+			.st5 {
+				fill: url(#SVGID_1_);
+			}
+			.st6 {
+				fill: url(#SVGID_00000021089067129159788970000008246765442136188072_);
+			}
+			.st7 {
+				fill: url(#SVGID_00000117639240116366130650000015074833605515028638_);
+			}
+			.st8 {
+				opacity: 0.4;
+				fill: url(#SVGID_00000101781798616409025840000016567063639337360777_);
+			}
+			.st9 {
+				opacity: 0.4;
+				fill: url(#SVGID_00000052086836598721292040000002033117744178971046_);
+			}
+			.st10 {
+				opacity: 0.4;
+				fill: url(#SVGID_00000159460939004760751800000002448009281983951536_);
+			}
+			.st11 {
+				opacity: 0.4;
+				fill: url(#SVGID_00000013177830667419993080000017721442101626521532_);
+			}
+			.st12 {
+				opacity: 0.4;
+				fill: url(#SVGID_00000152235521444854938490000006526001119318383285_);
+			}
+			.st13 {
+				opacity: 0.4;
+				fill: url(#SVGID_00000119823135212293698520000012774889010992664993_);
+			}
+		</style>
+		<g>
+			<polygon
+				class:st2={!white}
+				class:st2-gray={white}
+				points="134.78,14.22 114.31,48.21 101.33,69.75 158.22,69.75 177.97,36.95 191.67,14.22 	"
+			/>
+			<polygon
+				class:st3={!white}
+				class:st0={white}
+				points="227.55,69.75 186.61,69.75 101.33,69.75 129.78,119.02 158.16,119.02 228.61,119.02 256,119.02 	"
+			/>
+			<polygon
+				class:st3={!white}
+				class:st0={white}
+				points="136.93,132.47 116.46,167.93 73.82,241.78 130.71,241.78 144.9,217.2 180.13,156.18 193.82,132.46 	
 		"
-		/>
-		<polygon
-			class:st3={!white}
-			class:st0={white}
-			points="121.7,131.95 101.23,96.49 58.59,22.63 30.15,71.91 44.34,96.49 79.57,157.5 93.26,181.22 	"
-		/>
-		<polygon
-			class:st2={!white}
-			class:st2-gray={white}
-			points="64.81,131.95 25.15,131.21 0,130.74 28.44,180.01 66.73,180.72 93.26,181.21 	"
-		/>
-		<polygon
-			class:st2={!white}
-			class:st2-gray={white}
-			points="165.38,181.74 184.58,216.46 196.75,238.47 225.19,189.2 206.66,155.69 193.83,132.46 	"
-		/>
-	</g>
-</svg>
+			/>
+			<polygon
+				class:st3={!white}
+				class:st0={white}
+				points="121.7,131.95 101.23,96.49 58.59,22.63 30.15,71.91 44.34,96.49 79.57,157.5 93.26,181.22 	"
+			/>
+			<polygon
+				class:st2={!white}
+				class:st2-gray={white}
+				points="64.81,131.95 25.15,131.21 0,130.74 28.44,180.01 66.73,180.72 93.26,181.21 	"
+			/>
+			<polygon
+				class:st2={!white}
+				class:st2-gray={white}
+				points="165.38,181.74 184.58,216.46 196.75,238.47 225.19,189.2 206.66,155.69 193.83,132.46 	"
+			/>
+		</g>
+	</svg>
+{/if}
diff --git a/frontend/src/lib/components/icons/store.ts b/frontend/src/lib/components/icons/store.ts
new file mode 100644
index 0000000000..cbd03d5c96
--- /dev/null
+++ b/frontend/src/lib/components/icons/store.ts
@@ -0,0 +1 @@
+export let customIcon: { normal: string; white: string } | undefined = undefined
diff --git a/frontend/src/lib/components/multiselect/MultiSelectWrapper.svelte b/frontend/src/lib/components/multiselect/MultiSelectWrapper.svelte
index cd9c844464..d4c6e6e87c 100644
--- a/frontend/src/lib/components/multiselect/MultiSelectWrapper.svelte
+++ b/frontend/src/lib/components/multiselect/MultiSelectWrapper.svelte
@@ -80,7 +80,7 @@
 				</div>
 			</MultiSelect>
 		</div>
-		<Portal>
+		<Portal name="multi-select">
 			<div use:floatingContent class="z5000" hidden={!open}>
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<!-- svelte-ignore a11y-no-static-element-interactions -->
diff --git a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
index e99f106d3c..b0ed460636 100644
--- a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
+++ b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
@@ -63,7 +63,7 @@
 	$: fullyCollapsed = keys.length > 1 && collapsed
 </script>
 
-<Portal>
+<Portal name="object-viewer">
 	<S3FilePicker bind:this={s3FileViewer} readOnlyMode={true} />
 </Portal>
 
diff --git a/frontend/src/lib/components/runs/RunRow.svelte b/frontend/src/lib/components/runs/RunRow.svelte
index a45d41f59a..54c45d1f72 100644
--- a/frontend/src/lib/components/runs/RunRow.svelte
+++ b/frontend/src/lib/components/runs/RunRow.svelte
@@ -44,7 +44,7 @@
 	}
 </script>
 
-<Portal>
+<Portal name="run-row">
 	<ScheduleEditor on:update={() => goto('/schedules')} bind:this={scheduleEditor} />
 </Portal>
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -105,7 +105,7 @@
 		<div class="flex flex-row items-center gap-1 text-gray-500 dark:text-gray-300 text-2xs">
 			{#if job}
 				{#if 'started_at' in job && job.started_at}
-					Started <TimeAgo withDate agoOnlyIfRecent date={job.started_at ?? ''} />
+					Started <TimeAgo agoOnlyIfRecent date={job.started_at ?? ''} />
 					{#if job && 'duration_ms' in job && job.duration_ms != undefined}
 						(Ran in {msToReadableTime(
 							job.duration_ms
@@ -121,11 +121,7 @@
 				{:else if `scheduled_for` in job && job.scheduled_for && forLater(job.scheduled_for)}
 					Scheduled for {displayDate(job.scheduled_for)}
 				{:else}
-					Waiting for executor (created <TimeAgo
-						withDate
-						agoOnlyIfRecent
-						date={job.created_at || ''}
-					/>)
+					Waiting for executor (created <TimeAgo agoOnlyIfRecent date={job.created_at || ''} />)
 				{/if}
 			{/if}
 		</div>
diff --git a/frontend/src/lib/components/schema/FlowPropertyEditor.svelte b/frontend/src/lib/components/schema/FlowPropertyEditor.svelte
index b20e6e335f..f55800fc50 100644
--- a/frontend/src/lib/components/schema/FlowPropertyEditor.svelte
+++ b/frontend/src/lib/components/schema/FlowPropertyEditor.svelte
@@ -341,6 +341,7 @@
 				/>
 			{:else}
 				<ArgInput
+					noDefaultOnSelectFirst
 					{itemPicker}
 					resourceTypes={getResourceTypesFromFormat(format)}
 					bind:value={defaultValue}
diff --git a/frontend/src/lib/components/search/GlobalSearchModal.svelte b/frontend/src/lib/components/search/GlobalSearchModal.svelte
index ffd030edcb..c99fd1c1f9 100644
--- a/frontend/src/lib/components/search/GlobalSearchModal.svelte
+++ b/frontend/src/lib/components/search/GlobalSearchModal.svelte
@@ -499,7 +499,7 @@
 </script>
 
 {#if open}
-	<Portal>
+	<Portal name="global-search">
 		<div
 			class={twMerge(
 				`fixed top-0 bottom-0 left-0 right-0 transition-all duration-50 flex items-start justify-center`,
diff --git a/frontend/src/lib/init_scripts/python_failure_module.ts b/frontend/src/lib/init_scripts/python_failure_module.ts
deleted file mode 100644
index db8e1a7705..0000000000
--- a/frontend/src/lib/init_scripts/python_failure_module.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export default `import os
-
-def main(message: str, name: str, step_id: str):
-    flow_id = os.environ.get("WM_ROOT_FLOW_JOB_ID")
-    print("message", message)
-    print("name", name)
-    print("step_id", step_id)
-    return { "message": message, "flow_id": flow_id, "step_id": step_id, "recover": False }`
diff --git a/frontend/src/lib/init_scripts/python_init_code.ts b/frontend/src/lib/init_scripts/python_init_code.ts
deleted file mode 100644
index 282ffd7bf2..0000000000
--- a/frontend/src/lib/init_scripts/python_init_code.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-export default `import os
-import wmill
-
-# You can import any PyPi package. 
-# See here for more info: https://www.windmill.dev/docs/advanced/dependencies_in_python
-
-# you can use typed resources by doing a type alias to dict
-#postgresql = dict
-
-def main(
-    no_default: str,
-    #db: postgresql,
-    name="Nicolas Bourbaki",
-    age=42,
-    obj: dict = {"even": "dicts"},
-    l: list = ["or", "lists!"],
-    file_: bytes = bytes(0),
-):
-
-    print(f"Hello World and a warm welcome especially to {name}")
-    print("and its acolytes..", age, obj, l, len(file_))
-
-    # retrieve variables, resources, states using the wmill client
-    try:
-        secret = wmill.get_variable("f/examples/secret")
-    except:
-        secret = "No secret yet at f/examples/secret !"
-    print(f"The variable at \`f/examples/secret\`: {secret}")
-
-    # Get last state of this script execution by the same trigger/user
-    last_state = wmill.get_state()
-    new_state = {"foo": 42} if last_state is None else last_state
-    new_state["foo"] += 1
-    wmill.set_state(new_state)
-
-    # fetch context variables
-    user = os.environ.get("WM_USERNAME")
-
-    # return value is converted to JSON
-    return {"splitted": name.split(), "user": user, "state": new_state}`
diff --git a/frontend/src/lib/init_scripts/python_init_code_clear.ts b/frontend/src/lib/init_scripts/python_init_code_clear.ts
deleted file mode 100644
index e37835cd24..0000000000
--- a/frontend/src/lib/init_scripts/python_init_code_clear.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export default `# import wmill
-
-
-def main(x: str):
-    return x`
diff --git a/frontend/src/lib/init_scripts/python_init_code_trigger.ts b/frontend/src/lib/init_scripts/python_init_code_trigger.ts
deleted file mode 100644
index 3895317060..0000000000
--- a/frontend/src/lib/init_scripts/python_init_code_trigger.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export default `import wmill
-
-
-def main():
-    # A common trigger script would follow this pattern:
-    # 1. Get the last saved state
-    # state = wmill.get_state()
-    # 2. Get the actual state from the external service
-    # newState = ...
-    # 3. Compare the two states and update the internal state
-    # wmill.setState(newState)
-    # 4. Return the new rows
-    # return range from (state to newState)
-    return [1, 2, 3]`
diff --git a/frontend/src/lib/script_helpers.ts b/frontend/src/lib/script_helpers.ts
index d0e7e26570..f861a29434 100644
--- a/frontend/src/lib/script_helpers.ts
+++ b/frontend/src/lib/script_helpers.ts
@@ -1,19 +1,79 @@
 import { type Script } from './gen'
 
-import PYTHON_INIT_CODE from '$lib/init_scripts/python_init_code'
-import PYTHON_INIT_CODE_CLEAR from '$lib/init_scripts/python_init_code_clear'
-import PYTHON_INIT_CODE_TRIGGER from '$lib/init_scripts/python_init_code_trigger'
-import PYTHON_FAILURE_MODULE_CODE from '$lib/init_scripts/python_failure_module'
 import type { SupportedLanguage } from './common'
 
-export {
-	PYTHON_INIT_CODE,
-	PYTHON_INIT_CODE_CLEAR,
-	PYTHON_INIT_CODE_TRIGGER,
-	PYTHON_FAILURE_MODULE_CODE
-}
+export let PYTHON_FAILURE_MODULE_CODE = `import os
 
-export const NATIVETS_INIT_CODE = `// Fetch-only script, no imports allowed (except windmill) but benefits from a dedicated highly efficient runtime
+def main(message: str, name: str, step_id: str):
+    flow_id = os.environ.get("WM_ROOT_FLOW_JOB_ID")
+    print("message", message)
+    print("name", name)
+    print("step_id", step_id)
+    return { "message": message, "flow_id": flow_id, "step_id": step_id, "recover": False }`
+
+export let PYTHON_INIT_CODE_CLEAR = `# import wmill
+
+
+def main(x: str):
+    return x`
+
+export let PYTHON_INIT_CODE_TRIGGER = `import wmill
+
+
+def main():
+    # A common trigger script would follow this pattern:
+    # 1. Get the last saved state
+    # state = wmill.get_state()
+    # 2. Get the actual state from the external service
+    # newState = ...
+    # 3. Compare the two states and update the internal state
+    # wmill.setState(newState)
+    # 4. Return the new rows
+    # return range from (state to newState)
+    return [1, 2, 3]`
+
+export let PYTHON_INIT_CODE = `import os
+import wmill
+
+# You can import any PyPi package. 
+# See here for more info: https://www.windmill.dev/docs/advanced/dependencies_in_python
+
+# you can use typed resources by doing a type alias to dict
+#postgresql = dict
+
+def main(
+    no_default: str,
+    #db: postgresql,
+    name="Nicolas Bourbaki",
+    age=42,
+    obj: dict = {"even": "dicts"},
+    l: list = ["or", "lists!"],
+    file_: bytes = bytes(0),
+):
+
+    print(f"Hello World and a warm welcome especially to {name}")
+    print("and its acolytes..", age, obj, l, len(file_))
+
+    # retrieve variables, resources, states using the wmill client
+    try:
+        secret = wmill.get_variable("f/examples/secret")
+    except:
+        secret = "No secret yet at f/examples/secret !"
+    print(f"The variable at \`f/examples/secret\`: {secret}")
+
+    # Get last state of this script execution by the same trigger/user
+    last_state = wmill.get_state()
+    new_state = {"foo": 42} if last_state is None else last_state
+    new_state["foo"] += 1
+    wmill.set_state(new_state)
+
+    # fetch context variables
+    user = os.environ.get("WM_USERNAME")
+
+    # return value is converted to JSON
+    return {"splitted": name.split(), "user": user, "state": new_state}`
+
+export let NATIVETS_INIT_CODE = `// Fetch-only script, no imports allowed (except windmill) but benefits from a dedicated highly efficient runtime
 //import * as wmill from './windmill.ts'
 
 export async function main(example_input: number = 3) {
@@ -25,7 +85,7 @@ export async function main(example_input: number = 3) {
 }
 `
 
-export const BUNNATIVE_INIT_CODE = `//native
+export let BUNNATIVE_INIT_CODE = `//native
 //you can add proxy support using //proxy http(s)://host:port
 
 // native scripts are bun scripts that are executed on native workers and can be parallelized
@@ -42,7 +102,7 @@ export async function main(example_input: number = 3) {
 }
 `
 
-export const NATIVETS_INIT_CODE_CLEAR = `// Fetch-only script, no imports allowed (except windmill) but benefits from a dedicated highly efficient runtime
+export let NATIVETS_INIT_CODE_CLEAR = `// Fetch-only script, no imports allowed (except windmill) but benefits from a dedicated highly efficient runtime
 //import * as wmill from './windmill.ts'
 
 export async function main() {
@@ -53,7 +113,7 @@ export async function main() {
 }
 `
 
-export const DENO_INIT_CODE = `// Ctrl/CMD+. to cache dependencies on imports hover.
+export let DENO_INIT_CODE = `// Ctrl/CMD+. to cache dependencies on imports hover.
 
 // Deno uses "npm:" prefix to import from npm (https://deno.land/manual@v1.36.3/node/npm_specifiers)
 // import * as wmill from "npm:windmill-client@${__pkg__.version}"
@@ -74,7 +134,7 @@ export async function main(
 }
 `
 
-export const BUN_INIT_CODE = `// there are multiple modes to add as header: //nobundling //native //npm //nodejs
+export let BUN_INIT_CODE = `// there are multiple modes to add as header: //nobundling //native //npm //nodejs
 // https://www.windmill.dev/docs/getting_started/scripts_quickstart/typescript#modes
 
 // import { toWords } from "number-to-words@1"
@@ -105,7 +165,7 @@ export async function main(
 }
 `
 
-export const GO_INIT_CODE = `package inner
+export let GO_INIT_CODE = `package inner
 
 import (
 	"fmt"
@@ -129,7 +189,7 @@ func main(x string, nested struct {
 }
 `
 
-export const GO_FAILURE_MODULE_CODE = `package inner
+export let GO_FAILURE_MODULE_CODE = `package inner
 
 import (
 	"fmt"
@@ -146,21 +206,21 @@ func main(message string, name string) (interface{}, error) {
 }
 `
 
-export const DENO_INIT_CODE_CLEAR = `// import * as wmill from "npm:windmill-client@${__pkg__.version}"
+export let DENO_INIT_CODE_CLEAR = `// import * as wmill from "npm:windmill-client@${__pkg__.version}"
 
 export async function main(x: string) {
   return x
 }
 `
 
-export const BUN_INIT_CODE_CLEAR = `// import * as wmill from "windmill-client"
+export let BUN_INIT_CODE_CLEAR = `// import * as wmill from "windmill-client"
 
 export async function main(x: string) {
   return x
 }
 `
 
-export const DENO_FAILURE_MODULE_CODE = `
+export let DENO_FAILURE_MODULE_CODE = `
 export async function main(message: string, name: string, step_id: string) {
   const flow_id = Deno.env.get("WM_ROOT_FLOW_JOB_ID")
   console.log("message", message)
@@ -170,7 +230,7 @@ export async function main(message: string, name: string, step_id: string) {
 }
 `
 
-export const BUN_FAILURE_MODULE_CODE = `
+export let BUN_FAILURE_MODULE_CODE = `
 export async function main(message: string, name: string, step_id: string) {
   const flow_id = process.env.WM_ROOT_FLOW_JOB_ID
   console.log("message", message)
@@ -180,7 +240,7 @@ export async function main(message: string, name: string, step_id: string) {
 }
 `
 
-export const POSTGRES_INIT_CODE = `-- to pin the database use '-- database f/your/path'
+export let POSTGRES_INIT_CODE = `-- to pin the database use '-- database f/your/path'
 -- $1 name1 = default arg
 -- $2 name2
 -- $3 name3
@@ -189,7 +249,7 @@ INSERT INTO demo VALUES (\$1::TEXT, \$2::INT, \$3::TEXT[]) RETURNING *;
 UPDATE demo SET col2 = \$4::INT WHERE col2 = \$2::INT;
 `
 
-export const MYSQL_INIT_CODE = `-- to pin the database use '-- database f/your/path'
+export let MYSQL_INIT_CODE = `-- to pin the database use '-- database f/your/path'
 -- :name1 (text) = default arg
 -- :name2 (int)
 -- :name3 (int)
@@ -197,7 +257,7 @@ INSERT INTO demo VALUES (:name1, :name2);
 UPDATE demo SET col2 = :name3 WHERE col2 = :name2;
 `
 
-export const BIGQUERY_INIT_CODE = `-- to pin the database use '-- database f/your/path'
+export let BIGQUERY_INIT_CODE = `-- to pin the database use '-- database f/your/path'
 -- @name1 (string) = default arg
 -- @name2 (integer)
 -- @name3 (string[])
@@ -206,7 +266,7 @@ INSERT INTO \`demodb.demo\` VALUES (@name1, @name2, @name3);
 UPDATE \`demodb.demo\` SET col2 = @name4 WHERE col2 = @name2;
 `
 
-export const SNOWFLAKE_INIT_CODE = `-- to pin the database use '-- database f/your/path'
+export let SNOWFLAKE_INIT_CODE = `-- to pin the database use '-- database f/your/path'
 -- ? name1 (varchar) = default arg
 -- ? name2 (int)
 INSERT INTO demo VALUES (?, ?);
@@ -215,7 +275,7 @@ INSERT INTO demo VALUES (?, ?);
 UPDATE demo SET col2 = ? WHERE col2 = ?;
 `
 
-export const MSSQL_INIT_CODE = `-- return_last_result
+export let MSSQL_INIT_CODE = `-- return_last_result
 -- to pin the database use '-- database f/your/path'
 -- @p1 name1 (varchar) = default arg
 -- @p2 name2 (int)
@@ -224,7 +284,7 @@ INSERT INTO demo VALUES (@p1, @p2);
 UPDATE demo SET col2 = @p3 WHERE col2 = @p2;
 `
 
-export const GRAPHQL_INIT_CODE = `query($name4: String, $name2: Int, $name3: [String]) {
+export let GRAPHQL_INIT_CODE = `query($name4: String, $name2: Int, $name3: [String]) {
 	demo(name1: $name1, name2: $name2, name3: $name3) {
 		name1,
 		name2,
@@ -233,7 +293,7 @@ export const GRAPHQL_INIT_CODE = `query($name4: String, $name2: Int, $name3: [St
 }
 `
 
-export const PHP_INIT_CODE = `<?php
+export let PHP_INIT_CODE = `<?php
 
 // remove the first // of the following lines to specify packages to install using composer
 // // require:
@@ -253,7 +313,7 @@ function main(
 }
 `
 
-export const RUST_INIT_CODE = `//! Add dependencies in the following partial Cargo.toml manifest
+export let RUST_INIT_CODE = `//! Add dependencies in the following partial Cargo.toml manifest
 //!
 //! \`\`\`cargo
 //! [dependencies]
@@ -288,7 +348,7 @@ fn main(who_to_greet: String, numbers: Vec<i8>) -> anyhow::Result<Ret> {
 }
 `
 
-export const FETCH_INIT_CODE = `export async function main(
+export let FETCH_INIT_CODE = `export async function main(
 	url: string | undefined,
 	method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'OPTIONS' = 'GET',
 	body: Object = {},
@@ -319,7 +379,7 @@ export const FETCH_INIT_CODE = `export async function main(
 		})
 }`
 
-export const BASH_INIT_CODE = `# shellcheck shell=bash
+export let BASH_INIT_CODE = `# shellcheck shell=bash
 # arguments of the form X="$I" are parsed as parameters X of type string
 msg="$1"
 dflt="\${2:-default value}"
@@ -329,7 +389,7 @@ dflt="\${2:-default value}"
 echo "Hello $msg"
 `
 
-export const DENO_INIT_CODE_TRIGGER = `import * as wmill from "npm:windmill-client@${__pkg__.version}"
+export let DENO_INIT_CODE_TRIGGER = `import * as wmill from "npm:windmill-client@${__pkg__.version}"
 
 export async function main() {
 
@@ -350,7 +410,7 @@ export async function main() {
 }
 `
 
-export const BUN_INIT_CODE_TRIGGER = `import * as wmill from "windmill-client"
+export let BUN_INIT_CODE_TRIGGER = `import * as wmill from "windmill-client"
 
 export async function main() {
 
@@ -371,7 +431,7 @@ export async function main() {
 }
 `
 
-export const GO_INIT_CODE_TRIGGER = `package inner
+export let GO_INIT_CODE_TRIGGER = `package inner
 
 import (
 	wmill "github.com/windmill-labs/windmill-go-client"
@@ -395,7 +455,7 @@ func main() (interface{}, error) {
 }
 `
 
-export const DENO_INIT_CODE_APPROVAL = `import * as wmill from "npm:windmill-client@^1.158.2"
+export let DENO_INIT_CODE_APPROVAL = `import * as wmill from "npm:windmill-client@^1.158.2"
 
 export async function main(approver?: string) {
   const urls = await wmill.getResumeUrls(approver)
@@ -423,7 +483,7 @@ export async function main(approver?: string) {
 // add a form in Advanced - Suspend
 // all on approval steps: https://www.windmill.dev/docs/flows/flow_approval`
 
-export const BUN_INIT_CODE_APPROVAL = `import * as wmill from "windmill-client@^1.158.2"
+export let BUN_INIT_CODE_APPROVAL = `import * as wmill from "windmill-client@^1.158.2"
 
 export async function main(approver?: string) {
   const urls = await wmill.getResumeUrls(approver)
@@ -451,7 +511,7 @@ export async function main(approver?: string) {
 // add a form in Advanced - Suspend
 // all on approval steps: https://www.windmill.dev/docs/flows/flow_approval`
 
-export const BUN_PREPROCESSOR_MODULE_CODE = `
+export let BUN_PREPROCESSOR_MODULE_CODE = `
 export async function preprocessor(
 	wm_trigger: {
 		kind: 'http' | 'email' | 'webhook',
@@ -472,7 +532,7 @@ export async function preprocessor(
 }
 `
 
-export const DENO_PREPROCESSOR_MODULE_CODE = `
+export let DENO_PREPROCESSOR_MODULE_CODE = `
 export async function preprocessor(
 	wm_trigger: {
 		kind: 'http' | 'email' | 'wehbook',
@@ -493,7 +553,7 @@ export async function preprocessor(
 }
 `
 
-export const PYTHON_INIT_CODE_APPROVAL = `import wmill
+export let PYTHON_INIT_CODE_APPROVAL = `import wmill
 
 def main():
   urls = wmill.get_resume_urls()
@@ -520,7 +580,7 @@ def main():
 # add a form in Advanced - Suspend
 # all on approval steps: https://www.windmill.dev/docs/flows/flow_approval`
 
-export const PYTHON_PREPROCESSOR_MODULE_CODE = `from typing import TypedDict, Literal
+export let PYTHON_PREPROCESSOR_MODULE_CODE = `from typing import TypedDict, Literal
 
 class Http(TypedDict):
 	route: str # The route path, e.g. "/users/:id"
@@ -543,7 +603,7 @@ def preprocessor(
 	}
 `
 
-export const DOCKER_INIT_CODE = `# shellcheck shell=bash
+export let DOCKER_INIT_CODE = `# shellcheck shell=bash
 # Bash script that calls docker as a client to the host daemon
 # See documentation: https://www.windmill.dev/docs/advanced/docker
 msg="\${1:-world}"
@@ -556,7 +616,7 @@ docker pull $IMAGE
 docker run --rm $IMAGE $COMMAND
 `
 
-export const POWERSHELL_INIT_CODE = `param($Msg, $Dflt = "default value", [int]$Nb = 3)
+export let POWERSHELL_INIT_CODE = `param($Msg, $Dflt = "default value", [int]$Nb = 3)
 
 # Import-Module MyModule
 
@@ -567,7 +627,7 @@ export const POWERSHELL_INIT_CODE = `param($Msg, $Dflt = "default value", [int]$
 # the last line of the stdout is the return value
 Write-Output "Hello $Msg"`
 
-export const ANSIBLE_PLAYBOOK_INIT_CODE = `---
+export let ANSIBLE_PLAYBOOK_INIT_CODE = `---
 inventory:
   - resource_type: ansible_inventory
     # You can pin an inventory to this script by hardcoding the resource path:
diff --git a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
index 3f71923a15..18c89d53f5 100644
--- a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
@@ -31,6 +31,7 @@
 		Badge,
 		Loader2,
 		GitFork,
+		Play,
 		History,
 		Columns,
 		Pen,
@@ -182,6 +183,19 @@
 			label: `View runs`,
 			buttonProps: {
 				href: `${base}/runs/${flow.path}`,
+				size: 'xs',
+				color: 'light',
+				startIcon: Play
+			}
+		})
+
+		buttons.push({
+			label: `History`,
+			buttonProps: {
+				onClick: () => {
+					flowHistory?.open()
+				},
+
 				size: 'xs',
 				color: 'light',
 				startIcon: History
@@ -442,7 +456,7 @@
 					{/if}
 					<div class="flex flex-row gap-x-2 flex-wrap items-center">
 						<span class="text-sm text-tertiary">
-							Edited <TimeAgo withDate date={flow.edited_at ?? ''} /> by {flow.edited_by}
+							Edited <TimeAgo date={flow.edited_at ?? ''} /> by {flow.edited_by}
 						</span>
 
 						{#if flow.archived}
diff --git a/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte b/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
index 6131ed5ea0..f54bde1044 100644
--- a/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
@@ -9,9 +9,7 @@
 		type WorkflowStatus,
 		type NewScript,
 		ConcurrencyGroupsService,
-
 		MetricsService
-
 	} from '$lib/gen'
 	import {
 		canWrite,
@@ -97,7 +95,7 @@
 	let job: Job | undefined
 	let jobUpdateLastFetch: Date | undefined
 
-	let scriptProgress: number | undefined = undefined;
+	let scriptProgress: number | undefined = undefined
 	let currentJobIsLongRunning: boolean = false
 
 	let viewTab: 'result' | 'logs' | 'code' | 'stats' = 'result'
@@ -203,20 +201,20 @@
 	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"){
+		if (job && job.type == 'CompletedJob') {
 			// If error occured 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;
-			});
+				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 === undefined || job.job_kind !== 'script' || job.script_hash === undefined) {
@@ -229,7 +227,6 @@
 		if (script.restart_unless_cancelled ?? false) {
 			persistentScriptDefinition = script
 		}
-
 	}
 
 	$: {
@@ -349,7 +346,7 @@
 
 <TestJobLoader
 	lazyLogs
-	bind:scriptProgress 
+	bind:scriptProgress
 	on:done={() => job?.['result'] != undefined && (viewTab = 'result')}
 	bind:this={testJobLoader}
 	bind:getLogs
@@ -360,7 +357,7 @@
 	bind:notfound
 />
 
-<Portal>
+<Portal name="persistent-run">
 	<PersistentScriptDrawer bind:this={persistentScriptDrawer} />
 </Portal>
 
@@ -613,11 +610,7 @@
 						<Button
 							on:click|once={() => {
 								$initialArgsStore = job?.args
-								goto(
-									`${stem}/edit/${
-										job?.script_path
-									}${isScript ? `` : `?nodraft=true`}`
-								)
+								goto(`${stem}/edit/${job?.script_path}${isScript ? `` : `?nodraft=true`}`)
 							}}
 							color="blue"
 							size="sm"
@@ -753,7 +746,7 @@
 				<Skeleton loading={!job} layout={[[9.5]]} />
 				{#if job}
 					<FlowMetadata {job} {scheduleEditor} />
-					{#if currentJobIsLongRunning && showExplicitProgressTip  && !scriptProgress && 'running' in job}
+					{#if currentJobIsLongRunning && showExplicitProgressTip && !scriptProgress && 'running' in job}
 						<Alert
 							class="mt-4 p-1 flex flex-row relative text-center"
 							size="xs"
@@ -801,7 +794,7 @@
 					/>
 				{/if}
 				{#if scriptProgress}
-					<JobProgressBar {job} {scriptProgress} class="py-4" hideStepTitle={true}/>
+					<JobProgressBar {job} {scriptProgress} class="py-4" hideStepTitle={true} />
 				{/if}
 				<!-- Logs and outputs-->
 				<div class="mr-2 sm:mr-0 mt-12">
diff --git a/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte b/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
index d123bb8973..6883b062d1 100644
--- a/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
@@ -660,8 +660,7 @@
 					{/if}
 					<div class="flex flex-row gap-x-2 flex-wrap items-center">
 						<span class="text-sm text-tertiary">
-							Edited <TimeAgo withDate date={script.created_at || ''} /> by {script.created_by ||
-								'unknown'}
+							Edited <TimeAgo date={script.created_at || ''} /> by {script.created_by || 'unknown'}
 						</span>
 						<Badge small color="gray">
 							{truncateHash(script?.hash ?? '')}
diff --git a/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte b/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte
index 6f7b9dcae9..24beda13ed 100644
--- a/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte
@@ -629,7 +629,7 @@
 	}
 </script>
 
-<Portal>
+<Portal name="workspace-settings">
 	<S3FilePicker bind:this={s3FileViewer} readOnlyMode={false} fromWorkspaceSettings={true} />
 </Portal>
 
@@ -1053,9 +1053,12 @@
 		{:else if tab == 'windmill_lfs'}
 			<div class="flex flex-col gap-4 my-8">
 				<div class="flex flex-col gap-1">
-					<div class=" text-primary text-lg font-semibold">Workspace object storage (S3/Azure Blob)</div>
+					<div class=" text-primary text-lg font-semibold"
+						>Workspace object storage (S3/Azure Blob)</div
+					>
 					<div class="text-tertiary text-xs">
-						Connect your Windmill workspace to your S3 bucket or your Azure Blob storage to enable users to read and write from S3 without having to have access to the credentials.
+						Connect your Windmill workspace to your S3 bucket or your Azure Blob storage to enable
+						users to read and write from S3 without having to have access to the credentials.
 						<a
 							href="https://www.windmill.dev/docs/core_concepts/object_storage_in_windmill#workspace-object-storage"
 							target="_blank"
@@ -1074,8 +1077,11 @@
 				<Alert type="info" title="Logs storage is set at the instance level">
 					This setting is only for storage of large files allowing to upload files directly to
 					object storage using S3Object and use the wmill sdk to read and write large files backed
-					by an object storage. Large-scale log management and distributed dependency caching is under <a href="https://www.windmill.dev/docs/core_concepts/object_storage_in_windmill#instance-object-storage" class="text-blue-500">Instance object storage</a>, set by the superadmins in the
-					instance settings UI.
+					by an object storage. Large-scale log management and distributed dependency caching is
+					under <a
+						href="https://www.windmill.dev/docs/core_concepts/object_storage_in_windmill#instance-object-storage"
+						class="text-blue-500">Instance object storage</a
+					>, set by the superadmins in the instance settings UI.
 				</Alert>
 			{/if}
 			{#if s3ResourceSettings}
diff --git a/frontend/src/routes/(root)/embed_connect/+page.js b/frontend/src/routes/(root)/embed_connect/+page.js
deleted file mode 100644
index 4b8139b4c9..0000000000
--- a/frontend/src/routes/(root)/embed_connect/+page.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export function load() {
-	return {
-		stuff: { title: 'App Connection' }
-	}
-}