windmill-components 1.291.4 → 1.305.0

package/package/components/DisplayResult.svelte

@@ -15,6 +15,7 @@ import FileDownload from './common/fileDownload/FileDownload.svelte';
 import ParqetTableRenderer from './ParqetTableRenderer.svelte';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
+import MapResult from './MapResult.svelte';
 export let result;
 export let requireHtmlApproval = false;
 export let filename = undefined;
@@ -22,6 +23,7 @@ export let disableExpand = false;
 export let jobId = undefined;
 export let workspaceId = undefined;
 export let hideAsJson = false;
+export let noControls = false;
 let resultKind;
 $: resultKind = inferResultKind(result);
 export let forceJson = false;
@@ -55,19 +57,25 @@ function inferResultKind(result) {
         return 'json';
     }
     if (result !== undefined) {
+        if (typeof result === 'string') {
+            length = 0;
+            largeObject = false;
+            is_render_all = false;
+            return 'plain';
+        }
         try {
             let keys = result && typeof result == 'object' ? Object.keys(result) : [];
             is_render_all =
                 keys.length == 1 && keys.includes('render_all') && Array.isArray(result['render_all']);
             // Check if the result is an image
-            if (['png', 'svg', 'jpeg'].includes(keys[0]) && keys.length == 1) {
+            if (['png', 'svg', 'jpeg', 'html'].includes(keys[0]) && keys.length == 1) {
                 // Check if the image is too large (10mb)
                 largeObject = roughSizeOfObject(result) > 10000000;
                 return keys[0];
             }
             let length = roughSizeOfObject(result);
             // Otherwise, check if the result is too large (10kb) for json
-            largeObject = length > 10000;
+            largeObject = length > 50000;
             if (largeObject) {
                 return 'json';
             }
@@ -88,6 +96,9 @@ function inferResultKind(result) {
                 else if (keys.length == 1 && keys[0] == 'html') {
                     return 'html';
                 }
+                else if (keys.length == 1 && keys[0] == 'map') {
+                    return 'map';
+                }
                 else if (keys.length == 1 && keys[0] == 'file') {
                     return 'file';
                 }
@@ -150,7 +161,7 @@ function contentOrRootString(obj) {
 function isArrayWithObjects(json) {
     return (Array.isArray(json) &&
         json.length > 0 &&
-        json.every((item) => item && typeof item === 'object' && Object.keys(item).length > 0));
+        json.every((item) => item && typeof item === 'object' && Object.keys(item).length > 0 && !Array.isArray(item)));
 }
 $: isTableDisplay = isArrayWithObjects(result);
 let richRender = !forceJson;
@@ -175,12 +186,15 @@ let globalForceJson = false;
 </script>
 
 {#if is_render_all}
-	<div class="flex flex-col w-full">
-		<div class="mb-2 text-tertiary text-sm">
-			as JSON&nbsp;<input class="windmillapp" type="checkbox" bind:checked={globalForceJson} />
-		</div>
+	<div class="flex flex-col w-full gap-6">
+		{#if !noControls}
+			<div class="mb-2 text-tertiary text-sm">
+				as JSON&nbsp;<input class="windmillapp" type="checkbox" bind:checked={globalForceJson} />
+			</div>
+		{/if}
 		{#each result['render_all'] as res}
 			<svelte:self
+				{noControls}
 				result={res}
 				{requireHtmlApproval}
 				{filename}
@@ -193,11 +207,15 @@ let globalForceJson = false;
 		{/each}</div
 	>
 {:else}
-	<div class="inline-highlight relative grow min-h-[200px]">
+	<div
+		class="inline-highlight relative grow {['plain', 'markdown'].includes(resultKind ?? '')
+			? ''
+			: 'min-h-[200px]'}"
+	>
 		{#if result != undefined && length != undefined && largeObject != undefined}
 			<div class="flex justify-between items-center w-full pb-1">
 				<div class="text-tertiary text-sm flex items-center">
-					{#if (resultKind && !['json', 's3object', 's3object-list', 'table-col', 'table-row'].includes(resultKind) && !hideAsJson) || isTableDisplay}
+					{#if (resultKind && typeof result == 'object' && !['json', 's3object', 's3object-list', 'table-col', 'table-row'].includes(resultKind) && !hideAsJson) || isTableDisplay}
 						<ToggleButtonGroup
 							class="h-6"
 							selected={isTableDisplay
@@ -226,16 +244,14 @@ let globalForceJson = false;
 				</div>
 				<div class="text-tertiary text-xs flex gap-2 z-10 items-center">
 					<slot name="copilot-fix" />
-					{#if !disableExpand}
+					{#if !disableExpand && !noControls}
 						<button on:click={() => copyToClipboard(toJsonStr(result))}
 							><ClipboardCopy size={16} /></button
 						>
 						<button on:click={jsonViewer.openDrawer}><Expand size={16} /></button>
 					{/if}
 				</div>
-			</div>
-
-			{#if !forceJson && resultKind == 'table-col'}
+			</div>{#if !forceJson && resultKind == 'table-col'}
 				{@const data = 'table-col' in result ? result['table-col'] : result}
 				<AutoDataTable objects={transform(data)} />
 			{:else if !forceJson && resultKind == 'table-row'}
@@ -281,6 +297,15 @@ let globalForceJson = false;
 						</div>
 					{/if}
 				</div>
+			{:else if !forceJson && resultKind == 'map'}
+				<div class="h-full">
+					<MapResult
+						lat={result.map.lat}
+						lon={result.map.lon}
+						zoom={result.map.zoom}
+						markers={result.map.markers}
+					/>
+				</div>
 			{:else if !forceJson && resultKind == 'png'}
 				<div class="h-full">
 					<img
@@ -310,9 +335,19 @@ let globalForceJson = false;
 						src="data:image/gif;base64,{contentOrRootString(result.gif)}"
 					/>
 				</div>
-			{:else if !forceJson && resultKind == 'plain'}
-				<div class="h-full text-2xs">
-					<pre>{result?.['result']}</pre>
+			{:else if !forceJson && resultKind == 'plain'}<div class="h-full text-2xs"
+					><pre>{typeof result == 'string' ? result : result?.['result']}</pre>{#if !noControls}
+						<div class="flex">
+							<Button
+								on:click={() =>
+									copyToClipboard(typeof result == 'string' ? result : result?.['result'])}
+								color="light"
+								size="xs"
+							>
+								<div class="flex gap-2 items-center">Copy <ClipboardCopy size={12} /> </div>
+							</Button>
+						</div>
+					{/if}
 				</div>
 			{:else if !forceJson && resultKind == 'file'}
 				<div>
@@ -425,13 +460,13 @@ let globalForceJson = false;
 					</div>
 				</div>
 			{:else if !forceJson && resultKind == 'markdown'}
-				<div class="prose dark:prose-invert">
+				<div class="prose-xs dark:prose-invert">
 					<Markdown md={result?.md ?? result?.markdown} />
 				</div>
 			{:else if !forceJson && isTableDisplay && richRender}
 				<AutoDataTable objects={result} />
 			{:else if largeObject}
-				{#if result && typeof result == 'object' && 'filename' in result && 'file' in result}
+				{#if result && typeof result == 'object' && 'file' in result}
 					<div
 						><a
 							download={result.filename ?? result.file?.filename ?? 'windmill.file'}
@@ -451,31 +486,26 @@ let globalForceJson = false;
 						</a>
 					</div>
 
-					<div class="my-4">
-						<Alert size="xs" title="Large file detected" type="warning">
-							We recommend using persistent storage for large data files.
-							<a
-								href="https://www.windmill.dev/docs/core_concepts/persistent_storage#large-data-files-s3-r2-minio-azure-blob"
-								target="_blank"
-								rel="noreferrer"
-								class="hover:underline"
-							>
-								See docs for setting up an object storage service integration using s3 or any other
-								s3 compatible services
-							</a>
-						</Alert>
+					<div class="mt-1 mb-2">
+						<Alert
+							size="xs"
+							title="Large result detected"
+							type="warning"
+							tooltip="We recommend using persistent object storage for large result. See docs for setting up an object storage service integration using s3 or any other s3 compatible services."
+							documentationLink="https://www.windmill.dev/docs/core_concepts/persistent_storage#large-data-files-s3-r2-minio-azure-blob"
+						/>
 					</div>
-				{/if}
-				{#if result && result != 'WINDMILL_TOO_BIG'}
-					<ObjectViewer json={result} />
+					{#if result && result != 'WINDMILL_TOO_BIG'}
+						<ObjectViewer json={result} />
+					{/if}
 				{/if}
 			{:else if typeof result == 'string' && result.length > 0}
-				<pre class="text-sm">{result}</pre>
-				<div class="flex">
-					<Button on:click={() => copyToClipboard(result)} color="light" size="xs">
-						<div class="flex gap-2 items-center">Copy <ClipboardCopy size={12} /> </div>
-					</Button>
-				</div>
+				<pre class="text-sm">{result}</pre>{#if !noControls}<div class="flex">
+						<Button on:click={() => copyToClipboard(result)} color="light" size="xs">
+							<div class="flex gap-2 items-center">Copy <ClipboardCopy size={12} /> </div>
+						</Button>
+					</div>
+				{/if}
 			{:else}
 				<Highlight
 					class={forceJson ? '' : 'h-full w-full'}
@@ -483,12 +513,23 @@ let globalForceJson = false;
 					code={toJsonStr(result).replace(/\\n/g, '\n')}
 				/>
 			{/if}
+		{:else if typeof result == 'string' && resultKind == 'plain'}
+			<div class="h-full text-xs">
+				<pre>{result}</pre>
+				{#if !noControls}
+					<div class="flex">
+						<Button on:click={() => copyToClipboard(result)} color="light" size="xs">
+							<div class="flex gap-2 items-center">Copy <ClipboardCopy size={12} /> </div>
+						</Button>
+					</div>
+				{/if}
+			</div>
 		{:else}
 			<div class="text-tertiary text-sm">No result: {toJsonStr(result)}</div>
 		{/if}
 	</div>
 
-	{#if !disableExpand}
+	{#if !disableExpand && !noControls}
 		<Portal>
 			<Drawer bind:this={jsonViewer} size="900px">
 				<DrawerContent title="Expanded Result" on:close={jsonViewer.closeDrawer}>
@@ -516,6 +557,7 @@ let globalForceJson = false;
 						</Button>
 					</svelte:fragment>
 					<svelte:self
+						{noControls}
 						{result}
 						{requireHtmlApproval}
 						{filename}

package/package/components/DisplayResult.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         jobId?: string | undefined;
         workspaceId?: string | undefined;
         hideAsJson?: boolean | undefined;
+        noControls?: boolean | undefined;
         forceJson?: boolean | undefined;
     };
     events: {

package/package/components/DurationMs.svelte

@@ -1,18 +1,9 @@
 <script>import { msToSec } from '../utils';
 import { Badge } from './common';
-import Tooltip from './Tooltip.svelte';
 import { Hourglass } from 'lucide-svelte';
 export let duration_ms;
-export let flow;
 </script>
 
 <Badge large icon={{ icon: Hourglass, position: 'left' }}>
-	Ran in {msToSec(duration_ms)}s {#if flow}(sum){/if}
-	{#if flow}
-		<Tooltip>
-			Cumulative time of the execution of each steps. Suspend/sleep/transition times are not
-			accounted for, and each step's duration in a parallel branch would be added. Hence the time
-			here can differ from the time it took for the flow to have a result from start.
-		</Tooltip>
-	{/if}
+	Ran in {msToSec(duration_ms)}s
 </Badge>

package/package/components/DurationMs.svelte.d.ts

@@ -2,7 +2,6 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         duration_ms: number;
-        flow: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/Editor.svelte

@@ -612,21 +612,21 @@ export async function reloadWebsocket() {
                 ];
             });
         }
-        else if (lang === 'javascript') {
+        else if (lang === 'typescript') {
             const stdLib = { content: libStdContent, filePath: 'es6.d.ts' };
             if (scriptLang == 'bun') {
-                languages.typescript.javascriptDefaults.setExtraLibs([stdLib]);
+                languages.typescript.typescriptDefaults.setExtraLibs([stdLib]);
             }
             else {
                 const denoFetch = { content: denoFetchContent, filePath: 'deno_fetch.d.ts' };
-                languages.typescript.javascriptDefaults.setExtraLibs([stdLib, denoFetch]);
+                languages.typescript.typescriptDefaults.setExtraLibs([stdLib, denoFetch]);
             }
             if (scriptLang == 'bun' && ata == undefined) {
                 const addLibraryToRuntime = async (code, _path) => {
                     const path = 'file://' + _path;
                     let uri = mUri.parse(path);
                     console.log('adding library to runtime', path);
-                    languages.typescript.javascriptDefaults.addExtraLib(code, path);
+                    languages.typescript.typescriptDefaults.addExtraLib(code, path);
                     try {
                         await vscode.workspace.fs.writeFile(uri, new TextEncoder().encode(code));
                     }
@@ -848,16 +848,24 @@ async function loadMonaco() {
     // console.log('bef ready')
     // console.log('af ready')
     initialized = true;
-    languages.typescript.typescriptDefaults.setModeConfiguration({
-        completionItems: false,
-        definitions: false,
-        hovers: false
-    });
     languages.typescript.typescriptDefaults.setCompilerOptions({
         target: languages.typescript.ScriptTarget.Latest,
         allowNonTsExtensions: true,
         noSemanticValidation: false,
         noSyntaxValidation: false,
+        completionItems: true,
+        hovers: true,
+        documentSymbols: true,
+        definitions: true,
+        references: true,
+        documentHighlights: true,
+        rename: true,
+        diagnostics: true,
+        documentRangeFormattingEdits: true,
+        signatureHelp: true,
+        onTypeFormattingEdits: true,
+        codeActions: true,
+        inlayHints: true,
         checkJs: true,
         allowJs: true,
         noUnusedLocals: true,
@@ -880,13 +888,35 @@ async function loadMonaco() {
         codeActions: true,
         inlayHints: true
     });
+    languages.typescript.typescriptDefaults.setModeConfiguration({
+        completionItems: true,
+        hovers: true,
+        documentSymbols: true,
+        definitions: true,
+        references: true,
+        documentHighlights: true,
+        rename: true,
+        diagnostics: true,
+        documentRangeFormattingEdits: true,
+        signatureHelp: true,
+        onTypeFormattingEdits: true,
+        codeActions: true,
+        inlayHints: true
+    });
     languages.typescript.javascriptDefaults.setEagerModelSync(true);
+    languages.typescript.typescriptDefaults.setEagerModelSync(true);
     languages.typescript.javascriptDefaults.setDiagnosticsOptions({
         noSemanticValidation: false,
         noSyntaxValidation: false,
         noSuggestionDiagnostics: false,
         diagnosticCodesToIgnore: [1108]
     });
+    languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+        noSemanticValidation: false,
+        noSyntaxValidation: false,
+        noSuggestionDiagnostics: false,
+        diagnosticCodesToIgnore: [1108]
+    });
     languages.typescript.javascriptDefaults.setCompilerOptions({
         target: languages.typescript.ScriptTarget.Latest,
         allowNonTsExtensions: true,
@@ -898,7 +928,7 @@ async function loadMonaco() {
         noUnusedParameters: true,
         noUnusedLocals: true,
         strict: true,
-        noLib: false,
+        noLib: true,
         moduleResolution: languages.typescript.ModuleResolutionKind.NodeJs
     });
     try {

package/package/components/ErrorOrRecoveryHandler.svelte

@@ -6,6 +6,7 @@ import { enterpriseLicense, workspaceStore } from '../stores';
 import { emptySchema, emptyString, sendUserToast, tryEvery } from '../utils';
 import { FlowService, JobService, Script, ScriptService, WorkspaceService } from '../gen';
 import { inferArgs } from '../infer';
+import { hubBaseUrlStore } from '../stores';
 import { CheckCircle2, Loader2, RotateCw, XCircle } from 'lucide-svelte';
 const slackRecoveryHandler = 'hub/2430/slack/schedule-recovery-handler-slack';
 const slackHandlerScriptPath = 'hub/6512/workspace-or-schedule-error-handler-slack';
@@ -138,7 +139,8 @@ $: handlerPath &&
         'started_at',
         'success_times',
         'success_result',
-        'success_started_at'
+        'success_started_at',
+        'email'
     ]).then((schema) => (customHandlerSchema = schema));
 $: handlerPath &&
     isSlackHandler(handlerPath) &&
@@ -155,6 +157,7 @@ $: handlerPath &&
         'success_times',
         'success_result',
         'success_started_at',
+        'email',
         'slack'
     ]).then((schema) => (slackHandlerSchema = schema));
 </script>
@@ -195,7 +198,7 @@ $: handlerPath &&
 		<div class="text-xs">
 			Example of error handler scripts can be found on <a
 				target="_blank"
-				href="https://hub.windmill.dev/failures"
+				href="{$hubBaseUrlStore}/failures"
 			>
 				Windmill Hub</a
 			>

package/package/components/FlowBuilder.svelte

@@ -33,6 +33,7 @@ import UnsavedConfirmationModal from './common/confirmationModal/UnsavedConfirma
 import { cloneDeep } from 'lodash';
 import { goto } from '$app/navigation';
 export let initialPath = '';
+export let pathStoreInit = undefined;
 export let newFlow;
 export let selectedId;
 export let initialArgs = {};
@@ -111,7 +112,8 @@ async function saveDraft(forceSave = false) {
                     schema: flow.schema,
                     tag: flow.tag,
                     draft_only: true,
-                    ws_error_handler_muted: flow.ws_error_handler_muted
+                    ws_error_handler_muted: flow.ws_error_handler_muted,
+                    visible_to_runner_only: flow.visible_to_runner_only
                 }
             });
         }
@@ -184,7 +186,8 @@ async function saveFlow() {
                     schema: flow.schema,
                     ws_error_handler_muted: flow.ws_error_handler_muted,
                     tag: flow.tag,
-                    dedicated_worker: flow.dedicated_worker
+                    dedicated_worker: flow.dedicated_worker,
+                    visible_to_runner_only: flow.visible_to_runner_only
                 }
             });
             if (enabled) {
@@ -244,7 +247,8 @@ async function saveFlow() {
                     schema: flow.schema,
                     tag: flow.tag,
                     dedicated_worker: flow.dedicated_worker,
-                    ws_error_handler_muted: flow.ws_error_handler_muted
+                    ws_error_handler_muted: flow.ws_error_handler_muted,
+                    visible_to_runner_only: flow.visible_to_runner_only
                 }
             });
         }
@@ -296,8 +300,8 @@ const previewArgsStore = writable(initialArgs);
 const scriptEditorDrawer = writable(undefined);
 const moving = writable(undefined);
 const history = initHistory($flowStore);
-const pathStore = writable(initialPath);
-$: $pathStore = initialPath;
+const pathStore = writable(pathStoreInit ?? initialPath);
+$: initialPath && ($pathStore = initialPath);
 const testStepStore = writable({});
 function select(selectedId) {
     selectedIdStore.set(selectedId);

package/package/components/FlowBuilder.svelte.d.ts

@@ -6,6 +6,7 @@ import type DiffDrawer from './DiffDrawer.svelte';
 declare const __propDef: {
     props: {
         initialPath?: string | undefined;
+        pathStoreInit?: string | undefined;
         newFlow: boolean;
         selectedId: string | undefined;
         initialArgs?: Record<string, any> | undefined;

package/package/components/FlowGraphViewerStep.svelte

@@ -9,6 +9,7 @@ import FlowPathViewer from './flows/content/FlowPathViewer.svelte';
 import SchemaViewer from './SchemaViewer.svelte';
 import { scriptPathToHref } from '../scripts';
 import { cleanExpr } from '../utils';
+import { hubBaseUrlStore } from '../stores';
 import { twMerge } from 'tailwind-merge';
 import FlowModuleScript from './flows/content/FlowModuleScript.svelte';
 export let flow;
@@ -24,7 +25,7 @@ let codeViewer;
 					<a
 						rel="noreferrer"
 						target="_blank"
-						href={scriptPathToHref(stepDetail?.value?.path ?? '')}
+						href={scriptPathToHref(stepDetail?.value?.path ?? '', $hubBaseUrlStore)}
 						class=""
 					>
 						<IconedPath path={stepDetail?.value?.path ?? ''} />
@@ -42,7 +43,7 @@ let codeViewer;
 							class="w-full h-full text-sm"
 							title="embedded script from hub"
 							frameborder="0"
-							src="https://hub.windmill.dev/embed/script/{stepDetail.value?.path?.substring(4)}"
+							src="{$hubBaseUrlStore}/embed/script/{stepDetail.value?.path?.substring(4)}"
 						/>
 					</div>
 				{/if}
@@ -106,7 +107,7 @@ let codeViewer;
 					<a
 						rel="noreferrer"
 						target="_blank"
-						href={scriptPathToHref(stepDetail?.value?.path ?? '')}
+						href={scriptPathToHref(stepDetail?.value?.path ?? '', $hubBaseUrlStore)}
 						class=""
 					>
 						<IconedPath path={stepDetail?.value?.path ?? ''} />
@@ -156,7 +157,7 @@ let codeViewer;
 						class="w-full grow text-sm"
 						title="embedded script from hub"
 						frameborder="0"
-						src="https://hub.windmill.dev/embed/script/{stepDetail.value?.path?.substring(4)}"
+						src="{$hubBaseUrlStore}/embed/script/{stepDetail.value?.path?.substring(4)}"
 					/>
 				</div>
 			{:else}

package/package/components/FlowJobResult.svelte

@@ -1,6 +1,8 @@
 <script>import { Loader2 } from 'lucide-svelte';
 import DisplayResult from './DisplayResult.svelte';
 import LogViewer from './LogViewer.svelte';
+import { JobService } from '../gen';
+import { workspaceStore } from '../stores';
 export let result;
 export let logs;
 export let col = false;
@@ -9,11 +11,44 @@ export let loading;
 export let filename = undefined;
 export let jobId = undefined;
 export let workspaceId = undefined;
+export let refreshLog = false;
+let lastJobId = undefined;
+$: jobId != lastJobId && diffJobId();
+async function diffJobId() {
+    if (jobId != lastJobId) {
+        lastJobId = jobId;
+        logs = undefined;
+        logOffset = 0;
+        getLogs();
+    }
+}
+let logOffset = 0;
+async function getLogs() {
+    if (jobId) {
+        const getUpdate = await JobService.getJobUpdates({
+            workspace: workspaceId ?? $workspaceStore,
+            id: jobId,
+            running: loading ?? false,
+            logOffset: logOffset == 0 ? (logs?.length ? logs?.length + 1 : 0) : logOffset
+        });
+        logs = (logs ?? '').concat(getUpdate.new_logs ?? '');
+        logOffset = getUpdate.log_offset ?? 0;
+    }
+    if (refreshLog) {
+        setTimeout(() => {
+            if (refreshLog) {
+                getLogs();
+            }
+        }, 1000);
+    }
+}
 </script>
 
 <div
 	class:border={!noBorder}
-	class="grid {!col ? 'grid-cols-2' : 'grid-rows-2'} shadow border-gray-400 h-full max-h-screen"
+	class="grid {!col
+		? 'grid-cols-2'
+		: 'grid-rows-2'} shadow border border-tertiary-inverse h-full max-h-[70vh]"
 >
 	<div class="bg-surface {col ? '' : 'max-h-80'} h-full p-1 overflow-auto relative">
 		<span class="text-tertiary">Result</span>

package/package/components/FlowJobResult.svelte.d.ts

@@ -2,13 +2,14 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         result: any;
-        logs: string;
+        logs: string | undefined;
         col?: boolean | undefined;
         noBorder?: boolean | undefined;
         loading: boolean;
         filename?: string | undefined;
         jobId?: string | undefined;
         workspaceId?: string | undefined;
+        refreshLog?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/FlowLoopIterationPreview.svelte

@@ -12,7 +12,8 @@ export let jobId = undefined;
 export let job = undefined;
 export let modules;
 export let previewArgs = {};
-const schema = {
+export let whileLoop = false;
+export const forloopSchema = {
     $schema: 'https://json-schema.org/draft/2020-12/schema',
     properties: {
         iter: {
@@ -30,6 +31,21 @@ const schema = {
     required: [],
     type: 'object'
 };
+export const whileLoopSchema = {
+    $schema: 'https://json-schema.org/draft/2020-12/schema',
+    properties: {
+        iter: {
+            type: 'object',
+            properties: {
+                index: {
+                    type: 'number'
+                }
+            }
+        }
+    },
+    required: [],
+    type: 'object'
+};
 let selectedJobStep = undefined;
 let isRunning = false;
 let jobProgressReset;
@@ -124,7 +140,7 @@ $: if (job?.type === 'CompletedJob') {
 				noVariablePicker
 				compact
 				class="py-4 max-w-3xl"
-				{schema}
+				schema={whileLoop ? whileLoopSchema : forloopSchema}
 				bind:args={previewArgs}
 			/>
 		</div>

package/package/components/FlowLoopIterationPreview.svelte.d.ts

@@ -1,5 +1,6 @@
 import { SvelteComponent } from "svelte";
 import { Job, type FlowModule, type RestartedFrom } from '../gen';
+import type { Schema } from '../common';
 declare const __propDef: {
     props: {
         open: boolean;
@@ -7,6 +8,9 @@ declare const __propDef: {
         job?: Job | undefined;
         modules: FlowModule[];
         previewArgs?: Record<string, any> | undefined;
+        whileLoop?: boolean | undefined;
+        forloopSchema?: Schema | undefined;
+        whileLoopSchema?: Schema | undefined;
         test?: (() => void) | undefined;
         runPreview?: ((args: Record<string, any>, restartedFrom: RestartedFrom | undefined) => Promise<void>) | undefined;
     };
@@ -21,6 +25,8 @@ export type FlowLoopIterationPreviewProps = typeof __propDef.props;
 export type FlowLoopIterationPreviewEvents = typeof __propDef.events;
 export type FlowLoopIterationPreviewSlots = typeof __propDef.slots;
 export default class FlowLoopIterationPreview extends SvelteComponent<FlowLoopIterationPreviewProps, FlowLoopIterationPreviewEvents, FlowLoopIterationPreviewSlots> {
+    get forloopSchema(): Schema;
+    get whileLoopSchema(): Schema;
     get test(): () => void;
     get runPreview(): (args: Record<string, any>, restartedFrom: RestartedFrom | undefined) => Promise<void>;
 }