windmill-components 1.493.9 → 1.501.4

package/package/components/ScriptBuilder.svelte

@@ -1,6 +1,9 @@
-<script lang="ts">import { DraftService, ScriptService, PostgresTriggerService, CaptureService } from '../gen';
+<script lang="ts">import { createBubbler } from 'svelte/legacy';
+const bubble = createBubbler();
+import { DraftService, ScriptService, PostgresTriggerService, CaptureService } from '../gen';
 import { inferArgs } from '../infer';
 import { initialCode } from '../script_helpers';
+import AIFormSettings from './copilot/AIFormSettings.svelte';
 import { defaultScripts, enterpriseLicense, usedTriggerKinds, userStore, workspaceStore } from '../stores';
 import { cleanValueProperties, emptySchema, emptyString, encodeState, generateRandomString, orderedJsonStringify, replaceFalseWithUndefined } from '../utils';
 import Path from './Path.svelte';
@@ -27,7 +30,7 @@ import MetadataGen from './copilot/MetadataGen.svelte';
 import { writable } from 'svelte/store';
 import { defaultScriptLanguages, processLangs } from '../scripts';
 import DefaultScripts from './DefaultScripts.svelte';
-import { createEventDispatcher, onMount, setContext } from 'svelte';
+import { onMount, setContext, untrack } from 'svelte';
 import Summary from './Summary.svelte';
 import DeployOverrideConfirmationModal from './common/confirmationModal/DeployOverrideConfirmationModal.svelte';
 import TriggersEditor from './triggers/TriggersEditor.svelte';
@@ -37,22 +40,7 @@ import DeployButton from './DeployButton.svelte';
 import { deployTriggers, filterDraftTriggers, handleSelectTriggerFromKind } from './triggers/utils';
 import DraftTriggersConfirmationModal from './common/confirmationModal/DraftTriggersConfirmationModal.svelte';
 import { Triggers } from './triggers/triggers.svelte';
-export let script;
-export let fullyLoaded = true;
-export let initialPath = '';
-export let template = 'script';
-export let initialArgs = {};
-export let lockedLanguage = false;
-export let showMeta = false;
-export let neverShowMeta = false;
-export let diffDrawer = undefined;
-export let savedScript = undefined;
-export let searchParams = new URLSearchParams();
-export let disableHistoryChange = false;
-export let replaceStateFn = (url) => window.history.replaceState(null, '', url);
-export let customUi = {};
-export let savedPrimarySchedule = undefined;
-export let functionExports = undefined;
+let { script = $bindable(), fullyLoaded = true, initialPath = $bindable(''), template = $bindable('script'), initialArgs = {}, lockedLanguage = false, showMeta = false, neverShowMeta = false, diffDrawer = undefined, savedScript = $bindable(undefined), searchParams = new URLSearchParams(), disableHistoryChange = false, replaceStateFn = (url) => window.history.replaceState(null, '', url), customUi = {}, savedPrimarySchedule = undefined, functionExports = undefined, children, onDeploy, onDeployError, onSaveInitial, onSeeDetails, onSaveDraftError, onSaveDraft } = $props();
 export function getInitialAndModifiedValues() {
     return {
         savedValue: savedScript,
@@ -64,28 +52,29 @@ export function getInitialAndModifiedValues() {
 }
 // used for new scripts for captures
 const fakeInitialPath = 'u/' +
-    ($userStore.username?.includes('@')
-        ? $userStore.username.split('@')[0].replace(/[^a-zA-Z0-9_]/g, '')
-        : $userStore.username) +
+    ($userStore?.username?.includes('@')
+        ? $userStore?.username.split('@')[0].replace(/[^a-zA-Z0-9_]/g, '')
+        : $userStore?.username) +
     '/' +
     generateRandomString(12);
-let deployedValue = undefined; // Value to diff against
-let deployedBy = undefined; // Author
-let confirmCallback = () => { }; // What happens when user clicks `override` in warning
-let open = false; // Is confirmation modal open
-let args = initialArgs; // Test args input
-let selectedInputTab = 'main';
-let hasPreprocessor = false;
-let metadataOpen = !neverShowMeta &&
+let deployedValue = $state(undefined); // Value to diff against
+let deployedBy = $state(undefined); // Author
+let confirmCallback = $state(() => { }); // What happens when user clicks `override` in warning
+let open = $state(false); // Is confirmation modal open
+let args = $state(initialArgs); // Test args input
+let selectedInputTab = $state('main');
+let hasPreprocessor = $state(false);
+let metadataOpen = $state(!neverShowMeta &&
     (showMeta ||
+        searchParams.get('metadata_open') == 'true' ||
         (initialPath == '' &&
             searchParams.get('state') == undefined &&
-            searchParams.get('collab') == undefined));
-let editor = undefined;
-let scriptEditor = undefined;
-let captureTable = undefined;
+            searchParams.get('collab') == undefined)));
+let editor = $state(undefined);
+let scriptEditor = $state(undefined);
+let captureTable = $state(undefined);
 // Draft triggers confirmation modal
