windmill-components 1.642.0 → 1.655.0

package/package/components/FieldHeader.svelte.d.ts

@@ -1,18 +1,4 @@
-import { InfoIcon } from 'lucide-svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FieldHeader: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     label: string;
     format?: string;
     contentEncoding?: string;
@@ -24,10 +10,9 @@ declare const FieldHeader: $$__sveltets_2_IsomorphicComponent<{
     prettify?: boolean;
     simpleTooltip?: string | undefined;
     lightHeader?: boolean;
-    SimpleTooltipIcon?: typeof InfoIcon;
+    SimpleTooltipIcon?: any;
     simpleTooltipIconClass?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FieldHeader = InstanceType<typeof FieldHeader>;
+}
+declare const FieldHeader: import("svelte").Component<Props, {}, "">;
+type FieldHeader = ReturnType<typeof FieldHeader>;
 export default FieldHeader;

package/package/components/FilesetEditor.svelte

@@ -29,6 +29,8 @@ function handleSelectPath(path) {
         editContent = files[path] ?? '';
     }
 }
+// Track the last args we wrote so we can detect external changes.
+let lastWrittenArgs = $state(args ?? {});
 // Sync files → args, overlaying current editContent for the active file.
 // This avoids spreading a new files object on every keystroke.
 $effect(() => {
@@ -41,8 +43,29 @@ $effect(() => {
             newArgs[argKey] = key === currentKey ? currentContent : value;
         }
     }
+    lastWrittenArgs = newArgs;
     args = newArgs;
 });
