windmill-components 1.122.0 → 1.138.2

package/package/components/details/utils.d.ts

@@ -0,0 +1,8 @@
+import { Script } from '../../gen';
+export declare function deleteScript(hash: string, workspace: string): Promise<Script>;
+export declare function archiveScript(hash: string, workspace: string): Promise<Script>;
+export declare function unarchiveScript(hash: string, workspace: string): Promise<string>;
+export declare function getScriptDeploymentStatus(hash: string, workspace: string): Promise<any>;
+export declare function loadScript(hash: string, workspace: string): Promise<any>;
+export declare function runScript(scheduledForStr: string | undefined, args: Record<string, any>, hash: string, workspace: string, invisibleToOwner?: boolean): Promise<string>;
+export declare function curlCommand(async: boolean, args: any, $page: any, workspace: string, script: any): string;

package/package/components/details/utils.js

@@ -0,0 +1,50 @@
+import { ScriptService, JobService, Script } from '../../gen';
+export async function deleteScript(hash, workspace) {
+    return await ScriptService.deleteScriptByHash({ workspace: workspace, hash });
+}
+export async function archiveScript(hash, workspace) {
+    return await ScriptService.archiveScriptByHash({ workspace: workspace, hash });
+}
+export async function unarchiveScript(hash, workspace) {
+    const r = await ScriptService.getScriptByHash({ workspace: workspace, hash });
+    const ns = await ScriptService.createScript({
+        workspace: workspace,
+        requestBody: {
+            ...r,
+            parent_hash: hash,
+            lock: r.lock?.split('\n')
+        }
+    });
+    return ns;
+}
+export async function getScriptDeploymentStatus(hash, workspace) {
+    return await ScriptService.getScriptDeploymentStatus({
+        workspace: workspace,
+        hash: hash
+    });
+}
+export async function loadScript(hash, workspace) {
+    let script;
+    try {
+        script = await ScriptService.getScriptByHash({ workspace: workspace, hash });
+    }
+    catch {
+        script = await ScriptService.getScriptByPath({ workspace: workspace, path: hash });
+        hash = script.hash;
+    }
+    return { script, hash };
+}
+export async function runScript(scheduledForStr, args, hash, workspace, invisibleToOwner) {
+    const scheduledFor = scheduledForStr ? new Date(scheduledForStr).toISOString() : undefined;
+    let run = await JobService.runScriptByHash({
+        workspace: workspace,
+        hash: hash,
+        requestBody: args,
+        scheduledFor,
+        invisibleToOwner
+    });
+    return run;
+}
+export function curlCommand(async, args, $page, workspace, script) {
+    return `curl -H 'Content-Type: application/json' -H "Authorization: Bearer $TOKEN" -X POST -d '${JSON.stringify(args)}' ${$page.url.protocol}//${$page.url.hostname}/api/w/${workspace}/jobs/run${async ? '' : '_wait_result'}/p/${script?.path}`;
+}

package/package/components/flows/FlowEditor.svelte

@@ -12,7 +12,7 @@ let size = 40;
 <div class="h-full overflow-hidden border-t">
 	<Splitpanes>
 		<Pane {size} minSize={15} class="h-full relative z-0">