-let draftTriggersModalOpen = false;
+let draftTriggersModalOpen = $state(false);
 let confirmDeploymentCallback = () => { };
 async function handleDraftTriggersConfirmed(event) {
     const { selectedTriggers } = event.detail;
@@ -109,8 +98,6 @@ export function setDraftTriggers(triggers) {
     ]);
     loadTriggers();
 }
-const dispatch = createEventDispatcher();
-$: initialPath != '' && loadTriggers();
 onMount(() => {
     if (functionExports) {
         console.log('functionExports set');
@@ -130,6 +117,9 @@ onMount(() => {
     }
 });
 async function loadTriggers() {
+    if (!initialPath) {
+        return;
+    }
     $triggersCount = await ScriptService.getTriggersCountOfScript({
         workspace: $workspaceStore,
         path: initialPath
@@ -140,11 +130,11 @@ async function loadTriggers() {
     }
 }
 // Add triggers context store
-const triggersState = new Triggers([
+const triggersState = $state(new Triggers([
     { type: 'webhook', path: '', isDraft: false },
     { type: 'email', path: '', isDraft: false },
     ...(script.draft_triggers ?? [])
-], undefined, saveSessionDraft);
+], undefined, saveSessionDraft));
 const captureOn = writable(undefined);
 const showCaptureHint = writable(undefined);
 setContext('TriggerContext', {
@@ -157,15 +147,6 @@ const enterpriseLangs = ['bigquery', 'snowflake', 'mssql', 'oracledb'];
 export function setCode(code) {
     editor?.setCode(code);
 }
-$: langs = processLangs(script.language, $defaultScripts?.order ?? Object.keys(defaultScriptLanguages))
-    .map((l) => [defaultScriptLanguages[l], l])
-    .filter((x) => $defaultScripts?.hidden == undefined || !$defaultScripts.hidden.includes(x[1]))
-    .filter((x) => {
-    if (customUi?.settingsPanel?.metadata?.languages === undefined) {
-        return true;
-    }
-    return customUi.settingsPanel.metadata.languages.includes(x[1]);
-});
 const scriptKindOptions = [
     {
         value: 'script',
@@ -201,18 +182,9 @@ const scriptKindOptions = [
         Icon: Shuffle
     }
 ];
-let pathError = '';
-let loadingSave = false;
-let loadingDraft = false;
-$: {
-    ;
-    ['collab', 'path'].forEach((x) => {
-        if (searchParams.get(x)) {
-            searchParams.delete(x);
-        }
-    });
-}
-$: !disableHistoryChange && encodeScriptState(script);
+let pathError = $state('');
+let loadingSave = $state(false);
+let loadingDraft = $state(false);
 function encodeScriptState(script) {
     replaceStateFn('#' +
         encodeState({
@@ -403,8 +375,8 @@ async function editScript(stay, parentHash, deploymentMsg, triggersToDeploy) {
         if (triggersToDeploy) {
             await deployTriggers(triggersToDeploy, $workspaceStore, !!$userStore?.is_admin || !!$userStore?.is_super_admin, usedTriggerKinds, script.path, true);
         }
-        const { draft_triggers: _, ...newScript } = structuredClone(script);
-        savedScript = structuredClone(newScript);
+        const { draft_triggers: _, ...newScript } = structuredClone($state.snapshot(script));
+        savedScript = structuredClone($state.snapshot(newScript));
         setDraftTriggers([]);
         if (!disableHistoryChange) {
             history.replaceState(history.state, '', `/scripts/edit/${script.path}`);
@@ -414,11 +386,11 @@ async function editScript(stay, parentHash, deploymentMsg, triggersToDeploy) {
             sendUserToast('Deployed');
         }
         else {
-            dispatch('deploy', newHash);
+            onDeploy?.({ path: script.path, hash: newHash });
         }
     }
     catch (error) {
-        dispatch('deployError', error);
+        onDeployError?.({ path: script.path, error });
         sendUserToast(`Error while saving the script: ${error.body || error.message}`, true);
     }
     loadingSave = false;
@@ -466,6 +438,7 @@ async function saveDraft(forceSave = false) {
         catch (error) {
             sendUserToast(`Could not parse code, are you sure it is valid?`, true);
         }
+        let newHash = '';
         if (initialPath == '' || savedScript?.draft_only) {
             if (savedScript?.draft_only) {
                 await ScriptService.deleteScriptByPath({
@@ -485,7 +458,7 @@ async function saveDraft(forceSave = false) {
                     runnableKind: 'script'
                 });
             }
-            await ScriptService.createScript({
+            newHash = await ScriptService.createScript({
                 workspace: $workspaceStore,
                 requestBody: {
                     path: script.path,
@@ -529,12 +502,13 @@ async function saveDraft(forceSave = false) {
                 }
             }
         });
+        const clonedScript = structuredClone($state.snapshot(script));
         savedScript = {
             ...(initialPath == '' || savedScript?.draft_only
-                ? { ...structuredClone(script), draft_only: true }
+                ? { ...clonedScript, draft_only: true }
                 : savedScript),
             draft: {
-                ...structuredClone(script),
+                ...clonedScript,
                 draft_triggers: draftTriggers
             }
         };
@@ -542,14 +516,14 @@ async function saveDraft(forceSave = false) {
         if (initialPath == '' || (savedScript?.draft_only && script.path !== initialPath)) {
             savedAtNewPath = true;
             initialPath = script.path;
-            dispatch('saveInitial', script.path);
+            onSaveInitial?.({ path: script.path, hash: newHash });
         }
-        dispatch('saveDraft', { path: script.path, savedAtNewPath, script });
+        onSaveDraft?.({ path: script.path, savedAtNewPath, script });
         sendUserToast('Saved as draft');
     }
     catch (error) {
         sendUserToast(`Error while saving the script as a draft: ${error.body || error.message}`, true);
-        dispatch('saveDraftError', error);
+        onSaveDraftError?.({ path: script.path, error });
     }
     loadingDraft = false;
 }
@@ -597,7 +571,7 @@ function computeDropdownItems(initialPath, savedScript, diffDrawer) {
                     {
                         label: 'Exit & See details',
                         onClick: () => {
-                            dispatch('seeDetails', initialPath);
+                            onSeeDetails?.({ path: initialPath });
                         }
                     }
                 ]
@@ -616,9 +590,9 @@ function onKeyDown(event) {
             break;
     }
 }
-let path = undefined;
-let dirtyPath = false;
-let selectedTab = (() => {
+let path = $state(undefined);
+let dirtyPath = $state(false);
+let selectedTab = $state((() => {
     if (customUi?.settingsPanel?.disableMetadata !== true) {
         // first option: either no custom UI or metadata is enabled
         return 'metadata';
@@ -633,7 +607,7 @@ let selectedTab = (() => {
         return 'triggers';
     }
     return 'metadata';
-})();
+})());
 setContext('disableTooltips', customUi?.disableTooltips === true);
 function langToLanguage(lang) {
     if (lang == 'docker') {
@@ -682,10 +656,68 @@ function handleDeployTrigger(trigger) {
             newSavedDraftTrigers.length > 0 ? newSavedDraftTrigers : undefined;
     }
 }
+function onScriptLanguageTrigger(lang) {
+    if (lang == 'docker') {
+        if (isCloudHosted()) {
+            sendUserToast('You cannot use Docker scripts on the multi-tenant platform. Use a dedicated instance or self-host windmill instead.', true, [
+                {
+                    label: 'Learn more',
+                    callback: () => {
+                        window.open('https://www.windmill.dev/docs/advanced/docker', '_blank');
+                    }
+                }
+            ]);
+            return;
+        }
+        template = 'docker';
+    }
+    else if (lang == 'bunnative') {
+        template = 'bunnative';
+    }
+    else {
+        template = 'script';
+    }
+    let language = langToLanguage(lang);
+    //
+    initContent(language, script.kind, template);
+    script.language = language;
+}
+function onSummaryChange(value) {
+    if (initialPath == '' && value?.length > 0 && !dirtyPath) {
+        path?.setName(value
+            .toLowerCase()
+            .replace(/[^a-z0-9_]/g, '_')
+            .replace(/-+/g, '_')
+            .replace(/^-|-$/g, ''));
+    }
+}
+$effect(() => {
+    initialPath != '' && untrack(() => loadTriggers());
+});
+let langs = $derived(processLangs(script.language, $defaultScripts?.order ?? Object.keys(defaultScriptLanguages))
+    .map((l) => [defaultScriptLanguages[l], l])
+    .filter((x) => $defaultScripts?.hidden == undefined || !$defaultScripts.hidden.includes(x[1]))
+    .filter((x) => {
+    if (customUi?.settingsPanel?.metadata?.languages === undefined) {
+        return true;
+    }
+    return customUi.settingsPanel.metadata.languages.includes(x[1]);
+}));
+$effect(() => {
+    ;
+    ['collab', 'path'].forEach((x) => {
+        if (searchParams.get(x)) {
+            searchParams.delete(x);
+        }
+    });
+});
+$effect(() => {
+    !disableHistoryChange && untrack(() => encodeScriptState(script));
+});
 </script>
 
-<svelte:window on:keydown={onKeyDown} />
-<slot />
+<svelte:window onkeydown={onKeyDown} />
+{@render children?.()}
 
 <DeployOverrideConfirmationModal
 	bind:deployedBy
@@ -711,18 +743,28 @@ function handleDeployTrigger(trigger) {
 		bind:open={metadataOpen}
 		size={selectedTab === 'ui' || selectedTab === 'triggers' ? '1200px' : '800px'}
 	>
-		<DrawerContent noPadding title="Settings" on:close={() => (metadataOpen = false)}>
-			<!-- svelte-ignore a11y-autofocus -->
+		<DrawerContent
+			noPadding
+			title="Settings"
+			on:close={() => (metadataOpen = false)}
+			aiId="script-builder-settings"
+			aiDescription="Script builder settings"
+		>
+			<!-- svelte-ignore a11y_autofocus -->
 			<div class="flex flex-col h-full">
 				<Tabs bind:selected={selectedTab} wrapperClass="flex-none w-full">
 					{#if customUi?.settingsPanel?.disableMetadata !== true}
-						<Tab value="metadata">Metadata</Tab>
+						<Tab value="metadata" aiId="script-builder-metadata" aiDescription="Metadata settings">
+							Metadata
+						</Tab>
 					{/if}
 					{#if customUi?.settingsPanel?.disableRuntime !== true}
-						<Tab value="runtime">Runtime</Tab>
+						<Tab value="runtime" aiId="script-builder-runtime" aiDescription="Runtime settings">
+							Runtime
+						</Tab>
 					{/if}
 					{#if customUi?.settingsPanel?.disableGeneratedUi !== true}
-						<Tab value="ui">
+						<Tab value="ui" aiId="script-builder-ui" aiDescription="Generated UI settings">
 							Generated UI
 							<Tooltip
 								documentationLink="https://www.windmill.dev/docs/core_concepts/json_schema_and_parsing"
@@ -733,7 +775,7 @@ function handleDeployTrigger(trigger) {
 						</Tab>
 					{/if}
 					{#if customUi?.settingsPanel?.disableTriggers !== true}
-						<Tab value="triggers">
+						<Tab value="triggers" aiId="script-builder-triggers" aiDescription="Triggers settings">
 							Triggers
 							<Tooltip documentationLink="https://www.windmill.dev/docs/getting_started/triggers">
 								Configure how this script will be triggered.
@@ -741,12 +783,12 @@ function handleDeployTrigger(trigger) {
 						</Tab>
 					{/if}
 
-					<svelte:fragment slot="content">
+					{#snippet content()}
 						<div class="min-h-0 grow overflow-y-auto">
 							<TabContent value="metadata">
 								<div class="flex flex-col gap-8 px-4 py-2">
 									<Section label="Metadata">
-										<svelte:fragment slot="action">
+										{#snippet action()}
 											{#if customUi?.settingsPanel?.metadata?.disableMute !== true}
 												<div class="flex flex-row items-center gap-2">
 													<ErrorHandlerToggleButton
@@ -757,27 +799,19 @@ function handleDeployTrigger(trigger) {
 													/>
 												</div>
 											{/if}
-										</svelte:fragment>
+										{/snippet}
 										<div class="flex flex-col gap-4">
 											<Label label="Summary">
 												<MetadataGen
+													aiId="create-script-summary-input"
+													aiDescription="Summary / Title of the new script"
 													label="Summary"
 													bind:content={script.summary}
 													lang={script.language}
 													code={script.content}
 													promptConfigName="summary"
 													generateOnAppear
-													on:change={() => {
-														if (initialPath == '' && script.summary?.length > 0 && !dirtyPath) {
-															path?.setName(
-																script.summary
-																	.toLowerCase()
-																	.replace(/[^a-z0-9_]/g, '_')
-																	.replace(/-+/g, '_')
-																	.replace(/^-|-$/g, '')
-															)
-														}
-													}}
+													on:change={() => onSummaryChange(script.summary)}
 													elementProps={{
 														type: 'text',
 														placeholder: 'Short summary to be displayed when listed'
@@ -785,14 +819,14 @@ function handleDeployTrigger(trigger) {
 												/>
 											</Label>
 											<Label label="Path">
-												<svelte:fragment slot="header">
+												{#snippet header()}
 													<Tooltip
 														documentationLink="https://www.windmill.dev/docs/core_concepts/roles_and_permissions#path"
 													>
 														The unique identifier of the script in the workspace that defines
 														permissions
 													</Tooltip>
-												</svelte:fragment>
+												{/snippet}
 												<Path
 													bind:this={path}
 													bind:error={pathError}
@@ -816,11 +850,21 @@ function handleDeployTrigger(trigger) {
 													}}
 												/>
 											</Label>
+											{#if script.schema}
+												<div class="mt-3">
+													<AIFormSettings
+														bind:prompt={script.schema.prompt_for_ai as string | undefined}
+														type="script"
+													/>
+												</div>
+											{/if}
 										</div>
 									</Section>
 
 									<Section label="Language">
-										<svelte:fragment slot="action"><DefaultScripts /></svelte:fragment>
+										{#snippet action()}
+											<DefaultScripts />
+										{/snippet}
 										{#if lockedLanguage}
 											<div class="text-sm text-tertiary italic mb-2">
 												As a forked script, the language '{script.language}' cannot be modified.
@@ -836,55 +880,27 @@ function handleDeployTrigger(trigger) {
 													disablePopup={!enterpriseLangs.includes(lang) || !!$enterpriseLicense}
 												>
 													<Button
+														aiId={`create-script-language-button-${lang}`}
+														aiDescription={`Choose ${lang} as the language of the script`}
 														size="sm"
 														variant="border"
 														color={isPicked ? 'blue' : 'light'}
 														btnClasses={isPicked
 															? '!border-2 !bg-blue-50/75 dark:!bg-frost-900/75'
 															: 'm-[1px]'}
-														on:click={() => {
-															if (lang == 'docker') {
-																if (isCloudHosted()) {
-																	sendUserToast(
-																		'You cannot use Docker scripts on the multi-tenant platform. Use a dedicated instance or self-host windmill instead.',
-																		true,
-																		[
-																			{
-																				label: 'Learn more',
-																				callback: () => {
-																					window.open(
-																						'https://www.windmill.dev/docs/advanced/docker',
-																						'_blank'
-																					)
-																				}
-																			}
-																		]
-																	)
-																	return
-																}
-																template = 'docker'
-															} else if (lang == 'bunnative') {
-																template = 'bunnative'
-															} else {
-																template = 'script'
-															}
-															let language = langToLanguage(lang)
-															//
-															initContent(language, script.kind, template)
-															script.language = language
-														}}
+														on:click={() => onScriptLanguageTrigger(lang)}
 														disabled={lockedLanguage ||
 															(enterpriseLangs.includes(lang) && !$enterpriseLicense)}
 													>
 														<LanguageIcon {lang} />
 														<span class="ml-2 py-2 truncate">{label}</span>
-														{#if lang === 'ansible' || lang === 'nu'}
+														{#if lang === 'nu'}
 															<span class="text-tertiary !text-xs"> BETA </span>
 														{/if}
 													</Button>
-													<svelte:fragment slot="text"
-														>{label} is only available with an enterprise license</svelte:fragment
-													>
+													{#snippet text()}
+														{label} is only available with an enterprise license
+													{/snippet}
 												</Popover>
 											{/each}
 										</div>
@@ -892,14 +908,14 @@ function handleDeployTrigger(trigger) {
 
 									{#if customUi?.settingsPanel?.metadata?.disableScriptKind !== true}
 										<Section label="Script kind">
-											<svelte:fragment slot="header">
+											{#snippet header()}
 												<Tooltip
 													documentationLink="https://www.windmill.dev/docs/script_editor/script_kinds"
 												>
 													Tag this script's purpose within flows such that it is available as the
 													corresponding action.
 												</Tooltip>
-											</svelte:fragment>
+											{/snippet}
 											<ToggleButtonGroup
 												class="h-10"
 												selected={script.kind}
@@ -908,19 +924,20 @@ function handleDeployTrigger(trigger) {
 													script.kind = detail
 													initContent(script.language, detail, template)
 												}}
-												let:item
 											>
-												{#each scriptKindOptions as { value, title, desc, documentationLink, Icon }}
-													<ToggleButton
-														label={title}
-														{value}
-														tooltip={desc}
-														{documentationLink}
-														icon={Icon}
-														showTooltipIcon={Boolean(desc)}
-														{item}
-													/>
-												{/each}
+												{#snippet children({ item })}
+													{#each scriptKindOptions as { value, title, desc, documentationLink, Icon }}
+														<ToggleButton
+															label={title}
+															{value}
+															tooltip={desc}
+															{documentationLink}
+															icon={Icon}
+															showTooltipIcon={Boolean(desc)}
+															{item}
+														/>
+													{/each}
+												{/snippet}
 											</ToggleButtonGroup>
 										</Section>
 									{/if}
@@ -929,13 +946,13 @@ function handleDeployTrigger(trigger) {
 							<TabContent value="runtime">
 								<div class="flex flex-col gap-8 px-4 py-2">
 									<Section label="Concurrency limits" eeOnly>
-										<svelte:fragment slot="header">
+										{#snippet header()}
 											<Tooltip
 												documentationLink="https://www.windmill.dev/docs/core_concepts/concurrency_limits"
 											>
 												Allowed concurrency within a given timeframe
 											</Tooltip>
-										</svelte:fragment>
+										{/snippet}
 										<div class="flex flex-col gap-4">
 											<Label label="Max number of executions within the time window">
 												<div class="flex flex-row gap-2 max-w-sm">
@@ -963,7 +980,7 @@ function handleDeployTrigger(trigger) {
 												/>
 											</Label>
 											<Label label="Custom concurrency key (optional)">
-												<svelte:fragment slot="header">
+												{#snippet header()}
 													<Tooltip
 														documentationLink="https://www.windmill.dev/docs/core_concepts/concurrency_limits#custom-concurrency-key"
 													>
@@ -971,7 +988,7 @@ function handleDeployTrigger(trigger) {
 														using the variable `$workspace`. You can also use an argument's value
 														using `$args[name_of_arg]`</Tooltip
 													>
-												</svelte:fragment>
+												{/snippet}
 												<input
 													disabled={!$enterpriseLicense}
 													type="text"
@@ -983,24 +1000,24 @@ function handleDeployTrigger(trigger) {
 										</div>
 									</Section>
 									<Section label="Worker group tag (queue)">
-										<svelte:fragment slot="header">
+										{#snippet header()}
 											<Tooltip
 												documentationLink="https://www.windmill.dev/docs/core_concepts/worker_groups"
 											>
 												The script will be executed on a worker configured to listen to this worker
 												group tag (queue). For instance, you could setup an "highmem", or "gpu" tag.
 											</Tooltip>
-										</svelte:fragment>
+										{/snippet}
 										<WorkerTagPicker bind:tag={script.tag} />
 									</Section>
 									<Section label="Cache">
-										<svelte:fragment slot="header">
+										{#snippet header()}
 											<Tooltip
 												documentationLink="https://www.windmill.dev/docs/core_concepts/caching"
 											>
 												Cache the results for each possible inputs
 											</Tooltip>
-										</svelte:fragment>
+										{/snippet}
 										<div class="flex gap-2 shrink flex-col">
 											<Toggle
 												size="sm"
@@ -1027,13 +1044,13 @@ function handleDeployTrigger(trigger) {
 										</div>
 									</Section>
 									<Section label="Timeout">
-										<svelte:fragment slot="header">
+										{#snippet header()}
 											<Tooltip
 												documentationLink="https://www.windmill.dev/docs/script_editor/settings#timeout"
 											>
 												Add a custom timeout for this script
 											</Tooltip>
-										</svelte:fragment>
+										{/snippet}
 										<div class="flex gap-2 shrink flex-col">
 											<Toggle
 												size="sm"
@@ -1058,13 +1075,13 @@ function handleDeployTrigger(trigger) {
 										</div>
 									</Section>
 									<Section label="Perpetual script">
-										<svelte:fragment slot="header">
+										{#snippet header()}
 											<Tooltip
 												documentationLink="https://www.windmill.dev/docs/script_editor/perpetual_scripts"
 											>
 												Restart the script upon ending unless cancelled
 											</Tooltip>
-										</svelte:fragment>
+										{/snippet}
 										<div class="flex gap-2 shrink flex-col">
 											<Toggle
 												size="sm"
@@ -1110,7 +1127,7 @@ function handleDeployTrigger(trigger) {
 												</Alert>
 											</div>
 										{/if}
-										<svelte:fragment slot="header">
+										{#snippet header()}
 											<Tooltip
 												documentationLink="https://www.windmill.dev/docs/core_concepts/dedicated_workers"
 											>
@@ -1120,10 +1137,10 @@ function handleDeployTrigger(trigger) {
 												languages, the efficiency is already on par with deidcated workers since
 												they do not spawn a full runtime</Tooltip
 											>
-										</svelte:fragment>
+										{/snippet}
 									</Section>
 									<Section label="Delete after use">
-										<svelte:fragment slot="header">
+										{#snippet header()}
 											<Tooltip
 												documentationLink="https://www.windmill.dev/docs/script_editor/settings#delete-after-use"
 											>
@@ -1143,7 +1160,7 @@ function handleDeployTrigger(trigger) {
 													This option is only available on Windmill Enterprise Edition.
 												{/if}
 											</Tooltip>
-										</svelte:fragment>
+										{/snippet}
 										<div class="flex gap-2 shrink flex-col">
 											<Toggle
 												disabled={!$enterpriseLicense}
@@ -1179,14 +1196,14 @@ function handleDeployTrigger(trigger) {
 													right: 'Label as high priority'
 												}}
 											>
-												<svelte:fragment slot="right">
+												{#snippet right()}
 													<input
 														type="number"
 														class="!w-16 ml-4"
 														disabled={script.priority === undefined}
 														bind:value={script.priority}
-														on:focus
-														on:change={() => {
+														onfocus={bubble('focus')}
+														onchange={() => {
 															if (script.priority && script.priority > 100) {
 																script.priority = 100
 															} else if (script.priority && script.priority < 0) {
@@ -1194,9 +1211,9 @@ function handleDeployTrigger(trigger) {
 															}
 														}}
 													/>
-												</svelte:fragment>
+												{/snippet}
 											</Toggle>
-											<svelte:fragment slot="header">
+											{#snippet header()}
 												<!-- TODO: Add EE-only badge when we have it -->
 												<Tooltip
 													documentationLink="https://www.windmill.dev/docs/core_concepts/jobs#high-priority-jobs"
@@ -1206,11 +1223,11 @@ function handleDeployTrigger(trigger) {
 													{#if !$enterpriseLicense}This is a feature only available on enterprise
 														edition.{/if}
 												</Tooltip>
-											</svelte:fragment>
+											{/snippet}
 										</Section>
 									{/if}
 									<Section label="Runs visibility">
-										<svelte:fragment slot="header">
+										{#snippet header()}
 											<Tooltip
 												documentationLink="https://www.windmill.dev/docs/core_concepts/monitor_past_and_future_runs#invisible-runs"
 											>
@@ -1219,7 +1236,7 @@ function handleDeployTrigger(trigger) {
 												setting can be overridden when this script is run manually from the advanced
 												menu.
 											</Tooltip>
-										</svelte:fragment>
+										{/snippet}
 										<div class="flex gap-2 shrink flex-col">
 											<Toggle
 												size="sm"
@@ -1238,12 +1255,12 @@ function handleDeployTrigger(trigger) {
 										</div>
 									</Section>
 									<Section label="On behalf of last editor">
-										<svelte:fragment slot="header">
+										{#snippet header()}
 											<Tooltip>
 												When this option is enabled, the script will be run with the permissions of
 												the last editor.
 											</Tooltip>
-										</svelte:fragment>
+										{/snippet}
 										<div class="flex gap-2 shrink flex-col">
 											<Toggle
 												size="sm"
@@ -1263,13 +1280,13 @@ function handleDeployTrigger(trigger) {
 									</Section>
 									{#if !isCloudHosted()}
 										<Section label="Custom env variables">
-											<svelte:fragment slot="header">
+											{#snippet header()}
 												<Tooltip
 													documentationLink="https://www.windmill.dev/docs/script_editor/custom_environment_variables"
 												>
 													Additional static custom env variables to pass to the script.
 												</Tooltip>
-											</svelte:fragment>
+											{/snippet}
 											{#if script.envs && script.envs.length > 0}
 												<Alert type="warning" title="Not passed in previews" size="xs">
 													Static envs variables are not passed in preview but solely on deployed
@@ -1281,14 +1298,20 @@ function handleDeployTrigger(trigger) {
 													>Format is: `{'<KEY>=<VALUE>'}`</span
 												>
 												{#if Array.isArray(script.envs ?? [])}
-													{#each script.envs ?? [] as v, i}
+													{#each script.envs ?? [] as _v, i}
 														<div class="flex max-w-md mt-1 w-full items-center relative">
-															<input type="text" bind:value={v} placeholder="<KEY>=<VALUE>" />
+															{#if script.envs}
+																<input
+																	type="text"
+																	bind:value={script.envs[i]}
+																	placeholder="<KEY>=<VALUE>"
+																/>
+															{/if}
 															<button
 																transition:fade|local={{ duration: 50 }}
 																class="rounded-full p-1 bg-surface/60 duration-200 hover:bg-gray-200 absolute right-2"
 																aria-label="Clear"
-																on:click={() => {
+																onclick={() => {
 																	script.envs && script.envs.splice(i, 1)
 																	script.envs = script.envs
 																}}
@@ -1354,7 +1377,7 @@ function handleDeployTrigger(trigger) {
 								<!-- <ScriptSchedules {initialPath} schema={script.schema} schedule={scheduleStore} /> -->
 							</TabContent>
 						</div>
-					</svelte:fragment>
+					{/snippet}
 				</Tabs>
 			</div>
 		</DrawerContent>
@@ -1367,7 +1390,7 @@ function handleDeployTrigger(trigger) {
 					<div class="center-center">
 						<button
 							disabled={customUi?.topBar?.settings == false}
-							on:click={async () => {
+							onclick={async () => {
 								metadataOpen = true
 							}}
 						>
@@ -1407,7 +1430,7 @@ function handleDeployTrigger(trigger) {
 							<div>
 								{#if customUi?.topBar?.editablePath != false}
 									<button
-										on:click={async () => {
+										onclick={async () => {
 											metadataOpen = true
 										}}
 									>
@@ -1426,7 +1449,7 @@ function handleDeployTrigger(trigger) {
 								value={script.path}
 								size={script.path?.length || 50}
 								class="font-mono !text-xs !min-w-[96px] !max-w-[300px] !w-full !h-[28px] !my-0 !py-0 !border-l-0 !rounded-l-none !border-0 !shadow-none"
-								on:focus={({ currentTarget }) => {
+								onfocus={({ currentTarget }) => {
 									currentTarget.select()
 								}}
 							/>
@@ -1441,6 +1464,8 @@ function handleDeployTrigger(trigger) {
 				<div class="flex flex-row gap-x-1 lg:gap-x-2">
 					{#if customUi?.topBar?.settings != false}
 						<Button
+							aiId="script-builder-settings"
+							aiDescription="Script builder settings to configure metadata, runtime, triggers, and generated UI."
 							color="light"
 							variant="border"
 							size="xs"
@@ -1497,7 +1522,6 @@ function handleDeployTrigger(trigger) {
 			stablePathForCaptures={initialPath || fakeInitialPath}
 			bind:code={script.content}
 			lang={script.language}
-			{initialArgs}
 			kind={script.kind}
 			{template}
 			tag={script.tag}