various fixes

frontend/src/lib/components/DisplayResult.svelte

@@ -96,7 +96,7 @@
 						</div>
 						{#if Array.isArray(result[col])}
 							{#each result[col] as item}
-								<div class="px-12 text-left  whitespace-nowrap">
+								<div class="px-12 text-left text-xs whitespace-nowrap">
 									{typeof item === 'string' ? item : JSON.stringify(item)}
 								</div>
 							{/each}
@@ -105,14 +105,14 @@
 				{/each}
 			</div>
 		{:else if !forceJson && resultKind == 'table-row'}<div
-				class="grid grid-flow-col-dense border border-gray-200 rounded-md "
+				class="grid grid-flow-col-dense border border-gray-200 "
 			>
 				<TableCustom>
 					<tbody slot="body">
 						{#each asListOfList(result) as row}
 							<tr>
 								{#each row as v}
-									<td>{truncate(JSON.stringify(v), 200) ?? ''}</td>
+									<td class="!text-xs">{truncate(JSON.stringify(v), 200) ?? ''}</td>
 								{/each}
 							</tr>
 						{/each}
@@ -142,7 +142,9 @@
 				>
 			</div>
 		{:else if !forceJson && resultKind == 'error'}<div>
-				<span class="text-red-500 font-semibold">{result.error.name}: {result.error.message}</span>
+				<span class="text-red-500 font-semibold text-sm"
+					>{result.error.name}: {result.error.message}</span
+				>
 				<pre class="text-sm whitespace-pre-wrap text-gray-900">{result.error.stack ?? ''}</pre>
 			</div>
 		{:else if !forceJson && resultKind == 'approval'}<div class="flex flex-col gap-1 mx-4">

frontend/src/lib/components/FlowPreviewContent.svelte

@@ -150,11 +150,11 @@
 	<FlowProgressBar {job} bind:reset={jobProgressReset} />
 
 	<div class="overflow-y-auto grow flex-col flex divide-y divide-gray-600 ">
-		<div class="max-w-3xl">
+		<div class="max-h-1/2 overflow-auto">
 			<SchemaForm
 				noVariablePicker
 				compact
-				class="py-4"
+				class="py-4 max-w-3xl"
 				schema={$flowStore.schema}
 				bind:isValid
 				bind:args={$previewArgs}

frontend/src/lib/components/ResourceEditor.svelte

@@ -26,7 +26,7 @@
 	let args: Record<string, any> = {}
 	let can_write = true
 	let loadingSchema = false
-
+	let linkedVars: string[] = []
 	let drawer: Drawer
 
 	let rawCode: string | undefined = undefined
@@ -48,6 +48,9 @@
 		can_write =
 			resourceToEdit.workspace_id == $workspaceStore &&
 			canWrite(p, resourceToEdit.extra_perms ?? {}, $userStore)
+		linkedVars = Object.entries(args)
+			.filter(([_, v]) => typeof v == 'string' && v == `$var:${initialPath}`)
+			.map(([k, _]) => k)
 	}
 
 	async function editResource(): Promise<void> {
@@ -58,7 +61,7 @@
 				requestBody: { path, value: args, description }
 			})
 			sendUserToast(`Updated resource at ${path}`)
-			dispatch('refresh')
+			dispatch('refresh', path)
 			drawer.closeDrawer?.()
 		} else {
 			throw Error('Cannot edit undefined resourceToEdit')
@@ -100,6 +103,14 @@
 			jsonError = e.message
 		}
 	}
+
+	$: linkedVars.length > 0 && path && updateArgsFromLinkedVars()
+
+	function updateArgsFromLinkedVars() {
+		linkedVars.forEach((k) => {
+			args[k] = `$var:${path}`
+		})
+	}
 </script>
 
 <Drawer bind:this={drawer} size="800px">

frontend/src/lib/components/ResourcePicker.svelte

@@ -46,7 +46,16 @@
 	bind:this={appConnect}
 />
 
-<ResourceEditor bind:this={resourceEditor} on:refresh={() => loadResources(resourceType)} />
+<ResourceEditor
+	bind:this={resourceEditor}
+	on:refresh={async (e) => {
+		await loadResources(resourceType)
+		console.log(e)
+		if (e.detail) {
+			value = e.detail
+		}
+	}}
+/>
 
 <div class="flex flex-row gap-x-1 w-full">
 	<Select

frontend/src/lib/components/TemplateEditor.svelte

@@ -593,10 +593,14 @@
 	})
 </script>
 
-<div bind:this={divEl} class="{$$props.class} rounded-lg mx-0.5" bind:clientWidth={width} />
+<div
+	bind:this={divEl}
+	class="{$$props.class} template rounded-lg mx-0.5"
+	bind:clientWidth={width}
+/>
 
 <style>
-	:global(.mtk20) {
+	:global(.template .mtk20) {
 		color: black !important;
 	}
 </style>

frontend/src/lib/components/flows/content/CapturePayload.svelte

@@ -115,7 +115,7 @@
 				Copy as flow inputs and test args
 			</Button>
 		</svelte:fragment>
-		<h3 class="mt-2">Derived inputs schema</h3>
+		<h3 class="my-2">Derived schema</h3>
 		<div class="box p-2">
 			<SchemaViewer schema={jsonSchema} />
 		</div>