windmill-components 1.623.2 → 1.655.0

package/package/components/flows/content/FlowFailureModule.svelte.d.ts

@@ -1,22 +1,8 @@
 import type { FlowModule } from '../../../gen';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FlowFailureModule: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     noEditor?: boolean;
     savedModule?: FlowModule | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FlowFailureModule = InstanceType<typeof FlowFailureModule>;
+}
+declare const FlowFailureModule: import("svelte").Component<Props, {}, "">;
+type FlowFailureModule = ReturnType<typeof FlowFailureModule>;
 export default FlowFailureModule;

package/package/components/flows/content/FlowInputs.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { Alert } from '../../common';
 import ToggleHubWorkspace from '../../ToggleHubWorkspace.svelte';
 import Tooltip from '../../Tooltip.svelte';
-import { createEventDispatcher, getContext } from 'svelte';
+import { createEventDispatcher, getContext, untrack } from 'svelte';
 import FlowScriptPicker from '../pickers/FlowScriptPicker.svelte';
 import PickHubScript from '../pickers/PickHubScript.svelte';
 import WorkspaceScriptPicker from '../pickers/WorkspaceScriptPicker.svelte';
@@ -17,7 +17,7 @@ import DefaultScripts from '../../DefaultScripts.svelte';
 import { canHavePreprocessor } from '../../../script_helpers';
 let { failureModule, preprocessorModule, shouldDisableTriggerScripts = false, noEditor, summary = $bindable(undefined) } = $props();
 const dispatch = createEventDispatcher();
