windmill-components 1.642.0 → 1.655.0

package/package/components/propertyPicker/PropPicker.svelte

@@ -7,12 +7,11 @@ import { keepByKey } from './utils';
 import ClearableInput from '../common/clearableInput/ClearableInput.svelte';
 import { filterNestedObject } from '../flows/previousResults';
 import Scrollable from '../Scrollable.svelte';
-let { pickableProperties, displayContext = true, error = false, allowCopy = false, previousId = undefined, flow_env = undefined, result = undefined, extraResults = undefined } = $props();
+let { pickableProperties, displayContext = true, error = false, allowCopy = false, previousId = undefined, result = undefined, extraResults = undefined } = $props();
 let variables = $state({});
 let resources = $state({});
 let displayVariable = $state(false);
 let displayResources = $state(false);
-let displayFlowEnv = $state(false);
 let allResultsCollapsed = $state(true);
 let collapsableInitialState;
 const EMPTY_STRING = '';
@@ -22,9 +21,9 @@ const { pickablePropertiesFiltered } = getContext('PropPickerContext');
 $effect(() => {
     $pickablePropertiesFiltered = pickableProperties;
 });
-let flowInputsFiltered = $state(pickableProperties.flow_input);
-let resultByIdFiltered = $state(pickableProperties.priorIds);
-let flowEnvFiltered = $state(pickableProperties.flow_env);
+let flowInputsFiltered = $state(untrack(() => pickableProperties).flow_input);
+let resultByIdFiltered = $state(untrack(() => pickableProperties).priorIds);
+let flowEnvFiltered = $state(untrack(() => pickableProperties).flow_env);
 let timeout;
 function onSearch(search) {
     if (timeout) {
@@ -79,7 +78,9 @@ async function filterPickableProperties() {
         resultByIdFiltered = {};
     }
     if (!$inputMatches?.some((match) => match.word === 'flow_env')) {
-        flowEnvFiltered = {};
+        if (search === EMPTY_STRING) {
+            flowEnvFiltered = pickableProperties.flow_env;
+        }
     }
     if ($inputMatches?.length == 1) {
         filteringFlowInputsOrResult = $inputMatches[0].value;
@@ -125,8 +126,7 @@ async function updateCollapsable() {
         collapsableInitialState = {
             allResultsCollapsed,
             displayVariable,
-            displayResources,
-            displayFlowEnv
+            displayResources
         };
     }
     if ($inputMatches[0].word === 'variable') {
@@ -139,10 +139,6 @@ async function updateCollapsable() {
         displayResources = true;
         return;
     }
-    if ($inputMatches[0].word === 'flow_env') {
-        displayFlowEnv = true;
-        return;
-    }
     if ($inputMatches[0].word === 'results') {
         allResultsCollapsed = false;
         return;
@@ -153,8 +149,7 @@ function resetCollapsable() {
         return;
     }
     ;
-    ({ allResultsCollapsed, displayVariable, displayResources, displayFlowEnv } =
-        collapsableInitialState);
+    ({ allResultsCollapsed, displayVariable, displayResources } = collapsableInitialState);
     collapsableInitialState = undefined;
 }
 async function updateState() {
@@ -215,6 +210,18 @@ const categoryTitleClasses = 'font-semibold text-xs text-emphasis';
 				/>
 			</div>
 		{/if}
+		{#if flowEnvFiltered && Object.keys(flowEnvFiltered ?? {}).length > 0}
+			<span class={categoryTitleClasses}>Flow Env Variables</span>
+			<div class={categoryContentClasses}>
+				<ObjectViewer
+					{allowCopy}
+					pureViewer={!$propPickerConfig}
+					json={flowEnvFiltered}
+					prefix="flow_env"
+					on:select
+				/>
+			</div>
+		{/if}
 		{#if error}
 			<span class={categoryTitleClasses}>Error</span>
 			<div class={categoryContentClasses}>
@@ -381,45 +388,6 @@ const categoryTitleClasses = 'font-semibold text-xs text-emphasis';
 					{/if}
 				</div>
 			{/if}
-			{#if flow_env && Object.keys(flow_env).length > 0 && $inputMatches?.some((match) => match.word === 'flow_env')}
-				<div class="overflow-y-auto pb-2">
-					<span class="font-normal text-xs text-secondary">Flow Env Variables:</span>
-
-					{#if displayFlowEnv}
-						<Button
-							color="light"
-							size="xs2"
-							variant="border"
-							on:click={() => {
-								displayFlowEnv = false
-							}}
-							wrapperClasses="inline-flex whitespace-nowrap w-fit"
-							btnClasses="font-mono h-4 text-2xs font-thin px-1 rounded-[0.275rem]">-</Button
-						>
-						<ObjectViewer
-							{allowCopy}
-							pureViewer={!$propPickerConfig}
-							rawKey={false}
-							json={flowEnvFiltered}
-							prefix="flow_env"
-							on:select
-						/>
-					{:else}
-						<Button
-							color="light"
-							size="xs2"
-							variant="border"
-							on:click={() => {
-								displayFlowEnv = true
-							}}
-							wrapperClasses="inline-flex whitespace-nowrap w-fit"
-							btnClasses="font-normal text-2xs rounded-[0.275rem] h-4 px-1"
-						>
-							{'{...}'}
-						</Button>
-					{/if}
-				</div>
-			{/if}
 		{/if}
 		<!-- </div> -->
 	</Scrollable>

package/package/components/propertyPicker/PropPicker.svelte.d.ts

@@ -5,7 +5,6 @@ interface Props {
     error?: boolean;
     allowCopy?: boolean;
     previousId?: string | undefined;
-    flow_env?: Record<string, any> | undefined;
     result?: any | undefined;
     extraResults?: any;
 }

package/package/components/propertyPicker/PropPickerResult.svelte

@@ -1,9 +1,5 @@
 <script lang="ts">import ObjectViewer from './ObjectViewer.svelte';
-export let allowCopy = false;
-export let result;
-export let extraResults = undefined;
-export let flow_input = undefined;
-export let flow_env = undefined;
+let { allowCopy = false, result, extraResults = undefined, flow_input = undefined, flow_env = undefined } = $props();
 </script>
 
 <div class="w-full px-2">

package/package/components/propertyPicker/PropPickerResult.svelte.d.ts

@@ -1,3 +1,10 @@
+interface Props {
+    allowCopy?: boolean;
+    result: any;
+    extraResults?: any;
+    flow_input?: any;
+    flow_env?: any;
+}
 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,16 +18,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const PropPickerResult: $$__sveltets_2_IsomorphicComponent<{
-    allowCopy?: boolean;
-    result: any;
-    extraResults?: any;
-    flow_input?: any;
-    flow_env?: any;
-}, {
+declare const PropPickerResult: $$__sveltets_2_IsomorphicComponent<Props, {
     select: any;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type PropPickerResult = InstanceType<typeof PropPickerResult>;
 export default PropPickerResult;

package/package/components/raw_apps/DefaultDatabaseSelector.svelte

@@ -22,44 +22,48 @@ $effect(() => {
 </script>
 
 <Popover>
-	<svelte:fragment slot="trigger">
-		<Button
-			title="Configure default datatable & schema"
-			unifiedSize="xs"
-			variant="subtle"
-			nonCaptureEvent
-			btnClasses="px-1"
-		>
-			<Settings size={12} />
-		</Button>
-	</svelte:fragment>
-	<svelte:fragment slot="content">
-		<div class="flex flex-col gap-3 p-4 min-w-64 max-w-80">
-			<div class="text-xs font-medium text-primary">Default Datatable & Schema</div>
+	{#snippet trigger()}
+	
+			<Button
+				title="Configure default datatable & schema"
+				unifiedSize="xs"
+				variant="subtle"
+				nonCaptureEvent
+				btnClasses="px-1"
+			>
+				<Settings size={12} />
+			</Button>
+		
+	{/snippet}
+	{#snippet content()}
+	
+			<div class="flex flex-col gap-3 p-4 min-w-64 max-w-80">
+				<div class="text-xs font-medium text-primary">Default Datatable & Schema</div>
 
-			<p class="text-2xs text-tertiary leading-relaxed">
-				{description}
-			</p>
+				<p class="text-2xs text-tertiary leading-relaxed">
+					{description}
+				</p>
 
-			<div class="flex flex-col gap-1">
-				<span class="text-2xs text-tertiary">Database</span>
-				<Select
-					items={datatableItems}
-					bind:value={() => datatable, (v) => onChange?.(v, schema)}
-					placeholder="Select database"
-					size="sm"
-				/>
-			</div>
+				<div class="flex flex-col gap-1">
+					<span class="text-2xs text-tertiary">Database</span>
+					<Select
+						items={datatableItems}
+						bind:value={() => datatable, (v) => onChange?.(v, schema)}
+						placeholder="Select database"
+						size="sm"
+					/>
+				</div>
 
-			<div class="flex flex-col gap-1">
-				<span class="text-2xs text-tertiary">Schema</span>
-				<Select
-					items={schemaItems}
-					bind:value={() => schema ?? '', (v) => onChange?.(datatable, v || undefined)}
-					placeholder="public"
-					size="sm"
-				/>
+				<div class="flex flex-col gap-1">
+					<span class="text-2xs text-tertiary">Schema</span>
+					<Select
+						items={schemaItems}
+						bind:value={() => schema ?? '', (v) => onChange?.(datatable, v || undefined)}
+						placeholder="public"
+						size="sm"
+					/>
+				</div>
 			</div>
-		</div>
-	</svelte:fragment>
+		
+	{/snippet}
 </Popover>

package/package/components/raw_apps/FileTreeNode.svelte

@@ -16,11 +16,11 @@ import LessIcon from '../icons/LessIcon.svelte';
 import HtmlIcon from '../icons/HtmlIcon.svelte';
 import MarkdownIcon from '../icons/MarkdownIcon.svelte';
 import YamlIcon from '../icons/YamlIcon.svelte';
-import { tick } from 'svelte';
+import { tick, untrack } from 'svelte';
 let { node, onFileClick, onAddFile, onAddFolder, onRename, onDelete, onRequestEdit, onCancelEdit, selectedPath, pathToEdit, noEdit = false, level = 0 } = $props();
 let userExpanded = $state(null); // null = not set by user
 let isHovered = $state(false);
-let editValue = $state(node.name);
+let editValue = $state(untrack(() => node).name);
 let textInputElement = $state();
 let dropdownOpen = $state(false);
 const isSelected = $derived(selectedPath === node.path);

package/package/components/raw_apps/RawAppEditorHeader.svelte

@@ -24,6 +24,9 @@ import AppEditorHeaderDeploy from '../apps/editor/AppEditorHeaderDeploy.svelte';
 import { updateRawAppPolicy } from './rawAppPolicy';
 import { aiChatManager } from '../copilot/chat/AIChatManager.svelte';
 import { AIBtnClasses } from '../copilot/chat/AIButtonStyle';
+import { isRuleActive } from '../../workspaceProtectionRules.svelte';
+import { buildForkEditUrl } from '../../utils/editInFork';
+import { isCloudHosted } from '../../cloud';
 let { summary = $bindable(), policy = $bindable(), diffDrawer = undefined, savedApp = $bindable(undefined), version = $bindable(undefined), newApp, newPath = '', appPath, runnables, data, files, jobs = $bindable(), jobsById = $bindable(), getBundle, canUndo = false, canRedo = false, onUndo = undefined, onRedo = undefined } = $props();
 let newEditedPath = $state('');
 let deployedValue = $state(undefined); // Value to diff against
@@ -799,7 +802,17 @@ $effect(() => {
 							onClick: () => {
 								window.open(`/apps/add?template=${appPath}`)
 							}
-						}
+						},
+						...(!isCloudHosted() && !isRuleActive('DisableWorkspaceForking')
+							? [
+									{
+										label: 'Edit in workspace fork',
+										onClick: () => {
+											window.open(buildForkEditUrl('raw_app', appPath))
+										}
+									}
+								]
+							: [])
 					]
 				: undefined}
 		>

package/package/components/raw_apps/RawAppInlineScriptRunnable.svelte

@@ -191,7 +191,6 @@ $effect(() => {
 										customTitle={meta?.['customTitle']}
 										loading={meta?.['loading']}
 										documentationLink={meta?.['documentationLink']}
-										markdownTooltip={meta?.['markdownTooltip']}
 										allowTypeChange={meta?.['allowTypeChange']}
 										displayType
 									/>

package/package/components/raw_apps/RawAppInputsSpecEditor.svelte

@@ -17,7 +17,7 @@ let ctxProperties = $derived([
     { value: 'workspace', label: 'Workspace', subtitle: `string — "${$workspaceStore ?? 'unknown'}"` },
     { value: 'author', label: 'Author', subtitle: `string — "${$userStore?.email ?? 'unknown'}"` }
 ]);
-let { id, componentInput = $bindable(), key, shouldCapitalize = true, resourceOnly = false, tooltip = undefined, fieldType, subFieldType, format, selectOptions, placeholder, customTitle = undefined, displayType = false, allowTypeChange = true, loading = false, documentationLink = undefined, markdownTooltip = undefined } = $props();
+let { id, componentInput = $bindable(), key, shouldCapitalize = true, resourceOnly = false, tooltip = undefined, fieldType, subFieldType, format, selectOptions, placeholder, customTitle = undefined, displayType = false, allowTypeChange = true, loading = false, documentationLink = undefined } = $props();
 run(() => {
     if (componentInput == undefined) {
         //@ts-ignore
@@ -48,9 +48,9 @@ run(() => {
 					{#if loading}
 						<Loader2 size={14} class="animate-spin ml-2" />
 					{/if}
-					{#if tooltip || markdownTooltip}
-						<Tooltip small {documentationLink} {markdownTooltip}>
-							{tooltip}
+					{#if tooltip}
+						<Tooltip small {documentationLink}>
+							{@html tooltip}
 						</Tooltip>
 					{/if}
 				</div>

package/package/components/raw_apps/RawAppInputsSpecEditor.svelte.d.ts

@@ -17,7 +17,6 @@ interface Props {
     allowTypeChange?: boolean;
     loading?: boolean;
     documentationLink?: string | undefined;
-    markdownTooltip?: string | undefined;
 }
 declare const RawAppInputsSpecEditor: import("svelte").Component<Props, {}, "componentInput">;
 type RawAppInputsSpecEditor = ReturnType<typeof RawAppInputsSpecEditor>;

package/package/components/raw_apps/RunnableRow.svelte

@@ -3,10 +3,10 @@ import { Ellipsis, Pencil } from 'lucide-svelte';
 import DropdownV2 from '../DropdownV2.svelte';
 import { twMerge } from 'tailwind-merge';
 import TextInput from '../text_input/TextInput.svelte';
-import { tick } from 'svelte';
+import { tick, untrack } from 'svelte';
 let { id, runnable, isSelected, isEditing, onSelect, onDelete, onRename, onRequestEdit, onCancelEdit } = $props();
 let dropdownOpen = $state(false);
-let editValue = $state(id);
+let editValue = $state(untrack(() => id));
 let textInputElement = $state();
 function finishEdit() {
     const trimmed = editValue.trim();

package/package/components/raw_apps/fileTreeUtils.js

@@ -14,12 +14,11 @@ export function buildFileTree(filePaths) {
             currentPath = currentPath ? `${currentPath}/${part}` : part;
             // It's a folder if it's not the last part, or if the original path ended with /
             const isFolder = i < parts.length - 1 || (i === parts.length - 1 && pathEndsWithSlash);
-            const isLastPart = i === parts.length - 1;
             // Check if this node already exists
             if (!nodeMap.has(currentPath)) {
                 // Build the node path with trailing / for folders
                 let nodePath = '/' + currentPath;
-                if (isFolder && isLastPart && pathEndsWithSlash) {
+                if (isFolder) {
                     nodePath = nodePath + '/';
                 }
                 const node = {
@@ -38,7 +37,7 @@ export function buildFileTree(filePaths) {
                     existingNode.isFolder = true;
                     existingNode.children = [];
                     // Update path to include trailing /
-                    if (isLastPart && pathEndsWithSlash && !existingNode.path.endsWith('/')) {
+                    if (!existingNode.path.endsWith('/')) {
                         existingNode.path = existingNode.path + '/';
                     }
                 }

package/package/components/raw_apps/utils.js

@@ -82,7 +82,12 @@ function hiddenRunnableToTsType(runnable) {
         }
     }
     else if (isRunnableByPath(runnable)) {
-        return schemaToTsType(removeStaticFields(runnable?.schema, runnable?.fields ?? {}));
+        if (runnable?.schema) {
+            return schemaToTsType(removeStaticFields(runnable.schema, runnable?.fields ?? {}));
+        }
+        else {
+            return '{}';
+        }
     }
     else {
         return '{}';

package/package/components/recording/FlowRecordingReplay.svelte

@@ -0,0 +1,210 @@
+<script lang="ts">import { workspaceStore } from '../../stores';
+import FlowStatusViewer from '../FlowStatusViewer.svelte';
+import FlowViewer from '../FlowViewer.svelte';
+import FlowProgressBar from '../flows/FlowProgressBar.svelte';
+import FlowExecutionStatus from '../runs/FlowExecutionStatus.svelte';
+import { setActiveReplay } from './flowRecording.svelte';
+import { sendUserToast } from '../../toast';
+import { Button } from '../common';
+import Tooltip from '../meltComponents/Tooltip.svelte';
+import { InfoIcon, LogOut, Play, Square } from 'lucide-svelte';
+import { onDestroy } from 'svelte';
+let { recording } = $props();
+let replayState = $state('loaded');
+let rootJobId = $state(undefined);
+let rootInitialJob = $state(undefined);
+let job = $state(undefined);
+let done = $derived(job?.type === 'CompletedJob');
+function stop() {
+    setActiveReplay(undefined);
+    job = undefined;
+    initRecording();
+}
+function findRootJobId(data) {
+    for (const [id, recorded] of Object.entries(data.jobs)) {
+        const j = recorded.initial_job;
+        if ((j.job_kind === 'flow' || j.job_kind === 'flowpreview') &&
+            !j.parent_job) {
+            return id;
+        }
+    }
+    for (const [id, recorded] of Object.entries(data.jobs)) {
+        if (!recorded.initial_job.parent_job)
+            return id;
+    }
+    return Object.keys(data.jobs)[0];
+}
+/**
+ * Offset all absolute timestamps in the recording so they are relative to "now".
+ * TimelineCompute uses Date.now() for in-progress bars, so we need recorded
+ * started_at/created_at values to be near the current time.
+ */
+function rebaseTimestamps(data, rootId) {
+    const rootJob = data.jobs[rootId]?.initial_job;
+    const anchor = rootJob?.started_at ?? rootJob?.created_at;
+    if (!anchor)
+        return data;
+    const earliest = new Date(anchor).getTime();
+    if (isNaN(earliest))
+        return data;
+    const offset = Date.now() - earliest;
+    function offsetDate(d) {
+        if (!d)
+            return d;
+        const t = new Date(d).getTime();
+        if (isNaN(t))
+            return d;
+        return new Date(t + offset).toISOString();
+    }
+    function offsetJobTimestamps(j) {
+        if (j.started_at)
+            j.started_at = offsetDate(j.started_at);
+        if (j.created_at)
+            j.created_at = offsetDate(j.created_at);
+        if (j.completed_at)
+            j.completed_at = offsetDate(j.completed_at);
+    }
+    function offsetFlowStatus(fs) {
+        if (!fs?.modules)
+            return;
+        for (const mod of fs.modules) {
+            const durations = mod.flow_jobs_duration;
+            if (durations?.started_at) {
+                durations.started_at = durations.started_at.map((d) => offsetDate(d) ?? d);
+            }
+        }
+    }
+    for (const recorded of Object.values(data.jobs)) {
+        offsetJobTimestamps(recorded.initial_job);
+        for (const event of recorded.events) {
+            if (event.data?.job)
+                offsetJobTimestamps(event.data.job);
+            if (event.data?.flow_status)
+                offsetFlowStatus(event.data.flow_status);
+        }
+    }
+    return data;
+}
+function buildInitialJob(data, jobId) {
+    const initialJob = JSON.parse(JSON.stringify(data.jobs[jobId].initial_job));
+    if (data.flow?.value) {
+        initialJob.raw_flow = JSON.parse(JSON.stringify(data.flow.value));
+    }
+    return initialJob;
+}
+function initRecording() {
+    const flowJobId = findRootJobId(recording);
+    if (!flowJobId) {
+        sendUserToast('Recording has no jobs', true);
+        return;
+    }
+    rootJobId = flowJobId;
+    rootInitialJob = buildInitialJob(recording, flowJobId);
+    replayState = 'loaded';
+}
+// Initialize on mount
+initRecording();
+/**
+ * Ensure the root flow's completed event fires after all sub-job events.
+ * During recording, addCompletedJob runs after the flow completes, so sub-job
+ * completed events can have a later `t` than the root's completed event.
+ */
+function fixEventOrdering(data, rootId) {
+    const rootEvents = data.jobs[rootId]?.events;
+    if (!rootEvents?.length)
+        return;
+    // Find the latest event.t across all sub-jobs
+    let maxSubJobT = 0;
+    for (const [id, recorded] of Object.entries(data.jobs)) {
+        if (id === rootId)
+            continue;
+        for (const event of recorded.events) {
+            if (event.t > maxSubJobT)
+                maxSubJobT = event.t;
+        }
+    }
+    // Push the root's completed event to fire after all sub-job events
+    let completedIdx = -1;
+    for (let i = rootEvents.length - 1; i >= 0; i--) {
+        if (rootEvents[i].data.completed) {
+            completedIdx = i;
+            break;
+        }
+    }
+    if (completedIdx >= 0 && rootEvents[completedIdx].t < maxSubJobT) {
+        rootEvents[completedIdx].t = maxSubJobT + 50;
+    }
+}
+function startReplay() {
+    // JSON round-trip to unwrap reactive proxies and strip non-cloneable properties
+    const snapshot = JSON.parse(JSON.stringify(recording));
+    fixEventOrdering(snapshot, rootJobId);
+    rebaseTimestamps(snapshot, rootJobId);
+    setActiveReplay(snapshot);
+    rootInitialJob = buildInitialJob(snapshot, rootJobId);
+    job = undefined;
+    replayState = 'playing';
+}
+onDestroy(() => {
+    setActiveReplay(undefined);
+});
+</script>
+
+{#if !recording?.flow}
+	<div class="flex flex-col items-center justify-center min-h-[60vh]">
+		<div class="border rounded-lg p-8 bg-surface-tertiary max-w-md w-full text-center">
+			<p class="text-xs text-secondary">
+				This recording does not include a flow definition. It was likely recorded with an older
+				version. Re-record the flow to include the flow definition.
+			</p>
+		</div>
+	</div>
+{:else if replayState === 'loaded'}
+	<div class="flex flex-col gap-4">
+		<div class="flex items-center justify-between">
+			<div class="flex items-center gap-2">
+				<h2 class="text-lg font-semibold text-emphasis">{recording.flow_path}</h2>
+				<Tooltip placement="bottom">
+					<InfoIcon size={16} class="text-tertiary" />
+					{#snippet text()}
+												<span class="text-2xs" >
+							Recorded {new Date(recording.recorded_at).toLocaleString()} &mdash;
+							{(recording.total_duration_ms / 1000).toFixed(1)}s
+						</span>
+											{/snippet}
+				</Tooltip>
+			</div>
+			<Button variant="contained" color="blue" on:click={startReplay} startIcon={{ icon: Play }}>
+				Play
+			</Button>
+		</div>
+		<FlowViewer flow={recording.flow} noSummary />
+	</div>
+{:else if replayState === 'playing' && rootJobId}
+	<div class="flex flex-col gap-4">
+		<div class="flex items-center justify-between">
+			<h2 class="text-lg font-semibold text-emphasis">Replaying: {recording.flow_path}</h2>
+			<Button variant="border" size="xs" on:click={stop} startIcon={{ icon: done ? LogOut : Square }}>
+				{done ? 'Exit' : 'Stop'}
+			</Button>
+		</div>
+		<FlowProgressBar {job} slim textPosition="bottom" showStepId />
+		{#if job}
+			<FlowExecutionStatus
+				{job}
+				workspaceId={$workspaceStore}
+				isOwner={false}
+				innerModules={job?.flow_status?.modules}
+				suspendStatus={{ val: {} }}
+			/>
+		{/if}
+		<FlowStatusViewer
+			jobId={rootJobId}
+			initialJob={rootInitialJob}
+			bind:job
+			workspaceId={$workspaceStore}
+			wideResults
+			showLogsWithResult
+		/>
+	</div>
+{/if}

package/package/components/recording/FlowRecordingReplay.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { FlowRecording } from './types';
+interface Props {
+    recording: FlowRecording;
+}
+declare const FlowRecordingReplay: import("svelte").Component<Props, {}, "">;
+type FlowRecordingReplay = ReturnType<typeof FlowRecordingReplay>;
+export default FlowRecordingReplay;