windmill-components 1.60.4 → 1.83.1

package/components/FlowBuilder.svelte

@@ -1,20 +1,18 @@
 <script>import { goto } from '$app/navigation';
-import { page } from '$app/stores';
 import { FlowService, ScheduleService } from '../gen';
+import { initHistory, redo, undo } from '../history';
 import { userStore, workspaceStore } from '../stores';
 import { encodeState, formatCron, loadHubScripts, sendUserToast } from '../utils';
-import { faCalendarAlt, faEye, faPen, faSave } from '@fortawesome/free-solid-svg-icons';
+import { faCalendarAlt, faPen, faSave } from '@fortawesome/free-solid-svg-icons';
 import { setContext } from 'svelte';
 import { writable } from 'svelte/store';
 import CenteredPage from './CenteredPage.svelte';
-import { Button, Drawer, DrawerContent } from './common';
+import { Button, ButtonPopup, ButtonPopupItem, UndoRedo } from './common';
 import { dirtyStore } from './common/confirmationModal/dirtyStore';
-import UnsavedConfirmationModal from './common/confirmationModal/UnsavedConfirmationModal.svelte';
 import { OFFSET } from './CronInput.svelte';
-import FlowGraphViewer from './FlowGraphViewer.svelte';
+import ScriptEditorDrawer from './flows/content/ScriptEditorDrawer.svelte';
 import FlowEditor from './flows/FlowEditor.svelte';
-import { flowStateStore } from './flows/flowState';
-import { flowStore } from './flows/flowStore';
+import { dfs } from './flows/flowStore';
 import FlowImportExportMenu from './flows/header/FlowImportExportMenu.svelte';
 import FlowPreviewButtons from './flows/header/FlowPreviewButtons.svelte';
 import { loadFlowSchedule } from './flows/scheduleUtils';
@@ -23,7 +21,8 @@ export let initialPath = '';
 export let selectedId;
 export let initialArgs = {};
 export let loading = false;
-let pathError = '';
+export let flowStore;
+export let flowStateStore;
 async function createSchedule(path) {
     const { cron, args, enabled } = $scheduleStore;
     try {
@@ -44,7 +43,9 @@ async function createSchedule(path) {
         sendUserToast(`The primary schedule could not be created: ${err}`, true);
     }
 }
-async function saveFlow() {
+let loadingSave = false;
+async function saveFlow(leave) {
+    loadingSave = true;
     const flow = cleanInputs($flowStore);
     const { cron, args, enabled } = $scheduleStore;
     $dirtyStore = false;
@@ -108,8 +109,14 @@ async function saveFlow() {
             await createSchedule(flow.path);
         }
     }
-    sendUserToast(`Success! flow saved at ${$flowStore.path}`);
-    goto(`/flows/get/${$flowStore.path}`);
+    loadingSave = false;
+    if (leave) {
+        goto(`/flows/get/${$flowStore.path}?workspace_id=${$workspaceStore}`);
+    }
+    else if (initialPath !== $flowStore.path) {
+        initialPath = $flowStore.path;
+        goto(`/flows/edit/${$flowStore.path}?workspace_id=${$workspaceStore}`);
+    }
 }
 let timeout = undefined;
 $: {
@@ -131,17 +138,26 @@ function saveDraft() {
         }
     }, 500);
 }
-const selectedIdStore = writable(selectedId);
+const selectedIdStore = writable(selectedId ?? 'settings-metadata');
 const scheduleStore = writable({ args: {}, cron: '', enabled: false });
 const previewArgsStore = writable(initialArgs);
