windmill-components 1.642.0 → 1.655.0

package/package/components/FlowPlugConnect.svelte

@@ -2,9 +2,7 @@
 import { Button } from './common';
 import AnimatedButton from './common/button/AnimatedButton.svelte';
 import { twMerge } from 'tailwind-merge';
-export let connecting;
-export let id = undefined;
-export let wrapperClasses = '';
+let { connecting, id = undefined, wrapperClasses = '' } = $props();
 </script>
 
 <AnimatedButton animate={connecting} baseRadius="6px" animationDuration="2s" marginWidth="2px">

package/package/components/FlowPlugConnect.svelte.d.ts

@@ -1,3 +1,8 @@
+interface Props {
+    connecting: boolean;
+    id?: undefined | string;
+    wrapperClasses?: string;
+}
 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;
@@ -11,14 +16,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const FlowPlugConnect: $$__sveltets_2_IsomorphicComponent<{
-    connecting: boolean;
-    id?: undefined | string;
-    wrapperClasses?: string;
-}, {
+declare const FlowPlugConnect: $$__sveltets_2_IsomorphicComponent<Props, {
     click: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type FlowPlugConnect = InstanceType<typeof FlowPlugConnect>;
 export default FlowPlugConnect;

package/package/components/FlowPreviewContent.svelte

@@ -9,7 +9,7 @@ import FlowStatusViewer from '../components/FlowStatusViewer.svelte';
 import FlowProgressBar from './flows/FlowProgressBar.svelte';
 import FlowExecutionStatus from './runs/FlowExecutionStatus.svelte';
 import JobDetailHeader from './runs/JobDetailHeader.svelte';
-import { AlertTriangle, CornerDownLeft, Loader2, Play, RefreshCw, X } from 'lucide-svelte';
+import { AlertTriangle, Circle, CornerDownLeft, Download, Loader2, Play, RefreshCw, X } from 'lucide-svelte';
 import { emptyString, sendUserToast } from '../utils';
 import { dfs } from './flows/dfs';
 import { sliceModules } from './flows/flowStateUtils.svelte';
@@ -21,6 +21,7 @@ import { getStepHistoryLoaderContext } from './stepHistoryLoader.svelte';
 import FlowChat from './flows/conversations/FlowChat.svelte';
 import { stateSnapshot } from '../svelte5Utils.svelte';
 import FlowRestartButton from './FlowRestartButton.svelte';
+import { createFlowRecording, setActiveRecording } from './recording/flowRecording.svelte';
 let { previewMode = $bindable(), open, preventEscape = $bindable(false), jobId = $bindable(undefined), job = $bindable(undefined), initial = $bindable(false), selectedJobStep = $bindable(undefined), selectedJobStepIsTopLevel = $bindable(undefined), selectedJobStepType = $bindable('single'), rightColumnSelect = $bindable('timeline'), branchOrIterationN = $bindable(0), scrollTop = $bindable(0), localModuleStates = $bindable({}), localDurationStatuses = $bindable({}), onRunPreview, render = false, onJobDone, upToId = undefined, suspendStatus } = $props();
 let restartBranchNames = [];
 let isRunning = $state(false);
@@ -40,6 +41,13 @@ let schemaFormWithArgPicker = $state(undefined);
 let currentJobId = $state(undefined);
 let stepHistoryLoader = getStepHistoryLoaderContext();
 let flowProgressBar = $state(undefined);
+// Recording & replay
+let flowRecording = createFlowRecording();
+let lastRecording = $state(undefined);
+let recordingMode = $state(false);
+export function setRecordingMode(on) {
+    recordingMode = on;
+}
 let loadingHistory = $state(false);
 let shouldUseStreaming = $derived.by(() => {
     const modules = flowStore.val.value?.modules;
@@ -150,6 +158,53 @@ async function selectInput(input, type) {
 export function refresh() {
     renderCount++;
 }
+async function recordAndTest() {
+    lastRecording = undefined;
+    flowRecording.start($pathStore);
+    flowRecording.setFlow(extractFlow(previewMode));
+    setActiveRecording(flowRecording);
+    await runPreview(previewArgs.val, undefined);
+}
+function collectSubJobIds(flowStatus) {
+    if (!flowStatus)
+        return [];
+    const ids = [];
+    for (const mod of flowStatus.modules ?? []) {
+        if (mod.job)
+            ids.push(mod.job);
+        if (mod.flow_jobs)
+            ids.push(...mod.flow_jobs);
+    }
+    if (flowStatus.failure_module?.job)
+        ids.push(flowStatus.failure_module.job);
+    if (flowStatus.preprocessor_module?.job)
+        ids.push(flowStatus.preprocessor_module.job);
+    return ids;
+}
+async function recordSubJobs(completedJob) {
+    const subJobIds = collectSubJobIds(completedJob.flow_status);
+    await Promise.all(subJobIds.map(async (subId) => {
+        try {
+            const subJob = await JobService.getJob({
+                workspace: $workspaceStore,
+                id: subId
+            });
+            flowRecording.addCompletedJob(subId, subJob);
+            // Recurse into nested flows (flow-within-flow)
+            if (subJob.flow_status) {
+                await recordSubJobs(subJob);
+            }
+        }
+        catch (e) {
+            console.warn('[recording] failed to fetch sub-job', subId, e);
+        }
+    }));
+}
+function downloadRecording() {
+    if (lastRecording) {
+        flowRecording.download(lastRecording);
+    }
+}
 let scrollableDiv = $state(undefined);
 function handleScroll() {
     let newScroll = scrollableDiv?.scrollTop ?? 0;
@@ -168,6 +223,23 @@ $effect.pre(() => {
 $effect(() => {
     scrollableDiv && render && untrack(() => onScrollableDivChange());
 });
+// During recording, watch sub-job SSE streams to capture incremental logs
+$effect(() => {
+    // Only watch sub-jobs for the current job (jobId is set after runPreview starts)
+    if (flowRecording.active && job?.flow_status && job?.id === jobId) {
+        const modules = job.flow_status.modules ?? [];
+        untrack(() => {
+            for (const mod of modules) {
+                if (mod.job) {
+                    flowRecording.watchSubJob(mod.job, $workspaceStore);
+                }
+            }
+            if (job?.flow_status?.failure_module?.job) {
+                flowRecording.watchSubJob(job.flow_status.failure_module.job, $workspaceStore);
+            }
+        });
+    }
+});
 export async function cancelTest() {
     isRunning = false;
     try {
@@ -220,7 +292,7 @@ export function flowHasChanged() {
 			</div>
 
 			{#if isRunning}
-				<div class="mx-auto">
+				<div class="mx-auto flex items-center gap-2">
 					<Button
 						variant="accent"
 						destructive
@@ -234,9 +306,14 @@ export function flowHasChanged() {
 					>
 						Cancel
 					</Button>
+					{#if flowRecording.active}
+						<span class="text-xs text-red-500 font-medium flex items-center gap-1">
+							<Circle size={8} fill="currentColor" /> Recording
+						</span>
+					{/if}
 				</div>
 			{:else}
-				<div class="grow justify-center flex flex-row gap-2">
+				<div class="grow justify-center flex flex-row gap-2 items-center">
 					{#if jobId !== undefined && selectedJobStep !== undefined && selectedJobStepIsTopLevel}
 						<FlowRestartButton
 							{jobId}
@@ -258,7 +335,7 @@ export function flowHasChanged() {
 							startIcon={{ icon: isRunning ? RefreshCw : Play }}
 							size="sm"
 							btnClasses="w-full max-w-lg"
-							on:click={() => runPreview(previewArgs.val, undefined)}
+							on:click={() => recordingMode ? recordAndTest() : runPreview(previewArgs.val, undefined)}
 							id="flow-editor-test-flow-drawer"
 							shortCut={{ Icon: CornerDownLeft }}
 						>
@@ -267,11 +344,24 @@ export function flowHasChanged() {
 								<Badge baseClass="ml-1" color="indigo">
 									{selectionManager.getSelectedId()}
 								</Badge>
+							{:else if recordingMode}
+								Test flow and record
 							{:else}
 								Test flow
 							{/if}
 						</Button>
 					{/if}
+					{#if lastRecording && recordingMode}
+						<Button
+							variant="subtle"
+							unifiedSize="sm"
+							title="Download recording"
+							on:click={downloadRecording}
+							startIcon={{ icon: Download }}
+						>
+							Download recording
+						</Button>
+					{/if}
 				</div>
 			{/if}
 		</div>
@@ -396,6 +486,7 @@ export function flowHasChanged() {
 				{/if}
 				<FlowHistoryJobPicker
 					selectInitial={jobId == undefined}
+					newFlow={$initialPathStore === ''}
 					on:select={(e) => {
 						if (!currentJobId) {
 							currentJobId = jobId
@@ -415,7 +506,9 @@ export function flowHasChanged() {
 				/>
 			</div>
 
-			<FlowProgressBar {job} bind:this={flowProgressBar} slim textPosition="bottom" showStepId />
+			{#if jobId}
+				<FlowProgressBar {job} bind:this={flowProgressBar} slim textPosition="bottom" showStepId />
+			{/if}
 
 			{#if job}
 				<div class="w-full my-6">
@@ -454,9 +547,17 @@ export function flowHasChanged() {
 					wideResults
 					bind:flowState={flowStateStore.val}
 					{jobId}
-					onDone={() => {
+					onDone={async ({ job: completedJob }) => {
 						isRunning = false
 						$executionCount = $executionCount + 1
+						if (flowRecording.active) {
+							lastRecording = flowRecording.stop()
+							setActiveRecording(undefined)
+							// Fetch sub-job data and add to recording (they load after the root completes)
+							await recordSubJobs(completedJob)
+							// Trigger reactivity update for lastRecording
+							lastRecording = lastRecording
+						}
 						onJobDone?.()
 					}}
 					bind:selectedJobStep
@@ -470,6 +571,10 @@ export function flowHasChanged() {
 				<div class="italic text-primary h-full grow mx-auto flex flex-row items-center gap-2">
 					<Loader2 class="animate-spin" /> <span> Loading history... </span>
 				</div>
+			{:else}
+				<div class="italic text-tertiary h-full grow mx-auto flex flex-row items-center">
+					Flow status will display here
+				</div>
 			{/if}
 		</div>
 	</div>

package/package/components/FlowPreviewContent.svelte.d.ts

@@ -48,6 +48,7 @@ declare const FlowPreviewContent: $$__sveltets_2_IsomorphicComponent<Props, {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     test: (conversationId?: string) => Promise<string | undefined>;
+    setRecordingMode: (on: boolean) => void;
     runPreview: (args: Record<string, any>, restartedFrom: RestartedFrom | undefined, conversationId?: string | undefined) => Promise<string | undefined>;
     refresh: () => void;
     cancelTest: () => Promise<void>;

package/package/components/FlowStatusViewer.svelte

@@ -3,18 +3,18 @@ import { setContext, untrack } from 'svelte';
 import { isOwner as loadIsOwner } from '../utils';
 import { userStore, workspaceStore } from '../stores';
 let { jobId, initialJob = undefined, workspaceId = undefined, flowState = $bindable({}), selectedJobStep = $bindable(undefined), hideTimeline = false, hideDownloadInGraph = false, hideNodeDefinition = false, hideJobId = false, hideDownloadLogs = false, rightColumnSelect = $bindable('timeline'), isOwner = $bindable(false), wideResults = false, localModuleStates = $bindable({}), localDurationStatuses = $bindable({}), job = $bindable(undefined), render = true, suspendStatus = $bindable({ val: {} }), customUi, onStart, onJobsLoaded, onDone, showLogsWithResult = false } = $props();
-let lastJobId = jobId;
+let lastJobId = untrack(() => jobId);
 let retryStatus = $state({ val: {} });
 let globalRefreshes = $state({});
 setContext('FlowStatusViewer', {
     flowState,
     suspendStatus,
     retryStatus,
-    hideDownloadInGraph,
-    hideNodeDefinition,
-    hideTimeline,
-    hideJobId,
-    hideDownloadLogs
+    hideDownloadInGraph: untrack(() => hideDownloadInGraph),
+    hideNodeDefinition: untrack(() => hideNodeDefinition),
+    hideTimeline: untrack(() => hideTimeline),
+    hideJobId: untrack(() => hideJobId),
+    hideDownloadLogs: untrack(() => hideDownloadLogs)
 });
 function loadOwner(path) {
     isOwner = loadIsOwner(path, $userStore, workspaceId ?? $workspaceStore);

package/package/components/FlowStatusViewerInner.svelte

@@ -34,11 +34,14 @@ import LogViewer from './LogViewer.svelte';
 import { SelectionManager } from './graph/selectionUtils.svelte';
 import { useThrottle } from 'runed';
 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;
     };
@@ -63,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);
@@ -76,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({});
@@ -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 = {};
@@ -969,8 +979,8 @@ let totalEventsWaiting = $derived(Object.values(suspendStatus?.val ?? {}).reduce
 			{#if render}
 				<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}
@@ -993,9 +1003,9 @@ let totalEventsWaiting = $derived(Object.values(suspendStatus?.val ?? {}).reduce
 							<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={job?.workspace_id}
+										workspaceId={isReplay ? undefined : job?.workspace_id}
 										result_stream={job.result_stream}
-										jobId={job?.id}
+										jobId={isReplay ? undefined : job?.id}
 										result={'result' in job ? job.result : undefined}
 										language={job?.language}
 										isTest={false}
@@ -1019,7 +1029,8 @@ let totalEventsWaiting = $derived(Object.values(suspendStatus?.val ?? {}).reduce
 							<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={job.id}
+									jobId={isReplay ? undefined : job.id}
+									download={!isReplay}
 									duration={job?.['duration_ms']}
 									mem={job?.['mem_peak']}
 									isLoading={job?.['running'] == false}
@@ -1035,9 +1046,9 @@ let totalEventsWaiting = $derived(Object.values(suspendStatus?.val ?? {}).reduce
 					<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={job?.workspace_id}
+								workspaceId={isReplay ? undefined : job?.workspace_id}
 								result_stream={job.result_stream}
-								jobId={job?.id}
+								jobId={isReplay ? undefined : job?.id}
 								result={'result' in job ? job.result : undefined}
 								language={job?.language}
 								isTest={false}
@@ -1101,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,
@@ -1110,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,
@@ -1603,21 +1616,21 @@ let totalEventsWaiting = $derived(Object.values(suspendStatus?.val ?? {}).reduce
 											{#if selectedNode == 'end'}
 												<FlowJobResult
 													tagLabel={customUi?.tagLabel}
-													workspaceId={job?.workspace_id}
-													jobId={job?.id}
+													workspaceId={isReplay ? undefined : job?.workspace_id}
+													jobId={isReplay ? undefined : job?.id}
 													filename={job.id}
 													loading={job['running']}
 													tag={job?.tag}
 													col
 													result={job['result']}
 													logs={job.logs ?? ''}
-													downloadLogs={!hideDownloadLogs}
+													downloadLogs={!hideDownloadLogs && !isReplay}
 												/>
 											{:else if selectedNode == 'start'}
 												{#if job.args}
 													<JobArgs
-														id={job.id}
-														workspace={job.workspace_id ?? $workspaceStore ?? 'no_w'}
+														id={isReplay ? undefined : job.id}
+														workspace={isReplay ? undefined : (job.workspace_id ?? $workspaceStore ?? 'no_w')}
 														args={job.args}
 													/>
 												{:else}
@@ -1638,10 +1651,10 @@ let totalEventsWaiting = $derived(Object.values(suspendStatus?.val ?? {}).reduce
 														>
 														<div class="overflow-auto max-h-[200px] p-2">
 															<DisplayResult
-																workspaceId={job?.workspace_id}
+																workspaceId={isReplay ? undefined : job?.workspace_id}
 																result={node.flow_jobs_results}
 																nodeId={selectedNode}
-																jobId={job?.id}
+																jobId={isReplay ? undefined : job?.id}
 																language={job?.language}
 															/>
 														</div>
@@ -1667,7 +1680,7 @@ let totalEventsWaiting = $derived(Object.values(suspendStatus?.val ?? {}).reduce
 																		{msToSec(node.duration_ms)} s
 																	</Badge>
 																{/if}
-																{#if node.job_id}
+																{#if node.job_id && !isReplay}
 																	<div class="grow w-full flex flex-row-reverse">
 																		<a
 																			class="text-right text-xs"
@@ -1686,8 +1699,8 @@ let totalEventsWaiting = $derived(Object.values(suspendStatus?.val ?? {}).reduce
 																<div>
 																	<div class="text-xs text-emphasis font-semibold mb-1">Inputs</div>
 																	<JobArgs
-																		id={node.job_id}
-																		workspace={job.workspace_id ?? $workspaceStore ?? 'no_w'}
+																		id={isReplay ? undefined : node.job_id}
+																		workspace={isReplay ? undefined : (job.workspace_id ?? $workspaceStore ?? 'no_w')}
 																		args={node.args}
 																	/>
 																</div>
@@ -1695,8 +1708,8 @@ let totalEventsWaiting = $derived(Object.values(suspendStatus?.val ?? {}).reduce
 														</div>
 														<FlowJobResult
 															tagLabel={customUi?.tagLabel}
-															workspaceId={job?.workspace_id}
-															jobId={node.job_id}
+															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'}
@@ -1705,7 +1718,7 @@ let totalEventsWaiting = $derived(Object.values(suspendStatus?.val ?? {}).reduce
 															result={node.result}
 															tag={node.tag}
 															logs={node.logs}
-															downloadLogs={!hideDownloadLogs}
+															downloadLogs={!hideDownloadLogs && !isReplay}
 															aiAgentStatus={agentTools &&
 															node?.job_id &&
 															(node.type === 'Success' || node.type === 'Failure')

package/package/components/FlowViewer.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { FlowService } from '../gen';
+<script lang="ts">import { untrack } from 'svelte';
+import { FlowService } from '../gen';
 import { Tab, Tabs, TabContent } from './common';
 import SchemaViewer from './SchemaViewer.svelte';
 import FlowGraphViewer from './FlowGraphViewer.svelte';
@@ -11,12 +12,13 @@ import FlowViewerInner from './FlowViewerInner.svelte';
 import FlowInputViewer from './FlowInputViewer.svelte';
 let { flow, initialOpen = undefined, noSide = false, noGraph = false, availableVersions = undefined, initTab = undefined, noSummary = false, noGraphDownload = false, selectedVersionId = undefined } = $props();
 let open = {};
-if (initialOpen) {
-    open[initialOpen] = true;
+const untrackedInitialOpen = untrack(() => initialOpen);
+if (untrackedInitialOpen) {
+    open[untrackedInitialOpen] = true;
 }
 let previousVersionId = $state(undefined);
 let previousFlow = $state(undefined);
-let tab = $state(initTab ?? 'diff');
+let tab = $state(untrack(() => initTab) ?? 'diff');
 let previousFlowCache = {};
 async function loadPreviousFlow(version) {
     try {

package/package/components/FlowWrapper.svelte

@@ -1,10 +1,11 @@
-<script lang="ts">import AiChatLayout from './copilot/chat/AiChatLayout.svelte';
+<script lang="ts">import { untrack } from 'svelte';
+import AiChatLayout from './copilot/chat/AiChatLayout.svelte';
 import FlowBuilder from './FlowBuilder.svelte';
 let { flowStore: oldFlowStore, flowStateStore: oldFlowStateStore, disableAi, light, ...props } = $props();
-let flowStore = $state(oldFlowStore);
-let flowStateStore = $state(oldFlowStateStore);
+let flowStore = $state(untrack(() => oldFlowStore));
+let flowStateStore = $state(untrack(() => oldFlowStateStore));
 let trialRender = $state(true);
-if (light) {
+if (untrack(() => light)) {
     setTimeout(() => {
         trialRender = false;
     }, 1000 * 300);