windmill-components 1.448.50 → 1.472.2

package/package/components/copilot/prompts/fixPrompt.js

@@ -7,6 +7,9 @@ export const FIX_PROMPT = {
         "deno": {
             "prompt": "Here's my TypeScript code in a deno running environment:\n```typescript\n{code}\n```\n<contextual_information>\nWe have to export a \"main\" function like this: \"export async function main(...)\" and specify the parameter types but do not call it. You should generally return the result.\nIf needed, the standard fetch method is available globally, do not import it.\nYou can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: \"{resource_type}Resource\".\nThe following resource types are available:\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nOnly define the type for resources that are actually needed to achieve the function purpose. The resource type name has to be exactly as specified. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.\nNaming conventions are guidelines, but follow the user's naming choices in the existing code.\n</contextual_information>\nI get the following error: {error}\nFix my code."
         },
+        "rust": {
+            "prompt": "Here's my Rust code:\n```rust\n{code}\n```\n<contextual_information>\nPlease define a `main` function in Rust with this signature:\n```rust\npub fn main(...) -> Result<ReturnType, Box<dyn std::error::Error>>\n```\nbut do not call it. Favor idiomatic Rust patterns, ensuring safe handling of ownership and borrowing, robust error handling with `Result`, and concurrency if needed (`async`/`tokio` or std threading). \n\n- Include necessary imports and modules only when needed.\n- Add comments explaining important operations and any unsafe usage (if absolutely required).\n- The generated code should be easily executable and testable in an integrated terminal.\n</contextual_information>\nI get the following error: {error}\nFix my code."
+        },
         "go": {
             "prompt": "Here's my go code: \n```go\n{code}\n```\n<contextual_information>\nWe have to export a \"main\" function. Import the packages you need. The return type of the function has to be ({return_type}, error). The file package has to be \"inner\"\n</contextual_information>\nI get the following error: {error}\nFix my code."
         },

package/package/components/copilot/prompts/gen.yaml

@@ -35,6 +35,18 @@ prompts:
       The resource type name has to be exactly as specified (no resource suffix). If the type name conflicts with any imported methods, you have to rename the imported method with the conflicting name.
       </contextual_information>
       My instructions: {description}
+  rust:
+    prompt: |-
+      <contextual_information>
+      You have to write Rust code and define a `main` function like this (without calling it):
+      ```rust
+      pub fn main(...) -> Result<ReturnType, Box<dyn std::error::Error>>
+      ```
+      Favor idiomatic Rust patterns, ensuring safe ownership and borrowing, robust error handling with `Result`, and concurrency if needed (`async`/`tokio` or std threading).
+
+      Include only necessary imports and modules, and add comments explaining important operations. Provide at least one unit test using Rust's built-in test framework (`#[cfg(test)] mod tests { ... }`) to demonstrate correctness. Make the code well-formatted (similar to `cargo fmt` style). The generated code should be easily executable and testable in an integrated terminal.
+      </contextual_information>
+      My instructions: {description}
   go:
     prompt: |-
       Here's my go code: 

package/package/components/copilot/prompts/genPrompt.d.ts

@@ -7,6 +7,9 @@ export declare const GEN_PROMPT: {
         deno: {
             prompt: string;
         };
+        rust: {
+            prompt: string;
+        };
         go: {
             prompt: string;
         };

package/package/components/copilot/prompts/genPrompt.js

@@ -7,6 +7,9 @@ export const GEN_PROMPT = {
         "deno": {
             "prompt": "<contextual_information>\nYou have to write TypeScript code and export a \"main\" function like this: \"export async function main(...)\" and specify the parameter types but do not call it. You should generally return the result.\nYou can import deno libraries or you can also import npm libraries like that: \"import ... from \"npm:{package}\";\". The fetch standard method is available globally.\nYou can take as parameters resources which are dictionaries containing credentials or configuration information. For Windmill to correctly detect the resources to be passed, the resource type name has to be exactly as specified in the following list:\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nYou need to define the type of the resources that are needed before the main function, but only include them if they are actually needed to achieve the function purpose.\nThe resource type name has to be exactly as specified (no resource suffix). If the type name conflicts with any imported methods, you have to rename the imported method with the conflicting name.\n</contextual_information>\nMy instructions: {description}"
         },
+        "rust": {
+            "prompt": "<contextual_information>\nYou have to write Rust code and define a `main` function like this (without calling it):\n```rust\npub fn main(...) -> Result<ReturnType, Box<dyn std::error::Error>>\n```\nFavor idiomatic Rust patterns, ensuring safe ownership and borrowing, robust error handling with `Result`, and concurrency if needed (`async`/`tokio` or std threading).\n\nInclude only necessary imports and modules, and add comments explaining important operations. Provide at least one unit test using Rust's built-in test framework (`#[cfg(test)] mod tests { ... }`) to demonstrate correctness. Make the code well-formatted (similar to `cargo fmt` style). The generated code should be easily executable and testable in an integrated terminal.\n</contextual_information>\nMy instructions: {description}"
+        },
         "go": {
             "prompt": "Here's my go code: \n```go\n{code}\n```\n<contextual_information>\nYou have to write go code and export a \"main\" function. Import the packages you need. The return type of the function has to be ({return_type}, error). The file package has to be \"inner\"\n</contextual_information>\nMy instructions: {description}"
         },

package/package/components/custom_ui.d.ts

@@ -39,9 +39,23 @@ export type FlowBuilderWhitelabelCustomUi = {
     editorBar?: EditorBarUi;
     downloadLogs?: boolean;
 };
+export type DisplayResultUi = {
+    disableAiFix?: boolean;
+    disableDownload?: boolean;
+};
+export type PreviewPanelUi = {
+    disableHistory?: boolean;
+    disableTriggerCaptures?: boolean;
+    disableTriggerButton?: boolean;
+    displayResult?: DisplayResultUi;
+    disableVariablePicker?: boolean;
+    disableDownload?: boolean;
+};
 export type EditorBarUi = {
     contextVar?: boolean;
     variable?: boolean;
+    resource?: boolean;
+    reset?: boolean;
     type?: boolean;
     assistants?: boolean;
     multiplayer?: boolean;
@@ -52,16 +66,39 @@ export type EditorBarUi = {
     library?: boolean;
     useVsCode?: boolean;
 };
+export type EditableSchemaFormUi = {
+    jsonOnly?: boolean;
+    disableVariablePicker?: boolean;
+};
+export type SettingsPanelMetadataUi = {
+    languages?: SupportedLanguage[];
+    disableScriptKind?: boolean;
+    editableSchemaForm?: EditableSchemaFormUi;
+    disableMute?: boolean;
+};
+export type SettingsPanelUi = {
+    metadata?: SettingsPanelMetadataUi;
+    disableMetadata?: boolean;
+    disableRuntime?: boolean;
+    disableGeneratedUi?: boolean;
+    disableTriggers?: boolean;
+};
 export type ScriptEditorWhitelabelCustomUi = {
     editorBar?: EditorBarUi;
+    previewPanel?: PreviewPanelUi;
+    disableTooltips?: boolean;
 };
 export type ScriptBuilderWhitelabelCustomUi = {
     topBar?: {
         path?: boolean;
+        editablePath?: boolean;
         settings?: boolean;
         extraDeployOptions?: boolean;
         editableSummary?: boolean;
         diff?: boolean;
     };
+    settingsPanel?: SettingsPanelUi;
+    disableTooltips?: boolean;
     editorBar?: EditorBarUi;
+    previewPanel?: PreviewPanelUi;
 };

package/package/components/details/DetailPageDetailPanel.svelte

@@ -13,7 +13,7 @@ export let selected;
 
 <div class="flex flex-col h-full">
 	<Tabs bind:selected wrapperClass="flex-none w-full">
-		<Tab value="saved_inputs">Saved Inputs</Tab>
+		<Tab value="saved_inputs">Inputs library</Tab>
 		{#if !isOperator}
 			<Tab value="triggers">Triggers</Tab>
 		{/if}
@@ -39,8 +39,10 @@ export let selected;
 						<slot slot="webhooks" name="webhooks" />
 						<slot slot="routes" name="routes" />
 						<slot slot="websockets" name="websockets" />
+						<slot slot="postgres" name="postgres" />
 						<slot slot="kafka" name="kafka" />
 						<slot slot="nats" name="nats" />
+						<slot slot="sqs" name="sqs" />
 						<slot slot="emails" name="emails" />
 						<slot slot="schedules" name="schedules" />
 						<slot slot="cli" name="cli" />

package/package/components/details/DetailPageDetailPanel.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        triggerSelected?: "kafka" | "nats" | "emails" | "webhooks" | "schedules" | "cli" | "routes" | "websockets" | "scheduledPoll" | undefined;
+        triggerSelected?: "kafka" | "nats" | "postgres" | "sqs" | "schedules" | "emails" | "webhooks" | "cli" | "routes" | "websockets" | "scheduledPoll" | undefined;
         flow_json?: any | undefined;
         simplfiedPoll?: boolean | undefined;
         isOperator?: boolean | undefined;
@@ -22,12 +22,18 @@ declare const __propDef: {
         websockets: {
             slot: string;
         };
+        postgres: {
+            slot: string;
+        };
         kafka: {
             slot: string;
         };
         nats: {
             slot: string;
         };
+        sqs: {
+            slot: string;
+        };
         emails: {
             slot: string;
         };

package/package/components/details/DetailPageHeader.svelte

@@ -1,7 +1,5 @@
 <script>import { Badge, Button } from '../common';
-import Menu from './Menu.svelte';
-import MenuItem from '../common/menu/MenuItem.svelte';
-import { classNames } from '../../utils';
+import DropdownV2 from '../DropdownV2.svelte';
 import ErrorHandlerToggleButton from './ErrorHandlerToggleButton.svelte';
 import { twMerge } from 'tailwind-merge';
 import { userStore } from '../../stores';
@@ -52,30 +50,17 @@ const dispatch = createEventDispatcher();
 			</div>
 			<div class="flex gap-1 md:gap-2 items-center">
 				{#if menuItems.length > 0}
-					<Menu>
-						<svelte:fragment slot="items">
-							{#each menuItems as { label, Icon, onclick, color } (label)}
-								<MenuItem
-									on:click={() => {
-										const div = document.querySelector('[id^="headlessui-menu-items"]')
-										div?.parentElement?.remove()
-
-										onclick()
-									}}
-								>
-									<div
-										class={classNames(
-											'text-xs flex items-center gap-2 flex-row-2 ',
-											color === 'red' ? 'text-red-500' : ''
-										)}
-									>
-										<Icon class="h-4" />
-										{label}
-									</div>
-								</MenuItem>
-							{/each}
-						</svelte:fragment>
-					</Menu>
+					{#key menuItems}
+						<DropdownV2
+							items={menuItems.map((item) => ({
+								displayName: item.label,
+								icon: item.Icon,
+								action: item.onclick,
+								type: item.color === 'red' ? 'delete' : 'action'
+							}))}
+							placement="bottom-end"
+						/>
+					{/key}
 				{/if}
 				<ErrorHandlerToggleButton
 					kind={errorHandlerKind}

package/package/components/details/DetailPageLayout.svelte

@@ -45,8 +45,10 @@ setContext('TriggerContext', {
 							<slot slot="webhooks" name="webhooks" />
 							<slot slot="routes" name="routes" />
 							<slot slot="websockets" name="websockets" />
+							<slot slot="postgres" name="postgres" />
 							<slot slot="kafka" name="kafka" />
 							<slot slot="nats" name="nats" />
+							<slot slot="sqs" name="sqs" />
 							<slot slot="emails" name="emails" />
 							<slot slot="schedules" name="schedules" />
 							<slot slot="cli" name="cli" />
@@ -91,8 +93,10 @@ setContext('TriggerContext', {
 								<slot slot="routes" name="routes" />
 								<slot slot="script" name="script" />
 								<slot slot="websockets" name="websockets" />
+								<slot slot="postgres" name="postgres" />
 								<slot slot="kafka" name="kafka" />
 								<slot slot="nats" name="nats" />
+								<slot slot="sqs" name="sqs" />
 								<slot slot="emails" name="emails" />
 								<slot slot="schedules" name="schedules" />
 								<slot slot="cli" name="cli" />

package/package/components/details/DetailPageLayout.svelte.d.ts

@@ -23,12 +23,18 @@ declare const __propDef: {
         websockets: {
             slot: string;
         };
+        postgres: {
+            slot: string;
+        };
         kafka: {
             slot: string;
         };
         nats: {
             slot: string;
         };
+        sqs: {
+            slot: string;
+        };
         emails: {
             slot: string;
         };

package/package/components/details/DetailPageTriggerPanel.svelte

@@ -1,15 +1,16 @@
 <script>import { Tabs, Tab } from '../common';
-import { CalendarCheck2, MailIcon, Route, Terminal, Webhook, Unplug, PlugZap } from 'lucide-svelte';
+import { CalendarCheck2, MailIcon, Route, Terminal, Webhook, Unplug, PlugZap, Database } from 'lucide-svelte';
 import HighlightTheme from '../HighlightTheme.svelte';
 import KafkaIcon from '../icons/KafkaIcon.svelte';
 import NatsIcon from '../icons/NatsIcon.svelte';
 import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
+import { AwsIcon } from '../icons';
 export let triggerSelected = 'webhooks';
 export let simplfiedPoll = false;
 export let eventStreamType = 'kafka';
 $: {
-    if (triggerSelected === 'kafka' || triggerSelected === 'nats') {
+    if (triggerSelected === 'kafka' || triggerSelected === 'nats' || triggerSelected === 'sqs') {
         eventStreamType = triggerSelected;
     }
 }
@@ -41,10 +42,16 @@ $: {
 			<Tab value="websockets">
 				<span class="flex flex-row gap-2 items-center text-xs">
 					<Unplug size={12} />
-					Websockets
+					WebSockets
 				</span>
 			</Tab>
-			<Tab value="kafka" otherValues={['nats']}>
+			<Tab value="postgres">
+				<span class="flex flex-row gap-2 items-center text-xs">
+					<Database size={12} />
+					Postgres
+				</span>
+			</Tab>
+			<Tab value="kafka" otherValues={['nats', 'sqs']}>
 				<span class="flex flex-row gap-2 items-center text-xs">
 					<PlugZap size={12} />
 					Event streams
@@ -75,17 +82,22 @@ $: {
 						<slot name="schedules" />
 					{:else if triggerSelected === 'websockets'}
 						<slot name="websockets" />
-					{:else if triggerSelected === 'kafka' || triggerSelected === 'nats'}
+					{:else if triggerSelected === 'postgres'}
+						<slot name="postgres" />
+					{:else if triggerSelected === 'kafka' || triggerSelected === 'nats' || triggerSelected === 'sqs'}
 						<div class="m-1.5">
-							<ToggleButtonGroup bind:selected={eventStreamType}>
-								<ToggleButton value="kafka" label="Kafka" icon={KafkaIcon} />
-								<ToggleButton value="nats" label="NATS" icon={NatsIcon} />
+							<ToggleButtonGroup bind:selected={eventStreamType} let:item>
+								<ToggleButton value="kafka" label="Kafka" icon={KafkaIcon} {item} />
+								<ToggleButton value="nats" label="NATS" icon={NatsIcon} {item} />
+								<ToggleButton value="sqs" label="SQS" icon={AwsIcon} {item} />
 							</ToggleButtonGroup>
 						</div>
 						{#if eventStreamType === 'kafka'}
 							<slot name="kafka" />
 						{:else if eventStreamType === 'nats'}
 							<slot name="nats" />
+						{:else if eventStreamType === 'sqs'}
+							<slot name="sqs" />
 						{/if}
 					{:else if triggerSelected === 'cli'}
 						<slot name="cli" />

package/package/components/details/DetailPageTriggerPanel.svelte.d.ts

@@ -1,9 +1,9 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        triggerSelected?: "kafka" | "nats" | "emails" | "webhooks" | "schedules" | "cli" | "routes" | "websockets" | "scheduledPoll" | undefined;
+        triggerSelected?: "kafka" | "nats" | "postgres" | "sqs" | "schedules" | "emails" | "webhooks" | "cli" | "routes" | "websockets" | "scheduledPoll" | undefined;
         simplfiedPoll?: boolean | undefined;
-        eventStreamType?: "kafka" | "nats" | undefined;
+        eventStreamType?: "kafka" | "nats" | "sqs" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -14,8 +14,10 @@ declare const __propDef: {
         emails: {};
         schedules: {};
         websockets: {};
+        postgres: {};
         kafka: {};
         nats: {};
+        sqs: {};
         cli: {};
     };
 };

package/package/components/details/EmailTriggerConfigSection.svelte

@@ -94,9 +94,9 @@ $: email = emailAddress(requestType, path, hash, isFlow, token);
 			<div class="flex flex-col gap-2">
 				<div class="flex flex-row justify-between">
 					<div class="text-xs font-semibold flex flex-row items-center">Call method</div>
-					<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={requestType}>
-						<ToggleButton label="By path" value="path" />
-						<ToggleButton label="By hash" value="hash" />
+					<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={requestType} let:item>
+						<ToggleButton label="By path" value="path" {item} />
+						<ToggleButton label="By hash" value="hash" {item} />
 					</ToggleButtonGroup>
 				</div>
 			</div>

package/package/components/details/EmailTriggerConfigSection.svelte.d.ts

@@ -15,7 +15,9 @@ declare const __propDef: {
         email?: string | undefined;
     };
     events: {
-        captureToggle: CustomEvent<undefined>;
+        captureToggle: CustomEvent<{
+            disableOnly?: boolean | undefined;
+        }>;
         applyArgs: CustomEvent<{
             kind: "preprocessor" | "main";
             args: Record<string, any> | undefined;

package/package/components/details/EmailTriggerPanel.svelte

@@ -68,6 +68,7 @@ getEmailDomain();
 				on:updateSchema
 				on:testWithArgs
 				{newItem}
+				alwaysOpened={true}
 			/>
 		{:else}
 			<div>

package/package/components/flows/content/FlowInput.svelte

@@ -3,7 +3,7 @@ import { ButtonType } from '../../common/button/model';
 import { getContext, tick } from 'svelte';
 import FlowCard from '../common/FlowCard.svelte';
 import Drawer from '../../common/drawer/Drawer.svelte';
-import SimpleEditor from '../../SimpleEditor.svelte';
+import JsonInputs from '../../JsonInputs.svelte';
 import { convert } from '@redocly/json-to-json-schema';
 import { sendUserToast } from '../../../toast';
 import EditableSchemaForm from '../../EditableSchemaForm.svelte';
@@ -16,15 +16,14 @@ import { CornerDownLeft, Pen, ChevronRight, Plus, History, Braces, Code, Save, X
 import CaptureIcon from '../../triggers/CaptureIcon.svelte';
 import FlowPreviewContent from '../../FlowPreviewContent.svelte';
 import FlowInputEditor from './FlowInputEditor.svelte';
-import CapturesInputs from '../../CapturesInputs.svelte';
 import { twMerge } from 'tailwind-merge';
 import CaptureButton from '../../triggers/CaptureButton.svelte';
 import { getFullPath, setNestedProperty, getNestedProperty, schemaFromDiff, computeDiff, applyDiff } from '../../schema/schemaUtils';
 import SideBarTab from '../../meltComponents/SideBarTab.svelte';
+import CaptureTable from '../../triggers/CaptureTable.svelte';
 export let noEditor;
 export let disabled;
 const { flowStore, previewArgs, pathStore, initialPath, flowInputEditorState } = getContext('FlowEditorContext');
-let pendingJson;
 let addProperty = undefined;
 let previewSchema = undefined;
 let payloadData = undefined;
@@ -36,6 +35,8 @@ let selectedSchema = undefined;
 let runDisabled = false;
 let editableSchemaForm = undefined;
 let savedPreviewArgs = undefined;
+let preventEscape = false;
+let isValid = true;
 function updateEditPanelSize(size) {
     if (!$flowInputEditorState)
         return;
@@ -203,19 +204,6 @@ function updatePreviewArguments(payloadData) {
     savedPreviewArgs = structuredClone(previewArguments);
     previewArguments = structuredClone(payloadData);
 }
-function updatePayloadFromJson(jsonInput) {
-    if (jsonInput === undefined || jsonInput === null || jsonInput.trim() === '') {
-        updatePreviewSchemaAndArgs(undefined);
-        return;
-    }
-    try {
-        const parsed = JSON.parse(jsonInput);
-        updatePreviewSchemaAndArgs(parsed);
-    }
-    catch (error) {
-        updatePreviewSchemaAndArgs(undefined);
-    }
-}
 let tabButtonWidth = 0;
 let connectFirstNode = () => { };
 let init = false;
@@ -262,16 +250,17 @@ function handleChange(arg, currentSchema, diffSchema, updateCurrentSchema) {
 }
 function resetArgs() {
     if (!previewSchema) {
-        previewArguments = undefined;
+        // previewArguments = undefined
         savedPreviewArgs = undefined;
     }
 }
+let historicInputs = undefined;
 </script>
 
 <!-- Add svelte:window to listen for keyboard events -->
 <svelte:window on:keydown={handleKeydown} />
 
-<Drawer bind:open={previewOpen} alwaysOpen size="75%">
+<Drawer bind:open={previewOpen} alwaysOpen size="75%" {preventEscape}>
 	<FlowPreviewContent
 		bind:this={flowPreviewContent}
 		open={previewOpen}
@@ -279,6 +268,7 @@ function resetArgs() {
 		on:close={() => {
 			previewOpen = false
 		}}
+		bind:preventEscape
 	/>
 </Drawer>
 
@@ -305,6 +295,7 @@ function resetArgs() {
 				{diff}
 				disableDnd={!!previewSchema}
 				on:rejectChange={(e) => {
+					console.log('rejectChange')
 					rejectChange(e.detail).then(() => {
 						updatePreviewSchema(selectedSchema)
 					})
@@ -324,6 +315,7 @@ function resetArgs() {
 				on:schemaChange={() => {
 					resetArgs()
 				}}
+				bind:isValid
 			>
 				<svelte:fragment slot="openEditTab">
 					<div class={twMerge('flex flex-row divide-x', ButtonType.ColorVariants.blue.divider)}>
@@ -378,7 +370,9 @@ function resetArgs() {
 								size="xs"
 								startIcon={{ icon: X }}
 								shortCut={{ key: 'esc', withoutModifier: true }}
-								nonCaptureEvent
+								on:click={() => {
+									historicInputs?.resetSelected(true)
+								}}
 							/>
 						</div>
 					{:else}
@@ -416,11 +410,11 @@ function resetArgs() {
 							}}
 						>
 							<HistoricInputs
-								scriptHash={null}
-								scriptPath={null}
-								flowPath={$pathStore}
+								bind:this={historicInputs}
+								runnableId={initialPath ?? undefined}
+								runnableType={$pathStore ? 'FlowPath' : undefined}
 								on:select={(e) => {
-									updatePreviewSchemaAndArgs(e.detail ?? undefined)
+									updatePreviewSchemaAndArgs(e.detail?.args ?? undefined)
 								}}
 							/>
 						</FlowInputEditor>
@@ -436,12 +430,17 @@ function resetArgs() {
 									<CaptureButton on:openTriggers small={true} />
 								</div>
 							</svelete:fragment>
-							<CapturesInputs
-								on:select={(e) => {
-									updatePreviewSchemaAndArgs(e.detail ?? undefined)
-								}}
-								flowPath={$pathStore}
-							/>
+							<div class="h-full">
+								<CaptureTable
+									path={$pathStore}
+									on:select={(e) => {
+										updatePreviewSchemaAndArgs(e.detail ?? undefined)
+									}}
+									isFlow={true}
+									headless={true}
+									addButton={false}
+								/>
+							</div>
 						</FlowInputEditor>
 					{:else if $flowInputEditorState?.selectedTab === 'savedInputs'}
 						<FlowInputEditor
@@ -451,7 +450,8 @@ function resetArgs() {
 							title="Saved inputs"
 						>
 							<SavedInputsPicker
-								flowPath={initialPath}
+								runnableId={initialPath ?? undefined}
+								runnableType={$pathStore ? 'FlowPath' : undefined}
 								on:select={(e) => {
 									updatePreviewSchemaAndArgs(e.detail ?? undefined)
 								}}
@@ -459,6 +459,7 @@ function resetArgs() {
 									preventEnter = e.detail
 								}}
 								previewArgs={previewArguments}
+								{isValid}
 							/>
 						</FlowInputEditor>
 					{:else if $flowInputEditorState?.selectedTab === 'json'}
@@ -468,26 +469,16 @@ function resetArgs() {
 							}}
 							title="Json payload"
 						>
-							<SimpleEditor
+							<JsonInputs
 								on:focus={() => {
 									preventEnter = true
-									updatePayloadFromJson(pendingJson)
 								}}
 								on:blur={async () => {
 									preventEnter = false
-									setTimeout(() => {
-										if (payloadData) {
-											updatePayloadFromJson('')
-										}
-									}, 100)
 								}}
-								on:change={(e) => {
-									updatePayloadFromJson(e.detail.code)
+								on:select={(e) => {
+									updatePreviewSchemaAndArgs(e.detail ?? undefined)
 								}}
-								bind:code={pendingJson}
-								lang="json"
-								class="h-full"
-								placeholder={'Write a JSON payload. The input schema will be inferred.<br/><br/>Example:<br/><br/>{<br/>&nbsp;&nbsp;"foo": "12"<br/>}'}
 							/>
 						</FlowInputEditor>
 					{:else if $flowInputEditorState?.selectedTab === 'firstStepInputs'}
@@ -521,7 +512,7 @@ function resetArgs() {
 						<Button
 							color="dark"
 							btnClasses="w-fit"
-							disabled={runDisabled}
+							disabled={runDisabled || !isValid}
 							size="xs"
 							shortCut={{ Icon: CornerDownLeft, hide: false }}
 							on:click={() => {

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

@@ -55,12 +55,13 @@ let customUi = getContext('customUi');
 	{:else}{#if !failureModule && !preprocessorModule}
 			<div class="center-center">
 				<div class="max-w-min">
-					<ToggleButtonGroup bind:selected={kind}>
+					<ToggleButtonGroup bind:selected={kind} let:item>
 						<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."
+							{item}
 						/>
 						{#if !shouldDisableTriggerScripts}
 							<ToggleButton
@@ -68,6 +69,7 @@ let customUi = getContext('customUi');
 								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."
+								{item}
 							/>
 						{/if}
 						<ToggleButton
@@ -75,6 +77,7 @@ let customUi = getContext('customUi');
 							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."
+							{item}
 						/>
 					</ToggleButtonGroup>
 				</div>

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

@@ -578,13 +578,18 @@ function setFlowInput(argName) {
 											</div>
 											<div class="flex gap-2 justify-between mb-4 items-center">
 												<div class="flex gap-2">
-													<ToggleButtonGroup bind:selected={s3Kind} class="w-auto">
+													<ToggleButtonGroup bind:selected={s3Kind} class="w-auto" let:item>
 														{#if flowModule.value['language'] === 'deno'}
-															<ToggleButton value="s3_client" size="sm" label="S3 lite client" />
+															<ToggleButton
+																value="s3_client"
+																size="sm"
+																label="S3 lite client"
+																{item}
+															/>
 														{:else}
-															<ToggleButton value="s3_client" size="sm" label="Boto3" />
-															<ToggleButton value="polars" size="sm" label="Polars" />
-															<ToggleButton value="duckdb" size="sm" label="DuckDB" />
+															<ToggleButton value="s3_client" size="sm" label="Boto3" {item} />
+															<ToggleButton value="polars" size="sm" label="Polars" {item} />
+															<ToggleButton value="duckdb" size="sm" label="DuckDB" {item} />
 														{/if}
 													</ToggleButtonGroup>
 												</div>

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

@@ -8,7 +8,7 @@ declare const __propDef: {
         parentModule?: FlowModule | undefined;
         previousModule: FlowModule | undefined;
         scriptKind?: "script" | "trigger" | "approval" | undefined;
-        scriptTemplate?: "powershell" | "mysql" | "script" | "docker" | "pgsql" | undefined;
+        scriptTemplate?: "script" | "powershell" | "mysql" | "docker" | "pgsql" | undefined;
         noEditor: boolean;
         enableAi: boolean;
     };