windmill-components 1.623.2 → 1.655.0

package/package/components/FlowStatusViewerInner.svelte

@@ -12,7 +12,7 @@ import {} from './graph';
 import ModuleStatus from './ModuleStatus.svelte';
 import { clone, isScriptPreview, msToSec, readFieldsRecursively, truncateRev } from '../utils';
 import JobArgs from './JobArgs.svelte';
-import { ChevronDown, Hourglass } from 'lucide-svelte';
+import { ChevronDown, ExternalLink, Hourglass } from 'lucide-svelte';
 import { deepEqual } from 'fast-equals';
 import FlowTimeline from './FlowTimeline.svelte';
 import { dfs } from './flows/dfs';
@@ -22,7 +22,6 @@ import FlowGraphViewerStep from './FlowGraphViewerStep.svelte';
 import FlowGraphV2 from './graph/FlowGraphV2.svelte';
 import { buildPrefix } from './graph/graphBuilder.svelte';
 import { parseInputArgsAssets } from './assets/lib';
-import FlowPreviewResult from './FlowPreviewResult.svelte';
 import FlowLogViewerWrapper from './FlowLogViewerWrapper.svelte';
 import { createState } from '../svelte5Utils.svelte';
 import JobLoader from './JobLoader.svelte';
@@ -30,13 +29,19 @@ import { AI_TOOL_CALL_PREFIX, AI_TOOL_MESSAGE_PREFIX, AI_MCP_TOOL_CALL_PREFIX, A
 import JobAssetsViewer from './assets/JobAssetsViewer.svelte';
 import McpToolCallDetails from './McpToolCallDetails.svelte';
 import JobOtelTraces from './JobOtelTraces.svelte';
+import JobDetailHeader from './runs/JobDetailHeader.svelte';
+import LogViewer from './LogViewer.svelte';
 import { SelectionManager } from './graph/selectionUtils.svelte';
 import { useThrottle } from 'runed';
-let { flowState: flowStateStore, retryStatus, suspendStatus, hideDownloadInGraph, hideTimeline, hideNodeDefinition, hideDownloadLogs, hideJobId } = getContext('FlowStatusViewer');
-let { jobId, initialJob = undefined, workspaceId = undefined, flowJobIds = undefined, innerModule = undefined, render = true, isOwner = false, selectedNode = $bindable(undefined), globalModuleStates, globalDurationStatuses = [], updateRecursiveRefreshFn = undefined, isSelectedBranch = true, isSubflow = false, reducedPolling = false, wideResults = false, hideFlowResult = false, workspace = $workspaceStore, prefix = undefined, topModuleStates = undefined, refreshGlobal, updateGlobalRefresh, subflowParentsGlobalModuleStates = [], subflowParentsDurationStatuses = [], isForloopSelected = false, job = $bindable(undefined), rightColumnSelect = $bindable('timeline'), localModuleStates = $bindable({}), localDurationStatuses = $bindable({}), customUi, onResultStreamUpdate = undefined, graphTabOpen, isNodeSelected, loadExtraLogs = undefined, onStart = undefined, onJobsLoaded = undefined, onDone = undefined, toolCallStore } = $props();
+import { Splitpanes, Pane } from 'svelte-splitpanes';
+import { getActiveReplay } from './recording/flowRecording.svelte';
+let { flowState: flowStateStore, retryStatus, suspendStatus, hideDownloadInGraph, hideTimeline, hideNodeDefinition, hideDownloadLogs } = getContext('FlowStatusViewer');
+let { jobId, initialJob = undefined, workspaceId = undefined, flowJobIds = undefined, innerModule = undefined, render = true, selectedNode = $bindable(undefined), globalModuleStates, globalDurationStatuses = [], updateRecursiveRefreshFn = undefined, isSelectedBranch = true, isSubflow = false, reducedPolling = false, wideResults = false, workspace = $workspaceStore, prefix = undefined, topModuleStates = undefined, refreshGlobal, updateGlobalRefresh, subflowParentsGlobalModuleStates = [], subflowParentsDurationStatuses = [], isForloopSelected = false, job = $bindable(undefined), rightColumnSelect = $bindable('timeline'), localModuleStates = $bindable({}), localDurationStatuses = $bindable({}), customUi, onResultStreamUpdate = undefined, graphTabOpen, isNodeSelected, loadExtraLogs = undefined, onStart = undefined, onJobsLoaded = undefined, onDone = undefined, toolCallStore, showLogsWithResult = false, showJobDetailHeader = false } = $props();
 let getTopModuleStates = $derived(topModuleStates ?? localModuleStates);
+// Cache replay check to avoid repeated function calls in the template
+let isReplay = $derived(!!getActiveReplay());
 let resultStreams = $state({});
-if (onResultStreamUpdate == undefined) {
+if (untrack(() => onResultStreamUpdate) == undefined) {
     onResultStreamUpdate = ({ jobId, result_stream }) => {
         resultStreams[jobId] = result_stream;
     };
@@ -61,12 +66,14 @@ $effect(() => {
             for (const asset of inputAssets) {
                 if (asset.kind === 'resource' && !(asset.path in resourceMetadataCache)) {
                     resourceMetadataCache[asset.path] = undefined;
-                    ResourceService.getResource({
-                        workspace: workspace ?? $workspaceStore,
-                        path: asset.path
-                    })
-                        .then((r) => (resourceMetadataCache[asset.path] = r))
-                        .catch((err) => { });
+                    if (!isReplay) {
+                        ResourceService.getResource({
+                            workspace: workspace ?? $workspaceStore,
+                            path: asset.path
+                        })
+                            .then((r) => (resourceMetadataCache[asset.path] = r))
+                            .catch((err) => { });
+                    }
                 }
             }
             extendedFlowGraphAssetsCtx.val = clone(_flowGraphAssetsCtx?.val);
@@ -74,7 +81,7 @@ $effect(() => {
         }
     });
 });
-let jobResults = $state(flowJobIds?.flowJobs?.map((x, id) => `iter #${id + 1} not loaded by frontend yet`) ?? []);
+let jobResults = $state(untrack(() => flowJobIds)?.flowJobs?.map((x, id) => `iter #${id + 1} not loaded by frontend yet`) ?? []);
 let retry_selected = $state('');
 let timeout = undefined;
 let expandedSubflows = $state({});
@@ -314,11 +321,9 @@ let setSelectedLoopSwitch = useThrottle(async (lastStarted, mod) => {
             break;
         }
         else if (flow_job !== lastStarted && suspendStatus.val[flow_job]) {
-            console.log('setSelectedLoopSwitch deleting suspend for', flow_job);
             delete suspendStatus.val[flow_job];
         }
     }
-    console.log('setSelectedLoopSwitch', position, lastStarted, mod.id, suspendStatus);
     setIteration(position, lastStarted, false, mod.id ?? '', true);
 }, 2000);
 function updateInnerModules() {
@@ -334,27 +339,29 @@ function updateInnerModules() {
             }
             else if (mod.type === 'WaitingForExecutor' &&
                 localModuleStates[mod.id ?? '']?.scheduled_for == undefined) {
-                JobService.getJob({
-                    workspace: workspaceId ?? $workspaceStore ?? '',
-                    id: mod.job ?? '',
-                    noLogs: true,
-                    noCode: true
-                })
-                    .then((job) => {
-                    const newState = {
-                        type: mod.type,
-                        scheduled_for: job?.['scheduled_for'],
-                        job_id: job?.id,
-                        parent_module: mod['parent_module'],
-                        args: job?.args,
-                        tag: job?.tag,
-                        script_hash: job?.script_hash
-                    };
-                    setModuleState(mod.id ?? '', newState);
-                })
-                    .catch((e) => {
-                    console.error(`Could not load inner module for job ${mod.job}`, e);
-                });
+                if (!isReplay) {
+                    JobService.getJob({
+                        workspace: workspaceId ?? $workspaceStore ?? '',
+                        id: mod.job ?? '',
+                        noLogs: true,
+                        noCode: true
+                    })
+                        .then((job) => {
+                        const newState = {
+                            type: mod.type,
+                            scheduled_for: job?.['scheduled_for'],
+                            job_id: job?.id,
+                            parent_module: mod['parent_module'],
+                            args: job?.args,
+                            tag: job?.tag,
+                            script_hash: job?.script_hash
+                        };
+                        setModuleState(mod.id ?? '', newState);
+                    })
+                        .catch((e) => {
+                        console.error(`Could not load inner module for job ${mod.job}`, e);
+                    });
+                }
             }
             else if ((mod.flow_jobs || mod.branch_chosen) &&
                 (mod.type == 'Success' || mod.type == 'Failure') &&
@@ -410,46 +417,49 @@ function updateInnerModules() {
                     .slice(0, 100);
                 updateDurationStatuses(key, durationStatuses);
                 if (missingStartedAtIds.length > 0) {
+                    // Mark as pending to prevent duplicate fetches
                     missingStartedAtIds.forEach((id) => {
                         jobMissingStartedAt[id] = 'P';
                     });
-                    JobService.getStartedAtByIds({
-                        workspace: workspaceId ?? $workspaceStore ?? '',
-                        requestBody: missingStartedAtIds
-                    })
-                        .then((jobs) => {
-                        let lastStarted = undefined;
-                        let anySet = false;
-                        let nDurationStatuses = localDurationStatuses[key]?.byJob;
-                        missingStartedAtIds.forEach((id, idx) => {
-                            const startedAt = jobs[idx];
-                            const time = startedAt ? new Date(startedAt).getTime() : undefined;
-                            if (time) {
-                                jobMissingStartedAt[id] = time;
-                            }
-                            else {
-                                delete jobMissingStartedAt[id];
-                            }
-                            if (nDurationStatuses && time) {
-                                if (!nDurationStatuses[id]?.duration_ms) {
-                                    anySet = true;
-                                    lastStarted = id;
-                                    nDurationStatuses[id] = {
-                                        created_at: time,
-                                        started_at: time
-                                    };
+                    if (!isReplay) {
+                        JobService.getStartedAtByIds({
+                            workspace: workspaceId ?? $workspaceStore ?? '',
+                            requestBody: missingStartedAtIds
+                        })
+                            .then((jobs) => {
+                            let lastStarted = undefined;
+                            let anySet = false;
+                            let nDurationStatuses = localDurationStatuses[key]?.byJob;
+                            missingStartedAtIds.forEach((id, idx) => {
+                                const startedAt = jobs[idx];
+                                const time = startedAt ? new Date(startedAt).getTime() : undefined;
+                                if (time) {
+                                    jobMissingStartedAt[id] = time;
+                                }
+                                else {
+                                    delete jobMissingStartedAt[id];
+                                }
+                                if (nDurationStatuses && time) {
+                                    if (!nDurationStatuses[id]?.duration_ms) {
+                                        anySet = true;
+                                        lastStarted = id;
+                                        nDurationStatuses[id] = {
+                                            created_at: time,
+                                            started_at: time
+                                        };
+                                    }
                                 }
+                            });
+                            if (anySet) {
+                                updateDurationStatuses(key, nDurationStatuses);
+                                if (lastStarted)
+                                    setSelectedLoopSwitch(lastStarted, mod);
                             }
+                        })
+                            .catch((e) => {
+                            console.error(`Could not load inner module duration status for job ${mod.job}`, e);
                         });
-                        if (anySet) {
-                            updateDurationStatuses(key, nDurationStatuses);
-                            if (lastStarted)
-                                setSelectedLoopSwitch(lastStarted, mod);
-                        }
-                    })
-                        .catch((e) => {
-                        console.error(`Could not load inner module duration status for job ${mod.job}`, e);
-                    });
+                    }
                 }
                 else {
                     setIteration(0, mod.flow_jobs?.[0] ?? '', false, mod.id ?? '', true);
@@ -576,7 +586,7 @@ async function loadJobInProgress() {
     }
 }
 let destroyed = false;
-updateRecursiveRefresh(jobId);
+updateRecursiveRefresh(untrack(() => jobId));
 async function updateJobId() {
     if (jobId !== job?.id || innerModules == undefined) {
         localModuleStates = {};
@@ -830,7 +840,7 @@ function allModulesForTimeline(modules, expandedSubflows) {
         skipToolNodes: true
     });
     function rec(ids, prefix) {
-        return ids.concat(ids.flatMap(({ id, type }) => {
+        return ids.concat(ids.flatMap(({ id }) => {
             let fms = expandedSubflows[id];
             let oid = id.split(':').pop();
             if (!oid) {
@@ -848,6 +858,9 @@ function allModulesForTimeline(modules, expandedSubflows) {
     return rec(ids, undefined);
 }
 let subflowsSize = $state(500);
+// Splitpanes sizes for graph and details sections
+let graphPaneSize = $state(66);
+let detailsPaneSize = $state(34);
 function setParentModuleState(modId, state) {
     ;
     [localModuleStates, ...globalModuleStates].forEach((stateMap) => {
@@ -964,10 +977,10 @@ let totalEventsWaiting = $derived(Object.values(suspendStatus?.val ?? {}).reduce
 		{/if} -->
 		{#if isListJob}
 			{#if render}
-				<div class="w-full h-full border rounded-sm bg-surface p-1 overflow-auto">
+				<div class="w-full border rounded-sm bg-surface p-1 overflow-auto max-h-[90vh]">
 					<DisplayResult
-						workspaceId={job?.workspace_id}
-						{jobId}
+						workspaceId={isReplay ? undefined : job?.workspace_id}
+						jobId={isReplay ? undefined : jobId}
 						result_stream={job?.result_stream}
 						result={jobResults}
 						language={job?.language}
@@ -975,23 +988,87 @@ let totalEventsWaiting = $derived(Object.values(suspendStatus?.val ?? {}).reduce
 				</div>
 			{/if}
 		{:else if render}
-			<div class={'border rounded-md shadow p-2'}>
-				<FlowPreviewResult
-					{job}
-					{workspaceId}
-					{isOwner}
-					{hideFlowResult}
-					{hideDownloadLogs}
-					{innerModules}
-					{suspendStatus}
-					{hideJobId}
-					result_streams={resultStreams}
-				/>
+			<div class={'flex flex-col w-full'}>
+				{#if showLogsWithResult && job}
+					<!-- Side-by-side result and logs for simple jobs -->
+					{#if job && showJobDetailHeader}
+						<div class="mb-4">
+							<JobDetailHeader {job} extraCompact />
+						</div>
+					{/if}
+					<div class="grid grid-cols-2 grid-rows-[minmax(200px,400px)] gap-4 w-full">
+						<!-- Result Column -->
+						<div class="flex flex-col min-h-0">
+							<h3 class="shrink-0 text-xs font-semibold text-emphasis mb-1">Result</h3>
+							<div class="flex-1 min-h-0 overflow-auto rounded-md border bg-surface-tertiary p-4">
+								{#if job !== undefined && (job.result_stream || (job.type == 'CompletedJob' && 'result' in job && job.result !== undefined))}
+									<DisplayResult
+										workspaceId={isReplay ? undefined : job?.workspace_id}
+										result_stream={job.result_stream}
+										jobId={isReplay ? undefined : 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 min-h-0">
+							<h3 class="shrink-0 text-xs font-semibold text-emphasis mb-1">Logs</h3>
+							<div class="flex-1 min-h-0 overflow-auto rounded-md border bg-surface-tertiary">
+								<LogViewer
+									jobId={isReplay ? undefined : job.id}
+									download={!isReplay}
+									duration={job?.['duration_ms']}
+									mem={job?.['mem_peak']}
+									isLoading={job?.['running'] == false}
+									content={job?.logs}
+									tag={job?.tag}
+								/>
+							</div>
+						</div>
+					</div>
+				{:else}
+					<!-- Default single-column result -->
+					<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-screen">
+						{#if job !== undefined && (job.result_stream || (job.type == 'CompletedJob' && 'result' in job && job.result !== undefined))}
+							<DisplayResult
+								workspaceId={isReplay ? undefined : job?.workspace_id}
+								result_stream={job.result_stream}
+								jobId={isReplay ? undefined : 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>
+				{/if}
 			</div>
 		{/if}
 		{#if render}
 			{#if innerModules && innerModules.length > 0 && !isListJob}
-				<Tabs class="mx-auto {wideResults ? '' : 'max-w-7xl'}" bind:selected>
+				<Tabs class="mx-auto pt-2 {wideResults ? '' : 'max-w-7xl'}" bind:selected>
 					<Tab value="graph" label="Graph" />
 					<Tab
 						value="logs"
@@ -1035,7 +1112,7 @@ let totalEventsWaiting = $derived(Object.values(suspendStatus?.val ?? {}).reduce
 								btnClasses="w-full flex justify-start"
 								on:click={async () => {
 									let storedJob = storedListJobs[j]
-									if (!storedJob) {
+									if (!storedJob && !isReplay) {
 										storedJob = await JobService.getJob({
 											workspace: workspaceId ?? $workspaceStore ?? '',
 											id: loopJobId,
@@ -1044,7 +1121,9 @@ let totalEventsWaiting = $derived(Object.values(suspendStatus?.val ?? {}).reduce
 										})
 										storedListJobs[j] = storedJob
 									}
-									innerJobLoaded(storedJob, j, true, false)
+									if (storedJob) {
+										innerJobLoaded(storedJob, j, true, false)
+									}
 								}}
 								endIcon={{
 									icon: ChevronDown,
@@ -1109,6 +1188,8 @@ let totalEventsWaiting = $derived(Object.values(suspendStatus?.val ?? {}).reduce
 										isToolCallToBeLoaded: (storeKey: string) =>
 											toolCallStore?.isToolCallToBeLoaded(forLoopStoreKeyPrefix + storeKey) ?? false
 									}}
+									showLogsWithResult
+									showJobDetailHeader
 								/>
 							</div>
 						{/if}
@@ -1270,6 +1351,12 @@ let totalEventsWaiting = $derived(Object.values(suspendStatus?.val ?? {}).reduce
 										graphTabOpen={selected == 'graph' && graphTabOpen}
 										isNodeSelected={localModuleStates?.[selectedNode ?? '']?.job_id == mod.job}
 										{toolCallStore}
+										showLogsWithResult={['script', 'rawscript'].includes(
+											job.raw_flow?.modules[i]?.value?.type ?? ''
+										)}
+										showJobDetailHeader={['script', 'rawscript'].includes(
+											job.raw_flow?.modules[i]?.value?.type ?? ''
+										)}
 									/>
 									{#if mod.agent_actions && mod.agent_actions.length > 0 && mod.id}
 										{@const storeKeyPrefix = getParentLoopsPrefix(mod.id)}
@@ -1389,297 +1476,306 @@ let totalEventsWaiting = $derived(Object.values(suspendStatus?.val ?? {}).reduce
 				bind:clientHeight={tabsHeight.graphHeight}
 				style="min-height: {minTabHeight}px"
 			>
-				<div class="grid grid-cols-3 border h-full" bind:clientHeight={wrapperHeight}>
-					<div class="col-span-2 bg-surface-secondary">
-						<div class="flex flex-col" bind:clientHeight={retryStatusHeight}>
-							{#each Object.values(retryStatus?.val ?? {}) as count}
-								{#if count}
-									<span class="text-sm">
-										Retry in progress, # of failed attempts: {count}
-									</span>
-								{/if}
-							{/each}
-							{#if totalEventsWaiting}
-								<span class="text-sm">
-									Flow suspended, waiting for {totalEventsWaiting} events
-								</span>
-							{/if}
-						</div>
-						<FlowGraphV2
-							{selectionManager}
-							triggerNode={true}
-							download={!hideDownloadInGraph}
-							minHeight={wrapperHeight - retryStatusHeight}
-							success={jobId != undefined && isSuccess(job?.['success'])}
-							flowModuleStates={localModuleStates}
-							bind:expandedSubflows
-							onSelect={(e) => {
-								console.log('onSelect', e)
-								if (rightColumnSelect != 'node_definition' && rightColumnSelect != 'tracing') {
-									rightColumnSelect = 'node_status'
-								}
-								if (typeof e == 'string') {
-									if (e == 'Input') {
-										selectedNode = 'start'
-										stepDetail = undefined
-									} else if (e == 'Result') {
-										selectedNode = 'end'
-										stepDetail = 'end'
-									} else {
-										const id = e.startsWith(AI_TOOL_CALL_PREFIX) ? e.split('-').pop() : e
-										const mod = dfs(job?.raw_flow?.modules ?? [], (m) => m).find(
-											(m) => m?.id === id
-										)
-										stepDetail = mod
-										selectedNode = e
-										if (e.startsWith(AI_TOOL_CALL_PREFIX)) {
-											const [_prefix, agentModuleId, j, _toolModuleId] = e.split('-')
-											const parentLoopsPrefix = getParentLoopsPrefix(agentModuleId)
-											const jIdx = Number(j)
-											const storeKey = parentLoopsPrefix + agentModuleId + '-' + jIdx
-											toolCallStore?.addToolCallToLoad(storeKey)
+				<div class="border h-full rounded-md" bind:clientHeight={wrapperHeight}>
+					<Splitpanes>
+						<Pane bind:size={graphPaneSize} minSize={30}>
+							<div class="bg-surface-secondary h-full overflow-auto">
+								<div class="flex flex-col" bind:clientHeight={retryStatusHeight}>
+									{#each Object.values(retryStatus?.val ?? {}) as count}
+										{#if count}
+											<span class="text-sm">
+												Retry in progress, # of failed attempts: {count}
+											</span>
+										{/if}
+									{/each}
+									{#if totalEventsWaiting}
+										<span class="text-sm">
+											Flow suspended, waiting for {totalEventsWaiting} events
+										</span>
+									{/if}
+								</div>
+								<FlowGraphV2
+									{selectionManager}
+									triggerNode={true}
+									download={!hideDownloadInGraph}
+									minHeight={wrapperHeight - retryStatusHeight}
+									success={jobId != undefined && isSuccess(job?.['success'])}
+									flowModuleStates={localModuleStates}
+									bind:expandedSubflows
+									onSelect={(e) => {
+										if (rightColumnSelect != 'node_definition' && rightColumnSelect != 'tracing') {
+											rightColumnSelect = 'node_status'
 										}
-									}
-								} else {
-									stepDetail = e
-									selectedNode = e.id
-								}
-							}}
-							{onSelectedIteration}
-							earlyStop={job.raw_flow?.skip_expr !== undefined}
-							cache={job.raw_flow?.cache_ttl !== undefined}
-							modules={job.raw_flow?.modules ?? []}
-							notes={job.raw_flow?.notes ?? []}
-							failureModule={job.raw_flow?.failure_module}
-							preprocessorModule={job.raw_flow?.preprocessor_module}
-							allowSimplifiedPoll={false}
-							{workspace}
-						/>
-					</div>
-					<div
-						class="border-l border-tertiary-inverse pt-1 overflow-auto min-h-[700px] flex flex-col h-full"
-					>
-						<Tabs bind:selected={rightColumnSelect}>
-							{#if !hideTimeline}
-								<Tab value="timeline" label="Timeline" />
-							{/if}
-							<Tab value="node_status" label="Node status" />
-							{#if !hideNodeDefinition}
-								<Tab value="node_definition" label="Node definition" />
-							{/if}
-							{#if Object.keys(job?.flow_status?.user_states ?? {}).length > 0}
-								<Tab value="user_states" label="User States" />
-							{/if}
-							<Tab value="tracing" label="Tracing" />
-						</Tabs>
-						{#if rightColumnSelect == 'timeline'}
-							<FlowTimeline
-								{localModuleStates}
-								{onSelectedIteration}
-								selfWaitTime={job?.self_wait_time_ms}
-								aggregateWaitTime={job?.aggregate_wait_time_ms}
-								flowDone={job?.['success'] != undefined}
-								bind:this={flowTimeline}
-								flowModules={allModulesForTimeline(
-									job?.raw_flow?.modules ?? [],
-									expandedSubflows ?? {}
-								)}
-								buildSubflowKey={(key) => buildSubflowKey(key, prefix)}
-								durationStatuses={localDurationStatuses}
-							/>
-						{:else if rightColumnSelect == 'node_status'}
-							<div class="p-2 grow flex flex-col gap-6">
-								{#if selectedNode?.startsWith(AI_TOOL_MESSAGE_PREFIX)}
-									<div class="pt-2 px-4 pb-4">
-										<Alert type="info" title="Message output is available on the AI agent node" />
-									</div>
-								{:else if selectedNode?.startsWith(AI_MCP_TOOL_CALL_PREFIX)}
-									{@const [, agentModuleId, toolCallIndex] = selectedNode.split('-')}
-									{@const agentNode = localModuleStates?.[agentModuleId]}
-									{@const agentActions = agentNode?.agent_actions}
-									{@const mcpActionIndex = parseInt(toolCallIndex)}
-									{@const mcpAction =
-										agentActions && mcpActionIndex >= 0 && mcpActionIndex < agentActions.length
-											? agentActions[mcpActionIndex]
-											: undefined}
-									{#if mcpAction?.type === 'mcp_tool_call' && agentNode?.result?.messages}
-										{@const message = agentNode.result.messages.find(
-											(m) => m.agent_action?.call_id === mcpAction.call_id
-										)}
-										<McpToolCallDetails
-											functionName={mcpAction.function_name}
-											args={mcpAction.arguments ?? {}}
-											result={message?.content}
-											type="Success"
-											workspaceId={job?.workspace_id}
-										/>
+										if (typeof e == 'string') {
+											if (e == 'Input') {
+												selectedNode = 'start'
+												stepDetail = undefined
+											} else if (e == 'Result') {
+												selectedNode = 'end'
+												stepDetail = 'end'
+											} else {
+												const id = e.startsWith(AI_TOOL_CALL_PREFIX) ? e.split('-').pop() : e
+												const mod = dfs(job?.raw_flow?.modules ?? [], (m) => m).find(
+													(m) => m?.id === id
+												)
+												stepDetail = mod
+												selectedNode = e
+												if (e.startsWith(AI_TOOL_CALL_PREFIX)) {
+													const [_prefix, agentModuleId, j, _toolModuleId] = e.split('-')
+													const parentLoopsPrefix = getParentLoopsPrefix(agentModuleId)
+													const jIdx = Number(j)
+													const storeKey = parentLoopsPrefix + agentModuleId + '-' + jIdx
+													toolCallStore?.addToolCallToLoad(storeKey)
+												}
+											}
+										} else {
+											stepDetail = e
+											selectedNode = e.id
+										}
+									}}
+									{onSelectedIteration}
+									earlyStop={job.raw_flow?.skip_expr !== undefined}
+									cache={job.raw_flow?.cache_ttl !== undefined}
+									modules={job.raw_flow?.modules ?? []}
+									notes={job.raw_flow?.notes ?? []}
+									failureModule={job.raw_flow?.failure_module}
+									preprocessorModule={job.raw_flow?.preprocessor_module}
+									allowSimplifiedPoll={false}
+									{workspace}
+								/>
+							</div>
+						</Pane>
+						<Pane bind:size={detailsPaneSize} minSize={25} class="!overflow-visible">
+							<div class="pt-1 overflow-auto min-h-[700px] flex flex-col h-full">
+								<Tabs bind:selected={rightColumnSelect}>
+									{#if !hideTimeline}
+										<Tab value="timeline" label="Timeline" />
 									{/if}
-								{:else if selectedNode?.startsWith(AI_WEBSEARCH_PREFIX)}
-									<div class="p-2">
-										<Alert
-											type="info"
-											title="Web search output is available on the AI agent node"
-										/>
-									</div>
-								{:else if selectedNode}
-									{@const node = localModuleStates[selectedNode]}
-									{#if selectedNode == 'end'}
-										<FlowJobResult
-											tagLabel={customUi?.tagLabel}
-											workspaceId={job?.workspace_id}
-											jobId={job?.id}
-											filename={job.id}
-											loading={job['running']}
-											tag={job?.tag}
-											noBorder
-											col
-											result={job['result']}
-											logs={job.logs ?? ''}
-											downloadLogs={!hideDownloadLogs}
-										/>
-									{:else if selectedNode == 'start'}
-										{#if job.args}
-											<div class="p-2">
-												<JobArgs
-													id={job.id}
-													workspace={job.workspace_id ?? $workspaceStore ?? 'no_w'}
-													args={job.args}
+									<Tab value="node_status" label="Node status" />
+									{#if !hideNodeDefinition}
+										<Tab value="node_definition" label="Node definition" />
+									{/if}
+									{#if Object.keys(job?.flow_status?.user_states ?? {}).length > 0}
+										<Tab value="user_states" label="User States" />
+									{/if}
+									<Tab value="tracing" label="Tracing" />
+								</Tabs>
+								{#if rightColumnSelect == 'timeline'}
+									<FlowTimeline
+										{localModuleStates}
+										{onSelectedIteration}
+										selfWaitTime={job?.self_wait_time_ms}
+										aggregateWaitTime={job?.aggregate_wait_time_ms}
+										flowDone={job?.['success'] != undefined}
+										bind:this={flowTimeline}
+										flowModules={allModulesForTimeline(
+											job?.raw_flow?.modules ?? [],
+											expandedSubflows ?? {}
+										)}
+										buildSubflowKey={(key) => buildSubflowKey(key, prefix)}
+										durationStatuses={localDurationStatuses}
+									/>
+								{:else if rightColumnSelect == 'node_status'}
+									<div class="p-4 grow flex flex-col gap-6">
+										{#if selectedNode?.startsWith(AI_TOOL_MESSAGE_PREFIX)}
+											<div class="pt-2 pb-4">
+												<Alert
+													type="info"
+													title="Message output is available on the AI agent node"
 												/>
 											</div>
-										{:else}
-											<p class="p-2 text-secondary">No arguments</p>
-										{/if}
-									{:else if node}
-										{@const module =
-											stepDetail && typeof stepDetail !== 'string' ? stepDetail : undefined}
-										{@const agentTools =
-											module && module.value.type === 'aiagent' ? module.value.tools : undefined}
-										{@const parentLoopsPrefix = getParentLoopsPrefix(module?.id ?? '')}
-										{#if node.flow_jobs_results}
-											<div>
-												<span class="pl-1 text-emphasis text-xs font-medium"
-													>Result of step as collection of all subflows</span
-												>
-												<div class="overflow-auto max-h-[200px] p-2">
-													<DisplayResult
-														workspaceId={job?.workspace_id}
-														result={node.flow_jobs_results}
-														nodeId={selectedNode}
-														jobId={job?.id}
-														language={job?.language}
-													/>
-												</div>
-											</div>
-										{/if}
-										<div class="flex flex-col gap-2">
-											{#if node.flow_jobs_results}
-												<span class="pl-1 text-xs font-medium text-emphasis pt-4"
-													>Selected subflow</span
-												>
+										{:else if selectedNode?.startsWith(AI_MCP_TOOL_CALL_PREFIX)}
+											{@const [, agentModuleId, toolCallIndex] = selectedNode.split('-')}
+											{@const agentNode = localModuleStates?.[agentModuleId]}
+											{@const agentActions = agentNode?.agent_actions}
+											{@const mcpActionIndex = parseInt(toolCallIndex)}
+											{@const mcpAction =
+												agentActions && mcpActionIndex >= 0 && mcpActionIndex < agentActions.length
+													? agentActions[mcpActionIndex]
+													: undefined}
+											{#if mcpAction?.type === 'mcp_tool_call' && agentNode?.result?.messages}
+												{@const message = agentNode.result.messages.find(
+													(m: { agent_action?: { call_id?: string }; content?: any }) =>
+														m.agent_action?.call_id === mcpAction.call_id
+												)}
+												<McpToolCallDetails
+													functionName={mcpAction.function_name}
+													args={mcpAction.arguments ?? {}}
+													result={message?.content}
+													type="Success"
+													workspaceId={job?.workspace_id}
+												/>
 											{/if}
-											<div class="flex flex-col gap-6">
-												<div class="flex flex-col gap-1">
-													<div class="flex gap-2 min-w-0 w-full items-center">
-														<ModuleStatus
-															type={node.type}
-															scheduled_for={node.scheduled_for}
-															skipped={node.skipped}
-														/>
-														{#if node.duration_ms}
-															<Badge>
-																<Hourglass class="mr-2" size={10} />
-																{msToSec(node.duration_ms)} s
-															</Badge>
-														{/if}
-														{#if node.job_id}
-															<div class="grow w-full flex flex-row-reverse">
-																<a
-																	class="text-right text-xs"
-																	rel="noreferrer"
-																	target="_blank"
-																	href="{base}/run/{node.job_id ??
-																		''}?workspace={job?.workspace_id}"
-																>
-																	{truncateRev(node.job_id ?? '', 10)}
-																</a>
-															</div>
-														{/if}
-													</div>
-													{#if !node.isListJob}
-														<JobArgs
-															id={node.job_id}
-															workspace={job.workspace_id ?? $workspaceStore ?? 'no_w'}
-															args={node.args}
-														/>
-													{/if}
-												</div>
+										{:else if selectedNode?.startsWith(AI_WEBSEARCH_PREFIX)}
+											<Alert
+												type="info"
+												title="Web search output is available on the AI agent node"
+											/>
+										{:else if selectedNode}
+											{@const node = localModuleStates[selectedNode]}
+											{#if selectedNode == 'end'}
 												<FlowJobResult
 													tagLabel={customUi?.tagLabel}
-													workspaceId={job?.workspace_id}
-													jobId={node.job_id}
-													loading={node.type != 'Success' && node.type != 'Failure'}
-													waitingForExecutor={node.type == 'WaitingForExecutor'}
-													refreshLog={node.type == 'InProgress'}
+													workspaceId={isReplay ? undefined : job?.workspace_id}
+													jobId={isReplay ? undefined : job?.id}
+													filename={job.id}
+													loading={job['running']}
+													tag={job?.tag}
 													col
-													result_stream={resultStreams[node.job_id ?? '']}
-													result={node.result}
-													tag={node.tag}
-													logs={node.logs}
-													downloadLogs={!hideDownloadLogs}
-													aiAgentStatus={agentTools &&
-													node?.job_id &&
-													(node.type === 'Success' || node.type === 'Failure')
-														? {
-																tools: agentTools,
-																agentJob: {
-																	id: node.job_id,
-																	result: node.result,
-																	logs: node.logs,
-																	args: node.args,
-																	success: node.type === 'Success',
-																	type: 'CompletedJob'
-																},
-																storedToolCallJobs: module
-																	? toolCallStore?.getLocalToolCallJobs(parentLoopsPrefix)
-																	: undefined,
-																onToolJobLoaded: (job, idx) => {
-																	if (module) {
-																		const storeKey = parentLoopsPrefix + module.id + '-' + idx
-																		toolCallStore?.setStoredToolCallJob(storeKey, job)
-																	}
-																}
-															}
-														: undefined}
+													result={job['result']}
+													logs={job.logs ?? ''}
+													downloadLogs={!hideDownloadLogs && !isReplay}
 												/>
-											</div>
-										</div>
+											{:else if selectedNode == 'start'}
+												{#if job.args}
+													<JobArgs
+														id={isReplay ? undefined : job.id}
+														workspace={isReplay ? undefined : (job.workspace_id ?? $workspaceStore ?? 'no_w')}
+														args={job.args}
+													/>
+												{:else}
+													<p class="text-secondary">No arguments</p>
+												{/if}
+											{:else if node}
+												{@const module =
+													stepDetail && typeof stepDetail !== 'string' ? stepDetail : undefined}
+												{@const agentTools =
+													module && module.value.type === 'aiagent'
+														? module.value.tools
+														: undefined}
+												{@const parentLoopsPrefix = getParentLoopsPrefix(module?.id ?? '')}
+												{#if node.flow_jobs_results}
+													<div>
+														<span class="pl-1 text-emphasis text-xs font-medium"
+															>Result of step as collection of all subflows</span
+														>
+														<div class="overflow-auto max-h-[200px] p-2">
+															<DisplayResult
+																workspaceId={isReplay ? undefined : job?.workspace_id}
+																result={node.flow_jobs_results}
+																nodeId={selectedNode}
+																jobId={isReplay ? undefined : job?.id}
+																language={job?.language}
+															/>
+														</div>
+													</div>
+												{/if}
+												<div class="flex flex-col gap-2">
+													{#if node.flow_jobs_results}
+														<span class="pl-1 text-xs font-medium text-emphasis pt-4"
+															>Selected subflow</span
+														>
+													{/if}
+													<div class="flex flex-col gap-6">
+														<div class="flex flex-col gap-6">
+															<div class="flex gap-2 min-w-0 w-full items-center">
+																<ModuleStatus
+																	type={node.type}
+																	scheduled_for={node.scheduled_for}
+																	skipped={node.skipped}
+																/>
+																{#if node.duration_ms}
+																	<Badge>
+																		<Hourglass class="mr-2" size={10} />
+																		{msToSec(node.duration_ms)} s
+																	</Badge>
+																{/if}
+																{#if node.job_id && !isReplay}
+																	<div class="grow w-full flex flex-row-reverse">
+																		<a
+																			class="text-right text-xs"
+																			rel="noreferrer"
+																			target="_blank"
+																			href="{base}/run/{node.job_id ??
+																				''}?workspace={job?.workspace_id}"
+																		>
+																			{truncateRev(node.job_id ?? '', 10)}
+																			<ExternalLink size={12} class="inline-block" />
+																		</a>
+																	</div>
+																{/if}
+															</div>
+															{#if !node.isListJob}
+																<div>
+																	<div class="text-xs text-emphasis font-semibold mb-1">Inputs</div>
+																	<JobArgs
+																		id={isReplay ? undefined : node.job_id}
+																		workspace={isReplay ? undefined : (job.workspace_id ?? $workspaceStore ?? 'no_w')}
+																		args={node.args}
+																	/>
+																</div>
+															{/if}
+														</div>
+														<FlowJobResult
+															tagLabel={customUi?.tagLabel}
+															workspaceId={isReplay ? undefined : job?.workspace_id}
+															jobId={isReplay ? undefined : node.job_id}
+															loading={node.type != 'Success' && node.type != 'Failure'}
+															waitingForExecutor={node.type == 'WaitingForExecutor'}
+															refreshLog={node.type == 'InProgress'}
+															col
+															result_stream={resultStreams[node.job_id ?? '']}
+															result={node.result}
+															tag={node.tag}
+															logs={node.logs}
+															downloadLogs={!hideDownloadLogs && !isReplay}
+															aiAgentStatus={agentTools &&
+															node?.job_id &&
+															(node.type === 'Success' || node.type === 'Failure')
+																? {
+																		tools: agentTools,
+																		agentJob: {
+																			id: node.job_id,
+																			result: node.result,
+																			logs: node.logs,
+																			args: node.args,
+																			success: node.type === 'Success',
+																			type: 'CompletedJob'
+																		},
+																		storedToolCallJobs: module
+																			? toolCallStore?.getLocalToolCallJobs(parentLoopsPrefix)
+																			: undefined,
+																		onToolJobLoaded: (job, idx) => {
+																			if (module) {
+																				const storeKey = parentLoopsPrefix + module.id + '-' + idx
+																				toolCallStore?.setStoredToolCallJob(storeKey, job)
+																			}
+																		}
+																	}
+																: undefined}
+														/>
+													</div>
+												</div>
+											{:else}
+												<p class="p-2 text-primary italic"
+													>The execution of this node has no information attached to it. The job
+													likely did not run yet</p
+												>
+											{/if}
+										{:else}<p class="p-2 text-primary italic"
+												>Select a node to see its details here</p
+											>{/if}
+									</div>
+								{:else if rightColumnSelect == 'node_definition'}
+									{@const node = selectedNode ? localModuleStates[selectedNode] : undefined}
+									<FlowGraphViewerStep {stepDetail} jobScriptHash={node?.script_hash} />
+								{:else if rightColumnSelect == 'user_states'}
+									<div class="p-2">
+										<JobArgs argLabel="Key" args={job?.flow_status?.user_states ?? {}} />
+									</div>
+								{:else if rightColumnSelect == 'tracing'}
+									{@const node = selectedNode ? localModuleStates[selectedNode] : undefined}
+									{#if node?.job_id}
+										<JobOtelTraces jobId={node.job_id} />
 									{:else}
-										<p class="p-2 text-primary italic"
-											>The execution of this node has no information attached to it. The job likely
-											did not run yet</p
+										<div class="p-4 text-secondary"
+											>Select a node with a job to see HTTP request traces</div
 										>
 									{/if}
-								{:else}<p class="p-2 text-primary italic">Select a node to see its details here</p
-									>{/if}
-							</div>
-						{:else if rightColumnSelect == 'node_definition'}
-							{@const node = selectedNode ? localModuleStates[selectedNode] : undefined}
-							<FlowGraphViewerStep {stepDetail} jobScriptHash={node?.script_hash} />
-						{:else if rightColumnSelect == 'user_states'}
-							<div class="p-2">
-								<JobArgs argLabel="Key" args={job?.flow_status?.user_states ?? {}} />
+								{/if}
 							</div>
-						{:else if rightColumnSelect == 'tracing'}
-							{@const node = selectedNode ? localModuleStates[selectedNode] : undefined}
-							{#if node?.job_id}
-								<JobOtelTraces jobId={node.job_id} />
-							{:else}
-								<div class="p-4 text-secondary"
-									>Select a node with a job to see HTTP request traces</div
-								>
-							{/if}
-						{/if}
-					</div>
+						</Pane>
+					</Splitpanes>
 				</div>
 			</div>
 		{/if}