+const scriptEditorDrawer = writable(undefined);
+const moving = writable(undefined);
+const history = initHistory($flowStore);
+const testStepStore = writable({});
 function select(selectedId) {
     selectedIdStore.set(selectedId);
 }
 setContext('FlowEditorContext', {
     selectedId: selectedIdStore,
     schedule: scheduleStore,
-    select,
-    previewArgs: previewArgsStore
+    previewArgs: previewArgsStore,
+    scriptEditorDrawer,
+    moving,
+    history,
+    flowStateStore,
+    flowStore,
+    testStepStore
 });
 async function loadSchedule() {
     loadFlowSchedule(initialPath, $workspaceStore)
@@ -159,38 +175,86 @@ async function loadSchedule() {
 $: selectedId && select(selectedId);
 $: initialPath && $workspaceStore && loadSchedule();
 loadHubScripts();
-let flowViewer;
+function onKeyDown(event) {
+    let classes = event.target?.['className'];
+    if ((typeof classes === 'string' && classes.includes('inputarea')) ||
+        ['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName)) {
+        return;
+    }
+    switch (event.key) {
+        case 'Z':
+            if (event.ctrlKey) {
+                $flowStore = redo(history);
+                event.preventDefault();
+            }
+            break;
+        case 'z':
+            if (event.ctrlKey) {
+                $flowStore = undo(history, $flowStore);
+                $selectedIdStore = 'Input';
+                event.preventDefault();
+            }
+            break;
+        case 's':
+            if (event.ctrlKey) {
+                saveFlow(false);
+                event.preventDefault();
+            }
+            break;
+        case 'ArrowDown': {
+            let ids = generateIds();
+            let idx = ids.indexOf($selectedIdStore);
+            if (idx > -1 && idx < ids.length - 1) {
+                $selectedIdStore = ids[idx + 1];
+                event.preventDefault();
+            }
+            break;
+        }
+        case 'ArrowUp': {
+            let ids = generateIds();
+            let idx = ids.indexOf($selectedIdStore);
+            if (idx > 0 && idx < ids.length) {
+                $selectedIdStore = ids[idx - 1];
+                event.preventDefault();
+            }
+            break;
+        }
+    }
+}
+function generateIds() {
+    return [
+        'settings-metadata',
+        'constants',
+        ...dfs($flowStore.value.modules, (module) => module.id)
+    ];
+}
 </script>
 
-{#if !$userStore?.operator}
-	<UnsavedConfirmationModal />
+<svelte:window on:keydown={onKeyDown} />
 
-	<Drawer bind:this={flowViewer} size="75%">
-		<DrawerContent title="View Graph" on:close={flowViewer.closeDrawer} noPadding>
-			<div class="overflow-hidden h-full w-full">
-				<FlowGraphViewer flow={$flowStore} />
-			</div>
-		</DrawerContent>
-	</Drawer>
+{#if !$userStore?.operator}
+	<ScriptEditorDrawer bind:this={$scriptEditorDrawer} />
 
 	<div class="flex flex-col flex-1 h-screen">
 		<!-- Nav between steps-->
 		<div
 			class="justify-between flex flex-row w-full items-center pl-2.5 pr-6  space-x-4 overflow-x-auto scrollbar-hidden max-h-12 h-full"
 		>
-			<div class="flex flex-row">
+			<div class="flex flex-row gap-4 items-center">
 				<FlowImportExportMenu />
-				<Button
-					btnClasses="inline-flex"
-					startIcon={{ icon: faEye }}
-					variant="border"
-					color="light"
-					size="sm"
-					on:click={flowViewer.openDrawer}
-				>
-					Graph
-				</Button>
+				<UndoRedo
+					undoProps={{ disabled: $history.index === 0 }}
+					redoProps={{ disabled: $history.index === $history.history.length - 1 }}
+					on:undo={() => {
+						$flowStore = undo(history, $flowStore)
+						$selectedIdStore = 'Input'
+					}}
+					on:redo={() => {
+						$flowStore = redo(history)
+					}}
+				/>
 			</div>
+
 			<div class="gap-1 flex-row hidden md:flex shrink overflow-hidden">
 				{#if $scheduleStore.enabled}
 					<Button
@@ -237,12 +301,22 @@ let flowViewer;
 			<div class="flex flex-row space-x-2">
 				<FlowPreviewButtons />
 				<div class="center-center">
-					<Button
-						disabled={pathError != ''}
-						startIcon={{ icon: faSave }}
+					<ButtonPopup
+						loading={loadingSave}
 						size="sm"
-						on:click={saveFlow}>Save</Button
+						startIcon={{ icon: faSave }}
+						on:click={() => saveFlow(false)}
 					>
+						<svelte:fragment slot="main">Save</svelte:fragment>
+						<ButtonPopupItem on:click={() => saveFlow(true)}>Save and exit</ButtonPopupItem>
+						{#if initialPath != ''}
+							<ButtonPopupItem
+								on:click={() => {
+									window.open(`/flows/add?template=${initialPath}`)
+								}}>Fork</ButtonPopupItem
+							>
+						{/if}
+					</ButtonPopup>
 				</div>
 			</div>
 		</div>

package/components/FlowBuilder.svelte.d.ts

@@ -1,10 +1,15 @@
 import { SvelteComponentTyped } from "svelte";
+import { type Flow } from '../gen';
+import { type Writable } from 'svelte/store';
+import type { FlowState } from './flows/flowState';
 declare const __propDef: {
     props: {
         initialPath?: string | undefined;
         selectedId: string | undefined;
         initialArgs?: Record<string, any> | undefined;
         loading?: boolean | undefined;
+        flowStore: Writable<Flow>;
+        flowStateStore: Writable<FlowState>;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/FlowGraphViewer.svelte

@@ -71,17 +71,16 @@ let topHeight = 0;
 </Drawer>
 <div class="grid grid-cols-3 w-full">
 	<div
-		bind:clientHeight={topHeight}
 		class="{noSide
 			? 'col-span-3'
-			: 'sm:col-span-2 col-span-3'} w-full border border-gray-400 h-screen"
+			: 'sm:col-span-2 col-span-3'} w-full border border-gray-400 max-h-screen"
 		class:overflow-auto={overflowAuto}
 	>
 		<FlowGraph
-			minHeight={topHeight}
+			minHeight={400}
 			modules={flow?.value?.modules}
 			failureModule={flow?.value?.failure_module}
-			on:click={(e) => (stepDetail = e.detail)}
+			on:select={(e) => (stepDetail = e.detail)}
 		/>
 	</div>
 	{#if !noSide}
@@ -89,7 +88,9 @@ let topHeight = 0;
 			class="w-full border-r border-b border-t border-gray-400 min-h-[150px] p-2 overflow-auto hidden sm:block"
 		>
 			{#if stepDetail == undefined}
-				<span class="font-black text-lg w-full my-4">
+				<SchemaViewer schema={flow?.schema} />
+
+				<span class="font-black text-lg w-full my-4 mt-14">
 					<span>Click on a step to see its details</span>
 				</span>
 			{:else if stepDetail == 'Input'}

package/components/FlowJobResult.svelte

@@ -1,20 +1,28 @@
-<script>import DisplayResult from './DisplayResult.svelte';
+<script>import { Loader2 } from 'lucide-svelte';
+import DisplayResult from './DisplayResult.svelte';
 import LogViewer from './LogViewer.svelte';
 export let result;
 export let logs;
 export let col = false;
 export let noBorder = false;
+export let loading;
 </script>
 
 <div
 	class:border={!noBorder}
-	class="grid {!col ? 'grid-cols-2' : 'grid-rows-2'} shadow  border-gray-400 h-full"
+	class="grid {!col ? 'grid-cols-2' : 'grid-rows-2'} shadow  border-gray-400 h-full max-h-screen"
 >
-	<div class="bg-white max-h-80 h-full p-1 overflow-auto relative">
+	<div class="bg-white {col ? '' : 'max-h-80'} h-full p-1 overflow-auto relative">
 		<span class="text-gray-500">Result</span>
-		<DisplayResult {result} />
+		{#if result}
+			<DisplayResult {result} />
+		{:else if loading}
+			<Loader2 class="animate-spin" />
+		{:else}
+			<div class="text-gray-400">No result (result is undefined)</div>
+		{/if}
 	</div>
-	<div class="overflow-auto max-h-80 h-full relative">
+	<div class="overflow-auto {col ? '' : 'max-h-80'} h-full relative">
 		<LogViewer content={logs ?? ''} isLoading={false} />
 	</div>
 </div>

package/components/FlowJobResult.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         logs: string;
         col?: boolean | undefined;
         noBorder?: boolean | undefined;
+        loading: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/FlowMetadata.svelte

@@ -1,7 +1,7 @@
 <script>import JobStatus from './JobStatus.svelte';
 import Icon from 'svelte-awesome';
-import { displayDaysAgo } from '../utils';
-import { faCalendar, faClock, faRobot, faScroll, faUser, faBarsStaggered } from '@fortawesome/free-solid-svg-icons';
+import { displayDate, displayDaysAgo } from '../utils';
+import { faCalendar, faClock, faRobot, faScroll, faUser, faBarsStaggered, faMemory } from '@fortawesome/free-solid-svg-icons';
 import ScheduleEditor from './ScheduleEditor.svelte';
 import { onDestroy, onMount } from 'svelte';
 let time = Date.now();
@@ -27,16 +27,31 @@ let scheduleEditor;
 		<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span
 			class="mx-2 text-2xs text-gray-600"
 		>
-			{#key time}
-				Received job {displayDaysAgo(job.created_at ?? '')}
-			{/key}</span
+			{#if job['success'] != undefined}
+				Received job: {displayDate(job.created_at ?? '')}
+			{:else}
+				{#key time}
+					Received job {displayDaysAgo(job.created_at ?? '')}
+				{/key}
+			{/if}</span
 		>
 	</div>
 	{#if job && 'started_at' in job && job.started_at}
 		<div>
 			<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span class="mx-2">
-				{#key time}
-					Started {displayDaysAgo(job.started_at ?? '')}{/key}</span
+				{#if job['success'] != undefined}
+					Started: {displayDate(job.started_at ?? '')}
+				{:else}
+					{#key time}
+						Started {displayDaysAgo(job.started_at ?? '')}{/key}
+				{/if}
+			</span>
+		</div>
+	{/if}
+	{#if job && job['mem_peak']}
+		<div>
+			<Icon class="text-gray-700" data={faMemory} scale={SMALL_ICON_SCALE} /><span class="mx-2">
+				Mem peak: {(job['mem_peak'] / 1024).toPrecision(5)}MB</span
 			>
 		</div>
 	{/if}
@@ -78,7 +93,8 @@ let scheduleEditor;
 		<div>
 			<Icon class="text-gray-700" data={faUser} scale={SMALL_ICON_SCALE} /><span class="mx-2">
 				By {job.created_by}
-				{#if job.permissioned_as !== `u/${job.created_by}`}but permissioned as {job.permissioned_as}{/if}
+				{#if job.permissioned_as !== `u/${job.created_by}` && job.permissioned_as != job.created_by}but
+					permissioned as {job.permissioned_as}{/if}
 			</span>
 		</div>
 	</div>

package/components/FlowPreviewContent.svelte

@@ -4,12 +4,11 @@ import { faClose, faPlay, faRefresh } from '@fortawesome/free-solid-svg-icons';
 import { Button, Kbd } from './common';
 import { createEventDispatcher, getContext } from 'svelte';
 import Icon from 'svelte-awesome';
-import { dfs, flowStore } from './flows/flowStore';
+import { dfs } from './flows/flowStore';
 import { runFlowPreview } from './flows/utils';
 import SchemaForm from './SchemaForm.svelte';
 import FlowStatusViewer from '../components/FlowStatusViewer.svelte';
 import FlowProgressBar from './flows/FlowProgressBar.svelte';
-import { flowStateStore } from './flows/flowState';
 import CapturePayload from './flows/content/CapturePayload.svelte';
 import { Loader2 } from 'lucide-svelte';
 let capturePayload;
@@ -17,10 +16,9 @@ export let previewMode;
 export let open;
 export let jobId = undefined;
 export let job = undefined;
-let isValid = true;
 let isRunning = false;
 let jobProgressReset;
-const { selectedId, previewArgs } = getContext('FlowEditorContext');
+const { selectedId, previewArgs, flowStateStore, flowStore } = getContext('FlowEditorContext');
 const dispatch = createEventDispatcher();
 function sliceModules(modules, upTo, idOrders) {
     return modules
@@ -97,7 +95,6 @@ $: if (job?.type === 'CompletedJob') {
 
 		{#if isRunning}
 			<Button
-				disabled={!isValid}
 				color="red"
 				on:click={async () => {
 					isRunning = false
@@ -124,7 +121,6 @@ $: if (job?.type === 'CompletedJob') {
 				color="blue"
 				size="sm"
 				btnClasses="w-full max-w-lg"
-				disabled={!isValid}
 				on:click={() => runPreview($previewArgs)}
 			>
 				Test flow <Kbd class="ml-2">Ctrl+Enter</Kbd>
@@ -141,19 +137,17 @@ $: if (job?.type === 'CompletedJob') {
 	</div>
 	<FlowProgressBar {job} bind:reset={jobProgressReset} />
 
-	<div class="overflow-y-auto grow flex-col flex divide-y divide-gray-600 ">
-		<div class="max-h-1/2 overflow-auto">
+	<div class="overflow-y-auto grow  divide-y divide-gray-600 pr-4">
+		<div class="max-h-1/2 overflow-auto border-b border-gray-700">
 			<SchemaForm
 				noVariablePicker
 				compact
 				class="py-4 max-w-3xl"
 				schema={$flowStore.schema}
-				bind:isValid
 				bind:args={$previewArgs}
 			/>
 		</div>
-
-		<div class="h-full pt-4 grow">
+		<div class="pt-4 grow">
 			{#if jobId}
 				<FlowStatusViewer bind:flowState={$flowStateStore} {jobId} bind:job />
 			{:else}

package/components/FlowStatusViewer.svelte

@@ -11,13 +11,14 @@ import DisplayResult from './DisplayResult.svelte';
 import Tabs from './common/tabs/Tabs.svelte';
 import { FlowGraph } from './graph';
 import ModuleStatus from './ModuleStatus.svelte';
-import { displayDate, isOwner, pluralize, truncateRev } from '../utils';
+import { displayDate, emptyString, isOwner, pluralize, truncateRev } from '../utils';
 import JobArgs from './JobArgs.svelte';
 import Tooltip from './Tooltip.svelte';
 import SimpleEditor from './SimpleEditor.svelte';
 import { Loader2 } from 'lucide-svelte';
 const dispatch = createEventDispatcher();
 export let jobId;
+export let workspaceId = undefined;
 export let flowState = undefined;
 export let flowJobIds = undefined;
 export let job = undefined;
@@ -68,19 +69,20 @@ function updateInnerModules() {
         if (mod.type === FlowStatusModule.type.WAITING_FOR_EVENTS &&
             localFlowModuleStates?.[innerModules?.[i - 1]?.id ?? '']?.type ==
                 FlowStatusModule.type.SUCCESS) {
-            localFlowModuleStates[mod.id ?? ''] = { type: mod.type };
+            localFlowModuleStates[mod.id ?? ''] = { type: mod.type, args: job?.args };
         }
         else if (mod.type === FlowStatusModule.type.WAITING_FOR_EXECUTOR &&
             localFlowModuleStates[mod.id ?? '']?.scheduled_for == undefined) {
             JobService.getJob({
-                workspace: $workspaceStore ?? '',
+                workspace: workspaceId ?? $workspaceStore ?? '',
                 id: mod.job ?? ''
             }).then((job) => {
                 localFlowModuleStates[mod.id ?? ''] = {
                     type: mod.type,
                     scheduled_for: 'scheduled for ' + displayDate(job?.['scheduled_for'], true),
                     job_id: job?.id,
-                    parent_module: mod['parent_module']
+                    parent_module: mod['parent_module'],
+                    args: job?.args
                 };
             });
         }
@@ -91,7 +93,7 @@ async function loadJobInProgress() {
     if (jobId != '00000000-0000-0000-0000-000000000000') {
         try {
             const newJob = await JobService.getJob({
-                workspace: $workspaceStore ?? '',
+                workspace: workspaceId ?? $workspaceStore ?? '',
                 id: jobId ?? ''
             });
             if (JSON.stringify(newJob) !== JSON.stringify(job)) {
@@ -123,10 +125,18 @@ onDestroy(() => {
     timeout && clearTimeout(timeout);
 });
 async function loadOwner(path) {
-    is_owner = await isOwner(path, $userStore, $workspaceStore);
+    is_owner = await isOwner(path, $userStore, workspaceId ?? $workspaceStore);
 }
 let selected = 'graph';
 let payload = '"a test payload in json"';
+function isSuccess(arg) {
+    if (arg == undefined) {
+        return undefined;
+    }
+    else {
+        return arg == true;
+    }
+}
 </script>
 
 {#if job}
@@ -143,7 +153,11 @@ let payload = '"a test payload in json"';
 				<FlowPreviewStatus {job} />
 				{#if `result` in job}
 					<div class="w-full h-full">
-						<FlowJobResult result={job.result} logs={job.logs ?? ''} />
+						<FlowJobResult
+							loading={job['running'] == true}
+							result={job.result}
+							logs={job.logs ?? ''}
+						/>
 					</div>
 				{:else if job.flow_status?.modules?.[job?.flow_status?.step]?.type === FlowStatusModule.type.WAITING_FOR_EVENTS}
 					<div class="w-full h-full mt-2 text-sm text-gray-600">
@@ -157,7 +171,7 @@ let payload = '"a test payload in json"';
 											variant="border"
 											on:click={async () =>
 												await JobService.resumeSuspendedFlowAsOwner({
-													workspace: $workspaceStore ?? '',
+													workspace: workspaceId ?? $workspaceStore ?? '',
 													id: job?.id ?? '',
 													requestBody: JSON.parse(payload)
 												})}
@@ -189,14 +203,21 @@ let payload = '"a test payload in json"';
 					<div class="flex flex-col gap-1">
 						{#each innerModules as mod, i (mod.id)}
 							{#if mod.type == FlowStatusModule.type.IN_PROGRESS}
+								{@const rawMod = job.raw_flow?.modules[i]}
+
 								<div
 									><span class="inline-flex gap-1"
 										><Badge color="indigo">{mod.id}</Badge>
-										{#if job.raw_flow?.modules[i]?.summary}
-											<span class="font-medium text-gray-900">
-												{job.raw_flow?.modules[i]?.summary ?? ''}
-											</span>
-										{/if}
+										<span class="font-medium text-gray-900">
+											{#if !emptyString(rawMod?.summary)}
+												{rawMod?.summary ?? ''}
+											{:else if rawMod?.value.type == 'script'}
+												{rawMod.value.path ?? ''}
+											{:else if rawMod?.value.type}
+												{rawMod?.value.type}
+											{/if}
+										</span>
+
 										<Loader2 class="animate-spin" /></span
 									></div
 								>
@@ -248,6 +269,7 @@ let payload = '"a test payload in json"';
 					</Button>
 					<div class="border p-6" class:hidden={forloop_selected != loopJobId}>
 						<svelte:self
+							{workspaceId}
 							bind:suspend_status
 							bind:retry_status
 							bind:flowState
@@ -273,10 +295,12 @@ let payload = '"a test payload in json"';
 											type: FlowStatusModule.type.IN_PROGRESS,
 											logs: e.detail.logs,
 											job_id: e.detail.id,
+											args: e.detail.args,
 											iteration_total: flowJobIds?.flowJobs.length
 										}
 									} else {
 										localFlowModuleStates[flowJobIds.moduleId] = {
+											args: e.detail.args,
 											type: e.detail.success
 												? FlowStatusModule.type.SUCCESS
 												: FlowStatusModule.type.FAILURE,
@@ -320,6 +344,7 @@ let payload = '"a test payload in json"';
 						<li class="w-full border border-gray-600 p-6 space-y-2 bg-blue-50/50">
 							{#if [FlowStatusModule.type.IN_PROGRESS, FlowStatusModule.type.SUCCESS, FlowStatusModule.type.FAILURE].includes(mod.type)}
 								<svelte:self
+									{workspaceId}
 									bind:suspend_status
 									bind:retry_status
 									bind:flowState
@@ -341,10 +366,12 @@ let payload = '"a test payload in json"';
 												localFlowModuleStates[mod.id] = {
 													type: FlowStatusModule.type.IN_PROGRESS,
 													logs: e.detail.logs,
+													args: e.detail.args,
 													parent_module: mod['parent_module']
 												}
 											} else {
 												localFlowModuleStates[mod.id] = {
+													args: e.detail.args,
 													type: e.detail.success
 														? FlowStatusModule.type.SUCCESS
 														: FlowStatusModule.type.FAILURE,
@@ -389,14 +416,19 @@ let payload = '"a test payload in json"';
 					</div>
 
 					<FlowGraph
+						success={isSuccess(job?.['success'])}
 						flowModuleStates={localFlowModuleStates}
-						on:click={(e) => {
-							if (e.detail.id) {
+						on:select={(e) => {
+							if (typeof e.detail == 'string') {
+								if (e.detail == 'Input') {
+									selectedNode = 'start'
+								} else if (e.detail == 'Result') {
+									selectedNode = 'end'
+								} else {
+									selectedNode = e.detail
+								}
+							} else {
 								selectedNode = e.detail.id
-							} else if (e.detail == 'Result') {
-								selectedNode = 'end'
-							} else if (e.detail == 'Input') {
-								selectedNode = 'start'
 							}
 						}}
 						modules={job.raw_flow?.modules ?? []}
@@ -407,7 +439,13 @@ let payload = '"a test payload in json"';
 					{#if selectedNode}
 						{@const node = localFlowModuleStates[selectedNode]}
 						{#if selectedNode == 'end'}
-							<FlowJobResult noBorder col result={job['result'] ?? {}} logs={job.logs ?? ''} />
+							<FlowJobResult
+								loading={job['running']}
+								noBorder
+								col
+								result={job['result']}
+								logs={job.logs ?? ''}
+							/>
 						{:else if selectedNode == 'start'}
 							{#if job.args}
 								<div class="p-2">
@@ -434,7 +472,17 @@ let payload = '"a test payload in json"';
 									</div>
 								{/if}
 							</div>
-							<FlowJobResult noBorder col result={node.result ?? {}} logs={node.logs ?? ''} />
+							<div class="px-1 border-b border-black">
+								<JobArgs args={node.args} />
+							</div>
+
+							<FlowJobResult
+								loading={job['running'] == true}
+								noBorder
+								col
+								result={node.result}
+								logs={node.logs ?? ''}
+							/>
 						{:else}
 							<p class="p-2 text-gray-600 italic"
 								>The execution of this node has no information attached to it. The job likely did

package/components/FlowStatusViewer.svelte.d.ts

@@ -5,6 +5,7 @@ import { type GraphModuleState } from './graph';
 declare const __propDef: {
     props: {
         jobId: string;
+        workspaceId?: string | undefined;
         flowState?: FlowState | undefined;
         flowJobIds?: {
             moduleId: string;

package/components/FlowViewer.svelte

@@ -52,7 +52,6 @@ function toAny(x) {
 									type={toAny(v)?.type}
 									contentEncoding={toAny(v)?.contentEncoding}
 									format={toAny(v)?.format}
-									itemsType={toAny(v)?.itemsType}
 								/><span class="ml-4 mt-2 text-xs"
 									>{toAny(v)?.default != undefined
 										? 'default: ' + JSON.stringify(toAny(v)?.default)