-			<div class="grow overflow-auto bg-gray h-full bg-gray-50 relative">
+			<div class="grow overflow-auto bg-gray h-full bg-surface-secondary relative">
 				{#if loading}
 					<div class="p-2 pt-10">
 						{#each new Array(6) as _}

package/package/components/flows/common/FlowCardHeader.svelte

@@ -31,7 +31,7 @@ $: $workspaceStore &&
 				{#if flowModule.value.type === 'identity'}
 					<span class="font-bold text-xs">Identity (input copied to output)</span>
 				{:else if flowModule?.value.type === 'rawscript'}
-					<div class="w-4 mx-0.5">
+					<div class="w-8 mx-0.5">
 						<LanguageIcon lang={flowModule.value.language} class="w-4 h-4" />
 					</div>
 					<input bind:value={flowModule.summary} placeholder={'Summary'} class="w-full grow" />
@@ -54,7 +54,7 @@ $: $workspaceStore &&
 						<Button
 							title="Unlock hash to always use latest deployed version at that path"
 							size="xs"
-							btnClasses="text-gray-600 inline-flex gap-1 items-center"
+							btnClasses="text-tertiary inline-flex gap-1 items-center"
 							color="light"
 							on:click={() => {
 								if (flowModule?.value.type == 'script') {
@@ -67,7 +67,7 @@ $: $workspaceStore &&
 							title="Lock hash to always use this specific version"
 							color="light"
 							size="xs"
-							btnClasses="text-gray-600 inline-flex gap-1 items-center"
+							btnClasses="text-tertiary inline-flex gap-1 items-center"
 							on:click={() => {
 								if (flowModule?.value.type == 'script') {
 									flowModule.value.hash = latestHash
@@ -84,7 +84,7 @@ $: $workspaceStore &&
 		</span>
 	{/if}
 	{#if title}
-		<div class="text-sm font-bold text-gray-900">{title}</div>
+		<div class="text-sm font-bold text-primary">{title}</div>
 	{/if}
 	<slot />
 </div>

package/package/components/flows/content/CapturePayload.svelte

@@ -62,7 +62,7 @@ let hostname = BROWSER ? window.location.protocol + '//' + window.location.host
 				<Icon data={faClipboard} /></a
 			>
 		</div>
-		<p class="text-gray-600 mt-4 text-xs">CURL example</p>
+		<p class="text-secondary mt-4 text-xs">CURL example</p>
 
 		<div class="text-xs box mb-4 b">
 			<pre class="overflow-auto"
@@ -71,7 +71,7 @@ let hostname = BROWSER ? window.location.protocol + '//' + window.location.host
    -d '{"foo": 42}'`}</pre
 			>
 		</div>
-		<div class="items-center flex flex-row gap-x-2 text-xs text-gray-600">
+		<div class="items-center flex flex-row gap-x-2 text-xs text-secondary">
 			Listening for new requests
 			<WindmillIcon class="animate-[pulse_5s_linear_infinite]" spin="fast" /></div
 		>

package/package/components/flows/content/DynamicInputHelpBox.svelte

@@ -20,7 +20,7 @@ $: opened = false;
 {#if opened}
 	<div
 		transition:slide|local
-		class="bg-gray-100 border-l-4 border-gray-600 text-gray-700 p-4 m-4"
+		class="bg-gray-100 border-l-4 border-gray-600 text-secondary p-4 m-4"
 		role="alert"
 		id="dynamic-input-help-box"
 	>

package/package/components/flows/content/FlowBranchesAllWrapper.svelte

@@ -64,7 +64,7 @@ let selected = 'early-stop';
 							<Tab value="sleep">Sleep</Tab>
 							<Tab value="mock">Mock</Tab>
 							<svelte:fragment slot="content">
-								<div class="overflow-hidden bg-white">
+								<div class="overflow-hidden bg-surface">
 									<TabContent value="early-stop" class="flex flex-col flex-1 h-full">
 										<div class="p-4 overflow-y-auto">
 											<FlowModuleEarlyStop bind:flowModule />

package/package/components/flows/content/FlowBranchesOneWrapper.svelte

@@ -32,7 +32,7 @@ let selected = 'early-stop';
 						<div class="py-2">
 							<div class="flex flex-row gap-2 text-sm p-2">
 								<Badge large={true} color="blue">Default branch</Badge>
-								<p class="italic text-gray-600"
+								<p class="italic text-tertiary"
 									>If none of the predicates' expressions evaluated in-order match, this branch is
 									chosen</p
 								>
@@ -64,7 +64,7 @@ let selected = 'early-stop';
 							<Tab value="sleep">Sleep</Tab>
 							<Tab value="mock">Mock</Tab>
 							<svelte:fragment slot="content">
-								<div class="overflow-hidden bg-white">
+								<div class="overflow-hidden bg-surface">
 									<TabContent value="early-stop" class="flex flex-col flex-1 h-full">
 										<div class="p-4 overflow-y-auto">
 											<FlowModuleEarlyStop bind:flowModule />

package/package/components/flows/content/FlowConstants.svelte

@@ -7,9 +7,34 @@ import Toggle from '../../Toggle.svelte';
 import InputTransformSchemaForm from '../../InputTransformSchemaForm.svelte';
 let hideOptional = false;
 const { flowStateStore, flowStore } = getContext('FlowEditorContext');
-$: steps = dfs($flowStore.value.modules, (x) => x)
+$: scriptModules = dfs($flowStore.value.modules, (x) => x)
     .map((x) => [x.value, x])
-    .filter((x) => x[0].type == 'script' || x[0].type == 'rawscript')
+    .filter((x) => x[0].type == 'script' || x[0].type == 'rawscript');
+$: resources = Object.fromEntries(scriptModules
+    .map(([v, m]) => [
+    m.id,
+    Object.entries(v.input_transforms)
+        .map((x) => {
+        let schema = $flowStateStore[m.id]?.schema;
+        let val = undefined;
+        const [k, inputTransform] = x;
+        const v = schema.properties[k];
+        if (v.format?.includes('resource') &&
+            inputTransform.type === 'static' &&
+            (inputTransform.value === '' ||
+                inputTransform.value === undefined ||
+                inputTransform.value === null)) {
+            val = {
+                argName: k,
+                type: v.format.split('-')[1]
+            };
+        }
+        return val;
+    })
+        .filter(Boolean)
+])
+    .filter((x) => x[1].length > 0));
+$: steps = scriptModules
     .map(([v, m]) => [
     v.input_transforms,
     Object.entries(v.input_transforms)
@@ -40,6 +65,21 @@ setContext('PropPickerWrapper', {
 				useful when forking a flow to get an overview of all the variables to parametrize that are
 				not exposed directly as flow inputs.</Alert
 			>
+			{#if Object.keys(resources).length > 0}
+				<Alert type="warning" title="Missing resources" class="m-4">
+					The following resources are missing and the flow will not be fully runnable until they are
+					set. Add your own resources:
+					{#each Object.entries(resources) as [id, r]}
+						{#each r as resource}
+							<div class="mt-2">
+								<Badge color="red">{id}</Badge> is missing a resource of type{' '}
+								<Badge color="red">{resource?.type}</Badge> for the input{' '}
+								<Badge color="red">{resource?.argName}</Badge>
+							</div>
+						{/each}
+					{/each}
+				</Alert>
+			{/if}
 			{#if steps.length == 0}
 				<div class="mt-2" />
 				{#if $flowStore.value.modules.length == 0}
@@ -56,7 +96,7 @@ setContext('PropPickerWrapper', {
 			{#each steps as [args, filter, m] (m.id)}
 				{#if filter.length > 0}
 					<div class="relative h-full border-t p-4">
-						<h2 class="sticky w-full top-0 z-10 inline-flex items-center bg-white py-2">
+						<h2 class="sticky w-full top-0 z-10 inline-flex items-center py-2">
 							<span class="mr-4">{m.summary || m.value['path'] || 'Inline script'}</span>
 							<Badge large color="indigo">{m.id}</Badge>
 						</h2>

package/package/components/flows/content/FlowEditorPanel.svelte

@@ -12,7 +12,7 @@ const { selectedId, flowStore } = getContext('FlowEditorContext');
 {:else if $selectedId === 'Input'}
 	<FlowInput />
 {:else if $selectedId === 'Result'}
-	<p class="p-4 text-gray-600">Nothing to show about the result node. Happy flow building!</p>
+	<p class="p-4 text-secondary">Nothing to show about the result node. Happy flow building!</p>
 {:else if $selectedId === 'constants'}
 	<FlowConstants />
 {:else if $selectedId === 'failure'}

package/package/components/flows/content/FlowInputs.svelte

@@ -1,14 +1,16 @@
-<script>import { Alert, ToggleButton, ToggleButtonGroup } from '../../common';
+<script>import { Alert } from '../../common';
 import ToggleHubWorkspace from '../../ToggleHubWorkspace.svelte';
 import Tooltip from '../../Tooltip.svelte';
 import { RawScript, Script } from '../../../gen';
-import { faBolt, faCheck, faCode } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
 import FlowScriptPicker from '../pickers/FlowScriptPicker.svelte';
 import PickHubScript from '../pickers/PickHubScript.svelte';
 import WorkspaceScriptPicker from '../pickers/WorkspaceScriptPicker.svelte';
 import { isCloudHosted } from '../../../cloud';
 import { sendUserToast } from '../../../toast';
+import ToggleButtonGroup from '../../common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ToggleButton from '../../common/toggleButton-v2/ToggleButton.svelte';
+import { Check, Code, Zap } from 'lucide-svelte';
 export let failureModule;
 export let shouldDisableTriggerScripts = false;
 export let summary = undefined;
@@ -33,37 +35,26 @@ let filter = '';
 			<div class="center-center">
 				<div class="max-w-min">
 					<ToggleButtonGroup bind:selected={kind}>
-						<ToggleButton position="left" value="script" size="sm" startIcon={{ icon: faCode }}>
-							Action &nbsp;<Tooltip>
-								An action script is simply a script that is neither a trigger nor an approval
-								script. Those are the majority of the scripts.
-							</Tooltip>
-						</ToggleButton>
+						<ToggleButton
+							value="script"
+							icon={Code}
+							label="Action"
+							tooltip="An action script is simply a script that is neither a trigger nor an approval script. Those are the majority of the scripts."
+						/>
 						{#if !shouldDisableTriggerScripts}
 							<ToggleButton
-								position="center"
 								value="trigger"
-								size="sm"
-								startIcon={{ icon: faBolt }}
-							>
-								Trigger &nbsp;<Tooltip
-									documentationLink="https://www.windmill.dev/docs/flows/flow_trigger"
-								>
-									Used as a first step most commonly with a state and a schedule to watch for
-									changes on an external system, compute the diff since last time and set the new
-									state. The diffs are then treated one by one with a for-loop.
-								</Tooltip>
-							</ToggleButton>
+								icon={Zap}
+								label="Trigger"
+								tooltip="Used as a first step most commonly with a state and a schedule to watch for changes on an external system, compute the diff since last time and set the new state. The diffs are then treated one by one with a for-loop."
+							/>
 						{/if}
-						<ToggleButton position="right" value="approval" size="sm" startIcon={{ icon: faCheck }}>
-							Approval &nbsp;<Tooltip
-								documentationLink="https://www.windmill.dev/docs/flows/flow_approval"
-							>
-								An approval step will suspend the execution of a flow until it has been approved
-								through the resume endpoints or the approval page by and solely by the recipients of
-								those secret urls.
-							</Tooltip>
-						</ToggleButton>
+						<ToggleButton
+							value="approval"
+							icon={Check}
+							label="Approval"
+							tooltip="An approval step will suspend the execution of a flow until it has been approved through the resume endpoints or the approval page by and solely by the recipients of those secret urls."
+						/>
 					</ToggleButtonGroup>
 				</div>
 			</div>
@@ -85,7 +76,7 @@ let filter = '';
 		<div class="flex flex-row">
 			<div class="flex flex-row flex-wrap gap-2">
 				<FlowScriptPicker
-					label="Typescript"
+					label="TypeScript (Deno)"
 					lang={Script.language.DENO}
 					on:click={() => {
 						dispatch('new', {
@@ -135,13 +126,53 @@ let filter = '';
 						}}
 					/>
 
+					<FlowScriptPicker
+						label="REST"
+						lang={Script.language.NATIVETS}
+						on:click={() => {
+							dispatch('new', {
+								language: RawScript.language.NATIVETS,
+								kind,
+								subkind: 'flow'
+							})
+						}}
+					/>
+
 					{#if !failureModule}
 						<FlowScriptPicker
-							label={`PostgreSQL`}
-							lang="pgsql"
-							on:click={() =>
-								dispatch('new', { language: RawScript.language.DENO, kind, subkind: 'pgsql' })}
+							label="PostgreSQL"
+							lang={Script.language.POSTGRESQL}
+							on:click={() => {
+								dispatch('new', {
+									language: RawScript.language.POSTGRESQL,
+									kind,
+									subkind: 'flow'
+								})
+							}}
+						/>
+						<FlowScriptPicker
+							label="MySQL"
+							lang={Script.language.MYSQL}
+							on:click={() => {
+								dispatch('new', {
+									language: RawScript.language.MYSQL,
+									kind,
+									subkind: 'flow'
+								})
+							}}
 						/>
+						<FlowScriptPicker
+							label="BigQuery"
+							lang={Script.language.BIGQUERY}
+							on:click={() => {
+								dispatch('new', {
+									language: RawScript.language.BIGQUERY,
+									kind,
+									subkind: 'flow'
+								})
+							}}
+						/>
+
 						<FlowScriptPicker
 							label={`Docker`}
 							lang="docker"
@@ -165,6 +196,14 @@ let filter = '';
 							}}
 						/>
 
+						<FlowScriptPicker
+							label={`Powershell`}
+							lang="powershell"
+							on:click={() => {
+								dispatch('new', { language: RawScript.language.BASH, kind, subkind: 'powershell' })
+							}}
+						/>
+
 						<!-- <FlowScriptPicker
 							label={`MySQL`}
 							lang="mysql"
@@ -173,6 +212,18 @@ let filter = '';
 						/> -->
 					{/if}
 				{/if}
+
+				<FlowScriptPicker
+					label="TypeScript (Bun)"
+					lang={Script.language.DENO}
+					on:click={() => {
+						dispatch('new', {
+							language: RawScript.language.DENO,
+							kind,
+							subkind: 'flow'
+						})
+					}}
+				/>
 			</div>
 		</div>
 

package/package/components/flows/content/FlowInputsFlow.svelte

@@ -63,11 +63,11 @@ async function loadFlows() {
 		{#if filter.length > 0 && filteredItems.length == 0}
 			<NoItemFound />
 		{/if}
-		<ul class="divide-y divide-gray-200 overflow-auto">
+		<ul class="divide-y overflow-auto">
 			{#each filteredItems as { path, summary, description, marked }}
 				<li class="flex flex-row w-full">
 					<button
-						class="py-4 px-1 gap-1 flex flex-row grow hover:bg-blue-50 bg-white transition-all text-black"
+						class="p-4 gap-1 flex flex-row grow hover:bg-surface-hover bg-surface transition-all text-primary"
 						on:click={() => {
 							dispatch('pick', { path })
 						}}

package/package/components/flows/content/FlowLoop.svelte

@@ -29,11 +29,37 @@ $: stepPropPicker = getStepPropPicker($flowStateStore, parentModule, previousMod
 		<Splitpanes horizontal class="!max-h-[calc(100%-48px)]">
 			<Pane size={60} minSize={20} class="p-4">
 				{#if mod.value.type === 'forloopflow'}
-					<div class="mb-2 text-sm font-bold">
+					<div class="flex flex-row gap-8 mt-2 mb-6">
+						<div>
+							<div class="mb-2 text-sm font-bold"
+								>Skip failures <Tooltip
+									>If disabled, the flow will fail as soon as one of the iteration fail. Otherwise,
+									the error will be collected as the result of the iteration. Regardless of this
+									setting, if an error handler is defined, it will process the error.</Tooltip
+								></div
+							>
+							<Toggle
+								bind:checked={mod.value.skip_failures}
+								options={{
+									right: 'Skip failures'
+								}}
+							/>
+						</div>
+						<div>
+							<div class="mb-2 text-sm font-bold">Run in parallel</div>
+							<Toggle
+								bind:checked={mod.value.parallel}
+								options={{
+									right: 'All iterations run in parallel'
+								}}
+							/>
+						</div>
+					</div>
+					<div class="my-2 text-sm font-bold">
 						Iterator expression
 						<Tooltip>
 							List to iterate over. For more information see the
-							<a href="https://www.windmill.dev/docs/getting_started/flows_quickstart">docs.</a>
+							<a href="https://www.windmill.dev/docs/flows/flow_loops">docs.</a>
 						</Tooltip>
 					</div>
 					{#if mod.value.iterator.type == 'javascript'}
@@ -63,32 +89,6 @@ $: stepPropPicker = getStepPropPicker($flowStateStore, parentModule, previousMod
 							}}
 						/>
 					{/if}
-					<div class="flex flex-row gap-8">
-						<div>
-							<div class="mt-6 mb-2 text-sm font-bold"
-								>Skip failures <Tooltip
-									>If disabled, the flow will fail as soon as one of the iteration fail. Otherwise,
-									the error will be collected as the result of the iteration. Regardless of this
-									setting, if an error handler is defined, it will process the error.</Tooltip
-								></div
-							>
-							<Toggle
-								bind:checked={mod.value.skip_failures}
-								options={{
-									right: 'Skip failures'
-								}}
-							/>
-						</div>
-						<div>
-							<div class="mt-6 mb-2 text-sm font-bold">Run in parallel</div>
-							<Toggle
-								bind:checked={mod.value.parallel}
-								options={{
-									right: 'All iterations run in parallel'
-								}}
-							/>
-						</div>
-					</div>
 				{/if}
 			</Pane>
 			<Pane size={40} minSize={20} class="flex flex-col flex-1">
@@ -100,7 +100,7 @@ $: stepPropPicker = getStepPropPicker($flowStateStore, parentModule, previousMod
 					<Tab value="mock">Mock</Tab>
 
 					<svelte:fragment slot="content">
-						<div class="overflow-hidden bg-white" style="height:calc(100% - 32px);">
+						<div class="overflow-hidden bg-surface" style="height:calc(100% - 32px);">
 							<!-- <TabContent value="retries" class="flex flex-col flex-1 h-full">
 								<div class="p-4 overflow-y-auto">
 									<FlowRetries bind:flowModule={mod} />

package/package/components/flows/content/FlowModuleComponent.svelte

@@ -26,12 +26,19 @@ import FlowPathViewer from './FlowPathViewer.svelte';
 import InputTransformSchemaForm from '../../InputTransformSchemaForm.svelte';
 import { schemaToObject } from '../../../schema';
 import FlowModuleMock from './FlowModuleMock.svelte';
+import Tooltip from '../../Tooltip.svelte';
+import { SecondsInput } from '../../common';
+import DiffEditor from '../../DiffEditor.svelte';
+import FlowModuleTimeout from './FlowModuleTimeout.svelte';
 const { selectedId, previewArgs, flowStateStore, flowStore, saveDraft } = getContext('FlowEditorContext');
 export let flowModule;
 export let failureModule = false;
 export let parentModule = undefined;
 export let previousModule;
+export let scriptKind = 'script';
+export let scriptTemplate = 'script';
 let editor;
+let diffEditor;
 let modulePreview;
 let websocketAlive = {
     pyright: false,
@@ -72,6 +79,9 @@ async function reload(flowModule) {
         const { input_transforms, schema } = await loadSchemaFromModule(flowModule);
         validCode = true;
         inputTransformSchemaForm?.setArgs(input_transforms);
+        if (flowModule.value.type == 'rawscript' && flowModule.value.lock != undefined) {
+            flowModule.value.lock = undefined;
+        }
         await tick();
         if (!deepEqual(schema, $flowStateStore[flowModule.id]?.schema)) {
             if (!$flowStateStore[flowModule.id]) {
@@ -113,6 +123,7 @@ let forceReload = 0;
 					on:toggleSleep={() => selectAdvanced('sleep')}
 					on:toggleMock={() => selectAdvanced('mock')}
 					on:toggleRetry={() => selectAdvanced('retries')}
+					on:toggleConcurrency={() => selectAdvanced('concurrency')}
 					on:toggleCache={() => selectAdvanced('cache')}
 					on:toggleStopAfterIf={() => selectAdvanced('early-stop')}
 					on:fork={async () => {
@@ -122,7 +133,6 @@ let forceReload = 0;
 					}}
 					on:reload={async () => {
 						if (flowModule.value.type == 'script') {
-							console.log('reload')
 							if (flowModule.value.hash != undefined) {
 								flowModule.value.hash = await getLatestHashForScript(flowModule.value.path)
 							}
@@ -148,9 +158,12 @@ let forceReload = 0;
 					<EditorBar
 						{validCode}
 						{editor}
+						{diffEditor}
 						lang={flowModule.value['language'] ?? 'deno'}
 						{websocketAlive}
 						iconOnly={width < 850}
+						kind={scriptKind}
+						template={scriptTemplate}
 					/>
 				</div>
 			{/if}
@@ -196,6 +209,12 @@ let forceReload = 0;
 									}}
 									fixedOverflowWidgets={true}
 								/>
+								<DiffEditor
+									bind:this={diffEditor}
+									automaticLayout
+									fixedOverflowWidgets
+									class="hidden h-full"
+								/>
 							{/key}
 						{:else if flowModule.value.type === 'script'}
 							<div class="border-t border-gray-200">
@@ -234,6 +253,9 @@ let forceReload = 0;
 									pickableProperties={stepPropPicker.pickableProperties}
 									bind:this={modulePreview}
 									mod={flowModule}
+									{editor}
+									{diffEditor}
+									lang={flowModule.value['language'] ?? 'deno'}
 									schema={$flowStateStore[$selectedId]?.schema ?? {}}
 								/>
 							{:else if selected === 'advanced'}
@@ -241,11 +263,13 @@ let forceReload = 0;
 									<Tab value="retries">Retries</Tab>
 									{#if !$selectedId.includes('failure')}
 										<Tab value="cache">Cache</Tab>
+										<Tab value="concurrency">Concurrency</Tab>
 										<Tab value="early-stop">Early Stop/Break</Tab>
 										<Tab value="suspend">Suspend/Approval</Tab>
 										<Tab value="sleep">Sleep</Tab>
 										<Tab value="mock">Mock</Tab>
 										<Tab value="same_worker">Shared Directory</Tab>
+										<Tab value="timeout">Timeout</Tab>
 									{/if}
 								</Tabs>
 								<div class="h-[calc(100%-32px)] overflow-auto p-4">
@@ -269,6 +293,42 @@ let forceReload = 0;
 										<div>
 											<FlowModuleMock bind:flowModule />
 										</div>
+									{:else if advancedSelected === 'timeout'}
+										<div>
+											<FlowModuleTimeout bind:flowModule />
+										</div>
+									{:else if advancedSelected === 'concurrency'}
+										<div>
+											<h2 class="pb-4">
+												Concurrency Limits
+												<Tooltip>Allowed concurrency within a given timeframe</Tooltip>
+											</h2>
+										</div>
+										{#if flowModule.value.type == 'rawscript'}
+											<div>
+												<div class="text-xs font-bold !mt-2"
+													>Max number of executions within the time window</div
+												>
+												<div class="flex flex-row gap-2 max-w-sm"
+													><input bind:value={flowModule.value.concurrent_limit} type="number" />
+													<Button
+														size="sm"
+														color="light"
+														on:click={() => {
+															if (flowModule.value.type == 'rawscript') {
+																flowModule.value.concurrent_limit = undefined
+															}
+														}}
+														variant="border">Remove Limits</Button
+													></div
+												>
+												<div class="text-xs font-bold !mt-2">Time window in seconds</div>
+												<SecondsInput bind:seconds={flowModule.value.concurrency_time_window_s} />
+											</div>
+										{:else}
+											The concurrency limit of a workspace script is only settable in the script
+											metadata itself. For hub scripts, this feature is non available yet.
+										{/if}
 									{:else if advancedSelected === 'same_worker'}
 										<div>
 											<Alert type="info" title="Share a directory between steps">

package/package/components/flows/content/FlowModuleComponent.svelte.d.ts

@@ -6,6 +6,8 @@ declare const __propDef: {
         failureModule?: boolean | undefined;
         parentModule?: FlowModule | undefined;
         previousModule: FlowModule | undefined;
+        scriptKind?: "script" | "trigger" | "approval" | undefined;
+        scriptTemplate?: "script" | "mysql" | "pgsql" | "docker" | "powershell" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;