make transformer execution seeable from the job editor panel

frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte

@@ -24,6 +24,7 @@
 	import { selectId } from '../../editor/appUtils'
 	import ResultJobLoader from '$lib/components/ResultJobLoader.svelte'
 	import { userStore } from '$lib/stores'
+	import { get } from 'svelte/store'
 
 	// Component props
 	export let id: string
@@ -264,7 +265,7 @@
 			} catch (e) {
 				sendUserToast(`Error running frontend script ${id}: ` + e.message, true)
 				r = { error: { message: e.body ?? e.message } }
-				await setResult(r, job)
+				await setResult(r, job, setRunnableJobEditorPanel)
 			}
 			loading = false
 			donePromise?.(r)
@@ -494,7 +495,8 @@
 		}
 
 		const transformerResult = await runTransformer(res)
-		if (setRunnableJobEditorPanel && editorContext) {
+
+		if (transformerResult && editorContext && get(editorContext.runnableJobEditorPanel)?.focused) {
 			editorContext.runnableJobEditorPanel.update((p) => {
 				return {
 					...p,

frontend/src/lib/components/apps/editor/AppEditorHeader.svelte

@@ -987,12 +987,14 @@
 			</Pane>
 			<Pane size={75}>
 				<div class="w-full h-full flex flex-col">
-					<Tabs bind:selected={rightColumnSelect}>
-						<Tab value="timeline"><span class="font-semibold text-md">Timeline</span></Tab>
-						<Tab value="detail"><span class="font-semibold">Details</span></Tab>
-					</Tabs>
+					<div>
+						<Tabs bind:selected={rightColumnSelect}>
+							<Tab value="timeline"><span class="font-semibold text-md">Timeline</span></Tab>
+							<Tab value="detail"><span class="font-semibold">Details</span></Tab>
+						</Tabs>
+					</div>
 					{#if rightColumnSelect == 'timeline'}
-						<div class="p-2">
+						<div class="p-2 grow overflow-auto">
 							<AppTimeline />
 						</div>
 					{:else if rightColumnSelect == 'detail'}