+// Sync args → files when args changes externally (e.g. from AI generation).
+$effect(() => {
+    const currentArgs = args;
+    if (currentArgs === lastWrittenArgs)
+        return;
+    // Check if the args object is actually different
+    const currentKeys = Object.keys(currentArgs ?? {}).sort().join('\0');
+    const lastKeys = Object.keys(lastWrittenArgs ?? {}).sort().join('\0');
+    if (currentKeys === lastKeys) {
+        const allSame = Object.entries(currentArgs ?? {}).every(([k, v]) => lastWrittenArgs[k] === v);
+        if (allSame)
+            return;
+    }
+    const newFiles = Object.fromEntries(Object.entries(currentArgs ?? {}).map(([k, v]) => ['/' + k, String(v ?? '')]));
+    files = newFiles;
+    lastWrittenArgs = currentArgs;
+    const firstFile = Object.keys(newFiles).find((k) => !k.endsWith('/'));
+    selectedPath = firstFile ?? '/';
+    editContent = firstFile ? (newFiles[firstFile] ?? '') : '';
+});
 function inferLang(filePath) {
     const ext = filePath.split('.').pop()?.toLowerCase();
     if (!ext)

package/package/components/FilterSearchbar.svelte

@@ -195,12 +195,17 @@ let open = $state(false);
 let inputElement = $state();
 let highlightedIndex = $state(0);
 let taggedTextInput = $state();
-let tags = $derived(Object.entries(schema).map(([key, filterSchema]) => ({
+let tags = $derived(Object.entries(schema)
+    .filter(([_, s]) => !s.hidden)
+    .map(([key, filterSchema]) => ({
     regex: new RegExp(`\\b${key}:(?:\\\\.|[^\\s])*`, 'g'),
     id: key,
     onClear: () => (delete value[key], asText.reparse())
 })));
-let keyHighlightRegex = $derived(new RegExp(`\\b(${Object.keys(schema).join('|')}):`, 'g'));
+let keyHighlightRegex = $derived(new RegExp(`\\b(${Object.entries(schema)
+    .filter(([_, s]) => !s.hidden)
+    .map(([k]) => k)
+    .join('|')}):`, 'g'));
 let errorKeys = $derived(new Set(errors.flatMap((e) => e.fields)));
 let errorHighlights = $derived([...errorKeys].map((key) => ({
     regex: new RegExp(`(?<=\\b${key}:)(?:\\\\.|[^\\s])+`),
@@ -210,6 +215,7 @@ let menuItems = $derived.by(() => {
     if (!currentTag) {
         const searchText = currentTextSegment.text.trim().toLowerCase();
         return Object.entries(schema)
+            .filter(([_, s]) => !s.hidden)
             .filter(([k, _]) => !(k in value))
             .filter(([k, filterSchema]) => {
             if (!searchText)
@@ -297,10 +303,11 @@ $effect(() => {
 const kvRegex = /\b(\w+):((?:[^\s\\]|\\.)*)/g;
 function parseFromText(text) {
     const parsed = {};
+    const matchedRanges = [];
     let match;
     while ((match = kvRegex.exec(text)) !== null) {
-        let [_, key, val] = match;
-        if (key in schema) {
+        let [fullMatch, key, val] = match;
+        if (key in schema && key !== '_default_') {
             val ??= '';
             val = val.replace(/\\(.)/g, (_, c) => {
                 if (c === 'n')
@@ -308,20 +315,46 @@ function parseFromText(text) {
                 if (c === 'r')
                     return '\r';
                 return c;
-            }); // Unescape escaped characters
+            });
             val = val.trim();
             parsed[key] = textToFilter(val, schema[key]);
+            matchedRanges.push([match.index, match.index + fullMatch.length]);
+        }
+    }
+    if ('_default_' in schema) {
+        let remaining = '';
+        let lastEnd = 0;
+        matchedRanges.sort((a, b) => a[0] - b[0]);
+        for (const [start, end] of matchedRanges) {
+            remaining += text.slice(lastEnd, start);
+            lastEnd = end;
+        }
+        remaining += text.slice(lastEnd);
+        remaining = remaining.replace(/\s+/g, ' ').trim();
+        if (remaining) {
+            parsed['_default_'] = remaining;
         }
     }
     return parsed;
 }
 function parseToText(v) {
-    return (Object.entries(v)
-        .map(([key, val]) => `${key}: ${filterToText(val, schema[key])}`
-        .replace(/ /g, '\\ ')
-        .replace(/\n/g, '\\n')
-        .replace(/\r/g, '\\r'))
-        .join(' ') + '\u00A0');
+    const parts = [];
+    let defaultText = '';
+    for (const [key, val] of Object.entries(v)) {
+        if (key === '_default_') {
+            defaultText = String(val);
+            continue;
+        }
+        parts.push(`${key}: ${filterToText(val, schema[key])}`
+            .replace(/ /g, '\\ ')
+            .replace(/\n/g, '\\n')
+            .replace(/\r/g, '\\r'));
+    }
+    let result = parts.join(' ');
+    if (defaultText) {
+        result = result ? `${result} ${defaultText}` : defaultText;
+    }
+    return result + '\u00A0';
 }
 let asText = useTransformedSyncedValue([() => (Object.entries(value), value), (v) => assignObjInPlace(value, v)], parseToText, parseFromText);
 function setValueForCurrentTag(val) {

package/package/components/FilterSearchbar.svelte.d.ts

@@ -24,6 +24,7 @@ export type FilterSchema = ({
     label?: string;
     description?: string;
     icon?: IconType;
+    hidden?: boolean;
 };
 export type FilterInstanceRec<T extends FilterSchemaRec> = {
     [K in keyof T]: FilterInstance<T[K]>;

package/package/components/FlowBuilder.svelte

@@ -20,7 +20,7 @@ import { SelectionManager } from './graph/selectionUtils.svelte';
 import { NoteEditor } from './graph/noteEditor.svelte';
 import { setNoteEditorContext } from './graph/noteEditor.svelte';
 import { cleanFlow } from './flows/utils.svelte';
-import { Calendar, Save, DiffIcon, HistoryIcon, FileJson, Settings, Undo, Redo, BookOpen, Circle, CheckCircle, RefreshCw, CheckCheck } from 'lucide-svelte';
+import { Calendar, Save, DiffIcon, HistoryIcon, FileJson, Settings, Undo, Redo, BookOpen, Circle, CheckCircle, RefreshCw, CheckCheck, Disc } from 'lucide-svelte';
 import Awareness from './Awareness.svelte';
 import { getAllModules } from './flows/flowExplorer';
 import {} from './copilot/flow';
@@ -44,8 +44,20 @@ import { validateRetryConfig } from '../utils';
 import { setStepHistoryLoaderContext, StepHistoryLoader } from './stepHistoryLoader.svelte';
 import { ModulesTestStates } from './modulesTest.svelte';
 import FlowAssetsHandler, { initFlowGraphAssetsCtx } from './flows/FlowAssetsHandler.svelte';
+import { isRuleActive } from '../workspaceProtectionRules.svelte';
+import { buildForkEditUrl } from '../utils/editInFork';
+import { isCloudHosted } from '../cloud';
 let { initialPath = $bindable(''), pathStoreInit = undefined, newFlow, selectedId, initialArgs = {}, loading = false, flowStore, flowStateStore, savedFlow = $bindable(undefined), diffDrawer = undefined, customUi = {}, disableAi = false, disabledFlowInputs = false, savedPrimarySchedule = undefined, version = undefined, setSavedraftCb = undefined, draftTriggersFromUrl = undefined, selectedTriggerIndexFromUrl = undefined, children, loadedFromHistoryFromUrl, noInitial = false, onSaveInitial, onSaveDraft, onDeploy, onDeployError, onDetails, onSaveDraftError, onSaveDraftOnlyAtNewPath, onHistoryRestore } = $props();
 let initialPathStore = writable(initialPath);
+// For preserve_on_behalf_of feature
+let preserveOnBehalfOf = writable(false);
+let savedOnBehalfOfEmail = writable(savedFlow?.on_behalf_of_email);
+// Keep savedOnBehalfOfEmail in sync when savedFlow is loaded asynchronously
+$effect(() => {
+    if (savedFlow?.on_behalf_of_email !== undefined) {
+        savedOnBehalfOfEmail.set(savedFlow.on_behalf_of_email);
+    }
+});
 // used for new flows for captures
 let fakeInitialPath = 'u/' +
     ($userStore?.username?.includes('@')
@@ -121,7 +133,7 @@ async function compareVersions() {
         onLatest = true;
     }
 }
-const primaryScheduleStore = writable(savedPrimarySchedule); // kept for legacy reasons
+const primaryScheduleStore = writable(untrack(() => savedPrimarySchedule)); // kept for legacy reasons
 const triggersCount = writable(undefined);
 const simplifiedPoll = writable(false);
 // used to set the primary schedule in the legacy primaryScheduleStore
@@ -367,6 +379,7 @@ async function saveFlow(deploymentMsg, triggersToDeploy) {
                     dedicated_worker: flow.dedicated_worker,
                     visible_to_runner_only: flow.visible_to_runner_only,
                     on_behalf_of_email: flow.on_behalf_of_email,
+                    preserve_on_behalf_of: $preserveOnBehalfOf || undefined,
                     deployment_message: deploymentMsg || undefined
                 }
             });
@@ -406,6 +419,7 @@ async function saveFlow(deploymentMsg, triggersToDeploy) {
                     ws_error_handler_muted: flow.ws_error_handler_muted,
                     visible_to_runner_only: flow.visible_to_runner_only,
                     on_behalf_of_email: flow.on_behalf_of_email,
+                    preserve_on_behalf_of: $preserveOnBehalfOf || undefined,
                     deployment_message: deploymentMsg || undefined
                 }
             });
@@ -429,7 +443,7 @@ async function saveFlow(deploymentMsg, triggersToDeploy) {
 let timeout = undefined;
 function saveSessionDraft() {
     timeout && clearTimeout(timeout);
-    timeout = setTimeout(() => {
+    timeout = window.setTimeout(() => {
         try {
             localStorage.setItem(initialPath && initialPath != '' ? `flow-${initialPath}` : 'flow', encodeState({
                 flow: flowStore.val,
@@ -451,8 +465,8 @@ function saveSessionDraft() {
 const selectionManager = new SelectionManager();
 const selectedIdStore = $derived(selectionManager.getSelectedId());
 // Initialize with selected id if provided
-if (selectedId) {
-    selectionManager.selectId(selectedId);
+if (untrack(() => selectedId)) {
+    selectionManager.selectId(untrack(() => selectedId) ?? '');
 }
 else {
     selectionManager.selectId('settings-metadata');
@@ -460,12 +474,11 @@ else {
 export function getSelectedId() {
     return selectedIdStore;
 }
-const previewArgsStore = $state({ val: initialArgs });
+const previewArgsStore = $state({ val: untrack(() => initialArgs) });
 const scriptEditorDrawer = writable(undefined);
 const flowEditorDrawer = writable(undefined);
-const moving = writable(undefined);
-const history = initHistory(flowStore.val);
-const pathStore = writable(pathStoreInit ?? initialPath);
+const history = initHistory(untrack(() => flowStore).val);
+const pathStore = writable(untrack(() => pathStoreInit) ?? initialPath);
 const captureOn = writable(false);
 const showCaptureHint = writable(undefined);
 const flowInputEditorStateStore = writable({
@@ -487,25 +500,26 @@ setContext('FlowEditorContext', {
     previewArgs: previewArgsStore,
     scriptEditorDrawer,
     flowEditorDrawer,
-    moving,
     history,
-    flowStateStore,
-    flowStore,
+    flowStateStore: untrack(() => flowStateStore),
+    flowStore: untrack(() => flowStore),
     pathStore,
     stepsInputArgs,
     saveDraft,
     initialPathStore,
     fakeInitialPath,
     flowInputsStore: writable({}),
-    customUi,
+    customUi: untrack(() => customUi),
     insertButtonOpen,
     executionCount: writable(0),
     flowInputEditorState: flowInputEditorStateStore,
     modulesTestStates,
-    outputPickerOpenFns
+    outputPickerOpenFns,
+    preserveOnBehalfOf,
+    savedOnBehalfOfEmail
 });
 // Set up NoteEditor context for note editing capabilities
-const noteEditor = new NoteEditor(flowStore, () => {
+const noteEditor = new NoteEditor(untrack(() => flowStore), () => {
     // Enable notes display when a note is created
     flowEditor?.enableNotes?.();
 });
@@ -515,8 +529,8 @@ setContext('FlowGraphAssetContext', initFlowGraphAssetsCtx({ getModules: () => f
 const triggersState = $state(new Triggers([
     { type: 'webhook', path: '', isDraft: false },
     { type: 'default_email', path: '', isDraft: false },
-    ...(draftTriggersFromUrl ?? savedFlow?.draft?.draft_triggers ?? [])
-], selectedTriggerIndexFromUrl, saveSessionDraft));
+    ...(untrack(() => draftTriggersFromUrl) ?? savedFlow?.draft?.draft_triggers ?? [])
+], untrack(() => selectedTriggerIndexFromUrl), saveSessionDraft));
 setContext('TriggerContext', {
     triggersCount,
     simplifiedPoll,
@@ -614,19 +628,25 @@ function generateIds() {
     ];
 }
 const dropdownItems = [];
-if (customUi.topBar?.extraDeployOptions != false) {
+if (untrack(() => customUi).topBar?.extraDeployOptions != false) {
     if (savedFlow?.draft_only === false || savedFlow?.draft_only === undefined) {
         dropdownItems.push({
             label: 'Exit & see details',
             onClick: () => onDetails?.({ path: $pathStore })
         });
     }
-    if (!newFlow) {
+    if (!untrack(() => newFlow)) {
         dropdownItems.push({
             label: 'Fork',
             onClick: () => window.open(`/flows/add?template=${initialPath}`)
         });
     }
+    if (!untrack(() => newFlow) && !isCloudHosted() && !isRuleActive('DisableWorkspaceForking')) {
+        dropdownItems.push({
+            label: 'Edit in workspace fork',
+            onClick: () => window.open(buildForkEditUrl('flow', initialPath))
+        });
+    }
 }
 let flowCopilotContext = $state({
     shouldUpdatePropertyType: writable({}),
@@ -649,12 +669,6 @@ export function triggerTutorial() {
 }
 let baseMenuItems = $state([]);
 const mod = isMac() ? '⌘' : 'Ctrl+';
-const undoShortcutSnippet = createRawSnippet(() => ({
-    render: () => `<span class="ml-auto text-2xs text-tertiary">${mod}Z</span>`
-}));
-const redoShortcutSnippet = createRawSnippet(() => ({
-    render: () => `<span class="ml-auto text-2xs text-tertiary">${mod}⇧Z</span>`
-}));
 function getMoreItems() {
     return [
         ...baseMenuItems,
@@ -663,7 +677,7 @@ function getMoreItems() {
             icon: Undo,
             action: () => handleUndo(),
             disabled: $history.index === 0,
-            extra: undoShortcutSnippet,
+            shortcut: `${mod}Z`,
             separatorTop: baseMenuItems.length > 0
         },
         {
@@ -671,7 +685,7 @@ function getMoreItems() {
             icon: Redo,
             action: () => handleRedo(),
             disabled: $history.index === $history.history.length - 1,
-            extra: redoShortcutSnippet
+            shortcut: `${mod}⇧Z`
         },
         {
             displayName: 'Tutorials',
@@ -721,6 +735,11 @@ function getMoreItems() {
                     icon: CheckCheck
                 }
             ]
+        },
+        {
+            displayName: 'Test flow & record',
+            icon: Disc,
+            action: () => flowPreviewButtons?.openRecordingPreview()
         }
     ];
 }
@@ -805,7 +824,7 @@ $effect.pre(() => {
 export async function loadFlowState() {
     await stepHistoryLoader.loadIndividualStepsStates(flowStore.val, flowStateStore, $workspaceStore, $initialPathStore, $pathStore);
 }
-let stepHistoryLoader = new StepHistoryLoader(loadedFromHistoryFromUrl?.stepsState ?? {}, loadedFromHistoryFromUrl?.flowJobInitial, saveSessionDraft, noInitial);
+let stepHistoryLoader = new StepHistoryLoader(untrack(() => loadedFromHistoryFromUrl)?.stepsState ?? {}, untrack(() => loadedFromHistoryFromUrl)?.flowJobInitial, saveSessionDraft, untrack(() => noInitial));
 setStepHistoryLoaderContext(stepHistoryLoader);
 export function setLoadedFromHistory(loadedFromHistoryUrl) {
     if (!loadedFromHistoryUrl) {

package/package/components/FlowGraphViewer.svelte

@@ -4,16 +4,7 @@ import FlowGraphViewerStep from './FlowGraphViewerStep.svelte';
 import FlowGraphV2 from './graph/FlowGraphV2.svelte';
 import { dfs } from './flows/dfs';
 import { workspaceStore } from '../stores';
-export let flow;
-export let overflowAuto = false;
-export let noSide = false;
-export let download = false;
-export let noGraph = false;
-export let triggerNode = false;
-export let stepDetail = undefined;
-export let workspace = $workspaceStore;
-export let minHeight = 400;
-export let noBorder = false;
+let { flow, overflowAuto = false, noSide = false, download = false, noGraph = false, triggerNode = false, stepDetail = $bindable(undefined), workspace = $workspaceStore, minHeight = 400, noBorder = false } = $props();
 const dispatch = createEventDispatcher();
 </script>
 

package/package/components/FlowGraphViewer.svelte.d.ts

@@ -1,18 +1,5 @@
 import type { FlowModule, FlowValue } from '../gen';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FlowGraphViewer: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     flow: {
         summary: string;
         description?: string;
@@ -29,11 +16,25 @@ declare const FlowGraphViewer: $$__sveltets_2_IsomorphicComponent<{
     workspace?: string | undefined;
     minHeight?: number;
     noBorder?: boolean;
-}, {
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const FlowGraphViewer: $$__sveltets_2_IsomorphicComponent<Props, {
     triggerDetail: CustomEvent<any>;
     select: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "stepDetail">;
 type FlowGraphViewer = InstanceType<typeof FlowGraphViewer>;
 export default FlowGraphViewer;

package/package/components/FlowGraphViewerStep.svelte

@@ -15,16 +15,14 @@ import FlowModuleScript from './flows/content/FlowModuleScript.svelte';
 import { Copy, Expand } from 'lucide-svelte';
 import HighlightTheme from './HighlightTheme.svelte';
 import LanguageIcon from './common/languageIcons/LanguageIcon.svelte';
-export let schema = undefined;
-export let stepDetail = undefined;
-export let jobScriptHash = undefined;
-let codeViewer;
+let { schema = undefined, stepDetail = undefined, jobScriptHash = undefined } = $props();
+let codeViewer = $state();
 </script>
 
 <HighlightTheme />
 
 <Drawer bind:this={codeViewer} size="900px">
-	<DrawerContent title={'Expanded Code'} on:close={codeViewer.closeDrawer}>
+	<DrawerContent title={'Expanded Code'} on:close={codeViewer?.closeDrawer}>
 		{#if stepDetail && typeof stepDetail != 'string'}
 			{#if stepDetail.value.type == 'script'}
 				<div class="mb-4">
@@ -178,7 +176,7 @@ let codeViewer;
 					<Button
 						unifiedSize="sm"
 						variant="subtle"
-						onClick={codeViewer.openDrawer}
+						onClick={codeViewer?.openDrawer}
 						startIcon={{ icon: Expand }}>Expand</Button
 					>
 				</div>
@@ -216,7 +214,7 @@ let codeViewer;
 						<Button
 							unifiedSize="sm"
 							variant="subtle"
-							onClick={codeViewer.openDrawer}
+							onClick={codeViewer?.openDrawer}
 							startIcon={{ icon: Expand }}>Expand</Button
 						>
 					</div>

package/package/components/FlowGraphViewerStep.svelte.d.ts

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

package/package/components/FlowHistoryJobPicker.svelte

@@ -5,7 +5,7 @@ import HistoricInputs from './HistoricInputs.svelte';
 import { workspaceStore } from '../stores';
 import { JobService } from '../gen';
 import { Button } from './common';
-let { path, selected = undefined, selectInitial = false, loading = $bindable(false) } = $props();
+let { path, selected = undefined, selectInitial = false, loading = $bindable(false), newFlow = false } = $props();
 const dispatch = createEventDispatcher();
 async function loadInitial() {
     loading = true;
@@ -26,7 +26,9 @@ async function loadInitial() {
     loading = false;
 }
 $effect(() => {
-    $workspaceStore && untrack(() => loadInitial());
+    if ($workspaceStore && !newFlow) {
+        untrack(() => loadInitial());
+    }
 });
 </script>
 

package/package/components/FlowHistoryJobPicker.svelte.d.ts

@@ -3,6 +3,7 @@ interface Props {
     selected?: string | undefined;
     selectInitial?: boolean;
     loading?: boolean;
+    newFlow?: boolean;
 }
 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> & {

package/package/components/FlowInputViewer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import FieldHeader from './FieldHeader.svelte';
-export let schema;
+let { schema } = $props();
 </script>
 
 <ul class="my-2">

package/package/components/FlowInputViewer.svelte.d.ts

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

package/package/components/FlowLogViewer.svelte

@@ -11,7 +11,9 @@ import { updateLinks } from '../keyboardChain';
 import FlowLogRow from './FlowLogRow.svelte';
 import { Tooltip } from './meltComponents';
 import FlowTimelineBar from './FlowTimelineBar.svelte';
+import { getActiveReplay } from './recording/flowRecording.svelte';
 let { modules, localModuleStates, rootJob, expandedRows, allExpanded, showResultsInputs, toggleExpanded, toggleExpandAll, workspaceId, render, level = 0, flowId = 'root', onSelectedIteration, getSelectedIteration, flowSummary, mode = 'flow', currentId, navigationChain = $bindable(), select, timelineMin: timelineMinAbsolute, timelineTotal: timelineTotalAbsolute, timelineItems, timelineNow, timelineAvailableWidths = $bindable(), timelinelWidth, showTimeline = true } = $props();
+let isReplay = $derived(!!getActiveReplay());
 function getJobLink(jobId) {
     if (!jobId)
         return '';
@@ -442,7 +444,7 @@ function isJobFailure(jobId, moduleId) {
 						{/if}
 					</div>
 
-					{#if flowInfo?.jobId}
+					{#if flowInfo?.jobId && !isReplay}
 						<a
 							href={getJobLink(flowInfo.jobId)}
 							class="text-xs text-gray-400 hover:text-primary pl-1"
@@ -462,7 +464,7 @@ function isJobFailure(jobId, moduleId) {
 					{#if flowInfo?.logs}
 						<LogViewer
 							content={flowInfo.logs}
-							jobId={flowInfo.jobId}
+							jobId={isReplay ? undefined : flowInfo.jobId}
 							isLoading={false}
 							small={true}
 							download={false}
@@ -652,7 +654,7 @@ function isJobFailure(jobId, moduleId) {
 												{/if}
 											</div>
 
-											{#if isLeafStep && jobId}
+											{#if isLeafStep && jobId && !isReplay}
 												<a
 													href={getJobLink(jobId ?? '')}
 													class="text-xs text-gray-400 hover:text-primary pl-1"
@@ -745,7 +747,7 @@ function isJobFailure(jobId, moduleId) {
 													<div onclick={() => select(`${module.id}-logs`)}>
 														<LogViewer
 															content={logs}
-															jobId={jobId ?? ''}
+															jobId={isReplay ? undefined : (jobId ?? '')}
 															isLoading={false}
 															small={true}
 															download={false}

package/package/components/FlowLogViewerWrapper.svelte

@@ -25,7 +25,7 @@ const timelineMin = $derived(timelineCompute?.min ?? undefined);
 const timelineTotal = $derived(timelineCompute?.total ?? undefined);
 const timelineItems = $derived(timelineCompute?.items ?? undefined);
 const timelineNow = $derived(timelineCompute?.now ?? Date.now());
-let moduleTracker = new ChangeTracker($state.snapshot(job.raw_flow?.modules ?? []));
+let moduleTracker = new ChangeTracker($state.snapshot(untrack(() => job).raw_flow?.modules ?? []));
 $effect(() => {
     readFieldsRecursively(job.raw_flow?.modules ?? []);
     untrack(() => moduleTracker.track($state.snapshot(job.raw_flow?.modules ?? [])));
@@ -80,7 +80,7 @@ function select(id) {
     currentId = id;
 }
 let timelineAvailableWidths = $state({});
-let lastJobId = $state(job.id);
+let lastJobId = $state(untrack(() => job).id);
 const timelinelWidth = $derived.by(() => {
     const widths = Object.values(timelineAvailableWidths);
     return widths.length > 0 ? Math.max(Math.min(...widths) - 12, 0) : 0;