edit script preload same args

frontend/src/lib/components/ArgInfo.svelte

@@ -55,7 +55,7 @@
 	{/if}
 {:else}
 	<div class="max-h-40 overflow-auto">
-		<ObjectViewer topBrackets={true} pureViewer={true} json={value} />
+		<ObjectViewer collapsed={false} topBrackets={true} pureViewer={true} json={value} />
 	</div>
 	{#if JSON.stringify(value).length > 120}
 		<button

frontend/src/lib/components/FlowBuilder.svelte

@@ -29,6 +29,7 @@
 
 	export let initialPath: string = ''
 	export let selectedId: string | undefined
+	export let initialArgs: Record<string, any> = {}
 
 	let pathError = ''
 
@@ -146,7 +147,7 @@
 
 	const selectedIdStore = writable<string>('settings')
 	const scheduleStore = writable<Schedule>({ args: {}, cron: '', enabled: false })
-	const previewArgsStore = writable<Record<string, any>>({})
+	const previewArgsStore = writable<Record<string, any>>(initialArgs)
 
 	function select(selectedId: string) {
 		selectedIdStore.set(selectedId)

frontend/src/lib/components/RunForm.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/stores'
-	import { decodeState, getToday } from '$lib/utils'
+	import { decodeArgs, decodeState, getToday } from '$lib/utils'
 	import { slide } from 'svelte/transition'
 
 	import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
@@ -16,21 +16,10 @@
 	export let schedulable = true
 	export let detailed = true
 
-	export let args: Record<string, any> = {}
+	export let args: Record<string, any> = decodeArgs($page.url.searchParams.get('args') ?? undefined)
 
 	let isValid = true
 
-	let queryArgs = $page.url.searchParams.get('args')
-	if (queryArgs) {
-		const parsed = decodeState(queryArgs)
-		Object.entries(parsed).forEach(([k, v]) => {
-			if (v == '<function call>') {
-				parsed[k] = undefined
-			}
-		})
-		args = parsed
-	}
-
 	// Run later
 	let viewOptions = false
 	let scheduledForStr: string | undefined

frontend/src/lib/components/ScriptBuilder.svelte

@@ -23,6 +23,7 @@
 	export let script: Script
 	export let initialPath: string = ''
 	export let template: 'pgsql' | 'script' = 'script'
+	export let initialArgs: Record<string, any> = {}
 
 	let viewScriptKind = script.kind !== Script.kind.SCRIPT
 	let viewTemplate = script.kind !== Script.kind.SCRIPT && script.language == Script.language.DENO
@@ -287,6 +288,7 @@
 			path={script.path}
 			bind:code={script.content}
 			lang={script.language}
+			{initialArgs}
 		/>
 	{:else if step === 3}
 		<CenteredPage>

frontend/src/lib/components/ScriptEditor.svelte

@@ -24,6 +24,7 @@
 	export let code: string
 	export let path: string | undefined
 	export let lang: Preview.language
+	export let initialArgs: Record<string, any> = {}
 
 	let websocketAlive = { pyright: false, black: false, deno: false, go: false }
 
@@ -35,7 +36,7 @@
 	let testJobLoader: TestJobLoader
 
 	// Test args input
-	let args: Record<string, any> = {}
+	let args: Record<string, any> = initialArgs
 	let isValid: boolean = true
 
 	// Test

frontend/src/lib/utils.ts

@@ -226,6 +226,19 @@ export function decodeState(query: string): any {
 	return JSON.parse(decodeURIComponent(atob(query)))
 }
 
+export function decodeArgs(queryArgs: string | undefined): any {
+	if (queryArgs) {
+		const parsed = decodeState(queryArgs)
+		Object.entries(parsed).forEach(([k, v]) => {
+			if (v == '<function call>') {
+				parsed[k] = undefined
+			}
+		})
+		return parsed
+	}
+	return {}
+}
+
 export async function setQuery(url: URL, key: string, value: string): Promise<void> {
 	url.searchParams.set(key, value)
 	await goto(`?${url.searchParams.toString()}`)

frontend/src/routes/flows/edit/[...path].svelte

@@ -12,12 +12,13 @@
 	import { page } from '$app/stores'
 	import FlowBuilder from '$lib/components/FlowBuilder.svelte'
 	import { workspaceStore } from '$lib/stores'
-	import { decodeState, emptySchema } from '$lib/utils'
+	import { decodeArgs, decodeState, emptySchema } from '$lib/utils'
 	import { initFlow } from '$lib/components/flows/flowStore'
 	import { dirtyStore } from '$lib/components/common/confirmationModal/dirtyStore'
 
 	const initialState = $page.url.searchParams.get('state')
 	let stateLoadedFromUrl = initialState != undefined ? decodeState(initialState) : undefined
+	const initialArgs = decodeArgs($page.url.searchParams.get('args') ?? undefined)
 
 	let selectedId: string | undefined = undefined
 
@@ -58,4 +59,4 @@
 	}
 </script>
 
-<FlowBuilder {initialPath} {selectedId} />
+<FlowBuilder {initialPath} {selectedId} {initialArgs} />

frontend/src/routes/run/[...run].svelte

@@ -111,7 +111,11 @@
 			{@const runHref = `${stem}/run/${route}${
 				job?.args ? '?args=' + encodeURIComponent(encodeState(job?.args)) : ''
 			}`}
-			{@const editHref = `${stem}/edit/${route}${isScript ? '?step=2' : ''}`}
+			{@const editHref = `${stem}/edit/${route}${
+				isScript
+					? `?step=2${job?.args ? `&args=${encodeURIComponent(encodeState(job?.args))}` : ''}`
+					: `${job?.args ? `?args=${encodeURIComponent(encodeState(job?.args))}` : ''}`
+			}`}
 			{@const isRunning = job && 'running' in job && job.running}
 			{@const runsHref = `/runs/${job?.script_path}${!isScript ? '?jobKind=flow' : ''}`}
 			{@const viewHref = `${stem}/get/${isScript ? job?.script_hash : job?.script_path}`}

frontend/src/routes/scripts/edit/[...hash].svelte

@@ -12,10 +12,12 @@
 	import { page } from '$app/stores'
 	import { workspaceStore } from '$lib/stores'
 	import ScriptBuilder from '$lib/components/ScriptBuilder.svelte'
-	import { decodeState } from '$lib/utils'
+	import { decodeArgs, decodeState } from '$lib/utils'
 	import { dirtyStore } from '$lib/components/common/confirmationModal/dirtyStore'
 
 	const initialState = $page.url.searchParams.get('state')
+	const initialArgs = decodeArgs($page.url.searchParams.get('args') ?? undefined)
+
 	let scriptLoadedFromUrl = initialState != undefined ? decodeState(initialState) : undefined
 
 	let script: Script | undefined
@@ -39,9 +41,8 @@
 			loadScript()
 		}
 	}
-
 </script>
 
 {#if script}
-	<ScriptBuilder {initialPath} {script} />
+	<ScriptBuilder {initialPath} {script} {initialArgs} />
 {/if}

frontend/tailwind.config.cjs

@@ -42,10 +42,13 @@ const config = {
 			},
 			orange: {
 				100: '#ffedd5',
+				200: '#ffedd5',
 				400: '#fb923c',
 				500: '#f97316',
 				600: '#ea580c',
 				700: '#c2410c',
+				800: '#c2410c',
+
 			},
 			yellow: {
 				50: '#fefce8',