windmill-components 1.677.1 → 1.695.0

package/package/components/FlowPreviewContent.svelte

@@ -11,7 +11,7 @@ import FlowProgressBar from './flows/FlowProgressBar.svelte';
 import FlowExecutionStatus from './runs/FlowExecutionStatus.svelte';
 import JobDetailHeader from './runs/JobDetailHeader.svelte';
 import { AlertTriangle, Circle, CornerDownLeft, Download, Loader2, Play, RefreshCw, X } from 'lucide-svelte';
-import { emptyString, sendUserToast } from '../utils';
+import { sendUserToast } from '../utils';
 import { dfs } from './flows/dfs';
 import { sliceModules } from './flows/flowStateUtils.svelte';
 import InputSelectedBadge from './schema/InputSelectedBadge.svelte';
@@ -22,9 +22,26 @@ import { getStepHistoryLoaderContext } from './stepHistoryLoader.svelte';
 import FlowChat from './flows/conversations/FlowChat.svelte';
 import { stateSnapshot } from '../svelte5Utils.svelte';
 import FlowRestartButton from './FlowRestartButton.svelte';
+import { useNestedRestartState } from './useNestedRestartState.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 previewExpandedSubflows = $state({});
+const restart = useNestedRestartState({
+    selectedJobStep: () => selectedJobStep,
+    job: () => job,
+    graphModuleStates: () => localModuleStates,
+    expandedSubflows: () => previewExpandedSubflows
+});
+// `selectedJobStepType` and `selectedJobStepIsTopLevel` are still exposed as
+// `$bindable` props to legacy parents (FlowPreviewButtons binds them but
+// doesn't read them). Sync them out of the composable here so the prop
+// surface stays unchanged.
+$effect(() => {
+    selectedJobStepIsTopLevel = restart.selectedJobStepIsTopLevel;
+});
+$effect(() => {
+    selectedJobStepType = restart.selectedJobStepType;
+});
 let isRunning = $state(false);
 let jsonView = $state(false);
 let jsonEditor = $state(undefined);
@@ -118,28 +135,6 @@ function onKeyDown(event) {
         }
     }
 }
-function onSelectedJobStepChange() {
-    if (selectedJobStep !== undefined && job?.flow_status?.modules !== undefined) {
-        selectedJobStepIsTopLevel =
-            job?.flow_status?.modules.map((m) => m.id).indexOf(selectedJobStep) >= 0;
-        let moduleDefinition = job?.raw_flow?.modules.find((m) => m.id == selectedJobStep);
-        if (moduleDefinition?.value.type == 'forloopflow') {
-            selectedJobStepType = 'forloop';
-        }
-        else if (moduleDefinition?.value.type == 'branchall') {
-            selectedJobStepType = 'branchall';
-            moduleDefinition?.value.branches.forEach((branch, idx) => {
-                restartBranchNames.push([
-                    idx,
-                    emptyString(branch.summary) ? `Branch #${idx}` : branch.summary
-                ]);
-            });
-        }
-        else {
-            selectedJobStepType = 'single';
-        }
-    }
-}
 let savedArgs = $state(previewArgs.val);
 let inputSelected = $state(undefined);
 async function selectInput(input, type) {
@@ -219,9 +214,6 @@ function onScrollableDivChange() {
         scrollableDiv.scrollTop = scrollTop;
     }
 }
-$effect.pre(() => {
-    selectedJobStep !== undefined && untrack(() => onSelectedJobStepChange());
-});
 $effect(() => {
     scrollableDiv && render && untrack(() => onScrollableDivChange());
 });
