windmill-components 1.623.1 → 1.642.0

package/package/components/ForkWorkspaceBanner.svelte

@@ -77,11 +77,11 @@ function forkAheadBehindMessage(changesAhead, changesBehind) {
 </script>
 
 {#if isFork}
-	<div class="w-full bg-blue-50 dark:bg-blue-900/20 border-b border-blue-200 dark:border-blue-800">
+	<div class="w-full bg-blue-50 dark:bg-blue-900 text-xs rounded-b-md max-w-7xl mx-auto">
 		<div class="px-4 py-2">
 			<div class="flex items-center justify-between">
 				<div class="flex items-center gap-3">
-					<GitFork class="w-4 h-4 text-blue-600 dark:text-blue-400" />
+					<GitFork class="w-4 h-4 text-accent" />
 					<div class="text-sm">
 						<span class="font-medium text-blue-900 dark:text-blue-100">
 							Fork of <b>{parentWorkspaceData?.name}</b> ({parentWorkspaceId})
@@ -97,17 +97,17 @@ function forkAheadBehindMessage(changesAhead, changesBehind) {
 					{:else if comparison}
 						<div class="flex items-center gap-4 text-xs">
 							{#if comparison.summary.total_diffs > 0}
-								<span>
+								<span class="text-blue-700 dark:text-blue-100">
 									{forkAheadBehindMessage(
 										comparison.summary.total_ahead,
-										comparison.summary.total_behind,
+										comparison.summary.total_behind
 									)}
-									<span class="font-semibold underline">{parentWorkspaceId}</span> over {comparison.summary
-										.total_diffs} items:
+									<span class="font-semibold underline">{parentWorkspaceId}</span> over {comparison
+										.summary.total_diffs} items:
 								</span>
 								<div class="flex items-center gap-2">
 									{#if comparison.summary.scripts_changed > 0}
-										<span class="text-blue-700 dark:text-blue-300">
+										<span class="text-blue-700 dark:text-blue-100">
 											{comparison.summary.scripts_changed} script{comparison.summary
 												.scripts_changed !== 1
 												? 's'
@@ -115,21 +115,21 @@ function forkAheadBehindMessage(changesAhead, changesBehind) {
 										</span>
 									{/if}
 									{#if comparison.summary.flows_changed > 0}
-										<span class="text-blue-700 dark:text-blue-300">
+										<span class="text-blue-700 dark:text-blue-100">
 											{comparison.summary.flows_changed} flow{comparison.summary.flows_changed !== 1
 												? 's'
 												: ''}
 										</span>
 									{/if}
 									{#if comparison.summary.apps_changed > 0}
-										<span class="text-blue-700 dark:text-blue-300">
+										<span class="text-blue-700 dark:text-blue-100">
 											{comparison.summary.apps_changed} app{comparison.summary.apps_changed !== 1
 												? 's'
 												: ''}
 										</span>
 									{/if}
 									{#if comparison.summary.resources_changed > 0}
-										<span class="text-blue-700 dark:text-blue-300">
+										<span class="text-blue-700 dark:text-blue-100">
 											{comparison.summary.resources_changed} resource{comparison.summary
 												.resources_changed !== 1
 												? 's'
@@ -137,13 +137,29 @@ function forkAheadBehindMessage(changesAhead, changesBehind) {
 										</span>
 									{/if}
 									{#if comparison.summary.variables_changed > 0}
-										<span class="text-blue-700 dark:text-blue-300">
+										<span class="text-blue-700 dark:text-blue-100">
 											{comparison.summary.variables_changed} variable{comparison.summary
 												.variables_changed !== 1
 												? 's'
 												: ''}
 										</span>
 									{/if}
+									{#if comparison.summary.resource_types_changed > 0}
+										<span class="text-blue-700 dark:text-blue-100">
+											{comparison.summary.resource_types_changed} resource type{comparison.summary
+												.resource_types_changed !== 1
+												? 's'
+												: ''}
+										</span>
+									{/if}
+									{#if comparison.summary.folders_changed > 0}
+										<span class="text-blue-700 dark:text-blue-100">
+											{comparison.summary.folders_changed} folder{comparison.summary
+												.folders_changed !== 1
+												? 's'
+												: ''}
+										</span>
+									{/if}
 								</div>
 
 								{#if comparison.summary.conflicts > 0}
@@ -158,9 +174,12 @@ function forkAheadBehindMessage(changesAhead, changesBehind) {
 									</div>
 								{/if}
 							{:else if comparison.skipped_comparison}
-								<span class="text-blue-600 dark:text-blue-400"> This fork was created before the addition of certain windmill features, and therefore the changes with its parent workspace cannot be displayed.</span>
+								<span class="text-blue-600 dark:text-blue-200">
+									This fork was created before the addition of certain windmill features, and
+									therefore the changes with its parent workspace cannot be displayed.</span
+								>
 							{:else}
-								<span class="text-blue-600 dark:text-blue-400"> Everything is up to date </span>
+								<span class="text-blue-600 dark:text-blue-200"> Everything is up to date </span>
 							{/if}
 						</div>
 					{/if}

package/package/components/GraphqlSchemaViewer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { BROWSER } from 'esm-env';
-import { editor as meditor } from 'monaco-editor';
+import { editor as meditor, KeyMod, KeyCode } from 'monaco-editor';
 import { onDestroy, onMount } from 'svelte';
 let divEl = null;
 let editor;
@@ -14,6 +14,13 @@ async function loadMonaco() {
         lineNumbers: 'off',
         minimap: { enabled: false }
     });
+    // In VSCode webview (iframe), clipboard operations need to use execCommand
+    // because the webview has restricted clipboard API access
+    if (window.parent !== window) {
+        editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyC, function () {
+            document.execCommand('copy');
+        });
+    }
 }
 onMount(async () => {
     if (BROWSER) {

package/package/components/HistoricInputs.svelte

@@ -2,14 +2,14 @@
 import { sendUserToast } from '../utils.js';
 import RunningJobSchemaPicker from './schema/RunningJobSchemaPicker.svelte';
 import { createEventDispatcher, onDestroy } from 'svelte';
-import JobsLoader from './runs/JobsLoader.svelte';
+import { useJobsLoader } from './runs/useJobsLoader.svelte';
 import { DataTable } from './table';
 import HistoricList from './HistoricList.svelte';
 import { Loader2 } from 'lucide-svelte';
-let { runnableId = undefined, runnableType = undefined, loading = $bindable(false), selected = $bindable(undefined), showAuthor = false, placement = 'top-end', limitPayloadSize = false, searchArgs = undefined } = $props();
+import { workspaceStore } from '../stores';
+let { runnableId = undefined, runnableType = undefined, selected = $bindable(undefined), showAuthor = false, placement = 'top-end', limitPayloadSize = false, searchArgs = undefined } = $props();
 let historicList = $state(undefined);
 const dispatch = createEventDispatcher();
-let jobs = $state([]);
 let hasMoreCurrentRuns = false;
 let page = $state(1);
 async function handleSelected(data) {
@@ -29,6 +29,9 @@ async function handleSelected(data) {
         });
     }
 }
+export function loading() {
+    return jobsLoader?.loading ?? false;
+}
 onDestroy(() => {
     resetSelected(false);
 });
@@ -66,40 +69,34 @@ function getJobKinds(runnableType) {
     }
     return '';
 }
+let jobsLoader = useJobsLoader(() => ({
+    filters: {
+        show_skipped: false,
+        path: runnableId,
+        status: 'running',
+        arg: searchArgs ? JSON.stringify(searchArgs) : ''
+    },
+    perPage: 5,
+    jobKinds: getJobKinds(runnableType),
+    syncQueuedRunsCount: false,
+    refreshRate: 10000,
+    currentWorkspace: $workspaceStore ?? '',
+    skip: !runnableId
+}));
+let jobs = $derived(jobsLoader?.jobs ?? []);
 </script>
 
 <svelte:window onkeydown={handleKeydown} />
 
-{#if runnableId}
-	<JobsLoader
-		bind:jobs
-		path={runnableId}
-		showSkipped={false}
-		jobKinds={getJobKinds(runnableType)}
-		user={null}
-		label={null}
-		folder={null}
-		concurrencyKey={null}
-		tag={null}
-		success="running"
-		argFilter={searchArgs ? JSON.stringify(searchArgs) : undefined}
-		bind:loading
-		syncQueuedRunsCount={false}
-		refreshRate={10000}
-		computeMinAndMax={undefined}
-		perPage={5}
-	/>
-{/if}
-
 <div class="h-full max-h-full min-h-0 w-full flex flex-col gap-2 relative">
 	<div class="grow-0" data-schema-picker>
 		<DataTable size="xs" bind:currentPage={page} hasMore={hasMoreCurrentRuns} tableFixed={true}>
-			{#if loading}
+			{#if jobsLoader?.loading}
 				<div class="text-primary absolute top-2 right-2">
 					<Loader2 class="animate-spin" size={14} />
 				</div>
 			{/if}
-			{#if jobs?.length > 0}
+			{#if jobs.length > 0}
 				<colgroup>
 					<col class="w-8" />
 					<col class="w-16" />
@@ -115,7 +112,7 @@ function getJobKinds(runnableType) {
 							on:select={(e) => handleSelected(e.detail)}
 						/>
 					{/each}
-					{#if jobs?.length == 5}
+					{#if jobs.length == 5}
 						<tr class="text-left text-primary text-xs w-full">
 							<td class="w-full px-2" colspan="3">limited to 5 runs</td>
 						</tr>

package/package/components/HistoricInputs.svelte.d.ts

@@ -2,7 +2,6 @@ import { type RunnableType } from '../gen/index.js';
 interface Props {
     runnableId?: string | undefined;
     runnableType?: RunnableType | undefined;
-    loading?: boolean;
     selected?: string | undefined;
     showAuthor?: boolean;
     placement?: 'bottom-start' | 'top-start' | 'bottom-end' | 'top-end';
@@ -27,8 +26,9 @@ declare const HistoricInputs: $$__sveltets_2_IsomorphicComponent<Props, {
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
+    loading: () => boolean;
     refresh: (clearCurrentRuns?: boolean) => void;
     resetSelected: (dispatchEvent?: boolean) => void;
-}, "selected" | "loading">;
+}, "selected">;
 type HistoricInputs = InstanceType<typeof HistoricInputs>;
 export default HistoricInputs;

package/package/components/IconedResourceType.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { FileText } from 'lucide-svelte'
+	import { FileText, FolderOpen } from 'lucide-svelte'
 	import { APP_TO_ICON_COMPONENT } from './icons'
 	/**
 	 * @typedef {Object} Props
@@ -11,6 +11,7 @@
 	 * @property {boolean} [center]
 	 * @property {boolean} [isSelected]
 	 * @property {any} [formatExtension]
+	 * @property {boolean} [isFileset]
 	 */
 
 	/** @type {Props} */
@@ -22,7 +23,8 @@
 		width = '24px',
 		center = false,
 		isSelected = false,
-		formatExtension = undefined
+		formatExtension = undefined,
+		isFileset = false
 	} = $props()
 
 	let iconComponent = $derived(
@@ -45,6 +47,10 @@
 		<span class={isSelected ? 'text-secondary' : 'text-secondary'}>
 			<SvelteComponent {height} {width} size={widthInPixels} />
 		</span>
+	{:else if isFileset}
+		<span class={isSelected ? 'text-secondary' : 'text-secondary grayscale'}>
+			<FolderOpen {height} {width} />
+		</span>
 	{:else if formatExtension}
 		<span class={isSelected ? 'text-secondary' : 'text-secondary grayscale'}>
 			<FileText {height} {width} />

package/package/components/IconedResourceType.svelte.d.ts

@@ -12,6 +12,7 @@ declare const IconedResourceType: import("svelte").Component<{
     center?: boolean | undefined;
     isSelected?: boolean | undefined;
     formatExtension?: any;
+    isFileset?: boolean | undefined;
 }, {}, "">;
 type Props = {
     name: any;
@@ -22,4 +23,5 @@ type Props = {
     center?: boolean | undefined;
     isSelected?: boolean | undefined;
     formatExtension?: any;
+    isFileset?: boolean | undefined;
 };

package/package/components/InfiniteList.svelte

@@ -7,7 +7,7 @@ let { loading = $bindable(false), items = $bindable(undefined), selectedItemId =
     bgSelected: '',
     bgHover: '',
     class: ''
-}, neverShowLoader = false, columns, extra_row, children, empty } = $props();
+}, neverShowLoader = false, preventXOverflow = false, customRow, columns, extra_row, children, empty } = $props();
 const perPage = 20;
 let hasMore = $state(false);
 let page = 1;
@@ -124,34 +124,41 @@ export async function setDeleteItemFn(fn) {
 	{rounded}
 	{noBorder}
 	{neverShowLoader}
+	{preventXOverflow}
 >
 	{@render columns?.()}
 
 	<tbody class="h-full w-full">
-		<Row
-			on:click={() => dispatch('select', 'extraRow')}
-			class={twMerge(
-				extraRowClasses.class,
-				selectedItemId === 'extraRow' ? extraRowClasses.bgSelected : extraRowClasses.bgHover,
-				'cursor-pointer rounded-md'
-			)}
-			on:hover={(e) => (hovered = e.detail ? 'extraRow' : undefined)}
-		>
-			{@render extra_row?.({ hover: hovered === 'extraRow' })}
-		</Row>
-		{#each items ?? [] as item, index}
-			{@const hover = item.id === hovered}
+		{#if extra_row}
 			<Row
-				on:click={() => dispatch('select', item)}
+				on:click={() => dispatch('select', 'extraRow')}
 				class={twMerge(
-					selectedItemId === item.id ? 'bg-surface-selected' : 'hover:bg-surface-hover',
-					'cursor-pointer rounded-md',
-					item.isNew && index === 0 ? 'animate-slideIn' : 'group'
+					extraRowClasses.class,
+					selectedItemId === 'extraRow' ? extraRowClasses.bgSelected : extraRowClasses.bgHover,
+					'cursor-pointer rounded-md'
 				)}
-				on:hover={(e) => (hovered = e.detail ? item.id : undefined)}
+				on:hover={(e) => (hovered = e.detail ? 'extraRow' : undefined)}
 			>
-				{@render children?.({ item, hover })}
+				{@render extra_row?.({ hover: hovered === 'extraRow' })}
 			</Row>
+		{/if}
+		{#each items ?? [] as item, index}
+			{@const hover = item.id === hovered}
+			{#if customRow}
+				{@render customRow?.({ item, hover })}
+			{:else}
+				<Row
+					on:click={() => dispatch('select', item)}
+					class={twMerge(
+						selectedItemId === item.id ? 'bg-surface-selected' : 'hover:bg-surface-hover',
+						'cursor-pointer rounded-md',
+						item.isNew && index === 0 ? 'animate-slideIn' : 'group'
+					)}
+					on:hover={(e) => (hovered = e.detail ? item.id : undefined)}
+				>
+					{@render children?.({ item, hover })}
+				</Row>
+			{/if}
 		{/each}
 	</tbody>
 

package/package/components/InfiniteList.svelte.d.ts

@@ -12,6 +12,8 @@ interface Props {
         class: string;
     };
     neverShowLoader?: boolean;
+    preventXOverflow?: boolean;
+    customRow?: import('svelte').Snippet<[any]>;
     columns?: import('svelte').Snippet;
     extra_row?: import('svelte').Snippet<[any]>;
     children?: import('svelte').Snippet<[any]>;

package/package/components/InputError.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">import { slide } from 'svelte/transition';
+let { error } = $props();
+</script>
+
+{#if error}
+	<div transition:slide={{ duration: 150 }} class="text-red-600 dark:text-red-400 text-xs mt-1">
+		{error}
+	</div>
+{/if}

package/package/components/InputError.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    error: string;
+}
+declare const InputError: import("svelte").Component<Props, {}, "">;
+type InputError = ReturnType<typeof InputError>;
+export default InputError;

package/package/components/InputTransformForm.svelte

@@ -8,7 +8,7 @@
 	])
 </script>
 
-<script lang="ts">import { createEventDispatcher, getContext, untrack } from 'svelte';
+<script lang="ts">import { createEventDispatcher, getContext, onDestroy, untrack } from 'svelte';
 import { computeShow } from '../utils';
 import ArgInput from './ArgInput.svelte';
 import FieldHeader from './FieldHeader.svelte';
@@ -31,10 +31,9 @@ import { deepEqual } from 'fast-equals';
 import S3ArrayHelperButton from './S3ArrayHelperButton.svelte';
 import { inputBorderClass } from './text_input/TextInput.svelte';
 import FakeMonacoPlaceHolder from './FakeMonacoPlaceHolder.svelte';
-let { schema = $bindable(), arg = $bindable(), argName = $bindable(), headerTooltip = undefined, headerTooltipIconClass = '', HeaderTooltipIcon = InfoIcon, extraLib = $bindable('missing extraLib'), inputCheck = $bindable(true), previousModuleId, pickForField = $bindable(undefined), variableEditor = undefined, itemPicker = undefined, noDynamicToggle = false, argExtra = {}, pickableProperties = undefined, enableAi = false, hideHelpButton = false, class: className = '', editor = $bindable(undefined), otherArgs = {}, helperScript = undefined, isAgentTool = false, s3StorageConfigured = true, chatInputEnabled = false } = $props();
+let { schema = $bindable(), arg = $bindable(), argName = $bindable(), headerTooltip = undefined, headerTooltipIconClass = '', HeaderTooltipIcon = InfoIcon, extraLib = $bindable('missing extraLib'), inputCheck = $bindable(true), previousModuleId, pickForField = $bindable(undefined), variableEditor = undefined, itemPicker = undefined, noDynamicToggle = false, argExtra = {}, pickableProperties = undefined, enableAi = false, hideHelpButton = false, class: className = '', editor = $bindable(undefined), otherArgs = {}, helperScript = undefined, isAgentTool = false, allowedAiTransforms = isAgentTool ? undefined : [], s3StorageConfigured = true, chatInputEnabled = false } = $props();
 let monaco = $state(undefined);
 let monacoTemplate = $state(undefined);
-let focusedPrev = false;
 let hidden = $state(false);
 const variableMatch = (value) => value.match(/^variable\('([^']+)'\)$/);
 const resourceMatch = (value) => value.match(/^resource\('([^']+)'\)$/);
@@ -44,8 +43,10 @@ $effect(() => {
 });
 const { shouldUpdatePropertyType, exprsToSet } = getContext('FlowCopilotContext') || {};
 const propPickerWrapperContext = getContext('PropPickerWrapper');
-const { inputMatches, focusProp, propPickerConfig, clearFocus } = propPickerWrapperContext ?? {};
+const { inputMatches, connectProp: focusProp, propPickerConfig, clearConnect: clearFocus, exprBeingEdited } = propPickerWrapperContext ?? {};
 let inputCat = $derived(computeInputCat(schema?.properties?.[argName]?.type, schema?.properties?.[argName]?.format, schema?.properties?.[argName]?.items?.type, schema?.properties?.[argName]?.enum, schema?.properties?.[argName]?.contentEncoding));
+// Whether this specific field is allowed to use AI transforms
+let fieldAllowsAi = $derived(allowedAiTransforms === undefined || allowedAiTransforms.includes(argName));
 let propertyType = $state(getPropertyType(arg));
 function setExpr() {
     const newArg = $exprsToSet?.[argName];
@@ -74,7 +75,7 @@ function updatePropertyType() {
 }
 function getPropertyType(arg) {
     // For agent tools, if static with undefined/empty value, treat as 'ai', meaning the field will be filled by the AI agent dynamically.
-    if (isAgentTool &&
+    if (fieldAllowsAi &&
         ((arg?.type === 'static' && arg?.value === undefined) || arg?.type === 'ai')) {
         if (arg?.type === 'static') {
             arg.type = 'ai';
@@ -191,7 +192,7 @@ async function switchToJsAndConnect(onPath) {
     // Wait for the component to re-render and Monaco to be available
     await tick();
     // Activate connect mode
-    focusProp?.(argName, 'connect', (path) => {
+    focusProp?.(argName, (path) => {
         onPath(path);
         return true;
     });
@@ -273,6 +274,21 @@ function handleFieldVisibility(schema, arg, otherArgs) {
 function onFocus() {
     focused = true;
 }
+function updatePropsBeingEdited(focused) {
+    let newPropsBeingEdited = [...$exprBeingEdited];
+    if (focused) {
+        newPropsBeingEdited.push(argName);
+    }
+    else {
+        newPropsBeingEdited = newPropsBeingEdited.filter((p) => p !== argName);
+    }
+    if (!deepEqual(newPropsBeingEdited, $exprBeingEdited)) {
+        exprBeingEdited.set(newPropsBeingEdited);
+    }
+}
+onDestroy(() => {
+    updatePropsBeingEdited(false);
+});
 let prevArg = undefined;
 function onArgChange() {
     const newArg = { arg, propertyType, inputCat };
@@ -299,12 +315,6 @@ function setDefaultCode() {
         monacoTemplate?.setCode(schema.properties?.[argName]?.default);
     }
 }
-function updateFocused(newFocused) {
-    if (focusedPrev && !newFocused && inputMatches) {
-        $inputMatches = undefined;
-    }
-    focusedPrev = focused;
-}
 let resourceTypes = $state(undefined);
 async function loadResourceTypes() {
     resourceTypes = await getResourceTypes();
@@ -325,11 +335,6 @@ $effect(() => {
     arg?.expr;
     inputCat && propertyType && arg && untrack(() => onArgChange());
 });
-$effect(() => {
-    ;
-    [focused];
-    untrack(() => updateFocused(focused));
-});
 $effect(() => {
     schema?.properties?.[argName]?.default && untrack(() => setDefaultCode());
 });
@@ -340,7 +345,7 @@ $effect.pre(() => {
     JSON.stringify(otherArgs);
     untrack(() => handleFieldVisibility(schema, arg, otherArgs));
 });
-let connecting = $derived($propPickerConfig?.propName == argName && $propPickerConfig?.insertionMode == 'connect');
+let connecting = $derived($propPickerConfig?.propName == argName);
 let shouldShowS3ArrayHelper = $derived(inputCat === 'list' &&
     ['s3object', 's3_object'].includes(schema?.properties?.[argName]?.items?.resourceType));
 let suggestion = $state();
@@ -419,13 +424,10 @@ $effect(() => {
 							id="flow-editor-plug"
 							{connecting}
 							on:click={() => {
-								if (
-									$propPickerConfig?.propName == argName &&
-									$propPickerConfig?.insertionMode == 'connect'
-								) {
+								if ($propPickerConfig?.propName == argName) {
 									clearFocus()
 								} else {
-									focusProp?.(argName, 'connect', (path) => {
+									focusProp?.(argName, (path) => {
 										connectProperty(path)
 										dispatch('change', { argName })
 										return true
@@ -501,7 +503,7 @@ $effect(() => {
 							}}
 						>
 							{#snippet children({ item })}
-								{#if isAgentTool}
+								{#if fieldAllowsAi}
 									<ToggleButton
 										small
 										label="AI"
@@ -562,13 +564,6 @@ $effect(() => {
 
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div class="relative w-full" onkeyup={handleKeyUp}>
-			<!-- {#if $propPickerConfig?.propName == argName && $propPickerConfig?.insertionMode == 'connect'}
-				<span
-					class={'text-white  z-50 px-1 text-2xs py-0.5 font-bold rounded-t-sm w-fit absolute top-0 right-0 bg-blue-500'}
-				>
-					Connect input &rightarrow;
-				</span>
-			{/if} -->
 			<!-- {inputCat}
 			{propertyType} -->
 			<div class="relative flex flex-row items-top gap-1 justify-between">
@@ -596,8 +591,8 @@ $effect(() => {
 							<div
 								class="text-sm text-tertiary italic p-3 bg-surface-secondary rounded-md border border-gray-200"
 							>
-								<span class="flex items-center gap-2">
-									<InfoIcon size={16} />
+								<span class="flex items-center gap-2 text-xs">
+									<InfoIcon size={13} />
 									This field will be filled by the AI agent dynamically
 								</span>
 							</div>
@@ -680,7 +675,11 @@ $effect(() => {
 								otherArgs={Object.fromEntries(
 									Object.entries(otherArgs).map(([key, transform]) => [
 										key,
-										transform?.type === 'static' ? transform.value : transform?.expr
+										transform?.type === 'static'
+											? transform.value
+											: transform?.type === 'javascript'
+												? transform.expr
+												: undefined
 									])
 								)}
 							>
@@ -689,12 +688,14 @@ $effect(() => {
 										<S3ArrayHelperButton
 											{connecting}
 											onClick={() =>
-												switchToJsAndConnect((path) => appendPathToArrayExpr(arg.expr, path))}
+												switchToJsAndConnect((path) =>
+													appendPathToArrayExpr(arg?.type === 'javascript' ? arg.expr : '', path)
+												)}
 										/>
 									{/if}
 								{/snippet}
 							</ArgInput>
-						{:else if arg.expr != undefined}
+						{:else if arg?.type === 'javascript' && arg.expr != undefined}
 							<div
 								class={`bg-surface-input rounded-md flex flex-col pl-2 overflow-auto ${inputBorderClass({ forceFocus: focused })}`}
 							>
@@ -707,8 +708,14 @@ $effect(() => {
 									shouldBindKey={false}
 									renderLineHighlight="none"
 									hideLineNumbers
-									on:focus={() => (focused = true)}
-									on:blur={() => (focused = false)}
+									on:focus={() => {
+										focused = true
+										updatePropsBeingEdited(true)
+									}}
+									on:blur={() => {
+										focused = false
+										updatePropsBeingEdited(false)
+									}}
 									on:change={() => {
 										dispatch('change', { argName, arg })
 									}}
@@ -723,7 +730,7 @@ $effect(() => {
 									class="mt-2"
 									{connecting}
 									onClick={() =>
-										focusProp?.(argName, 'connect', (path) => {
+										focusProp?.(argName, (path) => {
 											appendPathToArrayExpr(arg.expr, path)
 											return true
 										})}

package/package/components/InputTransformForm.svelte.d.ts

@@ -31,6 +31,7 @@ interface Props {
     otherArgs?: Record<string, InputTransform>;
     helperScript?: DynamicInputTypes.HelperScript | undefined;
     isAgentTool?: boolean;
+    allowedAiTransforms?: string[] | undefined;
     s3StorageConfigured?: boolean;
     chatInputEnabled?: boolean;
 }

package/package/components/InputTransformSchemaForm.svelte

@@ -9,7 +9,7 @@ import ItemPicker from './ItemPicker.svelte';
 import VariableEditor from './VariableEditor.svelte';
 import { Plus } from 'lucide-svelte';
 import ResizeTransitionWrapper from './common/ResizeTransitionWrapper.svelte';
-let { schema = $bindable(), args = $bindable({}), isValid = $bindable(true), extraLib = $bindable('missing extraLib'), previousModuleId = undefined, filter = undefined, noDynamicToggle = false, pickableProperties = undefined, enableAi = false, class: clazz = '', helperScript = undefined, isAgentTool = false, chatInputEnabled = false } = $props();
+let { schema = $bindable(), args = $bindable({}), isValid = $bindable(true), extraLib = $bindable('missing extraLib'), previousModuleId = undefined, filter = undefined, noDynamicToggle = false, pickableProperties = undefined, enableAi = false, class: clazz = '', helperScript = undefined, isAgentTool = false, allowedAiTransforms = isAgentTool ? undefined : [], chatInputEnabled = false } = $props();
 let inputCheck = $state({});
 $effect(() => {
     isValid = allTrue(inputCheck) ?? false;
@@ -98,6 +98,7 @@ $effect(() => {
 						{enableAi}
 						{helperScript}
 						{isAgentTool}
+						{allowedAiTransforms}
 						{s3StorageConfigured}
 						{chatInputEnabled}
 						otherArgs={Object.fromEntries(

package/package/components/InputTransformSchemaForm.svelte.d.ts

@@ -17,6 +17,7 @@ interface Props {
     class?: string;
     helperScript?: DynamicInputTypes.HelperScript;
     isAgentTool?: boolean;
+    allowedAiTransforms?: string[] | undefined;
     chatInputEnabled?: boolean;
 }
 declare const InputTransformSchemaForm: import("svelte").Component<Props, {