-let kind = $state(failureModule
+let kind = $state(untrack(() => failureModule)
     ? 'failure'
     : summary == 'Trigger'
         ? 'trigger'
@@ -251,6 +251,24 @@ let customUi = getContext('customUi');
 			{/each}
 		</div>
 
+		{#if !failureModule && !preprocessorModule}
+			<h3 class="pb-2 pt-4">AI Sandbox</h3>
+			<div class="flex flex-row flex-wrap gap-2">
+				<FlowScriptPicker
+					label="Claude Code"
+					lang="claudesandbox"
+					on:click={() => {
+						dispatch('new', {
+							language: 'bun',
+							kind,
+							subkind: 'claudesandbox',
+							summary
+						})
+					}}
+				/>
+			</div>
+		{/if}
+
 		<h3 class="mb-2 mt-6"
 			>Use pre-made <span class="text-blue-500 dark:text-blue-400"
 				>{kind == 'script' ? 'action' : kind}</span

package/package/components/flows/content/FlowInputsQuick.svelte

@@ -402,6 +402,27 @@ let aiLength = $derived(funcDesc?.length > 0 && !disableAi && selectedKind != 'f
 			{/await}
 			<div class="pb-1"></div>
 		{/if}
+		{#if selectedKind === 'script' && preFilter === 'all' && !selected}
+			<div class="pb-0 text-2xs font-normal text-secondary ml-2">AI Sandbox</div>
+			<FlowScriptPickerQuick
+				eeRestricted={false}
+				selected={false}
+				enterpriseLangs={[]}
+				label="Claude Code"
+				lang="claudesandbox"
+				on:click={() => {
+					dispatch('new', {
+						kind: selectedKind,
+						inlineScript: {
+							language: 'bun',
+							kind: selectedKind,
+							subkind: 'claudesandbox',
+							summary
+						}
+					})
+				}}
+			/>
+		{/if}
 		{#if selectedKind != 'preprocessor' && selectedKind != 'flow'}
 			{#if (!selected || selected?.kind === 'integrations') && (preFilter === 'hub' || preFilter === 'all')}
 				{#if !selected && preFilter !== 'hub'}

package/package/components/flows/content/FlowLoop.svelte

@@ -18,7 +18,7 @@ import FlowModuleDeleteAfterUse from './FlowModuleDeleteAfterUse.svelte';
 import IteratorGen from '../../copilot/IteratorGen.svelte';
 import FlowModuleSkip from './FlowModuleSkip.svelte';
 import FlowPlugConnect from '../../FlowPlugConnect.svelte';
-import PropPickerWrapper, { CONNECT } from '../propPicker/PropPickerWrapper.svelte';
+import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte';
 import TabsV2 from '../../common/tabs/TabsV2.svelte';
 import { useUiIntent } from '../../copilot/chat/flow/useUiIntent';
 import { emptySchema } from '../../../utils';
@@ -128,7 +128,8 @@ let suggestion = $state(undefined);
 								documentationLink="https://www.windmill.dev/docs/flows/flow_loops"
 								>If disabled, the flow will fail as soon as one of the iteration fail. Otherwise,
 								the error will be collected as the result of the iteration. Regardless of this
-								setting, if an error handler is defined, it will process the error.</Tooltip
+								setting, if a flow level error handler is defined, it will process the error.
+								(Workspace error handlers will NOT be used to process errors if enabled.)</Tooltip
 							></div
 						>
 						<Toggle
@@ -312,10 +313,9 @@ let suggestion = $state(undefined);
 						</Tooltip>
 					</div>
 					<FlowPlugConnect
-						connecting={$flowPropPickerConfig?.insertionMode == CONNECT}
+						connecting={$flowPropPickerConfig != undefined}
 						on:click={() => {
 							const config = {
-								insertionMode: CONNECT,
 								onSelect: (code) => {
 									setExpr(code)
 									return true
@@ -357,7 +357,7 @@ let suggestion = $state(undefined);
 							notSelectable
 							pickableProperties={stepPropPicker.pickableProperties}
 							on:select={({ detail }) => {
-								if ($flowPropPickerConfig?.insertionMode == CONNECT) {
+								if ($flowPropPickerConfig) {
 									setExpr(detail)
 									flowPropPickerConfig.set(undefined)
 									return
@@ -377,7 +377,6 @@ let suggestion = $state(undefined);
 									on:blur={() => {
 										iteratorFieldFocused = false
 									}}
-									autofocus
 									lang="javascript"
 									bind:code={mod.value.iterator.expr}
 									class="h-full"

package/package/components/flows/content/FlowModuleCache.svelte

@@ -37,9 +37,7 @@ let isCacheEnabled = $derived(Boolean(flowModule.cache_ttl));
 		/>
 		{#if flowModule.cache_ttl}
 			<Label label="How long to keep cache valid">
-				<div class="-mt-5">
-					<SecondsInput bind:seconds={flowModule.cache_ttl} />
-				</div>
+				<SecondsInput bind:seconds={flowModule.cache_ttl} />
 			</Label>
 			<Toggle
 				size="2xs"

package/package/components/flows/content/FlowModuleComponent.svelte

@@ -30,7 +30,7 @@ import InputTransformSchemaForm from '../../InputTransformSchemaForm.svelte';
 import FlowModuleMockTransitionMessage from './FlowModuleMockTransitionMessage.svelte';
 import Tooltip from '../../Tooltip.svelte';
 import { SecondsInput } from '../../common';
-import DiffEditor, {} from '../../DiffEditor.svelte';
+import DiffEditor from '../../DiffEditor.svelte';
 import FlowModuleTimeout from './FlowModuleTimeout.svelte';
 import HighlightCode from '../../HighlightCode.svelte';
 import ToggleButtonGroup from '../../common/toggleButton-v2/ToggleButtonGroup.svelte';
@@ -85,7 +85,7 @@ let websocketAlive = $state({
     ruff: false,
     shellcheck: false
 });
-let selected = $state(preprocessorModule ? 'test' : 'inputs');
+let selected = $state(untrack(() => preprocessorModule) ? 'test' : 'inputs');
 let advancedSelected = $state('retries');
 let advancedRuntimeSelected = $state('concurrency');
 let s3Kind = $state('s3_client');
@@ -162,7 +162,7 @@ function selectAdvanced(subtab) {
     advancedSelected = subtab;
 }
 let forceReload = $state(0);
-let editorPanelSize = $state(noEditor ? 0 : flowModule.value.type == 'script' ? 30 : 50);
+let editorPanelSize = $state(untrack(() => noEditor) ? 0 : flowModule.value.type == 'script' ? 30 : 50);
 let editorSettingsPanelSize = $state(100 - untrack(() => editorPanelSize));
 let stepHistoryLoader = getStepHistoryLoaderContext();
 function onSelectedIdChange() {
@@ -499,7 +499,10 @@ $effect(() => {
     if (lastDebugLang !== undefined && lastDebugLang !== currentLang && debugMode) {
         untrack(() => {
             if (dapClient) {
-                dapClient.terminate().catch(() => { }).finally(() => {
+                dapClient
+                    .terminate()
+                    .catch(() => { })
+                    .finally(() => {
                     dapClient?.disconnect();
                 });
             }
@@ -756,6 +759,7 @@ onDestroyHook(() => {
 																key={`flow-inline-${$workspaceStore}-${$pathStore}-${flowModule.id}`}
 																moduleId={flowModule.id}
 																preparedAssetsSqlQueries={preparedSqlQueries.current}
+																customTag={flowModule.value.tag}
 															/>
 														</div>
 													</Pane>
@@ -818,6 +822,7 @@ onDestroyHook(() => {
 														key={`flow-inline-${$workspaceStore}-${$pathStore}-${flowModule.id}`}
 														moduleId={flowModule.id}
 														preparedAssetsSqlQueries={preparedSqlQueries.current}
+														customTag={flowModule.value.tag}
 													/>
 												</div>
 											{/if}
@@ -896,7 +901,7 @@ onDestroyHook(() => {
 														></div>
 													{/if}
 													<InputTransformSchemaForm
-														class="px-2 xl:px-4"
+														class="px-2 xl:px-4 pb-8"
 														bind:this={inputTransformSchemaForm}
 														pickableProperties={stepPropPicker.pickableProperties}
 														schema={flowStateStore.val[selectedId]?.schema ?? {}}
@@ -919,6 +924,9 @@ onDestroyHook(() => {
 														extraLib={stepPropPicker.extraLib}
 														{enableAi}
 														{isAgentTool}
+														allowedAiTransforms={isAgentTool && flowModule.value.type === 'aiagent'
+														? ['user_message']
+														: undefined}
 														helperScript={retrieveDynCodeAndLang(flowModule.value)}
 														chatInputEnabled={flowStore.val.value?.chat_input_enabled ?? false}
 													/>
@@ -1056,6 +1064,7 @@ onDestroyHook(() => {
 																<SecondsInput
 																	disabled={!$enterpriseLicense}
 																	bind:seconds={flowModule.value.concurrency_time_window_s}
+																	clearable
 																/>
 															</Label>
 															<Label label="Custom concurrency key (optional)">
@@ -1271,7 +1280,9 @@ onDestroyHook(() => {
 																	/>
 																</div>
 															{:else}
-																<div class="h-full flex items-center justify-center text-sm text-tertiary">
+																<div
+																	class="h-full flex items-center justify-center text-sm text-tertiary"
+																>
 																	{#if $debugState.running && !$debugState.stopped}
 																		Running...
 																	{:else if $debugState.stopped}
@@ -1338,12 +1349,17 @@ onDestroyHook(() => {
 <Modal title="Debug Feature (Beta)" bind:open={showDebugBetaWarning}>
 	<div class="flex items-start gap-3">
 		<div class="flex-shrink-0">
-			<div class="flex h-10 w-10 items-center justify-center rounded-full bg-yellow-100 dark:bg-yellow-800/50">
+			<div
+				class="flex h-10 w-10 items-center justify-center rounded-full bg-yellow-100 dark:bg-yellow-800/50"
+			>
 				<AlertTriangle class="h-5 w-5 text-yellow-600 dark:text-yellow-400" />
 			</div>
 		</div>
 		<div class="text-secondary text-sm">
-			<p>The Debug feature is currently in <strong>beta</strong>. You may encounter unexpected behavior or limitations.</p>
+			<p
+				>The Debug feature is currently in <strong>beta</strong>. You may encounter unexpected
+				behavior or limitations.</p
+			>
 			<p class="mt-2">By continuing, you acknowledge that this feature is experimental.</p>
 		</div>
 	</div>

package/package/components/flows/content/FlowModuleMockTransitionMessage.svelte

@@ -2,7 +2,7 @@
 import { base } from '../../../base';
 import DarkModeObserver from '../../DarkModeObserver.svelte';
 import { Info } from 'lucide-svelte';
-let darkMode = true;
+let darkMode = $state(true);
 function openFullscreen(event) {
     const img = event.target;
     if (img.requestFullscreen) {
@@ -56,13 +56,13 @@ function openFullscreen(event) {
 					<div
 						class="border rounded-md p-1 bg-white dark:bg-slate-800 h-56 overflow-hidden shadow-sm group-hover:shadow transition-shadow"
 					>
-						<!--svelte-ignore a11y-click-events-have-key-events-->
-						<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+						<!--svelte-ignore a11y_click_events_have_key_events-->
+						<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 						<img
 							class="w-full h-full object-contain opacity-70 hover:opacity-100 cursor-pointer"
 							src={darkMode ? `${base}/pin-history-dark.png` : `${base}/pin-history.png`}
 							alt="History picker"
-							on:click={openFullscreen}
+							onclick={openFullscreen}
 						/>
 					</div>
 				</div>
@@ -79,13 +79,13 @@ function openFullscreen(event) {
 					<div
 						class="border rounded-md p-1 bg-white dark:bg-slate-800 h-56 overflow-hidden shadow-sm group-hover:shadow transition-shadow"
 					>
-						<!--svelte-ignore a11y-click-events-have-key-events-->
-						<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+						<!--svelte-ignore a11y_click_events_have_key_events-->
+						<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 						<img
 							class="w-full h-full object-contain opacity-70 hover:opacity-100 cursor-pointer"
 							src={darkMode ? `${base}/pin-pin-dark.png` : `${base}/pin-pin.png`}
 							alt="Pin action"
-							on:click={openFullscreen}
+							onclick={openFullscreen}
 						/>
 					</div>
 				</div>
@@ -102,13 +102,13 @@ function openFullscreen(event) {
 					<div
 						class="border rounded-md p-1 bg-white dark:bg-slate-800 h-56 overflow-hidden shadow-sm group-hover:shadow transition-shadow"
 					>
-						<!--svelte-ignore a11y-click-events-have-key-events-->
-						<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+						<!--svelte-ignore a11y_click_events_have_key_events-->
+						<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 						<img
 							class="w-full h-full object-contain opacity-70 hover:opacity-100 cursor-pointer"
 							src={darkMode ? `${base}/pin-restore-dark.png` : `${base}/pin-restore.png`}
 							alt="Recover pins"
-							on:click={openFullscreen}
+							onclick={openFullscreen}
 						/>
 					</div>
 				</div>
@@ -126,13 +126,13 @@ function openFullscreen(event) {
 					<div
 						class="border rounded-md p-1 bg-white dark:bg-slate-800 h-56 overflow-hidden shadow-sm group-hover:shadow transition-shadow"
 					>
-						<!--svelte-ignore a11y-click-events-have-key-events-->
-						<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+						<!--svelte-ignore a11y_click_events_have_key_events-->
+						<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 						<img
 							class="w-full h-full object-contain opacity-70 hover:opacity-100 cursor-pointer"
 							src={darkMode ? `${base}/pin-flow-view-dark.png` : `${base}/pin-flow-view.png`}
 							alt="Flow view pinning"
-							on:click={openFullscreen}
+							onclick={openFullscreen}
 						/>
 					</div>
 				</div>

package/package/components/flows/content/FlowModuleMockTransitionMessage.svelte.d.ts

@@ -1,18 +1,3 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FlowModuleMockTransitionMessage: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FlowModuleMockTransitionMessage = InstanceType<typeof FlowModuleMockTransitionMessage>;
+declare const FlowModuleMockTransitionMessage: import("svelte").Component<Record<string, never>, {}, "">;
+type FlowModuleMockTransitionMessage = ReturnType<typeof FlowModuleMockTransitionMessage>;
 export default FlowModuleMockTransitionMessage;

package/package/components/flows/content/FlowModuleScript.svelte

@@ -28,7 +28,7 @@ function getCachedValues(path, hash) {
     tag = cachedValues[key]?.tag;
     notFound = cachedValues[key]?.notFound ?? false;
 }
-getCachedValues(path, hash);
+getCachedValues(untrack(() => path), untrack(() => hash));
 async function loadPreviousCode(previousHash) {
     try {
         const previousScript = await ScriptService.getScriptByHash({

package/package/components/flows/content/FlowModuleSleep.svelte

@@ -65,7 +65,7 @@ let isSleepEnabled = $derived(Boolean(flowModule.sleep));
 						argName="sleep"
 						{schema}
 						{previousModuleId}
-						argExtra={{ seconds: true }}
+						argExtra={{ seconds: true, clearable: false }}
 						bind:editor
 					/>
 				</PropPickerWrapper>

package/package/components/flows/content/FlowPathViewer.svelte

@@ -1,13 +1,13 @@
-<script lang="ts">import Skeleton from '../../common/skeleton/Skeleton.svelte';
+<script lang="ts">import { run } from 'svelte/legacy';
+import Skeleton from '../../common/skeleton/Skeleton.svelte';
 import FlowGraphViewer from '../../FlowGraphViewer.svelte';
 import { Triggers } from '../../triggers/triggers.svelte';
 import { FlowService } from '../../../gen';
 import { workspaceStore } from '../../../stores';
 import { setContext } from 'svelte';
 import { writable } from 'svelte/store';
-export let path;
-export let noSide = false;
-let flow = undefined;
+let { path, noSide = false } = $props();
+let flow = $state(undefined);
 const triggersCount = writable(undefined);
 setContext('TriggerContext', {
     triggersCount: triggersCount,
@@ -19,7 +19,9 @@ async function loadFlow(path) {
     flow = await FlowService.getFlowByPath({ workspace: $workspaceStore, path });
     triggersCount.set(await FlowService.getTriggersCountOfFlow({ workspace: $workspaceStore, path }));
 }
-$: path && loadFlow(path);
+run(() => {
+    path && loadFlow(path);
+});
 </script>
 
 <div class="flex flex-col flex-1 h-full overflow-auto">

package/package/components/flows/content/FlowPathViewer.svelte.d.ts

@@ -1,21 +1,7 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FlowPathViewer: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     path: string;
     noSide?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FlowPathViewer = InstanceType<typeof FlowPathViewer>;
+}
+declare const FlowPathViewer: import("svelte").Component<Props, {}, "">;
+type FlowPathViewer = ReturnType<typeof FlowPathViewer>;
 export default FlowPathViewer;

package/package/components/flows/content/FlowPreprocessorModule.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">import { getContext } from 'svelte';
 import FlowModuleWrapper from './FlowModuleWrapper.svelte';
-export let noEditor = false;
-export let savedModule = undefined;
-const { flowStore } = getContext('FlowEditorContext');
+let { noEditor = false, savedModule = undefined } = $props();
+const { flowStore } = $state(getContext('FlowEditorContext'));
 </script>
 
 {#if flowStore.val.value.preprocessor_module}

package/package/components/flows/content/FlowPreprocessorModule.svelte.d.ts

@@ -1,22 +1,8 @@
 import type { FlowModule } from '../../../gen';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FlowPreprocessorModule: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     noEditor?: boolean;
     savedModule?: FlowModule | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FlowPreprocessorModule = InstanceType<typeof FlowPreprocessorModule>;
+}
+declare const FlowPreprocessorModule: import("svelte").Component<Props, {}, "">;
+type FlowPreprocessorModule = ReturnType<typeof FlowPreprocessorModule>;
 export default FlowPreprocessorModule;

package/package/components/flows/content/FlowResult.svelte

@@ -1,34 +1,86 @@
-<script lang="ts">import FlowPreviewResult from '../../FlowPreviewResult.svelte';
+<script lang="ts">import FlowExecutionStatus from '../../runs/FlowExecutionStatus.svelte';
 import { workspaceStore } from '../../../stores';
 import FlowCard from '../common/FlowCard.svelte';
 import Button from '../../common/button/Button.svelte';
+import JobDetailHeader from '../../runs/JobDetailHeader.svelte';
+import DisplayResult from '../../DisplayResult.svelte';
+import LogViewer from '../../LogViewer.svelte';
 let { job, isOwner, suspendStatus, noEditor, onOpenDetails } = $props();
 </script>
 
 <FlowCard {noEditor} title="Flow result">
-	{#if job && isOwner !== undefined && suspendStatus}
-		<div class="px-4 py-2">
-			<FlowPreviewResult
-				{job}
-				workspaceId={$workspaceStore}
-				{isOwner}
-				hideFlowResult={false}
-				hideDownloadLogs={false}
-				innerModules={[]}
-				{suspendStatus}
-				{extra}
-				hideJobId
-			/>
-		</div>
-	{:else}
-		<p class="p-4 text-secondary text-xs">
-			The result of the flow will be the result of the last node.
-		</p>
-	{/if}
-</FlowCard>
+	<div class="px-4 py-2">
+		{#if job}
+			<!-- Side-by-side result and logs for simple jobs -->
+			<div class="w-full flex flex-row gap-2 justify-start mb-4">
+				<div class="flex-1 min-w-min">
+					{#if job}
+						<JobDetailHeader {job} extraCompact />
+					{/if}
+				</div>
+
+				<Button variant="default" unifiedSize="md" onClick={() => onOpenDetails?.()}
+					>Open preview</Button
+				>
+			</div>
+
+			{#if isOwner !== undefined && suspendStatus}
+				<FlowExecutionStatus
+					{job}
+					workspaceId={$workspaceStore}
+					{isOwner}
+					innerModules={job?.flow_status?.modules}
+					{suspendStatus}
+				/>
 
-{#snippet extra()}
-	<div class="flex justify-end">
-		<Button variant="default" size="xs" on:click={() => onOpenDetails?.()}>Open details</Button>
+				<div class="py-2"></div>
+			{/if}
+
+			<div class="flex flex-col gap-4 h-full w-full">
+				<!-- Result Column -->
+				<div class="flex flex-col">
+					<h3 class="text-xs font-semibold text-emphasis mb-1">Result</h3>
+					<div class="flex-1 overflow-auto rounded-md border bg-surface-tertiary p-4 max-h-[400px]">
+						{#if job !== undefined && (job['result_stream'] || (job.type == 'CompletedJob' && 'result' in job && job.result !== undefined))}
+							<DisplayResult
+								workspaceId={job?.workspace_id}
+								result_stream={job['result_stream']}
+								jobId={job?.id}
+								result={'result' in job ? job.result : undefined}
+								language={job?.language}
+								isTest={false}
+							/>
+						{:else if job}
+							<div class="w-full h-full flex items-center justify-center text-secondary text-sm">
+								No output is available yet
+							</div>
+						{:else}
+							<div class="w-full h-full flex items-center justify-center">
+								<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+							</div>
+						{/if}
+					</div>
+				</div>
+
+				<!-- Logs Column -->
+				<div class="flex flex-col">
+					<h3 class="text-xs font-semibold text-emphasis mb-1">Logs</h3>
+					<div class="max-h-[400px] rounded-md border overflow-auto">
+						<LogViewer
+							jobId={job.id}
+							duration={job?.['duration_ms']}
+							mem={job?.['mem_peak']}
+							isLoading={job?.['running'] == false}
+							content={job?.logs}
+							tag={job?.tag}
+						/>
+					</div>
+				</div>
+			</div>
+		{:else}
+			<p class="p-4 text-secondary text-xs">
+				The result of the flow will be the result of the last node.
+			</p>
+		{/if}
 	</div>
-{/snippet}
+</FlowCard>

package/package/components/flows/content/FlowRetries.svelte

@@ -197,7 +197,7 @@ const u32Max = 4294967295;
 							>max</button
 						>
 					</div>
-					<div class="text-xs font-bold !mt-2">Delay</div>
+					<div class="text-xs font-bold !mt-4">Delay</div>
 					<SecondsInput bind:seconds={flowModuleRetry.constant.seconds} />
 				{/if}
 			{:else if delayType === 'exponential'}