@@ -316,12 +308,21 @@ export function flowHasChanged() {
 				</div>
 			{:else}
 				<div class="grow justify-center flex flex-row gap-2 items-center">
-					{#if jobId !== undefined && selectedJobStep !== undefined && selectedJobStepIsTopLevel}
+					{#if jobId !== undefined && selectedJobStep !== undefined && restart.topLevelRestartable}
+						<!--
+							Nested-step restart is intentionally not surfaced from the editor
+							preview: the chain needs `flow_job_id` resolved at every level,
+							which only the backend can do (by walking the original
+							execution). Users who want nested restart should use the run
+							page, which goes through the dedicated restart API.
+						-->
 						<FlowRestartButton
 							{jobId}
 							{selectedJobStep}
-							{selectedJobStepType}
-							{restartBranchNames}
+							selectedJobStepType={restart.selectedJobStepType}
+							restartBranchNames={restart.restartBranchNames}
+							presetIterationN={restart.topLevelLoopIteration}
+							iterationCounts={restart.iterationCounts}
 							onRestart={(stepId, branchOrIterationN) => {
 								runPreview(previewArgs.val, {
 									flow_job_id: jobId,
@@ -544,6 +545,7 @@ export function flowHasChanged() {
 				<FlowStatusViewer
 					bind:job
 					bind:localModuleStates
+					bind:expandedSubflows={previewExpandedSubflows}
 					bind:localDurationStatuses
 					{suspendStatus}
 					hideDownloadInGraph={customUi?.downloadLogs === false}

package/package/components/FlowRestartButton.svelte

@@ -4,24 +4,82 @@ import { Play, RefreshCw } from 'lucide-svelte';
 import { FlowService, JobService } from '../gen';
 import { workspaceStore } from '../stores';
 import { emptyString, sendUserToast } from '../utils';
-let { jobId, selectedJobStep, selectedJobStepType, restartBranchNames = [], flowPath = undefined, flowVersionId = undefined, disabled = false, enterpriseOnly = false, variant = 'default', unifiedSize = 'md', onRestart, onRestartComplete } = $props();
+let { jobId, selectedJobStep, selectedJobStepType, restartBranchNames = [], flowPath = undefined, flowVersionId = undefined, disabled = false, enterpriseOnly = false, variant = 'default', unifiedSize = 'md', nestedPath = undefined, nestedTopStepId = undefined, nestedTopBranchOrIterationN = undefined, presetIterationN = undefined, iterationCounts = undefined, nestedPathIterationCounts = undefined, onRestart, onRestartComplete } = $props();
+const isNested = $derived((nestedPath?.length ?? 0) > 0);
+// Inline-expanded subflow steps come in as `subflow:A:B:leaf` — show only `leaf`.
+const displayStepId = $derived(isNested && nestedPath && nestedPath.length > 0
+    ? nestedPath[nestedPath.length - 1].step_id
+    : selectedJobStep);
 // Sentinel value meaning "use the same version as the original run" (backend receives undefined)
 const RUN_VERSION_SENTINEL = -1;
 let branchOrIterationN = $state(0);
+let iterationEdits = $state({});
+function resetEditsFromProps() {
+    const next = {};
+    if (isNested && nestedTopBranchOrIterationN !== undefined) {
+        next['top'] = nestedTopBranchOrIterationN;
+    }
+    if (isNested) {
+        nestedPath?.forEach((entry, i) => {
+            if (entry.branch_or_iteration_n !== undefined) {
+                next[`inner-${i}`] = entry.branch_or_iteration_n;
+            }
+        });
+    }
+    iterationEdits = next;
+    if (selectedJobStepType === 'forloop' && presetIterationN !== undefined) {
+        branchOrIterationN = presetIterationN;
+    }
+}
+const iterationFields = $derived.by(() => {
+    if (!isNested)
+        return [];
+    const out = [];
+    if (nestedTopBranchOrIterationN !== undefined && nestedTopStepId) {
+        out.push({
+            key: 'top',
+            label: nestedTopStepId,
+            value: iterationEdits['top'] ?? nestedTopBranchOrIterationN
+        });
+    }
+    nestedPath?.forEach((entry, i) => {
+        if (entry.branch_or_iteration_n !== undefined) {
+            const k = `inner-${i}`;
+            out.push({
+                key: k,
+                label: entry.step_id,
+                value: iterationEdits[k] ?? entry.branch_or_iteration_n
+            });
+        }
+    });
+    return out;
+});
+const needsPopup = $derived(!!flowPath || iterationFields.length > 0 || selectedJobStepType !== 'single');
 let selectedFlowVersion = $state(RUN_VERSION_SENTINEL);
 let flowVersions = $state([]);
 let loadingVersions = $state(false);
 let versionsLoaded = $state(false);
 let runVersionInList = $state(false);
 async function restartFlow(stepId, branchOrIterationN, flowVersion) {
-    let run = await JobService.restartFlowAtStep({
-        workspace: $workspaceStore,
-        id: jobId,
-        requestBody: {
+    const requestBody = isNested
+        ? {
+            step_id: nestedTopStepId,
+            branch_or_iteration_n: iterationEdits['top'] ?? nestedTopBranchOrIterationN,
+            flow_version: flowVersion,
+            nested_path: nestedPath?.map((entry, i) => ({
+                step_id: entry.step_id,
+                branch_or_iteration_n: iterationEdits[`inner-${i}`] ?? entry.branch_or_iteration_n
+            }))
+        }
+        : {
             step_id: stepId,
             branch_or_iteration_n: branchOrIterationN,
             flow_version: flowVersion
-        }
+        };
+    let run = await JobService.restartFlowAtStep({
+        workspace: $workspaceStore,
+        id: jobId,
+        requestBody
     });
     onRestartComplete?.(run);
 }
@@ -94,23 +152,23 @@ function handleRestart() {
 		{/if}
 	</label>
 {/snippet}
-{#snippet singleRestartButton()}
+{#snippet restartTriggerButton(usePlayIcon: boolean)}
 	<Button
-		title={`Re-start this flow from step ${selectedJobStep} (included).${enterpriseOnly ? ' This is a feature only available in enterprise edition.' : ''}`}
+		title={`Re-start this flow from step ${displayStepId} (included).${enterpriseOnly ? ' This is a feature only available in enterprise edition.' : ''}`}
 		{variant}
 		{unifiedSize}
 		{disabled}
-		startIcon={{ icon: Play }}
-		nonCaptureEvent={!!flowPath}
+		startIcon={{ icon: usePlayIcon ? Play : RefreshCw }}
+		nonCaptureEvent={!usePlayIcon || !!flowPath}
 		onClick={() => {
-			if (!flowPath) {
+			if (usePlayIcon && !flowPath) {
 				handleRestart()
 			}
 		}}
 	>
 		Re-start from
 		<Badge baseClass="ml-1" color="indigo">
-			{selectedJobStep}
+			{displayStepId}
 		</Badge>
 		{#if enterpriseOnly && disabled}
 			(EE)
@@ -118,68 +176,92 @@ function handleRestart() {
 	</Button>
 {/snippet}
 
-{#if selectedJobStepType === 'single'}
-	{#if !flowPath}
-		{@render singleRestartButton()}
-	{:else}
-		<Popover
-			floatingConfig={{ strategy: 'absolute', placement: 'bottom-start' }}
-			disablePopup={!flowPath}
-			on:openChange={(e) => { if (e.detail) loadFlowVersions() }}
-		>
-			{#snippet trigger()}
-				{@render singleRestartButton()}
-			{/snippet}
-			{#snippet content()}
-				<div class="flex flex-col gap-4 text-primary p-4 w-80">
-					{@render flowVersionSelector()}
-
-					<Button variant="accent" onClick={handleRestart}>Restart</Button>
-				</div>
-			{/snippet}
-		</Popover>
-	{/if}
+{#if !needsPopup}
+	{@render restartTriggerButton(true)}
 {:else}
 	<Popover
 		floatingConfig={{ strategy: 'absolute', placement: 'bottom-start' }}
-		on:openChange={(e) => { if (e.detail) loadFlowVersions() }}
+		disablePopup={!needsPopup}
+		on:openChange={(e) => {
+			if (e.detail) {
+				loadFlowVersions()
+				resetEditsFromProps()
+			}
+		}}
 	>
 		{#snippet trigger()}
-			<Button
-				title={`Re-start this flow from step ${selectedJobStep} (included).${enterpriseOnly ? ' This is a feature only available in enterprise edition.' : ''}`}
-				{variant}
-				{unifiedSize}
-				{disabled}
-				startIcon={{ icon: RefreshCw }}
-				nonCaptureEvent={true}
-			>
-				Re-start from
-				<Badge baseClass="ml-1" color="indigo">
-					{selectedJobStep}
-				</Badge>
-				{#if enterpriseOnly && disabled}
-					(EE)
-				{/if}
-			</Button>
+			{@render restartTriggerButton(selectedJobStepType === 'single')}
 		{/snippet}
 		{#snippet content()}
 			<div class="flex flex-col gap-4 text-primary p-4 w-80">
-				<label>
-					<div class="pb-1 text-xs font-semibold text-emphasis"
-						>{selectedJobStepType == 'forloop' ? 'From iteration #' : 'From branch'}</div
-					>
-					<div class="flex w-full gap-2">
-						{#if selectedJobStepType === 'forloop'}
-							<input type="number" min="0" bind:value={branchOrIterationN} class="!w-32 grow" />
-						{:else}
+				{#if selectedJobStepType === 'forloop'}
+					{@const topCount = iterationCounts?.[selectedJobStep] ?? 0}
+					<label>
+						<div class="pb-1 text-xs font-semibold text-emphasis">From iteration #</div>
+						<div class="flex w-full gap-2">
+							{#if topCount > 0}
+								<select bind:value={branchOrIterationN} class="!w-32 grow">
+									{#each Array.from({ length: topCount }, (_, i) => i) as i (i)}
+										<option value={i}>{i + 1}</option>
+									{/each}
+								</select>
+							{:else}
+								<input type="number" min="0" bind:value={branchOrIterationN} class="!w-32 grow" />
+							{/if}
+						</div>
+					</label>
+				{:else if selectedJobStepType === 'branchall'}
+					<label>
+						<div class="pb-1 text-xs font-semibold text-emphasis">From branch</div>
+						<div class="flex w-full gap-2">
 							<select bind:value={branchOrIterationN} class="!w-32 grow">
 								{#each restartBranchNames as [branchIdx, branchName] (branchIdx)}
 									<option value={branchIdx}>{branchName}</option>
 								{/each}
 							</select>
-						{/if}
-					</div>
-				</label>
+						</div>
+					</label>
+				{/if}
+
+				{#each iterationFields as field (field.key)}
+					{@const count = nestedPathIterationCounts?.[field.key] ?? 0}
+					<label>
+						<div class="pb-1 text-xs font-semibold text-emphasis">
+							From iteration # of <code class="text-xs">{field.label}</code>
+						</div>
+						<div class="flex w-full gap-2">
+							{#if count > 0}
+								<select
+									value={field.value}
+									onchange={(e) => {
+										const v = parseInt((e.target as HTMLSelectElement).value, 10)
+										if (!Number.isNaN(v)) {
+											iterationEdits = { ...iterationEdits, [field.key]: v }
+										}
+									}}
+									class="!w-32 grow"
+								>
+									{#each Array.from({ length: count }, (_, i) => i) as i (i)}
+										<option value={i}>{i + 1}</option>
+									{/each}
+								</select>
+							{:else}
+								<input
+									type="number"
+									min="0"
+									value={field.value}
+									oninput={(e) => {
+										const v = parseInt((e.target as HTMLInputElement).value, 10)
+										if (!Number.isNaN(v)) {
+											iterationEdits = { ...iterationEdits, [field.key]: v }
+										}
+									}}
+									class="!w-32 grow"
+								/>
+							{/if}
+						</div>
+					</label>
+				{/each}
 
 				{#if flowPath}
 					{@render flowVersionSelector()}

package/package/components/FlowRestartButton.svelte.d.ts

@@ -10,6 +10,43 @@ interface Props {
     enterpriseOnly?: boolean;
     variant?: 'default' | 'accent';
     unifiedSize?: 'xs' | 'sm' | 'md' | 'lg';
+    /**
+     * For nested-step restarts: path of ancestor containers from the top-level
+     * step down to the leaf. When provided, the LAST entry's step_id is the
+     * actual restart point and `selectedJobStep` (the leaf shown in the UI) is
+     * informational only — the request is built from `nestedTopStepId`,
+     * `nestedTopBranchOrIterationN` and `nestedPath`.
+     */
+    nestedPath?: Array<{
+        step_id: string;
+        branch_or_iteration_n?: number;
+    }>;
+    /** Top-level container step id (only used when nestedPath is set) */
+    nestedTopStepId?: string;
+    /** Top-level container branch_or_iteration_n (only used when nestedPath is set) */
+    nestedTopBranchOrIterationN?: number;
+    /**
+     * For top-level ForLoop restart: iteration index the user is currently
+     * viewing in the graph (read from `selectedForloopIndex` upstream). When
+     * provided, the popup pre-fills the iteration selector with this value.
+     */
+    presetIterationN?: number;
+    /**
+     * Map from ForLoop step id to the number of iterations that ran in the
+     * original execution (i.e. `flow_jobs.length`). When provided for a step,
+     * the popup renders a `<select>` of `0..count-1` instead of a free-form
+     * number input — same surface as the graph's iteration tabs. Used for the
+     * SELECTED step's iteration picker when it is itself a top-level ForLoop.
+     */
+    iterationCounts?: Record<string, number>;
+    /**
+     * Iteration counts for nested-path entries, keyed by the popup's field-key
+     * (`'top'` for the outer container, `'inner-N'` for nested ancestors).
+     * Populated by the composable so each entry uses the *correct* graph-state
+     * key (prefixed for in-subflow ancestors), avoiding collisions when the
+     * same step id appears at multiple nesting levels.
+     */
+    nestedPathIterationCounts?: Record<string, number>;
     /** Called when flow is restarted. If not provided, will navigate to the new run using goto (requires SvelteKit) */
     onRestart?: (stepId: string, branchOrIterationN: number, flowVersion?: number) => void;
     /** Called when flow restart completes with the new job ID. Used for navigation in non-SvelteKit contexts */

package/package/components/FlowStatusViewer.svelte

@@ -2,7 +2,16 @@
 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), hideFlowResult = false, 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, notes: notesProp = undefined, groups: groupsProp = undefined } = $props();
+let { jobId, initialJob = undefined, workspaceId = undefined, flowState = $bindable({}), selectedJobStep = $bindable(undefined), hideFlowResult = false, hideTimeline = false, hideDownloadInGraph = false, hideNodeDefinition = false, hideJobId = false, hideDownloadLogs = false, rightColumnSelect = $bindable('timeline'), isOwner = $bindable(false), wideResults = false, localModuleStates = $bindable({}), 
+// `$bindable({})` is the right shape for this prop despite CLAUDE.md's
+// general guidance against `$bindable(default_value)`: that rule targets
+// props where `undefined` has distinct semantics from "empty default".
+// For a Map-typed cache populated by the inner component, callers that
+// don't bind it should still see a usable empty map (the inner writes to
+// it when the user expands a subflow). Without the `{}` default, those
+// callers would crash at write time. Same reasoning applies to the
+// pre-existing `localModuleStates`/`localDurationStatuses` bindables.
+expandedSubflows = $bindable({}), localDurationStatuses = $bindable({}), job = $bindable(undefined), render = true, suspendStatus = $bindable({ val: {} }), customUi, onStart, onJobsLoaded, onDone, showLogsWithResult = false, notes: notesProp = undefined, groups: groupsProp = undefined } = $props();
 let lastJobId = untrack(() => jobId);
 let retryStatus = $state({ val: {} });
 let globalRefreshes = $state({});
@@ -30,6 +39,10 @@ async function updateJobId() {
             delete flowState[key];
         localDurationStatuses = {};
         localModuleStates = {};
+        // Reset the subflow definition cache too — a new run can reference
+        // different subflow versions; stale entries would confuse nested
+        // restart path-finding.
+        expandedSubflows = {};
     }
 }
 let lastScriptPath = $state(undefined);
@@ -61,6 +74,7 @@ let toolCallIndicesToLoad = $state([]);
 		}}
 		globalModuleStates={[]}
 		bind:localModuleStates
+		bind:expandedSubflows
 		bind:selectedNode={selectedJobStep}
 		bind:localDurationStatuses
 		{onStart}

package/package/components/FlowStatusViewer.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { FlowState } from './flows/flowState';
 import type { DurationStatus, GraphModuleState } from './graph';
 import { type StateStore } from '../utils';
-import type { CompletedJob, FlowNote, FlowValue, Job } from '../gen';
+import type { CompletedJob, FlowModule, FlowNote, FlowValue, Job } from '../gen';
 interface Props {
     jobId: string;
     initialJob?: Job | undefined;
@@ -18,6 +18,14 @@ interface Props {
     isOwner?: boolean;
     wideResults?: boolean;
     localModuleStates?: Record<string, GraphModuleState>;
+    /** Cached subflow definitions, keyed by graph node id (subflow step id, with
+     * `subflow:` prefix for nested subflows). Populated as the user expands a
+     * subflow in the graph. Bindable so callers can use it to walk inside
+     * subflows (e.g. for nested-restart path-finding). */
+    expandedSubflows?: Record<string, {
+        modules: FlowModule[];
+        groups?: any[];
+    }>;
     localDurationStatuses?: Record<string, DurationStatus>;
     job?: Job | undefined;
     render?: boolean;
@@ -40,6 +48,6 @@ interface Props {
     notes?: FlowNote[];
     groups?: FlowValue['groups'];
 }
-declare const FlowStatusViewer: import("svelte").Component<Props, {}, "job" | "isOwner" | "suspendStatus" | "localModuleStates" | "localDurationStatuses" | "flowState" | "rightColumnSelect" | "selectedJobStep">;
+declare const FlowStatusViewer: import("svelte").Component<Props, {}, "job" | "isOwner" | "suspendStatus" | "expandedSubflows" | "localModuleStates" | "localDurationStatuses" | "flowState" | "rightColumnSelect" | "selectedJobStep">;
 type FlowStatusViewer = ReturnType<typeof FlowStatusViewer>;
 export default FlowStatusViewer;