windmill-components 1.511.0 → 1.522.0

package/package/components/scriptEditor/LogPanel.svelte

@@ -49,6 +49,7 @@ let forceJson = $state(false);
 				result={drawerContent.content}
 				customUi={customUi?.displayResult}
 				language={lang}
+				result_stream={previewJob?.result_stream}
 			/>
 		{:else if drawerContent?.mode === 'plain'}
 			<pre
@@ -60,7 +61,6 @@ let forceJson = $state(false);
 		{/if}
 	</DrawerContent>
 </Drawer>
-
 <div class="h-full flex flex-col">
 	<Tabs bind:selected={selectedTab} class="pt-1" wrapperClass="flex-none">
 		<Tab value="logs" size="xs">Logs & Result</Tab>
@@ -98,9 +98,9 @@ let forceJson = $state(false);
 							</Pane>
 							<Pane>
 								{@render children?.()}
-								{#if previewJob != undefined && 'result' in previewJob}
+								{#if previewJob != undefined && (previewJob.result_stream || previewJob.result)}
 									<div class="relative w-full h-full p-2">
-										<div class="relative">
+										<div class="relative h-full">
 											<DisplayResult
 												bind:forceJson
 												workspaceId={previewJob?.workspace_id}
@@ -108,6 +108,8 @@ let forceJson = $state(false);
 												result={previewJob.result}
 												customUi={customUi?.displayResult}
 												language={lang}
+												result_stream={previewJob?.result_stream}
+												fixTableSizingToParent
 											>
 												{#snippet copilot_fix()}
 													{#if lang && editor && diffEditor && args && previewJob && !previewJob.success && getStringError(previewJob.result)}

package/package/components/scriptEditor/LogPanel.svelte.d.ts

@@ -5,7 +5,11 @@ import type { PreviewPanelUi } from '../custom_ui';
 interface Props {
     lang: Preview['language'] | undefined;
     previewIsLoading?: boolean;
-    previewJob: Job | undefined;
+    previewJob: (Job & {
+        result_stream?: string;
+        result?: any;
+        success?: boolean;
+    }) | undefined;
     pastPreviews?: CompletedJob[];
     editor?: Editor | undefined;
     diffEditor?: DiffEditor | undefined;

package/package/components/select/Select.svelte

@@ -6,8 +6,8 @@ import { untrack } from 'svelte';
 import { getLabel, processItems } from './utils.svelte';
 import SelectDropdown from './SelectDropdown.svelte';
 import { deepEqual } from 'fast-equals';
-let { items, placeholder = 'Please select', value = $bindable(), filterText = $bindable(''), class: className = '', clearable = false, listAutoWidth = true, disabled: _disabled = false, containerStyle = '', inputClass = '', disablePortal = false, loading = false, autofocus, RightIcon, createText, noItemsMsg, open = $bindable(false), groupBy, sortBy, onFocus, onBlur, onClear, onCreateItem } = $props();
-let disabled = $derived(_disabled || loading);
+let { items, placeholder = 'Please select', value = $bindable(), filterText = $bindable(''), class: className = '', clearable = false, listAutoWidth = true, disabled: _disabled = false, containerStyle = '', inputClass = '', disablePortal = false, loading = false, autofocus, RightIcon, createText, noItemsMsg, open = $bindable(false), groupBy, sortBy, onFocus, onBlur, onClear, onCreateItem, startSnippet } = $props();
+let disabled = $derived(_disabled || (loading && !value));
 let inputEl = $state();
 let processedItems = $derived.by(() => {
     let args = { items, createText, filterText, groupBy, onCreateItem, sortBy };
@@ -67,12 +67,14 @@ function clearValue() {
 		{disabled}
 		type="text"
 		bind:value={() => filterText, (v) => (filterText = v)}
-		placeholder={loading ? 'Loading...' : (valueEntry?.label ?? getLabel({ value }) ?? placeholder)}
+		placeholder={loading && !value
+			? 'Loading...'
+			: (valueEntry?.label ?? getLabel({ value }) ?? placeholder)}
 		style={containerStyle}
 		class={twMerge(
 			'!bg-surface text-ellipsis',
 			open ? '' : 'cursor-pointer',
-			value && !loading ? '!placeholder-primary' : '',
+			!loading && value ? '!placeholder-primary' : '',
 			(clearable || RightIcon) && !disabled && value ? '!pr-8' : '',
 			inputClass ?? ''
 		)}
@@ -91,5 +93,6 @@ function clearValue() {
 		getInputRect={inputEl && (() => inputEl!.getBoundingClientRect())}
 		{listAutoWidth}
 		{noItemsMsg}
+		{startSnippet}
 	/>
 </div>

package/package/components/select/Select.svelte.d.ts

@@ -1,3 +1,5 @@
+import { type Snippet } from 'svelte';
+import { type ProcessedItem } from './utils.svelte';
 declare class __sveltets_Render<Item extends {
     label?: string;
     value: any;
@@ -27,6 +29,9 @@ declare class __sveltets_Render<Item extends {
         onBlur?: (() => void) | undefined;
         onClear?: (() => void) | undefined;
         onCreateItem?: ((value: string) => void) | undefined;
+        startSnippet?: Snippet<[{
+            item: ProcessedItem<Item["value"]>;
+        }]> | undefined;
     };
     events(): {};
     slots(): {};

package/package/components/select/SelectDropdown.svelte

@@ -2,7 +2,7 @@
 import ConditionalPortal from '../common/drawer/ConditionalPortal.svelte';
 import { untrack } from 'svelte';
 import { twMerge } from 'tailwind-merge';
-let { processedItems: _processedItems, value, filterText, listAutoWidth = true, disabled, disablePortal = false, open, noItemsMsg = 'No items found', class: className = '', ulClass = '', header, getInputRect, onSelectValue } = $props();
+let { processedItems: _processedItems, value, filterText, listAutoWidth = true, disabled, disablePortal = false, open, noItemsMsg = 'No items found', class: className = '', ulClass = '', header, getInputRect, onSelectValue, startSnippet } = $props();
 let processedItems = $derived(!filterText
     ? _processedItems
     : _processedItems?.filter((item) => item.__is_create || item?.label?.toLowerCase().includes(filterText?.toLowerCase())));
@@ -102,6 +102,7 @@ $effect(() => {
 								onSelectValue(item)
 							}}
 						>
+							{@render startSnippet?.({ item })}
 							{item.label || '\xa0'}
 							{#if item.subtitle}
 								<div class="text-xs text-tertiary">{item.subtitle}</div>

package/package/components/select/SelectDropdown.svelte.d.ts

@@ -15,6 +15,9 @@ declare class __sveltets_Render<T> {
         header?: Snippet;
         getInputRect?: (() => DOMRect) | undefined;
         onSelectValue: (item: ProcessedItem<T>) => void;
+        startSnippet?: Snippet<[{
+            item: ProcessedItem<T>;
+        }]> | undefined;
     };
     events(): {};
     slots(): {};

package/package/components/sidebar/changelogs.js

@@ -1,4 +1,9 @@
 const changelogs = [
+    {
+        label: 'Dynamic select for flows',
+        href: 'https://www.windmill.dev/changelog/dynamic-select-flows',
+        date: '2025-08-08'
+    },
     {
         label: 'MQTT triggers',
         href: 'https://www.windmill.dev/changelog/mqtt-triggers',

package/package/components/table/AutoDataTable.svelte

@@ -11,7 +11,7 @@ import { computeStructuredObjectsAndHeaders, convertJsonToCsv, isEmail, isLink }
 import Popover from '../Popover.svelte';
 import DarkModeObserver from '../DarkModeObserver.svelte';
 import DownloadCsv from './DownloadCsv.svelte';
-let { objects = [] } = $props();
+let { objects = [], class: className } = $props();
 let currentPage = $state(1);
 let perPage = $state(25);
 let search = $state('');
@@ -131,7 +131,7 @@ let slicedData = $derived(data.slice((currentPage - 1) * perPage, currentPage *
 
 <DarkModeObserver bind:darkMode />
 
-<div class="w-full" bind:clientWidth={wrapperWidth}>
+<div class={className} bind:clientWidth={wrapperWidth}>
 	<div class="flex flex-col gap-2 py-1 my-1" style={`max-width: ${wrapperWidth}px;`}>
 		<div class="flex flex-row justify-between items-center gap-2">
 			<div class="flex flex-row gap-2 items-center whitespace-nowrap w-full">
@@ -242,7 +242,9 @@ let slicedData = $derived(data.slice((currentPage - 1) * perPage, currentPage *
 					on:change={(event) => {
 						currentPage = event.detail
 					}}
-					showNext={currentPage * perPage < objects.length}
+					showNext={objects.length > perPage}
+					showPrev={objects.length > perPage}
+					hasMore={currentPage * perPage < objects.length}
 					rowCount={data.length}
 				>
 					<Head>
@@ -294,7 +296,7 @@ let slicedData = $derived(data.slice((currentPage - 1) * perPage, currentPage *
 							{/each}
 						</tr>
 					</Head>
-					<tbody class="divide-y">
+					<tbody class="divide-y border-b">
 						{#each slicedData.filter((x) => x) as { _id, rowData }, index (index)}
 							<Row dividable selected={selection.includes(_id) && colSelection.length == 0}>
 								<Cell first={true} last={false} class="w-6">

package/package/components/table/AutoDataTable.svelte.d.ts

@@ -1,5 +1,6 @@
 interface Props {
     objects?: Array<Record<string, any>>;
+    class?: string;
 }
 declare const AutoDataTable: import("svelte").Component<Props, {}, "">;
 type AutoDataTable = ReturnType<typeof AutoDataTable>;

package/package/components/table/DataTable.svelte

@@ -10,7 +10,7 @@ let footerHeight = $state(0);
 let tableHeight = $state(0);
 const dispatch = createEventDispatcher();
 let tableContainer = $state();
-let { paginated = false, currentPage = $bindable(1), showNext = true, loadMore = 0, shouldLoadMore = false, rounded = true, size = 'md', perPage = $bindable(undefined), shouldHidePagination = false, noBorder = false, rowCount = undefined, hasMore = true, contentHeight = $bindable(0), tableFixed = false, infiniteScroll = undefined, neverShowLoader = false, loading = false, loadingMore = false, children, emptyMessage } = $props();
+let { paginated = false, currentPage = $bindable(1), showNext = true, showPrev = true, loadMore = 0, shouldLoadMore = false, rounded = true, size = 'md', perPage = $bindable(undefined), shouldHidePagination = false, noBorder = false, rowCount = undefined, hasMore = true, contentHeight = $bindable(0), tableFixed = false, infiniteScroll = undefined, neverShowLoader = false, loading = false, loadingMore = false, children, emptyMessage } = $props();
 setContext('datatable', {
     size
 });
@@ -98,15 +98,17 @@ $effect(() => {
 							<option value={1000}>1000</option>
 						</select>
 					{/if}
-					<Button
-						color="light"
-						size="xs2"
-						on:click={() => dispatch('previous')}
-						disabled={currentPage === 1}
-						startIcon={{ icon: ArrowLeftIcon }}
-					>
-						Previous
-					</Button>
+					{#if showPrev}
+						<Button
+							color="light"
+							size="xs2"
+							on:click={() => dispatch('previous')}
+							disabled={currentPage === 1}
+							startIcon={{ icon: ArrowLeftIcon }}
+						>
+							Previous
+						</Button>
+					{/if}
 					{#if showNext}
 						<Button
 							color="light"

package/package/components/table/DataTable.svelte.d.ts

@@ -5,6 +5,7 @@ interface Props {
     paginated?: boolean;
     currentPage?: number;
     showNext?: boolean;
+    showPrev?: boolean;
     loadMore?: number;
     shouldLoadMore?: boolean;
     rounded?: boolean;

package/package/components/triggers/TriggerRetriesAndErrorHandler.svelte.d.ts

@@ -1,9 +1,9 @@
-import type { Retry } from '../../gen';
+import type { ErrorHandler, Retry } from '../../gen';
 type $$ComponentProps = {
     optionTabSelected: 'error_handler' | 'retries' | string;
     itemKind: 'script' | 'flow';
     can_write: boolean;
-    errorHandlerSelected: 'custom' | 'slack' | 'teams';
+    errorHandlerSelected: ErrorHandler;
     error_handler_path: string | undefined;
     error_handler_args: Record<string, any>;
     retry: Retry | undefined;

package/package/components/triggers/gcp/GcpTriggerEditorConfigSection.svelte

@@ -57,7 +57,7 @@ async function loadAllSubscriptionFromGooglePubSubTopic() {
         loadingSubscription = false;
     }
 }
-let { can_write = false, headless = false, isValid = $bindable(false), gcp_resource_path = $bindable(''), subscription_id = $bindable(''), topic_id = $bindable(''), delivery_type = $bindable('pull'), delivery_config = $bindable(), subscription_mode = $bindable('create_update'), base_endpoint = $bindable(getBaseUrl()), path = '', showTestingBadge = false, cloud_subscription_id = $bindable(''), create_update_subscription_id = $bindable('') } = $props();
+let { can_write = false, headless = false, isValid = $bindable(false), gcp_resource_path = $bindable(''), subscription_id = $bindable(''), topic_id = $bindable(''), delivery_type = $bindable('pull'), delivery_config = $bindable(), subscription_mode = $bindable('create_update'), base_endpoint = $bindable(getBaseUrl()), auto_acknowledge_msg = $bindable(true), path = '', showTestingBadge = false, cloud_subscription_id = $bindable(''), create_update_subscription_id = $bindable('') } = $props();
 if (gcp_resource_path) {
     loadAllPubSubTopicsFromProject();
 }

package/package/components/triggers/gcp/GcpTriggerEditorConfigSection.svelte.d.ts

@@ -14,7 +14,8 @@ interface Props {
     showTestingBadge?: boolean;
     cloud_subscription_id?: string;
     create_update_subscription_id?: string;
+    auto_acknowledge_msg: boolean;
 }
-declare const GcpTriggerEditorConfigSection: import("svelte").Component<Props, {}, "base_endpoint" | "gcp_resource_path" | "topic_id" | "subscription_id" | "delivery_type" | "subscription_mode" | "delivery_config" | "isValid" | "cloud_subscription_id" | "create_update_subscription_id">;
+declare const GcpTriggerEditorConfigSection: import("svelte").Component<Props, {}, "base_endpoint" | "gcp_resource_path" | "topic_id" | "subscription_id" | "delivery_type" | "subscription_mode" | "delivery_config" | "auto_acknowledge_msg" | "isValid" | "cloud_subscription_id" | "create_update_subscription_id">;
 type GcpTriggerEditorConfigSection = ReturnType<typeof GcpTriggerEditorConfigSection>;
 export default GcpTriggerEditorConfigSection;

package/package/components/triggers/gcp/GcpTriggerEditorInner.svelte

@@ -19,6 +19,8 @@ import { base } from '../../../base';
 import Tabs from '../../common/tabs/Tabs.svelte';
 import Tab from '../../common/tabs/Tab.svelte';
 import TriggerRetriesAndErrorHandler from '../TriggerRetriesAndErrorHandler.svelte';
+import Subsection from '../../Subsection.svelte';
+import Toggle from '../../Toggle.svelte';
 let drawer = $state(undefined);
 let is_flow = $state(false);
 let initialPath = $state('');
@@ -43,6 +45,7 @@ let subscription_mode = $state('create_update');
 let initialConfig = undefined;
 let deploymentLoading = $state(false);
 let base_endpoint = $derived(`${window.location.origin}${base}`);
+let auto_acknowledge_msg = $state(true);
 let optionTabSelected = $state('error_handler');
 let errorHandlerSelected = $state('slack');
 let error_handler_path = $state();
@@ -95,6 +98,7 @@ export async function openNew(nis_flow, fixedScriptPath_, defaultValues) {
         error_handler_path = defaultValues?.error_handler_path ?? undefined;
         error_handler_args = defaultValues?.error_handler_args ?? {};
         retry = defaultValues?.retry ?? undefined;
+        auto_acknowledge_msg = defaultValues?.auto_acknowledge_msg ?? true;
         errorHandlerSelected = getHandlerType(error_handler_path ?? '');
     }
     finally {
@@ -135,6 +139,7 @@ async function loadTriggerConfig(cfg) {
     error_handler_path = cfg?.error_handler_path;
     error_handler_args = cfg?.error_handler_args ?? {};
     retry = cfg?.retry;
+    auto_acknowledge_msg = cfg?.auto_acknowledge_msg ?? true;
     errorHandlerSelected = getHandlerType(error_handler_path ?? '');
 }
 async function updateTrigger() {
@@ -165,7 +170,8 @@ function getGcpConfig() {
         is_flow,
         error_handler_path,
         error_handler_args,
-        retry
+        retry,
+        auto_acknowledge_msg
     };
 }
 function getGcpCaptureConfig() {
@@ -176,6 +182,7 @@ function getGcpCaptureConfig() {
         delivery_type,
         delivery_config,
         base_endpoint,
+        auto_acknowledge_msg,
         topic_id,
         path
     };
@@ -313,7 +320,7 @@ $effect(() => {
 								color="dark"
 								size="xs"
 								disabled={!can_write}
-								href={itemKind === 'flow' ? '/flows/add?hub=68' : '/scripts/add?hub=hub%2F19662'}
+								href={itemKind === 'flow' ? '/flows/add?hub=68' : '/scripts/add?hub=hub%2F19796'}
 								target="_blank">Create from template</Button
 							>
 						{/if}
@@ -329,6 +336,7 @@ $effect(() => {
 				bind:delivery_config
 				bind:topic_id
 				bind:subscription_mode
+				bind:auto_acknowledge_msg
 				{path}
 				cloud_subscription_id={subscription_id}
 				create_update_subscription_id={subscription_id}
@@ -341,19 +349,50 @@ $effect(() => {
 				<div class="flex flex-col gap-4">
 					<div class="min-h-96">
 						<Tabs bind:selected={optionTabSelected}>
+							<Tab value="settings">Settings</Tab>
 							<Tab value="error_handler">Error Handler</Tab>
 							<Tab value="retries">Retries</Tab>
 						</Tabs>
 						<div class="mt-4">
-							<TriggerRetriesAndErrorHandler
-								{optionTabSelected}
-								{itemKind}
-								{can_write}
-								bind:errorHandlerSelected
-								bind:error_handler_path
-								bind:error_handler_args
-								bind:retry
-							/>
+							{#if optionTabSelected === 'settings'}
+								<div class="flex flex-col gap-4">
+									{#if delivery_type === 'pull'}
+										<Subsection
+											label="Auto-acknowledge messages"
+											tooltip="When enabled (recommended), Windmill automatically acknowledges Pub/Sub messages after successful processing. When disabled, your script/flow must explicitly acknowledge each message."
+										>
+											<div class="mt-2">
+												<Toggle bind:checked={auto_acknowledge_msg} />
+											</div>
+											{#if !auto_acknowledge_msg}
+												<div class="mt-3">
+													<Alert size="xs" type="warning" title="Manual Acknowledgment Required">
+														You must acknowledge each message in your script/flow code using the
+														`ack_id` provided in the payload data. If messages are not acknowledged
+														within the acknowledgment deadline (by default 600 seconds), GCP will
+														automatically redeliver them in 600 seconds, causing Windmill to
+														reprocess the same messages repeatedly.
+													</Alert>
+												</div>
+											{/if}
+										</Subsection>
+									{:else}
+										<div class="flex items-center justify-center h-32 text-tertiary">
+											No settings available for push delivery type
+										</div>
+									{/if}
+								</div>
+							{:else}
+								<TriggerRetriesAndErrorHandler
+									{optionTabSelected}
+									{itemKind}
+									{can_write}
+									bind:errorHandlerSelected
+									bind:error_handler_path
+									bind:error_handler_args
+									bind:retry
+								/>
+							{/if}
 						</div>
 					</div>
 				</div>

package/package/components/triggers/gcp/utils.js

@@ -22,6 +22,7 @@ export async function saveGcpTriggerFromCfg(initialPath, cfg, edit, workspace, u
             script_path: cfg.script_path,
             enabled: cfg.enabled,
             is_flow: cfg.is_flow,
+            auto_acknowledge_msg: cfg.auto_acknowledge_msg,
             ...errorHandlerAndRetries
         };
         if (edit) {

package/package/components/triggers/http/utils.js

@@ -37,7 +37,7 @@ export async function saveHttpRouteFromCfg(initialPath, routeCfg, edit, workspac
         summary: routeCfg.summary,
         error_handler_path: routeCfg.error_handler_path,
         error_handler_args: routeCfg.error_handler_path ? routeCfg.error_handler_args : undefined,
-        retry: routeCfg.retry
+        retry: routeCfg.retry,
     };
     try {
         if (edit) {

package/package/components/triggers/kafka/utils.js

@@ -6,7 +6,7 @@ export async function saveKafkaTriggerFromCfg(initialPath, cfg, edit, workspace,
         ? {
             error_handler_path: cfg.error_handler_path,
             error_handler_args: cfg.error_handler_path ? cfg.error_handler_args : undefined,
-            retry: cfg.retry
+            retry: cfg.retry,
         }
         : {};
     const requestBody = {

package/package/components/triggers/mqtt/utils.js

@@ -6,7 +6,7 @@ export async function saveMqttTriggerFromCfg(initialPath, cfg, edit, workspace,
         ? {
             error_handler_path: cfg.error_handler_path,
             error_handler_args: cfg.error_handler_path ? cfg.error_handler_args : undefined,
-            retry: cfg.retry
+            retry: cfg.retry,
         }
         : {};
     const requestBody = {

package/package/components/triggers/nats/utils.js

@@ -6,7 +6,7 @@ export async function saveNatsTriggerFromCfg(initialPath, cfg, edit, workspace,
         ? {
             error_handler_path: cfg.error_handler_path,
             error_handler_args: cfg.error_handler_path ? cfg.error_handler_args : undefined,
-            retry: cfg.retry
+            retry: cfg.retry,
         }
         : {};
     const requestBody = {

package/package/components/triggers/postgres/utils.js

@@ -85,7 +85,7 @@ export async function savePostgresTriggerFromCfg(initialPath, config, edit, work
             ? {
                 error_handler_path: config.error_handler_path,
                 error_handler_args: config.error_handler_path ? config.error_handler_args : undefined,
-                retry: config.retry
+                retry: config.retry,
             }
             : {};
         const requestBody = {

package/package/components/triggers/sqs/utils.js

@@ -6,7 +6,7 @@ export async function saveSqsTriggerFromCfg(initialPath, cfg, edit, workspace, u
         ? {
             error_handler_path: cfg.error_handler_path,
             error_handler_args: cfg.error_handler_path ? cfg.error_handler_args : undefined,
-            retry: cfg.retry
+            retry: cfg.retry,
         }
         : {};
     const requestBody = {

package/package/components/triggers/utils.js

@@ -398,7 +398,8 @@ export function filterDraftTriggers(savedValue, triggersState) {
 export function getHandlerType(scriptPath) {
     const handlerMap = {
         teams: '/workspace-or-schedule-error-handler-teams',
-        slack: '/workspace-or-schedule-error-handler-slack'
+        slack: '/workspace-or-schedule-error-handler-slack',
+        email: '/workspace-or-error-handler-email'
     };
     for (const [type, suffix] of Object.entries(handlerMap)) {
         if (scriptPath.startsWith('hub/') && scriptPath.endsWith(suffix)) {

package/package/components/triggers/webhook/WebhooksConfigSection.svelte

@@ -1,5 +1,4 @@
-<script lang="ts">import { run } from 'svelte/legacy';
-import Label from '../../Label.svelte';
+<script lang="ts">import Label from '../../Label.svelte';
 import Tooltip from '../../Tooltip.svelte';
 import ToggleButtonGroup from '../../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from '../../common/toggleButton-v2/ToggleButton.svelte';
@@ -10,7 +9,7 @@ import { ArrowDownRight, ArrowUpRight, Clipboard } from 'lucide-svelte';
 import { Highlight } from 'svelte-highlight';
 import { typescript } from 'svelte-highlight/languages';
 import ClipboardPanel from '../../details/ClipboardPanel.svelte';
-import { copyToClipboard, isObject } from '../../../utils';
+import { copyToClipboard, isObject, readFieldsRecursively } from '../../../utils';
 // import { page } from '$app/stores'
 import { base } from '../../../base';
 import TriggerTokens from '../TriggerTokens.svelte';
@@ -21,7 +20,28 @@ let { isFlow = false, path = '', hash = undefined, token = $bindable(''), runnab
 let webhooks = $derived(isFlow ? computeFlowWebhooks(path) : computeScriptWebhooks(hash, path));
 let selectedTab = $state('rest');
 let userSettings = $state();
-let url = $state('');
+let webhookType = $state(DEFAULT_WEBHOOK_TYPE);
+let requestType = $state(isFlow ? 'path' : 'path');
+let tokenType = $state('headers');
+$effect(() => {
+    if (webhookType === 'async' && requestType === 'get_path') {
+        requestType = hash ? 'hash' : 'path';
+    }
+});
+let cleanedRunnableArgs = $derived.by(() => {
+    readFieldsRecursively(runnableArgs);
+    return isObject(runnableArgs) && 'wm_trigger' in runnableArgs
+        ? Object.fromEntries(Object.entries(runnableArgs).filter(([key]) => key !== 'wm_trigger'))
+        : runnableArgs;
+});
+let url = $derived(webhooks[webhookType][requestType] +
+    (tokenType === 'query'
+        ? `?token=${token}${requestType === 'get_path'
+            ? `&payload=${encodeURIComponent(btoa(JSON.stringify(cleanedRunnableArgs ?? {})))}`
+            : ''}`
+        : `${requestType === 'get_path'
+            ? `?payload=${encodeURIComponent(btoa(JSON.stringify(cleanedRunnableArgs ?? {})))}`
+            : ''}`));
 function computeScriptWebhooks(hash, path) {
     let webhookBase = `${location.origin}${base}/api/w/${$workspaceStore}/jobs`;
     return {
@@ -50,9 +70,6 @@ function computeFlowWebhooks(path) {
         }
     };
 }
-let webhookType = $state(DEFAULT_WEBHOOK_TYPE);
-let requestType = $state(isFlow ? 'path' : 'path');
-let tokenType = $state('headers');
 function headers() {
     const headers = {};
     if (requestType != 'get_path') {
@@ -155,25 +172,6 @@ while true; do
   fi
 done`}`;
 }
-run(() => {
-    if (webhookType === 'async' && requestType === 'get_path') {
-        requestType = hash ? 'hash' : 'path';
-    }
-});
-let cleanedRunnableArgs = $derived(isObject(runnableArgs) && 'wm_trigger' in runnableArgs
-    ? Object.fromEntries(Object.entries(runnableArgs).filter(([key]) => key !== 'wm_trigger'))
-    : runnableArgs);
-run(() => {
-    url =
-        webhooks[webhookType][requestType] +
-            (tokenType === 'query'
-                ? `?token=${token}${requestType === 'get_path'
-                    ? `&payload=${encodeURIComponent(btoa(JSON.stringify(cleanedRunnableArgs ?? {})))}`
-                    : ''}`
-                : `${requestType === 'get_path'
-                    ? `?payload=${encodeURIComponent(btoa(JSON.stringify(cleanedRunnableArgs ?? {})))}`
-                    : ''}`);
-});
 </script>
 
 <UserSettings

package/package/components/triggers/webhook/WebhooksPanel.svelte

@@ -4,12 +4,6 @@ import HighlightTheme from '../../HighlightTheme.svelte';
 import WebhooksConfigSection from './WebhooksConfigSection.svelte';
 import { Section } from '../../common';
 let { token, args = {}, scopes = [], isFlow = false, hash = undefined, path, newItem = false } = $props();
-let data = $derived({
-    hash,
-    token,
-    scopes,
-    args
-});
 </script>
 
 <HighlightTheme />
@@ -25,13 +19,5 @@ let data = $derived({
 			{isFlow ? 'flow' : 'script'}.
 		</Alert>
 	{/if}
-
-	<WebhooksConfigSection
-		{isFlow}
-		{path}
-		hash={data?.hash}
-		token={data?.token}
-		runnableArgs={data?.args}
-		scopes={data?.scopes}
-	/>
+	<WebhooksConfigSection {isFlow} {path} {hash} {token} runnableArgs={args} {scopes} />
 </Section>

package/package/components/triggers/websocket/utils.js

@@ -8,7 +8,7 @@ export async function saveWebsocketTriggerFromCfg(initialPath, triggerCfg, edit,
             error_handler_args: triggerCfg.error_handler_path
                 ? triggerCfg.error_handler_args
                 : undefined,
-            retry: triggerCfg.retry
+            retry: triggerCfg.retry,
         }
         : {};
     const requestBody = {