From 49ee4d06589bdb51840d31fae723a8f75300d5e6 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Mon, 23 Dec 2024 14:50:05 +0100
Subject: [PATCH 01/82] Add wip work

---
 .../src/components/ParameterInputFull.vue     | 88 ++++++++++++++-----
 1 file changed, 66 insertions(+), 22 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 332011b9ea743..273a1d914ce07 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -53,6 +53,20 @@ const focused = ref(false);
 const menuExpanded = ref(false);
 const forceShowExpression = ref(false);
 
+const hasContentOverride = ref(false);
+const overrideContent = computed(() =>
+	/*props.parameter.overrideField === 'fromAI'*/ true
+		? /*getOverride('fromAi')*/ {
+				overridePlaceholder: 'Defined automatically by the model',
+				icon: 'plus',
+				output: '$fromAI({key}, {value}, {description})',
+				extraProps: {
+					description: 'Description of how the model should define this value',
+				},
+			}
+		: null,
+);
+
 const ndvStore = useNDVStore();
 
 const node = computed(() => ndvStore.activeNode);
@@ -232,28 +246,53 @@ watch(
 			@drop="onDrop"
 		>
 			<template #default="{ droppable, activeDrop }">
-				<ParameterInputWrapper
-					:parameter="parameter"
-					:model-value="value"
-					:path="path"
-					:is-read-only="isReadOnly"
-					:is-assignment="isAssignment"
-					:rows="rows"
-					:droppable="droppable"
-					:active-drop="activeDrop"
-					:force-show-expression="forceShowExpression"
-					:hint="hint"
-					:hide-hint="hideHint"
-					:hide-issues="hideIssues"
-					:label="label"
-					:event-bus="eventBus"
-					input-size="small"
-					@update="valueChanged"
-					@text-input="onTextInput"
-					@focus="onFocus"
-					@blur="onBlur"
-					@drop="onDrop"
-				/>
+				<div v-if="hasContentOverride && overrideContent" class="parameter-input">
+					{{ overrideContent.overridePlaceholder }}
+					<N8nIconButton
+						type="secondary"
+						icon="xmark"
+						@click="
+							() => {
+								hasContentOverride = false;
+							}
+						"
+					/>
+				</div>
+				<div v-else :class="$style.inputOverrideWrapper">
+					<ParameterInputWrapper
+						:parameter="parameter"
+						:model-value="value"
+						:path="path"
+						:is-read-only="isReadOnly"
+						:is-assignment="isAssignment"
+						:rows="rows"
+						:droppable="droppable"
+						:active-drop="activeDrop"
+						:force-show-expression="forceShowExpression"
+						:hint="hint"
+						:hide-hint="hideHint"
+						:hide-issues="hideIssues"
+						:label="label"
+						:event-bus="eventBus"
+						input-size="small"
+						@update="valueChanged"
+						@text-input="onTextInput"
+						@focus="onFocus"
+						@blur="onBlur"
+						@drop="onDrop"
+					/>
+					<N8nIconButton
+						v-if="overrideContent"
+						type="tertiary"
+						:icon="overrideContent.icon"
+						@click="
+							() => {
+								hasContentOverride = true;
+								/*valueChanged({ name: props.path, value: formatOverride() });*/
+							}
+						"
+					/>
+				</div>
 			</template>
 		</DraggableTarget>
 		<div
@@ -274,6 +313,7 @@ watch(
 			/>
 		</div>
 	</N8nInputLabel>
+	<!-- badges to add extra fields from overrides go here -->
 </template>
 
 <style lang="scss" module>
@@ -287,6 +327,10 @@ watch(
 	}
 }
 
+.inputOverrideWrapper {
+	display: flex;
+}
+
 .options {
 	position: absolute;
 	bottom: -22px;

From 32a11045d0a2c70a55c6ad39be9fb7af29affed3 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Fri, 27 Dec 2024 12:19:14 +0100
Subject: [PATCH 02/82] wip commit

---
 .../src/components/ParameterInputFull.vue     | 105 ++++++++++++++----
 .../src/components/ParameterInputWrapper.vue  |   1 +
 2 files changed, 86 insertions(+), 20 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 273a1d914ce07..26cc123b2c556 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -53,19 +53,66 @@ const focused = ref(false);
 const menuExpanded = ref(false);
 const forceShowExpression = ref(false);
 
-const hasContentOverride = ref(false);
-const overrideContent = computed(() =>
-	/*props.parameter.overrideField === 'fromAI'*/ true
-		? /*getOverride('fromAi')*/ {
-				overridePlaceholder: 'Defined automatically by the model',
-				icon: 'plus',
-				output: '$fromAI({key}, {value}, {description})',
-				extraProps: {
-					description: 'Description of how the model should define this value',
-				},
-			}
-		: null,
+const fromAiOverride = {
+	overridePlaceholder: 'Defined automatically by the model',
+	icon: 'plus',
+	output: '={{ [marker] $fromAI([key], [type], [default], [description]) }}',
+	providers: {
+		marker: '/* n8n-auto-generated-override */',
+		key: (props: Props) => props.parameter.name, // todo - need to check these
+		type: (props: Props) => 'string', // todo - infer boolean, number and other matching types
+	},
+	extraProps: {
+		description: {
+			default: '',
+			placeholder: 'Description of how the model should define this value',
+		},
+	},
+};
+
+function buildValueFromOverride(
+	providedExtraProps: (typeof fromAiOverride)['extraProps'], // todo generic-ify
+	includeMarker: boolean,
+) {
+	const {
+		providers: { marker, key, type },
+		extraProps,
+	} = fromAiOverride;
+	return `={{ ${includeMarker ? marker : ''} $fromAI('${key(props)}', '${providedExtraProps.description.default ?? extraProps.description}', '${type(props)}') }}`;
+}
+
+function isOverrideValue(s: string) {
+	return s.startsWith('={{ /* n8n-auto-generated-override */ $fromAI(');
+}
+
+function parseOverrides(s: string) {
+	/*
+		Approaches:
+		- Smart and boring: Reuse packages/core/src/CreateNodeAsTool.ts , unclear where to move it
+		- Fun and dangerous: See below
+	*/
+	if (!isOverrideValue(s)) return null;
+
+	const fromAI = (...args: unknown[]) => args;
+	const fns = `const $fromAI = ${fromAI}; const $fromAi = ${fromAI}; const $fromai = ${fromAI};`;
+	const cursor = '={{ /* n8n-auto-generated-override */ $fromAI('.length;
+	const end = '}}'.length;
+	// `eval?.` is an indirect evaluation, outside of local scope
+	const params: unknown[] = eval?.(`${fns} ${s.slice(cursor, -end)}`) ?? [];
+	console.log(fns, params);
+	return {
+		key: params[0] ?? '',
+		description: params[1] ?? '',
+		type: params[2] ?? undefined,
+		// todo - parse the string to get the values
+	};
+}
+
+const isContentOverride = computed(() => isOverrideValue(props.value?.toString() ?? ''));
+const canBeContentOverride = computed(
+	() => node.value?.type?.endsWith('Tool') && props.parameter.type !== 'options',
 );
+// const canBeContentOverride = computed(() => getNodeTypeDescription().codex?.ai?.subcategories.contains('Tool'));
 
 const ndvStore = useNDVStore();
 
@@ -217,7 +264,7 @@ watch(
 
 <template>
 	<N8nInputLabel
-		:class="[$style.wrapper]"
+		:class="[$style.wrapper, { [$style.wrapperFlex]: canBeContentOverride }]"
 		:label="hideLabel ? '' : i18n.nodeText().inputLabelDisplayName(parameter, path)"
 		:tooltip-text="hideLabel ? '' : i18n.nodeText().inputLabelDescription(parameter, path)"
 		:show-tooltip="focused"
@@ -246,14 +293,18 @@ watch(
 			@drop="onDrop"
 		>
 			<template #default="{ droppable, activeDrop }">
-				<div v-if="hasContentOverride && overrideContent" class="parameter-input">
-					{{ overrideContent.overridePlaceholder }}
+				<div v-if="canBeContentOverride && isContentOverride" :class="$style.parameterInput">
+					<ElInput size="small" disabled="true" :placeholder="fromAiOverride.overridePlaceholder" />
 					<N8nIconButton
 						type="secondary"
 						icon="xmark"
 						@click="
 							() => {
-								hasContentOverride = false;
+								valueChanged({
+									node: node?.name,
+									name: props.path,
+									value: buildValueFromOverride(fromAiOverride.extraProps, false),
+								});
 							}
 						"
 					/>
@@ -282,13 +333,15 @@ watch(
 						@drop="onDrop"
 					/>
 					<N8nIconButton
-						v-if="overrideContent"
+						v-if="canBeContentOverride"
 						type="tertiary"
-						:icon="overrideContent.icon"
+						:icon="fromAiOverride.icon"
 						@click="
 							() => {
-								hasContentOverride = true;
-								/*valueChanged({ name: props.path, value: formatOverride() });*/
+								valueChanged({
+									name: props.path,
+									value: buildValueFromOverride(fromAiOverride.extraProps, true),
+								});
 							}
 						"
 					/>
@@ -327,8 +380,20 @@ watch(
 	}
 }
 
+.wrapperFlex {
+	display: flex;
+}
+
 .inputOverrideWrapper {
 	display: flex;
+	flex-grow: 1;
+}
+
+.parameterInput {
+	display: flex;
+	flex-direction: row;
+	flex-grow: 1;
+	gap: var(--spacing-4xs);
 }
 
 .options {
diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue
index 93534fede9db5..b3516d1e3dc0b 100644
--- a/packages/editor-ui/src/components/ParameterInputWrapper.vue
+++ b/packages/editor-ui/src/components/ParameterInputWrapper.vue
@@ -246,6 +246,7 @@ function onTextInput(parameterData: IUpdateInformation) {
 .parameterInput {
 	display: flex;
 	flex-direction: column;
+	flex-grow: 1;
 	gap: var(--spacing-4xs);
 }
 

From bd0ad0a6fe2333afc0f0c0eb6dc327f1a48ad1c6 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Thu, 2 Jan 2025 16:32:21 +0100
Subject: [PATCH 03/82] wip commit

---
 .../editor-ui/src/components/AiStarsIcon.vue  |  21 +++
 .../src/components/ParameterInput.vue         |  25 +++-
 .../src/components/ParameterInputFull.vue     | 137 +++++++++++++-----
 .../src/components/ParameterInputWrapper.vue  |   6 +-
 4 files changed, 151 insertions(+), 38 deletions(-)
 create mode 100644 packages/editor-ui/src/components/AiStarsIcon.vue

diff --git a/packages/editor-ui/src/components/AiStarsIcon.vue b/packages/editor-ui/src/components/AiStarsIcon.vue
new file mode 100644
index 0000000000000..a2dd54c360b93
--- /dev/null
+++ b/packages/editor-ui/src/components/AiStarsIcon.vue
@@ -0,0 +1,21 @@
+<script lang="ts">
+export default {
+	name: 'AiStarsIcon',
+};
+</script>
+
+<template>
+	<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<g id="NodeIcon">
+			<path
+				id="Union"
+				fill-rule="evenodd"
+				clip-rule="evenodd"
+				d="M15.7982 7.80784L13.92 7.20243C12.7186 6.80602 12.0148 5.83386 11.6844 4.61226L10.8579 0.586096C10.8363 0.506544 10.7837 0.400024 10.6219 0.400024C10.4857 0.400024 10.4075 0.506544 10.386 0.586096L9.55943 4.61361C9.22773 5.83521 8.52525 6.80737 7.32387 7.20378L5.44562 7.80919C5.18 7.89548 5.17595 8.27032 5.44023 8.36066L7.33196 9.01191C8.52929 9.40968 9.22773 10.3805 9.55943 11.5967L10.3873 15.5784C10.4089 15.6579 10.4534 15.8008 10.6233 15.8008C10.7991 15.8008 10.8362 15.6634 10.858 15.5831L10.8592 15.5784L11.6871 11.5967C12.0188 10.3791 12.7173 9.40833 13.9146 9.01191L15.8063 8.36066C16.0679 8.26897 16.0639 7.89413 15.7982 7.80784ZM5.04114 11.3108C3.92815 10.9434 3.81743 10.5296 3.63184 9.83597L3.62672 9.81687L3.15615 8.16649C3.12784 8.05997 2.85008 8.05997 2.82041 8.16649L2.50085 9.69147C2.31074 10.394 1.90623 10.9522 1.21588 11.18L0.11563 11.6574C-0.0367335 11.7072 -0.0394302 11.923 0.112933 11.9742L1.22127 12.3666C1.90893 12.5945 2.31074 13.1527 2.5022 13.8525L2.82176 15.3114C2.85142 15.4179 3.12784 15.4179 3.15615 15.3114L3.53099 13.8592C3.72111 13.1554 4.01235 12.5958 4.94675 12.3666L5.98768 11.9742C6.14004 11.9216 6.13869 11.7059 5.98498 11.656L5.04114 11.3108ZM5.33019 0.812949C5.36674 0.661849 5.58158 0.659434 5.61894 0.811355L5.61899 0.811582L6.02856 2.50239C6.08442 2.69624 6.23624 2.8465 6.43132 2.89951L7.47286 3.18013C7.61383 3.2197 7.61829 3.41714 7.48035 3.46394L7.48015 3.46401L6.38799 3.83076C6.21241 3.88968 6.07619 4.03027 6.02153 4.20719L5.61894 5.77311L5.61884 5.77349C5.58095 5.92613 5.36829 5.91987 5.33166 5.77336L4.94237 4.21215C4.88888 4.03513 4.75378 3.89336 4.57956 3.83328L3.48805 3.4555C3.34919 3.40591 3.36033 3.20859 3.50031 3.17175L3.50054 3.17169L4.53472 2.90337C4.73486 2.85153 4.89134 2.69755 4.94463 2.49805L5.33019 0.812949Z"
+				fill="#C3C9D5"
+			/>
+		</g>
+	</svg>
+</template>
+
+<style lang="scss"></style>
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index 1a5740979d6c6..0d70116bce10c 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -447,8 +447,14 @@ const parameterInputClasses = computed(() => {
 	return classes;
 });
 
+const isNormalBoolParameter = computed(
+	() => props.parameter.type === 'boolean' && !props.droppable,
+);
+
 const parameterInputWrapperStyle = computed(() => {
 	let deductWidth = 0;
+	let width;
+
 	const styles = {
 		width: '100%',
 	};
@@ -459,6 +465,10 @@ const parameterInputWrapperStyle = computed(() => {
 		deductWidth += 20;
 	}
 
+	if (isNormalBoolParameter.value) {
+		deductWidth += 30;
+	}
+
 	if (deductWidth !== 0) {
 		styles.width = `calc(100% - ${deductWidth}px)`;
 	}
@@ -1023,7 +1033,17 @@ onUpdated(async () => {
 			@update:model-value="expressionUpdated"
 		></ExpressionEditModal>
 
-		<div class="parameter-input ignore-key-press-canvas" :style="parameterInputWrapperStyle">
+		<div
+			:class="[
+				$style.parameterInput,
+				'ignore-key-press-canvas',
+				{
+					// [$style.parameterInputWidth]: !isNormalBoolParameter,
+					// [$style.parameterInputBoolWidth]: isNormalBoolParameter,
+				},
+			]"
+			:style="parameterInputWrapperStyle"
+		>
 			<ResourceLocator
 				v-if="parameter.type === 'resourceLocator'"
 				ref="resourceLocator"
@@ -1321,6 +1341,7 @@ onUpdated(async () => {
 						/>
 					</template>
 				</N8nInput>
+				HERE???
 			</div>
 
 			<div v-else-if="parameter.type === 'color'" ref="inputField" class="color-input">
@@ -1503,7 +1524,7 @@ onUpdated(async () => {
 				<InlineExpressionTip />
 			</div>
 		</div>
-
+		<slot name="overrideButton" />
 		<ParameterIssues
 			v-if="parameter.type !== 'credentialsSelect' && !isResourceLocatorParameter"
 			:issues="getIssues"
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 26cc123b2c556..be6e40c3d163f 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -12,8 +12,14 @@ import { getMappedResult } from '@/utils/mappingUtils';
 import { hasExpressionMapping, hasOnlyListMode, isValueExpression } from '@/utils/nodeTypesUtils';
 import { isResourceLocatorValue } from '@/utils/typeGuards';
 import { createEventBus } from 'n8n-design-system/utils';
-import type { INodeProperties, IParameterLabel, NodeParameterValueType } from 'n8n-workflow';
+import {
+	type INodeProperties,
+	type IParameterLabel,
+	type NodeParameterValueType,
+} from 'n8n-workflow';
 import { N8nInputLabel } from 'n8n-design-system';
+import AiStarsIcon from './AiStarsIcon.vue';
+import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 
 type Props = {
 	parameter: INodeProperties;
@@ -88,8 +94,8 @@ function isOverrideValue(s: string) {
 function parseOverrides(s: string) {
 	/*
 		Approaches:
-		- Smart and boring: Reuse packages/core/src/CreateNodeAsTool.ts , unclear where to move it
-		- Fun and dangerous: See below
+		- Smart and boring: Reuse packages/core/src/CreateNodeAsTool.ts ; unclear where to move it
+		- Fun and dangerous: Use eval, see below
 	*/
 	if (!isOverrideValue(s)) return null;
 
@@ -109,12 +115,19 @@ function parseOverrides(s: string) {
 }
 
 const isContentOverride = computed(() => isOverrideValue(props.value?.toString() ?? ''));
-const canBeContentOverride = computed(
-	() => node.value?.type?.endsWith('Tool') && props.parameter.type !== 'options',
+const canBeContentOverride = computed(() =>
+	node.value?.type === undefined
+		? false
+		: nodeTypesStore
+				.getNodeType(node.value.type, node.value.typeVersion)
+				?.codex?.categories?.includes('AI') &&
+			!props.parameter.noDataExpression &&
+			props.parameter.type !== 'options',
 );
 // const canBeContentOverride = computed(() => getNodeTypeDescription().codex?.ai?.subcategories.contains('Tool'));
 
 const ndvStore = useNDVStore();
+const nodeTypesStore = useNodeTypesStore();
 
 const node = computed(() => ndvStore.activeNode);
 const hint = computed(() => i18n.nodeText().hint(props.parameter, props.path));
@@ -125,13 +138,18 @@ const isResourceLocator = computed(
 const isDropDisabled = computed(
 	() =>
 		props.parameter.noDataExpression ||
-		props.isReadOnly ||
+		isReadOnlyParameter.value ||
 		isResourceLocator.value ||
 		isExpression.value,
 );
 const isExpression = computed(() => isValueExpression(props.parameter, props.value));
 const showExpressionSelector = computed(() =>
-	isResourceLocator.value ? !hasOnlyListMode(props.parameter) : true,
+	!isContentOverride.value && isResourceLocator.value ? !hasOnlyListMode(props.parameter) : true,
+);
+
+const isReadOnlyParameter = computed(
+	() =>
+		props.isReadOnly || props.parameter.disabledOptions !== undefined || isContentOverride.value,
 );
 
 function onFocus() {
@@ -264,7 +282,7 @@ watch(
 
 <template>
 	<N8nInputLabel
-		:class="[$style.wrapper, { [$style.wrapperFlex]: canBeContentOverride }]"
+		:class="[$style.wrapper, { [$style.displayFlex]: canBeContentOverride }]"
 		:label="hideLabel ? '' : i18n.nodeText().inputLabelDisplayName(parameter, path)"
 		:tooltip-text="hideLabel ? '' : i18n.nodeText().inputLabelDescription(parameter, path)"
 		:show-tooltip="focused"
@@ -278,7 +296,7 @@ watch(
 			<ParameterOptions
 				:parameter="parameter"
 				:value="value"
-				:is-read-only="isReadOnly"
+				:is-read-only="isReadOnlyParameter"
 				:show-options="displayOptions"
 				:show-expression-selector="showExpressionSelector"
 				@update:model-value="optionSelected"
@@ -293,11 +311,23 @@ watch(
 			@drop="onDrop"
 		>
 			<template #default="{ droppable, activeDrop }">
-				<div v-if="canBeContentOverride && isContentOverride" :class="$style.parameterInput">
-					<ElInput size="small" disabled="true" :placeholder="fromAiOverride.overridePlaceholder" />
+				<div v-if="canBeContentOverride && isContentOverride" :class="$style.contentOverride">
+					<div :class="[$style['prepend-section'], 'el-input-group__prepend', $style.cornersLeft]">
+						<AiStarsIcon />
+					</div>
+					<N8nInput
+						:model-value="fromAiOverride.overridePlaceholder"
+						disabled
+						type="text"
+						size="small"
+					/>
+					<!-- <ElInput class="n8n-input" size="small" disabled /> -->
 					<N8nIconButton
-						type="secondary"
+						type="tertiary"
+						:class="['n8n-input', $style.closeButton, $style.cornersRight]"
+						outline="false"
 						icon="xmark"
+						size="xsmall"
 						@click="
 							() => {
 								valueChanged({
@@ -309,12 +339,12 @@ watch(
 						"
 					/>
 				</div>
-				<div v-else :class="$style.inputOverrideWrapper">
+				<div v-else :class="$style.displayFlex">
 					<ParameterInputWrapper
 						:parameter="parameter"
 						:model-value="value"
 						:path="path"
-						:is-read-only="isReadOnly"
+						:is-read-only="isReadOnlyParameter"
 						:is-assignment="isAssignment"
 						:rows="rows"
 						:droppable="droppable"
@@ -331,20 +361,25 @@ watch(
 						@focus="onFocus"
 						@blur="onBlur"
 						@drop="onDrop"
-					/>
-					<N8nIconButton
-						v-if="canBeContentOverride"
-						type="tertiary"
-						:icon="fromAiOverride.icon"
-						@click="
-							() => {
-								valueChanged({
-									name: props.path,
-									value: buildValueFromOverride(fromAiOverride.extraProps, true),
-								});
-							}
-						"
-					/>
+					>
+						<template #overrideButton>
+							<N8nButton
+								v-if="canBeContentOverride"
+								:class="['n8n-input', $style.overrideButton, $style.cornersRight]"
+								type="tertiary"
+								@click="
+									() => {
+										valueChanged({
+											name: props.path,
+											value: buildValueFromOverride(fromAiOverride.extraProps, true),
+										});
+									}
+								"
+							>
+								<AiStarsIcon />
+							</N8nButton>
+						</template>
+					</ParameterInputWrapper>
 				</div>
 			</template>
 		</DraggableTarget>
@@ -358,7 +393,7 @@ watch(
 				v-if="optionsPosition === 'bottom'"
 				:parameter="parameter"
 				:value="value"
-				:is-read-only="isReadOnly"
+				:is-read-only="isReadOnlyParameter"
 				:show-options="displayOptions"
 				:show-expression-selector="showExpressionSelector"
 				@update:model-value="optionSelected"
@@ -380,20 +415,52 @@ watch(
 	}
 }
 
-.wrapperFlex {
+.displayFlex {
 	display: flex;
 }
 
-.inputOverrideWrapper {
+.contentOverride {
 	display: flex;
-	flex-grow: 1;
+	gap: var(--spacing-4xs);
+	border-radius: var(--border-radius-base);
+	background: var(--color-background-base);
+}
+
+.closeButton {
+	padding: 0px 8px 3px; // the icon used is off-center vertically
+	border: 0px;
 }
 
-.parameterInput {
+.overrideButton {
 	display: flex;
-	flex-direction: row;
+	justify-content: center;
+	align-self: start;
 	flex-grow: 1;
-	gap: var(--spacing-4xs);
+	border: 0px;
+	// height: 30px;
+	width: 30px;
+	background: var(--color-background-base);
+
+	&:hover {
+		background: var(--color-primary);
+	}
+}
+
+.cornersLeft {
+	border-top-right-radius: 0;
+	border-bottom-right-radius: 0;
+}
+
+.cornersRight {
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+}
+
+.prepend-section {
+	align-self: center;
+	padding-left: 8px;
+	width: 22px;
+	text-align: center;
 }
 
 .options {
diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue
index b3516d1e3dc0b..80383dde5968b 100644
--- a/packages/editor-ui/src/components/ParameterInputWrapper.vue
+++ b/packages/editor-ui/src/components/ParameterInputWrapper.vue
@@ -224,7 +224,11 @@ function onTextInput(parameterData: IUpdateInformation) {
 			@drop="onDrop"
 			@text-input="onTextInput"
 			@update="onValueChanged"
-		/>
+		>
+			<template #overrideButton>
+				<slot v-if="$slots.overrideButton" name="overrideButton" />
+			</template>
+		</ParameterInput>
 		<div v-if="!hideHint && (expressionOutput || parameterHint)" :class="$style.hint">
 			<div>
 				<InputHint

From 51511e75ca10a6832dc5b779a5ed57d00b0aa107 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Fri, 10 Jan 2025 09:55:37 +0100
Subject: [PATCH 04/82] wip many button locations

---
 .../components/N8nInputLabel/InputLabel.vue   |  6 +++
 .../src/components/ParameterInput.vue         | 45 +++++++++++++++++--
 .../src/components/ParameterInputFull.vue     | 37 +++++++++++++--
 .../src/components/ParameterInputWrapper.vue  |  9 +++-
 4 files changed, 89 insertions(+), 8 deletions(-)

diff --git a/packages/design-system/src/components/N8nInputLabel/InputLabel.vue b/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
index e52257971399d..edc4a61d1a859 100644
--- a/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
+++ b/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
@@ -89,6 +89,12 @@ const addTargetBlank = (html: string) =>
 			>
 				<slot name="options" />
 			</div>
+			<div
+				v-if="$slots.persistentOptions"
+				:data-test-id="`${inputName}-parameter-input-options-container-1`"
+			>
+				<slot name="persistentOptions" />
+			</div>
 		</label>
 		<slot />
 	</div>
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index 0d70116bce10c..efed1fb5ced19 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -127,8 +127,6 @@ const workflowsStore = useWorkflowsStore();
 const settingsStore = useSettingsStore();
 const nodeTypesStore = useNodeTypesStore();
 
-// ESLint: false positive
-// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents, @typescript-eslint/no-duplicate-type-constituents
 const inputField = ref<InstanceType<typeof N8nInput | typeof N8nSelect> | HTMLElement>();
 const wrapper = ref<HTMLDivElement>();
 
@@ -956,6 +954,38 @@ onMounted(() => {
 	});
 });
 
+// const ivh = ref(0);
+
+// onUpdated(() => {});
+
+const inputValueHeight = computed(() => {
+	const inputField = wrapper;
+	console.log('A');
+	if (!inputField.value) return -1;
+	console.log('B');
+
+	if ('offsetHeight' in inputField.value && !Number.isNaN(inputField.value.offsetHeight)) {
+		console.log('offsetHeight', inputField.value.offsetHeight);
+		return inputField.value.offsetHeight;
+	}
+	if (
+		'$el' in inputField.value &&
+		!!inputField.value.$el &&
+		typeof inputField.value.$el === 'object' &&
+		'clientHeight' in inputField.value.$el &&
+		!Number.isNaN(inputField.value.$el?.['clientHeight'])
+	) {
+		console.log('clientHeight', inputField.value.$el.clientHeight);
+		return inputField.value.$el?.clientHeight;
+	}
+	console.log('C');
+	return -1;
+});
+
+defineExpose({
+	inputValueHeight,
+});
+
 onBeforeUnmount(() => {
 	props.eventBus.off('optionSelected', optionSelected);
 });
@@ -1125,6 +1155,7 @@ onUpdated(async () => {
 					>
 						<CodeNodeEditor
 							v-if="editorType === 'codeNodeEditor'"
+							ref="inputField"
 							:mode="codeEditorMode"
 							:model-value="modelValueString"
 							:default-value="parameter.default"
@@ -1135,6 +1166,7 @@ onUpdated(async () => {
 						/>
 						<HtmlEditor
 							v-else-if="editorType === 'htmlEditor'"
+							ref="inputField"
 							:model-value="modelValueString"
 							:is-read-only="isReadOnly"
 							:rows="editorRows"
@@ -1145,6 +1177,7 @@ onUpdated(async () => {
 						/>
 						<SqlEditor
 							v-else-if="editorType === 'sqlEditor'"
+							ref="inputField"
 							:model-value="modelValueString"
 							:dialect="getArgument('sqlDialect')"
 							:is-read-only="isReadOnly"
@@ -1154,6 +1187,7 @@ onUpdated(async () => {
 						/>
 						<JsEditor
 							v-else-if="editorType === 'jsEditor'"
+							ref="inputField"
 							:model-value="modelValueString"
 							:is-read-only="isReadOnly"
 							:rows="editorRows"
@@ -1164,6 +1198,7 @@ onUpdated(async () => {
 
 						<JsonEditor
 							v-else-if="parameter.type === 'json'"
+							ref="inputField"
 							:model-value="modelValueString"
 							:is-read-only="isReadOnly"
 							:rows="editorRows"
@@ -1185,6 +1220,7 @@ onUpdated(async () => {
 
 				<CodeNodeEditor
 					v-if="editorType === 'codeNodeEditor' && isCodeNode"
+					ref="inputField"
 					:key="'code-' + codeEditDialogVisible.toString()"
 					:mode="codeEditorMode"
 					:model-value="modelValueString"
@@ -1210,6 +1246,7 @@ onUpdated(async () => {
 
 				<HtmlEditor
 					v-else-if="editorType === 'htmlEditor'"
+					ref="inputField"
 					:key="'html-' + codeEditDialogVisible.toString()"
 					:model-value="modelValueString"
 					:is-read-only="isReadOnly"
@@ -1232,6 +1269,7 @@ onUpdated(async () => {
 
 				<SqlEditor
 					v-else-if="editorType === 'sqlEditor'"
+					ref="inputField"
 					:key="'sql-' + codeEditDialogVisible.toString()"
 					:model-value="modelValueString"
 					:dialect="getArgument('sqlDialect')"
@@ -1253,6 +1291,7 @@ onUpdated(async () => {
 
 				<JsEditor
 					v-else-if="editorType === 'jsEditor'"
+					ref="inputField"
 					:key="'js-' + codeEditDialogVisible.toString()"
 					:model-value="modelValueString"
 					:is-read-only="isReadOnly || editorIsReadOnly"
@@ -1275,6 +1314,7 @@ onUpdated(async () => {
 
 				<JsonEditor
 					v-else-if="parameter.type === 'json'"
+					ref="inputField"
 					:key="'json-' + codeEditDialogVisible.toString()"
 					:model-value="modelValueString"
 					:is-read-only="isReadOnly"
@@ -1341,7 +1381,6 @@ onUpdated(async () => {
 						/>
 					</template>
 				</N8nInput>
-				HERE???
 			</div>
 
 			<div v-else-if="parameter.type === 'color'" ref="inputField" class="color-input">
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index be6e40c3d163f..fcb8d83d2ffcb 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import { computed, ComputedRef, ref, useTemplateRef, watch } from 'vue';
 import type { IUpdateInformation } from '@/Interface';
 
 import DraggableTarget from '@/components/DraggableTarget.vue';
@@ -17,7 +17,7 @@ import {
 	type IParameterLabel,
 	type NodeParameterValueType,
 } from 'n8n-workflow';
-import { N8nInputLabel } from 'n8n-design-system';
+import { N8nButton, N8nInputLabel } from 'n8n-design-system';
 import AiStarsIcon from './AiStarsIcon.vue';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 
@@ -121,7 +121,7 @@ const canBeContentOverride = computed(() =>
 		: nodeTypesStore
 				.getNodeType(node.value.type, node.value.typeVersion)
 				?.codex?.categories?.includes('AI') &&
-			!props.parameter.noDataExpression &&
+			(!props.parameter.noDataExpression || props.parameter.typeOptions?.editor !== undefined) &&
 			props.parameter.type !== 'options',
 );
 // const canBeContentOverride = computed(() => getNodeTypeDescription().codex?.ai?.subcategories.contains('Tool'));
@@ -278,10 +278,18 @@ watch(
 		}
 	},
 );
+
+const parameterInputWrapper = useTemplateRef('parameterInputWrapper');
+
+const isSingleLineInput: ComputedRef<boolean> = computed(() => {
+	console.log('D', parameterInputWrapper.value);
+	return (parameterInputWrapper.value?.inputValueHeight ?? 0) <= 45;
+});
 </script>
 
 <template>
 	<N8nInputLabel
+		ref="inputLabel"
 		:class="[$style.wrapper, { [$style.displayFlex]: canBeContentOverride }]"
 		:label="hideLabel ? '' : i18n.nodeText().inputLabelDisplayName(parameter, path)"
 		:tooltip-text="hideLabel ? '' : i18n.nodeText().inputLabelDescription(parameter, path)"
@@ -292,6 +300,26 @@ watch(
 		:size="label.size"
 		color="text-dark"
 	>
+		<template
+			v-if="canBeContentOverride && !isSingleLineInput && optionsPosition === 'top'"
+			#persistentOptions
+		>
+			<N8nButton
+				:class="['n8n-input', $style.overrideButton, $style.cornersRight]"
+				type="tertiary"
+				@click="
+					() => {
+						valueChanged({
+							name: props.path,
+							value: buildValueFromOverride(fromAiOverride.extraProps, true),
+						});
+					}
+				"
+			>
+				<AiStarsIcon />
+			</N8nButton>
+		</template>
+
 		<template v-if="displayOptions && optionsPosition === 'top'" #options>
 			<ParameterOptions
 				:parameter="parameter"
@@ -341,6 +369,7 @@ watch(
 				</div>
 				<div v-else :class="$style.displayFlex">
 					<ParameterInputWrapper
+						ref="parameterInputWrapper"
 						:parameter="parameter"
 						:model-value="value"
 						:path="path"
@@ -364,7 +393,7 @@ watch(
 					>
 						<template #overrideButton>
 							<N8nButton
-								v-if="canBeContentOverride"
+								v-if="canBeContentOverride && isSingleLineInput"
 								:class="['n8n-input', $style.overrideButton, $style.cornersRight]"
 								type="tertiary"
 								@click="
diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue
index 80383dde5968b..3e477ca086943 100644
--- a/packages/editor-ui/src/components/ParameterInputWrapper.vue
+++ b/packages/editor-ui/src/components/ParameterInputWrapper.vue
@@ -20,7 +20,7 @@ import { stringifyExpressionResult } from '@/utils/expressions';
 import { isValueExpression, parseResourceMapperFieldName } from '@/utils/nodeTypesUtils';
 import type { EventBus } from 'n8n-design-system/utils';
 import { createEventBus } from 'n8n-design-system/utils';
-import { computed } from 'vue';
+import { computed, useTemplateRef } from 'vue';
 import { useRouter } from 'vue-router';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 
@@ -193,6 +193,13 @@ function onValueChanged(parameterData: IUpdateInformation) {
 function onTextInput(parameterData: IUpdateInformation) {
 	emit('textInput', parameterData);
 }
+
+const inputValueHeight = computed(() => param.value?.inputValueHeight);
+
+const param = useTemplateRef('param');
+defineExpose({
+	inputValueHeight,
+});
 </script>
 
 <template>

From 54ffa0f32cb5313dec0bf770c30d4043ca7118ec Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Fri, 10 Jan 2025 17:15:45 +0100
Subject: [PATCH 05/82] wip commit

---
 .../src/components/N8nInput/Input.vue         |  2 +-
 .../src/components/ParameterInput.vue         | 54 +++++++------------
 .../src/components/ParameterInputFull.vue     |  8 ++-
 .../src/components/ParameterInputWrapper.vue  |  5 +-
 4 files changed, 26 insertions(+), 43 deletions(-)

diff --git a/packages/design-system/src/components/N8nInput/Input.vue b/packages/design-system/src/components/N8nInput/Input.vue
index 7df719728a881..9fd8820ce093e 100644
--- a/packages/design-system/src/components/N8nInput/Input.vue
+++ b/packages/design-system/src/components/N8nInput/Input.vue
@@ -103,7 +103,7 @@ defineExpose({ focus, blur, select });
 .xlarge {
 	--input-font-size: var(--font-size-m);
 	input {
-		height: 48px;
+		// height: 48px;
 	}
 }
 </style>
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index efed1fb5ced19..b554d4338664d 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -65,6 +65,7 @@ import { N8nIcon, N8nInput, N8nInputNumber, N8nOption, N8nSelect } from 'n8n-des
 import type { EventBus } from 'n8n-design-system/utils';
 import { createEventBus } from 'n8n-design-system/utils';
 import { useRouter } from 'vue-router';
+import { useElementSize } from '@vueuse/core';
 
 type Picker = { $emit: (arg0: string, arg1: Date) => void };
 
@@ -431,6 +432,9 @@ const parameterInputClasses = computed(() => {
 
 	if (!isTextarea && !isSwitch) {
 		classes['parameter-value-container'] = true;
+	} else {
+		// todo bring the fromAi button inline
+		classes['parameter-simple'] = true;
 	}
 
 	if (
@@ -451,7 +455,6 @@ const isNormalBoolParameter = computed(
 
 const parameterInputWrapperStyle = computed(() => {
 	let deductWidth = 0;
-	let width;
 
 	const styles = {
 		width: '100%',
@@ -954,36 +957,20 @@ onMounted(() => {
 	});
 });
 
-// const ivh = ref(0);
-
-// onUpdated(() => {});
-
-const inputValueHeight = computed(() => {
-	const inputField = wrapper;
-	console.log('A');
-	if (!inputField.value) return -1;
-	console.log('B');
+const { height } = useElementSize(wrapper);
 
-	if ('offsetHeight' in inputField.value && !Number.isNaN(inputField.value.offsetHeight)) {
-		console.log('offsetHeight', inputField.value.offsetHeight);
-		return inputField.value.offsetHeight;
-	}
-	if (
-		'$el' in inputField.value &&
-		!!inputField.value.$el &&
-		typeof inputField.value.$el === 'object' &&
-		'clientHeight' in inputField.value.$el &&
-		!Number.isNaN(inputField.value.$el?.['clientHeight'])
-	) {
-		console.log('clientHeight', inputField.value.$el.clientHeight);
-		return inputField.value.$el?.clientHeight;
+const isSingleLineInput = computed(() => {
+	// if (props.rows > 2) return false;
+	console.log(props.rows, editorRows.value);
+	if (isSingleLineInput.value) {
+		return height.value <= 70;
+	} else {
+		return height.value <= 35;
 	}
-	console.log('C');
-	return -1;
 });
 
 defineExpose({
-	inputValueHeight,
+	isSingleLineInput,
 });
 
 onBeforeUnmount(() => {
@@ -1064,15 +1051,9 @@ onUpdated(async () => {
 		></ExpressionEditModal>
 
 		<div
-			:class="[
-				$style.parameterInput,
-				'ignore-key-press-canvas',
-				{
-					// [$style.parameterInputWidth]: !isNormalBoolParameter,
-					// [$style.parameterInputBoolWidth]: isNormalBoolParameter,
-				},
-			]"
+			:class="[$style.parameterInput, 'ignore-key-press-canvas']"
 			:style="parameterInputWrapperStyle"
+			data-test-id="parameter-input-wrapper-in-input"
 		>
 			<ResourceLocator
 				v-if="parameter.type === 'resourceLocator'"
@@ -1138,6 +1119,7 @@ onUpdated(async () => {
 					['json', 'string'].includes(parameter.type) ||
 					remoteParameterOptionsLoadingIssues !== null
 				"
+				:class="[$style.parameterInput]"
 			>
 				<el-dialog
 					:model-value="codeEditDialogVisible"
@@ -1590,6 +1572,10 @@ onUpdated(async () => {
 	align-items: center;
 }
 
+.parameter-simple {
+	display: inline-flex;
+}
+
 .parameter-input {
 	display: inline-block;
 	position: relative;
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index fcb8d83d2ffcb..8c5d9c1667380 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -280,11 +280,9 @@ watch(
 );
 
 const parameterInputWrapper = useTemplateRef('parameterInputWrapper');
-
-const isSingleLineInput: ComputedRef<boolean> = computed(() => {
-	console.log('D', parameterInputWrapper.value);
-	return (parameterInputWrapper.value?.inputValueHeight ?? 0) <= 45;
-});
+const isSingleLineInput: ComputedRef<boolean> = computed(
+	() => parameterInputWrapper.value?.isSingleLineInput ?? isSingleLineInput.value ?? false,
+);
 </script>
 
 <template>
diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue
index 3e477ca086943..4eb7fe61df372 100644
--- a/packages/editor-ui/src/components/ParameterInputWrapper.vue
+++ b/packages/editor-ui/src/components/ParameterInputWrapper.vue
@@ -194,11 +194,10 @@ function onTextInput(parameterData: IUpdateInformation) {
 	emit('textInput', parameterData);
 }
 
-const inputValueHeight = computed(() => param.value?.inputValueHeight);
-
 const param = useTemplateRef('param');
+const isSingleLineInput = computed(() => param.value?.isSingleLineInput);
 defineExpose({
-	inputValueHeight,
+	isSingleLineInput,
 });
 </script>
 

From 72e83709f742e3353d3fca2204ce3a7548f06839 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Mon, 13 Jan 2025 12:15:01 +0100
Subject: [PATCH 06/82] Working override button

---
 .../src/components/N8nInput/Input.vue         |  2 +-
 .../components/N8nInputLabel/InputLabel.vue   | 10 +++-
 .../src/components/ParameterInput.vue         | 19 ++++++-
 .../src/components/ParameterInputFull.vue     | 55 ++++++++++++++-----
 4 files changed, 66 insertions(+), 20 deletions(-)

diff --git a/packages/design-system/src/components/N8nInput/Input.vue b/packages/design-system/src/components/N8nInput/Input.vue
index 9fd8820ce093e..7df719728a881 100644
--- a/packages/design-system/src/components/N8nInput/Input.vue
+++ b/packages/design-system/src/components/N8nInput/Input.vue
@@ -103,7 +103,7 @@ defineExpose({ focus, blur, select });
 .xlarge {
 	--input-font-size: var(--font-size-m);
 	input {
-		// height: 48px;
+		height: 48px;
 	}
 }
 </style>
diff --git a/packages/design-system/src/components/N8nInputLabel/InputLabel.vue b/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
index edc4a61d1a859..250f29e411e4e 100644
--- a/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
+++ b/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
@@ -91,6 +91,7 @@ const addTargetBlank = (html: string) =>
 			</div>
 			<div
 				v-if="$slots.persistentOptions"
+				:class="$style.persistentOptions"
 				:data-test-id="`${inputName}-parameter-input-options-container-1`"
 			>
 				<slot name="persistentOptions" />
@@ -107,6 +108,7 @@ const addTargetBlank = (html: string) =>
 }
 .inputLabel {
 	display: block;
+	align-items: center;
 }
 .container:hover,
 .inputLabel:hover {
@@ -206,10 +208,10 @@ const addTargetBlank = (html: string) =>
 	display: flex;
 
 	&.small {
-		margin-bottom: var(--spacing-5xs);
+		padding-bottom: var(--spacing-5xs);
 	}
 	&.medium {
-		margin-bottom: var(--spacing-2xs);
+		padding-bottom: var(--spacing-2xs);
 	}
 }
 
@@ -217,6 +219,10 @@ const addTargetBlank = (html: string) =>
 	border-bottom: var(--border-base);
 }
 
+.persistentOptions {
+	padding-left: var(--spacing-4xs);
+}
+
 :root .tooltipPopper {
 	line-height: var(--font-line-height-compact);
 	max-width: 400px;
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index b554d4338664d..63f52ea0e023b 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -960,8 +960,10 @@ onMounted(() => {
 const { height } = useElementSize(wrapper);
 
 const isSingleLineInput = computed(() => {
-	// if (props.rows > 2) return false;
-	console.log(props.rows, editorRows.value);
+	if (getStringInputType.value === 'textarea') {
+		return false;
+	}
+
 	if (isSingleLineInput.value) {
 		return height.value <= 70;
 	} else {
@@ -1051,7 +1053,13 @@ onUpdated(async () => {
 		></ExpressionEditModal>
 
 		<div
-			:class="[$style.parameterInput, 'ignore-key-press-canvas']"
+			:class="[
+				$style.parameterInput,
+				'ignore-key-press-canvas',
+				'abc',
+				$style.noRightCorners,
+				// { [$style.noRightCorners]: true || $slots.overrideButton !== undefined },
+			]"
 			:style="parameterInputWrapperStyle"
 			data-test-id="parameter-input-wrapper-in-input"
 		>
@@ -1730,4 +1738,9 @@ onUpdated(async () => {
 	border-bottom-left-radius: 4px;
 	border-bottom-right-radius: 4px;
 }
+
+.noRightCorners > * {
+	--input-border-bottom-right-radius: 0;
+	--input-border-top-right-radius: 0;
+}
 </style>
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 8c5d9c1667380..cba565623194b 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -94,7 +94,7 @@ function isOverrideValue(s: string) {
 function parseOverrides(s: string) {
 	/*
 		Approaches:
-		- Smart and boring: Reuse packages/core/src/CreateNodeAsTool.ts ; unclear where to move it
+		- Smart and boring: Reuse packages/core/src/CreateNodeAsTool.ts - unclear where to move it
 		- Fun and dangerous: Use eval, see below
 	*/
 	if (!isOverrideValue(s)) return null;
@@ -105,7 +105,6 @@ function parseOverrides(s: string) {
 	const end = '}}'.length;
 	// `eval?.` is an indirect evaluation, outside of local scope
 	const params: unknown[] = eval?.(`${fns} ${s.slice(cursor, -end)}`) ?? [];
-	console.log(fns, params);
 	return {
 		key: params[0] ?? '',
 		description: params[1] ?? '',
@@ -122,7 +121,8 @@ const canBeContentOverride = computed(() =>
 				.getNodeType(node.value.type, node.value.typeVersion)
 				?.codex?.categories?.includes('AI') &&
 			(!props.parameter.noDataExpression || props.parameter.typeOptions?.editor !== undefined) &&
-			props.parameter.type !== 'options',
+			!isResourceLocator.value &&
+			'options' !== props.parameter.type,
 );
 // const canBeContentOverride = computed(() => getNodeTypeDescription().codex?.ai?.subcategories.contains('Tool'));
 
@@ -299,11 +299,21 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 		color="text-dark"
 	>
 		<template
-			v-if="canBeContentOverride && !isSingleLineInput && optionsPosition === 'top'"
+			v-if="
+				!isSingleLineInput &&
+				canBeContentOverride &&
+				!isContentOverride &&
+				optionsPosition === 'top'
+			"
 			#persistentOptions
 		>
 			<N8nButton
-				:class="['n8n-input', $style.overrideButton, $style.cornersRight]"
+				:class="[
+					'n8n-input',
+					$style.overrideButton,
+					// $style.noCornersBottom,
+					$style.overrideButtonInOptions,
+				]"
 				type="tertiary"
 				@click="
 					() => {
@@ -338,7 +348,9 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 		>
 			<template #default="{ droppable, activeDrop }">
 				<div v-if="canBeContentOverride && isContentOverride" :class="$style.contentOverride">
-					<div :class="[$style['prepend-section'], 'el-input-group__prepend', $style.cornersLeft]">
+					<div
+						:class="[$style['prepend-section'], 'el-input-group__prepend', $style.noCornersRight]"
+					>
 						<AiStarsIcon />
 					</div>
 					<N8nInput
@@ -350,7 +362,7 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 					<!-- <ElInput class="n8n-input" size="small" disabled /> -->
 					<N8nIconButton
 						type="tertiary"
-						:class="['n8n-input', $style.closeButton, $style.cornersRight]"
+						:class="['n8n-input', $style.closeButton /*$style.noCornersRight*/]"
 						outline="false"
 						icon="xmark"
 						size="xsmall"
@@ -391,8 +403,13 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 					>
 						<template #overrideButton>
 							<N8nButton
-								v-if="canBeContentOverride && isSingleLineInput"
-								:class="['n8n-input', $style.overrideButton, $style.cornersRight]"
+								v-if="isSingleLineInput && canBeContentOverride"
+								:class="[
+									'n8n-input',
+									$style.overrideButton,
+									$style.overrideButtonInLine,
+									$style.noCornersLeft,
+								]"
 								type="tertiary"
 								@click="
 									() => {
@@ -461,10 +478,8 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 .overrideButton {
 	display: flex;
 	justify-content: center;
-	align-self: start;
-	flex-grow: 1;
 	border: 0px;
-	// height: 30px;
+	height: 30px;
 	width: 30px;
 	background: var(--color-background-base);
 
@@ -473,16 +488,28 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 	}
 }
 
-.cornersLeft {
+.overrideButtonInLine {
+	align-self: start;
+}
+
+.overrideButtonInOptions {
+}
+
+.noCornersRight {
 	border-top-right-radius: 0;
 	border-bottom-right-radius: 0;
 }
 
-.cornersRight {
+.noCornersLeft {
 	border-top-left-radius: 0;
 	border-bottom-left-radius: 0;
 }
 
+.noCornersBottom {
+	border-bottom-right-radius: 0;
+	border-bottom-left-radius: 0;
+}
+
 .prepend-section {
 	align-self: center;
 	padding-left: 8px;

From 02a402834757fa77869b6053d4f31d62e2602357 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Mon, 13 Jan 2025 15:28:28 +0100
Subject: [PATCH 07/82] minor touch ups

---
 .../components/N8nInputLabel/InputLabel.vue   | 108 ++++++++++--------
 .../src/components/ParameterInput.vue         |  70 ++++++++----
 .../src/components/ParameterInputFull.vue     |  27 ++---
 .../src/components/ParameterInputWrapper.vue  |   2 +
 4 files changed, 113 insertions(+), 94 deletions(-)

diff --git a/packages/design-system/src/components/N8nInputLabel/InputLabel.vue b/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
index 250f29e411e4e..7dcdcf8950676 100644
--- a/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
+++ b/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
@@ -41,54 +41,56 @@ const addTargetBlank = (html: string) =>
 		v-bind="$attrs"
 		data-test-id="input-label"
 	>
-		<label
-			v-if="label || $slots.options"
-			:for="inputName"
-			:class="{
-				'n8n-input-label': true,
-				[$style.inputLabel]: true,
-				[$style.heading]: !!label,
-				[$style.underline]: underline,
-				[$style[size]]: true,
-				[$style.overflow]: !!$slots.options,
-			}"
-		>
-			<div v-if="label" :class="$style.title">
-				<N8nText
-					:bold="bold"
-					:size="size"
-					:compact="compact"
-					:color="color"
-					:class="{
-						[$style.textEllipses]: showOptions,
-					}"
-				>
-					{{ label }}
-					<N8nText v-if="required" color="primary" :bold="bold" :size="size">*</N8nText>
-				</N8nText>
-			</div>
-			<span
-				v-if="tooltipText && label"
-				:class="[$style.infoIcon, showTooltip ? $style.visible : $style.hidden]"
-			>
-				<N8nTooltip placement="top" :popper-class="$style.tooltipPopper" :show-after="300">
-					<N8nIcon icon="question-circle" size="small" />
-					<template #content>
-						<div v-n8n-html="addTargetBlank(tooltipText)" />
-					</template>
-				</N8nTooltip>
-			</span>
-			<div
-				v-if="$slots.options && label"
-				:class="{ [$style.overlay]: true, [$style.visible]: showOptions }"
-			/>
-			<div
-				v-if="$slots.options"
-				:class="{ [$style.options]: true, [$style.visible]: showOptions }"
-				:data-test-id="`${inputName}-parameter-input-options-container`"
+		<div :class="$style.labelWrapper">
+			<label
+				v-if="label || $slots.options"
+				:for="inputName"
+				:class="{
+					'n8n-input-label': true,
+					[$style.inputLabel]: true,
+					[$style.heading]: !!label,
+					[$style.underline]: underline,
+					[$style[size]]: true,
+					[$style.overflow]: !!$slots.options,
+				}"
 			>
-				<slot name="options" />
-			</div>
+				<div v-if="label" :class="$style.title">
+					<N8nText
+						:bold="bold"
+						:size="size"
+						:compact="compact"
+						:color="color"
+						:class="{
+							[$style.textEllipses]: showOptions,
+						}"
+					>
+						{{ label }}
+						<N8nText v-if="required" color="primary" :bold="bold" :size="size">*</N8nText>
+					</N8nText>
+				</div>
+				<span
+					v-if="tooltipText && label"
+					:class="[$style.infoIcon, showTooltip ? $style.visible : $style.hidden]"
+				>
+					<N8nTooltip placement="top" :popper-class="$style.tooltipPopper" :show-after="300">
+						<N8nIcon icon="question-circle" size="small" />
+						<template #content>
+							<div v-n8n-html="addTargetBlank(tooltipText)" />
+						</template>
+					</N8nTooltip>
+				</span>
+				<div
+					v-if="$slots.options && label"
+					:class="{ [$style.overlay]: true, [$style.visible]: showOptions }"
+				/>
+				<div
+					v-if="$slots.options"
+					:class="{ [$style.options]: true, [$style.visible]: showOptions }"
+					:data-test-id="`${inputName}-parameter-input-options-container`"
+				>
+					<slot name="options" />
+				</div>
+			</label>
 			<div
 				v-if="$slots.persistentOptions"
 				:class="$style.persistentOptions"
@@ -96,12 +98,17 @@ const addTargetBlank = (html: string) =>
 			>
 				<slot name="persistentOptions" />
 			</div>
-		</label>
+		</div>
 		<slot />
 	</div>
 </template>
 
 <style lang="scss" module>
+.labelWrapper {
+	display: inline-flex;
+	flex-direction: row;
+}
+
 .container {
 	display: flex;
 	flex-direction: column;
@@ -109,6 +116,7 @@ const addTargetBlank = (html: string) =>
 .inputLabel {
 	display: block;
 	align-items: center;
+	flex-grow: 1;
 }
 .container:hover,
 .inputLabel:hover {
@@ -208,10 +216,10 @@ const addTargetBlank = (html: string) =>
 	display: flex;
 
 	&.small {
-		padding-bottom: var(--spacing-5xs);
+		margin-bottom: var(--spacing-5xs);
 	}
 	&.medium {
-		padding-bottom: var(--spacing-2xs);
+		margin-bottom: var(--spacing-2xs);
 	}
 }
 
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index 63f52ea0e023b..9c66929917b1b 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -91,6 +91,7 @@ type Props = {
 	hideIssues?: boolean;
 	errorHighlight?: boolean;
 	isForCredential?: boolean;
+	canBeOverride?: boolean;
 };
 
 const props = withDefaults(defineProps<Props>(), {
@@ -420,6 +421,10 @@ const parameterOptions = computed<INodePropertyOptions[] | undefined>(() => {
 	return remoteParameterOptions.value;
 });
 
+const isSwitch = computed(
+	() => props.parameter.type === 'boolean' && !isModelValueExpression.value,
+);
+
 const parameterInputClasses = computed(() => {
 	const classes: { [c: string]: boolean } = {
 		droppable: props.droppable,
@@ -428,13 +433,12 @@ const parameterInputClasses = computed(() => {
 
 	const rows = editorRows.value;
 	const isTextarea = props.parameter.type === 'string' && rows !== undefined;
-	const isSwitch = props.parameter.type === 'boolean' && !isModelValueExpression.value;
 
-	if (!isTextarea && !isSwitch) {
+	if (!isTextarea && !isSwitch.value) {
 		classes['parameter-value-container'] = true;
-	} else {
+	} else if (isSwitch.value) {
 		// todo bring the fromAi button inline
-		classes['parameter-simple'] = true;
+		classes['parameter-switch'] = true;
 	}
 
 	if (
@@ -449,10 +453,6 @@ const parameterInputClasses = computed(() => {
 	return classes;
 });
 
-const isNormalBoolParameter = computed(
-	() => props.parameter.type === 'boolean' && !props.droppable,
-);
-
 const parameterInputWrapperStyle = computed(() => {
 	let deductWidth = 0;
 
@@ -466,10 +466,6 @@ const parameterInputWrapperStyle = computed(() => {
 		deductWidth += 20;
 	}
 
-	if (isNormalBoolParameter.value) {
-		deductWidth += 30;
-	}
-
 	if (deductWidth !== 0) {
 		styles.width = `calc(100% - ${deductWidth}px)`;
 	}
@@ -960,7 +956,7 @@ onMounted(() => {
 const { height } = useElementSize(wrapper);
 
 const isSingleLineInput = computed(() => {
-	if (getStringInputType.value === 'textarea') {
+	if (getStringInputType.value === 'textarea' && !expressionDisplayValue.value) {
 		return false;
 	}
 
@@ -1056,9 +1052,10 @@ onUpdated(async () => {
 			:class="[
 				$style.parameterInput,
 				'ignore-key-press-canvas',
-				'abc',
-				$style.noRightCorners,
-				// { [$style.noRightCorners]: true || $slots.overrideButton !== undefined },
+				{
+					[$style.hardRightCornersInput]: canBeOverride,
+					[$style.noRightBorder]: canBeOverride && isSingleLineInput,
+				},
 			]"
 			:style="parameterInputWrapperStyle"
 			data-test-id="parameter-input-wrapper-in-input"
@@ -1210,7 +1207,6 @@ onUpdated(async () => {
 
 				<CodeNodeEditor
 					v-if="editorType === 'codeNodeEditor' && isCodeNode"
-					ref="inputField"
 					:key="'code-' + codeEditDialogVisible.toString()"
 					:mode="codeEditorMode"
 					:model-value="modelValueString"
@@ -1236,7 +1232,6 @@ onUpdated(async () => {
 
 				<HtmlEditor
 					v-else-if="editorType === 'htmlEditor'"
-					ref="inputField"
 					:key="'html-' + codeEditDialogVisible.toString()"
 					:model-value="modelValueString"
 					:is-read-only="isReadOnly"
@@ -1259,7 +1254,6 @@ onUpdated(async () => {
 
 				<SqlEditor
 					v-else-if="editorType === 'sqlEditor'"
-					ref="inputField"
 					:key="'sql-' + codeEditDialogVisible.toString()"
 					:model-value="modelValueString"
 					:dialect="getArgument('sqlDialect')"
@@ -1281,7 +1275,6 @@ onUpdated(async () => {
 
 				<JsEditor
 					v-else-if="editorType === 'jsEditor'"
-					ref="inputField"
 					:key="'js-' + codeEditDialogVisible.toString()"
 					:model-value="modelValueString"
 					:is-read-only="isReadOnly || editorIsReadOnly"
@@ -1304,7 +1297,6 @@ onUpdated(async () => {
 
 				<JsonEditor
 					v-else-if="parameter.type === 'json'"
-					ref="inputField"
 					:key="'json-' + codeEditDialogVisible.toString()"
 					:model-value="modelValueString"
 					:is-read-only="isReadOnly"
@@ -1553,7 +1545,14 @@ onUpdated(async () => {
 				<InlineExpressionTip />
 			</div>
 		</div>
-		<slot name="overrideButton" />
+		<div
+			:class="[
+				$style.overrideButton,
+				{ [$style.overrideButtonStandalone]: isSwitch, [$style.overrideButtonInline]: !isSwitch },
+			]"
+		>
+			<slot name="overrideButton" />
+		</div>
 		<ParameterIssues
 			v-if="parameter.type !== 'credentialsSelect' && !isResourceLocatorParameter"
 			:issues="getIssues"
@@ -1580,8 +1579,11 @@ onUpdated(async () => {
 	align-items: center;
 }
 
-.parameter-simple {
+.parameter-switch {
 	display: inline-flex;
+	align-self: flex-start;
+	justify-items: center;
+	gap: var(--spacing-xs);
 }
 
 .parameter-input {
@@ -1739,8 +1741,28 @@ onUpdated(async () => {
 	border-bottom-right-radius: 4px;
 }
 
-.noRightCorners > * {
+.hardRightCornersInput > * {
 	--input-border-bottom-right-radius: 0;
 	--input-border-top-right-radius: 0;
 }
+
+.noRightBorder > * {
+	border-right: unset;
+}
+
+.overrideButton {
+	align-self: start;
+}
+
+.overrideButtonStandalone {
+	position: relative;
+	top: -2px;
+}
+
+.overrideButtonInline {
+	> button {
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+	}
+}
 </style>
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index cba565623194b..0d84f1972f137 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -308,12 +308,7 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 			#persistentOptions
 		>
 			<N8nButton
-				:class="[
-					'n8n-input',
-					$style.overrideButton,
-					// $style.noCornersBottom,
-					$style.overrideButtonInOptions,
-				]"
+				:class="[$style.overrideButton, $style.noCornersBottom, $style.overrideButtonInOptions]"
 				type="tertiary"
 				@click="
 					() => {
@@ -359,7 +354,6 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 						type="text"
 						size="small"
 					/>
-					<!-- <ElInput class="n8n-input" size="small" disabled /> -->
 					<N8nIconButton
 						type="tertiary"
 						:class="['n8n-input', $style.closeButton /*$style.noCornersRight*/]"
@@ -394,6 +388,7 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 						:hide-issues="hideIssues"
 						:label="label"
 						:event-bus="eventBus"
+						:can-be-override="canBeContentOverride"
 						input-size="small"
 						@update="valueChanged"
 						@text-input="onTextInput"
@@ -401,14 +396,13 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 						@blur="onBlur"
 						@drop="onDrop"
 					>
-						<template #overrideButton>
+						<template v-if="canBeContentOverride && isSingleLineInput" #overrideButton>
 							<N8nButton
-								v-if="isSingleLineInput && canBeContentOverride"
 								:class="[
 									'n8n-input',
 									$style.overrideButton,
-									$style.overrideButtonInLine,
-									$style.noCornersLeft,
+									// $style.overrideButtonInLine,
+									// $style.noCornersLeft,
 								]"
 								type="tertiary"
 								@click="
@@ -488,11 +482,9 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 	}
 }
 
-.overrideButtonInLine {
-	align-self: start;
-}
-
 .overrideButtonInOptions {
+	position: relative;
+	top: 1px;
 }
 
 .noCornersRight {
@@ -500,11 +492,6 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 	border-bottom-right-radius: 0;
 }
 
-.noCornersLeft {
-	border-top-left-radius: 0;
-	border-bottom-left-radius: 0;
-}
-
 .noCornersBottom {
 	border-bottom-right-radius: 0;
 	border-bottom-left-radius: 0;
diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue
index 4eb7fe61df372..384b16a6fb89c 100644
--- a/packages/editor-ui/src/components/ParameterInputWrapper.vue
+++ b/packages/editor-ui/src/components/ParameterInputWrapper.vue
@@ -45,6 +45,7 @@ type Props = {
 	eventSource?: string;
 	label?: IParameterLabel;
 	eventBus?: EventBus;
+	canBeOverride?: boolean;
 };
 
 const props = withDefaults(defineProps<Props>(), {
@@ -225,6 +226,7 @@ defineExpose({
 			:rows="rows"
 			:data-test-id="`parameter-input-${parsedParameterName}`"
 			:event-bus="eventBus"
+			:can-be-override="canBeOverride"
 			@focus="onFocus"
 			@blur="onBlur"
 			@drop="onDrop"

From 5e5e139e167ea8663defa805e4471ab99014307b Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Mon, 13 Jan 2025 16:25:34 +0100
Subject: [PATCH 08/82] self review

---
 .../src/components/ParameterInput.vue         | 33 +++++++++++--------
 .../src/components/ParameterInputFull.vue     | 27 +++++----------
 .../src/components/ParameterInputWrapper.vue  |  1 -
 3 files changed, 27 insertions(+), 34 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index 9c66929917b1b..c3908d596eece 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -425,20 +425,20 @@ const isSwitch = computed(
 	() => props.parameter.type === 'boolean' && !isModelValueExpression.value,
 );
 
+const isTextarea = computed(
+	() => props.parameter.type === 'string' && editorRows.value !== undefined,
+);
+
 const parameterInputClasses = computed(() => {
 	const classes: { [c: string]: boolean } = {
 		droppable: props.droppable,
 		activeDrop: props.activeDrop,
 	};
 
-	const rows = editorRows.value;
-	const isTextarea = props.parameter.type === 'string' && rows !== undefined;
-
-	if (!isTextarea && !isSwitch.value) {
-		classes['parameter-value-container'] = true;
-	} else if (isSwitch.value) {
-		// todo bring the fromAi button inline
+	if (isSwitch.value) {
 		classes['parameter-switch'] = true;
+	} else {
+		classes['parameter-value-container'] = true;
 	}
 
 	if (
@@ -455,7 +455,6 @@ const parameterInputClasses = computed(() => {
 
 const parameterInputWrapperStyle = computed(() => {
 	let deductWidth = 0;
-
 	const styles = {
 		width: '100%',
 	};
@@ -956,10 +955,20 @@ onMounted(() => {
 const { height } = useElementSize(wrapper);
 
 const isSingleLineInput = computed(() => {
-	if (getStringInputType.value === 'textarea' && !expressionDisplayValue.value) {
+	if (isTextarea.value && !isModelValueExpression.value) {
 		return false;
 	}
 
+	/**
+	 * There is an awkward edge case here with text boxes that automatically
+	 * adjust their rowCount based on content:
+	 *
+	 * If we move the overrideButton to the options row due to going multiline,
+	 * the text area gains more width and might return to single line.
+	 * This then causes the overrideButton to move inline, causing a loop and flickering UI.
+	 *
+	 * To avoid this, we treat 2 rows of input as single line, if we are already single line.
+	 */
 	if (isSingleLineInput.value) {
 		return height.value <= 70;
 	} else {
@@ -1142,7 +1151,6 @@ onUpdated(async () => {
 					>
 						<CodeNodeEditor
 							v-if="editorType === 'codeNodeEditor'"
-							ref="inputField"
 							:mode="codeEditorMode"
 							:model-value="modelValueString"
 							:default-value="parameter.default"
@@ -1153,7 +1161,6 @@ onUpdated(async () => {
 						/>
 						<HtmlEditor
 							v-else-if="editorType === 'htmlEditor'"
-							ref="inputField"
 							:model-value="modelValueString"
 							:is-read-only="isReadOnly"
 							:rows="editorRows"
@@ -1164,7 +1171,6 @@ onUpdated(async () => {
 						/>
 						<SqlEditor
 							v-else-if="editorType === 'sqlEditor'"
-							ref="inputField"
 							:model-value="modelValueString"
 							:dialect="getArgument('sqlDialect')"
 							:is-read-only="isReadOnly"
@@ -1174,7 +1180,6 @@ onUpdated(async () => {
 						/>
 						<JsEditor
 							v-else-if="editorType === 'jsEditor'"
-							ref="inputField"
 							:model-value="modelValueString"
 							:is-read-only="isReadOnly"
 							:rows="editorRows"
@@ -1185,7 +1190,6 @@ onUpdated(async () => {
 
 						<JsonEditor
 							v-else-if="parameter.type === 'json'"
-							ref="inputField"
 							:model-value="modelValueString"
 							:is-read-only="isReadOnly"
 							:rows="editorRows"
@@ -1756,6 +1760,7 @@ onUpdated(async () => {
 
 .overrideButtonStandalone {
 	position: relative;
+	// This is to balance for the extra margin on the switch
 	top: -2px;
 }
 
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 0d84f1972f137..c1ae6614482ea 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -124,7 +124,6 @@ const canBeContentOverride = computed(() =>
 			!isResourceLocator.value &&
 			'options' !== props.parameter.type,
 );
-// const canBeContentOverride = computed(() => getNodeTypeDescription().codex?.ai?.subcategories.contains('Tool'));
 
 const ndvStore = useNDVStore();
 const nodeTypesStore = useNodeTypesStore();
@@ -281,14 +280,14 @@ watch(
 
 const parameterInputWrapper = useTemplateRef('parameterInputWrapper');
 const isSingleLineInput: ComputedRef<boolean> = computed(
-	() => parameterInputWrapper.value?.isSingleLineInput ?? isSingleLineInput.value ?? false,
+	() => parameterInputWrapper.value?.isSingleLineInput ?? false,
 );
 </script>
 
 <template>
 	<N8nInputLabel
 		ref="inputLabel"
-		:class="[$style.wrapper, { [$style.displayFlex]: canBeContentOverride }]"
+		:class="[$style.wrapper]"
 		:label="hideLabel ? '' : i18n.nodeText().inputLabelDisplayName(parameter, path)"
 		:tooltip-text="hideLabel ? '' : i18n.nodeText().inputLabelDescription(parameter, path)"
 		:show-tooltip="focused"
@@ -343,9 +342,7 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 		>
 			<template #default="{ droppable, activeDrop }">
 				<div v-if="canBeContentOverride && isContentOverride" :class="$style.contentOverride">
-					<div
-						:class="[$style['prepend-section'], 'el-input-group__prepend', $style.noCornersRight]"
-					>
+					<div :class="[$style.iconStars, 'el-input-group__prepend', $style.noCornersRight]">
 						<AiStarsIcon />
 					</div>
 					<N8nInput
@@ -356,7 +353,7 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 					/>
 					<N8nIconButton
 						type="tertiary"
-						:class="['n8n-input', $style.closeButton /*$style.noCornersRight*/]"
+						:class="['n8n-input', $style.closeButton]"
 						outline="false"
 						icon="xmark"
 						size="xsmall"
@@ -371,7 +368,7 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 						"
 					/>
 				</div>
-				<div v-else :class="$style.displayFlex">
+				<div v-else>
 					<ParameterInputWrapper
 						ref="parameterInputWrapper"
 						:parameter="parameter"
@@ -398,12 +395,7 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 					>
 						<template v-if="canBeContentOverride && isSingleLineInput" #overrideButton>
 							<N8nButton
-								:class="[
-									'n8n-input',
-									$style.overrideButton,
-									// $style.overrideButtonInLine,
-									// $style.noCornersLeft,
-								]"
+								:class="[$style.overrideButton]"
 								type="tertiary"
 								@click="
 									() => {
@@ -453,10 +445,6 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 	}
 }
 
-.displayFlex {
-	display: flex;
-}
-
 .contentOverride {
 	display: flex;
 	gap: var(--spacing-4xs);
@@ -484,6 +472,7 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 
 .overrideButtonInOptions {
 	position: relative;
+	// To connect to input panel below the button
 	top: 1px;
 }
 
@@ -497,7 +486,7 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 	border-bottom-left-radius: 0;
 }
 
-.prepend-section {
+.iconStars {
 	align-self: center;
 	padding-left: 8px;
 	width: 22px;
diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue
index 384b16a6fb89c..e4bf67fa2ee8e 100644
--- a/packages/editor-ui/src/components/ParameterInputWrapper.vue
+++ b/packages/editor-ui/src/components/ParameterInputWrapper.vue
@@ -258,7 +258,6 @@ defineExpose({
 .parameterInput {
 	display: flex;
 	flex-direction: column;
-	flex-grow: 1;
 	gap: var(--spacing-4xs);
 }
 

From 1be8e3c6393153df0f97cd3f2243eb9f28ef7269 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Mon, 13 Jan 2025 16:57:30 +0100
Subject: [PATCH 09/82] comments

---
 packages/editor-ui/src/components/ParameterInput.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index ea01387e800f4..e6434e97a656d 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -967,7 +967,7 @@ const isSingleLineInput = computed(() => {
 
 	/**
 	 * There is an awkward edge case here with text boxes that automatically
-	 * adjust their rowCount based on content:
+	 * adjust their row count based on their content:
 	 *
 	 * If we move the overrideButton to the options row due to going multiline,
 	 * the text area gains more width and might return to single line.
@@ -1782,7 +1782,7 @@ onUpdated(async () => {
 
 .overrideButtonStandalone {
 	position: relative;
-	// This is to balance for the extra margin on the switch
+	/* This is to balance for the extra margin on the switch */
 	top: -2px;
 }
 

From 437a15ff1865a133c2e8478780bb023c443ba13f Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Tue, 14 Jan 2025 15:50:22 +0100
Subject: [PATCH 10/82] Add and integrate components

---
 .../components/N8nTagList/TagList.stories.ts  |  96 +++++++++++++++++
 .../src/components/N8nTagList/TagList.vue     |  88 +++++++++++++++
 .../src/components/N8nTagList/index.ts        |   3 +
 .../N8nTagsSelector/TagsSelector.stories.ts   |  42 ++++++++
 .../N8nTagsSelector/TagsSelector.vue          |  65 +++++++++++
 .../src/components/N8nTagsSelector/index.ts   |   3 +
 .../design-system/src/components/index.ts     |   2 +
 .../src/components/ParameterInputFull.vue     | 102 ++++++++++++++----
 8 files changed, 382 insertions(+), 19 deletions(-)
 create mode 100644 packages/design-system/src/components/N8nTagList/TagList.stories.ts
 create mode 100644 packages/design-system/src/components/N8nTagList/TagList.vue
 create mode 100644 packages/design-system/src/components/N8nTagList/index.ts
 create mode 100644 packages/design-system/src/components/N8nTagsSelector/TagsSelector.stories.ts
 create mode 100644 packages/design-system/src/components/N8nTagsSelector/TagsSelector.vue
 create mode 100644 packages/design-system/src/components/N8nTagsSelector/index.ts

diff --git a/packages/design-system/src/components/N8nTagList/TagList.stories.ts b/packages/design-system/src/components/N8nTagList/TagList.stories.ts
new file mode 100644
index 0000000000000..487d6798efab9
--- /dev/null
+++ b/packages/design-system/src/components/N8nTagList/TagList.stories.ts
@@ -0,0 +1,96 @@
+import { action } from '@storybook/addon-actions';
+import type { StoryFn } from '@storybook/vue3';
+
+import N8nTagList from './TagList.vue';
+
+export default {
+	title: 'Modules/TagList',
+	component: N8nTagList,
+	argTypes: {},
+	parameters: {
+		backgrounds: { default: '--color-background-light' },
+	},
+};
+
+const methods = {
+	onChange: action('change'),
+	onSubmit: action('submit'),
+};
+
+const Template: StoryFn = (args, { argTypes }) => ({
+	setup: () => ({ args }),
+	props: Object.keys(argTypes),
+	components: {
+		N8nTagList,
+	},
+	template: '<n8n-tag-list v-bind="args" />',
+	methods,
+});
+
+export const TagList = Template.bind({});
+TagList.args = {
+	columnView: true,
+	inputs: [
+		{
+			name: 'email',
+			properties: {
+				label: 'Your Email',
+				type: 'email',
+				required: true,
+				initialValue: 'test@test.com',
+			},
+		},
+		{
+			name: 'password',
+			properties: {
+				label: 'Your Password',
+				type: 'password',
+				required: true,
+			},
+		},
+		{
+			name: 'nickname',
+			properties: {
+				label: 'Your Nickname',
+				placeholder: 'Monty',
+			},
+		},
+		{
+			name: 'opts',
+			properties: {
+				type: 'select',
+				label: 'Opts',
+				options: [
+					{
+						label: 'Opt1',
+						value: 'opt1',
+					},
+					{
+						label: 'Opt2',
+						value: 'opt2',
+					},
+				],
+			},
+		},
+		{
+			name: 'agree',
+			properties: {
+				type: 'checkbox',
+				label:
+					'Signup for newsletter and somebody from our marketing team will get in touch with you as soon as possible. You will not spam you, just want to send you some love every now and then ❤️',
+				labelSize: 'small',
+				tooltipText: 'Check this if you agree to be contacted by our marketing team',
+			},
+		},
+		{
+			name: 'activate',
+			properties: {
+				type: 'toggle',
+				label: 'Activated',
+				activeColor: '#13ce66',
+				inactiveColor: '#8899AA',
+				tooltipText: 'Check this if you agree to be contacted by our marketing team',
+			},
+		},
+	],
+};
diff --git a/packages/design-system/src/components/N8nTagList/TagList.vue b/packages/design-system/src/components/N8nTagList/TagList.vue
new file mode 100644
index 0000000000000..de55048eb4cff
--- /dev/null
+++ b/packages/design-system/src/components/N8nTagList/TagList.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts" generic="Item extends { name: string }">
+import { computed } from 'vue';
+
+import N8nTagsSelector from '../N8nTagsSelector';
+
+defineSlots<{
+	// selector?: (props: Pick<Item, 'name'>) => unknown;
+	displayItem: (props: Item) => unknown;
+}>();
+
+type TagListProps = {
+	inputs?: Item[];
+	columnView?: boolean;
+	verticalSpacing?: '' | 'xs' | 's' | 'm' | 'l' | 'xl';
+};
+
+const props = withDefaults(defineProps<TagListProps>(), {
+	inputs: () => [],
+	columnView: false,
+	verticalSpacing: '',
+});
+
+const emit = defineEmits<{
+	itemDeclared: [name: string];
+	itemUndeclared: [name: string];
+}>();
+
+const selectedItems = defineModel<string[]>({ required: true });
+const selectableItems = computed(() =>
+	props.inputs.filter((item) => !selectedItems.value.includes(item.name)),
+);
+const inputMap = computed(() => Object.fromEntries(props.inputs.map((x) => [x.name, x])));
+
+function removeItem(name: string) {
+	const index = selectedItems.value.indexOf(name);
+	if (index !== -1) {
+		selectedItems.value.splice(index, 1);
+	}
+}
+</script>
+
+<template>
+	<div>
+		<N8nTagsSelector v-model="selectedItems" :inputs="props.inputs.map((x) => x.name)" />
+		<div v-for="name in selectedItems" :class="$style.slotComboContainer" :key="name">
+			<N8nIconButton
+				type="tertiary"
+				text
+				:class="$style.slotRemoveIcon"
+				size="mini"
+				icon="trash"
+				:data-test-id="`tag-listremove-field-button-${name}`"
+				@click="removeItem(name)"
+			/>
+			<div :class="$style.slotContainer">
+				<slot name="displayItem" v-bind="inputMap[name]">{ Empty TagList slot}</slot>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" module>
+.slotComboContainer {
+	display: flex;
+	flex-direction: row;
+	flex-grow: 1;
+	margin-top: var(--spacing-2xs);
+}
+
+.slotContainer {
+	flex-grow: 1;
+}
+
+.slotRemoveIcon {
+	// flex-shrink: 1;
+}
+
+.grid {
+	display: grid;
+	grid-row-gap: var(--spacing-s);
+	grid-column-gap: var(--spacing-2xs);
+}
+
+.gridMulti {
+	composes: grid;
+	grid-template-columns: repeat(2, 1fr);
+}
+</style>
diff --git a/packages/design-system/src/components/N8nTagList/index.ts b/packages/design-system/src/components/N8nTagList/index.ts
new file mode 100644
index 0000000000000..70fe849045e11
--- /dev/null
+++ b/packages/design-system/src/components/N8nTagList/index.ts
@@ -0,0 +1,3 @@
+import N8nTagList from './TagList.vue';
+
+export default N8nTagList;
diff --git a/packages/design-system/src/components/N8nTagsSelector/TagsSelector.stories.ts b/packages/design-system/src/components/N8nTagsSelector/TagsSelector.stories.ts
new file mode 100644
index 0000000000000..93be90296b2b1
--- /dev/null
+++ b/packages/design-system/src/components/N8nTagsSelector/TagsSelector.stories.ts
@@ -0,0 +1,42 @@
+import { action } from '@storybook/addon-actions';
+import type { StoryFn } from '@storybook/vue3';
+import { ref, watch } from 'vue';
+
+import N8nTagsSelector from './TagsSelector.vue';
+
+export default {
+	title: 'Modules/TagsSelector',
+	component: N8nTagsSelector,
+	argTypes: {},
+	parameters: {
+		backgrounds: { default: '--color-background-light' },
+	},
+};
+
+export const TagsSelector: StoryFn = (args, { argTypes }) => ({
+	setup() {
+		const model = ref(args.selectedTags);
+
+		// Optional: Keeps v-model in sync with storybook args
+		watch(
+			() => args.selectedTags,
+			(val) => {
+				model.value = val;
+			},
+		);
+
+		const { model: dropped, ...rest } = args;
+
+		return { args: rest, model };
+	},
+	props: Object.keys(argTypes),
+	components: {
+		N8nTagsSelector,
+	},
+	template: '<n8n-tags-selector v-model="model" v-bind="args" />',
+	args: {
+		selectedTags: ['a tag', 'another tag'],
+		columnView: true,
+		inputs: ['a clickable tag'],
+	},
+});
diff --git a/packages/design-system/src/components/N8nTagsSelector/TagsSelector.vue b/packages/design-system/src/components/N8nTagsSelector/TagsSelector.vue
new file mode 100644
index 0000000000000..78b99d9dd7d56
--- /dev/null
+++ b/packages/design-system/src/components/N8nTagsSelector/TagsSelector.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { computed, onMounted } from 'vue';
+
+type TagsSelectorProps = {
+	inputs?: string[];
+	columnView?: boolean;
+};
+
+const props = withDefaults(defineProps<TagsSelectorProps>(), {
+	inputs: () => [],
+	columnView: false,
+});
+
+const selectedItemsModel = defineModel<string[]>({ required: true });
+
+const visibleTags = computed(() => {
+	return props.inputs.filter((tag) => !selectedItemsModel.value.includes(tag));
+});
+
+function addToSelectedItems(name: string) {
+	selectedItemsModel.value.push(name);
+	selectedItemsModel.value.sort();
+}
+
+onMounted(() => {
+	selectedItemsModel.value.sort();
+});
+</script>
+
+<template>
+	<div :class="$style.container">
+		<span
+			v-for="name in visibleTags"
+			:key="name"
+			:class="[$style.cell]"
+			@click="addToSelectedItems(name)"
+		>
+			+ Add a {{ name }}
+		</span>
+	</div>
+</template>
+
+<style lang="scss" module>
+.container {
+	width: 100%;
+	flex-wrap: wrap;
+	display: flex;
+}
+.cell {
+	display: flex;
+	margin: var(--spacing-4xs) var(--spacing-3xs) 0 0;
+
+	min-width: max-content;
+	border-radius: var(--border-radius-base);
+	font-size: small;
+	background-color: var(--color-ndv-background);
+	color: var(--text-color-dark);
+
+	cursor: pointer;
+
+	:hover {
+		color: var(--color-primary);
+	}
+}
+</style>
diff --git a/packages/design-system/src/components/N8nTagsSelector/index.ts b/packages/design-system/src/components/N8nTagsSelector/index.ts
new file mode 100644
index 0000000000000..581aa3e5d7b4d
--- /dev/null
+++ b/packages/design-system/src/components/N8nTagsSelector/index.ts
@@ -0,0 +1,3 @@
+import N8nTagsSelector from './TagsSelector.vue';
+
+export default N8nTagsSelector;
diff --git a/packages/design-system/src/components/index.ts b/packages/design-system/src/components/index.ts
index ce4360fe4667d..d084d0535091d 100644
--- a/packages/design-system/src/components/index.ts
+++ b/packages/design-system/src/components/index.ts
@@ -45,7 +45,9 @@ export { default as N8nSticky } from './N8nSticky';
 export { default as N8nResizeableSticky } from './N8nResizeableSticky';
 export { default as N8nTabs } from './N8nTabs';
 export { default as N8nTag } from './N8nTag';
+export { default as N8nTagList } from './N8nTagList';
 export { default as N8nTags } from './N8nTags';
+export { default as N8nTagsSelector } from './N8nTagsSelector';
 export { default as N8nText } from './N8nText';
 export { default as N8nTooltip } from './N8nTooltip';
 export { default as N8nTree } from './N8nTree';
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index c1ae6614482ea..597548aff0d23 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ComputedRef, ref, useTemplateRef, watch } from 'vue';
+import { computed, type ComputedRef, onMounted, ref, useTemplateRef, watch } from 'vue';
 import type { IUpdateInformation } from '@/Interface';
 
 import DraggableTarget from '@/components/DraggableTarget.vue';
@@ -17,7 +17,7 @@ import {
 	type IParameterLabel,
 	type NodeParameterValueType,
 } from 'n8n-workflow';
-import { N8nButton, N8nInputLabel } from 'n8n-design-system';
+import { N8nButton, N8nInputLabel, N8nTagList } from 'n8n-design-system';
 import AiStarsIcon from './AiStarsIcon.vue';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 
@@ -66,7 +66,7 @@ const fromAiOverride = {
 	providers: {
 		marker: '/* n8n-auto-generated-override */',
 		key: (props: Props) => props.parameter.name, // todo - need to check these
-		type: (props: Props) => 'string', // todo - infer boolean, number and other matching types
+		type: (props: Props) => fieldTypeToFromAiType(props), // todo - infer boolean, number and other matching types
 	},
 	extraProps: {
 		description: {
@@ -75,23 +75,40 @@ const fromAiOverride = {
 		},
 	},
 };
+const selectedFields = ref<string[]>([]);
+// const extraPropValues = ref<Record<keyof (typeof fromAiOverride)['extraProps'], string>>(
+const extraPropValues = ref<Record<string, string>>(
+	Object.fromEntries(Object.entries(fromAiOverride.extraProps).map((x) => [x[0], x[1].default])),
+);
+
+function fieldTypeToFromAiType(props: Props) {
+	switch (props.parameter.type) {
+		case 'boolean':
+			return 'boolean';
+		case 'number':
+			return 'number';
+		case 'string':
+		default:
+			return 'string';
+	}
+}
 
-function buildValueFromOverride(
-	providedExtraProps: (typeof fromAiOverride)['extraProps'], // todo generic-ify
-	includeMarker: boolean,
-) {
+function buildValueFromOverride(excludeMarker: boolean) {
 	const {
 		providers: { marker, key, type },
 		extraProps,
 	} = fromAiOverride;
-	return `={{ ${includeMarker ? marker : ''} $fromAI('${key(props)}', '${providedExtraProps.description.default ?? extraProps.description}', '${type(props)}') }}`;
+	const providedExtraProps = Object.fromEntries(
+		Object.entries(extraPropValues.value).filter((x) => selectedFields.value.includes(x[0])),
+	);
+	return `={{ ${excludeMarker ? '' : marker} $fromAI('${key(props)}', '${providedExtraProps?.description ?? extraProps.description.default}', '${type(props)}') }}`;
 }
 
 function isOverrideValue(s: string) {
 	return s.startsWith('={{ /* n8n-auto-generated-override */ $fromAI(');
 }
 
-function parseOverrides(s: string) {
+function parseOverrides(s: string): Partial<typeof extraPropValues.value> | null {
 	/*
 		Approaches:
 		- Smart and boring: Reuse packages/core/src/CreateNodeAsTool.ts - unclear where to move it
@@ -101,14 +118,19 @@ function parseOverrides(s: string) {
 
 	const fromAI = (...args: unknown[]) => args;
 	const fns = `const $fromAI = ${fromAI}; const $fromAi = ${fromAI}; const $fromai = ${fromAI};`;
-	const cursor = '={{ /* n8n-auto-generated-override */ $fromAI('.length;
+	const cursor = '={{ /* n8n-auto-generated-override */ '.length;
 	const end = '}}'.length;
-	// `eval?.` is an indirect evaluation, outside of local scope
-	const params: unknown[] = eval?.(`${fns} ${s.slice(cursor, -end)}`) ?? [];
+
+	let params: unknown[] = [];
+	try {
+		// `eval?.` is an indirect evaluation, outside of local scope
+		const code = `${fns} ${s.slice(cursor, -end)}`;
+		params = eval?.(code) ?? [];
+	} catch (e) {}
 	return {
-		key: params[0] ?? '',
-		description: params[1] ?? '',
-		type: params[2] ?? undefined,
+		// key: params[0],
+		description: params[1] as string | undefined,
+		// type: (params[2] as string) ?? undefined,
 		// todo - parse the string to get the values
 	};
 }
@@ -151,6 +173,18 @@ const isReadOnlyParameter = computed(
 		props.isReadOnly || props.parameter.disabledOptions !== undefined || isContentOverride.value,
 );
 
+onMounted(() => {
+	if (isOverrideValue(props.value?.toString() ?? '')) {
+		const x = parseOverrides(props.value?.toString() ?? '') ?? {};
+		for (const [key, value] of Object.entries(x)) {
+			if (value === undefined) continue;
+
+			extraPropValues.value[key] = value;
+			selectedFields.value.push(key);
+		}
+	}
+});
+
 function onFocus() {
 	focused.value = true;
 	if (!props.parameter.noDataExpression) {
@@ -313,7 +347,7 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 					() => {
 						valueChanged({
 							name: props.path,
-							value: buildValueFromOverride(fromAiOverride.extraProps, true),
+							value: buildValueFromOverride(false),
 						});
 					}
 				"
@@ -362,7 +396,7 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 								valueChanged({
 									node: node?.name,
 									name: props.path,
-									value: buildValueFromOverride(fromAiOverride.extraProps, false),
+									value: buildValueFromOverride(true),
 								});
 							}
 						"
@@ -401,7 +435,7 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 									() => {
 										valueChanged({
 											name: props.path,
-											value: buildValueFromOverride(fromAiOverride.extraProps, true),
+											value: buildValueFromOverride(false),
 										});
 									}
 								"
@@ -430,7 +464,37 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 				@menu-expanded="onMenuExpanded"
 			/>
 		</div>
+		<N8nTagList
+			v-if="isContentOverride"
+			v-model="selectedFields"
+			:inputs="Object.keys(fromAiOverride.extraProps).map((x) => ({ name: x }))"
+		>
+			<template #displayItem="{ name }">
+				<ParameterInputFull
+					:parameter="{
+						name: name,
+						displayName: name[0].toUpperCase() + name.slice(1),
+						type: 'string',
+						default: '',
+						noDataExpression: true,
+					}"
+					:value="extraPropValues[name]"
+					:path="`${path}.tags.${name}`"
+					input-size="small"
+					@update="
+						(x) => {
+							extraPropValues[name] = x.value as never;
+							valueChanged({
+								name: props.path,
+								value: buildValueFromOverride(false),
+							});
+						}
+					"
+				/>
+			</template>
+		</N8nTagList>
 	</N8nInputLabel>
+
 	<!-- badges to add extra fields from overrides go here -->
 </template>
 
@@ -466,7 +530,7 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 	background: var(--color-background-base);
 
 	&:hover {
-		background: var(--color-primary);
+		background: var(--color-secondary);
 	}
 }
 

From 8c41e5fac0cb965f2423b7bf6f6315419b91bf42 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Tue, 14 Jan 2025 16:53:07 +0100
Subject: [PATCH 11/82] bug fixes

---
 .../src/components/ParameterInputFull.vue     | 33 ++++++++++++-------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 597548aff0d23..a1101de6a4a79 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -59,6 +59,8 @@ const focused = ref(false);
 const menuExpanded = ref(false);
 const forceShowExpression = ref(false);
 
+const FROM_AI_DENYLIST = ['toolWorkflow', 'toolCode', 'toolHttpRequest'];
+
 const fromAiOverride = {
 	overridePlaceholder: 'Defined automatically by the model',
 	icon: 'plus',
@@ -73,7 +75,7 @@ const fromAiOverride = {
 			default: '',
 			placeholder: 'Description of how the model should define this value',
 		},
-	},
+	} as Record<string, { default: string; placeholder: string }>,
 };
 const selectedFields = ref<string[]>([]);
 // const extraPropValues = ref<Record<keyof (typeof fromAiOverride)['extraProps'], string>>(
@@ -136,16 +138,23 @@ function parseOverrides(s: string): Partial<typeof extraPropValues.value> | null
 }
 
 const isContentOverride = computed(() => isOverrideValue(props.value?.toString() ?? ''));
-const canBeContentOverride = computed(() =>
-	node.value?.type === undefined
-		? false
-		: nodeTypesStore
-				.getNodeType(node.value.type, node.value.typeVersion)
-				?.codex?.categories?.includes('AI') &&
-			(!props.parameter.noDataExpression || props.parameter.typeOptions?.editor !== undefined) &&
-			!isResourceLocator.value &&
-			'options' !== props.parameter.type,
-);
+const canBeContentOverride = computed(() => {
+	if (!node.value) return false;
+
+	const nodeType = nodeTypesStore.getNodeType(node.value.type, node.value.typeVersion);
+
+	if (FROM_AI_DENYLIST.some((x) => nodeType?.name?.endsWith(x) ?? false)) return false;
+
+	const codex = nodeType?.codex;
+	if (!codex?.categories?.includes('AI') || !codex?.subcategories?.AI?.includes('Tools'))
+		return false;
+
+	return (
+		(!props.parameter.noDataExpression || props.parameter.typeOptions?.editor !== undefined) &&
+		!isResourceLocator.value &&
+		'options' !== props.parameter.type
+	);
+});
 
 const ndvStore = useNDVStore();
 const nodeTypesStore = useNodeTypesStore();
@@ -177,7 +186,7 @@ onMounted(() => {
 	if (isOverrideValue(props.value?.toString() ?? '')) {
 		const x = parseOverrides(props.value?.toString() ?? '') ?? {};
 		for (const [key, value] of Object.entries(x)) {
-			if (value === undefined) continue;
+			if (value === undefined || value === fromAiOverride.extraProps[key].default) continue;
 
 			extraPropValues.value[key] = value;
 			selectedFields.value.push(key);

From 904915f5b1f8848d3e30fb0f49872a0cdc97dc30 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Wed, 15 Jan 2025 11:55:00 +0100
Subject: [PATCH 12/82] Extract override class

---
 .../src/components/ParameterInputFull.vue     | 143 ++++--------------
 .../editor-ui/src/utils/parameterOverrides.ts | 138 +++++++++++++++++
 2 files changed, 168 insertions(+), 113 deletions(-)
 create mode 100644 packages/editor-ui/src/utils/parameterOverrides.ts

diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index a1101de6a4a79..31bf0b452ffa9 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -19,6 +19,7 @@ import {
 } from 'n8n-workflow';
 import { N8nButton, N8nInputLabel, N8nTagList } from 'n8n-design-system';
 import AiStarsIcon from './AiStarsIcon.vue';
+import { type ParameterOverride, makeOverrideValue } from '../utils/parameterOverrides';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 
 type Props = {
@@ -54,112 +55,40 @@ const emit = defineEmits<{
 const i18n = useI18n();
 const toast = useToast();
 
+const ndvStore = useNDVStore();
+const nodeTypesStore = useNodeTypesStore();
+
 const eventBus = ref(createEventBus());
 const focused = ref(false);
 const menuExpanded = ref(false);
 const forceShowExpression = ref(false);
 
-const FROM_AI_DENYLIST = ['toolWorkflow', 'toolCode', 'toolHttpRequest'];
-
-const fromAiOverride = {
-	overridePlaceholder: 'Defined automatically by the model',
-	icon: 'plus',
-	output: '={{ [marker] $fromAI([key], [type], [default], [description]) }}',
-	providers: {
-		marker: '/* n8n-auto-generated-override */',
-		key: (props: Props) => props.parameter.name, // todo - need to check these
-		type: (props: Props) => fieldTypeToFromAiType(props), // todo - infer boolean, number and other matching types
-	},
-	extraProps: {
-		description: {
-			default: '',
-			placeholder: 'Description of how the model should define this value',
-		},
-	} as Record<string, { default: string; placeholder: string }>,
-};
 const selectedFields = ref<string[]>([]);
-// const extraPropValues = ref<Record<keyof (typeof fromAiOverride)['extraProps'], string>>(
-const extraPropValues = ref<Record<string, string>>(
-	Object.fromEntries(Object.entries(fromAiOverride.extraProps).map((x) => [x[0], x[1].default])),
-);
 
-function fieldTypeToFromAiType(props: Props) {
-	switch (props.parameter.type) {
-		case 'boolean':
-			return 'boolean';
-		case 'number':
-			return 'number';
-		case 'string':
-		default:
-			return 'string';
-	}
-}
+const node = computed(() => ndvStore.activeNode);
+const parameterOverrides = ref<ParameterOverride | null>(
+	makeOverrideValue(
+		props,
+		node.value && nodeTypesStore.getNodeType(node.value.type, node.value.typeVersion),
+	),
+);
 
-function buildValueFromOverride(excludeMarker: boolean) {
-	const {
-		providers: { marker, key, type },
-		extraProps,
-	} = fromAiOverride;
-	const providedExtraProps = Object.fromEntries(
-		Object.entries(extraPropValues.value).filter((x) => selectedFields.value.includes(x[0])),
+onMounted(() => {
+	parameterOverrides.value = makeOverrideValue(
+		props,
+		node.value && nodeTypesStore.getNodeType(node.value.type, node.value.typeVersion),
 	);
-	return `={{ ${excludeMarker ? '' : marker} $fromAI('${key(props)}', '${providedExtraProps?.description ?? extraProps.description.default}', '${type(props)}') }}`;
-}
-
-function isOverrideValue(s: string) {
-	return s.startsWith('={{ /* n8n-auto-generated-override */ $fromAI(');
-}
-
-function parseOverrides(s: string): Partial<typeof extraPropValues.value> | null {
-	/*
-		Approaches:
-		- Smart and boring: Reuse packages/core/src/CreateNodeAsTool.ts - unclear where to move it
-		- Fun and dangerous: Use eval, see below
-	*/
-	if (!isOverrideValue(s)) return null;
-
-	const fromAI = (...args: unknown[]) => args;
-	const fns = `const $fromAI = ${fromAI}; const $fromAi = ${fromAI}; const $fromai = ${fromAI};`;
-	const cursor = '={{ /* n8n-auto-generated-override */ '.length;
-	const end = '}}'.length;
-
-	let params: unknown[] = [];
-	try {
-		// `eval?.` is an indirect evaluation, outside of local scope
-		const code = `${fns} ${s.slice(cursor, -end)}`;
-		params = eval?.(code) ?? [];
-	} catch (e) {}
-	return {
-		// key: params[0],
-		description: params[1] as string | undefined,
-		// type: (params[2] as string) ?? undefined,
-		// todo - parse the string to get the values
-	};
-}
+});
 
-const isContentOverride = computed(() => isOverrideValue(props.value?.toString() ?? ''));
+const isContentOverride = computed(() =>
+	parameterOverrides.value?.isOverrideValue(props.value?.toString() ?? ''),
+);
 const canBeContentOverride = computed(() => {
-	if (!node.value) return false;
-
-	const nodeType = nodeTypesStore.getNodeType(node.value.type, node.value.typeVersion);
-
-	if (FROM_AI_DENYLIST.some((x) => nodeType?.name?.endsWith(x) ?? false)) return false;
+	if (!node.value || isResourceLocator.value) return false;
 
-	const codex = nodeType?.codex;
-	if (!codex?.categories?.includes('AI') || !codex?.subcategories?.AI?.includes('Tools'))
-		return false;
-
-	return (
-		(!props.parameter.noDataExpression || props.parameter.typeOptions?.editor !== undefined) &&
-		!isResourceLocator.value &&
-		'options' !== props.parameter.type
-	);
+	return parameterOverrides.value !== null;
 });
 
-const ndvStore = useNDVStore();
-const nodeTypesStore = useNodeTypesStore();
-
-const node = computed(() => ndvStore.activeNode);
 const hint = computed(() => i18n.nodeText().hint(props.parameter, props.path));
 
 const isResourceLocator = computed(
@@ -179,21 +108,9 @@ const showExpressionSelector = computed(() =>
 
 const isReadOnlyParameter = computed(
 	() =>
-		props.isReadOnly || props.parameter.disabledOptions !== undefined || isContentOverride.value,
+		props.isReadOnly || props.parameter.disabledOptions !== undefined || !!isContentOverride.value,
 );
 
-onMounted(() => {
-	if (isOverrideValue(props.value?.toString() ?? '')) {
-		const x = parseOverrides(props.value?.toString() ?? '') ?? {};
-		for (const [key, value] of Object.entries(x)) {
-			if (value === undefined || value === fromAiOverride.extraProps[key].default) continue;
-
-			extraPropValues.value[key] = value;
-			selectedFields.value.push(key);
-		}
-	}
-});
-
 function onFocus() {
 	focused.value = true;
 	if (!props.parameter.noDataExpression) {
@@ -356,7 +273,7 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 					() => {
 						valueChanged({
 							name: props.path,
-							value: buildValueFromOverride(false),
+							value: parameterOverrides?.buildValueFromOverride(props, false),
 						});
 					}
 				"
@@ -389,7 +306,7 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 						<AiStarsIcon />
 					</div>
 					<N8nInput
-						:model-value="fromAiOverride.overridePlaceholder"
+						:model-value="parameterOverrides?.overridePlaceholder"
 						disabled
 						type="text"
 						size="small"
@@ -405,7 +322,7 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 								valueChanged({
 									node: node?.name,
 									name: props.path,
-									value: buildValueFromOverride(true),
+									value: parameterOverrides?.buildValueFromOverride(props, true),
 								});
 							}
 						"
@@ -444,7 +361,7 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 									() => {
 										valueChanged({
 											name: props.path,
-											value: buildValueFromOverride(false),
+											value: parameterOverrides?.buildValueFromOverride(props, false),
 										});
 									}
 								"
@@ -476,7 +393,7 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 		<N8nTagList
 			v-if="isContentOverride"
 			v-model="selectedFields"
-			:inputs="Object.keys(fromAiOverride.extraProps).map((x) => ({ name: x }))"
+			:inputs="Object.keys(parameterOverrides?.extraProps ?? {}).map((x) => ({ name: x }))"
 		>
 			<template #displayItem="{ name }">
 				<ParameterInputFull
@@ -487,15 +404,15 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 						default: '',
 						noDataExpression: true,
 					}"
-					:value="extraPropValues[name]"
+					:value="parameterOverrides?.extraPropValues[name]"
 					:path="`${path}.tags.${name}`"
 					input-size="small"
 					@update="
 						(x) => {
-							extraPropValues[name] = x.value as never;
+							if (parameterOverrides) parameterOverrides.extraPropValues[name] = x.value as never;
 							valueChanged({
 								name: props.path,
-								value: buildValueFromOverride(false),
+								value: parameterOverrides?.buildValueFromOverride(props, false),
 							});
 						}
 					"
diff --git a/packages/editor-ui/src/utils/parameterOverrides.ts b/packages/editor-ui/src/utils/parameterOverrides.ts
new file mode 100644
index 0000000000000..362053ae18d5e
--- /dev/null
+++ b/packages/editor-ui/src/utils/parameterOverrides.ts
@@ -0,0 +1,138 @@
+import type { INodeTypeDescription, NodeParameterValueType } from 'n8n-workflow';
+
+export interface ParameterOverride {
+	readonly overridePlaceholder: string;
+	readonly extraProps: Record<string, ExtraPropValue>;
+	extraPropValues: Partial<Record<keyof ParameterOverride['extraProps'], NodeParameterValueType>>;
+	buildValueFromOverride: (props: Context, excludeMarker: boolean) => string;
+	isOverrideValue: (s: string) => boolean;
+	parseOverrides: (s: string) => Partial<Record<string, string>> | null;
+}
+
+type Context = {
+	parameter: {
+		name: string;
+		type: string;
+		noDataExpression?: boolean;
+		typeOptions?: { editor?: string };
+	};
+	value: NodeParameterValueType;
+};
+
+type FromAiOverrideExtraProps = 'description';
+type ExtraPropValue = {
+	default: string;
+	placeholder: string;
+};
+
+export class FromAiOverride implements ParameterOverride {
+	static readonly MARKER = '/* n8n-auto-generated-override */';
+
+	static readonly DENYLIST = ['toolWorkflow', 'toolCode', 'toolHttpRequest'];
+
+	readonly overridePlaceholder = 'Defined automatically by the model';
+
+	readonly providers = {
+		key: (props: Context) => props.parameter.name,
+		type: (props: Context) => this.fieldTypeToFromAiType(props),
+	};
+
+	readonly extraProps: Record<FromAiOverrideExtraProps, ExtraPropValue> = {
+		description: {
+			default: '',
+			placeholder: 'Description of how the model should define this value',
+		},
+	};
+
+	extraPropValues: Partial<Record<FromAiOverrideExtraProps, NodeParameterValueType>> = {};
+
+	private fieldTypeToFromAiType(props: Context) {
+		switch (props.parameter.type) {
+			case 'boolean':
+				return 'boolean';
+			case 'number':
+				return 'number';
+			case 'string':
+			default:
+				return 'string';
+		}
+	}
+
+	static isOverrideValue(s: string) {
+		return s.startsWith(`={{ ${FromAiOverride.MARKER} $fromAI(`);
+	}
+
+	isOverrideValue = FromAiOverride.isOverrideValue;
+
+	buildValueFromOverride(props: Context, excludeMarker: boolean) {
+		const { key, type } = this.providers;
+		// const providedExtraProps = Object.fromEntries(
+		// 	Object.entries(extraPropValues ?? {}).filter((x) => selectedFields.includes(x[0])),
+		// );
+		return `={{ ${excludeMarker ? '' : FromAiOverride.MARKER} $fromAI('${key(props)}', '${this.extraPropValues?.description?.toString() ?? this.extraProps.description.default}', '${type(props)}') }}`;
+	}
+
+	parseOverrides(s: string): Record<keyof typeof this.extraProps, string | undefined> | null {
+		/*
+			Approaches:
+			- Smart and boring: Reuse packages/core/src/CreateNodeAsTool.ts - unclear where to move it
+			- Fun and dangerous: Use eval, see below
+		*/
+		if (!this.isOverrideValue(s)) return null;
+
+		const fromAI = (...args: unknown[]) => args;
+		const fns = `const $fromAI = ${fromAI}; const $fromAi = ${fromAI}; const $fromai = ${fromAI};`;
+		const cursor = '={{ /* n8n-auto-generated-override */ '.length;
+		const end = '}}'.length;
+
+		let params: unknown[] = [];
+		try {
+			// `eval?.` is an indirect evaluation, outside of local scope
+			const code = `${fns} ${s.slice(cursor, -end)}`;
+			params = eval?.(code) ?? [];
+		} catch (e) {}
+		return {
+			// key: params[0],
+			description: params[1] as string | undefined,
+			// type: params[2],
+		};
+	}
+
+	static canBeContentOverride(props: Context, nodeType: INodeTypeDescription | null) {
+		if (FromAiOverride.DENYLIST.some((x) => nodeType?.name?.endsWith(x) ?? false)) return false;
+
+		const codex = nodeType?.codex;
+		if (!codex?.categories?.includes('AI') || !codex?.subcategories?.AI?.includes('Tools'))
+			return false;
+
+		return (
+			(!props.parameter.noDataExpression || props.parameter.typeOptions?.editor !== undefined) &&
+			'options' !== props.parameter.type
+		);
+	}
+}
+
+export function makeOverrideValue(
+	context: Context,
+	nodeType: INodeTypeDescription | null,
+): ParameterOverride | null {
+	if (!nodeType) return null;
+
+	const s = context.value?.toString();
+	if (FromAiOverride.canBeContentOverride(context, nodeType)) {
+		const fromAiOverride = new FromAiOverride();
+		const existingOverrides = fromAiOverride.parseOverrides(s ?? '');
+		for (const [key, value] of Object.entries(existingOverrides ?? {})) {
+			if (
+				value === undefined ||
+				value === fromAiOverride.extraProps[key as FromAiOverrideExtraProps].default
+			)
+				continue;
+
+			fromAiOverride.extraPropValues[key as FromAiOverrideExtraProps] = value;
+		}
+		return fromAiOverride;
+	}
+
+	return null;
+}

From fe81eab31d3bbefabb52d3f19abed634db14e007 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Wed, 15 Jan 2025 13:57:01 +0100
Subject: [PATCH 13/82] clean uo

---
 .../src/components/N8nTagList/TagList.vue     | 85 +++++++++++++------
 .../N8nTagsSelector/TagsSelector.stories.ts   | 42 ---------
 .../N8nTagsSelector/TagsSelector.vue          | 65 --------------
 .../src/components/N8nTagsSelector/index.ts   |  3 -
 .../design-system/src/components/index.ts     |  1 -
 .../src/components/ParameterInputFull.vue     | 31 +++----
 .../editor-ui/src/utils/parameterOverrides.ts | 18 ++--
 7 files changed, 79 insertions(+), 166 deletions(-)
 delete mode 100644 packages/design-system/src/components/N8nTagsSelector/TagsSelector.stories.ts
 delete mode 100644 packages/design-system/src/components/N8nTagsSelector/TagsSelector.vue
 delete mode 100644 packages/design-system/src/components/N8nTagsSelector/index.ts

diff --git a/packages/design-system/src/components/N8nTagList/TagList.vue b/packages/design-system/src/components/N8nTagList/TagList.vue
index de55048eb4cff..c39fe101a46e1 100644
--- a/packages/design-system/src/components/N8nTagList/TagList.vue
+++ b/packages/design-system/src/components/N8nTagList/TagList.vue
@@ -1,59 +1,68 @@
-<script setup lang="ts" generic="Item extends { name: string }">
+<script
+	setup
+	lang="ts"
+	generic="Value, Item extends { name: string; tooltip: string; defaultValue: Value }"
+>
 import { computed } from 'vue';
 
-import N8nTagsSelector from '../N8nTagsSelector';
-
 defineSlots<{
-	// selector?: (props: Pick<Item, 'name'>) => unknown;
 	displayItem: (props: Item) => unknown;
 }>();
 
 type TagListProps = {
-	inputs?: Item[];
-	columnView?: boolean;
-	verticalSpacing?: '' | 'xs' | 's' | 'm' | 'l' | 'xl';
+	inputs: Item[];
 };
 
 const props = withDefaults(defineProps<TagListProps>(), {
 	inputs: () => [],
-	columnView: false,
-	verticalSpacing: '',
 });
 
-const emit = defineEmits<{
-	itemDeclared: [name: string];
-	itemUndeclared: [name: string];
-}>();
+const selectedItems = defineModel<Record<string, Value>>({ required: true });
+const inputMap = computed(() => Object.fromEntries(props.inputs.map((x) => [x.name, x] as const)));
 
-const selectedItems = defineModel<string[]>({ required: true });
-const selectableItems = computed(() =>
-	props.inputs.filter((item) => !selectedItems.value.includes(item.name)),
-);
-const inputMap = computed(() => Object.fromEntries(props.inputs.map((x) => [x.name, x])));
+const visibleTags = computed(() => {
+	return props.inputs.filter((tag) => !selectedItems.value.hasOwnProperty(tag.name));
+});
+
+const sortedSelectedItems = computed(() => {
+	return Object.keys(selectedItems.value)
+		.map((name) => ({ name, item: inputMap.value[name] }))
+		.toSorted((a, b) => (a[0] < b[0] ? -1 : 1));
+});
+
+function addToSelectedItems(name: string) {
+	selectedItems.value[name] = inputMap.value[name].defaultValue;
+}
 
 function removeItem(name: string) {
-	const index = selectedItems.value.indexOf(name);
-	if (index !== -1) {
-		selectedItems.value.splice(index, 1);
-	}
+	delete selectedItems.value[name];
 }
 </script>
 
 <template>
 	<div>
-		<N8nTagsSelector v-model="selectedItems" :inputs="props.inputs.map((x) => x.name)" />
-		<div v-for="name in selectedItems" :class="$style.slotComboContainer" :key="name">
+		<div :class="$style.tagContainer">
+			<span
+				v-for="item in visibleTags.toSorted((a, b) => (a.name < b.name ? -1 : 1))"
+				:key="item.name"
+				:class="$style.tagCell"
+				@click="addToSelectedItems(item.name)"
+			>
+				+ Add a {{ item.name }}
+			</span>
+		</div>
+		<div v-for="item in sortedSelectedItems" :key="item.name" :class="$style.slotComboContainer">
 			<N8nIconButton
 				type="tertiary"
 				text
 				:class="$style.slotRemoveIcon"
 				size="mini"
 				icon="trash"
-				:data-test-id="`tag-listremove-field-button-${name}`"
-				@click="removeItem(name)"
+				:data-test-id="`tag-listremove-field-button-${item.name}`"
+				@click="removeItem(item.name)"
 			/>
 			<div :class="$style.slotContainer">
-				<slot name="displayItem" v-bind="inputMap[name]">{ Empty TagList slot}</slot>
+				<slot name="displayItem" v-bind="item.item">{ Empty TagList slot}</slot>
 			</div>
 		</div>
 	</div>
@@ -85,4 +94,26 @@ function removeItem(name: string) {
 	composes: grid;
 	grid-template-columns: repeat(2, 1fr);
 }
+
+.tagContainer {
+	width: 100%;
+	flex-wrap: wrap;
+	display: flex;
+}
+.tagCell {
+	display: flex;
+	margin: var(--spacing-4xs) var(--spacing-3xs) 0 0;
+
+	min-width: max-content;
+	border-radius: var(--border-radius-base);
+	font-size: small;
+	background-color: var(--color-ndv-background);
+	color: var(--text-color-dark);
+
+	cursor: pointer;
+
+	:hover {
+		color: var(--color-primary);
+	}
+}
 </style>
diff --git a/packages/design-system/src/components/N8nTagsSelector/TagsSelector.stories.ts b/packages/design-system/src/components/N8nTagsSelector/TagsSelector.stories.ts
deleted file mode 100644
index 93be90296b2b1..0000000000000
--- a/packages/design-system/src/components/N8nTagsSelector/TagsSelector.stories.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import type { StoryFn } from '@storybook/vue3';
-import { ref, watch } from 'vue';
-
-import N8nTagsSelector from './TagsSelector.vue';
-
-export default {
-	title: 'Modules/TagsSelector',
-	component: N8nTagsSelector,
-	argTypes: {},
-	parameters: {
-		backgrounds: { default: '--color-background-light' },
-	},
-};
-
-export const TagsSelector: StoryFn = (args, { argTypes }) => ({
-	setup() {
-		const model = ref(args.selectedTags);
-
-		// Optional: Keeps v-model in sync with storybook args
-		watch(
-			() => args.selectedTags,
-			(val) => {
-				model.value = val;
-			},
-		);
-
-		const { model: dropped, ...rest } = args;
-
-		return { args: rest, model };
-	},
-	props: Object.keys(argTypes),
-	components: {
-		N8nTagsSelector,
-	},
-	template: '<n8n-tags-selector v-model="model" v-bind="args" />',
-	args: {
-		selectedTags: ['a tag', 'another tag'],
-		columnView: true,
-		inputs: ['a clickable tag'],
-	},
-});
diff --git a/packages/design-system/src/components/N8nTagsSelector/TagsSelector.vue b/packages/design-system/src/components/N8nTagsSelector/TagsSelector.vue
deleted file mode 100644
index 78b99d9dd7d56..0000000000000
--- a/packages/design-system/src/components/N8nTagsSelector/TagsSelector.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted } from 'vue';
-
-type TagsSelectorProps = {
-	inputs?: string[];
-	columnView?: boolean;
-};
-
-const props = withDefaults(defineProps<TagsSelectorProps>(), {
-	inputs: () => [],
-	columnView: false,
-});
-
-const selectedItemsModel = defineModel<string[]>({ required: true });
-
-const visibleTags = computed(() => {
-	return props.inputs.filter((tag) => !selectedItemsModel.value.includes(tag));
-});
-
-function addToSelectedItems(name: string) {
-	selectedItemsModel.value.push(name);
-	selectedItemsModel.value.sort();
-}
-
-onMounted(() => {
-	selectedItemsModel.value.sort();
-});
-</script>
-
-<template>
-	<div :class="$style.container">
-		<span
-			v-for="name in visibleTags"
-			:key="name"
-			:class="[$style.cell]"
-			@click="addToSelectedItems(name)"
-		>
-			+ Add a {{ name }}
-		</span>
-	</div>
-</template>
-
-<style lang="scss" module>
-.container {
-	width: 100%;
-	flex-wrap: wrap;
-	display: flex;
-}
-.cell {
-	display: flex;
-	margin: var(--spacing-4xs) var(--spacing-3xs) 0 0;
-
-	min-width: max-content;
-	border-radius: var(--border-radius-base);
-	font-size: small;
-	background-color: var(--color-ndv-background);
-	color: var(--text-color-dark);
-
-	cursor: pointer;
-
-	:hover {
-		color: var(--color-primary);
-	}
-}
-</style>
diff --git a/packages/design-system/src/components/N8nTagsSelector/index.ts b/packages/design-system/src/components/N8nTagsSelector/index.ts
deleted file mode 100644
index 581aa3e5d7b4d..0000000000000
--- a/packages/design-system/src/components/N8nTagsSelector/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import N8nTagsSelector from './TagsSelector.vue';
-
-export default N8nTagsSelector;
diff --git a/packages/design-system/src/components/index.ts b/packages/design-system/src/components/index.ts
index d084d0535091d..85867660ffecb 100644
--- a/packages/design-system/src/components/index.ts
+++ b/packages/design-system/src/components/index.ts
@@ -47,7 +47,6 @@ export { default as N8nTabs } from './N8nTabs';
 export { default as N8nTag } from './N8nTag';
 export { default as N8nTagList } from './N8nTagList';
 export { default as N8nTags } from './N8nTags';
-export { default as N8nTagsSelector } from './N8nTagsSelector';
 export { default as N8nText } from './N8nText';
 export { default as N8nTooltip } from './N8nTooltip';
 export { default as N8nTree } from './N8nTree';
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 31bf0b452ffa9..90ba72d5d1477 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, type ComputedRef, onMounted, ref, useTemplateRef, watch } from 'vue';
+import { computed, type ComputedRef, ref, useTemplateRef, watch } from 'vue';
 import type { IUpdateInformation } from '@/Interface';
 
 import DraggableTarget from '@/components/DraggableTarget.vue';
@@ -63,8 +63,6 @@ const focused = ref(false);
 const menuExpanded = ref(false);
 const forceShowExpression = ref(false);
 
-const selectedFields = ref<string[]>([]);
-
 const node = computed(() => ndvStore.activeNode);
 const parameterOverrides = ref<ParameterOverride | null>(
 	makeOverrideValue(
@@ -73,13 +71,6 @@ const parameterOverrides = ref<ParameterOverride | null>(
 	),
 );
 
-onMounted(() => {
-	parameterOverrides.value = makeOverrideValue(
-		props,
-		node.value && nodeTypesStore.getNodeType(node.value.type, node.value.typeVersion),
-	);
-});
-
 const isContentOverride = computed(() =>
 	parameterOverrides.value?.isOverrideValue(props.value?.toString() ?? ''),
 );
@@ -391,19 +382,25 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 			/>
 		</div>
 		<N8nTagList
-			v-if="isContentOverride"
-			v-model="selectedFields"
-			:inputs="Object.keys(parameterOverrides?.extraProps ?? {}).map((x) => ({ name: x }))"
+			v-if="isContentOverride && parameterOverrides"
+			v-model="parameterOverrides.extraPropValues"
+			:inputs="
+				Object.entries(parameterOverrides.extraProps).map(([name, prop]) => ({
+					name,
+					...prop,
+				}))
+			"
 		>
-			<template #displayItem="{ name }">
+			<template #displayItem="{ name, tooltip, defaultValue }">
 				<ParameterInputFull
 					:parameter="{
-						name: name,
-						displayName: name[0].toUpperCase() + name.slice(1),
+						name,
+						displayName: name,
 						type: 'string',
-						default: '',
+						default: defaultValue,
 						noDataExpression: true,
 					}"
+					:tooltip="tooltip"
 					:value="parameterOverrides?.extraPropValues[name]"
 					:path="`${path}.tags.${name}`"
 					input-size="small"
diff --git a/packages/editor-ui/src/utils/parameterOverrides.ts b/packages/editor-ui/src/utils/parameterOverrides.ts
index 362053ae18d5e..30c79e9a1c38e 100644
--- a/packages/editor-ui/src/utils/parameterOverrides.ts
+++ b/packages/editor-ui/src/utils/parameterOverrides.ts
@@ -21,8 +21,8 @@ type Context = {
 
 type FromAiOverrideExtraProps = 'description';
 type ExtraPropValue = {
-	default: string;
-	placeholder: string;
+	defaultValue: string;
+	tooltip: string;
 };
 
 export class FromAiOverride implements ParameterOverride {
@@ -39,8 +39,8 @@ export class FromAiOverride implements ParameterOverride {
 
 	readonly extraProps: Record<FromAiOverrideExtraProps, ExtraPropValue> = {
 		description: {
-			default: '',
-			placeholder: 'Description of how the model should define this value',
+			defaultValue: '',
+			tooltip: 'Description of how the model should define this value',
 		},
 	};
 
@@ -66,10 +66,7 @@ export class FromAiOverride implements ParameterOverride {
 
 	buildValueFromOverride(props: Context, excludeMarker: boolean) {
 		const { key, type } = this.providers;
-		// const providedExtraProps = Object.fromEntries(
-		// 	Object.entries(extraPropValues ?? {}).filter((x) => selectedFields.includes(x[0])),
-		// );
-		return `={{ ${excludeMarker ? '' : FromAiOverride.MARKER} $fromAI('${key(props)}', '${this.extraPropValues?.description?.toString() ?? this.extraProps.description.default}', '${type(props)}') }}`;
+		return `={{ ${excludeMarker ? '' : FromAiOverride.MARKER} $fromAI('${key(props)}', '${this.extraPropValues?.description?.toString() ?? this.extraProps.description.defaultValue}', '${type(props)}') }}`;
 	}
 
 	parseOverrides(s: string): Record<keyof typeof this.extraProps, string | undefined> | null {
@@ -118,14 +115,13 @@ export function makeOverrideValue(
 ): ParameterOverride | null {
 	if (!nodeType) return null;
 
-	const s = context.value?.toString();
 	if (FromAiOverride.canBeContentOverride(context, nodeType)) {
 		const fromAiOverride = new FromAiOverride();
-		const existingOverrides = fromAiOverride.parseOverrides(s ?? '');
+		const existingOverrides = fromAiOverride.parseOverrides(context.value?.toString() ?? '');
 		for (const [key, value] of Object.entries(existingOverrides ?? {})) {
 			if (
 				value === undefined ||
-				value === fromAiOverride.extraProps[key as FromAiOverrideExtraProps].default
+				value === fromAiOverride.extraProps[key as FromAiOverrideExtraProps].defaultValue
 			)
 				continue;
 

From c99fc6cb32926b8f3d3859c1e19588c657688965 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Wed, 15 Jan 2025 16:12:33 +0100
Subject: [PATCH 14/82] Finish design component

---
 .../N8nPillList/PillList.stories.ts           | 45 +++++++++
 .../components/N8nPillList/PillList.test.ts   | 66 +++++++++++++
 .../TagList.vue => N8nPillList/PillList.vue}  | 60 ++++++------
 .../__snapshots__/PillList.test.ts.snap       | 18 ++++
 .../src/components/N8nPillList/index.ts       |  3 +
 .../components/N8nTagList/TagList.stories.ts  | 96 -------------------
 .../src/components/N8nTagList/index.ts        |  3 -
 .../design-system/src/components/index.ts     |  2 +-
 .../src/components/ParameterInputFull.vue     |  8 +-
 .../editor-ui/src/utils/parameterOverrides.ts |  5 +-
 10 files changed, 165 insertions(+), 141 deletions(-)
 create mode 100644 packages/design-system/src/components/N8nPillList/PillList.stories.ts
 create mode 100644 packages/design-system/src/components/N8nPillList/PillList.test.ts
 rename packages/design-system/src/components/{N8nTagList/TagList.vue => N8nPillList/PillList.vue} (56%)
 create mode 100644 packages/design-system/src/components/N8nPillList/__snapshots__/PillList.test.ts.snap
 create mode 100644 packages/design-system/src/components/N8nPillList/index.ts
 delete mode 100644 packages/design-system/src/components/N8nTagList/TagList.stories.ts
 delete mode 100644 packages/design-system/src/components/N8nTagList/index.ts

diff --git a/packages/design-system/src/components/N8nPillList/PillList.stories.ts b/packages/design-system/src/components/N8nPillList/PillList.stories.ts
new file mode 100644
index 0000000000000..88ed63edb350e
--- /dev/null
+++ b/packages/design-system/src/components/N8nPillList/PillList.stories.ts
@@ -0,0 +1,45 @@
+import type { StoryFn } from '@storybook/vue3';
+import { ref, watch } from 'vue';
+
+import N8nPillList from './PillList.vue';
+
+export default {
+	title: 'Modules/PillList',
+	component: N8nPillList,
+	argTypes: {},
+	parameters: {
+		backgrounds: { default: '--color-background-light' },
+	},
+};
+
+const Template: StoryFn = (args, { argTypes }) => ({
+	setup: () => ({ args }),
+	props: Object.keys(argTypes),
+	// Generics make this difficult to type
+	components: N8nPillList as never,
+	template: '<n8n-pill-list v-bind="args"  />',
+});
+
+export const PillList = Template.bind({});
+PillList.args = {
+	modelValue: {
+		propC: 'propC value that will be changed in the slot',
+	},
+	inputs: [
+		{
+			name: 'propA',
+			tooltip: 'propA tooltip',
+			default: 'propA default',
+		},
+		{
+			name: 'propB',
+			tooltip: 'propB tooltip',
+			default: 'propB default',
+		},
+		{
+			name: 'propC',
+			tooltip: 'propC tooltip',
+			default: 'propC default',
+		},
+	],
+};
diff --git a/packages/design-system/src/components/N8nPillList/PillList.test.ts b/packages/design-system/src/components/N8nPillList/PillList.test.ts
new file mode 100644
index 0000000000000..d49d252614bbe
--- /dev/null
+++ b/packages/design-system/src/components/N8nPillList/PillList.test.ts
@@ -0,0 +1,66 @@
+import { fireEvent, render, waitFor } from '@testing-library/vue';
+
+import N8nPillList from './PillList.vue';
+
+const itemSize = 100;
+const itemKey = 'id';
+const items = [...(new Array(100) as number[])].map((_, index) => ({
+	id: String(index),
+	name: `Item ${index}`,
+}));
+
+describe('components', () => {
+	describe('N8nRecycleScroller', () => {
+		it('renders when empty', () => {
+			const wrapper = render(N8nPillList, {
+				props: {
+					modelValue: {},
+					inputs: [],
+				},
+			});
+			expect(wrapper.html()).toMatchSnapshot();
+		});
+
+		it('renders one clickable element that can be added and removed', async () => {
+			const wrapper = render(N8nPillList, {
+				props: {
+					modelValue: {},
+					inputs: [{ name: 'propA', defaultValue: '' }],
+				},
+			});
+
+			expect(wrapper.getByTestId('pill-list-pill-propA')).toBeInTheDocument();
+
+			await fireEvent.click(wrapper.getByTestId('pill-list-pill-propA'));
+
+			expect(wrapper.queryByTestId('pill-list-pill-propA')).not.toBeInTheDocument();
+			expect(wrapper.getByTestId('pill-list-slot-propA')).toBeInTheDocument();
+
+			await fireEvent.click(wrapper.getByTestId('pill-list-remove-slot-propA'));
+
+			expect(wrapper.queryByTestId('pill-list-slot-propA')).not.toBeInTheDocument();
+		});
+
+		it('renders multiple elements with some pre-selected', () => {
+			const wrapper = render(N8nPillList, {
+				props: {
+					modelValue: {
+						propA: 'propA value',
+					},
+					inputs: [
+						{ name: 'propA', defaultValue: '' },
+						{ name: 'propB', defaultValue: '' },
+						{ name: 'propC', defaultValue: '' },
+					],
+				},
+			});
+
+			expect(wrapper.queryByTestId('pill-list-pill-propA')).not.toBeInTheDocument();
+			expect(wrapper.getByTestId('pill-list-pill-propB')).toBeInTheDocument();
+			expect(wrapper.getByTestId('pill-list-pill-propC')).toBeInTheDocument();
+			expect(wrapper.getByTestId('pill-list-slot-propA')).toBeInTheDocument();
+
+			expect(wrapper.html()).toMatchSnapshot();
+		});
+	});
+});
diff --git a/packages/design-system/src/components/N8nTagList/TagList.vue b/packages/design-system/src/components/N8nPillList/PillList.vue
similarity index 56%
rename from packages/design-system/src/components/N8nTagList/TagList.vue
rename to packages/design-system/src/components/N8nPillList/PillList.vue
index c39fe101a46e1..1663b412ccc33 100644
--- a/packages/design-system/src/components/N8nTagList/TagList.vue
+++ b/packages/design-system/src/components/N8nPillList/PillList.vue
@@ -1,7 +1,7 @@
 <script
 	setup
 	lang="ts"
-	generic="Value, Item extends { name: string; tooltip: string; defaultValue: Value }"
+	generic="Value, Item extends { name: string; defaultValue: Value; tooltip?: string }"
 >
 import { computed } from 'vue';
 
@@ -9,60 +9,69 @@ defineSlots<{
 	displayItem: (props: Item) => unknown;
 }>();
 
-type TagListProps = {
+type PillListProps = {
 	inputs: Item[];
 };
 
-const props = withDefaults(defineProps<TagListProps>(), {
+const props = withDefaults(defineProps<PillListProps>(), {
 	inputs: () => [],
 });
 
+// Record<inputs[k].name, currentValue>
 const selectedItems = defineModel<Record<string, Value>>({ required: true });
 const inputMap = computed(() => Object.fromEntries(props.inputs.map((x) => [x.name, x] as const)));
 
-const visibleTags = computed(() => {
-	return props.inputs.filter((tag) => !selectedItems.value.hasOwnProperty(tag.name));
+const visiblePills = computed(() => {
+	return props.inputs.filter((pill) => !selectedItems.value.hasOwnProperty(pill.name));
 });
 
 const sortedSelectedItems = computed(() => {
-	return Object.keys(selectedItems.value)
-		.map((name) => ({ name, item: inputMap.value[name] }))
-		.toSorted((a, b) => (a[0] < b[0] ? -1 : 1));
+	return [...Object.keys(selectedItems.value).map((name) => inputMap.value[name])].sort((a, b) =>
+		a.name[0] < b.name[0] ? -1 : 1,
+	);
 });
 
 function addToSelectedItems(name: string) {
 	selectedItems.value[name] = inputMap.value[name].defaultValue;
 }
 
-function removeItem(name: string) {
+function removeFromSelectedItems(name: string) {
 	delete selectedItems.value[name];
 }
 </script>
 
 <template>
 	<div>
-		<div :class="$style.tagContainer">
+		<div :class="$style.pillContainer">
 			<span
-				v-for="item in visibleTags.toSorted((a, b) => (a.name < b.name ? -1 : 1))"
+				v-for="item in [...visiblePills].sort((a, b) => (a.name < b.name ? -1 : 1))"
 				:key="item.name"
-				:class="$style.tagCell"
+				:class="$style.pillCell"
+				:data-test-id="`pill-list-pill-${item.name}`"
 				@click="addToSelectedItems(item.name)"
 			>
 				+ Add a {{ item.name }}
 			</span>
 		</div>
-		<div v-for="item in sortedSelectedItems" :key="item.name" :class="$style.slotComboContainer">
+		<div
+			v-for="item in sortedSelectedItems"
+			:key="item.name"
+			:class="$style.slotComboContainer"
+			:data-test-id="`pill-list-slot-${item.name}`"
+		>
 			<N8nIconButton
 				type="tertiary"
 				text
 				:class="$style.slotRemoveIcon"
 				size="mini"
 				icon="trash"
-				:data-test-id="`tag-listremove-field-button-${item.name}`"
-				@click="removeItem(item.name)"
+				:data-test-id="`pill-list-remove-slot-${item.name}`"
+				@click="removeFromSelectedItems(item.name)"
 			/>
 			<div :class="$style.slotContainer">
-				<slot name="displayItem" v-bind="item.item">{ Empty TagList slot}</slot>
+				<slot name="displayItem" v-bind="item"
+					>Empty slot with v-bind: {{ JSON.stringify(item) }}</slot
+				>
 			</div>
 		</div>
 	</div>
@@ -80,27 +89,12 @@ function removeItem(name: string) {
 	flex-grow: 1;
 }
 
-.slotRemoveIcon {
-	// flex-shrink: 1;
-}
-
-.grid {
-	display: grid;
-	grid-row-gap: var(--spacing-s);
-	grid-column-gap: var(--spacing-2xs);
-}
-
-.gridMulti {
-	composes: grid;
-	grid-template-columns: repeat(2, 1fr);
-}
-
-.tagContainer {
+.pillContainer {
 	width: 100%;
 	flex-wrap: wrap;
 	display: flex;
 }
-.tagCell {
+.pillCell {
 	display: flex;
 	margin: var(--spacing-4xs) var(--spacing-3xs) 0 0;
 
diff --git a/packages/design-system/src/components/N8nPillList/__snapshots__/PillList.test.ts.snap b/packages/design-system/src/components/N8nPillList/__snapshots__/PillList.test.ts.snap
new file mode 100644
index 0000000000000..09f223e34b8c2
--- /dev/null
+++ b/packages/design-system/src/components/N8nPillList/__snapshots__/PillList.test.ts.snap
@@ -0,0 +1,18 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`components > N8nRecycleScroller > renders multiple elements with some pre-selected 1`] = `
+"<div>
+  <div class="pillContainer"><span class="pillCell" data-test-id="pill-list-pill-propB"> + Add a propB</span><span class="pillCell" data-test-id="pill-list-pill-propC"> + Add a propC</span></div>
+  <div class="slotComboContainer" data-test-id="pill-list-slot-propA"><button class="button button tertiary mini text withIcon square slotRemoveIcon slotRemoveIcon" aria-live="polite" data-test-id="pill-list-remove-slot-propA"><span class="icon"><span class="n8n-text compact size-xsmall regular n8n-icon n8n-icon"><!----></span></span>
+      <!--v-if-->
+    </button>
+    <div class="slotContainer">Empty slot with v-bind: {"name":"propA","defaultValue":""}</div>
+  </div>
+</div>"
+`;
+
+exports[`components > N8nRecycleScroller > renders when empty 1`] = `
+"<div>
+  <div class="pillContainer"></div>
+</div>"
+`;
diff --git a/packages/design-system/src/components/N8nPillList/index.ts b/packages/design-system/src/components/N8nPillList/index.ts
new file mode 100644
index 0000000000000..c0762529b4100
--- /dev/null
+++ b/packages/design-system/src/components/N8nPillList/index.ts
@@ -0,0 +1,3 @@
+import N8nPillList from './PillList.vue';
+
+export default N8nPillList;
diff --git a/packages/design-system/src/components/N8nTagList/TagList.stories.ts b/packages/design-system/src/components/N8nTagList/TagList.stories.ts
deleted file mode 100644
index 487d6798efab9..0000000000000
--- a/packages/design-system/src/components/N8nTagList/TagList.stories.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import type { StoryFn } from '@storybook/vue3';
-
-import N8nTagList from './TagList.vue';
-
-export default {
-	title: 'Modules/TagList',
-	component: N8nTagList,
-	argTypes: {},
-	parameters: {
-		backgrounds: { default: '--color-background-light' },
-	},
-};
-
-const methods = {
-	onChange: action('change'),
-	onSubmit: action('submit'),
-};
-
-const Template: StoryFn = (args, { argTypes }) => ({
-	setup: () => ({ args }),
-	props: Object.keys(argTypes),
-	components: {
-		N8nTagList,
-	},
-	template: '<n8n-tag-list v-bind="args" />',
-	methods,
-});
-
-export const TagList = Template.bind({});
-TagList.args = {
-	columnView: true,
-	inputs: [
-		{
-			name: 'email',
-			properties: {
-				label: 'Your Email',
-				type: 'email',
-				required: true,
-				initialValue: 'test@test.com',
-			},
-		},
-		{
-			name: 'password',
-			properties: {
-				label: 'Your Password',
-				type: 'password',
-				required: true,
-			},
-		},
-		{
-			name: 'nickname',
-			properties: {
-				label: 'Your Nickname',
-				placeholder: 'Monty',
-			},
-		},
-		{
-			name: 'opts',
-			properties: {
-				type: 'select',
-				label: 'Opts',
-				options: [
-					{
-						label: 'Opt1',
-						value: 'opt1',
-					},
-					{
-						label: 'Opt2',
-						value: 'opt2',
-					},
-				],
-			},
-		},
-		{
-			name: 'agree',
-			properties: {
-				type: 'checkbox',
-				label:
-					'Signup for newsletter and somebody from our marketing team will get in touch with you as soon as possible. You will not spam you, just want to send you some love every now and then ❤️',
-				labelSize: 'small',
-				tooltipText: 'Check this if you agree to be contacted by our marketing team',
-			},
-		},
-		{
-			name: 'activate',
-			properties: {
-				type: 'toggle',
-				label: 'Activated',
-				activeColor: '#13ce66',
-				inactiveColor: '#8899AA',
-				tooltipText: 'Check this if you agree to be contacted by our marketing team',
-			},
-		},
-	],
-};
diff --git a/packages/design-system/src/components/N8nTagList/index.ts b/packages/design-system/src/components/N8nTagList/index.ts
deleted file mode 100644
index 70fe849045e11..0000000000000
--- a/packages/design-system/src/components/N8nTagList/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import N8nTagList from './TagList.vue';
-
-export default N8nTagList;
diff --git a/packages/design-system/src/components/index.ts b/packages/design-system/src/components/index.ts
index 85867660ffecb..d7d06ed864e97 100644
--- a/packages/design-system/src/components/index.ts
+++ b/packages/design-system/src/components/index.ts
@@ -33,6 +33,7 @@ export { default as N8nNodeCreatorNode } from './N8nNodeCreatorNode';
 export { default as N8nNodeIcon } from './N8nNodeIcon';
 export { default as N8nNotice } from './N8nNotice';
 export { default as N8nOption } from './N8nOption';
+export { default as N8nPillList } from './N8nPillList';
 export { default as N8nPopover } from './N8nPopover';
 export { default as N8nPulse } from './N8nPulse';
 export { default as N8nRadioButtons } from './N8nRadioButtons';
@@ -45,7 +46,6 @@ export { default as N8nSticky } from './N8nSticky';
 export { default as N8nResizeableSticky } from './N8nResizeableSticky';
 export { default as N8nTabs } from './N8nTabs';
 export { default as N8nTag } from './N8nTag';
-export { default as N8nTagList } from './N8nTagList';
 export { default as N8nTags } from './N8nTags';
 export { default as N8nText } from './N8nText';
 export { default as N8nTooltip } from './N8nTooltip';
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 90ba72d5d1477..f964b9f7c413c 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -17,7 +17,7 @@ import {
 	type IParameterLabel,
 	type NodeParameterValueType,
 } from 'n8n-workflow';
-import { N8nButton, N8nInputLabel, N8nTagList } from 'n8n-design-system';
+import { N8nButton, N8nInputLabel, N8nPillList } from 'n8n-design-system';
 import AiStarsIcon from './AiStarsIcon.vue';
 import { type ParameterOverride, makeOverrideValue } from '../utils/parameterOverrides';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
@@ -381,7 +381,7 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 				@menu-expanded="onMenuExpanded"
 			/>
 		</div>
-		<N8nTagList
+		<N8nPillList
 			v-if="isContentOverride && parameterOverrides"
 			v-model="parameterOverrides.extraPropValues"
 			:inputs="
@@ -395,7 +395,7 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 				<ParameterInputFull
 					:parameter="{
 						name,
-						displayName: name,
+						displayName: name[0].toUpperCase() + name.slice(1),
 						type: 'string',
 						default: defaultValue,
 						noDataExpression: true,
@@ -415,7 +415,7 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 					"
 				/>
 			</template>
-		</N8nTagList>
+		</N8nPillList>
 	</N8nInputLabel>
 
 	<!-- badges to add extra fields from overrides go here -->
diff --git a/packages/editor-ui/src/utils/parameterOverrides.ts b/packages/editor-ui/src/utils/parameterOverrides.ts
index 30c79e9a1c38e..2f6cae19aad56 100644
--- a/packages/editor-ui/src/utils/parameterOverrides.ts
+++ b/packages/editor-ui/src/utils/parameterOverrides.ts
@@ -102,10 +102,7 @@ export class FromAiOverride implements ParameterOverride {
 		if (!codex?.categories?.includes('AI') || !codex?.subcategories?.AI?.includes('Tools'))
 			return false;
 
-		return (
-			(!props.parameter.noDataExpression || props.parameter.typeOptions?.editor !== undefined) &&
-			'options' !== props.parameter.type
-		);
+		return !props.parameter.noDataExpression && 'options' !== props.parameter.type;
 	}
 }
 

From 75fa403babbf1df90d6c73b200c5fb98aef7ccaa Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Wed, 15 Jan 2025 16:27:35 +0100
Subject: [PATCH 15/82] clean up tests

---
 .../components/N8nPillList/PillList.test.ts   | 91 +++++++++----------
 .../src/components/N8nPillList/PillList.vue   |  6 +-
 .../__snapshots__/PillList.test.ts.snap       |  4 +-
 3 files changed, 44 insertions(+), 57 deletions(-)

diff --git a/packages/design-system/src/components/N8nPillList/PillList.test.ts b/packages/design-system/src/components/N8nPillList/PillList.test.ts
index d49d252614bbe..5089bf73c9423 100644
--- a/packages/design-system/src/components/N8nPillList/PillList.test.ts
+++ b/packages/design-system/src/components/N8nPillList/PillList.test.ts
@@ -1,66 +1,57 @@
-import { fireEvent, render, waitFor } from '@testing-library/vue';
+import { fireEvent, render } from '@testing-library/vue';
 
 import N8nPillList from './PillList.vue';
 
-const itemSize = 100;
-const itemKey = 'id';
-const items = [...(new Array(100) as number[])].map((_, index) => ({
-	id: String(index),
-	name: `Item ${index}`,
-}));
-
-describe('components', () => {
-	describe('N8nRecycleScroller', () => {
-		it('renders when empty', () => {
-			const wrapper = render(N8nPillList, {
-				props: {
-					modelValue: {},
-					inputs: [],
-				},
-			});
-			expect(wrapper.html()).toMatchSnapshot();
+describe('N8nPillList', () => {
+	it('renders when empty', () => {
+		const wrapper = render(N8nPillList, {
+			props: {
+				modelValue: {},
+				inputs: [],
+			},
 		});
+		expect(wrapper.html()).toMatchSnapshot();
+	});
 
-		it('renders one clickable element that can be added and removed', async () => {
-			const wrapper = render(N8nPillList, {
-				props: {
-					modelValue: {},
-					inputs: [{ name: 'propA', defaultValue: '' }],
-				},
-			});
+	it('renders one clickable element that can be added and removed', async () => {
+		const wrapper = render(N8nPillList, {
+			props: {
+				modelValue: {},
+				inputs: [{ name: 'propA', defaultValue: '' }],
+			},
+		});
 
-			expect(wrapper.getByTestId('pill-list-pill-propA')).toBeInTheDocument();
+		expect(wrapper.getByTestId('pill-list-pill-propA')).toBeInTheDocument();
 
-			await fireEvent.click(wrapper.getByTestId('pill-list-pill-propA'));
+		await fireEvent.click(wrapper.getByTestId('pill-list-pill-propA'));
 
-			expect(wrapper.queryByTestId('pill-list-pill-propA')).not.toBeInTheDocument();
-			expect(wrapper.getByTestId('pill-list-slot-propA')).toBeInTheDocument();
+		expect(wrapper.queryByTestId('pill-list-pill-propA')).not.toBeInTheDocument();
+		expect(wrapper.getByTestId('pill-list-slot-propA')).toBeInTheDocument();
 
-			await fireEvent.click(wrapper.getByTestId('pill-list-remove-slot-propA'));
+		await fireEvent.click(wrapper.getByTestId('pill-list-remove-slot-propA'));
 
-			expect(wrapper.queryByTestId('pill-list-slot-propA')).not.toBeInTheDocument();
-		});
+		expect(wrapper.queryByTestId('pill-list-slot-propA')).not.toBeInTheDocument();
+	});
 
-		it('renders multiple elements with some pre-selected', () => {
-			const wrapper = render(N8nPillList, {
-				props: {
-					modelValue: {
-						propA: 'propA value',
-					},
-					inputs: [
-						{ name: 'propA', defaultValue: '' },
-						{ name: 'propB', defaultValue: '' },
-						{ name: 'propC', defaultValue: '' },
-					],
+	it('renders multiple elements with some pre-selected', () => {
+		const wrapper = render(N8nPillList, {
+			props: {
+				modelValue: {
+					propA: 'propA value',
 				},
-			});
+				inputs: [
+					{ name: 'propA', defaultValue: '' },
+					{ name: 'propB', defaultValue: 3 },
+					{ name: 'propC', defaultValue: true },
+				],
+			},
+		});
 
-			expect(wrapper.queryByTestId('pill-list-pill-propA')).not.toBeInTheDocument();
-			expect(wrapper.getByTestId('pill-list-pill-propB')).toBeInTheDocument();
-			expect(wrapper.getByTestId('pill-list-pill-propC')).toBeInTheDocument();
-			expect(wrapper.getByTestId('pill-list-slot-propA')).toBeInTheDocument();
+		expect(wrapper.queryByTestId('pill-list-pill-propA')).not.toBeInTheDocument();
+		expect(wrapper.getByTestId('pill-list-slot-propA')).toBeInTheDocument();
+		expect(wrapper.getByTestId('pill-list-pill-propB')).toBeInTheDocument();
+		expect(wrapper.getByTestId('pill-list-pill-propC')).toBeInTheDocument();
 
-			expect(wrapper.html()).toMatchSnapshot();
-		});
+		expect(wrapper.html()).toMatchSnapshot();
 	});
 });
diff --git a/packages/design-system/src/components/N8nPillList/PillList.vue b/packages/design-system/src/components/N8nPillList/PillList.vue
index 1663b412ccc33..9782742c2fde8 100644
--- a/packages/design-system/src/components/N8nPillList/PillList.vue
+++ b/packages/design-system/src/components/N8nPillList/PillList.vue
@@ -1,8 +1,4 @@
-<script
-	setup
-	lang="ts"
-	generic="Value, Item extends { name: string; defaultValue: Value; tooltip?: string }"
->
+<script setup lang="ts" generic="Value, Item extends { name: string; defaultValue: Value }">
 import { computed } from 'vue';
 
 defineSlots<{
diff --git a/packages/design-system/src/components/N8nPillList/__snapshots__/PillList.test.ts.snap b/packages/design-system/src/components/N8nPillList/__snapshots__/PillList.test.ts.snap
index 09f223e34b8c2..c28f6e77db382 100644
--- a/packages/design-system/src/components/N8nPillList/__snapshots__/PillList.test.ts.snap
+++ b/packages/design-system/src/components/N8nPillList/__snapshots__/PillList.test.ts.snap
@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`components > N8nRecycleScroller > renders multiple elements with some pre-selected 1`] = `
+exports[`N8nPillList > renders multiple elements with some pre-selected 1`] = `
 "<div>
   <div class="pillContainer"><span class="pillCell" data-test-id="pill-list-pill-propB"> + Add a propB</span><span class="pillCell" data-test-id="pill-list-pill-propC"> + Add a propC</span></div>
   <div class="slotComboContainer" data-test-id="pill-list-slot-propA"><button class="button button tertiary mini text withIcon square slotRemoveIcon slotRemoveIcon" aria-live="polite" data-test-id="pill-list-remove-slot-propA"><span class="icon"><span class="n8n-text compact size-xsmall regular n8n-icon n8n-icon"><!----></span></span>
@@ -11,7 +11,7 @@ exports[`components > N8nRecycleScroller > renders multiple elements with some p
 </div>"
 `;
 
-exports[`components > N8nRecycleScroller > renders when empty 1`] = `
+exports[`N8nPillList > renders when empty 1`] = `
 "<div>
   <div class="pillContainer"></div>
 </div>"

From 4ff0e6027e42d8361e0d72ab97b4f1db35ba74c7 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Wed, 15 Jan 2025 16:30:02 +0100
Subject: [PATCH 16/82] add component

---
 .../N8nPillList/PillList.stories.ts           |  42 +++++++
 .../components/N8nPillList/PillList.test.ts   |  57 +++++++++
 .../src/components/N8nPillList/PillList.vue   | 109 ++++++++++++++++++
 .../__snapshots__/PillList.test.ts.snap       |  18 +++
 .../src/components/N8nPillList/index.ts       |   3 +
 .../design-system/src/components/index.ts     |   1 +
 6 files changed, 230 insertions(+)
 create mode 100644 packages/design-system/src/components/N8nPillList/PillList.stories.ts
 create mode 100644 packages/design-system/src/components/N8nPillList/PillList.test.ts
 create mode 100644 packages/design-system/src/components/N8nPillList/PillList.vue
 create mode 100644 packages/design-system/src/components/N8nPillList/__snapshots__/PillList.test.ts.snap
 create mode 100644 packages/design-system/src/components/N8nPillList/index.ts

diff --git a/packages/design-system/src/components/N8nPillList/PillList.stories.ts b/packages/design-system/src/components/N8nPillList/PillList.stories.ts
new file mode 100644
index 0000000000000..d43adfb8bf2d9
--- /dev/null
+++ b/packages/design-system/src/components/N8nPillList/PillList.stories.ts
@@ -0,0 +1,42 @@
+import type { StoryFn } from '@storybook/vue3';
+import { ref, watch } from 'vue';
+
+import N8nPillList from './PillList.vue';
+
+export default {
+	title: 'Modules/PillList',
+	component: N8nPillList,
+	argTypes: {},
+	parameters: {
+		backgrounds: { default: '--color-background-light' },
+	},
+};
+
+const Template: StoryFn = (args, { argTypes }) => ({
+	setup: () => ({ args }),
+	props: Object.keys(argTypes),
+	// Generics make this difficult to type
+	components: N8nPillList as never,
+	template: '<n8n-pill-list v-bind="args"  />',
+});
+
+export const PillList = Template.bind({});
+PillList.args = {
+	modelValue: {
+		propC: 'propC value that will be changed in the slot',
+	},
+	inputs: [
+		{
+			name: 'propA',
+			default: 'propA default',
+		},
+		{
+			name: 'propB',
+			default: 'propB default',
+		},
+		{
+			name: 'propC',
+			default: 'propC default',
+		},
+	],
+};
diff --git a/packages/design-system/src/components/N8nPillList/PillList.test.ts b/packages/design-system/src/components/N8nPillList/PillList.test.ts
new file mode 100644
index 0000000000000..5089bf73c9423
--- /dev/null
+++ b/packages/design-system/src/components/N8nPillList/PillList.test.ts
@@ -0,0 +1,57 @@
+import { fireEvent, render } from '@testing-library/vue';
+
+import N8nPillList from './PillList.vue';
+
+describe('N8nPillList', () => {
+	it('renders when empty', () => {
+		const wrapper = render(N8nPillList, {
+			props: {
+				modelValue: {},
+				inputs: [],
+			},
+		});
+		expect(wrapper.html()).toMatchSnapshot();
+	});
+
+	it('renders one clickable element that can be added and removed', async () => {
+		const wrapper = render(N8nPillList, {
+			props: {
+				modelValue: {},
+				inputs: [{ name: 'propA', defaultValue: '' }],
+			},
+		});
+
+		expect(wrapper.getByTestId('pill-list-pill-propA')).toBeInTheDocument();
+
+		await fireEvent.click(wrapper.getByTestId('pill-list-pill-propA'));
+
+		expect(wrapper.queryByTestId('pill-list-pill-propA')).not.toBeInTheDocument();
+		expect(wrapper.getByTestId('pill-list-slot-propA')).toBeInTheDocument();
+
+		await fireEvent.click(wrapper.getByTestId('pill-list-remove-slot-propA'));
+
+		expect(wrapper.queryByTestId('pill-list-slot-propA')).not.toBeInTheDocument();
+	});
+
+	it('renders multiple elements with some pre-selected', () => {
+		const wrapper = render(N8nPillList, {
+			props: {
+				modelValue: {
+					propA: 'propA value',
+				},
+				inputs: [
+					{ name: 'propA', defaultValue: '' },
+					{ name: 'propB', defaultValue: 3 },
+					{ name: 'propC', defaultValue: true },
+				],
+			},
+		});
+
+		expect(wrapper.queryByTestId('pill-list-pill-propA')).not.toBeInTheDocument();
+		expect(wrapper.getByTestId('pill-list-slot-propA')).toBeInTheDocument();
+		expect(wrapper.getByTestId('pill-list-pill-propB')).toBeInTheDocument();
+		expect(wrapper.getByTestId('pill-list-pill-propC')).toBeInTheDocument();
+
+		expect(wrapper.html()).toMatchSnapshot();
+	});
+});
diff --git a/packages/design-system/src/components/N8nPillList/PillList.vue b/packages/design-system/src/components/N8nPillList/PillList.vue
new file mode 100644
index 0000000000000..9782742c2fde8
--- /dev/null
+++ b/packages/design-system/src/components/N8nPillList/PillList.vue
@@ -0,0 +1,109 @@
+<script setup lang="ts" generic="Value, Item extends { name: string; defaultValue: Value }">
+import { computed } from 'vue';
+
+defineSlots<{
+	displayItem: (props: Item) => unknown;
+}>();
+
+type PillListProps = {
+	inputs: Item[];
+};
+
+const props = withDefaults(defineProps<PillListProps>(), {
+	inputs: () => [],
+});
+
+// Record<inputs[k].name, currentValue>
+const selectedItems = defineModel<Record<string, Value>>({ required: true });
+const inputMap = computed(() => Object.fromEntries(props.inputs.map((x) => [x.name, x] as const)));
+
+const visiblePills = computed(() => {
+	return props.inputs.filter((pill) => !selectedItems.value.hasOwnProperty(pill.name));
+});
+
+const sortedSelectedItems = computed(() => {
+	return [...Object.keys(selectedItems.value).map((name) => inputMap.value[name])].sort((a, b) =>
+		a.name[0] < b.name[0] ? -1 : 1,
+	);
+});
+
+function addToSelectedItems(name: string) {
+	selectedItems.value[name] = inputMap.value[name].defaultValue;
+}
+
+function removeFromSelectedItems(name: string) {
+	delete selectedItems.value[name];
+}
+</script>
+
+<template>
+	<div>
+		<div :class="$style.pillContainer">
+			<span
+				v-for="item in [...visiblePills].sort((a, b) => (a.name < b.name ? -1 : 1))"
+				:key="item.name"
+				:class="$style.pillCell"
+				:data-test-id="`pill-list-pill-${item.name}`"
+				@click="addToSelectedItems(item.name)"
+			>
+				+ Add a {{ item.name }}
+			</span>
+		</div>
+		<div
+			v-for="item in sortedSelectedItems"
+			:key="item.name"
+			:class="$style.slotComboContainer"
+			:data-test-id="`pill-list-slot-${item.name}`"
+		>
+			<N8nIconButton
+				type="tertiary"
+				text
+				:class="$style.slotRemoveIcon"
+				size="mini"
+				icon="trash"
+				:data-test-id="`pill-list-remove-slot-${item.name}`"
+				@click="removeFromSelectedItems(item.name)"
+			/>
+			<div :class="$style.slotContainer">
+				<slot name="displayItem" v-bind="item"
+					>Empty slot with v-bind: {{ JSON.stringify(item) }}</slot
+				>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" module>
+.slotComboContainer {
+	display: flex;
+	flex-direction: row;
+	flex-grow: 1;
+	margin-top: var(--spacing-2xs);
+}
+
+.slotContainer {
+	flex-grow: 1;
+}
+
+.pillContainer {
+	width: 100%;
+	flex-wrap: wrap;
+	display: flex;
+}
+.pillCell {
+	display: flex;
+	margin: var(--spacing-4xs) var(--spacing-3xs) 0 0;
+
+	min-width: max-content;
+	border-radius: var(--border-radius-base);
+	font-size: small;
+	background-color: var(--color-ndv-background);
+	color: var(--text-color-dark);
+
+	cursor: pointer;
+
+	:hover {
+		color: var(--color-primary);
+	}
+}
+</style>
diff --git a/packages/design-system/src/components/N8nPillList/__snapshots__/PillList.test.ts.snap b/packages/design-system/src/components/N8nPillList/__snapshots__/PillList.test.ts.snap
new file mode 100644
index 0000000000000..c28f6e77db382
--- /dev/null
+++ b/packages/design-system/src/components/N8nPillList/__snapshots__/PillList.test.ts.snap
@@ -0,0 +1,18 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`N8nPillList > renders multiple elements with some pre-selected 1`] = `
+"<div>
+  <div class="pillContainer"><span class="pillCell" data-test-id="pill-list-pill-propB"> + Add a propB</span><span class="pillCell" data-test-id="pill-list-pill-propC"> + Add a propC</span></div>
+  <div class="slotComboContainer" data-test-id="pill-list-slot-propA"><button class="button button tertiary mini text withIcon square slotRemoveIcon slotRemoveIcon" aria-live="polite" data-test-id="pill-list-remove-slot-propA"><span class="icon"><span class="n8n-text compact size-xsmall regular n8n-icon n8n-icon"><!----></span></span>
+      <!--v-if-->
+    </button>
+    <div class="slotContainer">Empty slot with v-bind: {"name":"propA","defaultValue":""}</div>
+  </div>
+</div>"
+`;
+
+exports[`N8nPillList > renders when empty 1`] = `
+"<div>
+  <div class="pillContainer"></div>
+</div>"
+`;
diff --git a/packages/design-system/src/components/N8nPillList/index.ts b/packages/design-system/src/components/N8nPillList/index.ts
new file mode 100644
index 0000000000000..c0762529b4100
--- /dev/null
+++ b/packages/design-system/src/components/N8nPillList/index.ts
@@ -0,0 +1,3 @@
+import N8nPillList from './PillList.vue';
+
+export default N8nPillList;
diff --git a/packages/design-system/src/components/index.ts b/packages/design-system/src/components/index.ts
index ce4360fe4667d..d7d06ed864e97 100644
--- a/packages/design-system/src/components/index.ts
+++ b/packages/design-system/src/components/index.ts
@@ -33,6 +33,7 @@ export { default as N8nNodeCreatorNode } from './N8nNodeCreatorNode';
 export { default as N8nNodeIcon } from './N8nNodeIcon';
 export { default as N8nNotice } from './N8nNotice';
 export { default as N8nOption } from './N8nOption';
+export { default as N8nPillList } from './N8nPillList';
 export { default as N8nPopover } from './N8nPopover';
 export { default as N8nPulse } from './N8nPulse';
 export { default as N8nRadioButtons } from './N8nRadioButtons';

From 89b6c41b2a35d15cd4777cbfbe72e43de4da4575 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Wed, 15 Jan 2025 16:56:42 +0100
Subject: [PATCH 17/82] fix build

---
 .../design-system/src/components/N8nPillList/PillList.stories.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/design-system/src/components/N8nPillList/PillList.stories.ts b/packages/design-system/src/components/N8nPillList/PillList.stories.ts
index d43adfb8bf2d9..2de2810ba8444 100644
--- a/packages/design-system/src/components/N8nPillList/PillList.stories.ts
+++ b/packages/design-system/src/components/N8nPillList/PillList.stories.ts
@@ -1,5 +1,4 @@
 import type { StoryFn } from '@storybook/vue3';
-import { ref, watch } from 'vue';
 
 import N8nPillList from './PillList.vue';
 

From 743baeb7b6a3fe20728a8f6b47548a13707b2124 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Wed, 15 Jan 2025 17:34:43 +0100
Subject: [PATCH 18/82] self review

---
 .../components/N8nPillList/PillList.stories.ts | 12 ++++++------
 .../components/N8nPillList/PillList.test.ts    |  8 ++++----
 .../src/components/N8nPillList/PillList.vue    | 18 ++++++++++++------
 .../__snapshots__/PillList.test.ts.snap        |  2 +-
 4 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/packages/design-system/src/components/N8nPillList/PillList.stories.ts b/packages/design-system/src/components/N8nPillList/PillList.stories.ts
index 2de2810ba8444..2a20dde3b6c46 100644
--- a/packages/design-system/src/components/N8nPillList/PillList.stories.ts
+++ b/packages/design-system/src/components/N8nPillList/PillList.stories.ts
@@ -12,30 +12,30 @@ export default {
 };
 
 const Template: StoryFn = (args, { argTypes }) => ({
-	setup: () => ({ args }),
+	setup: () => ({ args: { ...args, modelValue: undefined }, model: args.modelValue }),
 	props: Object.keys(argTypes),
 	// Generics make this difficult to type
 	components: N8nPillList as never,
-	template: '<n8n-pill-list v-bind="args"  />',
+	template: '<n8n-pill-list v-bind="args" v-model="model" />',
 });
 
 export const PillList = Template.bind({});
 PillList.args = {
 	modelValue: {
-		propC: 'propC value that will be changed in the slot',
+		propC: 'propC pre-existing initial value',
 	},
 	inputs: [
 		{
 			name: 'propA',
-			default: 'propA default',
+			initialValue: false,
 		},
 		{
 			name: 'propB',
-			default: 'propB default',
+			initialValue: 0,
 		},
 		{
 			name: 'propC',
-			default: 'propC default',
+			initialValue: 'propC default',
 		},
 	],
 };
diff --git a/packages/design-system/src/components/N8nPillList/PillList.test.ts b/packages/design-system/src/components/N8nPillList/PillList.test.ts
index 5089bf73c9423..868a39cd3d332 100644
--- a/packages/design-system/src/components/N8nPillList/PillList.test.ts
+++ b/packages/design-system/src/components/N8nPillList/PillList.test.ts
@@ -17,7 +17,7 @@ describe('N8nPillList', () => {
 		const wrapper = render(N8nPillList, {
 			props: {
 				modelValue: {},
-				inputs: [{ name: 'propA', defaultValue: '' }],
+				inputs: [{ name: 'propA', initialValue: '' }],
 			},
 		});
 
@@ -40,9 +40,9 @@ describe('N8nPillList', () => {
 					propA: 'propA value',
 				},
 				inputs: [
-					{ name: 'propA', defaultValue: '' },
-					{ name: 'propB', defaultValue: 3 },
-					{ name: 'propC', defaultValue: true },
+					{ name: 'propA', initialValue: '' },
+					{ name: 'propB', initialValue: 3 },
+					{ name: 'propC', initialValue: true },
 				],
 			},
 		});
diff --git a/packages/design-system/src/components/N8nPillList/PillList.vue b/packages/design-system/src/components/N8nPillList/PillList.vue
index 9782742c2fde8..08d7817a9bbfa 100644
--- a/packages/design-system/src/components/N8nPillList/PillList.vue
+++ b/packages/design-system/src/components/N8nPillList/PillList.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts" generic="Value, Item extends { name: string; defaultValue: Value }">
+<script setup lang="ts" generic="Value, Item extends { name: string; initialValue: Value }">
 import { computed } from 'vue';
 
 defineSlots<{
@@ -13,8 +13,11 @@ const props = withDefaults(defineProps<PillListProps>(), {
 	inputs: () => [],
 });
 
-// Record<inputs[k].name, currentValue>
+// Record<inputs[k].name, initialValue>
+// Note that only the keys will stay up to date to reflect selected keys
+// Whereas the values will not automatically update if the related slot value is updated
 const selectedItems = defineModel<Record<string, Value>>({ required: true });
+
 const inputMap = computed(() => Object.fromEntries(props.inputs.map((x) => [x.name, x] as const)));
 
 const visiblePills = computed(() => {
@@ -22,13 +25,16 @@ const visiblePills = computed(() => {
 });
 
 const sortedSelectedItems = computed(() => {
-	return [...Object.keys(selectedItems.value).map((name) => inputMap.value[name])].sort((a, b) =>
-		a.name[0] < b.name[0] ? -1 : 1,
-	);
+	return [
+		...Object.entries(selectedItems.value).map(([name, initialValue]) => ({
+			...inputMap.value[name],
+			initialValue,
+		})),
+	].sort((a, b) => (a.name[0] < b.name[0] ? -1 : 1));
 });
 
 function addToSelectedItems(name: string) {
-	selectedItems.value[name] = inputMap.value[name].defaultValue;
+	selectedItems.value[name] = inputMap.value[name].initialValue;
 }
 
 function removeFromSelectedItems(name: string) {
diff --git a/packages/design-system/src/components/N8nPillList/__snapshots__/PillList.test.ts.snap b/packages/design-system/src/components/N8nPillList/__snapshots__/PillList.test.ts.snap
index c28f6e77db382..fe74db4bbf024 100644
--- a/packages/design-system/src/components/N8nPillList/__snapshots__/PillList.test.ts.snap
+++ b/packages/design-system/src/components/N8nPillList/__snapshots__/PillList.test.ts.snap
@@ -6,7 +6,7 @@ exports[`N8nPillList > renders multiple elements with some pre-selected 1`] = `
   <div class="slotComboContainer" data-test-id="pill-list-slot-propA"><button class="button button tertiary mini text withIcon square slotRemoveIcon slotRemoveIcon" aria-live="polite" data-test-id="pill-list-remove-slot-propA"><span class="icon"><span class="n8n-text compact size-xsmall regular n8n-icon n8n-icon"><!----></span></span>
       <!--v-if-->
     </button>
-    <div class="slotContainer">Empty slot with v-bind: {"name":"propA","defaultValue":""}</div>
+    <div class="slotContainer">Empty slot with v-bind: {"name":"propA","initialValue":"propA value"}</div>
   </div>
 </div>"
 `;

From 5f116b2f51501ad8915e5fcd68431ebc66bd8138 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Wed, 15 Jan 2025 17:44:19 +0100
Subject: [PATCH 19/82] add test to assert sort order

---
 .../src/components/N8nPillList/PillList.test.ts     | 13 ++++++++++++-
 .../N8nPillList/__snapshots__/PillList.test.ts.snap | 11 -----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/design-system/src/components/N8nPillList/PillList.test.ts b/packages/design-system/src/components/N8nPillList/PillList.test.ts
index 868a39cd3d332..90335191e1c5c 100644
--- a/packages/design-system/src/components/N8nPillList/PillList.test.ts
+++ b/packages/design-system/src/components/N8nPillList/PillList.test.ts
@@ -37,20 +37,31 @@ describe('N8nPillList', () => {
 		const wrapper = render(N8nPillList, {
 			props: {
 				modelValue: {
+					propC: false,
 					propA: 'propA value',
 				},
 				inputs: [
 					{ name: 'propA', initialValue: '' },
 					{ name: 'propB', initialValue: 3 },
 					{ name: 'propC', initialValue: true },
+					{ name: 'propD', initialValue: true },
 				],
 			},
 		});
 
 		expect(wrapper.queryByTestId('pill-list-pill-propA')).not.toBeInTheDocument();
+		expect(wrapper.queryByTestId('pill-list-pill-propC')).not.toBeInTheDocument();
 		expect(wrapper.getByTestId('pill-list-slot-propA')).toBeInTheDocument();
 		expect(wrapper.getByTestId('pill-list-pill-propB')).toBeInTheDocument();
-		expect(wrapper.getByTestId('pill-list-pill-propC')).toBeInTheDocument();
+		expect(wrapper.getByTestId('pill-list-slot-propC')).toBeInTheDocument();
+		expect(wrapper.getByTestId('pill-list-pill-propD')).toBeInTheDocument();
+
+		// This asserts order - specifically that propA appears before propC
+		expect(
+			wrapper
+				.getByTestId('pill-list-slot-propA')
+				.compareDocumentPosition(wrapper.getByTestId('pill-list-slot-propC')),
+		).toEqual(2);
 
 		expect(wrapper.html()).toMatchSnapshot();
 	});
diff --git a/packages/design-system/src/components/N8nPillList/__snapshots__/PillList.test.ts.snap b/packages/design-system/src/components/N8nPillList/__snapshots__/PillList.test.ts.snap
index fe74db4bbf024..e93829fbc0b5c 100644
--- a/packages/design-system/src/components/N8nPillList/__snapshots__/PillList.test.ts.snap
+++ b/packages/design-system/src/components/N8nPillList/__snapshots__/PillList.test.ts.snap
@@ -1,16 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`N8nPillList > renders multiple elements with some pre-selected 1`] = `
-"<div>
-  <div class="pillContainer"><span class="pillCell" data-test-id="pill-list-pill-propB"> + Add a propB</span><span class="pillCell" data-test-id="pill-list-pill-propC"> + Add a propC</span></div>
-  <div class="slotComboContainer" data-test-id="pill-list-slot-propA"><button class="button button tertiary mini text withIcon square slotRemoveIcon slotRemoveIcon" aria-live="polite" data-test-id="pill-list-remove-slot-propA"><span class="icon"><span class="n8n-text compact size-xsmall regular n8n-icon n8n-icon"><!----></span></span>
-      <!--v-if-->
-    </button>
-    <div class="slotContainer">Empty slot with v-bind: {"name":"propA","initialValue":"propA value"}</div>
-  </div>
-</div>"
-`;
-
 exports[`N8nPillList > renders when empty 1`] = `
 "<div>
   <div class="pillContainer"></div>

From 7ba8dd8286c5ac048df9cd3ed055a2bf6558fa36 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Thu, 16 Jan 2025 08:46:14 +0100
Subject: [PATCH 20/82] update snapshot

---
 .../__snapshots__/PillList.test.ts.snap          | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/design-system/src/components/N8nPillList/__snapshots__/PillList.test.ts.snap b/packages/design-system/src/components/N8nPillList/__snapshots__/PillList.test.ts.snap
index e93829fbc0b5c..3d2f34526dea5 100644
--- a/packages/design-system/src/components/N8nPillList/__snapshots__/PillList.test.ts.snap
+++ b/packages/design-system/src/components/N8nPillList/__snapshots__/PillList.test.ts.snap
@@ -1,5 +1,21 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`N8nPillList > renders multiple elements with some pre-selected 1`] = `
+"<div>
+  <div class="pillContainer"><span class="pillCell" data-test-id="pill-list-pill-propB"> + Add a propB</span><span class="pillCell" data-test-id="pill-list-pill-propD"> + Add a propD</span></div>
+  <div class="slotComboContainer" data-test-id="pill-list-slot-propC"><button class="button button tertiary mini text withIcon square slotRemoveIcon slotRemoveIcon" aria-live="polite" data-test-id="pill-list-remove-slot-propC"><span class="icon"><span class="n8n-text compact size-xsmall regular n8n-icon n8n-icon"><!----></span></span>
+      <!--v-if-->
+    </button>
+    <div class="slotContainer">Empty slot with v-bind: {"name":"propC","initialValue":false}</div>
+  </div>
+  <div class="slotComboContainer" data-test-id="pill-list-slot-propA"><button class="button button tertiary mini text withIcon square slotRemoveIcon slotRemoveIcon" aria-live="polite" data-test-id="pill-list-remove-slot-propA"><span class="icon"><span class="n8n-text compact size-xsmall regular n8n-icon n8n-icon"><!----></span></span>
+      <!--v-if-->
+    </button>
+    <div class="slotContainer">Empty slot with v-bind: {"name":"propA","initialValue":"propA value"}</div>
+  </div>
+</div>"
+`;
+
 exports[`N8nPillList > renders when empty 1`] = `
 "<div>
   <div class="pillContainer"></div>

From cf4adc433214bdd5573a48ed42c877af77622b77 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Thu, 16 Jan 2025 11:47:39 +0100
Subject: [PATCH 21/82] Product review

---
 .../cli/src/load-nodes-and-credentials.ts     |  10 --
 .../N8nPillList/PillList.stories.ts           |  31 ------
 .../src/components/N8nPillList/PillList.vue   |  29 +++--
 .../src/components/ParameterInputFull.vue     | 101 +++++++++++-------
 .../src/plugins/i18n/locales/en.json          |   2 +
 .../editor-ui/src/utils/parameterOverrides.ts |  32 ++++--
 6 files changed, 110 insertions(+), 95 deletions(-)

diff --git a/packages/cli/src/load-nodes-and-credentials.ts b/packages/cli/src/load-nodes-and-credentials.ts
index b027192388c7f..1e42fa97f5adb 100644
--- a/packages/cli/src/load-nodes-and-credentials.ts
+++ b/packages/cli/src/load-nodes-and-credentials.ts
@@ -453,14 +453,6 @@ export class LoadNodesAndCredentials {
 					placeholder: `e.g. ${item.description.description}`,
 				};
 
-				const noticeProp: INodeProperties = {
-					displayName:
-						"Use the expression {{ $fromAI('placeholder_name') }} for any data to be filled by the model",
-					name: 'notice',
-					type: 'notice',
-					default: '',
-				};
-
 				item.description.properties.unshift(descProp);
 
 				// If node has resource or operation we can determine pre-populate tool description based on it
@@ -474,8 +466,6 @@ export class LoadNodesAndCredentials {
 						},
 					};
 				}
-
-				item.description.properties.unshift(noticeProp);
 			}
 		}
 
diff --git a/packages/design-system/src/components/N8nPillList/PillList.stories.ts b/packages/design-system/src/components/N8nPillList/PillList.stories.ts
index e28c9a855565e..2a20dde3b6c46 100644
--- a/packages/design-system/src/components/N8nPillList/PillList.stories.ts
+++ b/packages/design-system/src/components/N8nPillList/PillList.stories.ts
@@ -1,8 +1,4 @@
 import type { StoryFn } from '@storybook/vue3';
-<<<<<<< HEAD
-import { ref, watch } from 'vue';
-=======
->>>>>>> ADO-3035
 
 import N8nPillList from './PillList.vue';
 
@@ -16,47 +12,21 @@ export default {
 };
 
 const Template: StoryFn = (args, { argTypes }) => ({
-<<<<<<< HEAD
-	setup: () => ({ args }),
-	props: Object.keys(argTypes),
-	// Generics make this difficult to type
-	components: N8nPillList as never,
-	template: '<n8n-pill-list v-bind="args"  />',
-=======
 	setup: () => ({ args: { ...args, modelValue: undefined }, model: args.modelValue }),
 	props: Object.keys(argTypes),
 	// Generics make this difficult to type
 	components: N8nPillList as never,
 	template: '<n8n-pill-list v-bind="args" v-model="model" />',
->>>>>>> ADO-3035
 });
 
 export const PillList = Template.bind({});
 PillList.args = {
 	modelValue: {
-<<<<<<< HEAD
-		propC: 'propC value that will be changed in the slot',
-=======
 		propC: 'propC pre-existing initial value',
->>>>>>> ADO-3035
 	},
 	inputs: [
 		{
 			name: 'propA',
-<<<<<<< HEAD
-			tooltip: 'propA tooltip',
-			default: 'propA default',
-		},
-		{
-			name: 'propB',
-			tooltip: 'propB tooltip',
-			default: 'propB default',
-		},
-		{
-			name: 'propC',
-			tooltip: 'propC tooltip',
-			default: 'propC default',
-=======
 			initialValue: false,
 		},
 		{
@@ -66,7 +36,6 @@ PillList.args = {
 		{
 			name: 'propC',
 			initialValue: 'propC default',
->>>>>>> ADO-3035
 		},
 	],
 };
diff --git a/packages/design-system/src/components/N8nPillList/PillList.vue b/packages/design-system/src/components/N8nPillList/PillList.vue
index 08d7817a9bbfa..b5a6bb912b5f7 100644
--- a/packages/design-system/src/components/N8nPillList/PillList.vue
+++ b/packages/design-system/src/components/N8nPillList/PillList.vue
@@ -7,10 +7,12 @@ defineSlots<{
 
 type PillListProps = {
 	inputs: Item[];
+	disabled: boolean;
 };
 
 const props = withDefaults(defineProps<PillListProps>(), {
 	inputs: () => [],
+	disabled: false,
 });
 
 // Record<inputs[k].name, initialValue>
@@ -50,7 +52,7 @@ function removeFromSelectedItems(name: string) {
 				:key="item.name"
 				:class="$style.pillCell"
 				:data-test-id="`pill-list-pill-${item.name}`"
-				@click="addToSelectedItems(item.name)"
+				@click="!props.disabled && addToSelectedItems(item.name)"
 			>
 				+ Add a {{ item.name }}
 			</span>
@@ -61,14 +63,12 @@ function removeFromSelectedItems(name: string) {
 			:class="$style.slotComboContainer"
 			:data-test-id="`pill-list-slot-${item.name}`"
 		>
-			<N8nIconButton
-				type="tertiary"
-				text
+			<N8nIcon
 				:class="$style.slotRemoveIcon"
-				size="mini"
-				icon="trash"
+				size="xsmall"
+				:icon="disabled ? 'none' : 'trash'"
 				:data-test-id="`pill-list-remove-slot-${item.name}`"
-				@click="removeFromSelectedItems(item.name)"
+				@click="!disabled && removeFromSelectedItems(item.name)"
 			/>
 			<div :class="$style.slotContainer">
 				<slot name="displayItem" v-bind="item"
@@ -84,7 +84,7 @@ function removeFromSelectedItems(name: string) {
 	display: flex;
 	flex-direction: row;
 	flex-grow: 1;
-	margin-top: var(--spacing-2xs);
+	gap: var(--spacing-2xs);
 }
 
 .slotContainer {
@@ -98,7 +98,7 @@ function removeFromSelectedItems(name: string) {
 }
 .pillCell {
 	display: flex;
-	margin: var(--spacing-4xs) var(--spacing-3xs) 0 0;
+	margin-right: var(--spacing-3xs);
 
 	min-width: max-content;
 	border-radius: var(--border-radius-base);
@@ -112,4 +112,15 @@ function removeFromSelectedItems(name: string) {
 		color: var(--color-primary);
 	}
 }
+
+.slotRemoveIcon {
+	color: var(--color-text-light);
+	height: 10px;
+	width: 10px;
+	margin-top: 3px;
+
+	:hover {
+		cursor: pointer;
+	}
+}
 </style>
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index c36719026a0e5..9086c92f5a535 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -17,7 +17,7 @@ import {
 	type IParameterLabel,
 	type NodeParameterValueType,
 } from 'n8n-workflow';
-import { N8nButton, N8nInputLabel, N8nPillList } from 'n8n-design-system';
+import { N8nButton, N8nInputLabel, N8nPillList, N8nTooltip } from 'n8n-design-system';
 import AiStarsIcon from './AiStarsIcon.vue';
 import { type ParameterOverride, makeOverrideValue } from '../utils/parameterOverrides';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
@@ -218,6 +218,10 @@ function onDrop(newParamValue: string) {
 	}, 200);
 }
 
+const showOverrideButton = computed(
+	() => canBeContentOverride.value && !isContentOverride.value && !isReadOnlyParameter.value,
+);
+
 // When switching to read-only mode, reset the value to the default value
 watch(
 	() => props.isReadOnly,
@@ -249,28 +253,29 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 		color="text-dark"
 	>
 		<template
-			v-if="
-				!isSingleLineInput &&
-				canBeContentOverride &&
-				!isContentOverride &&
-				optionsPosition === 'top'
-			"
+			v-if="showOverrideButton && !isSingleLineInput && optionsPosition === 'top'"
 			#persistentOptions
 		>
-			<N8nButton
-				:class="[$style.overrideButton, $style.noCornersBottom, $style.overrideButtonInOptions]"
-				type="tertiary"
-				@click="
-					() => {
-						valueChanged({
-							name: props.path,
-							value: parameterOverrides?.buildValueFromOverride(props, false),
-						});
-					}
-				"
-			>
-				<AiStarsIcon />
-			</N8nButton>
+			<N8nTooltip>
+				<template #content>
+					<div>{{ i18n.baseText('parameterOverride.applyOverrideButtonTooltip') }}</div>
+				</template>
+
+				<N8nButton
+					:class="[$style.overrideButton, $style.noCornersBottom, $style.overrideButtonInOptions]"
+					type="tertiary"
+					@click="
+						() => {
+							valueChanged({
+								name: props.path,
+								value: parameterOverrides?.buildValueFromOverride(props, false),
+							});
+						}
+					"
+				>
+					<AiStarsIcon />
+				</N8nButton>
+			</N8nTooltip>
 		</template>
 
 		<template v-if="displayOptions && optionsPosition === 'top'" #options>
@@ -298,11 +303,13 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 					</div>
 					<N8nInput
 						:model-value="parameterOverrides?.overridePlaceholder"
+						:class="$style.overrideInput"
 						disabled
 						type="text"
 						size="small"
 					/>
 					<N8nIconButton
+						v-if="!isReadOnly"
 						type="tertiary"
 						:class="['n8n-input', $style.closeButton]"
 						outline="false"
@@ -344,21 +351,29 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 						@blur="onBlur"
 						@drop="onDrop"
 					>
-						<template v-if="canBeContentOverride && isSingleLineInput" #overrideButton>
-							<N8nButton
-								:class="[$style.overrideButton]"
-								type="tertiary"
-								@click="
-									() => {
-										valueChanged({
-											name: props.path,
-											value: parameterOverrides?.buildValueFromOverride(props, false),
-										});
-									}
-								"
-							>
-								<AiStarsIcon />
-							</N8nButton>
+						<template v-if="showOverrideButton && isSingleLineInput" #overrideButton>
+							<N8nTooltip>
+								<template #content>
+									<div>
+										{{ i18n.baseText('parameterOverride.applyOverrideButtonTooltip') }}
+									</div>
+								</template>
+
+								<N8nButton
+									:class="[$style.overrideButton]"
+									type="tertiary"
+									@click="
+										() => {
+											valueChanged({
+												name: props.path,
+												value: parameterOverrides?.buildValueFromOverride(props, false),
+											});
+										}
+									"
+								>
+									<AiStarsIcon />
+								</N8nButton>
+							</N8nTooltip>
 						</template>
 					</ParameterInputWrapper>
 				</div>
@@ -384,23 +399,26 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 		<N8nPillList
 			v-if="isContentOverride && parameterOverrides"
 			v-model="parameterOverrides.extraPropValues"
+			:class="$style.overridePillList"
 			:inputs="
 				Object.entries(parameterOverrides.extraProps).map(([name, prop]) => ({
 					name,
 					...prop,
 				}))
 			"
+			:disabled="isReadOnly"
 		>
-			<template #displayItem="{ name, tooltip, initialValue }">
+			<template #displayItem="{ name, tooltip, initialValue, type }">
 				<ParameterInputFull
 					:parameter="{
 						name,
 						displayName: name[0].toUpperCase() + name.slice(1),
-						type: 'string',
+						type,
 						default: initialValue,
 						noDataExpression: true,
+						description: tooltip,
 					}"
-					:tooltip="tooltip"
+					:is-read-only="isReadOnly"
 					:value="parameterOverrides?.extraPropValues[name]"
 					:path="`${path}.tags.${name}`"
 					input-size="small"
@@ -442,6 +460,7 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 .closeButton {
 	padding: 0px 8px 3px; // the icon used is off-center vertically
 	border: 0px;
+	color: var(--color-text-base);
 }
 
 .overrideButton {
@@ -492,4 +511,8 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 		opacity: 1;
 	}
 }
+
+.overridePillList {
+	margin-top: var(--spacing-2xs);
+}
 </style>
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index e84c490939c85..20e2b890ccc13 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -1445,6 +1445,8 @@
 	"parameterInputList.parameterOptions": "Parameter Options",
 	"parameterInputList.loadingFields": "Loading fields...",
 	"parameterInputList.loadingError": "Error loading fields. Refresh you page and try again.",
+	"parameterOverride.applyOverrideButtonTooltip": "Defined automatically by the model during an execution",
+	"parameterOverride.descriptionTooltip": "Explain to the LLM how it should generate this value, a good, specific description would allow LLMs to produce expected results much more often",
 	"personalizationModal.businessOwner": "Business Owner",
 	"personalizationModal.continue": "Continue",
 	"personalizationModal.cicd": "CI/CD",
diff --git a/packages/editor-ui/src/utils/parameterOverrides.ts b/packages/editor-ui/src/utils/parameterOverrides.ts
index e05f7d5952c74..5263dc2189c1b 100644
--- a/packages/editor-ui/src/utils/parameterOverrides.ts
+++ b/packages/editor-ui/src/utils/parameterOverrides.ts
@@ -1,4 +1,5 @@
-import type { INodeTypeDescription, NodeParameterValueType } from 'n8n-workflow';
+import type { INodeTypeDescription, NodeParameterValueType, NodePropertyTypes } from 'n8n-workflow';
+import { i18n } from '@/plugins/i18n';
 
 export interface ParameterOverride {
 	readonly overridePlaceholder: string;
@@ -12,35 +13,51 @@ export interface ParameterOverride {
 type Context = {
 	parameter: {
 		name: string;
-		type: string;
+		displayName: string;
+		type: NodePropertyTypes;
 		noDataExpression?: boolean;
 		typeOptions?: { editor?: string };
 	};
 	value: NodeParameterValueType;
+	path: string;
 };
 
 type FromAiOverrideExtraProps = 'description';
 type ExtraPropValue = {
 	initialValue: string;
 	tooltip: string;
+	type: NodePropertyTypes;
 };
 
+function sanitizeFromAiParameterName(s: string) {
+	s = s.replace(/[^a-zA-Z0-9\-]/g, '_');
+
+	if (s.length >= 64) {
+		s = s.slice(0, 63);
+	}
+
+	return s;
+}
+
 export class FromAiOverride implements ParameterOverride {
 	static readonly MARKER = '/* n8n-auto-generated-override */';
 
-	static readonly DENYLIST = ['toolWorkflow', 'toolCode', 'toolHttpRequest'];
+	static readonly NODE_DENYLIST = ['toolCode', 'toolHttpRequest'];
+
+	static readonly PATH_DENYLIST = ['parameters.name', 'parameters.description'];
 
 	readonly overridePlaceholder = 'Defined automatically by the model';
 
 	readonly providers = {
-		key: (props: Context) => props.parameter.name,
+		key: (props: Context) => sanitizeFromAiParameterName(props.parameter.displayName),
 		type: (props: Context) => this.fieldTypeToFromAiType(props),
 	};
 
 	readonly extraProps: Record<FromAiOverrideExtraProps, ExtraPropValue> = {
 		description: {
 			initialValue: '',
-			tooltip: 'Description of how the model should define this value',
+			type: 'string',
+			tooltip: i18n.baseText('parameterOverride.descriptionTooltip'),
 		},
 	};
 
@@ -96,7 +113,10 @@ export class FromAiOverride implements ParameterOverride {
 	}
 
 	static canBeContentOverride(props: Context, nodeType: INodeTypeDescription | null) {
-		if (FromAiOverride.DENYLIST.some((x) => nodeType?.name?.endsWith(x) ?? false)) return false;
+		if (FromAiOverride.NODE_DENYLIST.some((x) => nodeType?.name?.endsWith(x) ?? false))
+			return false;
+
+		if (FromAiOverride.PATH_DENYLIST.includes(props.path)) return false;
 
 		const codex = nodeType?.codex;
 		if (!codex?.categories?.includes('AI') || !codex?.subcategories?.AI?.includes('Tools'))

From 2dd06609d65eb922b28c6c9013a1b77f8b6d3acb Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Thu, 16 Jan 2025 13:20:35 +0100
Subject: [PATCH 22/82] Add disabled prop and touch up css

---
 .../src/components/N8nPillList/PillList.vue   | 29 +++++++++++++------
 .../__snapshots__/PillList.test.ts.snap       |  8 ++---
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/packages/design-system/src/components/N8nPillList/PillList.vue b/packages/design-system/src/components/N8nPillList/PillList.vue
index 08d7817a9bbfa..b5a6bb912b5f7 100644
--- a/packages/design-system/src/components/N8nPillList/PillList.vue
+++ b/packages/design-system/src/components/N8nPillList/PillList.vue
@@ -7,10 +7,12 @@ defineSlots<{
 
 type PillListProps = {
 	inputs: Item[];
+	disabled: boolean;
 };
 
 const props = withDefaults(defineProps<PillListProps>(), {
 	inputs: () => [],
+	disabled: false,
 });
 
 // Record<inputs[k].name, initialValue>
@@ -50,7 +52,7 @@ function removeFromSelectedItems(name: string) {
 				:key="item.name"
 				:class="$style.pillCell"
 				:data-test-id="`pill-list-pill-${item.name}`"
-				@click="addToSelectedItems(item.name)"
+				@click="!props.disabled && addToSelectedItems(item.name)"
 			>
 				+ Add a {{ item.name }}
 			</span>
@@ -61,14 +63,12 @@ function removeFromSelectedItems(name: string) {
 			:class="$style.slotComboContainer"
 			:data-test-id="`pill-list-slot-${item.name}`"
 		>
-			<N8nIconButton
-				type="tertiary"
-				text
+			<N8nIcon
 				:class="$style.slotRemoveIcon"
-				size="mini"
-				icon="trash"
+				size="xsmall"
+				:icon="disabled ? 'none' : 'trash'"
 				:data-test-id="`pill-list-remove-slot-${item.name}`"
-				@click="removeFromSelectedItems(item.name)"
+				@click="!disabled && removeFromSelectedItems(item.name)"
 			/>
 			<div :class="$style.slotContainer">
 				<slot name="displayItem" v-bind="item"
@@ -84,7 +84,7 @@ function removeFromSelectedItems(name: string) {
 	display: flex;
 	flex-direction: row;
 	flex-grow: 1;
-	margin-top: var(--spacing-2xs);
+	gap: var(--spacing-2xs);
 }
 
 .slotContainer {
@@ -98,7 +98,7 @@ function removeFromSelectedItems(name: string) {
 }
 .pillCell {
 	display: flex;
-	margin: var(--spacing-4xs) var(--spacing-3xs) 0 0;
+	margin-right: var(--spacing-3xs);
 
 	min-width: max-content;
 	border-radius: var(--border-radius-base);
@@ -112,4 +112,15 @@ function removeFromSelectedItems(name: string) {
 		color: var(--color-primary);
 	}
 }
+
+.slotRemoveIcon {
+	color: var(--color-text-light);
+	height: 10px;
+	width: 10px;
+	margin-top: 3px;
+
+	:hover {
+		cursor: pointer;
+	}
+}
 </style>
diff --git a/packages/design-system/src/components/N8nPillList/__snapshots__/PillList.test.ts.snap b/packages/design-system/src/components/N8nPillList/__snapshots__/PillList.test.ts.snap
index 3d2f34526dea5..ba694e5dc2887 100644
--- a/packages/design-system/src/components/N8nPillList/__snapshots__/PillList.test.ts.snap
+++ b/packages/design-system/src/components/N8nPillList/__snapshots__/PillList.test.ts.snap
@@ -3,14 +3,10 @@
 exports[`N8nPillList > renders multiple elements with some pre-selected 1`] = `
 "<div>
   <div class="pillContainer"><span class="pillCell" data-test-id="pill-list-pill-propB"> + Add a propB</span><span class="pillCell" data-test-id="pill-list-pill-propD"> + Add a propD</span></div>
-  <div class="slotComboContainer" data-test-id="pill-list-slot-propC"><button class="button button tertiary mini text withIcon square slotRemoveIcon slotRemoveIcon" aria-live="polite" data-test-id="pill-list-remove-slot-propC"><span class="icon"><span class="n8n-text compact size-xsmall regular n8n-icon n8n-icon"><!----></span></span>
-      <!--v-if-->
-    </button>
+  <div class="slotComboContainer" data-test-id="pill-list-slot-propC"><span class="n8n-text compact size-xsmall regular n8n-icon slotRemoveIcon slotRemoveIcon n8n-icon slotRemoveIcon slotRemoveIcon" data-test-id="pill-list-remove-slot-propC"><!----></span>
     <div class="slotContainer">Empty slot with v-bind: {"name":"propC","initialValue":false}</div>
   </div>
-  <div class="slotComboContainer" data-test-id="pill-list-slot-propA"><button class="button button tertiary mini text withIcon square slotRemoveIcon slotRemoveIcon" aria-live="polite" data-test-id="pill-list-remove-slot-propA"><span class="icon"><span class="n8n-text compact size-xsmall regular n8n-icon n8n-icon"><!----></span></span>
-      <!--v-if-->
-    </button>
+  <div class="slotComboContainer" data-test-id="pill-list-slot-propA"><span class="n8n-text compact size-xsmall regular n8n-icon slotRemoveIcon slotRemoveIcon n8n-icon slotRemoveIcon slotRemoveIcon" data-test-id="pill-list-remove-slot-propA"><!----></span>
     <div class="slotContainer">Empty slot with v-bind: {"name":"propA","initialValue":"propA value"}</div>
   </div>
 </div>"

From cd39ab90cb9b604e8d973a947a22fabc0e5c0e4c Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Thu, 16 Jan 2025 13:53:49 +0100
Subject: [PATCH 23/82] pr feedback

---
 .../src/components/N8nInputLabel/InputLabel.vue          | 8 ++------
 packages/editor-ui/src/components/AiStarsIcon.vue        | 8 --------
 packages/editor-ui/src/components/ParameterInput.vue     | 9 +++++----
 packages/editor-ui/src/components/ParameterInputFull.vue | 9 ++++++++-
 .../editor-ui/src/components/ParameterInputWrapper.vue   | 4 ++--
 packages/editor-ui/src/plugins/i18n/locales/en.json      | 3 ++-
 packages/editor-ui/src/utils/parameterOverrides.ts       | 2 +-
 7 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/packages/design-system/src/components/N8nInputLabel/InputLabel.vue b/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
index 7dcdcf8950676..8f311539ee626 100644
--- a/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
+++ b/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
@@ -93,8 +93,8 @@ const addTargetBlank = (html: string) =>
 			</label>
 			<div
 				v-if="$slots.persistentOptions"
-				:class="$style.persistentOptions"
-				:data-test-id="`${inputName}-parameter-input-options-container-1`"
+				class="pl-4xs"
+				:data-test-id="`${inputName}-parameter-input-persistent-options-container`"
 			>
 				<slot name="persistentOptions" />
 			</div>
@@ -227,10 +227,6 @@ const addTargetBlank = (html: string) =>
 	border-bottom: var(--border-base);
 }
 
-.persistentOptions {
-	padding-left: var(--spacing-4xs);
-}
-
 :root .tooltipPopper {
 	line-height: var(--font-line-height-compact);
 	max-width: 400px;
diff --git a/packages/editor-ui/src/components/AiStarsIcon.vue b/packages/editor-ui/src/components/AiStarsIcon.vue
index a2dd54c360b93..3fd9d1d7bea4b 100644
--- a/packages/editor-ui/src/components/AiStarsIcon.vue
+++ b/packages/editor-ui/src/components/AiStarsIcon.vue
@@ -1,9 +1,3 @@
-<script lang="ts">
-export default {
-	name: 'AiStarsIcon',
-};
-</script>
-
 <template>
 	<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 		<g id="NodeIcon">
@@ -17,5 +11,3 @@ export default {
 		</g>
 	</svg>
 </template>
-
-<style lang="scss"></style>
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index e6434e97a656d..2cae94428f915 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -91,7 +91,7 @@ type Props = {
 	hideIssues?: boolean;
 	errorHighlight?: boolean;
 	isForCredential?: boolean;
-	canBeOverride?: boolean;
+	canBeOverridden?: boolean;
 };
 
 const props = withDefaults(defineProps<Props>(), {
@@ -430,7 +430,7 @@ const isTextarea = computed(
 );
 
 const parameterInputClasses = computed(() => {
-	const classes: { [c: string]: boolean } = {
+	const classes: Record<string, boolean> = {
 		droppable: props.droppable,
 		activeDrop: props.activeDrop,
 	};
@@ -1068,8 +1068,8 @@ onUpdated(async () => {
 				$style.parameterInput,
 				'ignore-key-press-canvas',
 				{
-					[$style.hardRightCornersInput]: canBeOverride,
-					[$style.noRightBorder]: canBeOverride && isSingleLineInput,
+					[$style.hardRightCornersInput]: canBeOverridden,
+					[$style.noRightBorder]: canBeOverridden && isSingleLineInput,
 				},
 			]"
 			:style="parameterInputWrapperStyle"
@@ -1552,6 +1552,7 @@ onUpdated(async () => {
 			</div>
 		</div>
 		<div
+			v-if="$slots.overrideButton"
 			:class="[
 				$style.overrideButton,
 				{ [$style.overrideButtonStandalone]: isSwitch, [$style.overrideButtonInline]: !isSwitch },
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 9086c92f5a535..498953225ff26 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -343,7 +343,7 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 						:hide-issues="hideIssues"
 						:label="label"
 						:event-bus="eventBus"
-						:can-be-override="canBeContentOverride"
+						:can-be-overridden="canBeContentOverride"
 						input-size="small"
 						@update="valueChanged"
 						@text-input="onTextInput"
@@ -497,6 +497,13 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 	padding-left: 8px;
 	width: 22px;
 	text-align: center;
+	border: none;
+}
+
+.overrideInput {
+	> div > input {
+		border: none;
+	}
 }
 
 .options {
diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue
index 28258b75c70c0..8312e69ad533e 100644
--- a/packages/editor-ui/src/components/ParameterInputWrapper.vue
+++ b/packages/editor-ui/src/components/ParameterInputWrapper.vue
@@ -45,7 +45,7 @@ type Props = {
 	eventSource?: string;
 	label?: IParameterLabel;
 	eventBus?: EventBus;
-	canBeOverride?: boolean;
+	canBeOverridden?: boolean;
 };
 
 const props = withDefaults(defineProps<Props>(), {
@@ -229,7 +229,7 @@ defineExpose({
 			:rows="rows"
 			:data-test-id="`parameter-input-${parsedParameterName}`"
 			:event-bus="eventBus"
-			:can-be-override="canBeOverride"
+			:can-be-overridden="canBeOverridden"
 			@focus="onFocus"
 			@blur="onBlur"
 			@drop="onDrop"
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 20e2b890ccc13..ddc946b20915b 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -1445,7 +1445,8 @@
 	"parameterInputList.parameterOptions": "Parameter Options",
 	"parameterInputList.loadingFields": "Loading fields...",
 	"parameterInputList.loadingError": "Error loading fields. Refresh you page and try again.",
-	"parameterOverride.applyOverrideButtonTooltip": "Defined automatically by the model during an execution",
+	"parameterOverride.applyOverrideButtonText": "Defined automatically by the model",
+	"parameterOverride.applyOverrideButtonTooltip": "Define automatically by the model during execution",
 	"parameterOverride.descriptionTooltip": "Explain to the LLM how it should generate this value, a good, specific description would allow LLMs to produce expected results much more often",
 	"personalizationModal.businessOwner": "Business Owner",
 	"personalizationModal.continue": "Continue",
diff --git a/packages/editor-ui/src/utils/parameterOverrides.ts b/packages/editor-ui/src/utils/parameterOverrides.ts
index 5263dc2189c1b..9638e1546d099 100644
--- a/packages/editor-ui/src/utils/parameterOverrides.ts
+++ b/packages/editor-ui/src/utils/parameterOverrides.ts
@@ -46,7 +46,7 @@ export class FromAiOverride implements ParameterOverride {
 
 	static readonly PATH_DENYLIST = ['parameters.name', 'parameters.description'];
 
-	readonly overridePlaceholder = 'Defined automatically by the model';
+	readonly overridePlaceholder = i18n.baseText('parameterOverride.overridePanelText');
 
 	readonly providers = {
 		key: (props: Context) => sanitizeFromAiParameterName(props.parameter.displayName),

From 30884ff6babedbf40ae1ff55d780999e40450806 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Thu, 16 Jan 2025 13:54:21 +0100
Subject: [PATCH 24/82] make disabled optional

---
 packages/design-system/src/components/N8nPillList/PillList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/design-system/src/components/N8nPillList/PillList.vue b/packages/design-system/src/components/N8nPillList/PillList.vue
index b5a6bb912b5f7..84efc1f78e9c2 100644
--- a/packages/design-system/src/components/N8nPillList/PillList.vue
+++ b/packages/design-system/src/components/N8nPillList/PillList.vue
@@ -7,7 +7,7 @@ defineSlots<{
 
 type PillListProps = {
 	inputs: Item[];
-	disabled: boolean;
+	disabled?: boolean;
 };
 
 const props = withDefaults(defineProps<PillListProps>(), {

From 96bff1de5a509e9ba345a54ff81ab138834ef8bc Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Thu, 16 Jan 2025 13:57:44 +0100
Subject: [PATCH 25/82] add disabled test case

---
 .../components/N8nPillList/PillList.test.ts   | 33 +++++++++++++++++++
 .../__snapshots__/PillList.test.ts.snap       |  9 +++++
 2 files changed, 42 insertions(+)

diff --git a/packages/design-system/src/components/N8nPillList/PillList.test.ts b/packages/design-system/src/components/N8nPillList/PillList.test.ts
index 90335191e1c5c..6ebc1a9083bfb 100644
--- a/packages/design-system/src/components/N8nPillList/PillList.test.ts
+++ b/packages/design-system/src/components/N8nPillList/PillList.test.ts
@@ -65,4 +65,37 @@ describe('N8nPillList', () => {
 
 		expect(wrapper.html()).toMatchSnapshot();
 	});
+
+	it('renders disabled collection and clicks do not modify', async () => {
+		const wrapper = render(N8nPillList, {
+			props: {
+				modelValue: {
+					propB: 'propB value',
+				},
+				disabled: true,
+				inputs: [
+					{ name: 'propA', initialValue: '' },
+					{ name: 'propB', initialValue: '' },
+					{ name: 'propC', initialValue: '' },
+				],
+			},
+		});
+
+		expect(wrapper.getByTestId('pill-list-pill-propA')).toBeInTheDocument();
+		expect(wrapper.getByTestId('pill-list-slot-propB')).toBeInTheDocument();
+		expect(wrapper.queryByTestId('pill-list-pill-propB')).not.toBeInTheDocument();
+		expect(wrapper.getByTestId('pill-list-pill-propC')).toBeInTheDocument();
+
+		await fireEvent.click(wrapper.getByTestId('pill-list-pill-propA'));
+
+		expect(wrapper.getByTestId('pill-list-pill-propA')).toBeInTheDocument();
+		expect(wrapper.queryByTestId('pill-list-slot-propA')).not.toBeInTheDocument();
+
+		await fireEvent.click(wrapper.getByTestId('pill-list-remove-slot-propB'));
+
+		expect(wrapper.getByTestId('pill-list-slot-propB')).toBeInTheDocument();
+		expect(wrapper.queryByTestId('pill-list-pill-propB')).not.toBeInTheDocument();
+
+		expect(wrapper.html()).toMatchSnapshot();
+	});
 });
diff --git a/packages/design-system/src/components/N8nPillList/__snapshots__/PillList.test.ts.snap b/packages/design-system/src/components/N8nPillList/__snapshots__/PillList.test.ts.snap
index ba694e5dc2887..328daaa0a95e0 100644
--- a/packages/design-system/src/components/N8nPillList/__snapshots__/PillList.test.ts.snap
+++ b/packages/design-system/src/components/N8nPillList/__snapshots__/PillList.test.ts.snap
@@ -1,5 +1,14 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`N8nPillList > renders disabled collection and clicks do not modify 1`] = `
+"<div>
+  <div class="pillContainer"><span class="pillCell" data-test-id="pill-list-pill-propA"> + Add a propA</span><span class="pillCell" data-test-id="pill-list-pill-propC"> + Add a propC</span></div>
+  <div class="slotComboContainer" data-test-id="pill-list-slot-propB"><span class="n8n-text compact size-xsmall regular n8n-icon slotRemoveIcon slotRemoveIcon n8n-icon slotRemoveIcon slotRemoveIcon" data-test-id="pill-list-remove-slot-propB"><!----></span>
+    <div class="slotContainer">Empty slot with v-bind: {"name":"propB","initialValue":"propB value"}</div>
+  </div>
+</div>"
+`;
+
 exports[`N8nPillList > renders multiple elements with some pre-selected 1`] = `
 "<div>
   <div class="pillContainer"><span class="pillCell" data-test-id="pill-list-pill-propB"> + Add a propB</span><span class="pillCell" data-test-id="pill-list-pill-propD"> + Add a propD</span></div>

From 8e3f46583c9fbe9d13fb956cdaef1992c0c70f37 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Thu, 16 Jan 2025 14:08:23 +0100
Subject: [PATCH 26/82] Clean up 1

---
 .../src/components/ParameterInputFull.vue     | 25 +++++++------------
 1 file changed, 9 insertions(+), 16 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 498953225ff26..0e6e389a7557a 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -237,6 +237,13 @@ const parameterInputWrapper = useTemplateRef('parameterInputWrapper');
 const isSingleLineInput: ComputedRef<boolean> = computed(
 	() => parameterInputWrapper.value?.isSingleLineInput ?? false,
 );
+
+function handleOverrideClick() {
+	valueChanged({
+		name: props.path,
+		value: parameterOverrides.value?.buildValueFromOverride(props, false),
+	});
+}
 </script>
 
 <template>
@@ -264,14 +271,7 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 				<N8nButton
 					:class="[$style.overrideButton, $style.noCornersBottom, $style.overrideButtonInOptions]"
 					type="tertiary"
-					@click="
-						() => {
-							valueChanged({
-								name: props.path,
-								value: parameterOverrides?.buildValueFromOverride(props, false),
-							});
-						}
-					"
+					@click="handleOverrideClick"
 				>
 					<AiStarsIcon />
 				</N8nButton>
@@ -362,14 +362,7 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 								<N8nButton
 									:class="[$style.overrideButton]"
 									type="tertiary"
-									@click="
-										() => {
-											valueChanged({
-												name: props.path,
-												value: parameterOverrides?.buildValueFromOverride(props, false),
-											});
-										}
-									"
+									@click="handleOverrideClick"
 								>
 									<AiStarsIcon />
 								</N8nButton>

From 53c45a9b1accf94d6241a2ed856a9b3c1c5dd539 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Thu, 16 Jan 2025 14:25:49 +0100
Subject: [PATCH 27/82] self review

---
 .../src/components/ParameterInput.vue         |  7 ++--
 .../src/components/ParameterInputFull.vue     | 32 ++++++++++---------
 2 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index 2cae94428f915..5ef49b8a6fdab 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -438,6 +438,7 @@ const parameterInputClasses = computed(() => {
 	if (isSwitch.value) {
 		classes['parameter-switch'] = true;
 	} else {
+		// @review: verify this is ok for textarea
 		classes['parameter-value-container'] = true;
 	}
 
@@ -971,9 +972,9 @@ const isSingleLineInput = computed(() => {
 	 *
 	 * If we move the overrideButton to the options row due to going multiline,
 	 * the text area gains more width and might return to single line.
-	 * This then causes the overrideButton to move inline, causing a loop and flickering UI.
+	 * This then causes the overrideButton to move inline, creating a loop which results in flickering UI.
 	 *
-	 * To avoid this, we treat 2 rows of input as single line, if we are already single line.
+	 * To avoid this, we treat 2 rows of input as single line if we were already single line.
 	 */
 	if (isSingleLineInput.value) {
 		return height.value <= 70;
@@ -1073,7 +1074,6 @@ onUpdated(async () => {
 				},
 			]"
 			:style="parameterInputWrapperStyle"
-			data-test-id="parameter-input-wrapper-in-input"
 		>
 			<ResourceLocator
 				v-if="parameter.type === 'resourceLocator'"
@@ -1141,6 +1141,7 @@ onUpdated(async () => {
 				"
 				:class="[$style.parameterInput]"
 			>
+				<!-- @review: confirm the style above is needed -->
 				<el-dialog
 					width="calc(100% - var(--spacing-3xl))"
 					:class="$style.modal"
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 0e6e389a7557a..0aace90c27036 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -55,14 +55,14 @@ const emit = defineEmits<{
 const i18n = useI18n();
 const toast = useToast();
 
-const ndvStore = useNDVStore();
-const nodeTypesStore = useNodeTypesStore();
-
 const eventBus = ref(createEventBus());
 const focused = ref(false);
 const menuExpanded = ref(false);
 const forceShowExpression = ref(false);
 
+const ndvStore = useNDVStore();
+const nodeTypesStore = useNodeTypesStore();
+
 const node = computed(() => ndvStore.activeNode);
 const parameterOverrides = ref<ParameterOverride | null>(
 	makeOverrideValue(
@@ -71,8 +71,8 @@ const parameterOverrides = ref<ParameterOverride | null>(
 	),
 );
 
-const isContentOverride = computed(() =>
-	parameterOverrides.value?.isOverrideValue(props.value?.toString() ?? ''),
+const isContentOverride = computed(
+	() => !!parameterOverrides.value?.isOverrideValue(props.value?.toString() ?? ''),
 );
 const canBeContentOverride = computed(() => {
 	if (!node.value || isResourceLocator.value) return false;
@@ -297,7 +297,10 @@ function handleOverrideClick() {
 			@drop="onDrop"
 		>
 			<template #default="{ droppable, activeDrop }">
-				<div v-if="canBeContentOverride && isContentOverride" :class="$style.contentOverride">
+				<div
+					v-if="canBeContentOverride && isContentOverride"
+					:class="$style.contentOverrideContainer"
+				>
 					<div :class="[$style.iconStars, 'el-input-group__prepend', $style.noCornersRight]">
 						<AiStarsIcon />
 					</div>
@@ -311,7 +314,7 @@ function handleOverrideClick() {
 					<N8nIconButton
 						v-if="!isReadOnly"
 						type="tertiary"
-						:class="['n8n-input', $style.closeButton]"
+						:class="['n8n-input', $style.overrideCloseButton]"
 						outline="false"
 						icon="xmark"
 						size="xsmall"
@@ -428,8 +431,6 @@ function handleOverrideClick() {
 			</template>
 		</N8nPillList>
 	</N8nInputLabel>
-
-	<!-- badges to add extra fields from overrides go here -->
 </template>
 
 <style lang="scss" module>
@@ -443,14 +444,14 @@ function handleOverrideClick() {
 	}
 }
 
-.contentOverride {
+.contentOverrideContainer {
 	display: flex;
 	gap: var(--spacing-4xs);
 	border-radius: var(--border-radius-base);
 	background: var(--color-background-base);
 }
 
-.closeButton {
+.overrideCloseButton {
 	padding: 0px 8px 3px; // the icon used is off-center vertically
 	border: 0px;
 	color: var(--color-text-base);
@@ -499,6 +500,11 @@ function handleOverrideClick() {
 	}
 }
 
+// @Review double check margin here for pill list with and without pill
+.overridePillList {
+	margin-top: var(--spacing-2xs);
+}
+
 .options {
 	position: absolute;
 	bottom: -22px;
@@ -511,8 +517,4 @@ function handleOverrideClick() {
 		opacity: 1;
 	}
 }
-
-.overridePillList {
-	margin-top: var(--spacing-2xs);
-}
 </style>

From 59d38fa5f7c6bebac06ee22ce811191b4358c74a Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Thu, 16 Jan 2025 16:33:41 +0100
Subject: [PATCH 28/82] review 3

---
 packages/editor-ui/src/components/AiStarsIcon.vue   |  2 +-
 .../editor-ui/src/components/ParameterInputFull.vue | 13 +++++++------
 packages/editor-ui/src/plugins/i18n/locales/en.json |  2 +-
 packages/editor-ui/src/utils/parameterOverrides.ts  |  7 ++++++-
 4 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/editor-ui/src/components/AiStarsIcon.vue b/packages/editor-ui/src/components/AiStarsIcon.vue
index 3fd9d1d7bea4b..3925ae07e51b9 100644
--- a/packages/editor-ui/src/components/AiStarsIcon.vue
+++ b/packages/editor-ui/src/components/AiStarsIcon.vue
@@ -6,7 +6,7 @@
 				fill-rule="evenodd"
 				clip-rule="evenodd"
 				d="M15.7982 7.80784L13.92 7.20243C12.7186 6.80602 12.0148 5.83386 11.6844 4.61226L10.8579 0.586096C10.8363 0.506544 10.7837 0.400024 10.6219 0.400024C10.4857 0.400024 10.4075 0.506544 10.386 0.586096L9.55943 4.61361C9.22773 5.83521 8.52525 6.80737 7.32387 7.20378L5.44562 7.80919C5.18 7.89548 5.17595 8.27032 5.44023 8.36066L7.33196 9.01191C8.52929 9.40968 9.22773 10.3805 9.55943 11.5967L10.3873 15.5784C10.4089 15.6579 10.4534 15.8008 10.6233 15.8008C10.7991 15.8008 10.8362 15.6634 10.858 15.5831L10.8592 15.5784L11.6871 11.5967C12.0188 10.3791 12.7173 9.40833 13.9146 9.01191L15.8063 8.36066C16.0679 8.26897 16.0639 7.89413 15.7982 7.80784ZM5.04114 11.3108C3.92815 10.9434 3.81743 10.5296 3.63184 9.83597L3.62672 9.81687L3.15615 8.16649C3.12784 8.05997 2.85008 8.05997 2.82041 8.16649L2.50085 9.69147C2.31074 10.394 1.90623 10.9522 1.21588 11.18L0.11563 11.6574C-0.0367335 11.7072 -0.0394302 11.923 0.112933 11.9742L1.22127 12.3666C1.90893 12.5945 2.31074 13.1527 2.5022 13.8525L2.82176 15.3114C2.85142 15.4179 3.12784 15.4179 3.15615 15.3114L3.53099 13.8592C3.72111 13.1554 4.01235 12.5958 4.94675 12.3666L5.98768 11.9742C6.14004 11.9216 6.13869 11.7059 5.98498 11.656L5.04114 11.3108ZM5.33019 0.812949C5.36674 0.661849 5.58158 0.659434 5.61894 0.811355L5.61899 0.811582L6.02856 2.50239C6.08442 2.69624 6.23624 2.8465 6.43132 2.89951L7.47286 3.18013C7.61383 3.2197 7.61829 3.41714 7.48035 3.46394L7.48015 3.46401L6.38799 3.83076C6.21241 3.88968 6.07619 4.03027 6.02153 4.20719L5.61894 5.77311L5.61884 5.77349C5.58095 5.92613 5.36829 5.91987 5.33166 5.77336L4.94237 4.21215C4.88888 4.03513 4.75378 3.89336 4.57956 3.83328L3.48805 3.4555C3.34919 3.40591 3.36033 3.20859 3.50031 3.17175L3.50054 3.17169L4.53472 2.90337C4.73486 2.85153 4.89134 2.69755 4.94463 2.49805L5.33019 0.812949Z"
-				fill="#C3C9D5"
+				fill="currentColor"
 			/>
 		</g>
 	</svg>
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 0aace90c27036..1ccd068584ecd 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -273,7 +273,7 @@ function handleOverrideClick() {
 					type="tertiary"
 					@click="handleOverrideClick"
 				>
-					<AiStarsIcon />
+					<AiStarsIcon :class="$style.aiStarsIcon" />
 				</N8nButton>
 			</N8nTooltip>
 		</template>
@@ -302,7 +302,7 @@ function handleOverrideClick() {
 					:class="$style.contentOverrideContainer"
 				>
 					<div :class="[$style.iconStars, 'el-input-group__prepend', $style.noCornersRight]">
-						<AiStarsIcon />
+						<AiStarsIcon :class="$style.aiStarsIcon" />
 					</div>
 					<N8nInput
 						:model-value="parameterOverrides?.overridePlaceholder"
@@ -367,7 +367,7 @@ function handleOverrideClick() {
 									type="tertiary"
 									@click="handleOverrideClick"
 								>
-									<AiStarsIcon />
+									<AiStarsIcon :class="$style.aiStarsIcon" />
 								</N8nButton>
 							</N8nTooltip>
 						</template>
@@ -420,7 +420,7 @@ function handleOverrideClick() {
 					input-size="small"
 					@update="
 						(x) => {
-							if (parameterOverrides) parameterOverrides.extraPropValues[name] = x.value as never;
+							if (parameterOverrides) parameterOverrides.extraPropValues[name] = x.value;
 							valueChanged({
 								name: props.path,
 								value: parameterOverrides?.buildValueFromOverride(props, false),
@@ -463,10 +463,11 @@ function handleOverrideClick() {
 	border: 0px;
 	height: 30px;
 	width: 30px;
-	background: var(--color-background-base);
+	background-color: var(--color-foreground-base);
+	color: var(--color-foreground-xdark);
 
 	&:hover {
-		background: var(--color-secondary);
+		background-color: var(--color-secondary);
 	}
 }
 
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index ddc946b20915b..9a333ec1d3c15 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -1445,7 +1445,7 @@
 	"parameterInputList.parameterOptions": "Parameter Options",
 	"parameterInputList.loadingFields": "Loading fields...",
 	"parameterInputList.loadingError": "Error loading fields. Refresh you page and try again.",
-	"parameterOverride.applyOverrideButtonText": "Defined automatically by the model",
+	"parameterOverride.overridePanelText": "Defined automatically by the model",
 	"parameterOverride.applyOverrideButtonTooltip": "Define automatically by the model during execution",
 	"parameterOverride.descriptionTooltip": "Explain to the LLM how it should generate this value, a good, specific description would allow LLMs to produce expected results much more often",
 	"personalizationModal.businessOwner": "Business Owner",
diff --git a/packages/editor-ui/src/utils/parameterOverrides.ts b/packages/editor-ui/src/utils/parameterOverrides.ts
index 9638e1546d099..9060d84aba37b 100644
--- a/packages/editor-ui/src/utils/parameterOverrides.ts
+++ b/packages/editor-ui/src/utils/parameterOverrides.ts
@@ -44,7 +44,12 @@ export class FromAiOverride implements ParameterOverride {
 
 	static readonly NODE_DENYLIST = ['toolCode', 'toolHttpRequest'];
 
-	static readonly PATH_DENYLIST = ['parameters.name', 'parameters.description'];
+	static readonly PATH_DENYLIST = [
+		'parameters.name',
+		'parameters.description',
+		// This is used in e.g. the telegram node if the dropdown selects manual mode
+		'parameters.toolDescription',
+	];
 
 	readonly overridePlaceholder = i18n.baseText('parameterOverride.overridePanelText');
 

From 87e6ffda1dba3f38bcada7050482b9e9897f1f7d Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Thu, 16 Jan 2025 16:57:20 +0100
Subject: [PATCH 29/82] fix light mode

---
 packages/editor-ui/src/components/ParameterInputFull.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 1ccd068584ecd..4c590db76fb46 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -448,7 +448,7 @@ function handleOverrideClick() {
 	display: flex;
 	gap: var(--spacing-4xs);
 	border-radius: var(--border-radius-base);
-	background: var(--color-background-base);
+	background-color: var(--color-foreground-base);
 }
 
 .overrideCloseButton {
@@ -493,10 +493,15 @@ function handleOverrideClick() {
 	width: 22px;
 	text-align: center;
 	border: none;
+	color: var(--color-foreground-xdark);
+	background-color: var(--color-foreground-base);
 }
 
 .overrideInput {
-	> div > input {
+	* > input {
+		background-color: var(
+			--color-foreground-base
+		) !important; // Need important to overwrite the styling in input
 		border: none;
 	}
 }

From c1d790076158db66daad1b9cdc8fa8aa937da341 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Fri, 17 Jan 2025 10:46:42 +0100
Subject: [PATCH 30/82] more review

---
 .../editor-ui/src/components/AiStarsIcon.vue  | 26 ++++++++++++++++++-
 .../src/components/ParameterInput.vue         |  7 ++---
 .../src/components/ParameterInputFull.vue     | 10 +++----
 3 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/packages/editor-ui/src/components/AiStarsIcon.vue b/packages/editor-ui/src/components/AiStarsIcon.vue
index 3925ae07e51b9..44958d7febd1a 100644
--- a/packages/editor-ui/src/components/AiStarsIcon.vue
+++ b/packages/editor-ui/src/components/AiStarsIcon.vue
@@ -1,5 +1,29 @@
+<script setup lang="ts">
+withDefaults(
+	defineProps<{
+		size?: 'mini' | 'small' | 'medium' | 'large';
+	}>(),
+	{
+		size: 'medium',
+	},
+);
+
+const sizes = {
+	mini: 8,
+	small: 10,
+	medium: 12,
+	large: 16,
+};
+</script>
+
 <template>
-	<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<svg
+		:width="sizes[size]"
+		:height="sizes[size]"
+		viewBox="0 0 16 16"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
 		<g id="NodeIcon">
 			<path
 				id="Union"
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index 5ef49b8a6fdab..22f8f5623eb40 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -437,8 +437,8 @@ const parameterInputClasses = computed(() => {
 
 	if (isSwitch.value) {
 		classes['parameter-switch'] = true;
-	} else {
-		// @review: verify this is ok for textarea
+	}
+	{
 		classes['parameter-value-container'] = true;
 	}
 
@@ -1066,7 +1066,6 @@ onUpdated(async () => {
 
 		<div
 			:class="[
-				$style.parameterInput,
 				'ignore-key-press-canvas',
 				{
 					[$style.hardRightCornersInput]: canBeOverridden,
@@ -1139,9 +1138,7 @@ onUpdated(async () => {
 					['json', 'string'].includes(parameter.type) ||
 					remoteParameterOptionsLoadingIssues !== null
 				"
-				:class="[$style.parameterInput]"
 			>
-				<!-- @review: confirm the style above is needed -->
 				<el-dialog
 					width="calc(100% - var(--spacing-3xl))"
 					:class="$style.modal"
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 4c590db76fb46..64236916dcb12 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -273,7 +273,7 @@ function handleOverrideClick() {
 					type="tertiary"
 					@click="handleOverrideClick"
 				>
-					<AiStarsIcon :class="$style.aiStarsIcon" />
+					<AiStarsIcon size="large" :class="$style.aiStarsIcon" />
 				</N8nButton>
 			</N8nTooltip>
 		</template>
@@ -367,7 +367,7 @@ function handleOverrideClick() {
 									type="tertiary"
 									@click="handleOverrideClick"
 								>
-									<AiStarsIcon :class="$style.aiStarsIcon" />
+									<AiStarsIcon size="large" :class="$style.aiStarsIcon" />
 								</N8nButton>
 							</N8nTooltip>
 						</template>
@@ -467,6 +467,7 @@ function handleOverrideClick() {
 	color: var(--color-foreground-xdark);
 
 	&:hover {
+		color: var(--color-foreground-xdark);
 		background-color: var(--color-secondary);
 	}
 }
@@ -499,14 +500,11 @@ function handleOverrideClick() {
 
 .overrideInput {
 	* > input {
-		background-color: var(
-			--color-foreground-base
-		) !important; // Need important to overwrite the styling in input
+		background-color: var(--color-foreground-base) !important;
 		border: none;
 	}
 }
 
-// @Review double check margin here for pill list with and without pill
 .overridePillList {
 	margin-top: var(--spacing-2xs);
 }

From 359b3089dfa6fbdb0bc41a929eb4c2e5f357f7f6 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Fri, 17 Jan 2025 11:18:30 +0100
Subject: [PATCH 31/82] PR Feedback

---
 .../N8nPillList/PillList.stories.ts           | 16 +++++----
 .../src/components/N8nPillList/PillList.vue   | 33 +++++++++++++------
 packages/design-system/src/locale/lang/en.ts  |  1 +
 3 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/packages/design-system/src/components/N8nPillList/PillList.stories.ts b/packages/design-system/src/components/N8nPillList/PillList.stories.ts
index 2a20dde3b6c46..3d063790248df 100644
--- a/packages/design-system/src/components/N8nPillList/PillList.stories.ts
+++ b/packages/design-system/src/components/N8nPillList/PillList.stories.ts
@@ -12,11 +12,15 @@ export default {
 };
 
 const Template: StoryFn = (args, { argTypes }) => ({
-	setup: () => ({ args: { ...args, modelValue: undefined }, model: args.modelValue }),
+	setup: () => ({
+		args: { ...args, modelValue: undefined },
+		model: args.modelValue,
+	}),
 	props: Object.keys(argTypes),
 	// Generics make this difficult to type
 	components: N8nPillList as never,
-	template: '<n8n-pill-list v-bind="args" v-model="model" />',
+	template:
+		'<n8n-pill-list v-bind="args" v-model="model"><template #displayItem="{ name }">Slot content for {{name}}</template></n8n-pill-list>',
 });
 
 export const PillList = Template.bind({});
@@ -26,16 +30,16 @@ PillList.args = {
 	},
 	inputs: [
 		{
-			name: 'propA',
-			initialValue: false,
+			name: 'propC',
+			initialValue: 'propC default',
 		},
 		{
 			name: 'propB',
 			initialValue: 0,
 		},
 		{
-			name: 'propC',
-			initialValue: 'propC default',
+			name: 'propA',
+			initialValue: false,
 		},
 	],
 };
diff --git a/packages/design-system/src/components/N8nPillList/PillList.vue b/packages/design-system/src/components/N8nPillList/PillList.vue
index 84efc1f78e9c2..6b55157c650a7 100644
--- a/packages/design-system/src/components/N8nPillList/PillList.vue
+++ b/packages/design-system/src/components/N8nPillList/PillList.vue
@@ -1,7 +1,14 @@
 <script setup lang="ts" generic="Value, Item extends { name: string; initialValue: Value }">
 import { computed } from 'vue';
 
+import { useI18n } from '../../composables/useI18n';
+
+const { t } = useI18n();
+
 defineSlots<{
+	// This slot is used to display a selectable item
+	addItem: (props: Item) => unknown;
+	// This slot is used to display a selected item
 	displayItem: (props: Item) => unknown;
 }>();
 
@@ -23,16 +30,18 @@ const selectedItems = defineModel<Record<string, Value>>({ required: true });
 const inputMap = computed(() => Object.fromEntries(props.inputs.map((x) => [x.name, x] as const)));
 
 const visiblePills = computed(() => {
-	return props.inputs.filter((pill) => !selectedItems.value.hasOwnProperty(pill.name));
+	return props.inputs
+		.filter((pill) => !selectedItems.value.hasOwnProperty(pill.name))
+		.sort(itemComparator);
 });
 
 const sortedSelectedItems = computed(() => {
-	return [
-		...Object.entries(selectedItems.value).map(([name, initialValue]) => ({
+	return Object.entries(selectedItems.value)
+		.map(([name, initialValue]) => ({
 			...inputMap.value[name],
 			initialValue,
-		})),
-	].sort((a, b) => (a.name[0] < b.name[0] ? -1 : 1));
+		}))
+		.sort(itemComparator);
 });
 
 function addToSelectedItems(name: string) {
@@ -42,19 +51,25 @@ function addToSelectedItems(name: string) {
 function removeFromSelectedItems(name: string) {
 	delete selectedItems.value[name];
 }
+
+function itemComparator(a: Item, b: Item) {
+	return a.name.localeCompare(b.name);
+}
 </script>
 
 <template>
 	<div>
 		<div :class="$style.pillContainer">
 			<span
-				v-for="item in [...visiblePills].sort((a, b) => (a.name < b.name ? -1 : 1))"
+				v-for="item in visiblePills"
 				:key="item.name"
 				:class="$style.pillCell"
 				:data-test-id="`pill-list-pill-${item.name}`"
 				@click="!props.disabled && addToSelectedItems(item.name)"
 			>
-				+ Add a {{ item.name }}
+				<slot name="addItem" v-bind="item"
+					>{{ t('selectableList.addDefault') }} {{ item.name }}</slot
+				>
 			</span>
 		</div>
 		<div
@@ -71,9 +86,7 @@ function removeFromSelectedItems(name: string) {
 				@click="!disabled && removeFromSelectedItems(item.name)"
 			/>
 			<div :class="$style.slotContainer">
-				<slot name="displayItem" v-bind="item"
-					>Empty slot with v-bind: {{ JSON.stringify(item) }}</slot
-				>
+				<slot name="displayItem" v-bind="item" />
 			</div>
 		</div>
 	</div>
diff --git a/packages/design-system/src/locale/lang/en.ts b/packages/design-system/src/locale/lang/en.ts
index 35f2fd9f0e5de..3743bf92c676c 100644
--- a/packages/design-system/src/locale/lang/en.ts
+++ b/packages/design-system/src/locale/lang/en.ts
@@ -51,4 +51,5 @@ export default {
 	'iconPicker.button.defaultToolTip': 'Choose icon',
 	'iconPicker.tabs.icons': 'Icons',
 	'iconPicker.tabs.emojis': 'Emojis',
+	'selectableList.addDefault': '+ Add a',
 } as N8nLocale;

From d3039002969f1d6dab5720d539dd5f148d1838e9 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Fri, 17 Jan 2025 11:30:31 +0100
Subject: [PATCH 32/82] Update name and tests

---
 .../components/N8nPillList/PillList.test.ts   | 101 -----------------
 .../__snapshots__/PillList.test.ts.snap       |  28 -----
 .../src/components/N8nPillList/index.ts       |   3 -
 .../SelectableList.stories.ts}                |  14 +--
 .../N8nSelectableList/SelectableList.test.ts  | 107 ++++++++++++++++++
 .../SelectableList.vue}                       |  24 ++--
 .../__snapshots__/SelectableList.test.ts.snap |  28 +++++
 .../src/components/N8nSelectableList/index.ts |   3 +
 .../design-system/src/components/index.ts     |   2 +-
 9 files changed, 158 insertions(+), 152 deletions(-)
 delete mode 100644 packages/design-system/src/components/N8nPillList/PillList.test.ts
 delete mode 100644 packages/design-system/src/components/N8nPillList/__snapshots__/PillList.test.ts.snap
 delete mode 100644 packages/design-system/src/components/N8nPillList/index.ts
 rename packages/design-system/src/components/{N8nPillList/PillList.stories.ts => N8nSelectableList/SelectableList.stories.ts} (62%)
 create mode 100644 packages/design-system/src/components/N8nSelectableList/SelectableList.test.ts
 rename packages/design-system/src/components/{N8nPillList/PillList.vue => N8nSelectableList/SelectableList.vue} (82%)
 create mode 100644 packages/design-system/src/components/N8nSelectableList/__snapshots__/SelectableList.test.ts.snap
 create mode 100644 packages/design-system/src/components/N8nSelectableList/index.ts

diff --git a/packages/design-system/src/components/N8nPillList/PillList.test.ts b/packages/design-system/src/components/N8nPillList/PillList.test.ts
deleted file mode 100644
index 6ebc1a9083bfb..0000000000000
--- a/packages/design-system/src/components/N8nPillList/PillList.test.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import { fireEvent, render } from '@testing-library/vue';
-
-import N8nPillList from './PillList.vue';
-
-describe('N8nPillList', () => {
-	it('renders when empty', () => {
-		const wrapper = render(N8nPillList, {
-			props: {
-				modelValue: {},
-				inputs: [],
-			},
-		});
-		expect(wrapper.html()).toMatchSnapshot();
-	});
-
-	it('renders one clickable element that can be added and removed', async () => {
-		const wrapper = render(N8nPillList, {
-			props: {
-				modelValue: {},
-				inputs: [{ name: 'propA', initialValue: '' }],
-			},
-		});
-
-		expect(wrapper.getByTestId('pill-list-pill-propA')).toBeInTheDocument();
-
-		await fireEvent.click(wrapper.getByTestId('pill-list-pill-propA'));
-
-		expect(wrapper.queryByTestId('pill-list-pill-propA')).not.toBeInTheDocument();
-		expect(wrapper.getByTestId('pill-list-slot-propA')).toBeInTheDocument();
-
-		await fireEvent.click(wrapper.getByTestId('pill-list-remove-slot-propA'));
-
-		expect(wrapper.queryByTestId('pill-list-slot-propA')).not.toBeInTheDocument();
-	});
-
-	it('renders multiple elements with some pre-selected', () => {
-		const wrapper = render(N8nPillList, {
-			props: {
-				modelValue: {
-					propC: false,
-					propA: 'propA value',
-				},
-				inputs: [
-					{ name: 'propA', initialValue: '' },
-					{ name: 'propB', initialValue: 3 },
-					{ name: 'propC', initialValue: true },
-					{ name: 'propD', initialValue: true },
-				],
-			},
-		});
-
-		expect(wrapper.queryByTestId('pill-list-pill-propA')).not.toBeInTheDocument();
-		expect(wrapper.queryByTestId('pill-list-pill-propC')).not.toBeInTheDocument();
-		expect(wrapper.getByTestId('pill-list-slot-propA')).toBeInTheDocument();
-		expect(wrapper.getByTestId('pill-list-pill-propB')).toBeInTheDocument();
-		expect(wrapper.getByTestId('pill-list-slot-propC')).toBeInTheDocument();
-		expect(wrapper.getByTestId('pill-list-pill-propD')).toBeInTheDocument();
-
-		// This asserts order - specifically that propA appears before propC
-		expect(
-			wrapper
-				.getByTestId('pill-list-slot-propA')
-				.compareDocumentPosition(wrapper.getByTestId('pill-list-slot-propC')),
-		).toEqual(2);
-
-		expect(wrapper.html()).toMatchSnapshot();
-	});
-
-	it('renders disabled collection and clicks do not modify', async () => {
-		const wrapper = render(N8nPillList, {
-			props: {
-				modelValue: {
-					propB: 'propB value',
-				},
-				disabled: true,
-				inputs: [
-					{ name: 'propA', initialValue: '' },
-					{ name: 'propB', initialValue: '' },
-					{ name: 'propC', initialValue: '' },
-				],
-			},
-		});
-
-		expect(wrapper.getByTestId('pill-list-pill-propA')).toBeInTheDocument();
-		expect(wrapper.getByTestId('pill-list-slot-propB')).toBeInTheDocument();
-		expect(wrapper.queryByTestId('pill-list-pill-propB')).not.toBeInTheDocument();
-		expect(wrapper.getByTestId('pill-list-pill-propC')).toBeInTheDocument();
-
-		await fireEvent.click(wrapper.getByTestId('pill-list-pill-propA'));
-
-		expect(wrapper.getByTestId('pill-list-pill-propA')).toBeInTheDocument();
-		expect(wrapper.queryByTestId('pill-list-slot-propA')).not.toBeInTheDocument();
-
-		await fireEvent.click(wrapper.getByTestId('pill-list-remove-slot-propB'));
-
-		expect(wrapper.getByTestId('pill-list-slot-propB')).toBeInTheDocument();
-		expect(wrapper.queryByTestId('pill-list-pill-propB')).not.toBeInTheDocument();
-
-		expect(wrapper.html()).toMatchSnapshot();
-	});
-});
diff --git a/packages/design-system/src/components/N8nPillList/__snapshots__/PillList.test.ts.snap b/packages/design-system/src/components/N8nPillList/__snapshots__/PillList.test.ts.snap
deleted file mode 100644
index 328daaa0a95e0..0000000000000
--- a/packages/design-system/src/components/N8nPillList/__snapshots__/PillList.test.ts.snap
+++ /dev/null
@@ -1,28 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`N8nPillList > renders disabled collection and clicks do not modify 1`] = `
-"<div>
-  <div class="pillContainer"><span class="pillCell" data-test-id="pill-list-pill-propA"> + Add a propA</span><span class="pillCell" data-test-id="pill-list-pill-propC"> + Add a propC</span></div>
-  <div class="slotComboContainer" data-test-id="pill-list-slot-propB"><span class="n8n-text compact size-xsmall regular n8n-icon slotRemoveIcon slotRemoveIcon n8n-icon slotRemoveIcon slotRemoveIcon" data-test-id="pill-list-remove-slot-propB"><!----></span>
-    <div class="slotContainer">Empty slot with v-bind: {"name":"propB","initialValue":"propB value"}</div>
-  </div>
-</div>"
-`;
-
-exports[`N8nPillList > renders multiple elements with some pre-selected 1`] = `
-"<div>
-  <div class="pillContainer"><span class="pillCell" data-test-id="pill-list-pill-propB"> + Add a propB</span><span class="pillCell" data-test-id="pill-list-pill-propD"> + Add a propD</span></div>
-  <div class="slotComboContainer" data-test-id="pill-list-slot-propC"><span class="n8n-text compact size-xsmall regular n8n-icon slotRemoveIcon slotRemoveIcon n8n-icon slotRemoveIcon slotRemoveIcon" data-test-id="pill-list-remove-slot-propC"><!----></span>
-    <div class="slotContainer">Empty slot with v-bind: {"name":"propC","initialValue":false}</div>
-  </div>
-  <div class="slotComboContainer" data-test-id="pill-list-slot-propA"><span class="n8n-text compact size-xsmall regular n8n-icon slotRemoveIcon slotRemoveIcon n8n-icon slotRemoveIcon slotRemoveIcon" data-test-id="pill-list-remove-slot-propA"><!----></span>
-    <div class="slotContainer">Empty slot with v-bind: {"name":"propA","initialValue":"propA value"}</div>
-  </div>
-</div>"
-`;
-
-exports[`N8nPillList > renders when empty 1`] = `
-"<div>
-  <div class="pillContainer"></div>
-</div>"
-`;
diff --git a/packages/design-system/src/components/N8nPillList/index.ts b/packages/design-system/src/components/N8nPillList/index.ts
deleted file mode 100644
index c0762529b4100..0000000000000
--- a/packages/design-system/src/components/N8nPillList/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import N8nPillList from './PillList.vue';
-
-export default N8nPillList;
diff --git a/packages/design-system/src/components/N8nPillList/PillList.stories.ts b/packages/design-system/src/components/N8nSelectableList/SelectableList.stories.ts
similarity index 62%
rename from packages/design-system/src/components/N8nPillList/PillList.stories.ts
rename to packages/design-system/src/components/N8nSelectableList/SelectableList.stories.ts
index 3d063790248df..a4f5244143500 100644
--- a/packages/design-system/src/components/N8nPillList/PillList.stories.ts
+++ b/packages/design-system/src/components/N8nSelectableList/SelectableList.stories.ts
@@ -1,10 +1,10 @@
 import type { StoryFn } from '@storybook/vue3';
 
-import N8nPillList from './PillList.vue';
+import N8nSelectableList from './SelectableList.vue';
 
 export default {
-	title: 'Modules/PillList',
-	component: N8nPillList,
+	title: 'Modules/SelectableList',
+	component: N8nSelectableList,
 	argTypes: {},
 	parameters: {
 		backgrounds: { default: '--color-background-light' },
@@ -18,13 +18,13 @@ const Template: StoryFn = (args, { argTypes }) => ({
 	}),
 	props: Object.keys(argTypes),
 	// Generics make this difficult to type
-	components: N8nPillList as never,
+	components: N8nSelectableList as never,
 	template:
-		'<n8n-pill-list v-bind="args" v-model="model"><template #displayItem="{ name }">Slot content for {{name}}</template></n8n-pill-list>',
+		'<n8n-selectable-list v-bind="args" v-model="model"><template #displayItem="{ name }">Slot content for {{name}}</template></n8n-selectable-list>',
 });
 
-export const PillList = Template.bind({});
-PillList.args = {
+export const SelectableList = Template.bind({});
+SelectableList.args = {
 	modelValue: {
 		propC: 'propC pre-existing initial value',
 	},
diff --git a/packages/design-system/src/components/N8nSelectableList/SelectableList.test.ts b/packages/design-system/src/components/N8nSelectableList/SelectableList.test.ts
new file mode 100644
index 0000000000000..e7ba9d420615b
--- /dev/null
+++ b/packages/design-system/src/components/N8nSelectableList/SelectableList.test.ts
@@ -0,0 +1,107 @@
+import { fireEvent, render } from '@testing-library/vue';
+
+import N8nSelectableList from './SelectableList.vue';
+
+describe('N8nSelectableList', () => {
+	it('renders when empty', () => {
+		const wrapper = render(N8nSelectableList, {
+			props: {
+				modelValue: {},
+				inputs: [],
+			},
+		});
+		expect(wrapper.html()).toMatchSnapshot();
+	});
+
+	it('renders one clickable element that can be added and removed', async () => {
+		const wrapper = render(N8nSelectableList, {
+			props: {
+				modelValue: {},
+				inputs: [{ name: 'propA', initialValue: '' }],
+			},
+		});
+
+		expect(wrapper.getByTestId('selectable-list-selectable-propA')).toBeInTheDocument();
+
+		await fireEvent.click(wrapper.getByTestId('selectable-list-selectable-propA'));
+
+		expect(wrapper.queryByTestId('selectable-list-selectable-propA')).not.toBeInTheDocument();
+		expect(wrapper.getByTestId('selectable-list-slot-propA')).toBeInTheDocument();
+
+		await fireEvent.click(wrapper.getByTestId('selectable-list-remove-slot-propA'));
+
+		expect(wrapper.queryByTestId('selectable-list-slot-propA')).not.toBeInTheDocument();
+	});
+
+	it('renders multiple elements with some pre-selected', () => {
+		const wrapper = render(N8nSelectableList, {
+			props: {
+				modelValue: {
+					propC: false,
+					propA: 'propA value',
+				},
+				inputs: [
+					{ name: 'propD', initialValue: true },
+					{ name: 'propC', initialValue: true },
+					{ name: 'propB', initialValue: 3 },
+					{ name: 'propA', initialValue: '' },
+				],
+			},
+		});
+
+		expect(wrapper.queryByTestId('selectable-list-selectable-propA')).not.toBeInTheDocument();
+		expect(wrapper.queryByTestId('selectable-list-selectable-propC')).not.toBeInTheDocument();
+		expect(wrapper.getByTestId('selectable-list-slot-propA')).toBeInTheDocument();
+		expect(wrapper.getByTestId('selectable-list-selectable-propB')).toBeInTheDocument();
+		expect(wrapper.getByTestId('selectable-list-slot-propC')).toBeInTheDocument();
+		expect(wrapper.getByTestId('selectable-list-selectable-propD')).toBeInTheDocument();
+
+		// This asserts order - specifically that propA appears before propC
+		expect(
+			wrapper
+				.getByTestId('selectable-list-slot-propA')
+				.compareDocumentPosition(wrapper.getByTestId('selectable-list-slot-propC')),
+		).toEqual(4);
+
+		expect(
+			wrapper
+				.getByTestId('selectable-list-selectable-propB')
+				.compareDocumentPosition(wrapper.getByTestId('selectable-list-selectable-propD')),
+		).toEqual(4);
+
+		expect(wrapper.html()).toMatchSnapshot();
+	});
+
+	it('renders disabled collection and clicks do not modify', async () => {
+		const wrapper = render(N8nSelectableList, {
+			props: {
+				modelValue: {
+					propB: 'propB value',
+				},
+				disabled: true,
+				inputs: [
+					{ name: 'propA', initialValue: '' },
+					{ name: 'propB', initialValue: '' },
+					{ name: 'propC', initialValue: '' },
+				],
+			},
+		});
+
+		expect(wrapper.getByTestId('selectable-list-selectable-propA')).toBeInTheDocument();
+		expect(wrapper.getByTestId('selectable-list-slot-propB')).toBeInTheDocument();
+		expect(wrapper.queryByTestId('selectable-list-selectable-propB')).not.toBeInTheDocument();
+		expect(wrapper.getByTestId('selectable-list-selectable-propC')).toBeInTheDocument();
+
+		await fireEvent.click(wrapper.getByTestId('selectable-list-selectable-propA'));
+
+		expect(wrapper.getByTestId('selectable-list-selectable-propA')).toBeInTheDocument();
+		expect(wrapper.queryByTestId('selectable-list-slot-propA')).not.toBeInTheDocument();
+
+		await fireEvent.click(wrapper.getByTestId('selectable-list-remove-slot-propB'));
+
+		expect(wrapper.getByTestId('selectable-list-slot-propB')).toBeInTheDocument();
+		expect(wrapper.queryByTestId('selectable-list-selectable-propB')).not.toBeInTheDocument();
+
+		expect(wrapper.html()).toMatchSnapshot();
+	});
+});
diff --git a/packages/design-system/src/components/N8nPillList/PillList.vue b/packages/design-system/src/components/N8nSelectableList/SelectableList.vue
similarity index 82%
rename from packages/design-system/src/components/N8nPillList/PillList.vue
rename to packages/design-system/src/components/N8nSelectableList/SelectableList.vue
index 6b55157c650a7..e5ba985edf62b 100644
--- a/packages/design-system/src/components/N8nPillList/PillList.vue
+++ b/packages/design-system/src/components/N8nSelectableList/SelectableList.vue
@@ -12,12 +12,12 @@ defineSlots<{
 	displayItem: (props: Item) => unknown;
 }>();
 
-type PillListProps = {
+type SelectableListProps = {
 	inputs: Item[];
 	disabled?: boolean;
 };
 
-const props = withDefaults(defineProps<PillListProps>(), {
+const props = withDefaults(defineProps<SelectableListProps>(), {
 	inputs: () => [],
 	disabled: false,
 });
@@ -29,9 +29,9 @@ const selectedItems = defineModel<Record<string, Value>>({ required: true });
 
 const inputMap = computed(() => Object.fromEntries(props.inputs.map((x) => [x.name, x] as const)));
 
-const visiblePills = computed(() => {
+const visibleSelectables = computed(() => {
 	return props.inputs
-		.filter((pill) => !selectedItems.value.hasOwnProperty(pill.name))
+		.filter((selectable) => !selectedItems.value.hasOwnProperty(selectable.name))
 		.sort(itemComparator);
 });
 
@@ -59,12 +59,12 @@ function itemComparator(a: Item, b: Item) {
 
 <template>
 	<div>
-		<div :class="$style.pillContainer">
+		<div :class="$style.selectableContainer">
 			<span
-				v-for="item in visiblePills"
+				v-for="item in visibleSelectables"
 				:key="item.name"
-				:class="$style.pillCell"
-				:data-test-id="`pill-list-pill-${item.name}`"
+				:class="$style.selectableCell"
+				:data-test-id="`selectable-list-selectable-${item.name}`"
 				@click="!props.disabled && addToSelectedItems(item.name)"
 			>
 				<slot name="addItem" v-bind="item"
@@ -76,13 +76,13 @@ function itemComparator(a: Item, b: Item) {
 			v-for="item in sortedSelectedItems"
 			:key="item.name"
 			:class="$style.slotComboContainer"
-			:data-test-id="`pill-list-slot-${item.name}`"
+			:data-test-id="`selectable-list-slot-${item.name}`"
 		>
 			<N8nIcon
 				:class="$style.slotRemoveIcon"
 				size="xsmall"
 				:icon="disabled ? 'none' : 'trash'"
-				:data-test-id="`pill-list-remove-slot-${item.name}`"
+				:data-test-id="`selectable-list-remove-slot-${item.name}`"
 				@click="!disabled && removeFromSelectedItems(item.name)"
 			/>
 			<div :class="$style.slotContainer">
@@ -104,12 +104,12 @@ function itemComparator(a: Item, b: Item) {
 	flex-grow: 1;
 }
 
-.pillContainer {
+.selectableContainer {
 	width: 100%;
 	flex-wrap: wrap;
 	display: flex;
 }
-.pillCell {
+.selectableCell {
 	display: flex;
 	margin-right: var(--spacing-3xs);
 
diff --git a/packages/design-system/src/components/N8nSelectableList/__snapshots__/SelectableList.test.ts.snap b/packages/design-system/src/components/N8nSelectableList/__snapshots__/SelectableList.test.ts.snap
new file mode 100644
index 0000000000000..747dbeb778dfe
--- /dev/null
+++ b/packages/design-system/src/components/N8nSelectableList/__snapshots__/SelectableList.test.ts.snap
@@ -0,0 +1,28 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`N8nSelectableList > renders disabled collection and clicks do not modify 1`] = `
+"<div>
+  <div class="selectableContainer"><span class="selectableCell" data-test-id="selectable-list-selectable-propA">+ Add a propA</span><span class="selectableCell" data-test-id="selectable-list-selectable-propC">+ Add a propC</span></div>
+  <div class="slotComboContainer" data-test-id="selectable-list-slot-propB"><span class="n8n-text compact size-xsmall regular n8n-icon slotRemoveIcon slotRemoveIcon n8n-icon slotRemoveIcon slotRemoveIcon" data-test-id="selectable-list-remove-slot-propB"><!----></span>
+    <div class="slotContainer"></div>
+  </div>
+</div>"
+`;
+
+exports[`N8nSelectableList > renders multiple elements with some pre-selected 1`] = `
+"<div>
+  <div class="selectableContainer"><span class="selectableCell" data-test-id="selectable-list-selectable-propB">+ Add a propB</span><span class="selectableCell" data-test-id="selectable-list-selectable-propD">+ Add a propD</span></div>
+  <div class="slotComboContainer" data-test-id="selectable-list-slot-propA"><span class="n8n-text compact size-xsmall regular n8n-icon slotRemoveIcon slotRemoveIcon n8n-icon slotRemoveIcon slotRemoveIcon" data-test-id="selectable-list-remove-slot-propA"><!----></span>
+    <div class="slotContainer"></div>
+  </div>
+  <div class="slotComboContainer" data-test-id="selectable-list-slot-propC"><span class="n8n-text compact size-xsmall regular n8n-icon slotRemoveIcon slotRemoveIcon n8n-icon slotRemoveIcon slotRemoveIcon" data-test-id="selectable-list-remove-slot-propC"><!----></span>
+    <div class="slotContainer"></div>
+  </div>
+</div>"
+`;
+
+exports[`N8nSelectableList > renders when empty 1`] = `
+"<div>
+  <div class="selectableContainer"></div>
+</div>"
+`;
diff --git a/packages/design-system/src/components/N8nSelectableList/index.ts b/packages/design-system/src/components/N8nSelectableList/index.ts
new file mode 100644
index 0000000000000..6c2d0e1127b02
--- /dev/null
+++ b/packages/design-system/src/components/N8nSelectableList/index.ts
@@ -0,0 +1,3 @@
+import N8nSelectableList from './SelectableList.vue';
+
+export default N8nSelectableList;
diff --git a/packages/design-system/src/components/index.ts b/packages/design-system/src/components/index.ts
index d7d06ed864e97..6b584b8e8e336 100644
--- a/packages/design-system/src/components/index.ts
+++ b/packages/design-system/src/components/index.ts
@@ -33,7 +33,7 @@ export { default as N8nNodeCreatorNode } from './N8nNodeCreatorNode';
 export { default as N8nNodeIcon } from './N8nNodeIcon';
 export { default as N8nNotice } from './N8nNotice';
 export { default as N8nOption } from './N8nOption';
-export { default as N8nPillList } from './N8nPillList';
+export { default as N8nSelectableList } from './N8nSelectableList';
 export { default as N8nPopover } from './N8nPopover';
 export { default as N8nPulse } from './N8nPulse';
 export { default as N8nRadioButtons } from './N8nRadioButtons';

From a0b7c2ff2ea6a0f005ec86f451b64340dce684b9 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Fri, 17 Jan 2025 13:48:40 +0100
Subject: [PATCH 33/82] Move files and update dependencies

---
 packages/core/src/CreateNodeAsTool.ts       | 438 ++------------------
 packages/workflow/package.json              |   3 +-
 packages/workflow/src/AIParametersParser.ts | 357 ++++++++++++++++
 packages/workflow/src/index.ts              |   1 +
 pnpm-lock.yaml                              |  22 +-
 5 files changed, 420 insertions(+), 401 deletions(-)
 create mode 100644 packages/workflow/src/AIParametersParser.ts

diff --git a/packages/core/src/CreateNodeAsTool.ts b/packages/core/src/CreateNodeAsTool.ts
index da34b377dfc4f..6654c77505266 100644
--- a/packages/core/src/CreateNodeAsTool.ts
+++ b/packages/core/src/CreateNodeAsTool.ts
@@ -1,411 +1,59 @@
 import { DynamicStructuredTool } from '@langchain/core/tools';
-import type { IDataObject, INode, INodeType } from 'n8n-workflow';
-import { jsonParse, NodeOperationError } from 'n8n-workflow';
-import { z } from 'zod';
+import { AIParametersParser } from 'n8n-workflow';
+import type { IDataObject, INode, INodeType, AIParametersParserOptions } from 'n8n-workflow';
+import type { z } from 'zod';
 
-type AllowedTypes = 'string' | 'number' | 'boolean' | 'json';
-interface FromAIArgument {
-	key: string;
-	description?: string;
-	type?: AllowedTypes;
-	defaultValue?: string | number | boolean | Record<string, unknown>;
-}
-
-type ParserOptions = {
+export type CreateNodeAsToolOptions = {
 	node: INode;
 	nodeType: INodeType;
 	handleToolInvocation: (toolArgs: IDataObject) => Promise<unknown>;
 };
 
-// This file is temporarily duplicated in `packages/@n8n/nodes-langchain/nodes/tools/ToolWorkflow/v2/utils/FromAIParser.ts`
-// Please apply any changes in both files
-
 /**
- * AIParametersParser
- *
- * This class encapsulates the logic for parsing node parameters, extracting $fromAI calls,
- * generating Zod schemas, and creating LangChain tools.
+ * Generates a description for a node based on the provided parameters.
+ * @param node The node type.
+ * @param nodeParameters The parameters of the node.
+ * @returns A string description for the node.
  */
-class AIParametersParser {
-	/**
-	 * Constructs an instance of AIParametersParser.
-	 */
-	constructor(private readonly options: ParserOptions) {}
-
-	/**
-	 * Generates a Zod schema based on the provided FromAIArgument placeholder.
-	 * @param placeholder The FromAIArgument object containing key, type, description, and defaultValue.
-	 * @returns A Zod schema corresponding to the placeholder's type and constraints.
-	 */
-	private generateZodSchema(placeholder: FromAIArgument): z.ZodTypeAny {
-		let schema: z.ZodTypeAny;
-
-		switch (placeholder.type?.toLowerCase()) {
-			case 'string':
-				schema = z.string();
-				break;
-			case 'number':
-				schema = z.number();
-				break;
-			case 'boolean':
-				schema = z.boolean();
-				break;
-			case 'json':
-				schema = z.record(z.any());
-				break;
-			default:
-				schema = z.string();
-		}
-
-		if (placeholder.description) {
-			schema = schema.describe(`${schema.description ?? ''} ${placeholder.description}`.trim());
+function makeDescription(node: INode, nodeType: INodeType): string {
+	const manualDescription = node.parameters.toolDescription as string;
+
+	if (node.parameters.descriptionType === 'auto') {
+		const resource = node.parameters.resource as string;
+		const operation = node.parameters.operation as string;
+		let description = nodeType.description.description;
+		if (resource) {
+			description += `\n Resource: ${resource}`;
 		}
-
-		if (placeholder.defaultValue !== undefined) {
-			schema = schema.default(placeholder.defaultValue);
+		if (operation) {
+			description += `\n Operation: ${operation}`;
 		}
-
-		return schema;
+		return description.trim();
 	}
-
-	/**
-	 * Recursively traverses the nodeParameters object to find all $fromAI calls.
-	 * @param payload The current object or value being traversed.
-	 * @param collectedArgs The array collecting FromAIArgument objects.
-	 */
-	private traverseNodeParameters(payload: unknown, collectedArgs: FromAIArgument[]) {
-		if (typeof payload === 'string') {
-			const fromAICalls = this.extractFromAICalls(payload);
-			fromAICalls.forEach((call) => collectedArgs.push(call));
-		} else if (Array.isArray(payload)) {
-			payload.forEach((item: unknown) => this.traverseNodeParameters(item, collectedArgs));
-		} else if (typeof payload === 'object' && payload !== null) {
-			Object.values(payload).forEach((value) => this.traverseNodeParameters(value, collectedArgs));
-		}
+	if (node.parameters.descriptionType === 'manual') {
+		return manualDescription ?? nodeType.description.description;
 	}
 
-	/**
-	 * Extracts all $fromAI calls from a given string
-	 * @param str The string to search for $fromAI calls.
-	 * @returns An array of FromAIArgument objects.
-	 *
-	 * This method uses a regular expression to find the start of each $fromAI function call
-	 * in the input string. It then employs a character-by-character parsing approach to
-	 * accurately extract the arguments of each call, handling nested parentheses and quoted strings.
-	 *
-	 * The parsing process:
-	 * 1. Finds the starting position of a $fromAI call using regex.
-	 * 2. Iterates through characters, keeping track of parentheses depth and quote status.
-	 * 3. Handles escaped characters within quotes to avoid premature quote closing.
-	 * 4. Builds the argument string until the matching closing parenthesis is found.
-	 * 5. Parses the extracted argument string into a FromAIArgument object.
-	 * 6. Repeats the process for all $fromAI calls in the input string.
-	 *
-	 */
-	private extractFromAICalls(str: string): FromAIArgument[] {
-		const args: FromAIArgument[] = [];
-		// Regular expression to match the start of a $fromAI function call
-		const pattern = /\$fromAI\s*\(\s*/gi;
-		let match: RegExpExecArray | null;
-
-		while ((match = pattern.exec(str)) !== null) {
-			const startIndex = match.index + match[0].length;
-			let current = startIndex;
-			let inQuotes = false;
-			let quoteChar = '';
-			let parenthesesCount = 1;
-			let argsString = '';
-
-			// Parse the arguments string, handling nested parentheses and quotes
-			while (current < str.length && parenthesesCount > 0) {
-				const char = str[current];
-
-				if (inQuotes) {
-					// Handle characters inside quotes, including escaped characters
-					if (char === '\\' && current + 1 < str.length) {
-						argsString += char + str[current + 1];
-						current += 2;
-						continue;
-					}
-
-					if (char === quoteChar) {
-						inQuotes = false;
-						quoteChar = '';
-					}
-					argsString += char;
-				} else {
-					// Handle characters outside quotes
-					if (['"', "'", '`'].includes(char)) {
-						inQuotes = true;
-						quoteChar = char;
-					} else if (char === '(') {
-						parenthesesCount++;
-					} else if (char === ')') {
-						parenthesesCount--;
-					}
-
-					// Only add characters if we're still inside the main parentheses
-					if (parenthesesCount > 0 || char !== ')') {
-						argsString += char;
-					}
-				}
-
-				current++;
-			}
-
-			// If parentheses are balanced, parse the arguments
-			if (parenthesesCount === 0) {
-				try {
-					const parsedArgs = this.parseArguments(argsString);
-					args.push(parsedArgs);
-				} catch (error) {
-					// If parsing fails, throw an ApplicationError with details
-					throw new NodeOperationError(
-						this.options.node,
-						`Failed to parse $fromAI arguments: ${argsString}: ${error}`,
-					);
-				}
-			} else {
-				// Log an error if parentheses are unbalanced
-				throw new NodeOperationError(
-					this.options.node,
-					`Unbalanced parentheses while parsing $fromAI call: ${str.slice(startIndex)}`,
-				);
-			}
-		}
-
-		return args;
-	}
-
-	/**
-	 * Parses the arguments of a single $fromAI function call.
-	 * @param argsString The string containing the function arguments.
-	 * @returns A FromAIArgument object.
-	 */
-	private parseArguments(argsString: string): FromAIArgument {
-		// Split arguments by commas not inside quotes
-		const args: string[] = [];
-		let currentArg = '';
-		let inQuotes = false;
-		let quoteChar = '';
-		let escapeNext = false;
-
-		for (let i = 0; i < argsString.length; i++) {
-			const char = argsString[i];
-
-			if (escapeNext) {
-				currentArg += char;
-				escapeNext = false;
-				continue;
-			}
-
-			if (char === '\\') {
-				escapeNext = true;
-				continue;
-			}
-
-			if (['"', "'", '`'].includes(char)) {
-				if (!inQuotes) {
-					inQuotes = true;
-					quoteChar = char;
-					currentArg += char;
-				} else if (char === quoteChar) {
-					inQuotes = false;
-					quoteChar = '';
-					currentArg += char;
-				} else {
-					currentArg += char;
-				}
-				continue;
-			}
-
-			if (char === ',' && !inQuotes) {
-				args.push(currentArg.trim());
-				currentArg = '';
-				continue;
-			}
-
-			currentArg += char;
-		}
-
-		if (currentArg) {
-			args.push(currentArg.trim());
-		}
-
-		// Remove surrounding quotes if present
-		const cleanArgs = args.map((arg) => {
-			const trimmed = arg.trim();
-			if (
-				(trimmed.startsWith("'") && trimmed.endsWith("'")) ||
-				(trimmed.startsWith('`') && trimmed.endsWith('`')) ||
-				(trimmed.startsWith('"') && trimmed.endsWith('"'))
-			) {
-				return trimmed
-					.slice(1, -1)
-					.replace(/\\'/g, "'")
-					.replace(/\\`/g, '`')
-					.replace(/\\"/g, '"')
-					.replace(/\\\\/g, '\\');
-			}
-			return trimmed;
-		});
-
-		const type = cleanArgs?.[2] || 'string';
-
-		if (!['string', 'number', 'boolean', 'json'].includes(type.toLowerCase())) {
-			throw new NodeOperationError(this.options.node, `Invalid type: ${type}`);
-		}
-
-		return {
-			key: cleanArgs[0] || '',
-			description: cleanArgs[1],
-			type: (cleanArgs?.[2] ?? 'string') as AllowedTypes,
-			defaultValue: this.parseDefaultValue(cleanArgs[3]),
-		};
-	}
-
-	/**
-	 * Parses the default value, preserving its original type.
-	 * @param value The default value as a string.
-	 * @returns The parsed default value in its appropriate type.
-	 */
-	private parseDefaultValue(
-		value: string | undefined,
-	): string | number | boolean | Record<string, unknown> | undefined {
-		if (value === undefined || value === '') return undefined;
-		const lowerValue = value.toLowerCase();
-		if (lowerValue === 'true') return true;
-		if (lowerValue === 'false') return false;
-		if (!isNaN(Number(value))) return Number(value);
-		try {
-			return jsonParse(value);
-		} catch {
-			return value;
-		}
-	}
-
-	/**
-	 * Retrieves and validates the Zod schema for the tool.
-	 *
-	 * This method:
-	 * 1. Collects all $fromAI arguments from node parameters
-	 * 2. Validates parameter keys against naming rules
-	 * 3. Checks for duplicate keys and ensures consistency
-	 * 4. Generates a Zod schema from the validated arguments
-	 *
-	 * @throws {NodeOperationError} When parameter keys are invalid or when duplicate keys have inconsistent definitions
-	 * @returns {z.ZodObject} A Zod schema object representing the structure and validation rules for the node parameters
-	 */
-	private getSchema() {
-		const { node } = this.options;
-		const collectedArguments: FromAIArgument[] = [];
-		this.traverseNodeParameters(node.parameters, collectedArguments);
-
-		// Validate each collected argument
-		const nameValidationRegex = /^[a-zA-Z0-9_-]{1,64}$/;
-		const keyMap = new Map<string, FromAIArgument>();
-		for (const argument of collectedArguments) {
-			if (argument.key.length === 0 || !nameValidationRegex.test(argument.key)) {
-				const isEmptyError = 'You must specify a key when using $fromAI()';
-				const isInvalidError = `Parameter key \`${argument.key}\` is invalid`;
-				const error = new Error(argument.key.length === 0 ? isEmptyError : isInvalidError);
-				throw new NodeOperationError(node, error, {
-					description:
-						'Invalid parameter key, must be between 1 and 64 characters long and only contain letters, numbers, underscores, and hyphens',
-				});
-			}
-
-			if (keyMap.has(argument.key)) {
-				// If the key already exists in the Map
-				const existingArg = keyMap.get(argument.key)!;
-
-				// Check if the existing argument has the same description and type
-				if (
-					existingArg.description !== argument.description ||
-					existingArg.type !== argument.type
-				) {
-					// If not, throw an error for inconsistent duplicate keys
-					throw new NodeOperationError(
-						node,
-						`Duplicate key '${argument.key}' found with different description or type`,
-						{
-							description:
-								'Ensure all $fromAI() calls with the same key have consistent descriptions and types',
-						},
-					);
-				}
-				// If the duplicate key has consistent description and type, it's allowed (no action needed)
-			} else {
-				// If the key doesn't exist in the Map, add it
-				keyMap.set(argument.key, argument);
-			}
-		}
-
-		// Remove duplicate keys, latest occurrence takes precedence
-		const uniqueArgsMap = collectedArguments.reduce((map, arg) => {
-			map.set(arg.key, arg);
-			return map;
-		}, new Map<string, FromAIArgument>());
-
-		const uniqueArguments = Array.from(uniqueArgsMap.values());
-
-		// Generate Zod schema from unique arguments
-		const schemaObj = uniqueArguments.reduce((acc: Record<string, z.ZodTypeAny>, placeholder) => {
-			acc[placeholder.key] = this.generateZodSchema(placeholder);
-			return acc;
-		}, {});
-
-		return z.object(schemaObj).required();
-	}
-
-	/**
-	 * Generates a description for a node based on the provided parameters.
-	 * @param node The node type.
-	 * @param nodeParameters The parameters of the node.
-	 * @returns A string description for the node.
-	 */
-	private getDescription(): string {
-		const { node, nodeType } = this.options;
-		const manualDescription = node.parameters.toolDescription as string;
-
-		if (node.parameters.descriptionType === 'auto') {
-			const resource = node.parameters.resource as string;
-			const operation = node.parameters.operation as string;
-			let description = nodeType.description.description;
-			if (resource) {
-				description += `\n Resource: ${resource}`;
-			}
-			if (operation) {
-				description += `\n Operation: ${operation}`;
-			}
-			return description.trim();
-		}
-		if (node.parameters.descriptionType === 'manual') {
-			return manualDescription ?? nodeType.description.description;
-		}
-
-		return nodeType.description.description;
-	}
-
-	/**
-	 * Creates a DynamicStructuredTool from a node.
-	 * @returns A DynamicStructuredTool instance.
-	 */
-	createTool(): DynamicStructuredTool {
-		const { node, nodeType } = this.options;
-		const schema = this.getSchema();
-		const description = this.getDescription();
-		const nodeName = node.name.replace(/ /g, '_');
-		const name = nodeName || nodeType.description.name;
+	return nodeType.description.description;
+}
 
-		return new DynamicStructuredTool({
-			name,
-			description,
-			schema,
-			func: async (toolArgs: z.infer<typeof schema>) =>
-				await this.options.handleToolInvocation(toolArgs),
-		});
-	}
+/**
+ * Creates a DynamicStructuredTool from a node.
+ * @returns A DynamicStructuredTool instance.
+ */
+function createTool(parser: AIParametersParser, options: CreateNodeAsToolOptions) {
+	const { node, nodeType, handleToolInvocation } = options;
+	const schema = parser.getSchema();
+	const description = makeDescription(node, nodeType);
+	const nodeName = node.name.replace(/ /g, '_');
+	const name = nodeName || nodeType.description.name;
+
+	return new DynamicStructuredTool({
+		name,
+		description,
+		schema,
+		func: async (toolArgs: z.infer<typeof schema>) => await handleToolInvocation(toolArgs),
+	});
 }
 
 /**
@@ -413,7 +61,7 @@ class AIParametersParser {
  * identifying placeholders using the $fromAI function, and generating a Zod schema. It then creates
  * a DynamicStructuredTool that can be used in LangChain workflows.
  */
-export function createNodeAsTool(options: ParserOptions) {
+export function createNodeAsTool(options: AIParametersParserOptions & CreateNodeAsToolOptions) {
 	const parser = new AIParametersParser(options);
-	return { response: parser.createTool() };
+	return { response: createTool(parser, options) };
 }
diff --git a/packages/workflow/package.json b/packages/workflow/package.json
index 7515af68ee2be..af5e6e91b777c 100644
--- a/packages/workflow/package.json
+++ b/packages/workflow/package.json
@@ -58,6 +58,7 @@
     "recast": "0.21.5",
     "title-case": "3.0.3",
     "transliteration": "2.3.5",
-    "xml2js": "catalog:"
+    "xml2js": "catalog:",
+    "zod": "catalog:"
   }
 }
diff --git a/packages/workflow/src/AIParametersParser.ts b/packages/workflow/src/AIParametersParser.ts
new file mode 100644
index 0000000000000..ada538754336e
--- /dev/null
+++ b/packages/workflow/src/AIParametersParser.ts
@@ -0,0 +1,357 @@
+import { z } from 'zod';
+
+import type { INode } from 'Interfaces';
+
+import { NodeOperationError } from './errors';
+import { jsonParse } from './utils';
+
+export type FromAIArgumentType = 'string' | 'number' | 'boolean' | 'json';
+export type FromAIArgument = {
+	key: string;
+	description?: string;
+	type?: FromAIArgumentType;
+	defaultValue?: string | number | boolean | Record<string, unknown>;
+};
+
+export type AIParametersParserOptions = {
+	node: INode;
+};
+
+/**
+ * AIParametersParser
+ *
+ * This class encapsulates the logic for parsing node parameters, extracting $fromAI calls,
+ * generating Zod schemas, and creating LangChain tools.
+ */
+export class AIParametersParser {
+	/**
+	 * Constructs an instance of AIParametersParser.
+	 */
+	constructor(private readonly options: AIParametersParserOptions) {}
+
+	/**
+	 * Generates a Zod schema based on the provided FromAIArgument placeholder.
+	 * @param placeholder The FromAIArgument object containing key, type, description, and defaultValue.
+	 * @returns A Zod schema corresponding to the placeholder's type and constraints.
+	 */
+	generateZodSchema(placeholder: FromAIArgument): z.ZodTypeAny {
+		let schema: z.ZodTypeAny;
+
+		switch (placeholder.type?.toLowerCase()) {
+			case 'string':
+				schema = z.string();
+				break;
+			case 'number':
+				schema = z.number();
+				break;
+			case 'boolean':
+				schema = z.boolean();
+				break;
+			case 'json':
+				schema = z.record(z.any());
+				break;
+			default:
+				schema = z.string();
+		}
+
+		if (placeholder.description) {
+			schema = schema.describe(`${schema.description ?? ''} ${placeholder.description}`.trim());
+		}
+
+		if (placeholder.defaultValue !== undefined) {
+			schema = schema.default(placeholder.defaultValue);
+		}
+
+		return schema;
+	}
+
+	/**
+	 * Recursively traverses the nodeParameters object to find all $fromAI calls.
+	 * @param payload The current object or value being traversed.
+	 * @param collectedArgs The array collecting FromAIArgument objects.
+	 */
+	traverseNodeParameters(payload: unknown, collectedArgs: FromAIArgument[]) {
+		if (typeof payload === 'string') {
+			const fromAICalls = this.extractFromAICalls(payload);
+			fromAICalls.forEach((call) => collectedArgs.push(call));
+		} else if (Array.isArray(payload)) {
+			payload.forEach((item: unknown) => this.traverseNodeParameters(item, collectedArgs));
+		} else if (typeof payload === 'object' && payload !== null) {
+			Object.values(payload).forEach((value) => this.traverseNodeParameters(value, collectedArgs));
+		}
+	}
+
+	/**
+	 * Extracts all $fromAI calls from a given string
+	 * @param str The string to search for $fromAI calls.
+	 * @returns An array of FromAIArgument objects.
+	 *
+	 * This method uses a regular expression to find the start of each $fromAI function call
+	 * in the input string. It then employs a character-by-character parsing approach to
+	 * accurately extract the arguments of each call, handling nested parentheses and quoted strings.
+	 *
+	 * The parsing process:
+	 * 1. Finds the starting position of a $fromAI call using regex.
+	 * 2. Iterates through characters, keeping track of parentheses depth and quote status.
+	 * 3. Handles escaped characters within quotes to avoid premature quote closing.
+	 * 4. Builds the argument string until the matching closing parenthesis is found.
+	 * 5. Parses the extracted argument string into a FromAIArgument object.
+	 * 6. Repeats the process for all $fromAI calls in the input string.
+	 *
+	 */
+	private extractFromAICalls(str: string): FromAIArgument[] {
+		const args: FromAIArgument[] = [];
+		// Regular expression to match the start of a $fromAI function call
+		const pattern = /\$fromAI\s*\(\s*/gi;
+		let match: RegExpExecArray | null;
+
+		while ((match = pattern.exec(str)) !== null) {
+			const startIndex = match.index + match[0].length;
+			let current = startIndex;
+			let inQuotes = false;
+			let quoteChar = '';
+			let parenthesesCount = 1;
+			let argsString = '';
+
+			// Parse the arguments string, handling nested parentheses and quotes
+			while (current < str.length && parenthesesCount > 0) {
+				const char = str[current];
+
+				if (inQuotes) {
+					// Handle characters inside quotes, including escaped characters
+					if (char === '\\' && current + 1 < str.length) {
+						argsString += char + str[current + 1];
+						current += 2;
+						continue;
+					}
+
+					if (char === quoteChar) {
+						inQuotes = false;
+						quoteChar = '';
+					}
+					argsString += char;
+				} else {
+					// Handle characters outside quotes
+					if (['"', "'", '`'].includes(char)) {
+						inQuotes = true;
+						quoteChar = char;
+					} else if (char === '(') {
+						parenthesesCount++;
+					} else if (char === ')') {
+						parenthesesCount--;
+					}
+
+					// Only add characters if we're still inside the main parentheses
+					if (parenthesesCount > 0 || char !== ')') {
+						argsString += char;
+					}
+				}
+
+				current++;
+			}
+
+			// If parentheses are balanced, parse the arguments
+			if (parenthesesCount === 0) {
+				try {
+					const parsedArgs = this.parseArguments(argsString);
+					args.push(parsedArgs);
+				} catch (error) {
+					// If parsing fails, throw an ApplicationError with details
+					throw new NodeOperationError(
+						this.options.node,
+						`Failed to parse $fromAI arguments: ${argsString}: ${String(error)}`,
+					);
+				}
+			} else {
+				// Log an error if parentheses are unbalanced
+				throw new NodeOperationError(
+					this.options.node,
+					`Unbalanced parentheses while parsing $fromAI call: ${str.slice(startIndex)}`,
+				);
+			}
+		}
+
+		return args;
+	}
+
+	/**
+	 * Parses the arguments of a single $fromAI function call.
+	 * @param argsString The string containing the function arguments.
+	 * @returns A FromAIArgument object.
+	 */
+	private parseArguments(argsString: string): FromAIArgument {
+		// Split arguments by commas not inside quotes
+		const args: string[] = [];
+		let currentArg = '';
+		let inQuotes = false;
+		let quoteChar = '';
+		let escapeNext = false;
+
+		for (let i = 0; i < argsString.length; i++) {
+			const char = argsString[i];
+
+			if (escapeNext) {
+				currentArg += char;
+				escapeNext = false;
+				continue;
+			}
+
+			if (char === '\\') {
+				escapeNext = true;
+				continue;
+			}
+
+			if (['"', "'", '`'].includes(char)) {
+				if (!inQuotes) {
+					inQuotes = true;
+					quoteChar = char;
+					currentArg += char;
+				} else if (char === quoteChar) {
+					inQuotes = false;
+					quoteChar = '';
+					currentArg += char;
+				} else {
+					currentArg += char;
+				}
+				continue;
+			}
+
+			if (char === ',' && !inQuotes) {
+				args.push(currentArg.trim());
+				currentArg = '';
+				continue;
+			}
+
+			currentArg += char;
+		}
+
+		if (currentArg) {
+			args.push(currentArg.trim());
+		}
+
+		// Remove surrounding quotes if present
+		const cleanArgs = args.map((arg) => {
+			const trimmed = arg.trim();
+			if (
+				(trimmed.startsWith("'") && trimmed.endsWith("'")) ||
+				(trimmed.startsWith('`') && trimmed.endsWith('`')) ||
+				(trimmed.startsWith('"') && trimmed.endsWith('"'))
+			) {
+				return trimmed
+					.slice(1, -1)
+					.replace(/\\'/g, "'")
+					.replace(/\\`/g, '`')
+					.replace(/\\"/g, '"')
+					.replace(/\\\\/g, '\\');
+			}
+			return trimmed;
+		});
+
+		const type = cleanArgs?.[2] || 'string';
+
+		if (!['string', 'number', 'boolean', 'json'].includes(type.toLowerCase())) {
+			throw new NodeOperationError(this.options.node, `Invalid type: ${type}`);
+		}
+
+		return {
+			key: cleanArgs[0] || '',
+			description: cleanArgs[1],
+			type: (cleanArgs?.[2] ?? 'string') as FromAIArgumentType,
+			defaultValue: this.parseDefaultValue(cleanArgs[3]),
+		};
+	}
+
+	/**
+	 * Parses the default value, preserving its original type.
+	 * @param value The default value as a string.
+	 * @returns The parsed default value in its appropriate type.
+	 */
+	private parseDefaultValue(
+		value: string | undefined,
+	): string | number | boolean | Record<string, unknown> | undefined {
+		if (value === undefined || value === '') return undefined;
+		const lowerValue = value.toLowerCase();
+		if (lowerValue === 'true') return true;
+		if (lowerValue === 'false') return false;
+		if (!isNaN(Number(value))) return Number(value);
+		try {
+			return jsonParse(value);
+		} catch {
+			return value;
+		}
+	}
+
+	/**
+	 * Retrieves and validates the Zod schema for the tool.
+	 *
+	 * This method:
+	 * 1. Collects all $fromAI arguments from node parameters
+	 * 2. Validates parameter keys against naming rules
+	 * 3. Checks for duplicate keys and ensures consistency
+	 * 4. Generates a Zod schema from the validated arguments
+	 *
+	 * @throws {NodeOperationError} When parameter keys are invalid or when duplicate keys have inconsistent definitions
+	 * @returns {z.ZodObject} A Zod schema object representing the structure and validation rules for the node parameters
+	 */
+	getSchema() {
+		const { node } = this.options;
+		const collectedArguments: FromAIArgument[] = [];
+		this.traverseNodeParameters(node.parameters, collectedArguments);
+
+		// Validate each collected argument
+		const nameValidationRegex = /^[a-zA-Z0-9_-]{1,64}$/;
+		const keyMap = new Map<string, FromAIArgument>();
+		for (const argument of collectedArguments) {
+			if (argument.key.length === 0 || !nameValidationRegex.test(argument.key)) {
+				const isEmptyError = 'You must specify a key when using $fromAI()';
+				const isInvalidError = `Parameter key \`${argument.key}\` is invalid`;
+				const error = new Error(argument.key.length === 0 ? isEmptyError : isInvalidError);
+				throw new NodeOperationError(node, error, {
+					description:
+						'Invalid parameter key, must be between 1 and 64 characters long and only contain letters, numbers, underscores, and hyphens',
+				});
+			}
+
+			if (keyMap.has(argument.key)) {
+				// If the key already exists in the Map
+				const existingArg = keyMap.get(argument.key)!;
+
+				// Check if the existing argument has the same description and type
+				if (
+					existingArg.description !== argument.description ||
+					existingArg.type !== argument.type
+				) {
+					// If not, throw an error for inconsistent duplicate keys
+					throw new NodeOperationError(
+						node,
+						`Duplicate key '${argument.key}' found with different description or type`,
+						{
+							description:
+								'Ensure all $fromAI() calls with the same key have consistent descriptions and types',
+						},
+					);
+				}
+				// If the duplicate key has consistent description and type, it's allowed (no action needed)
+			} else {
+				// If the key doesn't exist in the Map, add it
+				keyMap.set(argument.key, argument);
+			}
+		}
+
+		// Remove duplicate keys, latest occurrence takes precedence
+		const uniqueArgsMap = collectedArguments.reduce((map, arg) => {
+			map.set(arg.key, arg);
+			return map;
+		}, new Map<string, FromAIArgument>());
+
+		const uniqueArguments = Array.from(uniqueArgsMap.values());
+
+		// Generate Zod schema from unique arguments
+		const schemaObj = uniqueArguments.reduce((acc: Record<string, z.ZodTypeAny>, placeholder) => {
+			acc[placeholder.key] = this.generateZodSchema(placeholder);
+			return acc;
+		}, {});
+
+		return z.object(schemaObj).required();
+	}
+}
diff --git a/packages/workflow/src/index.ts b/packages/workflow/src/index.ts
index 992a27921fa38..6668f6d902462 100644
--- a/packages/workflow/src/index.ts
+++ b/packages/workflow/src/index.ts
@@ -4,6 +4,7 @@ import * as NodeHelpers from './NodeHelpers';
 import * as ObservableObject from './ObservableObject';
 import * as TelemetryHelpers from './TelemetryHelpers';
 
+export * from './AIParametersParser';
 export * from './errors';
 export * from './Constants';
 export * from './Cron';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5c449a3d92e4d..4c7127f647249 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1871,7 +1871,7 @@ importers:
         version: 3.0.3
       ts-ics:
         specifier: 1.2.2
-        version: 1.2.2(date-fns@2.30.0)(lodash@4.17.21)(zod@3.23.8)
+        version: 1.2.2(date-fns@2.30.0)(lodash@4.17.21)(zod@3.24.1)
       uuid:
         specifier: 'catalog:'
         version: 10.0.0
@@ -2014,6 +2014,9 @@ importers:
       xml2js:
         specifier: 'catalog:'
         version: 0.6.2
+      zod:
+        specifier: 'catalog:'
+        version: 3.23.8
     devDependencies:
       '@langchain/core':
         specifier: 'catalog:'
@@ -13477,6 +13480,9 @@ packages:
   zod@3.23.8:
     resolution: {integrity: sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==}
 
+  zod@3.24.1:
+    resolution: {integrity: sha512-muH7gBL9sI1nciMZV67X5fTKKBLtwpZ5VBp1vsOQzj1MhrBZ4wlVCm3gedKZWLp0Oyel8sIGfeiz54Su+OVT+A==}
+
   zx@8.1.4:
     resolution: {integrity: sha512-QFDYYpnzdpRiJ3dL2102Cw26FpXpWshW4QLTGxiYfIcwdAqg084jRCkK/kuP/NOSkxOjydRwNFG81qzA5r1a6w==}
     engines: {node: '>= 12.17.0'}
@@ -16322,8 +16328,8 @@ snapshots:
       p-queue: 6.6.2
       p-retry: 4.6.2
       uuid: 10.0.0
-      zod: 3.23.8
-      zod-to-json-schema: 3.23.3(zod@3.23.8)
+      zod: 3.24.1
+      zod-to-json-schema: 3.23.3(zod@3.24.1)
     transitivePeerDependencies:
       - openai
 
@@ -26897,12 +26903,12 @@ snapshots:
     dependencies:
       typescript: 5.7.2
 
-  ts-ics@1.2.2(date-fns@2.30.0)(lodash@4.17.21)(zod@3.23.8):
+  ts-ics@1.2.2(date-fns@2.30.0)(lodash@4.17.21)(zod@3.24.1):
     dependencies:
       date-fns: 2.30.0
       date-fns-tz: 2.0.0(date-fns@2.30.0)
       lodash: 4.17.21
-      zod: 3.23.8
+      zod: 3.24.1
 
   ts-interface-checker@0.1.13: {}
 
@@ -27908,8 +27914,14 @@ snapshots:
     dependencies:
       zod: 3.23.8
 
+  zod-to-json-schema@3.23.3(zod@3.24.1):
+    dependencies:
+      zod: 3.24.1
+
   zod@3.23.8: {}
 
+  zod@3.24.1: {}
+
   zx@8.1.4:
     optionalDependencies:
       '@types/fs-extra': 11.0.4

From 9734e687a70ad516baf7205dd23f1bff91896fc7 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Fri, 17 Jan 2025 13:53:12 +0100
Subject: [PATCH 34/82] parameterInputFull cleanup

---
 .../src/components/ParameterInputFull.vue     | 23 ++++++++-----------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 64236916dcb12..3b2019850e906 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -17,7 +17,7 @@ import {
 	type IParameterLabel,
 	type NodeParameterValueType,
 } from 'n8n-workflow';
-import { N8nButton, N8nInputLabel, N8nPillList, N8nTooltip } from 'n8n-design-system';
+import { N8nButton, N8nInputLabel, N8nSelectableList, N8nTooltip } from 'n8n-design-system';
 import AiStarsIcon from './AiStarsIcon.vue';
 import { type ParameterOverride, makeOverrideValue } from '../utils/parameterOverrides';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
@@ -238,7 +238,7 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 	() => parameterInputWrapper.value?.isSingleLineInput ?? false,
 );
 
-function handleOverrideClick() {
+function updateOverriddenValue() {
 	valueChanged({
 		name: props.path,
 		value: parameterOverrides.value?.buildValueFromOverride(props, false),
@@ -271,7 +271,7 @@ function handleOverrideClick() {
 				<N8nButton
 					:class="[$style.overrideButton, $style.noCornersBottom, $style.overrideButtonInOptions]"
 					type="tertiary"
-					@click="handleOverrideClick"
+					@click="updateOverriddenValue"
 				>
 					<AiStarsIcon size="large" :class="$style.aiStarsIcon" />
 				</N8nButton>
@@ -365,7 +365,7 @@ function handleOverrideClick() {
 								<N8nButton
 									:class="[$style.overrideButton]"
 									type="tertiary"
-									@click="handleOverrideClick"
+									@click="updateOverriddenValue"
 								>
 									<AiStarsIcon size="large" :class="$style.aiStarsIcon" />
 								</N8nButton>
@@ -392,10 +392,10 @@ function handleOverrideClick() {
 				@menu-expanded="onMenuExpanded"
 			/>
 		</div>
-		<N8nPillList
+		<N8nSelectableList
 			v-if="isContentOverride && parameterOverrides"
 			v-model="parameterOverrides.extraPropValues"
-			:class="$style.overridePillList"
+			:class="$style.overrideSelectableList"
 			:inputs="
 				Object.entries(parameterOverrides.extraProps).map(([name, prop]) => ({
 					name,
@@ -416,20 +416,17 @@ function handleOverrideClick() {
 					}"
 					:is-read-only="isReadOnly"
 					:value="parameterOverrides?.extraPropValues[name]"
-					:path="`${path}.tags.${name}`"
+					:path="`${path}.${name}`"
 					input-size="small"
 					@update="
 						(x) => {
 							if (parameterOverrides) parameterOverrides.extraPropValues[name] = x.value;
-							valueChanged({
-								name: props.path,
-								value: parameterOverrides?.buildValueFromOverride(props, false),
-							});
+							updateOverriddenValue();
 						}
 					"
 				/>
 			</template>
-		</N8nPillList>
+		</N8nSelectableList>
 	</N8nInputLabel>
 </template>
 
@@ -505,7 +502,7 @@ function handleOverrideClick() {
 	}
 }
 
-.overridePillList {
+.overrideSelectableList {
 	margin-top: var(--spacing-2xs);
 }
 

From 85d57076fbd3b6e910cd83359d7108d6b411b30a Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Fri, 17 Jan 2025 14:39:13 +0100
Subject: [PATCH 35/82] update lock file from catalog version

---
 pnpm-lock.yaml | 19 +++++--------------
 1 file changed, 5 insertions(+), 14 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4c7127f647249..679703dc0557b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1871,7 +1871,7 @@ importers:
         version: 3.0.3
       ts-ics:
         specifier: 1.2.2
-        version: 1.2.2(date-fns@2.30.0)(lodash@4.17.21)(zod@3.24.1)
+        version: 1.2.2(date-fns@2.30.0)(lodash@4.17.21)(zod@3.23.8)
       uuid:
         specifier: 'catalog:'
         version: 10.0.0
@@ -13480,9 +13480,6 @@ packages:
   zod@3.23.8:
     resolution: {integrity: sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==}
 
-  zod@3.24.1:
-    resolution: {integrity: sha512-muH7gBL9sI1nciMZV67X5fTKKBLtwpZ5VBp1vsOQzj1MhrBZ4wlVCm3gedKZWLp0Oyel8sIGfeiz54Su+OVT+A==}
-
   zx@8.1.4:
     resolution: {integrity: sha512-QFDYYpnzdpRiJ3dL2102Cw26FpXpWshW4QLTGxiYfIcwdAqg084jRCkK/kuP/NOSkxOjydRwNFG81qzA5r1a6w==}
     engines: {node: '>= 12.17.0'}
@@ -16328,8 +16325,8 @@ snapshots:
       p-queue: 6.6.2
       p-retry: 4.6.2
       uuid: 10.0.0
-      zod: 3.24.1
-      zod-to-json-schema: 3.23.3(zod@3.24.1)
+      zod: 3.23.8
+      zod-to-json-schema: 3.23.3(zod@3.23.8)
     transitivePeerDependencies:
       - openai
 
@@ -26903,12 +26900,12 @@ snapshots:
     dependencies:
       typescript: 5.7.2
 
-  ts-ics@1.2.2(date-fns@2.30.0)(lodash@4.17.21)(zod@3.24.1):
+  ts-ics@1.2.2(date-fns@2.30.0)(lodash@4.17.21)(zod@3.23.8):
     dependencies:
       date-fns: 2.30.0
       date-fns-tz: 2.0.0(date-fns@2.30.0)
       lodash: 4.17.21
-      zod: 3.24.1
+      zod: 3.23.8
 
   ts-interface-checker@0.1.13: {}
 
@@ -27914,14 +27911,8 @@ snapshots:
     dependencies:
       zod: 3.23.8
 
-  zod-to-json-schema@3.23.3(zod@3.24.1):
-    dependencies:
-      zod: 3.24.1
-
   zod@3.23.8: {}
 
-  zod@3.24.1: {}
-
   zx@8.1.4:
     optionalDependencies:
       '@types/fs-extra': 11.0.4

From 46c845c78c102daae1bb1379f6d9b8bd550420db Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Fri, 17 Jan 2025 14:53:07 +0100
Subject: [PATCH 36/82] fix import

---
 packages/workflow/src/AIParametersParser.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/workflow/src/AIParametersParser.ts b/packages/workflow/src/AIParametersParser.ts
index ada538754336e..913ecbd073911 100644
--- a/packages/workflow/src/AIParametersParser.ts
+++ b/packages/workflow/src/AIParametersParser.ts
@@ -1,8 +1,7 @@
 import { z } from 'zod';
 
-import type { INode } from 'Interfaces';
-
 import { NodeOperationError } from './errors';
+import type { INode } from './Interfaces';
 import { jsonParse } from './utils';
 
 export type FromAIArgumentType = 'string' | 'number' | 'boolean' | 'json';

From b62e8b8038b7d2d7263f7fc482682d1ec89dc103 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Fri, 17 Jan 2025 16:38:36 +0100
Subject: [PATCH 37/82] Add in progress work

---
 .../v2/utils/WorkflowToolService.ts           |   6 +-
 packages/core/src/CreateNodeAsTool.ts         |  89 ++++-
 packages/workflow/src/AIParametersParser.ts   | 356 ------------------
 packages/workflow/src/FromAIParseUtils.ts     | 265 +++++++++++++
 packages/workflow/src/index.ts                |   2 +-
 .../workflow/test/fromAIParseUtils.test.ts    |  53 +++
 pnpm-lock.yaml                                | 266 +++++++------
 pnpm-workspace.yaml                           |   2 +-
 8 files changed, 535 insertions(+), 504 deletions(-)
 delete mode 100644 packages/workflow/src/AIParametersParser.ts
 create mode 100644 packages/workflow/src/FromAIParseUtils.ts
 create mode 100644 packages/workflow/test/fromAIParseUtils.test.ts

diff --git a/packages/@n8n/nodes-langchain/nodes/tools/ToolWorkflow/v2/utils/WorkflowToolService.ts b/packages/@n8n/nodes-langchain/nodes/tools/ToolWorkflow/v2/utils/WorkflowToolService.ts
index 2ce3c435562be..d14526e38a54b 100644
--- a/packages/@n8n/nodes-langchain/nodes/tools/ToolWorkflow/v2/utils/WorkflowToolService.ts
+++ b/packages/@n8n/nodes-langchain/nodes/tools/ToolWorkflow/v2/utils/WorkflowToolService.ts
@@ -292,7 +292,11 @@ export class WorkflowToolService {
 		fromAIParser: AIParametersParser,
 	): Promise<FromAIArgument[]> {
 		const collectedArguments: FromAIArgument[] = [];
-		fromAIParser.traverseNodeParameters(this.context.getNode().parameters, collectedArguments);
+		try {
+			fromAIParser.traverseNodeParameters(this.context.getNode().parameters, collectedArguments);
+		} catch (error) {
+			throw new NodeOperationError(this.context.getNode(), error as Error);
+		}
 
 		const uniqueArgsMap = new Map<string, FromAIArgument>();
 		for (const arg of collectedArguments) {
diff --git a/packages/core/src/CreateNodeAsTool.ts b/packages/core/src/CreateNodeAsTool.ts
index 6654c77505266..9f1e707a67436 100644
--- a/packages/core/src/CreateNodeAsTool.ts
+++ b/packages/core/src/CreateNodeAsTool.ts
@@ -1,7 +1,7 @@
 import { DynamicStructuredTool } from '@langchain/core/tools';
-import { AIParametersParser } from 'n8n-workflow';
-import type { IDataObject, INode, INodeType, AIParametersParserOptions } from 'n8n-workflow';
-import type { z } from 'zod';
+import { generateZodSchema, NodeOperationError, traverseNodeParameters } from 'n8n-workflow';
+import type { IDataObject, INode, INodeType, FromAIArgument } from 'n8n-workflow';
+import { z } from 'zod';
 
 export type CreateNodeAsToolOptions = {
 	node: INode;
@@ -9,6 +9,80 @@ export type CreateNodeAsToolOptions = {
 	handleToolInvocation: (toolArgs: IDataObject) => Promise<unknown>;
 };
 
+/**
+ * Retrieves and validates the Zod schema for the tool.
+ *
+ * This method:
+ * 1. Collects all $fromAI arguments from node parameters
+ * 2. Validates parameter keys against naming rules
+ * 3. Checks for duplicate keys and ensures consistency
+ * 4. Generates a Zod schema from the validated arguments
+ *
+ * @throws {NodeOperationError} When parameter keys are invalid or when duplicate keys have inconsistent definitions
+ * @returns {z.ZodObject} A Zod schema object representing the structure and validation rules for the node parameters
+ */
+function getSchema(node: INode) {
+	const collectedArguments: FromAIArgument[] = [];
+	try {
+		traverseNodeParameters(node.parameters, collectedArguments);
+	} catch (error) {
+		throw new NodeOperationError(node, error as Error);
+	}
+
+	// Validate each collected argument
+	const nameValidationRegex = /^[a-zA-Z0-9_-]{1,64}$/;
+	const keyMap = new Map<string, FromAIArgument>();
+	for (const argument of collectedArguments) {
+		if (argument.key.length === 0 || !nameValidationRegex.test(argument.key)) {
+			const isEmptyError = 'You must specify a key when using $fromAI()';
+			const isInvalidError = `Parameter key \`${argument.key}\` is invalid`;
+			const error = new Error(argument.key.length === 0 ? isEmptyError : isInvalidError);
+			throw new NodeOperationError(node, error, {
+				description:
+					'Invalid parameter key, must be between 1 and 64 characters long and only contain letters, numbers, underscores, and hyphens',
+			});
+		}
+
+		if (keyMap.has(argument.key)) {
+			// If the key already exists in the Map
+			const existingArg = keyMap.get(argument.key)!;
+
+			// Check if the existing argument has the same description and type
+			if (existingArg.description !== argument.description || existingArg.type !== argument.type) {
+				// If not, throw an error for inconsistent duplicate keys
+				throw new NodeOperationError(
+					node,
+					`Duplicate key '${argument.key}' found with different description or type`,
+					{
+						description:
+							'Ensure all $fromAI() calls with the same key have consistent descriptions and types',
+					},
+				);
+			}
+			// If the duplicate key has consistent description and type, it's allowed (no action needed)
+		} else {
+			// If the key doesn't exist in the Map, add it
+			keyMap.set(argument.key, argument);
+		}
+	}
+
+	// Remove duplicate keys, latest occurrence takes precedence
+	const uniqueArgsMap = collectedArguments.reduce((map, arg) => {
+		map.set(arg.key, arg);
+		return map;
+	}, new Map<string, FromAIArgument>());
+
+	const uniqueArguments = Array.from(uniqueArgsMap.values());
+
+	// Generate Zod schema from unique arguments
+	const schemaObj = uniqueArguments.reduce((acc: Record<string, z.ZodTypeAny>, placeholder) => {
+		acc[placeholder.key] = generateZodSchema(placeholder);
+		return acc;
+	}, {});
+
+	return z.object(schemaObj).required();
+}
+
 /**
  * Generates a description for a node based on the provided parameters.
  * @param node The node type.
@@ -41,9 +115,9 @@ function makeDescription(node: INode, nodeType: INodeType): string {
  * Creates a DynamicStructuredTool from a node.
  * @returns A DynamicStructuredTool instance.
  */
-function createTool(parser: AIParametersParser, options: CreateNodeAsToolOptions) {
+function createTool(options: CreateNodeAsToolOptions) {
 	const { node, nodeType, handleToolInvocation } = options;
-	const schema = parser.getSchema();
+	const schema = getSchema(node);
 	const description = makeDescription(node, nodeType);
 	const nodeName = node.name.replace(/ /g, '_');
 	const name = nodeName || nodeType.description.name;
@@ -61,7 +135,6 @@ function createTool(parser: AIParametersParser, options: CreateNodeAsToolOptions
  * identifying placeholders using the $fromAI function, and generating a Zod schema. It then creates
  * a DynamicStructuredTool that can be used in LangChain workflows.
  */
-export function createNodeAsTool(options: AIParametersParserOptions & CreateNodeAsToolOptions) {
-	const parser = new AIParametersParser(options);
-	return { response: createTool(parser, options) };
+export function createNodeAsTool(options: CreateNodeAsToolOptions) {
+	return { response: createTool(options) };
 }
diff --git a/packages/workflow/src/AIParametersParser.ts b/packages/workflow/src/AIParametersParser.ts
deleted file mode 100644
index 913ecbd073911..0000000000000
--- a/packages/workflow/src/AIParametersParser.ts
+++ /dev/null
@@ -1,356 +0,0 @@
-import { z } from 'zod';
-
-import { NodeOperationError } from './errors';
-import type { INode } from './Interfaces';
-import { jsonParse } from './utils';
-
-export type FromAIArgumentType = 'string' | 'number' | 'boolean' | 'json';
-export type FromAIArgument = {
-	key: string;
-	description?: string;
-	type?: FromAIArgumentType;
-	defaultValue?: string | number | boolean | Record<string, unknown>;
-};
-
-export type AIParametersParserOptions = {
-	node: INode;
-};
-
-/**
- * AIParametersParser
- *
- * This class encapsulates the logic for parsing node parameters, extracting $fromAI calls,
- * generating Zod schemas, and creating LangChain tools.
- */
-export class AIParametersParser {
-	/**
-	 * Constructs an instance of AIParametersParser.
-	 */
-	constructor(private readonly options: AIParametersParserOptions) {}
-
-	/**
-	 * Generates a Zod schema based on the provided FromAIArgument placeholder.
-	 * @param placeholder The FromAIArgument object containing key, type, description, and defaultValue.
-	 * @returns A Zod schema corresponding to the placeholder's type and constraints.
-	 */
-	generateZodSchema(placeholder: FromAIArgument): z.ZodTypeAny {
-		let schema: z.ZodTypeAny;
-
-		switch (placeholder.type?.toLowerCase()) {
-			case 'string':
-				schema = z.string();
-				break;
-			case 'number':
-				schema = z.number();
-				break;
-			case 'boolean':
-				schema = z.boolean();
-				break;
-			case 'json':
-				schema = z.record(z.any());
-				break;
-			default:
-				schema = z.string();
-		}
-
-		if (placeholder.description) {
-			schema = schema.describe(`${schema.description ?? ''} ${placeholder.description}`.trim());
-		}
-
-		if (placeholder.defaultValue !== undefined) {
-			schema = schema.default(placeholder.defaultValue);
-		}
-
-		return schema;
-	}
-
-	/**
-	 * Recursively traverses the nodeParameters object to find all $fromAI calls.
-	 * @param payload The current object or value being traversed.
-	 * @param collectedArgs The array collecting FromAIArgument objects.
-	 */
-	traverseNodeParameters(payload: unknown, collectedArgs: FromAIArgument[]) {
-		if (typeof payload === 'string') {
-			const fromAICalls = this.extractFromAICalls(payload);
-			fromAICalls.forEach((call) => collectedArgs.push(call));
-		} else if (Array.isArray(payload)) {
-			payload.forEach((item: unknown) => this.traverseNodeParameters(item, collectedArgs));
-		} else if (typeof payload === 'object' && payload !== null) {
-			Object.values(payload).forEach((value) => this.traverseNodeParameters(value, collectedArgs));
-		}
-	}
-
-	/**
-	 * Extracts all $fromAI calls from a given string
-	 * @param str The string to search for $fromAI calls.
-	 * @returns An array of FromAIArgument objects.
-	 *
-	 * This method uses a regular expression to find the start of each $fromAI function call
-	 * in the input string. It then employs a character-by-character parsing approach to
-	 * accurately extract the arguments of each call, handling nested parentheses and quoted strings.
-	 *
-	 * The parsing process:
-	 * 1. Finds the starting position of a $fromAI call using regex.
-	 * 2. Iterates through characters, keeping track of parentheses depth and quote status.
-	 * 3. Handles escaped characters within quotes to avoid premature quote closing.
-	 * 4. Builds the argument string until the matching closing parenthesis is found.
-	 * 5. Parses the extracted argument string into a FromAIArgument object.
-	 * 6. Repeats the process for all $fromAI calls in the input string.
-	 *
-	 */
-	private extractFromAICalls(str: string): FromAIArgument[] {
-		const args: FromAIArgument[] = [];
-		// Regular expression to match the start of a $fromAI function call
-		const pattern = /\$fromAI\s*\(\s*/gi;
-		let match: RegExpExecArray | null;
-
-		while ((match = pattern.exec(str)) !== null) {
-			const startIndex = match.index + match[0].length;
-			let current = startIndex;
-			let inQuotes = false;
-			let quoteChar = '';
-			let parenthesesCount = 1;
-			let argsString = '';
-
-			// Parse the arguments string, handling nested parentheses and quotes
-			while (current < str.length && parenthesesCount > 0) {
-				const char = str[current];
-
-				if (inQuotes) {
-					// Handle characters inside quotes, including escaped characters
-					if (char === '\\' && current + 1 < str.length) {
-						argsString += char + str[current + 1];
-						current += 2;
-						continue;
-					}
-
-					if (char === quoteChar) {
-						inQuotes = false;
-						quoteChar = '';
-					}
-					argsString += char;
-				} else {
-					// Handle characters outside quotes
-					if (['"', "'", '`'].includes(char)) {
-						inQuotes = true;
-						quoteChar = char;
-					} else if (char === '(') {
-						parenthesesCount++;
-					} else if (char === ')') {
-						parenthesesCount--;
-					}
-
-					// Only add characters if we're still inside the main parentheses
-					if (parenthesesCount > 0 || char !== ')') {
-						argsString += char;
-					}
-				}
-
-				current++;
-			}
-
-			// If parentheses are balanced, parse the arguments
-			if (parenthesesCount === 0) {
-				try {
-					const parsedArgs = this.parseArguments(argsString);
-					args.push(parsedArgs);
-				} catch (error) {
-					// If parsing fails, throw an ApplicationError with details
-					throw new NodeOperationError(
-						this.options.node,
-						`Failed to parse $fromAI arguments: ${argsString}: ${String(error)}`,
-					);
-				}
-			} else {
-				// Log an error if parentheses are unbalanced
-				throw new NodeOperationError(
-					this.options.node,
-					`Unbalanced parentheses while parsing $fromAI call: ${str.slice(startIndex)}`,
-				);
-			}
-		}
-
-		return args;
-	}
-
-	/**
-	 * Parses the arguments of a single $fromAI function call.
-	 * @param argsString The string containing the function arguments.
-	 * @returns A FromAIArgument object.
-	 */
-	private parseArguments(argsString: string): FromAIArgument {
-		// Split arguments by commas not inside quotes
-		const args: string[] = [];
-		let currentArg = '';
-		let inQuotes = false;
-		let quoteChar = '';
-		let escapeNext = false;
-
-		for (let i = 0; i < argsString.length; i++) {
-			const char = argsString[i];
-
-			if (escapeNext) {
-				currentArg += char;
-				escapeNext = false;
-				continue;
-			}
-
-			if (char === '\\') {
-				escapeNext = true;
-				continue;
-			}
-
-			if (['"', "'", '`'].includes(char)) {
-				if (!inQuotes) {
-					inQuotes = true;
-					quoteChar = char;
-					currentArg += char;
-				} else if (char === quoteChar) {
-					inQuotes = false;
-					quoteChar = '';
-					currentArg += char;
-				} else {
-					currentArg += char;
-				}
-				continue;
-			}
-
-			if (char === ',' && !inQuotes) {
-				args.push(currentArg.trim());
-				currentArg = '';
-				continue;
-			}
-
-			currentArg += char;
-		}
-
-		if (currentArg) {
-			args.push(currentArg.trim());
-		}
-
-		// Remove surrounding quotes if present
-		const cleanArgs = args.map((arg) => {
-			const trimmed = arg.trim();
-			if (
-				(trimmed.startsWith("'") && trimmed.endsWith("'")) ||
-				(trimmed.startsWith('`') && trimmed.endsWith('`')) ||
-				(trimmed.startsWith('"') && trimmed.endsWith('"'))
-			) {
-				return trimmed
-					.slice(1, -1)
-					.replace(/\\'/g, "'")
-					.replace(/\\`/g, '`')
-					.replace(/\\"/g, '"')
-					.replace(/\\\\/g, '\\');
-			}
-			return trimmed;
-		});
-
-		const type = cleanArgs?.[2] || 'string';
-
-		if (!['string', 'number', 'boolean', 'json'].includes(type.toLowerCase())) {
-			throw new NodeOperationError(this.options.node, `Invalid type: ${type}`);
-		}
-
-		return {
-			key: cleanArgs[0] || '',
-			description: cleanArgs[1],
-			type: (cleanArgs?.[2] ?? 'string') as FromAIArgumentType,
-			defaultValue: this.parseDefaultValue(cleanArgs[3]),
-		};
-	}
-
-	/**
-	 * Parses the default value, preserving its original type.
-	 * @param value The default value as a string.
-	 * @returns The parsed default value in its appropriate type.
-	 */
-	private parseDefaultValue(
-		value: string | undefined,
-	): string | number | boolean | Record<string, unknown> | undefined {
-		if (value === undefined || value === '') return undefined;
-		const lowerValue = value.toLowerCase();
-		if (lowerValue === 'true') return true;
-		if (lowerValue === 'false') return false;
-		if (!isNaN(Number(value))) return Number(value);
-		try {
-			return jsonParse(value);
-		} catch {
-			return value;
-		}
-	}
-
-	/**
-	 * Retrieves and validates the Zod schema for the tool.
-	 *
-	 * This method:
-	 * 1. Collects all $fromAI arguments from node parameters
-	 * 2. Validates parameter keys against naming rules
-	 * 3. Checks for duplicate keys and ensures consistency
-	 * 4. Generates a Zod schema from the validated arguments
-	 *
-	 * @throws {NodeOperationError} When parameter keys are invalid or when duplicate keys have inconsistent definitions
-	 * @returns {z.ZodObject} A Zod schema object representing the structure and validation rules for the node parameters
-	 */
-	getSchema() {
-		const { node } = this.options;
-		const collectedArguments: FromAIArgument[] = [];
-		this.traverseNodeParameters(node.parameters, collectedArguments);
-
-		// Validate each collected argument
-		const nameValidationRegex = /^[a-zA-Z0-9_-]{1,64}$/;
-		const keyMap = new Map<string, FromAIArgument>();
-		for (const argument of collectedArguments) {
-			if (argument.key.length === 0 || !nameValidationRegex.test(argument.key)) {
-				const isEmptyError = 'You must specify a key when using $fromAI()';
-				const isInvalidError = `Parameter key \`${argument.key}\` is invalid`;
-				const error = new Error(argument.key.length === 0 ? isEmptyError : isInvalidError);
-				throw new NodeOperationError(node, error, {
-					description:
-						'Invalid parameter key, must be between 1 and 64 characters long and only contain letters, numbers, underscores, and hyphens',
-				});
-			}
-
-			if (keyMap.has(argument.key)) {
-				// If the key already exists in the Map
-				const existingArg = keyMap.get(argument.key)!;
-
-				// Check if the existing argument has the same description and type
-				if (
-					existingArg.description !== argument.description ||
-					existingArg.type !== argument.type
-				) {
-					// If not, throw an error for inconsistent duplicate keys
-					throw new NodeOperationError(
-						node,
-						`Duplicate key '${argument.key}' found with different description or type`,
-						{
-							description:
-								'Ensure all $fromAI() calls with the same key have consistent descriptions and types',
-						},
-					);
-				}
-				// If the duplicate key has consistent description and type, it's allowed (no action needed)
-			} else {
-				// If the key doesn't exist in the Map, add it
-				keyMap.set(argument.key, argument);
-			}
-		}
-
-		// Remove duplicate keys, latest occurrence takes precedence
-		const uniqueArgsMap = collectedArguments.reduce((map, arg) => {
-			map.set(arg.key, arg);
-			return map;
-		}, new Map<string, FromAIArgument>());
-
-		const uniqueArguments = Array.from(uniqueArgsMap.values());
-
-		// Generate Zod schema from unique arguments
-		const schemaObj = uniqueArguments.reduce((acc: Record<string, z.ZodTypeAny>, placeholder) => {
-			acc[placeholder.key] = this.generateZodSchema(placeholder);
-			return acc;
-		}, {});
-
-		return z.object(schemaObj).required();
-	}
-}
diff --git a/packages/workflow/src/FromAIParseUtils.ts b/packages/workflow/src/FromAIParseUtils.ts
new file mode 100644
index 0000000000000..647f114ff6e77
--- /dev/null
+++ b/packages/workflow/src/FromAIParseUtils.ts
@@ -0,0 +1,265 @@
+import { z } from 'zod';
+
+import { jsonParse } from './utils';
+
+export type FromAIArgumentType = 'string' | 'number' | 'boolean' | 'json';
+export type FromAIArgument = {
+	key: string;
+	description?: string;
+	type?: FromAIArgumentType;
+	defaultValue?: string | number | boolean | Record<string, unknown>;
+};
+
+class ParseError extends Error {}
+
+/**
+ * This file encapsulates the logic for parsing node parameters and extracting $fromAI calls
+ */
+
+/**
+ * Generates a Zod schema based on the provided FromAIArgument placeholder.
+ * @param placeholder The FromAIArgument object containing key, type, description, and defaultValue.
+ * @returns A Zod schema corresponding to the placeholder's type and constraints.
+ */
+export function generateZodSchema(placeholder: FromAIArgument): z.ZodTypeAny {
+	let schema: z.ZodTypeAny;
+
+	switch (placeholder.type?.toLowerCase()) {
+		case 'string':
+			schema = z.string();
+			break;
+		case 'number':
+			schema = z.number();
+			break;
+		case 'boolean':
+			schema = z.boolean();
+			break;
+		case 'json':
+			schema = z.record(z.any());
+			break;
+		default:
+			schema = z.string();
+	}
+
+	if (placeholder.description) {
+		schema = schema.describe(`${schema.description ?? ''} ${placeholder.description}`.trim());
+	}
+
+	if (placeholder.defaultValue !== undefined) {
+		schema = schema.default(placeholder.defaultValue);
+	}
+
+	return schema;
+}
+
+/**
+ * Parses the default value, preserving its original type.
+ * @param value The default value as a string.
+ * @returns The parsed default value in its appropriate type.
+ */
+function parseDefaultValue(
+	value: string | undefined,
+): string | number | boolean | Record<string, unknown> | undefined {
+	if (value === undefined || value === '') return undefined;
+	const lowerValue = value.toLowerCase();
+	if (lowerValue === 'true') return true;
+	if (lowerValue === 'false') return false;
+	if (!isNaN(Number(value))) return Number(value);
+	try {
+		return jsonParse(value);
+	} catch {
+		return value;
+	}
+}
+
+/**
+ * Parses the arguments of a single $fromAI function call.
+ * @param argsString The string containing the function arguments.
+ * @returns A FromAIArgument object.
+ */
+function parseArguments(argsString: string): FromAIArgument {
+	// Split arguments by commas not inside quotes
+	const args: string[] = [];
+	let currentArg = '';
+	let inQuotes = false;
+	let quoteChar = '';
+	let escapeNext = false;
+
+	for (let i = 0; i < argsString.length; i++) {
+		const char = argsString[i];
+
+		if (escapeNext) {
+			currentArg += char;
+			escapeNext = false;
+			continue;
+		}
+
+		if (char === '\\') {
+			escapeNext = true;
+			continue;
+		}
+
+		if (['"', "'", '`'].includes(char)) {
+			if (!inQuotes) {
+				inQuotes = true;
+				quoteChar = char;
+				currentArg += char;
+			} else if (char === quoteChar) {
+				inQuotes = false;
+				quoteChar = '';
+				currentArg += char;
+			} else {
+				currentArg += char;
+			}
+			continue;
+		}
+
+		if (char === ',' && !inQuotes) {
+			args.push(currentArg.trim());
+			currentArg = '';
+			continue;
+		}
+
+		currentArg += char;
+	}
+
+	if (currentArg) {
+		args.push(currentArg.trim());
+	}
+
+	// Remove surrounding quotes if present
+	const cleanArgs = args.map((arg) => {
+		const trimmed = arg.trim();
+		if (
+			(trimmed.startsWith("'") && trimmed.endsWith("'")) ||
+			(trimmed.startsWith('`') && trimmed.endsWith('`')) ||
+			(trimmed.startsWith('"') && trimmed.endsWith('"'))
+		) {
+			return trimmed
+				.slice(1, -1)
+				.replace(/\\'/g, "'")
+				.replace(/\\`/g, '`')
+				.replace(/\\"/g, '"')
+				.replace(/\\\\/g, '\\');
+		}
+		return trimmed;
+	});
+
+	const type = cleanArgs?.[2] || 'string';
+
+	if (!['string', 'number', 'boolean', 'json'].includes(type.toLowerCase())) {
+		throw new ParseError(`Invalid type: ${type}`);
+	}
+
+	return {
+		key: cleanArgs[0] || '',
+		description: cleanArgs[1],
+		type: (cleanArgs?.[2] ?? 'string') as FromAIArgumentType,
+		defaultValue: parseDefaultValue(cleanArgs[3]),
+	};
+}
+
+/**
+ * Extracts all $fromAI calls from a given string
+ * @param str The string to search for $fromAI calls.
+ * @returns An array of FromAIArgument objects.
+ *
+ * This method uses a regular expression to find the start of each $fromAI function call
+ * in the input string. It then employs a character-by-character parsing approach to
+ * accurately extract the arguments of each call, handling nested parentheses and quoted strings.
+ *
+ * The parsing process:
+ * 1. Finds the starting position of a $fromAI call using regex.
+ * 2. Iterates through characters, keeping track of parentheses depth and quote status.
+ * 3. Handles escaped characters within quotes to avoid premature quote closing.
+ * 4. Builds the argument string until the matching closing parenthesis is found.
+ * 5. Parses the extracted argument string into a FromAIArgument object.
+ * 6. Repeats the process for all $fromAI calls in the input string.
+ *
+ */
+export function extractFromAICalls(str: string): FromAIArgument[] {
+	const args: FromAIArgument[] = [];
+	// Regular expression to match the start of a $fromAI function call
+	const pattern = /\$fromAI\s*\(\s*/gi;
+	let match: RegExpExecArray | null;
+
+	while ((match = pattern.exec(str)) !== null) {
+		const startIndex = match.index + match[0].length;
+		let current = startIndex;
+		let inQuotes = false;
+		let quoteChar = '';
+		let parenthesesCount = 1;
+		let argsString = '';
+
+		// Parse the arguments string, handling nested parentheses and quotes
+		while (current < str.length && parenthesesCount > 0) {
+			const char = str[current];
+
+			if (inQuotes) {
+				// Handle characters inside quotes, including escaped characters
+				if (char === '\\' && current + 1 < str.length) {
+					argsString += char + str[current + 1];
+					current += 2;
+					continue;
+				}
+
+				if (char === quoteChar) {
+					inQuotes = false;
+					quoteChar = '';
+				}
+				argsString += char;
+			} else {
+				// Handle characters outside quotes
+				if (['"', "'", '`'].includes(char)) {
+					inQuotes = true;
+					quoteChar = char;
+				} else if (char === '(') {
+					parenthesesCount++;
+				} else if (char === ')') {
+					parenthesesCount--;
+				}
+
+				// Only add characters if we're still inside the main parentheses
+				if (parenthesesCount > 0 || char !== ')') {
+					argsString += char;
+				}
+			}
+
+			current++;
+		}
+
+		// If parentheses are balanced, parse the arguments
+		if (parenthesesCount === 0) {
+			try {
+				const parsedArgs = parseArguments(argsString);
+				args.push(parsedArgs);
+			} catch (error) {
+				// If parsing fails, throw an ParseError with details
+				throw new ParseError(`Failed to parse $fromAI arguments: ${argsString}: ${String(error)}`);
+			}
+		} else {
+			// Log an error if parentheses are unbalanced
+			throw new ParseError(
+				`Unbalanced parentheses while parsing $fromAI call: ${str.slice(startIndex)}`,
+			);
+		}
+	}
+
+	return args;
+}
+
+/**
+ * Recursively traverses the nodeParameters object to find all $fromAI calls.
+ * @param payload The current object or value being traversed.
+ * @param collectedArgs The array collecting FromAIArgument objects.
+ */
+export function traverseNodeParameters(payload: unknown, collectedArgs: FromAIArgument[]) {
+	if (typeof payload === 'string') {
+		const fromAICalls = extractFromAICalls(payload);
+		fromAICalls.forEach((call) => collectedArgs.push(call));
+	} else if (Array.isArray(payload)) {
+		payload.forEach((item: unknown) => traverseNodeParameters(item, collectedArgs));
+	} else if (typeof payload === 'object' && payload !== null) {
+		Object.values(payload).forEach((value) => traverseNodeParameters(value, collectedArgs));
+	}
+}
diff --git a/packages/workflow/src/index.ts b/packages/workflow/src/index.ts
index 6668f6d902462..4b32c2f6013a8 100644
--- a/packages/workflow/src/index.ts
+++ b/packages/workflow/src/index.ts
@@ -4,7 +4,6 @@ import * as NodeHelpers from './NodeHelpers';
 import * as ObservableObject from './ObservableObject';
 import * as TelemetryHelpers from './TelemetryHelpers';
 
-export * from './AIParametersParser';
 export * from './errors';
 export * from './Constants';
 export * from './Cron';
@@ -14,6 +13,7 @@ export * from './Interfaces';
 export * from './MessageEventBus';
 export * from './ExecutionStatus';
 export * from './Expression';
+export * from './FromAIParseUtils';
 export * from './NodeHelpers';
 export * from './Workflow';
 export * from './WorkflowDataProxy';
diff --git a/packages/workflow/test/fromAIParseUtils.test.ts b/packages/workflow/test/fromAIParseUtils.test.ts
new file mode 100644
index 0000000000000..96f3362d492e7
--- /dev/null
+++ b/packages/workflow/test/fromAIParseUtils.test.ts
@@ -0,0 +1,53 @@
+import { extractFromAICalls } from '@/FromAIParseUtils';
+
+// Note that for historic reasons a lot of testing of this file happens indirectly in `packages/core/test/CreateNodeAsTool.test.ts`
+
+describe('extractFromAICalls', () => {
+	test.each<[string, [unknown, unknown, unknown, unknown]]>([
+		['$fromAI("a", "b", "string")', ['a', 'b', 'string', undefined]],
+		['$fromAI("a", "b", "number", 5)', ['a', 'b', 'number', 5]],
+		['{{ $fromAI("a", "b", "boolean") }}', ['a', 'b', 'boolean', undefined]],
+	])('should parse args as expected for %s', (formula, [key, description, type, defaultValue]) => {
+		expect(extractFromAICalls(formula)).toEqual([
+			{
+				key,
+				description,
+				type,
+				defaultValue,
+			},
+		]);
+	});
+
+	test.each([
+		['$fromAI("a", "b", "c")'],
+		['$fromAI("a", "b", "string"'],
+		['$fromAI("a", "b", "string, "d")'],
+	])('should throw as expected for %s', (formula) => {
+		expect(() => extractFromAICalls(formula)).toThrowError();
+	});
+
+	it('supports multiple calls', () => {
+		const code = '$fromAI("a", "b", "number"); $fromAI("c", "d", "string")';
+
+		expect(extractFromAICalls(code)).toEqual([
+			{
+				key: 'a',
+				description: 'b',
+				type: 'number',
+				defaultValue: undefined,
+			},
+			{
+				key: 'c',
+				description: 'd',
+				type: 'string',
+				defaultValue: undefined,
+			},
+		]);
+	});
+
+	it('supports no calls', () => {
+		const code = 'fromAI("a", "b", "number")';
+
+		expect(extractFromAICalls(code)).toEqual([]);
+	});
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 679703dc0557b..ac37b8dbd28e2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -73,8 +73,8 @@ catalogs:
       specifier: 1.0.15
       version: 1.0.15
     zod:
-      specifier: 3.23.8
-      version: 3.23.8
+      specifier: 3.24.1
+      version: 3.24.1
   frontend:
     '@sentry/vue':
       specifier: ^8.33.1
@@ -273,10 +273,10 @@ importers:
         version: 1.0.15
       zod:
         specifier: 'catalog:'
-        version: 3.23.8
+        version: 3.24.1
       zod-class:
         specifier: 0.0.16
-        version: 0.0.16(zod@3.23.8)
+        version: 0.0.16(zod@3.24.1)
     devDependencies:
       '@n8n/config':
         specifier: workspace:*
@@ -434,7 +434,7 @@ importers:
         version: 7.0.15
       zod:
         specifier: 'catalog:'
-        version: 3.23.8
+        version: 3.24.1
 
   packages/@n8n/nodes-langchain:
     dependencies:
@@ -443,7 +443,7 @@ importers:
         version: 3.666.0(@aws-sdk/client-sts@3.666.0)
       '@getzep/zep-cloud':
         specifier: 1.0.12
-        version: 1.0.12(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))(encoding@0.1.13)(langchain@0.3.6(e4rnrwhosnp2xiru36mqgdy2bu))
+        version: 1.0.12(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))(encoding@0.1.13)(langchain@0.3.6(fruah2be57w6nfwv5pos76ro7m))
       '@getzep/zep-js':
         specifier: 0.9.0
         version: 0.9.0
@@ -461,49 +461,49 @@ importers:
         version: 2.8.0
       '@langchain/anthropic':
         specifier: 0.3.8
-        version: 0.3.8(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))(encoding@0.1.13)
+        version: 0.3.8(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))(encoding@0.1.13)
       '@langchain/aws':
         specifier: 0.1.2
-        version: 0.1.2(@aws-sdk/client-sso-oidc@3.666.0(@aws-sdk/client-sts@3.666.0))(@aws-sdk/client-sts@3.666.0)(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))
+        version: 0.1.2(@aws-sdk/client-sso-oidc@3.666.0(@aws-sdk/client-sts@3.666.0))(@aws-sdk/client-sts@3.666.0)(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))
       '@langchain/cohere':
         specifier: 0.3.1
-        version: 0.3.1(@aws-sdk/client-sso-oidc@3.666.0(@aws-sdk/client-sts@3.666.0))(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))(encoding@0.1.13)
+        version: 0.3.1(@aws-sdk/client-sso-oidc@3.666.0(@aws-sdk/client-sts@3.666.0))(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))(encoding@0.1.13)
       '@langchain/community':
         specifier: 0.3.15
-        version: 0.3.15(vc5hvyy27o4cmm4jplsptc2fqm)
+        version: 0.3.15(33bf5yusarwvow3nhuvygusacq)
       '@langchain/core':
         specifier: 'catalog:'
-        version: 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8))
+        version: 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1))
       '@langchain/google-genai':
         specifier: 0.1.4
-        version: 0.1.4(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))(zod@3.23.8)
+        version: 0.1.4(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))(zod@3.24.1)
       '@langchain/google-vertexai':
         specifier: 0.1.3
-        version: 0.1.3(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))(encoding@0.1.13)(zod@3.23.8)
+        version: 0.1.3(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))(encoding@0.1.13)(zod@3.24.1)
       '@langchain/groq':
         specifier: 0.1.2
-        version: 0.1.2(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))(encoding@0.1.13)
+        version: 0.1.2(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))(encoding@0.1.13)
       '@langchain/mistralai':
         specifier: 0.2.0
-        version: 0.2.0(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))
+        version: 0.2.0(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))
       '@langchain/ollama':
         specifier: 0.1.2
-        version: 0.1.2(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))
+        version: 0.1.2(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))
       '@langchain/openai':
         specifier: 0.3.14
-        version: 0.3.14(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))(encoding@0.1.13)
+        version: 0.3.14(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))(encoding@0.1.13)
       '@langchain/pinecone':
         specifier: 0.1.3
-        version: 0.1.3(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))
+        version: 0.1.3(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))
       '@langchain/qdrant':
         specifier: 0.1.1
-        version: 0.1.1(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))(typescript@5.7.2)
+        version: 0.1.1(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))(typescript@5.7.2)
       '@langchain/redis':
         specifier: 0.1.0
-        version: 0.1.0(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))
+        version: 0.1.0(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))
       '@langchain/textsplitters':
         specifier: 0.1.0
-        version: 0.1.0(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))
+        version: 0.1.0(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))
       '@mozilla/readability':
         specifier: 0.5.0
         version: 0.5.0
@@ -557,7 +557,7 @@ importers:
         version: 23.0.1
       langchain:
         specifier: 0.3.6
-        version: 0.3.6(e4rnrwhosnp2xiru36mqgdy2bu)
+        version: 0.3.6(fruah2be57w6nfwv5pos76ro7m)
       lodash:
         specifier: 'catalog:'
         version: 4.17.21
@@ -575,7 +575,7 @@ importers:
         version: link:../../workflow
       openai:
         specifier: 4.73.1
-        version: 4.73.1(encoding@0.1.13)(zod@3.23.8)
+        version: 4.73.1(encoding@0.1.13)(zod@3.24.1)
       pdf-parse:
         specifier: 1.1.1
         version: 1.1.1
@@ -596,10 +596,10 @@ importers:
         version: 3.0.3
       zod:
         specifier: 'catalog:'
-        version: 3.23.8
+        version: 3.24.1
       zod-to-json-schema:
         specifier: 3.23.3
-        version: 3.23.3(zod@3.23.8)
+        version: 3.23.3(zod@3.24.1)
     devDependencies:
       '@types/basic-auth':
         specifier: 'catalog:'
@@ -1035,7 +1035,7 @@ importers:
         version: 0.3.0
       zod:
         specifier: 'catalog:'
-        version: 3.23.8
+        version: 3.24.1
     devDependencies:
       '@redocly/cli':
         specifier: ^1.25.5
@@ -1129,7 +1129,7 @@ importers:
     dependencies:
       '@langchain/core':
         specifier: 'catalog:'
-        version: 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8))
+        version: 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1))
       '@n8n/client-oauth2':
         specifier: workspace:*
         version: link:../@n8n/client-oauth2
@@ -1216,7 +1216,7 @@ importers:
         version: 0.6.2
       zod:
         specifier: 'catalog:'
-        version: 3.23.8
+        version: 3.24.1
     devDependencies:
       '@types/aws4':
         specifier: ^1.5.1
@@ -1871,7 +1871,7 @@ importers:
         version: 3.0.3
       ts-ics:
         specifier: 1.2.2
-        version: 1.2.2(date-fns@2.30.0)(lodash@4.17.21)(zod@3.23.8)
+        version: 1.2.2(date-fns@2.30.0)(lodash@4.17.21)(zod@3.24.1)
       uuid:
         specifier: 'catalog:'
         version: 10.0.0
@@ -2016,11 +2016,11 @@ importers:
         version: 0.6.2
       zod:
         specifier: 'catalog:'
-        version: 3.23.8
+        version: 3.24.1
     devDependencies:
       '@langchain/core':
         specifier: 'catalog:'
-        version: 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8))
+        version: 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1))
       '@n8n/config':
         specifier: workspace:*
         version: link:../@n8n/config
@@ -13477,8 +13477,8 @@ packages:
     peerDependencies:
       zod: ^3.23.3
 
-  zod@3.23.8:
-    resolution: {integrity: sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==}
+  zod@3.24.1:
+    resolution: {integrity: sha512-muH7gBL9sI1nciMZV67X5fTKKBLtwpZ5VBp1vsOQzj1MhrBZ4wlVCm3gedKZWLp0Oyel8sIGfeiz54Su+OVT+A==}
 
   zx@8.1.4:
     resolution: {integrity: sha512-QFDYYpnzdpRiJ3dL2102Cw26FpXpWshW4QLTGxiYfIcwdAqg084jRCkK/kuP/NOSkxOjydRwNFG81qzA5r1a6w==}
@@ -15770,16 +15770,16 @@ snapshots:
   '@gar/promisify@1.1.3':
     optional: true
 
-  '@getzep/zep-cloud@1.0.12(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))(encoding@0.1.13)(langchain@0.3.6(e4rnrwhosnp2xiru36mqgdy2bu))':
+  '@getzep/zep-cloud@1.0.12(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))(encoding@0.1.13)(langchain@0.3.6(fruah2be57w6nfwv5pos76ro7m))':
     dependencies:
       form-data: 4.0.0
       node-fetch: 2.7.0(encoding@0.1.13)
       qs: 6.11.2
       url-join: 4.0.1
-      zod: 3.23.8
+      zod: 3.24.1
     optionalDependencies:
-      '@langchain/core': 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8))
-      langchain: 0.3.6(e4rnrwhosnp2xiru36mqgdy2bu)
+      '@langchain/core': 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1))
+      langchain: 0.3.6(fruah2be57w6nfwv5pos76ro7m)
     transitivePeerDependencies:
       - encoding
 
@@ -16206,58 +16206,58 @@ snapshots:
 
   '@kwsites/promise-deferred@1.1.1': {}
 
-  '@langchain/anthropic@0.3.8(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))(encoding@0.1.13)':
+  '@langchain/anthropic@0.3.8(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))(encoding@0.1.13)':
     dependencies:
       '@anthropic-ai/sdk': 0.27.3(encoding@0.1.13)
-      '@langchain/core': 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8))
+      '@langchain/core': 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1))
       fast-xml-parser: 4.4.1
-      zod: 3.23.8
-      zod-to-json-schema: 3.23.3(zod@3.23.8)
+      zod: 3.24.1
+      zod-to-json-schema: 3.23.3(zod@3.24.1)
     transitivePeerDependencies:
       - encoding
       - supports-color
 
-  '@langchain/aws@0.1.2(@aws-sdk/client-sso-oidc@3.666.0(@aws-sdk/client-sts@3.666.0))(@aws-sdk/client-sts@3.666.0)(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))':
+  '@langchain/aws@0.1.2(@aws-sdk/client-sso-oidc@3.666.0(@aws-sdk/client-sts@3.666.0))(@aws-sdk/client-sts@3.666.0)(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))':
     dependencies:
       '@aws-sdk/client-bedrock-agent-runtime': 3.666.0
       '@aws-sdk/client-bedrock-runtime': 3.666.0
       '@aws-sdk/client-kendra': 3.666.0
       '@aws-sdk/credential-provider-node': 3.666.0(@aws-sdk/client-sso-oidc@3.666.0(@aws-sdk/client-sts@3.666.0))(@aws-sdk/client-sts@3.666.0)
-      '@langchain/core': 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8))
-      zod: 3.23.8
-      zod-to-json-schema: 3.23.3(zod@3.23.8)
+      '@langchain/core': 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1))
+      zod: 3.24.1
+      zod-to-json-schema: 3.23.3(zod@3.24.1)
     transitivePeerDependencies:
       - '@aws-sdk/client-sso-oidc'
       - '@aws-sdk/client-sts'
       - aws-crt
 
-  '@langchain/cohere@0.3.1(@aws-sdk/client-sso-oidc@3.666.0(@aws-sdk/client-sts@3.666.0))(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))(encoding@0.1.13)':
+  '@langchain/cohere@0.3.1(@aws-sdk/client-sso-oidc@3.666.0(@aws-sdk/client-sts@3.666.0))(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))(encoding@0.1.13)':
     dependencies:
-      '@langchain/core': 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8))
+      '@langchain/core': 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1))
       cohere-ai: 7.14.0(@aws-sdk/client-sso-oidc@3.666.0(@aws-sdk/client-sts@3.666.0))(encoding@0.1.13)
       uuid: 10.0.0
-      zod: 3.23.8
-      zod-to-json-schema: 3.23.3(zod@3.23.8)
+      zod: 3.24.1
+      zod-to-json-schema: 3.23.3(zod@3.24.1)
     transitivePeerDependencies:
       - '@aws-sdk/client-sso-oidc'
       - aws-crt
       - encoding
 
-  '@langchain/community@0.3.15(vc5hvyy27o4cmm4jplsptc2fqm)':
+  '@langchain/community@0.3.15(33bf5yusarwvow3nhuvygusacq)':
     dependencies:
       '@ibm-cloud/watsonx-ai': 1.1.2
-      '@langchain/core': 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8))
-      '@langchain/openai': 0.3.14(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))(encoding@0.1.13)
+      '@langchain/core': 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1))
+      '@langchain/openai': 0.3.14(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))(encoding@0.1.13)
       binary-extensions: 2.2.0
       expr-eval: 2.0.2
       flat: 5.0.2
       ibm-cloud-sdk-core: 5.1.0
       js-yaml: 4.1.0
-      langchain: 0.3.6(e4rnrwhosnp2xiru36mqgdy2bu)
-      langsmith: 0.2.3(openai@4.73.1(encoding@0.1.13)(zod@3.23.8))
+      langchain: 0.3.6(fruah2be57w6nfwv5pos76ro7m)
+      langsmith: 0.2.3(openai@4.73.1(encoding@0.1.13)(zod@3.24.1))
       uuid: 10.0.0
-      zod: 3.23.8
-      zod-to-json-schema: 3.23.3(zod@3.23.8)
+      zod: 3.24.1
+      zod-to-json-schema: 3.23.3(zod@3.24.1)
     optionalDependencies:
       '@aws-crypto/sha256-js': 5.2.0
       '@aws-sdk/client-bedrock-agent-runtime': 3.666.0
@@ -16266,7 +16266,7 @@ snapshots:
       '@aws-sdk/client-s3': 3.666.0
       '@aws-sdk/credential-provider-node': 3.666.0(@aws-sdk/client-sso-oidc@3.666.0(@aws-sdk/client-sts@3.666.0))(@aws-sdk/client-sts@3.666.0)
       '@azure/storage-blob': 12.18.0(encoding@0.1.13)
-      '@getzep/zep-cloud': 1.0.12(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))(encoding@0.1.13)(langchain@0.3.6(e4rnrwhosnp2xiru36mqgdy2bu))
+      '@getzep/zep-cloud': 1.0.12(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))(encoding@0.1.13)(langchain@0.3.6(fruah2be57w6nfwv5pos76ro7m))
       '@getzep/zep-js': 0.9.0
       '@google-ai/generativelanguage': 2.6.0(encoding@0.1.13)
       '@google-cloud/storage': 7.12.1(encoding@0.1.13)
@@ -16314,116 +16314,116 @@ snapshots:
       - peggy
       - supports-color
 
-  '@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8))':
+  '@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1))':
     dependencies:
       ansi-styles: 5.2.0
       camelcase: 6.3.0
       decamelize: 1.2.0
       js-tiktoken: 1.0.12
-      langsmith: 0.2.3(openai@4.73.1(encoding@0.1.13)(zod@3.23.8))
+      langsmith: 0.2.3(openai@4.73.1(encoding@0.1.13)(zod@3.24.1))
       mustache: 4.2.0
       p-queue: 6.6.2
       p-retry: 4.6.2
       uuid: 10.0.0
-      zod: 3.23.8
-      zod-to-json-schema: 3.23.3(zod@3.23.8)
+      zod: 3.24.1
+      zod-to-json-schema: 3.23.3(zod@3.24.1)
     transitivePeerDependencies:
       - openai
 
-  '@langchain/google-common@0.1.3(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))(zod@3.23.8)':
+  '@langchain/google-common@0.1.3(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))(zod@3.24.1)':
     dependencies:
-      '@langchain/core': 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8))
+      '@langchain/core': 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1))
       uuid: 10.0.0
-      zod-to-json-schema: 3.23.3(zod@3.23.8)
+      zod-to-json-schema: 3.23.3(zod@3.24.1)
     transitivePeerDependencies:
       - zod
 
-  '@langchain/google-gauth@0.1.3(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))(encoding@0.1.13)(zod@3.23.8)':
+  '@langchain/google-gauth@0.1.3(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))(encoding@0.1.13)(zod@3.24.1)':
     dependencies:
-      '@langchain/core': 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8))
-      '@langchain/google-common': 0.1.3(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))(zod@3.23.8)
+      '@langchain/core': 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1))
+      '@langchain/google-common': 0.1.3(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))(zod@3.24.1)
       google-auth-library: 8.9.0(encoding@0.1.13)
     transitivePeerDependencies:
       - encoding
       - supports-color
       - zod
 
-  '@langchain/google-genai@0.1.4(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))(zod@3.23.8)':
+  '@langchain/google-genai@0.1.4(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))(zod@3.24.1)':
     dependencies:
       '@google/generative-ai': 0.21.0
-      '@langchain/core': 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8))
-      zod-to-json-schema: 3.23.3(zod@3.23.8)
+      '@langchain/core': 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1))
+      zod-to-json-schema: 3.23.3(zod@3.24.1)
     transitivePeerDependencies:
       - zod
 
-  '@langchain/google-vertexai@0.1.3(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))(encoding@0.1.13)(zod@3.23.8)':
+  '@langchain/google-vertexai@0.1.3(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))(encoding@0.1.13)(zod@3.24.1)':
     dependencies:
-      '@langchain/core': 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8))
-      '@langchain/google-gauth': 0.1.3(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))(encoding@0.1.13)(zod@3.23.8)
+      '@langchain/core': 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1))
+      '@langchain/google-gauth': 0.1.3(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))(encoding@0.1.13)(zod@3.24.1)
     transitivePeerDependencies:
       - encoding
       - supports-color
       - zod
 
-  '@langchain/groq@0.1.2(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))(encoding@0.1.13)':
+  '@langchain/groq@0.1.2(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))(encoding@0.1.13)':
     dependencies:
-      '@langchain/core': 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8))
-      '@langchain/openai': 0.3.14(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))(encoding@0.1.13)
+      '@langchain/core': 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1))
+      '@langchain/openai': 0.3.14(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))(encoding@0.1.13)
       groq-sdk: 0.5.0(encoding@0.1.13)
-      zod: 3.23.8
-      zod-to-json-schema: 3.23.3(zod@3.23.8)
+      zod: 3.24.1
+      zod-to-json-schema: 3.23.3(zod@3.24.1)
     transitivePeerDependencies:
       - encoding
       - supports-color
 
-  '@langchain/mistralai@0.2.0(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))':
+  '@langchain/mistralai@0.2.0(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))':
     dependencies:
-      '@langchain/core': 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8))
-      '@mistralai/mistralai': 1.3.4(zod@3.23.8)
+      '@langchain/core': 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1))
+      '@mistralai/mistralai': 1.3.4(zod@3.24.1)
       uuid: 10.0.0
-      zod: 3.23.8
-      zod-to-json-schema: 3.23.3(zod@3.23.8)
+      zod: 3.24.1
+      zod-to-json-schema: 3.23.3(zod@3.24.1)
 
-  '@langchain/ollama@0.1.2(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))':
+  '@langchain/ollama@0.1.2(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))':
     dependencies:
-      '@langchain/core': 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8))
+      '@langchain/core': 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1))
       ollama: 0.5.9
       uuid: 10.0.0
 
-  '@langchain/openai@0.3.14(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))(encoding@0.1.13)':
+  '@langchain/openai@0.3.14(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))(encoding@0.1.13)':
     dependencies:
-      '@langchain/core': 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8))
+      '@langchain/core': 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1))
       js-tiktoken: 1.0.12
-      openai: 4.73.1(encoding@0.1.13)(zod@3.23.8)
-      zod: 3.23.8
-      zod-to-json-schema: 3.23.3(zod@3.23.8)
+      openai: 4.73.1(encoding@0.1.13)(zod@3.24.1)
+      zod: 3.24.1
+      zod-to-json-schema: 3.23.3(zod@3.24.1)
     transitivePeerDependencies:
       - encoding
       - supports-color
 
-  '@langchain/pinecone@0.1.3(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))':
+  '@langchain/pinecone@0.1.3(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))':
     dependencies:
-      '@langchain/core': 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8))
+      '@langchain/core': 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1))
       '@pinecone-database/pinecone': 4.0.0
       flat: 5.0.2
       uuid: 10.0.0
 
-  '@langchain/qdrant@0.1.1(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))(typescript@5.7.2)':
+  '@langchain/qdrant@0.1.1(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))(typescript@5.7.2)':
     dependencies:
-      '@langchain/core': 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8))
+      '@langchain/core': 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1))
       '@qdrant/js-client-rest': 1.11.0(typescript@5.7.2)
       uuid: 10.0.0
     transitivePeerDependencies:
       - typescript
 
-  '@langchain/redis@0.1.0(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))':
+  '@langchain/redis@0.1.0(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))':
     dependencies:
-      '@langchain/core': 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8))
+      '@langchain/core': 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1))
       redis: 4.6.14
 
-  '@langchain/textsplitters@0.1.0(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))':
+  '@langchain/textsplitters@0.1.0(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))':
     dependencies:
-      '@langchain/core': 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8))
+      '@langchain/core': 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1))
       js-tiktoken: 1.0.12
 
   '@lezer/common@1.1.0': {}
@@ -16512,9 +16512,9 @@ snapshots:
 
   '@miragejs/pretender-node-polyfill@0.1.2': {}
 
-  '@mistralai/mistralai@1.3.4(zod@3.23.8)':
+  '@mistralai/mistralai@1.3.4(zod@3.24.1)':
     dependencies:
-      zod: 3.23.8
+      zod: 3.24.1
 
   '@mongodb-js/saslprep@1.1.9':
     dependencies:
@@ -19559,14 +19559,6 @@ snapshots:
     transitivePeerDependencies:
       - debug
 
-  axios@1.7.4(debug@4.3.7):
-    dependencies:
-      follow-redirects: 1.15.6(debug@4.3.7)
-      form-data: 4.0.0
-      proxy-from-env: 1.1.0
-    transitivePeerDependencies:
-      - debug
-
   axios@1.7.7:
     dependencies:
       follow-redirects: 1.15.6(debug@4.3.6)
@@ -22420,7 +22412,7 @@ snapshots:
       '@types/debug': 4.1.12
       '@types/node': 18.16.16
       '@types/tough-cookie': 4.0.2
-      axios: 1.7.4(debug@4.3.7)
+      axios: 1.7.4
       camelcase: 6.3.0
       debug: 4.3.7
       dotenv: 16.4.5
@@ -22430,7 +22422,7 @@ snapshots:
       isstream: 0.1.2
       jsonwebtoken: 9.0.2
       mime-types: 2.1.35
-      retry-axios: 2.6.0(axios@1.7.4)
+      retry-axios: 2.6.0(axios@1.7.4(debug@4.3.7))
       tough-cookie: 4.1.3
     transitivePeerDependencies:
       - supports-color
@@ -23435,30 +23427,30 @@ snapshots:
 
   kuler@2.0.0: {}
 
-  langchain@0.3.6(e4rnrwhosnp2xiru36mqgdy2bu):
+  langchain@0.3.6(fruah2be57w6nfwv5pos76ro7m):
     dependencies:
-      '@langchain/core': 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8))
-      '@langchain/openai': 0.3.14(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))(encoding@0.1.13)
-      '@langchain/textsplitters': 0.1.0(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))
+      '@langchain/core': 0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1))
+      '@langchain/openai': 0.3.14(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))(encoding@0.1.13)
+      '@langchain/textsplitters': 0.1.0(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))
       js-tiktoken: 1.0.12
       js-yaml: 4.1.0
       jsonpointer: 5.0.1
-      langsmith: 0.2.3(openai@4.73.1(encoding@0.1.13)(zod@3.23.8))
+      langsmith: 0.2.3(openai@4.73.1(encoding@0.1.13)(zod@3.24.1))
       openapi-types: 12.1.3
       p-retry: 4.6.2
       uuid: 10.0.0
       yaml: 2.3.4
-      zod: 3.23.8
-      zod-to-json-schema: 3.23.3(zod@3.23.8)
+      zod: 3.24.1
+      zod-to-json-schema: 3.23.3(zod@3.24.1)
     optionalDependencies:
-      '@langchain/anthropic': 0.3.8(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))(encoding@0.1.13)
-      '@langchain/aws': 0.1.2(@aws-sdk/client-sso-oidc@3.666.0(@aws-sdk/client-sts@3.666.0))(@aws-sdk/client-sts@3.666.0)(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))
-      '@langchain/cohere': 0.3.1(@aws-sdk/client-sso-oidc@3.666.0(@aws-sdk/client-sts@3.666.0))(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))(encoding@0.1.13)
-      '@langchain/google-genai': 0.1.4(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))(zod@3.23.8)
-      '@langchain/google-vertexai': 0.1.3(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))(encoding@0.1.13)(zod@3.23.8)
-      '@langchain/groq': 0.1.2(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))(encoding@0.1.13)
-      '@langchain/mistralai': 0.2.0(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))
-      '@langchain/ollama': 0.1.2(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)))
+      '@langchain/anthropic': 0.3.8(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))(encoding@0.1.13)
+      '@langchain/aws': 0.1.2(@aws-sdk/client-sso-oidc@3.666.0(@aws-sdk/client-sts@3.666.0))(@aws-sdk/client-sts@3.666.0)(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))
+      '@langchain/cohere': 0.3.1(@aws-sdk/client-sso-oidc@3.666.0(@aws-sdk/client-sts@3.666.0))(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))(encoding@0.1.13)
+      '@langchain/google-genai': 0.1.4(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))(zod@3.24.1)
+      '@langchain/google-vertexai': 0.1.3(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))(encoding@0.1.13)(zod@3.24.1)
+      '@langchain/groq': 0.1.2(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))(encoding@0.1.13)
+      '@langchain/mistralai': 0.2.0(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))
+      '@langchain/ollama': 0.1.2(@langchain/core@0.3.19(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)))
       axios: 1.7.4
       cheerio: 1.0.0
       handlebars: 4.7.8
@@ -23467,7 +23459,7 @@ snapshots:
       - openai
       - supports-color
 
-  langsmith@0.2.3(openai@4.73.1(encoding@0.1.13)(zod@3.23.8)):
+  langsmith@0.2.3(openai@4.73.1(encoding@0.1.13)(zod@3.24.1)):
     dependencies:
       '@types/uuid': 10.0.0
       commander: 10.0.1
@@ -23476,7 +23468,7 @@ snapshots:
       semver: 7.6.0
       uuid: 10.0.0
     optionalDependencies:
-      openai: 4.73.1(encoding@0.1.13)(zod@3.23.8)
+      openai: 4.73.1(encoding@0.1.13)(zod@3.24.1)
 
   lazy-ass@1.6.0: {}
 
@@ -24810,7 +24802,7 @@ snapshots:
       is-docker: 2.2.1
       is-wsl: 2.2.0
 
-  openai@4.73.1(encoding@0.1.13)(zod@3.23.8):
+  openai@4.73.1(encoding@0.1.13)(zod@3.24.1):
     dependencies:
       '@types/node': 18.16.16
       '@types/node-fetch': 2.6.4
@@ -24820,7 +24812,7 @@ snapshots:
       formdata-node: 4.4.1
       node-fetch: 2.7.0(encoding@0.1.13)
     optionalDependencies:
-      zod: 3.23.8
+      zod: 3.24.1
     transitivePeerDependencies:
       - encoding
       - supports-color
@@ -25827,7 +25819,7 @@ snapshots:
 
   ret@0.1.15: {}
 
-  retry-axios@2.6.0(axios@1.7.4):
+  retry-axios@2.6.0(axios@1.7.4(debug@4.3.7)):
     dependencies:
       axios: 1.7.4
 
@@ -26900,12 +26892,12 @@ snapshots:
     dependencies:
       typescript: 5.7.2
 
-  ts-ics@1.2.2(date-fns@2.30.0)(lodash@4.17.21)(zod@3.23.8):
+  ts-ics@1.2.2(date-fns@2.30.0)(lodash@4.17.21)(zod@3.24.1):
     dependencies:
       date-fns: 2.30.0
       date-fns-tz: 2.0.0(date-fns@2.30.0)
       lodash: 4.17.21
-      zod: 3.23.8
+      zod: 3.24.1
 
   ts-interface-checker@0.1.13: {}
 
@@ -27902,16 +27894,16 @@ snapshots:
       property-expr: 2.0.5
       toposort: 2.0.2
 
-  zod-class@0.0.16(zod@3.23.8):
+  zod-class@0.0.16(zod@3.24.1):
     dependencies:
       type-fest: 4.26.1
-      zod: 3.23.8
+      zod: 3.24.1
 
-  zod-to-json-schema@3.23.3(zod@3.23.8):
+  zod-to-json-schema@3.23.3(zod@3.24.1):
     dependencies:
-      zod: 3.23.8
+      zod: 3.24.1
 
-  zod@3.23.8: {}
+  zod@3.24.1: {}
 
   zx@8.1.4:
     optionalDependencies:
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 817bb12dfbaae..20c570609a34e 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -27,7 +27,7 @@ catalog:
   uuid: 10.0.0
   xml2js: 0.6.2
   xss: 1.0.15
-  zod: 3.23.8
+  zod: 3.24.1
   '@langchain/core': 0.3.19
 
 catalogs:

From afba8d4a156a398eeabf1caada774a79924e9ee3 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Fri, 17 Jan 2025 16:44:45 +0100
Subject: [PATCH 38/82] self review

---
 packages/workflow/src/FromAIParseUtils.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/workflow/src/FromAIParseUtils.ts b/packages/workflow/src/FromAIParseUtils.ts
index 647f114ff6e77..4d86040b2343f 100644
--- a/packages/workflow/src/FromAIParseUtils.ts
+++ b/packages/workflow/src/FromAIParseUtils.ts
@@ -2,6 +2,10 @@ import { z } from 'zod';
 
 import { jsonParse } from './utils';
 
+/**
+ * This file contains the logic for parsing node parameters and extracting $fromAI calls
+ */
+
 export type FromAIArgumentType = 'string' | 'number' | 'boolean' | 'json';
 export type FromAIArgument = {
 	key: string;
@@ -12,10 +16,6 @@ export type FromAIArgument = {
 
 class ParseError extends Error {}
 
-/**
- * This file encapsulates the logic for parsing node parameters and extracting $fromAI calls
- */
-
 /**
  * Generates a Zod schema based on the provided FromAIArgument placeholder.
  * @param placeholder The FromAIArgument object containing key, type, description, and defaultValue.

From 50c8ffab36c4a5ed5fa51a1d6b85980b8fe85f94 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Fri, 17 Jan 2025 17:09:28 +0100
Subject: [PATCH 39/82] update marker tag

---
 packages/editor-ui/src/utils/parameterOverrides.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/utils/parameterOverrides.ts b/packages/editor-ui/src/utils/parameterOverrides.ts
index 9060d84aba37b..528cdadefaba8 100644
--- a/packages/editor-ui/src/utils/parameterOverrides.ts
+++ b/packages/editor-ui/src/utils/parameterOverrides.ts
@@ -40,7 +40,7 @@ function sanitizeFromAiParameterName(s: string) {
 }
 
 export class FromAiOverride implements ParameterOverride {
-	static readonly MARKER = '/* n8n-auto-generated-override */';
+	static readonly MARKER = '/* n8n-auto-generated-fromAi-override */';
 
 	static readonly NODE_DENYLIST = ['toolCode', 'toolHttpRequest'];
 

From a2f4356b178e1e7bba79329c8ebd6143e222d406 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Fri, 17 Jan 2025 17:22:44 +0100
Subject: [PATCH 40/82] Remove extra padding

---
 packages/editor-ui/src/components/ParameterInputFull.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 3b2019850e906..173e840404e5c 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -497,6 +497,8 @@ function updateOverriddenValue() {
 
 .overrideInput {
 	* > input {
+		padding-left: 0;
+		// We need this in light mode
 		background-color: var(--color-foreground-base) !important;
 		border: none;
 	}

From a6e72264e4974fbd817f0e4c64e224e9cb92cac5 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Mon, 27 Jan 2025 09:25:09 +0100
Subject: [PATCH 41/82] Add another test

---
 .../workflow/test/fromAIParseUtils.test.ts    | 29 ++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/packages/workflow/test/fromAIParseUtils.test.ts b/packages/workflow/test/fromAIParseUtils.test.ts
index 96f3362d492e7..e7fecbd954e8a 100644
--- a/packages/workflow/test/fromAIParseUtils.test.ts
+++ b/packages/workflow/test/fromAIParseUtils.test.ts
@@ -1,4 +1,4 @@
-import { extractFromAICalls } from '@/FromAIParseUtils';
+import { extractFromAICalls, FromAIArgument, traverseNodeParameters } from '@/FromAIParseUtils';
 
 // Note that for historic reasons a lot of testing of this file happens indirectly in `packages/core/test/CreateNodeAsTool.test.ts`
 
@@ -51,3 +51,30 @@ describe('extractFromAICalls', () => {
 		expect(extractFromAICalls(code)).toEqual([]);
 	});
 });
+
+describe('traverseNodeParameters', () => {
+	test.each<[string | string[] | Record<string, string>, [unknown, unknown, unknown, unknown]]>([
+		['$fromAI("a", "b", "string")', ['a', 'b', 'string', undefined]],
+		['$fromAI("a", "b", "number", 5)', ['a', 'b', 'number', 5]],
+		['{{ $fromAI("a", "b", "boolean") }}', ['a', 'b', 'boolean', undefined]],
+		[{ a: '{{ $fromAI("a", "b", "boolean") }}', b: 'five' }, ['a', 'b', 'boolean', undefined]],
+		[
+			['red', '{{ $fromAI("a", "b", "boolean") }}'],
+			['a', 'b', 'boolean', undefined],
+		],
+	])(
+		'should parse args as expected for %s',
+		(parameters, [key, description, type, defaultValue]) => {
+			const out: FromAIArgument[] = [];
+			traverseNodeParameters(parameters, out);
+			expect(out).toEqual([
+				{
+					key,
+					description,
+					type,
+					defaultValue,
+				},
+			]);
+		},
+	);
+});

From 44391c586e3ad16ac9f21c71a5b39037be9f581c Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Mon, 27 Jan 2025 09:48:47 +0100
Subject: [PATCH 42/82] Rename file

---
 .../{fromAIParseUtils.test.ts => FromAIParseUtils.test.ts}  | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)
 rename packages/workflow/test/{fromAIParseUtils.test.ts => FromAIParseUtils.test.ts} (95%)

diff --git a/packages/workflow/test/fromAIParseUtils.test.ts b/packages/workflow/test/FromAIParseUtils.test.ts
similarity index 95%
rename from packages/workflow/test/fromAIParseUtils.test.ts
rename to packages/workflow/test/FromAIParseUtils.test.ts
index e7fecbd954e8a..4c07f33fca8b5 100644
--- a/packages/workflow/test/fromAIParseUtils.test.ts
+++ b/packages/workflow/test/FromAIParseUtils.test.ts
@@ -1,4 +1,8 @@
-import { extractFromAICalls, FromAIArgument, traverseNodeParameters } from '@/FromAIParseUtils';
+import {
+	extractFromAICalls,
+	type FromAIArgument,
+	traverseNodeParameters,
+} from '@/FromAIParseUtils';
 
 // Note that for historic reasons a lot of testing of this file happens indirectly in `packages/core/test/CreateNodeAsTool.test.ts`
 

From 64ba5afb92302d7fe4493b4791a128de3ba08187 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Mon, 27 Jan 2025 11:41:19 +0100
Subject: [PATCH 43/82] product feedback

---
 .../src/components/ParameterInputFull.vue     |  7 ++-
 .../src/plugins/i18n/locales/en.json          |  2 +-
 .../editor-ui/src/utils/parameterOverrides.ts | 45 +++++++++----------
 3 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 173e840404e5c..8c24a2aaf61fb 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -241,7 +241,7 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 function updateOverriddenValue() {
 	valueChanged({
 		name: props.path,
-		value: parameterOverrides.value?.buildValueFromOverride(props, false),
+		value: parameterOverrides.value?.buildValueFromOverride(props, true),
 	});
 }
 </script>
@@ -323,7 +323,7 @@ function updateOverriddenValue() {
 								valueChanged({
 									node: node?.name,
 									name: props.path,
-									value: parameterOverrides?.buildValueFromOverride(props, true),
+									value: parameterOverrides?.buildValueFromOverride(props, false),
 								});
 							}
 						"
@@ -452,6 +452,9 @@ function updateOverriddenValue() {
 	padding: 0px 8px 3px; // the icon used is off-center vertically
 	border: 0px;
 	color: var(--color-text-base);
+	:hover {
+		background-color: none;
+	}
 }
 
 .overrideButton {
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 6e41b1e1e74bb..9b7b1620fa264 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -1444,7 +1444,7 @@
 	"parameterInputList.loadingFields": "Loading fields...",
 	"parameterInputList.loadingError": "Error loading fields. Refresh you page and try again.",
 	"parameterOverride.overridePanelText": "Defined automatically by the model",
-	"parameterOverride.applyOverrideButtonTooltip": "Define automatically by the model during execution",
+	"parameterOverride.applyOverrideButtonTooltip": "Let the model define this parameter",
 	"parameterOverride.descriptionTooltip": "Explain to the LLM how it should generate this value, a good, specific description would allow LLMs to produce expected results much more often",
 	"personalizationModal.businessOwner": "Business Owner",
 	"personalizationModal.continue": "Continue",
diff --git a/packages/editor-ui/src/utils/parameterOverrides.ts b/packages/editor-ui/src/utils/parameterOverrides.ts
index 528cdadefaba8..06615a6bdd730 100644
--- a/packages/editor-ui/src/utils/parameterOverrides.ts
+++ b/packages/editor-ui/src/utils/parameterOverrides.ts
@@ -1,4 +1,9 @@
-import type { INodeTypeDescription, NodeParameterValueType, NodePropertyTypes } from 'n8n-workflow';
+import {
+	extractFromAICalls,
+	type INodeTypeDescription,
+	type NodeParameterValueType,
+	type NodePropertyTypes,
+} from 'n8n-workflow';
 import { i18n } from '@/plugins/i18n';
 
 export interface ParameterOverride {
@@ -86,35 +91,29 @@ export class FromAiOverride implements ParameterOverride {
 
 	isOverrideValue = FromAiOverride.isOverrideValue;
 
-	buildValueFromOverride(props: Context, excludeMarker: boolean) {
-		const { key, type } = this.providers;
-		return `={{ ${excludeMarker ? '' : FromAiOverride.MARKER} $fromAI('${key(props)}', '${this.extraPropValues?.description?.toString() ?? this.extraProps.description.initialValue}', '${type(props)}') }}`;
+	buildValueFromOverride(props: Context, includeMarker: boolean) {
+		const marker = includeMarker ? FromAiOverride.MARKER : '';
+		const key = this.providers.key(props);
+		const description =
+			this.extraPropValues?.description?.toString() ?? this.extraProps.description.initialValue;
+		const type = this.providers.type(props);
+
+		return `={{ ${marker} $fromAI('${key}', '${description}', '${type}') }}`;
 	}
 
 	parseOverrides(s: string): Record<keyof typeof this.extraProps, string | undefined> | null {
-		/*
-			Approaches:
-			- Smart and boring: Reuse packages/core/src/CreateNodeAsTool.ts - unclear where to move it
-			- Fun and dangerous: Use eval, see below
-		*/
 		if (!this.isOverrideValue(s)) return null;
 
-		const fromAI = (...args: unknown[]) => args;
-		const fns = `const $fromAI = ${fromAI}; const $fromAi = ${fromAI}; const $fromai = ${fromAI};`;
-		const cursor = '={{ /* n8n-auto-generated-override */ '.length;
-		const end = '}}'.length;
-
-		let params: unknown[] = [];
 		try {
-			// `eval?.` is an indirect evaluation, outside of local scope
-			const code = `${fns} ${s.slice(cursor, -end)}`;
-			params = eval?.(code) ?? [];
+			const calls = extractFromAICalls(s);
+			if (calls.length === 1) {
+				return {
+					description: calls[0].description,
+				};
+			}
 		} catch (e) {}
-		return {
-			// key: params[0],
-			description: params[1] as string | undefined,
-			// type: params[2],
-		};
+
+		return null;
 	}
 
 	static canBeContentOverride(props: Context, nodeType: INodeTypeDescription | null) {

From 5fd29ac910be2cc002dfa8a09feb174a3f1eef5e Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Mon, 27 Jan 2025 12:23:21 +0100
Subject: [PATCH 44/82] telemetry and close button hover/active color

---
 .../src/components/ParameterInputFull.vue     | 48 +++++++++++--------
 1 file changed, 27 insertions(+), 21 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 8c24a2aaf61fb..486e05dfa8e5e 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -21,6 +21,7 @@ import { N8nButton, N8nInputLabel, N8nSelectableList, N8nTooltip } from 'n8n-des
 import AiStarsIcon from './AiStarsIcon.vue';
 import { type ParameterOverride, makeOverrideValue } from '../utils/parameterOverrides';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
+import { useTelemetry } from '@/composables/useTelemetry';
 
 type Props = {
 	parameter: INodeProperties;
@@ -62,6 +63,7 @@ const forceShowExpression = ref(false);
 
 const ndvStore = useNDVStore();
 const nodeTypesStore = useNodeTypesStore();
+const telemetry = useTelemetry();
 
 const node = computed(() => ndvStore.activeNode);
 const parameterOverrides = ref<ParameterOverride | null>(
@@ -238,12 +240,28 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 	() => parameterInputWrapper.value?.isSingleLineInput ?? false,
 );
 
-function updateOverriddenValue() {
+function applyOverride() {
+	telemetry.track('User turned on fromAI override', {
+		nodeType: node.value?.type,
+		parameter: props.path,
+	});
 	valueChanged({
 		name: props.path,
 		value: parameterOverrides.value?.buildValueFromOverride(props, true),
 	});
 }
+
+function removeOverride() {
+	telemetry.track('User turned off fromAI override', {
+		nodeType: node.value?.type,
+		parameter: props.path,
+	});
+	valueChanged({
+		node: node.value?.name,
+		name: props.path,
+		value: parameterOverrides.value?.buildValueFromOverride(props, false),
+	});
+}
 </script>
 
 <template>
@@ -271,7 +289,7 @@ function updateOverriddenValue() {
 				<N8nButton
 					:class="[$style.overrideButton, $style.noCornersBottom, $style.overrideButtonInOptions]"
 					type="tertiary"
-					@click="updateOverriddenValue"
+					@click="applyOverride"
 				>
 					<AiStarsIcon size="large" :class="$style.aiStarsIcon" />
 				</N8nButton>
@@ -314,19 +332,11 @@ function updateOverriddenValue() {
 					<N8nIconButton
 						v-if="!isReadOnly"
 						type="tertiary"
-						:class="['n8n-input', $style.overrideCloseButton]"
+						:class="['n8n-input', $style.overrideInput, $style.overrideCloseButton]"
 						outline="false"
 						icon="xmark"
 						size="xsmall"
-						@click="
-							() => {
-								valueChanged({
-									node: node?.name,
-									name: props.path,
-									value: parameterOverrides?.buildValueFromOverride(props, false),
-								});
-							}
-						"
+						@click="removeOverride"
 					/>
 				</div>
 				<div v-else>
@@ -362,11 +372,7 @@ function updateOverriddenValue() {
 									</div>
 								</template>
 
-								<N8nButton
-									:class="[$style.overrideButton]"
-									type="tertiary"
-									@click="updateOverriddenValue"
-								>
+								<N8nButton :class="[$style.overrideButton]" type="tertiary" @click="applyOverride">
 									<AiStarsIcon size="large" :class="$style.aiStarsIcon" />
 								</N8nButton>
 							</N8nTooltip>
@@ -421,7 +427,7 @@ function updateOverriddenValue() {
 					@update="
 						(x) => {
 							if (parameterOverrides) parameterOverrides.extraPropValues[name] = x.value;
-							updateOverriddenValue();
+							applyOverride();
 						}
 					"
 				/>
@@ -452,9 +458,9 @@ function updateOverriddenValue() {
 	padding: 0px 8px 3px; // the icon used is off-center vertically
 	border: 0px;
 	color: var(--color-text-base);
-	:hover {
-		background-color: none;
-	}
+
+	--button-hover-background-color: transparent;
+	--button-active-background-color: transparent;
 }
 
 .overrideButton {

From 4fbcb70083df439cdabcfb7ceec306164cc7bbf3 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Mon, 27 Jan 2025 12:40:10 +0100
Subject: [PATCH 45/82] posthog telemetry

---
 .../src/components/ParameterInputFull.vue     | 24 ++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 486e05dfa8e5e..c30a022fdae68 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -241,10 +241,14 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 );
 
 function applyOverride() {
-	telemetry.track('User turned on fromAI override', {
-		nodeType: node.value?.type,
-		parameter: props.path,
-	});
+	telemetry.track(
+		'User turned on fromAI override',
+		{
+			nodeType: node.value?.type,
+			parameter: props.path,
+		},
+		{ withPostHog: true },
+	);
 	valueChanged({
 		name: props.path,
 		value: parameterOverrides.value?.buildValueFromOverride(props, true),
@@ -252,10 +256,14 @@ function applyOverride() {
 }
 
 function removeOverride() {
-	telemetry.track('User turned off fromAI override', {
-		nodeType: node.value?.type,
-		parameter: props.path,
-	});
+	telemetry.track(
+		'User turned off fromAI override',
+		{
+			nodeType: node.value?.type,
+			parameter: props.path,
+		},
+		{ withPostHog: true },
+	);
 	valueChanged({
 		node: node.value?.name,
 		name: props.path,

From 40d4f9589c267399067f67b2f4829a168fff2fb5 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Mon, 27 Jan 2025 13:45:42 +0100
Subject: [PATCH 46/82] tests and minor changes

---
 .../src/components/ParameterInputFull.vue     |   2 +-
 .../src/utils/parameterInputOverrides.test.ts | 142 ++++++++++++++++++
 ...verrides.ts => parameterInputOverrides.ts} |  33 ++--
 3 files changed, 163 insertions(+), 14 deletions(-)
 create mode 100644 packages/editor-ui/src/utils/parameterInputOverrides.test.ts
 rename packages/editor-ui/src/utils/{parameterOverrides.ts => parameterInputOverrides.ts} (78%)

diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index c30a022fdae68..46942c24cf9dd 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -19,7 +19,7 @@ import {
 } from 'n8n-workflow';
 import { N8nButton, N8nInputLabel, N8nSelectableList, N8nTooltip } from 'n8n-design-system';
 import AiStarsIcon from './AiStarsIcon.vue';
-import { type ParameterOverride, makeOverrideValue } from '../utils/parameterOverrides';
+import { type ParameterOverride, makeOverrideValue } from '../utils/parameterInputOverrides';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useTelemetry } from '@/composables/useTelemetry';
 
diff --git a/packages/editor-ui/src/utils/parameterInputOverrides.test.ts b/packages/editor-ui/src/utils/parameterInputOverrides.test.ts
new file mode 100644
index 0000000000000..7b51654b68bdd
--- /dev/null
+++ b/packages/editor-ui/src/utils/parameterInputOverrides.test.ts
@@ -0,0 +1,142 @@
+import type { OverrideContext } from '@/utils/parameterInputOverrides';
+import { FromAiOverride, makeOverrideValue } from '@/utils/parameterInputOverrides';
+import type { INodeTypeDescription } from 'n8n-workflow';
+
+const DISPLAY_NAME = 'aDisplayName';
+const PARAMETER_NAME = 'aName';
+
+const makeContext = (value: string, path?: string): OverrideContext => ({
+	parameter: {
+		name: PARAMETER_NAME,
+		displayName: DISPLAY_NAME,
+		type: 'string',
+	},
+	value,
+	path: path ?? `parameters.${PARAMETER_NAME}`,
+});
+
+const MOCK_NODE_TYPE_MIXIN = {
+	version: 0,
+	defaults: {},
+	inputs: [],
+	outputs: [],
+	properties: [],
+	displayName: '',
+	group: [],
+	description: '',
+};
+
+const AI_NODE_TYPE: INodeTypeDescription = {
+	name: 'AN_AI_NODE_TYPE',
+	codex: {
+		categories: ['AI'],
+		subcategories: {
+			AI: ['Tools'],
+		},
+	},
+	...MOCK_NODE_TYPE_MIXIN,
+};
+
+const AI_DENYLIST_NODE_TYPE: INodeTypeDescription = {
+	name: 'toolCode',
+	codex: {
+		categories: ['AI'],
+		subcategories: {
+			AI: ['Tools'],
+		},
+	},
+	...MOCK_NODE_TYPE_MIXIN,
+};
+
+const NON_AI_NODE_TYPE: INodeTypeDescription = {
+	name: 'AN_NOT_AI_NODE_TYPE',
+	...MOCK_NODE_TYPE_MIXIN,
+};
+
+describe('makeOverrideValue', () => {
+	test.each<[string, ...Parameters<typeof makeOverrideValue>]>([
+		['null nodeType', makeContext(''), null],
+		['non-ai node type', makeContext(''), NON_AI_NODE_TYPE],
+		['ai node type on denylist', makeContext(''), AI_DENYLIST_NODE_TYPE],
+	])('should not create an override for %s', (_name, context, nodeType) => {
+		expect(makeOverrideValue(context, nodeType)).toBeNull();
+	});
+
+	it('should create an fromAI override', () => {
+		const result = makeOverrideValue(
+			makeContext(`={{ /* n8n-auto-generated-fromAI-override */ $fromAI('${DISPLAY_NAME}') }}`),
+			AI_NODE_TYPE,
+		);
+
+		expect(result).toBeInstanceOf(FromAiOverride);
+	});
+
+	it('parses existing fromAI overrides', () => {
+		const description = 'a description';
+		const result = makeOverrideValue(
+			makeContext(
+				`={{ /* n8n-auto-generated-fromAI-override */ $fromAI('${DISPLAY_NAME}', '${description}') }}`,
+			),
+			AI_NODE_TYPE,
+		);
+
+		expect(result).toBeDefined();
+		expect(result?.extraPropValues.description).toEqual(description);
+	});
+
+	it('parses an existing fromAI override with default values without adding extraPropValue entry', () => {
+		const result = makeOverrideValue(
+			makeContext("={{ /* n8n-auto-generated-fromAI-override */ $fromAI('aName', '') }}"),
+			AI_NODE_TYPE,
+		);
+
+		expect(result).toBeDefined();
+		expect(result?.extraPropValues.description).not.toBeDefined();
+	});
+});
+
+describe('FromAiOverride', () => {
+	it('correctly identifies override values', () => {
+		expect(FromAiOverride.isOverrideValue('={{ $fromAI() }}')).toBe(false);
+		expect(
+			FromAiOverride.isOverrideValue('={{ /* n8n-auto-generated-fromAI-override */ $fromAI() }}'),
+		).toBe(true);
+	});
+
+	it('should parseOverrides as expected', () => {
+		expect(FromAiOverride.parseOverrides("={{ $fromAI('aKey') }}")).toBeNull();
+		expect(FromAiOverride.parseOverrides("={{ $fromAI('aKey', 'a description') }}")).toBeNull();
+		expect(
+			FromAiOverride.parseOverrides(
+				"={{ /* n8n-auto-generated-fromAI-override */ $fromAI('aKey') }}",
+			),
+		).toEqual({ description: undefined });
+		expect(
+			FromAiOverride.parseOverrides(
+				"={{ /* n8n-auto-generated-fromAI-override */ $fromAI('aKey', 'a description') }}",
+			),
+		).toEqual({
+			description: 'a description',
+		});
+	});
+
+	it('should build a value from an override and carry over modification', () => {
+		const override = new FromAiOverride();
+		expect(override.buildValueFromOverride(makeContext(''), true)).toEqual(
+			`={{ /* n8n-auto-generated-fromAI-override */ $fromAI('${DISPLAY_NAME}', '', 'string') }}`,
+		);
+		expect(override.buildValueFromOverride(makeContext(''), false)).toEqual(
+			`={{ $fromAI('${DISPLAY_NAME}', '', 'string') }}`,
+		);
+
+		const description = 'a description';
+		override.extraPropValues.description = description;
+
+		expect(override.buildValueFromOverride(makeContext(''), true)).toEqual(
+			`={{ /* n8n-auto-generated-fromAI-override */ $fromAI('${DISPLAY_NAME}', '${description}', 'string') }}`,
+		);
+		expect(override.buildValueFromOverride(makeContext(''), false)).toEqual(
+			`={{ $fromAI('${DISPLAY_NAME}', '${description}', 'string') }}`,
+		);
+	});
+});
diff --git a/packages/editor-ui/src/utils/parameterOverrides.ts b/packages/editor-ui/src/utils/parameterInputOverrides.ts
similarity index 78%
rename from packages/editor-ui/src/utils/parameterOverrides.ts
rename to packages/editor-ui/src/utils/parameterInputOverrides.ts
index 06615a6bdd730..614904afdb45f 100644
--- a/packages/editor-ui/src/utils/parameterOverrides.ts
+++ b/packages/editor-ui/src/utils/parameterInputOverrides.ts
@@ -10,12 +10,12 @@ export interface ParameterOverride {
 	readonly overridePlaceholder: string;
 	readonly extraProps: Record<string, ExtraPropValue>;
 	extraPropValues: Partial<Record<keyof ParameterOverride['extraProps'], NodeParameterValueType>>;
-	buildValueFromOverride: (props: Context, excludeMarker: boolean) => string;
+	buildValueFromOverride: (props: OverrideContext, excludeMarker: boolean) => string;
 	isOverrideValue: (s: string) => boolean;
 	parseOverrides: (s: string) => Partial<Record<string, string>> | null;
 }
 
-type Context = {
+export type OverrideContext = {
 	parameter: {
 		name: string;
 		displayName: string;
@@ -45,7 +45,7 @@ function sanitizeFromAiParameterName(s: string) {
 }
 
 export class FromAiOverride implements ParameterOverride {
-	static readonly MARKER = '/* n8n-auto-generated-fromAi-override */';
+	static readonly MARKER = '/* n8n-auto-generated-fromAI-override */ ';
 
 	static readonly NODE_DENYLIST = ['toolCode', 'toolHttpRequest'];
 
@@ -59,8 +59,8 @@ export class FromAiOverride implements ParameterOverride {
 	readonly overridePlaceholder = i18n.baseText('parameterOverride.overridePanelText');
 
 	readonly providers = {
-		key: (props: Context) => sanitizeFromAiParameterName(props.parameter.displayName),
-		type: (props: Context) => this.fieldTypeToFromAiType(props),
+		key: (props: OverrideContext) => sanitizeFromAiParameterName(props.parameter.displayName),
+		type: (props: OverrideContext) => this.fieldTypeToFromAiType(props),
 	};
 
 	readonly extraProps: Record<FromAiOverrideExtraProps, ExtraPropValue> = {
@@ -73,7 +73,7 @@ export class FromAiOverride implements ParameterOverride {
 
 	extraPropValues: Partial<Record<FromAiOverrideExtraProps, NodeParameterValueType>> = {};
 
-	private fieldTypeToFromAiType(props: Context) {
+	private fieldTypeToFromAiType(props: OverrideContext) {
 		switch (props.parameter.type) {
 			case 'boolean':
 				return 'boolean';
@@ -86,23 +86,25 @@ export class FromAiOverride implements ParameterOverride {
 	}
 
 	static isOverrideValue(s: string) {
-		return s.startsWith(`={{ ${FromAiOverride.MARKER} $fromAI(`);
+		return s.startsWith(`={{ ${FromAiOverride.MARKER}$fromAI(`);
 	}
 
 	isOverrideValue = FromAiOverride.isOverrideValue;
 
-	buildValueFromOverride(props: Context, includeMarker: boolean) {
+	buildValueFromOverride(props: OverrideContext, includeMarker: boolean) {
 		const marker = includeMarker ? FromAiOverride.MARKER : '';
 		const key = this.providers.key(props);
 		const description =
 			this.extraPropValues?.description?.toString() ?? this.extraProps.description.initialValue;
 		const type = this.providers.type(props);
 
-		return `={{ ${marker} $fromAI('${key}', '${description}', '${type}') }}`;
+		return `={{ ${marker}$fromAI('${key}', '${description}', '${type}') }}`;
 	}
 
-	parseOverrides(s: string): Record<keyof typeof this.extraProps, string | undefined> | null {
-		if (!this.isOverrideValue(s)) return null;
+	static parseOverrides(
+		s: string,
+	): Record<keyof FromAiOverride['extraProps'], string | undefined> | null {
+		if (!FromAiOverride.isOverrideValue(s)) return null;
 
 		try {
 			const calls = extractFromAICalls(s);
@@ -116,7 +118,12 @@ export class FromAiOverride implements ParameterOverride {
 		return null;
 	}
 
-	static canBeContentOverride(props: Context, nodeType: INodeTypeDescription | null) {
+	parseOverrides = FromAiOverride.parseOverrides;
+
+	static canBeContentOverride(
+		props: Pick<OverrideContext, 'path' | 'parameter'>,
+		nodeType: INodeTypeDescription | null,
+	) {
 		if (FromAiOverride.NODE_DENYLIST.some((x) => nodeType?.name?.endsWith(x) ?? false))
 			return false;
 
@@ -131,7 +138,7 @@ export class FromAiOverride implements ParameterOverride {
 }
 
 export function makeOverrideValue(
-	context: Context,
+	context: OverrideContext,
 	nodeType: INodeTypeDescription | null,
 ): ParameterOverride | null {
 	if (!nodeType) return null;

From 07a328542497c73fd7933d776c9b047801f83854 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Mon, 27 Jan 2025 14:34:32 +0100
Subject: [PATCH 47/82] more cleanup

---
 .../src/utils/parameterInputOverrides.ts      | 20 +++++++------------
 1 file changed, 7 insertions(+), 13 deletions(-)

diff --git a/packages/editor-ui/src/utils/parameterInputOverrides.ts b/packages/editor-ui/src/utils/parameterInputOverrides.ts
index 614904afdb45f..06a3e475d6116 100644
--- a/packages/editor-ui/src/utils/parameterInputOverrides.ts
+++ b/packages/editor-ui/src/utils/parameterInputOverrides.ts
@@ -58,11 +58,6 @@ export class FromAiOverride implements ParameterOverride {
 
 	readonly overridePlaceholder = i18n.baseText('parameterOverride.overridePanelText');
 
-	readonly providers = {
-		key: (props: OverrideContext) => sanitizeFromAiParameterName(props.parameter.displayName),
-		type: (props: OverrideContext) => this.fieldTypeToFromAiType(props),
-	};
-
 	readonly extraProps: Record<FromAiOverrideExtraProps, ExtraPropValue> = {
 		description: {
 			initialValue: '',
@@ -73,13 +68,12 @@ export class FromAiOverride implements ParameterOverride {
 
 	extraPropValues: Partial<Record<FromAiOverrideExtraProps, NodeParameterValueType>> = {};
 
-	private fieldTypeToFromAiType(props: OverrideContext) {
-		switch (props.parameter.type) {
+	private fieldTypeToFromAiType(propType: NodePropertyTypes) {
+		switch (propType) {
 			case 'boolean':
-				return 'boolean';
 			case 'number':
-				return 'number';
-			case 'string':
+			case 'json':
+				return propType;
 			default:
 				return 'string';
 		}
@@ -91,12 +85,12 @@ export class FromAiOverride implements ParameterOverride {
 
 	isOverrideValue = FromAiOverride.isOverrideValue;
 
-	buildValueFromOverride(props: OverrideContext, includeMarker: boolean) {
+	buildValueFromOverride(props: Pick<OverrideContext, 'parameter'>, includeMarker: boolean) {
 		const marker = includeMarker ? FromAiOverride.MARKER : '';
-		const key = this.providers.key(props);
+		const key = sanitizeFromAiParameterName(props.parameter.displayName);
 		const description =
 			this.extraPropValues?.description?.toString() ?? this.extraProps.description.initialValue;
-		const type = this.providers.type(props);
+		const type = this.fieldTypeToFromAiType(props.parameter.type);
 
 		return `={{ ${marker}$fromAI('${key}', '${description}', '${type}') }}`;
 	}

From 7cf74b6e3d1db05e806db54f757a2f05eb6880df Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Tue, 28 Jan 2025 11:29:00 +0100
Subject: [PATCH 48/82] refactor into override components

---
 .../N8nSelectableList/SelectableList.vue      |  15 +-
 .../src/components/ParameterInputFull.vue     | 177 +++---------------
 .../FromAiOverrideButton.vue                  |  42 +++++
 .../FromAiOverrideField.vue                   |  70 +++++++
 .../ParameterOverrideSelectableList.vue       |  72 +++++++
 .../parameterInputOverrides.test.ts           |  20 +-
 .../parameterInputOverrides.ts                |  15 +-
 packages/workflow/src/FromAIParseUtils.ts     |   1 +
 .../workflow/test/FromAIParseUtils.test.ts    |   3 +
 9 files changed, 252 insertions(+), 163 deletions(-)
 create mode 100644 packages/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideButton.vue
 create mode 100644 packages/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideField.vue
 create mode 100644 packages/editor-ui/src/components/ParameterInputOverrides/ParameterOverrideSelectableList.vue
 rename packages/editor-ui/src/{utils => components/ParameterInputOverrides}/parameterInputOverrides.test.ts (87%)
 rename packages/editor-ui/src/{utils => components/ParameterInputOverrides}/parameterInputOverrides.ts (86%)

diff --git a/packages/design-system/src/components/N8nSelectableList/SelectableList.vue b/packages/design-system/src/components/N8nSelectableList/SelectableList.vue
index e5ba985edf62b..7d9d85fb8ef35 100644
--- a/packages/design-system/src/components/N8nSelectableList/SelectableList.vue
+++ b/packages/design-system/src/components/N8nSelectableList/SelectableList.vue
@@ -67,9 +67,11 @@ function itemComparator(a: Item, b: Item) {
 				:data-test-id="`selectable-list-selectable-${item.name}`"
 				@click="!props.disabled && addToSelectedItems(item.name)"
 			>
-				<slot name="addItem" v-bind="item"
-					>{{ t('selectableList.addDefault') }} {{ item.name }}</slot
-				>
+				<slot name="addItem" v-bind="item">
+					<div :class="$style.selectableTextSize">
+						{{ t('selectableList.addDefault') }} {{ item.name }}
+					</div>
+				</slot>
 			</span>
 		</div>
 		<div
@@ -122,10 +124,15 @@ function itemComparator(a: Item, b: Item) {
 	cursor: pointer;
 
 	:hover {
-		color: var(--color-primary);
+		color: var(--text-color-dark);
 	}
 }
 
+.selectableTextSize {
+	font-size: var(--font-size-2xs);
+	line-height: var(--font-line-height-loose);
+}
+
 .slotRemoveIcon {
 	color: var(--color-text-light);
 	height: 10px;
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 46942c24cf9dd..0bbc7884851c3 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -5,6 +5,8 @@ import type { IUpdateInformation } from '@/Interface';
 import DraggableTarget from '@/components/DraggableTarget.vue';
 import ParameterInputWrapper from '@/components/ParameterInputWrapper.vue';
 import ParameterOptions from '@/components/ParameterOptions.vue';
+import FromAiOverrideButton from '@/components/ParameterInputOverrides/FromAiOverrideButton.vue';
+import FromAiOverrideField from '@/components/ParameterInputOverrides/FromAiOverrideField.vue';
 import { useI18n } from '@/composables/useI18n';
 import { useToast } from '@/composables/useToast';
 import { useNDVStore } from '@/stores/ndv.store';
@@ -17,9 +19,11 @@ import {
 	type IParameterLabel,
 	type NodeParameterValueType,
 } from 'n8n-workflow';
-import { N8nButton, N8nInputLabel, N8nSelectableList, N8nTooltip } from 'n8n-design-system';
-import AiStarsIcon from './AiStarsIcon.vue';
-import { type ParameterOverride, makeOverrideValue } from '../utils/parameterInputOverrides';
+import { N8nInputLabel } from 'n8n-design-system';
+import {
+	type ParameterOverride,
+	makeOverrideValue,
+} from './ParameterInputOverrides/parameterInputOverrides';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useTelemetry } from '@/composables/useTelemetry';
 
@@ -73,15 +77,18 @@ const parameterOverrides = ref<ParameterOverride | null>(
 	),
 );
 
-const isContentOverride = computed(
-	() => !!parameterOverrides.value?.isOverrideValue(props.value?.toString() ?? ''),
-);
 const canBeContentOverride = computed(() => {
 	if (!node.value || isResourceLocator.value) return false;
 
 	return parameterOverrides.value !== null;
 });
 
+const isContentOverride = computed(
+	() =>
+		canBeContentOverride.value &&
+		!!parameterOverrides.value?.isOverrideValue(props.value?.toString() ?? ''),
+);
+
 const hint = computed(() => i18n.nodeText().hint(props.parameter, props.path));
 
 const isResourceLocator = computed(
@@ -289,19 +296,10 @@ function removeOverride() {
 			v-if="showOverrideButton && !isSingleLineInput && optionsPosition === 'top'"
 			#persistentOptions
 		>
-			<N8nTooltip>
-				<template #content>
-					<div>{{ i18n.baseText('parameterOverride.applyOverrideButtonTooltip') }}</div>
-				</template>
-
-				<N8nButton
-					:class="[$style.overrideButton, $style.noCornersBottom, $style.overrideButtonInOptions]"
-					type="tertiary"
-					@click="applyOverride"
-				>
-					<AiStarsIcon size="large" :class="$style.aiStarsIcon" />
-				</N8nButton>
-			</N8nTooltip>
+			<FromAiOverrideButton
+				:class="[$style.noCornersBottom, $style.overrideButtonInOptions]"
+				@click="applyOverride"
+			/>
 		</template>
 
 		<template v-if="displayOptions && optionsPosition === 'top'" #options>
@@ -323,30 +321,11 @@ function removeOverride() {
 			@drop="onDrop"
 		>
 			<template #default="{ droppable, activeDrop }">
-				<div
-					v-if="canBeContentOverride && isContentOverride"
-					:class="$style.contentOverrideContainer"
-				>
-					<div :class="[$style.iconStars, 'el-input-group__prepend', $style.noCornersRight]">
-						<AiStarsIcon :class="$style.aiStarsIcon" />
-					</div>
-					<N8nInput
-						:model-value="parameterOverrides?.overridePlaceholder"
-						:class="$style.overrideInput"
-						disabled
-						type="text"
-						size="small"
-					/>
-					<N8nIconButton
-						v-if="!isReadOnly"
-						type="tertiary"
-						:class="['n8n-input', $style.overrideInput, $style.overrideCloseButton]"
-						outline="false"
-						icon="xmark"
-						size="xsmall"
-						@click="removeOverride"
-					/>
-				</div>
+				<FromAiOverrideField
+					v-if="parameterOverrides && isContentOverride"
+					:text="parameterOverrides?.overridePlaceholder"
+					@close="removeOverride"
+				/>
 				<div v-else>
 					<ParameterInputWrapper
 						ref="parameterInputWrapper"
@@ -373,17 +352,7 @@ function removeOverride() {
 						@drop="onDrop"
 					>
 						<template v-if="showOverrideButton && isSingleLineInput" #overrideButton>
-							<N8nTooltip>
-								<template #content>
-									<div>
-										{{ i18n.baseText('parameterOverride.applyOverrideButtonTooltip') }}
-									</div>
-								</template>
-
-								<N8nButton :class="[$style.overrideButton]" type="tertiary" @click="applyOverride">
-									<AiStarsIcon size="large" :class="$style.aiStarsIcon" />
-								</N8nButton>
-							</N8nTooltip>
+							<FromAiOverrideButton @click="applyOverride" />
 						</template>
 					</ParameterInputWrapper>
 				</div>
@@ -406,41 +375,14 @@ function removeOverride() {
 				@menu-expanded="onMenuExpanded"
 			/>
 		</div>
-		<N8nSelectableList
+		<ParameterOverrideSelectableList
 			v-if="isContentOverride && parameterOverrides"
-			v-model="parameterOverrides.extraPropValues"
-			:class="$style.overrideSelectableList"
-			:inputs="
-				Object.entries(parameterOverrides.extraProps).map(([name, prop]) => ({
-					name,
-					...prop,
-				}))
-			"
-			:disabled="isReadOnly"
-		>
-			<template #displayItem="{ name, tooltip, initialValue, type }">
-				<ParameterInputFull
-					:parameter="{
-						name,
-						displayName: name[0].toUpperCase() + name.slice(1),
-						type,
-						default: initialValue,
-						noDataExpression: true,
-						description: tooltip,
-					}"
-					:is-read-only="isReadOnly"
-					:value="parameterOverrides?.extraPropValues[name]"
-					:path="`${path}.${name}`"
-					input-size="small"
-					@update="
-						(x) => {
-							if (parameterOverrides) parameterOverrides.extraPropValues[name] = x.value;
-							applyOverride();
-						}
-					"
-				/>
-			</template>
-		</N8nSelectableList>
+			v-model="parameterOverrides"
+			:parameter="parameter"
+			:path="path"
+			:read-only="isReadOnly"
+			@update="valueChanged"
+		/>
 	</N8nInputLabel>
 </template>
 
@@ -455,76 +397,17 @@ function removeOverride() {
 	}
 }
 
-.contentOverrideContainer {
-	display: flex;
-	gap: var(--spacing-4xs);
-	border-radius: var(--border-radius-base);
-	background-color: var(--color-foreground-base);
-}
-
-.overrideCloseButton {
-	padding: 0px 8px 3px; // the icon used is off-center vertically
-	border: 0px;
-	color: var(--color-text-base);
-
-	--button-hover-background-color: transparent;
-	--button-active-background-color: transparent;
-}
-
-.overrideButton {
-	display: flex;
-	justify-content: center;
-	border: 0px;
-	height: 30px;
-	width: 30px;
-	background-color: var(--color-foreground-base);
-	color: var(--color-foreground-xdark);
-
-	&:hover {
-		color: var(--color-foreground-xdark);
-		background-color: var(--color-secondary);
-	}
-}
-
 .overrideButtonInOptions {
 	position: relative;
 	// To connect to input panel below the button
 	top: 1px;
 }
 
-.noCornersRight {
-	border-top-right-radius: 0;
-	border-bottom-right-radius: 0;
-}
-
 .noCornersBottom {
 	border-bottom-right-radius: 0;
 	border-bottom-left-radius: 0;
 }
 
-.iconStars {
-	align-self: center;
-	padding-left: 8px;
-	width: 22px;
-	text-align: center;
-	border: none;
-	color: var(--color-foreground-xdark);
-	background-color: var(--color-foreground-base);
-}
-
-.overrideInput {
-	* > input {
-		padding-left: 0;
-		// We need this in light mode
-		background-color: var(--color-foreground-base) !important;
-		border: none;
-	}
-}
-
-.overrideSelectableList {
-	margin-top: var(--spacing-2xs);
-}
-
 .options {
 	position: absolute;
 	bottom: -22px;
diff --git a/packages/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideButton.vue b/packages/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideButton.vue
new file mode 100644
index 0000000000000..32c70f57a8e98
--- /dev/null
+++ b/packages/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideButton.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { useI18n } from '@/composables/useI18n';
+
+const i18n = useI18n();
+
+const emit = defineEmits<{
+	click: [];
+}>();
+</script>
+
+<template>
+	<N8nTooltip>
+		<template #content>
+			<div>{{ i18n.baseText('parameterOverride.applyOverrideButtonTooltip') }}</div>
+		</template>
+
+		<N8nButton
+			:class="[$style.overrideButton /*, $style.noCornersBottom, $style.overrideButtonInOptions*/]"
+			type="tertiary"
+			@click="emit('click')"
+		>
+			<AiStarsIcon size="large" :class="$style.aiStarsIcon" />
+		</N8nButton>
+	</N8nTooltip>
+</template>
+
+<style lang="scss" module>
+.overrideButton {
+	display: flex;
+	justify-content: center;
+	border: 0px;
+	height: 30px;
+	width: 30px;
+	background-color: var(--color-foreground-base);
+	color: var(--color-foreground-xdark);
+
+	&:hover {
+		color: var(--color-foreground-xdark);
+		background-color: var(--color-secondary);
+	}
+}
+</style>
diff --git a/packages/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideField.vue b/packages/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideField.vue
new file mode 100644
index 0000000000000..1928f164ac026
--- /dev/null
+++ b/packages/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideField.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+defineProps<{
+	text: string;
+	readOnly?: boolean;
+}>();
+
+const emit = defineEmits<{
+	close: [];
+}>();
+</script>
+
+<template>
+	<div :class="$style.contentOverrideContainer">
+		<div :class="[$style.iconStars, 'el-input-group__prepend', $style.noCornersRight]">
+			<AiStarsIcon :class="$style.aiStarsIcon" />
+		</div>
+		<N8nInput :model-value="text" :class="$style.overrideInput" disabled type="text" size="small" />
+		<N8nIconButton
+			v-if="!readOnly"
+			type="tertiary"
+			:class="['n8n-input', $style.overrideInput, $style.overrideCloseButton]"
+			outline="false"
+			icon="xmark"
+			size="xsmall"
+			@click="emit('close')"
+		/>
+	</div>
+</template>
+
+<style lang="scss" module>
+.iconStars {
+	align-self: center;
+	padding-left: 8px;
+	width: 22px;
+	text-align: center;
+	border: none;
+	color: var(--color-foreground-xdark);
+	background-color: var(--color-foreground-base);
+}
+
+.noCornersRight {
+	border-top-right-radius: 0;
+	border-bottom-right-radius: 0;
+}
+
+.overrideInput {
+	* > input {
+		padding-left: 0;
+		// We need this in light mode
+		background-color: var(--color-foreground-base) !important;
+		border: none;
+	}
+}
+
+.overrideCloseButton {
+	padding: 0px 8px 3px; // the icon used is off-center vertically
+	border: 0px;
+	color: var(--color-text-base);
+
+	--button-hover-background-color: transparent;
+	--button-active-background-color: transparent;
+}
+
+.contentOverrideContainer {
+	display: flex;
+	gap: var(--spacing-4xs);
+	border-radius: var(--border-radius-base);
+	background-color: var(--color-foreground-base);
+}
+</style>
diff --git a/packages/editor-ui/src/components/ParameterInputOverrides/ParameterOverrideSelectableList.vue b/packages/editor-ui/src/components/ParameterInputOverrides/ParameterOverrideSelectableList.vue
new file mode 100644
index 0000000000000..d8db3c4d7a760
--- /dev/null
+++ b/packages/editor-ui/src/components/ParameterInputOverrides/ParameterOverrideSelectableList.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import type { IUpdateInformation } from '@/Interface';
+
+import { type INodeProperties } from 'n8n-workflow';
+import { type ParameterOverride } from './parameterInputOverrides';
+
+type Props = {
+	parameter: INodeProperties;
+	path: string;
+	isReadOnly?: boolean;
+};
+
+const parameterOverride = defineModel<ParameterOverride>({ required: true });
+
+const props = withDefaults(defineProps<Props>(), {
+	isReadOnly: false,
+});
+const emit = defineEmits<{
+	update: [value: IUpdateInformation];
+}>();
+
+function valueChanged(parameterData: IUpdateInformation) {
+	emit('update', parameterData);
+}
+</script>
+
+<template>
+	<N8nSelectableList
+		v-model="parameterOverride.extraPropValues"
+		:class="$style.overrideSelectableList"
+		:inputs="
+			Object.entries(parameterOverride.extraProps).map(([name, prop]) => ({
+				name,
+				...prop,
+			}))
+		"
+		:disabled="isReadOnly"
+	>
+		<template #displayItem="{ name, tooltip, initialValue, type, typeOptions }">
+			<ParameterInputFull
+				:parameter="{
+					name,
+					displayName: name[0].toUpperCase() + name.slice(1),
+					type,
+					default: initialValue,
+					noDataExpression: true,
+					description: tooltip,
+					typeOptions,
+				}"
+				:is-read-only="isReadOnly"
+				:value="parameterOverride?.extraPropValues[name]"
+				:path="`${path}.${name}`"
+				input-size="small"
+				@update="
+					(x) => {
+						parameterOverride.extraPropValues[name] = x.value;
+						valueChanged({
+							name: props.path,
+							value: parameterOverride.buildValueFromOverride(props, true),
+						});
+					}
+				"
+			/>
+		</template>
+	</N8nSelectableList>
+</template>
+
+<style lang="scss" module>
+.overrideSelectableList {
+	margin-top: var(--spacing-2xs);
+}
+</style>
diff --git a/packages/editor-ui/src/utils/parameterInputOverrides.test.ts b/packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.test.ts
similarity index 87%
rename from packages/editor-ui/src/utils/parameterInputOverrides.test.ts
rename to packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.test.ts
index 7b51654b68bdd..5d275904045ce 100644
--- a/packages/editor-ui/src/utils/parameterInputOverrides.test.ts
+++ b/packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.test.ts
@@ -1,5 +1,5 @@
-import type { OverrideContext } from '@/utils/parameterInputOverrides';
-import { FromAiOverride, makeOverrideValue } from '@/utils/parameterInputOverrides';
+import type { OverrideContext } from './parameterInputOverrides';
+import { FromAiOverride, makeOverrideValue } from './parameterInputOverrides';
 import type { INodeTypeDescription } from 'n8n-workflow';
 
 const DISPLAY_NAME = 'aDisplayName';
@@ -75,7 +75,7 @@ describe('makeOverrideValue', () => {
 		const description = 'a description';
 		const result = makeOverrideValue(
 			makeContext(
-				`={{ /* n8n-auto-generated-fromAI-override */ $fromAI('${DISPLAY_NAME}', '${description}') }}`,
+				`={{ /* n8n-auto-generated-fromAI-override */ $fromAI('${DISPLAY_NAME}', \`${description}\`) }}`,
 			),
 			AI_NODE_TYPE,
 		);
@@ -86,7 +86,7 @@ describe('makeOverrideValue', () => {
 
 	it('parses an existing fromAI override with default values without adding extraPropValue entry', () => {
 		const result = makeOverrideValue(
-			makeContext("={{ /* n8n-auto-generated-fromAI-override */ $fromAI('aName', '') }}"),
+			makeContext("={{ /* n8n-auto-generated-fromAI-override */ $fromAI('aName', ``) }}"),
 			AI_NODE_TYPE,
 		);
 
@@ -105,7 +105,7 @@ describe('FromAiOverride', () => {
 
 	it('should parseOverrides as expected', () => {
 		expect(FromAiOverride.parseOverrides("={{ $fromAI('aKey') }}")).toBeNull();
-		expect(FromAiOverride.parseOverrides("={{ $fromAI('aKey', 'a description') }}")).toBeNull();
+		expect(FromAiOverride.parseOverrides("={{ $fromAI('aKey', `a description`) }}")).toBeNull();
 		expect(
 			FromAiOverride.parseOverrides(
 				"={{ /* n8n-auto-generated-fromAI-override */ $fromAI('aKey') }}",
@@ -113,7 +113,7 @@ describe('FromAiOverride', () => {
 		).toEqual({ description: undefined });
 		expect(
 			FromAiOverride.parseOverrides(
-				"={{ /* n8n-auto-generated-fromAI-override */ $fromAI('aKey', 'a description') }}",
+				"={{ /* n8n-auto-generated-fromAI-override */ $fromAI('aKey', `a description`) }}",
 			),
 		).toEqual({
 			description: 'a description',
@@ -123,20 +123,20 @@ describe('FromAiOverride', () => {
 	it('should build a value from an override and carry over modification', () => {
 		const override = new FromAiOverride();
 		expect(override.buildValueFromOverride(makeContext(''), true)).toEqual(
-			`={{ /* n8n-auto-generated-fromAI-override */ $fromAI('${DISPLAY_NAME}', '', 'string') }}`,
+			`={{ /* n8n-auto-generated-fromAI-override */ $fromAI('${DISPLAY_NAME}', \`\`, 'string') }}`,
 		);
 		expect(override.buildValueFromOverride(makeContext(''), false)).toEqual(
-			`={{ $fromAI('${DISPLAY_NAME}', '', 'string') }}`,
+			`={{ $fromAI('${DISPLAY_NAME}', \`\`, 'string') }}`,
 		);
 
 		const description = 'a description';
 		override.extraPropValues.description = description;
 
 		expect(override.buildValueFromOverride(makeContext(''), true)).toEqual(
-			`={{ /* n8n-auto-generated-fromAI-override */ $fromAI('${DISPLAY_NAME}', '${description}', 'string') }}`,
+			`={{ /* n8n-auto-generated-fromAI-override */ $fromAI('${DISPLAY_NAME}', \`${description}\`, 'string') }}`,
 		);
 		expect(override.buildValueFromOverride(makeContext(''), false)).toEqual(
-			`={{ $fromAI('${DISPLAY_NAME}', '${description}', 'string') }}`,
+			`={{ $fromAI('${DISPLAY_NAME}', \`${description}\`, 'string') }}`,
 		);
 	});
 });
diff --git a/packages/editor-ui/src/utils/parameterInputOverrides.ts b/packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.ts
similarity index 86%
rename from packages/editor-ui/src/utils/parameterInputOverrides.ts
rename to packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.ts
index 06a3e475d6116..01802e791f528 100644
--- a/packages/editor-ui/src/utils/parameterInputOverrides.ts
+++ b/packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.ts
@@ -10,7 +10,10 @@ export interface ParameterOverride {
 	readonly overridePlaceholder: string;
 	readonly extraProps: Record<string, ExtraPropValue>;
 	extraPropValues: Partial<Record<keyof ParameterOverride['extraProps'], NodeParameterValueType>>;
-	buildValueFromOverride: (props: OverrideContext, excludeMarker: boolean) => string;
+	buildValueFromOverride: (
+		props: Pick<OverrideContext, 'parameter'>,
+		excludeMarker: boolean,
+	) => string;
 	isOverrideValue: (s: string) => boolean;
 	parseOverrides: (s: string) => Partial<Record<string, string>> | null;
 }
@@ -32,6 +35,7 @@ type ExtraPropValue = {
 	initialValue: string;
 	tooltip: string;
 	type: NodePropertyTypes;
+	typeOptions?: { rows?: number };
 };
 
 function sanitizeFromAiParameterName(s: string) {
@@ -62,6 +66,7 @@ export class FromAiOverride implements ParameterOverride {
 		description: {
 			initialValue: '',
 			type: 'string',
+			typeOptions: { rows: 2 },
 			tooltip: i18n.baseText('parameterOverride.descriptionTooltip'),
 		},
 	};
@@ -90,9 +95,15 @@ export class FromAiOverride implements ParameterOverride {
 		const key = sanitizeFromAiParameterName(props.parameter.displayName);
 		const description =
 			this.extraPropValues?.description?.toString() ?? this.extraProps.description.initialValue;
+
+		// We want to escape these characters here as the generated formula needs to be valid JS code, and we risk
+		// closing the string prematurely without it.
+		// If we don't escape \ then 'my \` description' as user input would end up as 'my \\` description'
+		// in the generated code, causing an unescaped backtick to close the string.
+		const sanitizedDescription = description.replace(/\\/g, '\\\\').replace(/`/g, '\\`');
 		const type = this.fieldTypeToFromAiType(props.parameter.type);
 
-		return `={{ ${marker}$fromAI('${key}', '${description}', '${type}') }}`;
+		return `={{ ${marker}$fromAI('${key}', \`${sanitizedDescription}\`, '${type}') }}`;
 	}
 
 	static parseOverrides(
diff --git a/packages/workflow/src/FromAIParseUtils.ts b/packages/workflow/src/FromAIParseUtils.ts
index 4d86040b2343f..03e357d3fb38b 100644
--- a/packages/workflow/src/FromAIParseUtils.ts
+++ b/packages/workflow/src/FromAIParseUtils.ts
@@ -78,6 +78,7 @@ function parseDefaultValue(
  * @returns A FromAIArgument object.
  */
 function parseArguments(argsString: string): FromAIArgument {
+	console.log(argsString);
 	// Split arguments by commas not inside quotes
 	const args: string[] = [];
 	let currentArg = '';
diff --git a/packages/workflow/test/FromAIParseUtils.test.ts b/packages/workflow/test/FromAIParseUtils.test.ts
index 4c07f33fca8b5..17139f40b3e92 100644
--- a/packages/workflow/test/FromAIParseUtils.test.ts
+++ b/packages/workflow/test/FromAIParseUtils.test.ts
@@ -10,6 +10,9 @@ describe('extractFromAICalls', () => {
 	test.each<[string, [unknown, unknown, unknown, unknown]]>([
 		['$fromAI("a", "b", "string")', ['a', 'b', 'string', undefined]],
 		['$fromAI("a", "b", "number", 5)', ['a', 'b', 'number', 5]],
+		['$fromAI("a", "`", "number", 5)', ['a', '`', 'number', 5]],
+		['$fromAI("a", "`", "number", 5)', ['a', '`', 'number', 5]],
+		['$fromAI("a", "\n", "number", 5)', ['a', '\n', 'number', 5]],
 		['{{ $fromAI("a", "b", "boolean") }}', ['a', 'b', 'boolean', undefined]],
 	])('should parse args as expected for %s', (formula, [key, description, type, defaultValue]) => {
 		expect(extractFromAICalls(formula)).toEqual([

From 25fde16701676692a5a9cbc43ca4405df0134723 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Wed, 29 Jan 2025 18:07:52 +0100
Subject: [PATCH 49/82] Finish resourceLocator override

---
 .../components/ExpressionParameterInput.vue   |   1 +
 .../src/components/ParameterInput.vue         |   2 +-
 .../src/components/ParameterInputFull.vue     |  39 ++++--
 .../parameterInputOverrides.test.ts           |  17 ++-
 .../parameterInputOverrides.ts                |  37 +++---
 .../ResourceLocator/ResourceLocator.vue       | 115 ++++++++++++++++--
 .../ResourceLocator/resourceLocator.scss      |  49 +++++++-
 7 files changed, 223 insertions(+), 37 deletions(-)

diff --git a/packages/editor-ui/src/components/ExpressionParameterInput.vue b/packages/editor-ui/src/components/ExpressionParameterInput.vue
index 8706e73991779..8c0a6bb688d89 100644
--- a/packages/editor-ui/src/components/ExpressionParameterInput.vue
+++ b/packages/editor-ui/src/components/ExpressionParameterInput.vue
@@ -220,6 +220,7 @@ defineExpose({ focus });
 <style lang="scss" module>
 .expression-parameter-input {
 	position: relative;
+	flex-grow: 1;
 
 	:global(.cm-editor) {
 		background-color: var(--color-code-background);
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index 6d6be65171f45..c704ada1a0a27 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -1771,7 +1771,7 @@ onUpdated(async () => {
 	--input-border-top-right-radius: 0;
 }
 
-.noRightBorder > * {
+.noRightBorder > * > * > * > input {
 	border-right: unset;
 }
 
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 0bbc7884851c3..65939303d7f5c 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -111,6 +111,26 @@ const isReadOnlyParameter = computed(
 		props.isReadOnly || props.parameter.disabledOptions !== undefined || !!isContentOverride.value,
 );
 
+const showOptions = computed(() => {
+	if (isResourceLocator.value) {
+		// The resourceLocator handles overrides itself, so we use this hack to
+		// infer whether it's overridden and we should hide the options
+		const value =
+			props.value && typeof props.value === 'object' && 'value' in props.value && props.value.value;
+		if (
+			value &&
+			makeOverrideValue(
+				props,
+				node.value && nodeTypesStore.getNodeType(node.value.type, node.value.typeVersion),
+			)?.isOverrideValue(String(value))
+		) {
+			return false;
+		}
+	}
+
+	return props.displayOptions;
+});
+
 function onFocus() {
 	focused.value = true;
 	if (!props.parameter.noDataExpression) {
@@ -256,9 +276,11 @@ function applyOverride() {
 		},
 		{ withPostHog: true },
 	);
+	parameterOverrides.value?.updateExtraPropValues(props.value?.toString() ?? '');
+	const value = parameterOverrides.value?.buildValueFromOverride(props, true);
 	valueChanged({
 		name: props.path,
-		value: parameterOverrides.value?.buildValueFromOverride(props, true),
+		value,
 	});
 }
 
@@ -296,18 +318,17 @@ function removeOverride() {
 			v-if="showOverrideButton && !isSingleLineInput && optionsPosition === 'top'"
 			#persistentOptions
 		>
-			<FromAiOverrideButton
-				:class="[$style.noCornersBottom, $style.overrideButtonInOptions]"
-				@click="applyOverride"
-			/>
+			<div :class="[$style.noCornersBottom, $style.overrideButtonInOptions]">
+				<FromAiOverrideButton @click="applyOverride" />
+			</div>
 		</template>
 
-		<template v-if="displayOptions && optionsPosition === 'top'" #options>
+		<template v-if="showOptions && optionsPosition === 'top'" #options>
 			<ParameterOptions
 				:parameter="parameter"
 				:value="value"
 				:is-read-only="isReadOnlyParameter"
-				:show-options="displayOptions"
+				:show-options="showOptions"
 				:show-expression-selector="showExpressionSelector"
 				@update:model-value="optionSelected"
 				@menu-expanded="onMenuExpanded"
@@ -369,7 +390,7 @@ function removeOverride() {
 				:parameter="parameter"
 				:value="value"
 				:is-read-only="isReadOnlyParameter"
-				:show-options="displayOptions"
+				:show-options="showOptions"
 				:show-expression-selector="showExpressionSelector"
 				@update:model-value="optionSelected"
 				@menu-expanded="onMenuExpanded"
@@ -403,7 +424,7 @@ function removeOverride() {
 	top: 1px;
 }
 
-.noCornersBottom {
+.noCornersBottom > button {
 	border-bottom-right-radius: 0;
 	border-bottom-left-radius: 0;
 }
diff --git a/packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.test.ts b/packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.test.ts
index 5d275904045ce..6137e96a522a8 100644
--- a/packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.test.ts
+++ b/packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.test.ts
@@ -104,8 +104,13 @@ describe('FromAiOverride', () => {
 	});
 
 	it('should parseOverrides as expected', () => {
-		expect(FromAiOverride.parseOverrides("={{ $fromAI('aKey') }}")).toBeNull();
-		expect(FromAiOverride.parseOverrides("={{ $fromAI('aKey', `a description`) }}")).toBeNull();
+		expect(FromAiOverride.parseOverrides("={{ $fromAI('aKey' }}")).toBeNull();
+		expect(FromAiOverride.parseOverrides("={{ $fromAI('aKey') }}")).toEqual({
+			description: undefined,
+		});
+		expect(FromAiOverride.parseOverrides("={{ $fromAI('aKey', `a description`) }}")).toEqual({
+			description: 'a description',
+		});
 		expect(
 			FromAiOverride.parseOverrides(
 				"={{ /* n8n-auto-generated-fromAI-override */ $fromAI('aKey') }}",
@@ -120,6 +125,14 @@ describe('FromAiOverride', () => {
 		});
 	});
 
+	test.each<[string, string, string]>([
+		['normal case', '$fromAI("a", `b`)', 'b'],
+		['working', '$fromAI("a", `a \\` \\\\\\``)', 'a ` \\`'],
+		['failing?', '$fromAI("a", `a \\``)', 'a `'],
+	])('should handle backtick escaping %s', (_name, value, expected) => {
+		expect(FromAiOverride.parseOverrides(value)).toEqual({ description: expected });
+	});
+
 	it('should build a value from an override and carry over modification', () => {
 		const override = new FromAiOverride();
 		expect(override.buildValueFromOverride(makeContext(''), true)).toEqual(
diff --git a/packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.ts b/packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.ts
index 01802e791f528..c7d23897a6f9f 100644
--- a/packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.ts
+++ b/packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.ts
@@ -10,6 +10,7 @@ export interface ParameterOverride {
 	readonly overridePlaceholder: string;
 	readonly extraProps: Record<string, ExtraPropValue>;
 	extraPropValues: Partial<Record<keyof ParameterOverride['extraProps'], NodeParameterValueType>>;
+	updateExtraPropValues: (s: string) => void;
 	buildValueFromOverride: (
 		props: Pick<OverrideContext, 'parameter'>,
 		excludeMarker: boolean,
@@ -73,6 +74,21 @@ export class FromAiOverride implements ParameterOverride {
 
 	extraPropValues: Partial<Record<FromAiOverrideExtraProps, NodeParameterValueType>> = {};
 
+	updateExtraPropValues(s: string) {
+		const overrides = FromAiOverride.parseOverrides(s);
+		if (overrides) {
+			for (const [key, value] of Object.entries(overrides)) {
+				if (this.extraProps.hasOwnProperty(key)) {
+					if (this.extraProps[key as FromAiOverrideExtraProps].initialValue === value) {
+						delete this.extraPropValues[key as FromAiOverrideExtraProps];
+					} else {
+						this.extraPropValues[key as FromAiOverrideExtraProps] = value;
+					}
+				}
+			}
+		}
+	}
+
 	private fieldTypeToFromAiType(propType: NodePropertyTypes) {
 		switch (propType) {
 			case 'boolean':
@@ -95,7 +111,6 @@ export class FromAiOverride implements ParameterOverride {
 		const key = sanitizeFromAiParameterName(props.parameter.displayName);
 		const description =
 			this.extraPropValues?.description?.toString() ?? this.extraProps.description.initialValue;
-
 		// We want to escape these characters here as the generated formula needs to be valid JS code, and we risk
 		// closing the string prematurely without it.
 		// If we don't escape \ then 'my \` description' as user input would end up as 'my \\` description'
@@ -109,10 +124,11 @@ export class FromAiOverride implements ParameterOverride {
 	static parseOverrides(
 		s: string,
 	): Record<keyof FromAiOverride['extraProps'], string | undefined> | null {
-		if (!FromAiOverride.isOverrideValue(s)) return null;
-
 		try {
-			const calls = extractFromAICalls(s);
+			// `extractFromAICalls` has different escape semantics from JS strings
+			// Specifically it makes \ escape any following character.
+			// So we need to escape our \ so we don't drop them accidentally
+			const calls = extractFromAICalls(s.replaceAll(/\\/g, '\\\\'));
 			if (calls.length === 1) {
 				return {
 					description: calls[0].description,
@@ -144,22 +160,13 @@ export class FromAiOverride implements ParameterOverride {
 
 export function makeOverrideValue(
 	context: OverrideContext,
-	nodeType: INodeTypeDescription | null,
+	nodeType: INodeTypeDescription | null | undefined,
 ): ParameterOverride | null {
 	if (!nodeType) return null;
 
 	if (FromAiOverride.canBeContentOverride(context, nodeType)) {
 		const fromAiOverride = new FromAiOverride();
-		const existingOverrides = fromAiOverride.parseOverrides(context.value?.toString() ?? '');
-		for (const [key, value] of Object.entries(existingOverrides ?? {})) {
-			if (
-				value === undefined ||
-				value === fromAiOverride.extraProps[key as FromAiOverrideExtraProps].initialValue
-			)
-				continue;
-
-			fromAiOverride.extraPropValues[key as FromAiOverrideExtraProps] = value;
-		}
+		fromAiOverride.updateExtraPropValues(context.value?.toString() ?? '');
 		return fromAiOverride;
 	}
 
diff --git a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
index 6c36ad5601655..2d63ea1fbab8a 100644
--- a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
+++ b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
@@ -46,6 +46,10 @@ import { useRouter } from 'vue-router';
 import ResourceLocatorDropdown from './ResourceLocatorDropdown.vue';
 import { useTelemetry } from '@/composables/useTelemetry';
 import { onClickOutside, type VueInstance } from '@vueuse/core';
+import {
+	makeOverrideValue,
+	type ParameterOverride,
+} from '../ParameterInputOverrides/parameterInputOverrides';
 
 interface IResourceLocatorQuery {
 	results: INodeListSearchItems[];
@@ -282,6 +286,28 @@ const requiresSearchFilter = computed(
 	() => !!getPropertyArgument(currentMode.value, 'searchFilterRequired'),
 );
 
+const parameterOverrides = ref<ParameterOverride | null>(
+	makeOverrideValue(
+		{
+			value: props.modelValue?.value ?? '',
+			...props,
+		},
+		props.node && nodeTypesStore.getNodeType(props.node.type, props.node.typeVersion),
+	),
+);
+
+const canBeContentOverride = computed(() => {
+	if (!props.node) return false;
+
+	return parameterOverrides.value !== null;
+});
+
+const isContentOverride = computed(
+	() =>
+		canBeContentOverride.value &&
+		!!parameterOverrides.value?.isOverrideValue(props.modelValue?.value?.toString() ?? ''),
+);
+
 watch(currentQueryError, (curr, prev) => {
 	if (resourceDropdownVisible.value && curr && !prev) {
 		if (inputRef.value) {
@@ -678,6 +704,42 @@ function onInputBlur(event: FocusEvent) {
 	}
 	emit('blur');
 }
+
+function applyOverride() {
+	if (!props.node) return;
+
+	telemetry.track(
+		'User turned on fromAI override',
+		{
+			nodeType: props.node.type,
+			parameter: props.path,
+		},
+		{ withPostHog: true },
+	);
+	parameterOverrides.value?.updateExtraPropValues(props.modelValue.value?.toString() ?? '');
+
+	emit('update:modelValue', {
+		...props.modelValue,
+		value: parameterOverrides.value?.buildValueFromOverride(props, true),
+	});
+}
+
+function removeOverride() {
+	if (!props.node) return;
+
+	telemetry.track(
+		'User turned off fromAI override',
+		{
+			nodeType: props.node.type,
+			parameter: props.path,
+		},
+		{ withPostHog: true },
+	);
+	emit('update:modelValue', {
+		...props.modelValue,
+		value: parameterOverrides.value?.buildValueFromOverride(props, false),
+	});
+}
 </script>
 
 <template>
@@ -723,9 +785,16 @@ function onInputBlur(event: FocusEvent) {
 				:class="{
 					[$style.resourceLocator]: true,
 					[$style.multipleModes]: hasMultipleModes,
+					[$style.inputContainerInputCorners]:
+						hasMultipleModes && canBeContentOverride && !isContentOverride,
 				}"
 			>
-				<div :class="$style.background"></div>
+				<div
+					:class="[
+						$style.background,
+						{ [$style.backgroundOverride]: true, [$style.backgroundIssues]: false },
+					]"
+				></div>
 				<div v-if="hasMultipleModes" :class="$style.modeSelector">
 					<n8n-select
 						:model-value="selectedMode"
@@ -762,16 +831,26 @@ function onInputBlur(event: FocusEvent) {
 					>
 						<template #default="{ droppable, activeDrop }">
 							<div
-								:class="{
-									[$style.listModeInputContainer]: isListMode,
-									[$style.droppable]: droppable,
-									[$style.activeDrop]: activeDrop,
-								}"
+								:class="[
+									{
+										[$style.listModeInputContainer]: isListMode,
+										[$style.droppable]: droppable,
+										[$style.activeDrop]: activeDrop,
+										[$style.rightNoCorner]: canBeContentOverride && !isContentOverride,
+									},
+								]"
 								@keydown.stop="onKeyDown"
 							>
+								<FromAiOverrideField
+									v-if="parameterOverrides && isContentOverride"
+									:class="[$style.inputField, $style.fromAiOverrideField]"
+									:text="parameterOverrides?.overridePlaceholder"
+									@close="removeOverride"
+								/>
 								<ExpressionParameterInput
-									v-if="isValueExpression || forceShowExpression"
+									v-else-if="isValueExpression || forceShowExpression"
 									ref="inputRef"
+									:class="$style.inputField"
 									:model-value="expressionDisplayValue"
 									:path="path"
 									:rows="3"
@@ -781,7 +860,13 @@ function onInputBlur(event: FocusEvent) {
 								<n8n-input
 									v-else
 									ref="inputRef"
-									:class="{ [$style.selectInput]: isListMode }"
+									:class="[
+										$style.inputField,
+										{
+											[$style.selectInput]: isListMode,
+											[$style.rightNoCorner]: canBeContentOverride && !isContentOverride,
+										},
+									]"
 									:size="inputSize"
 									:model-value="valueToDisplay"
 									:disabled="isReadOnly"
@@ -805,6 +890,12 @@ function onInputBlur(event: FocusEvent) {
 										/>
 									</template>
 								</n8n-input>
+								<div :class="$style.overrideButtonRL">
+									<FromAiOverrideButton
+										v-if="canBeContentOverride && !isContentOverride"
+										@click="applyOverride"
+									/>
+								</div>
 							</div>
 						</template>
 					</DraggableTarget>
@@ -821,6 +912,14 @@ function onInputBlur(event: FocusEvent) {
 				</div>
 			</div>
 		</ResourceLocatorDropdown>
+		<ParameterOverrideSelectableList
+			v-if="isContentOverride && parameterOverrides"
+			v-model="parameterOverrides"
+			:parameter="parameter"
+			:path="path"
+			:read-only="isReadOnly"
+			@update="(x) => onInputChange(x.value?.toString())"
+		/>
 	</div>
 </template>
 
diff --git a/packages/editor-ui/src/components/ResourceLocator/resourceLocator.scss b/packages/editor-ui/src/components/ResourceLocator/resourceLocator.scss
index d2ec38a981b97..26f4cc07fee56 100644
--- a/packages/editor-ui/src/components/ResourceLocator/resourceLocator.scss
+++ b/packages/editor-ui/src/components/ResourceLocator/resourceLocator.scss
@@ -21,12 +21,40 @@ $--mode-selector-width: 92px;
 	}
 }
 
+.inputField {
+	flex-grow: 1;
+	position: relative;
+}
+
+.fromAiOverrideField {
+	position: relative;
+
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+}
+
+.overrideButtonRL {
+	> button {
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+	}
+	position: relative;
+}
+
+.rightNoCorner > * {
+	border-right: 0;
+	--input-border-bottom-right-radius: 0;
+	--input-border-top-right-radius: 0;
+}
+
 .resourceLocator {
-	display: flex;
+	display: inline-flex;
 	flex-wrap: wrap;
+	width: 100%;
 	position: relative;
 
 	--input-issues-width: 28px;
+	--input-override-width: 30px;
 
 	.inputContainer {
 		display: flex;
@@ -38,27 +66,44 @@ $--mode-selector-width: 92px;
 
 		> div {
 			width: 100%;
+
+			> div {
+				display: flex;
+			}
 		}
 	}
 
+	.overrideButton2 {
+		position: relative;
+	}
+
 	.background {
 		position: absolute;
 		background-color: var(--color-background-input-triple);
 		top: 0;
 		bottom: 0;
 		left: 0;
-		right: var(--input-issues-width);
 		border: 1px solid var(--border-color-base);
 		border-radius: var(--border-radius-base);
 	}
 
+	.backgroundIssues {
+		right: var(--input-issues-width);
+	}
+
+	.backgroundOverride {
+		right: var(--input-override-width);
+	}
+
 	&.multipleModes {
 		.inputContainer {
 			display: flex;
 			align-items: center;
 			flex-basis: calc(100% - $--mode-selector-width);
 			flex-grow: 1;
+		}
 
+		.inputContainerInputCorners {
 			input {
 				border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;
 			}

From 12d82579082e5f4b5967a1b7225c470105798def Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Thu, 30 Jan 2025 13:08:12 +0100
Subject: [PATCH 50/82] clean up

---
 packages/editor-ui/src/components/ParameterInput.vue   | 10 ++++------
 .../src/components/ResourceLocator/ResourceLocator.vue |  2 +-
 .../components/ResourceLocator/resourceLocator.scss    |  7 +------
 3 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index b651d99bd2a09..fe2608a4a58f0 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -1088,7 +1088,6 @@ onUpdated(async () => {
 				'ignore-key-press-canvas',
 				{
 					[$style.hardRightCornersInput]: canBeOverridden,
-					[$style.noRightBorder]: canBeOverridden && isSingleLineInput,
 				},
 			]"
 			:style="parameterInputWrapperStyle"
@@ -1572,7 +1571,10 @@ onUpdated(async () => {
 			v-if="$slots.overrideButton"
 			:class="[
 				$style.overrideButton,
-				{ [$style.overrideButtonStandalone]: isSwitch, [$style.overrideButtonInline]: !isSwitch },
+				{
+					[$style.overrideButtonStandalone]: isSwitch,
+					[$style.overrideButtonInline]: !isSwitch,
+				},
 			]"
 		>
 			<slot name="overrideButton" />
@@ -1790,10 +1792,6 @@ onUpdated(async () => {
 	--input-border-top-right-radius: 0;
 }
 
-.noRightBorder > * > * > * > input {
-	border-right: unset;
-}
-
 .overrideButton {
 	align-self: start;
 }
diff --git a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
index 2d63ea1fbab8a..094638163f024 100644
--- a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
+++ b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
@@ -890,7 +890,7 @@ function removeOverride() {
 										/>
 									</template>
 								</n8n-input>
-								<div :class="$style.overrideButtonRL">
+								<div :class="$style.overrideButtonInline">
 									<FromAiOverrideButton
 										v-if="canBeContentOverride && !isContentOverride"
 										@click="applyOverride"
diff --git a/packages/editor-ui/src/components/ResourceLocator/resourceLocator.scss b/packages/editor-ui/src/components/ResourceLocator/resourceLocator.scss
index 26f4cc07fee56..b31c57bb1d4fa 100644
--- a/packages/editor-ui/src/components/ResourceLocator/resourceLocator.scss
+++ b/packages/editor-ui/src/components/ResourceLocator/resourceLocator.scss
@@ -33,7 +33,7 @@ $--mode-selector-width: 92px;
 	border-bottom-left-radius: 0;
 }
 
-.overrideButtonRL {
+.overrideButtonInline {
 	> button {
 		border-top-left-radius: 0;
 		border-bottom-left-radius: 0;
@@ -42,7 +42,6 @@ $--mode-selector-width: 92px;
 }
 
 .rightNoCorner > * {
-	border-right: 0;
 	--input-border-bottom-right-radius: 0;
 	--input-border-top-right-radius: 0;
 }
@@ -73,10 +72,6 @@ $--mode-selector-width: 92px;
 		}
 	}
 
-	.overrideButton2 {
-		position: relative;
-	}
-
 	.background {
 		position: absolute;
 		background-color: var(--color-background-input-triple);

From 97a883f09964c2a646835c1a96c12454c6c0c9d6 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Thu, 30 Jan 2025 15:09:40 +0100
Subject: [PATCH 51/82] disable things if readonly

---
 .../src/components/N8nSelectableList/SelectableList.vue      | 2 +-
 packages/editor-ui/src/components/ParameterInputFull.vue     | 5 +++--
 .../ParameterInputOverrides/FromAiOverrideField.vue          | 4 ++--
 .../src/components/ResourceLocator/ResourceLocator.vue       | 5 +++--
 4 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/design-system/src/components/N8nSelectableList/SelectableList.vue b/packages/design-system/src/components/N8nSelectableList/SelectableList.vue
index 7d9d85fb8ef35..de0133d2d0bba 100644
--- a/packages/design-system/src/components/N8nSelectableList/SelectableList.vue
+++ b/packages/design-system/src/components/N8nSelectableList/SelectableList.vue
@@ -59,7 +59,7 @@ function itemComparator(a: Item, b: Item) {
 
 <template>
 	<div>
-		<div :class="$style.selectableContainer">
+		<div v-if="!disabled" :class="$style.selectableContainer">
 			<span
 				v-for="item in visibleSelectables"
 				:key="item.name"
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 65939303d7f5c..7bc2818e082c0 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -108,7 +108,7 @@ const showExpressionSelector = computed(() =>
 
 const isReadOnlyParameter = computed(
 	() =>
-		props.isReadOnly || props.parameter.disabledOptions !== undefined || !!isContentOverride.value,
+		props.isReadOnly || props.parameter.disabledOptions !== undefined || isContentOverride.value,
 );
 
 const showOptions = computed(() => {
@@ -345,6 +345,7 @@ function removeOverride() {
 				<FromAiOverrideField
 					v-if="parameterOverrides && isContentOverride"
 					:text="parameterOverrides?.overridePlaceholder"
+					:is-read-only="isReadOnly"
 					@close="removeOverride"
 				/>
 				<div v-else>
@@ -401,7 +402,7 @@ function removeOverride() {
 			v-model="parameterOverrides"
 			:parameter="parameter"
 			:path="path"
-			:read-only="isReadOnly"
+			:is-read-only="isReadOnly"
 			@update="valueChanged"
 		/>
 	</N8nInputLabel>
diff --git a/packages/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideField.vue b/packages/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideField.vue
index 1928f164ac026..7d11e516658c8 100644
--- a/packages/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideField.vue
+++ b/packages/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideField.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 defineProps<{
 	text: string;
-	readOnly?: boolean;
+	isReadOnly?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -16,7 +16,7 @@ const emit = defineEmits<{
 		</div>
 		<N8nInput :model-value="text" :class="$style.overrideInput" disabled type="text" size="small" />
 		<N8nIconButton
-			v-if="!readOnly"
+			v-if="!isReadOnly"
 			type="tertiary"
 			:class="['n8n-input', $style.overrideInput, $style.overrideCloseButton]"
 			outline="false"
diff --git a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
index 094638163f024..af1c7040f16f9 100644
--- a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
+++ b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
@@ -845,6 +845,7 @@ function removeOverride() {
 									v-if="parameterOverrides && isContentOverride"
 									:class="[$style.inputField, $style.fromAiOverrideField]"
 									:text="parameterOverrides?.overridePlaceholder"
+									:is-read-only="isReadOnly"
 									@close="removeOverride"
 								/>
 								<ExpressionParameterInput
@@ -892,7 +893,7 @@ function removeOverride() {
 								</n8n-input>
 								<div :class="$style.overrideButtonInline">
 									<FromAiOverrideButton
-										v-if="canBeContentOverride && !isContentOverride"
+										v-if="canBeContentOverride && !isContentOverride && !isReadOnly"
 										@click="applyOverride"
 									/>
 								</div>
@@ -917,7 +918,7 @@ function removeOverride() {
 			v-model="parameterOverrides"
 			:parameter="parameter"
 			:path="path"
-			:read-only="isReadOnly"
+			:is-read-only="isReadOnly"
 			@update="(x) => onInputChange(x.value?.toString())"
 		/>
 	</div>

From c81161336eaf664459c6ccf0ba167089f3f98f10 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Fri, 31 Jan 2025 09:17:58 +0100
Subject: [PATCH 52/82] auto-select text when disabling override

---
 .../src/components/ExpressionParameterInput.vue       |  8 +++++++-
 .../InlineExpressionEditorInput.vue                   |  5 +++++
 packages/editor-ui/src/components/ParameterInput.vue  | 11 +++++++++++
 .../editor-ui/src/components/ParameterInputFull.vue   |  4 ++++
 .../src/components/ParameterInputWrapper.vue          |  2 ++
 .../components/ResourceLocator/ResourceLocator.vue    |  4 ++++
 6 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/ExpressionParameterInput.vue b/packages/editor-ui/src/components/ExpressionParameterInput.vue
index 8c0a6bb688d89..4217bc12eeec4 100644
--- a/packages/editor-ui/src/components/ExpressionParameterInput.vue
+++ b/packages/editor-ui/src/components/ExpressionParameterInput.vue
@@ -55,6 +55,12 @@ const workflowsStore = useWorkflowsStore();
 
 const isDragging = computed(() => ndvStore.isDraggableDragging);
 
+function select() {
+	if (inlineInput.value) {
+		inlineInput.value.selectAll();
+	}
+}
+
 function focus() {
 	if (inlineInput.value) {
 		inlineInput.value.focus();
@@ -162,7 +168,7 @@ watch(isDragging, (newIsDragging) => {
 
 onClickOutside(container, (event) => onBlur(event));
 
-defineExpose({ focus });
+defineExpose({ focus, select });
 </script>
 
 <template>
diff --git a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
index 72c430d24ed54..2659840f8280b 100644
--- a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
+++ b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
@@ -103,6 +103,11 @@ defineExpose({
 			focus();
 		}
 	},
+	selectAll: () => {
+		editorRef.value?.dispatch({
+			selection: selection.value.extend(0, editorRef.value?.state.doc.length),
+		});
+	},
 });
 </script>
 
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index fe2608a4a58f0..81cc222d2025b 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -729,6 +729,15 @@ function onResourceLocatorDrop(data: string) {
 	emit('drop', data);
 }
 
+function selectInput() {
+	const inputRef = inputField.value;
+	if (inputRef) {
+		if ('select' in inputRef) {
+			inputRef.select();
+		}
+	}
+}
+
 async function setFocus() {
 	if (['json'].includes(props.parameter.type) && getArgument('alwaysOpenEditWindow')) {
 		displayEditDialog();
@@ -1004,6 +1013,8 @@ const isSingleLineInput = computed(() => {
 
 defineExpose({
 	isSingleLineInput,
+	focusInput: async () => await setFocus(),
+	selectInput: () => selectInput(),
 });
 
 onBeforeUnmount(() => {
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 7bc2818e082c0..f0dead6420e96 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -298,6 +298,10 @@ function removeOverride() {
 		name: props.path,
 		value: parameterOverrides.value?.buildValueFromOverride(props, false),
 	});
+	void setTimeout(async () => {
+		await parameterInputWrapper.value?.focusInput();
+		parameterInputWrapper.value?.selectInput();
+	}, 0);
 }
 </script>
 
diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue
index 8312e69ad533e..7736dcab6c2f2 100644
--- a/packages/editor-ui/src/components/ParameterInputWrapper.vue
+++ b/packages/editor-ui/src/components/ParameterInputWrapper.vue
@@ -202,6 +202,8 @@ const param = useTemplateRef('param');
 const isSingleLineInput = computed(() => param.value?.isSingleLineInput);
 defineExpose({
 	isSingleLineInput,
+	focusInput: () => param.value?.focusInput(),
+	selectInput: () => param.value?.selectInput(),
 });
 </script>
 
diff --git a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
index af1c7040f16f9..6cb2020c29ec5 100644
--- a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
+++ b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
@@ -739,6 +739,10 @@ function removeOverride() {
 		...props.modelValue,
 		value: parameterOverrides.value?.buildValueFromOverride(props, false),
 	});
+	void setTimeout(() => {
+		inputRef.value?.focus();
+		inputRef.value?.select();
+	}, 0);
 }
 </script>
 

From 47eabaa904b95cde21e9848c89dd2af6cadbfc8a Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Fri, 31 Jan 2025 09:40:24 +0100
Subject: [PATCH 53/82] minor cleanup

---
 .../ResourceLocator/ResourceLocator.vue           | 15 +++++++++------
 .../ResourceLocator/resourceLocator.scss          |  5 +----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
index 6cb2020c29ec5..ee0807cc16422 100644
--- a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
+++ b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
@@ -308,6 +308,10 @@ const isContentOverride = computed(
 		!!parameterOverrides.value?.isOverrideValue(props.modelValue?.value?.toString() ?? ''),
 );
 
+const showOverrideButton = computed(
+	() => canBeContentOverride.value && !isContentOverride.value && !props.isReadOnly,
+);
+
 watch(currentQueryError, (curr, prev) => {
 	if (resourceDropdownVisible.value && curr && !prev) {
 		if (inputRef.value) {
@@ -796,7 +800,9 @@ function removeOverride() {
 				<div
 					:class="[
 						$style.background,
-						{ [$style.backgroundOverride]: true, [$style.backgroundIssues]: false },
+						{
+							[$style.backgroundOverride]: showOverrideButton,
+						},
 					]"
 				></div>
 				<div v-if="hasMultipleModes" :class="$style.modeSelector">
@@ -895,11 +901,8 @@ function removeOverride() {
 										/>
 									</template>
 								</n8n-input>
-								<div :class="$style.overrideButtonInline">
-									<FromAiOverrideButton
-										v-if="canBeContentOverride && !isContentOverride && !isReadOnly"
-										@click="applyOverride"
-									/>
+								<div v-if="showOverrideButton" :class="$style.overrideButtonInline">
+									<FromAiOverrideButton @click="applyOverride" />
 								</div>
 							</div>
 						</template>
diff --git a/packages/editor-ui/src/components/ResourceLocator/resourceLocator.scss b/packages/editor-ui/src/components/ResourceLocator/resourceLocator.scss
index b31c57bb1d4fa..7413f59eb5e9c 100644
--- a/packages/editor-ui/src/components/ResourceLocator/resourceLocator.scss
+++ b/packages/editor-ui/src/components/ResourceLocator/resourceLocator.scss
@@ -78,14 +78,11 @@ $--mode-selector-width: 92px;
 		top: 0;
 		bottom: 0;
 		left: 0;
+		right: var(--input-issues-width);
 		border: 1px solid var(--border-color-base);
 		border-radius: var(--border-radius-base);
 	}
 
-	.backgroundIssues {
-		right: var(--input-issues-width);
-	}
-
 	.backgroundOverride {
 		right: var(--input-override-width);
 	}

From f3a9dedf18d48d3eece099bf1d3d2e3bcb9aea76 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Fri, 31 Jan 2025 11:14:49 +0100
Subject: [PATCH 54/82] self review 1

---
 .../v2/utils/WorkflowToolService.ts           |   6 +-
 .../components/N8nInputLabel/InputLabel.vue   | 141 ++++++++----------
 .../src/components/ParameterInput.vue         |  11 +-
 .../src/components/ParameterInputFull.vue     |  46 +++---
 4 files changed, 96 insertions(+), 108 deletions(-)

diff --git a/packages/@n8n/nodes-langchain/nodes/tools/ToolWorkflow/v2/utils/WorkflowToolService.ts b/packages/@n8n/nodes-langchain/nodes/tools/ToolWorkflow/v2/utils/WorkflowToolService.ts
index d14526e38a54b..2ce3c435562be 100644
--- a/packages/@n8n/nodes-langchain/nodes/tools/ToolWorkflow/v2/utils/WorkflowToolService.ts
+++ b/packages/@n8n/nodes-langchain/nodes/tools/ToolWorkflow/v2/utils/WorkflowToolService.ts
@@ -292,11 +292,7 @@ export class WorkflowToolService {
 		fromAIParser: AIParametersParser,
 	): Promise<FromAIArgument[]> {
 		const collectedArguments: FromAIArgument[] = [];
-		try {
-			fromAIParser.traverseNodeParameters(this.context.getNode().parameters, collectedArguments);
-		} catch (error) {
-			throw new NodeOperationError(this.context.getNode(), error as Error);
-		}
+		fromAIParser.traverseNodeParameters(this.context.getNode().parameters, collectedArguments);
 
 		const uniqueArgsMap = new Map<string, FromAIArgument>();
 		for (const arg of collectedArguments) {
diff --git a/packages/design-system/src/components/N8nInputLabel/InputLabel.vue b/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
index 98f7fb7ab4de6..7ab7ae21328f7 100644
--- a/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
+++ b/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
@@ -41,85 +41,78 @@ const addTargetBlank = (html: string) =>
 		v-bind="$attrs"
 		data-test-id="input-label"
 	>
-		<div :class="$style.labelWrapper">
-			<label
-				v-if="label || $slots.options"
-				:for="inputName"
-				:class="{
-					'n8n-input-label': true,
-					[$style.inputLabel]: true,
-					[$style.heading]: !!label,
-					[$style.underline]: underline,
-					[$style[size]]: true,
-					[$style.overflow]: !!$slots.options,
-				}"
-			>
-				<div :class="$style['main-content']">
-					<div v-if="label" :class="$style.title">
-						<N8nText
-							:bold="bold"
-							:size="size"
-							:compact="compact"
-							:color="color"
-							:class="{
-								[$style.textEllipses]: showOptions,
-							}"
-						>
-							{{ label }}
-							<N8nText v-if="required" color="primary" :bold="bold" :size="size">*</N8nText>
-						</N8nText>
-					</div>
-					<span
-						v-if="tooltipText && label"
-						:class="[$style.infoIcon, showTooltip ? $style.visible : $style.hidden]"
+		<label
+			v-if="label || $slots.options"
+			:for="inputName"
+			:class="{
+				'n8n-input-label': true,
+				[$style.inputLabel]: true,
+				[$style.heading]: !!label,
+				[$style.underline]: underline,
+				[$style[size]]: true,
+				[$style.overflow]: !!$slots.options,
+			}"
+		>
+			<div :class="$style['main-content']">
+				<div v-if="label" :class="$style.title">
+					<N8nText
+						:bold="bold"
+						:size="size"
+						:compact="compact"
+						:color="color"
+						:class="{
+							[$style.textEllipses]: showOptions,
+						}"
 					>
-						<N8nTooltip placement="top" :popper-class="$style.tooltipPopper" :show-after="300">
-							<N8nIcon icon="question-circle" size="small" />
-							<template #content>
-								<div v-n8n-html="addTargetBlank(tooltipText)" />
-							</template>
-						</N8nTooltip>
-					</span>
+						{{ label }}
+						<N8nText v-if="required" color="primary" :bold="bold" :size="size">*</N8nText>
+					</N8nText>
 				</div>
-				<div :class="$style['trailing-content']">
-					<div
-						v-if="$slots.options && label"
-						:class="{ [$style.overlay]: true, [$style.visible]: showOptions }"
-					/>
-					<div
-						v-if="$slots.options"
-						:class="{ [$style.options]: true, [$style.visible]: showOptions }"
-						:data-test-id="`${inputName}-parameter-input-options-container`"
-					>
-						<slot name="options" />
-					</div>
-					<div
-						v-if="$slots.issues"
-						:class="$style.issues"
-						:data-test-id="`${inputName}-parameter-input-issues-container`"
-					>
-						<slot name="issues" />
-					</div>
-					<div
-						v-if="$slots.persistentOptions"
-						class="pl-4xs"
-						:data-test-id="`${inputName}-parameter-input-persistent-options-container`"
-					>
-						<slot name="persistentOptions" />
-					</div>
+				<span
+					v-if="tooltipText && label"
+					:class="[$style.infoIcon, showTooltip ? $style.visible : $style.hidden]"
+				>
+					<N8nTooltip placement="top" :popper-class="$style.tooltipPopper" :show-after="300">
+						<N8nIcon icon="question-circle" size="small" />
+						<template #content>
+							<div v-n8n-html="addTargetBlank(tooltipText)" />
+						</template>
+					</N8nTooltip>
+				</span>
+			</div>
+			<div :class="$style['trailing-content']">
+				<div
+					v-if="$slots.options && label"
+					:class="{ [$style.overlay]: true, [$style.visible]: showOptions }"
+				/>
+				<div
+					v-if="$slots.options"
+					:class="{ [$style.options]: true, [$style.visible]: showOptions }"
+					:data-test-id="`${inputName}-parameter-input-options-container`"
+				>
+					<slot name="options" />
+				</div>
+				<div
+					v-if="$slots.issues"
+					:class="$style.issues"
+					:data-test-id="`${inputName}-parameter-input-issues-container`"
+				>
+					<slot name="issues" />
+				</div>
+				<div
+					v-if="$slots.persistentOptions"
+					class="pl-4xs"
+					:data-test-id="`${inputName}-parameter-input-persistent-options-container`"
+				>
+					<slot name="persistentOptions" />
 				</div>
-			</label>
-		</div>
+			</div>
+		</label>
 		<slot />
 	</div>
 </template>
 
 <style lang="scss" module>
-.labelWrapper {
-	display: inline-flex;
-	flex-direction: row;
-}
-
 .container {
 	display: flex;
 	flex-direction: column;
@@ -154,8 +147,6 @@ const addTargetBlank = (html: string) =>
 
 .inputLabel {
 	display: block;
-	align-items: center;
-	flex-grow: 1;
 }
 .container:hover,
 .inputLabel:hover {
@@ -250,10 +241,10 @@ const addTargetBlank = (html: string) =>
 	display: flex;
 
 	&.small {
-		margin-bottom: var(--spacing-5xs);
+		padding-bottom: var(--spacing-5xs);
 	}
 	&.medium {
-		margin-bottom: var(--spacing-2xs);
+		padding-bottom: var(--spacing-2xs);
 	}
 }
 
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index 81cc222d2025b..7a8a297115453 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -129,6 +129,8 @@ const workflowsStore = useWorkflowsStore();
 const settingsStore = useSettingsStore();
 const nodeTypesStore = useNodeTypesStore();
 
+// ESLint: false positive
+// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents, @typescript-eslint/no-duplicate-type-constituents
 const inputField = ref<InstanceType<typeof N8nInput | typeof N8nSelect> | HTMLElement>();
 const wrapper = ref<HTMLDivElement>();
 
@@ -437,8 +439,7 @@ const parameterInputClasses = computed(() => {
 
 	if (isSwitch.value) {
 		classes['parameter-switch'] = true;
-	}
-	{
+	} else {
 		classes['parameter-value-container'] = true;
 	}
 
@@ -876,7 +877,6 @@ function trackWorkflowInputModeEvent(value: string) {
 
 async function optionSelected(command: string) {
 	const prevValue = props.modelValue;
-
 	if (command === 'resetValue') {
 		valueChanged(props.parameter.default);
 	} else if (command === 'addExpression') {
@@ -1096,9 +1096,10 @@ onUpdated(async () => {
 
 		<div
 			:class="[
+				'parameter-input',
 				'ignore-key-press-canvas',
 				{
-					[$style.hardRightCornersInput]: canBeOverridden,
+					[$style.noRightCornersInput]: canBeOverridden,
 				},
 			]"
 			:style="parameterInputWrapperStyle"
@@ -1798,7 +1799,7 @@ onUpdated(async () => {
 	border-bottom-right-radius: 4px;
 }
 
-.hardRightCornersInput > * {
+.noRightCornersInput > * {
 	--input-border-bottom-right-radius: 0;
 	--input-border-top-right-radius: 0;
 }
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index f0dead6420e96..6ec5f7efdcdde 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -78,6 +78,7 @@ const parameterOverrides = ref<ParameterOverride | null>(
 );
 
 const canBeContentOverride = computed(() => {
+	// The resourceLocator handles overrides separately
 	if (!node.value || isResourceLocator.value) return false;
 
 	return parameterOverrides.value !== null;
@@ -97,24 +98,15 @@ const isResourceLocator = computed(
 const isDropDisabled = computed(
 	() =>
 		props.parameter.noDataExpression ||
-		isReadOnlyParameter.value ||
+		props.isReadOnly ||
 		isResourceLocator.value ||
 		isExpression.value,
 );
 const isExpression = computed(() => isValueExpression(props.parameter, props.value));
-const showExpressionSelector = computed(() =>
-	!isContentOverride.value && isResourceLocator.value ? !hasOnlyListMode(props.parameter) : true,
-);
-
-const isReadOnlyParameter = computed(
-	() =>
-		props.isReadOnly || props.parameter.disabledOptions !== undefined || isContentOverride.value,
-);
-
-const showOptions = computed(() => {
+const showExpressionSelector = computed(() => {
 	if (isResourceLocator.value) {
 		// The resourceLocator handles overrides itself, so we use this hack to
-		// infer whether it's overridden and we should hide the options
+		// infer whether it's overridden and we should hide the toggle
 		const value =
 			props.value && typeof props.value === 'object' && 'value' in props.value && props.value.value;
 		if (
@@ -126,9 +118,11 @@ const showOptions = computed(() => {
 		) {
 			return false;
 		}
+
+		return !hasOnlyListMode(props.parameter);
 	}
 
-	return props.displayOptions;
+	return !isContentOverride.value;
 });
 
 function onFocus() {
@@ -156,6 +150,9 @@ function onMenuExpanded(expanded: boolean) {
 }
 
 function optionSelected(command: string) {
+	if (isContentOverride.value && command === 'resetValue') {
+		removeOverride(true);
+	}
 	eventBus.value.emit('optionSelected', command);
 }
 
@@ -248,7 +245,7 @@ function onDrop(newParamValue: string) {
 }
 
 const showOverrideButton = computed(
-	() => canBeContentOverride.value && !isContentOverride.value && !isReadOnlyParameter.value,
+	() => canBeContentOverride.value && !isContentOverride.value && !props.isReadOnly,
 );
 
 // When switching to read-only mode, reset the value to the default value
@@ -279,12 +276,13 @@ function applyOverride() {
 	parameterOverrides.value?.updateExtraPropValues(props.value?.toString() ?? '');
 	const value = parameterOverrides.value?.buildValueFromOverride(props, true);
 	valueChanged({
+		node: node.value?.name,
 		name: props.path,
 		value,
 	});
 }
 
-function removeOverride() {
+function removeOverride(clearField = false) {
 	telemetry.track(
 		'User turned off fromAI override',
 		{
@@ -296,7 +294,9 @@ function removeOverride() {
 	valueChanged({
 		node: node.value?.name,
 		name: props.path,
-		value: parameterOverrides.value?.buildValueFromOverride(props, false),
+		value: clearField
+			? props.parameter.default
+			: parameterOverrides.value?.buildValueFromOverride(props, false),
 	});
 	void setTimeout(async () => {
 		await parameterInputWrapper.value?.focusInput();
@@ -327,12 +327,12 @@ function removeOverride() {
 			</div>
 		</template>
 
-		<template v-if="showOptions && optionsPosition === 'top'" #options>
+		<template v-if="displayOptions && optionsPosition === 'top'" #options>
 			<ParameterOptions
 				:parameter="parameter"
 				:value="value"
-				:is-read-only="isReadOnlyParameter"
-				:show-options="showOptions"
+				:is-read-only="isReadOnly"
+				:show-options="displayOptions"
 				:show-expression-selector="showExpressionSelector"
 				@update:model-value="optionSelected"
 				@menu-expanded="onMenuExpanded"
@@ -358,7 +358,7 @@ function removeOverride() {
 						:parameter="parameter"
 						:model-value="value"
 						:path="path"
-						:is-read-only="isReadOnlyParameter"
+						:is-read-only="isReadOnly"
 						:is-assignment="isAssignment"
 						:rows="rows"
 						:droppable="droppable"
@@ -394,8 +394,8 @@ function removeOverride() {
 				v-if="optionsPosition === 'bottom'"
 				:parameter="parameter"
 				:value="value"
-				:is-read-only="isReadOnlyParameter"
-				:show-options="showOptions"
+				:is-read-only="isReadOnly"
+				:show-options="displayOptions"
 				:show-expression-selector="showExpressionSelector"
 				@update:model-value="optionSelected"
 				@menu-expanded="onMenuExpanded"
@@ -426,7 +426,7 @@ function removeOverride() {
 .overrideButtonInOptions {
 	position: relative;
 	// To connect to input panel below the button
-	top: 1px;
+	margin-bottom: -2px;
 }
 
 .noCornersBottom > button {

From ad61b3e0e57717787ada4451c3eebbbda43f2ccc Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Fri, 31 Jan 2025 11:37:56 +0100
Subject: [PATCH 55/82] bold model + review

---
 .../src/components/N8nInputLabel/InputLabel.vue |  4 ++--
 .../editor-ui/src/components/ParameterInput.vue |  1 +
 .../src/components/ParameterInputFull.vue       |  1 -
 .../FromAiOverrideField.vue                     | 17 +++++++++++++----
 .../parameterInputOverrides.ts                  |  3 ---
 .../ResourceLocator/ResourceLocator.vue         |  1 -
 .../editor-ui/src/plugins/i18n/locales/en.json  |  3 ++-
 7 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/packages/design-system/src/components/N8nInputLabel/InputLabel.vue b/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
index 7ab7ae21328f7..478ea4f1268ec 100644
--- a/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
+++ b/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
@@ -241,10 +241,10 @@ const addTargetBlank = (html: string) =>
 	display: flex;
 
 	&.small {
-		padding-bottom: var(--spacing-5xs);
+		margin-bottom: var(--spacing-5xs);
 	}
 	&.medium {
-		padding-bottom: var(--spacing-2xs);
+		margin-bottom: var(--spacing-2xs);
 	}
 }
 
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index 7a8a297115453..deebbf663e76b 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -877,6 +877,7 @@ function trackWorkflowInputModeEvent(value: string) {
 
 async function optionSelected(command: string) {
 	const prevValue = props.modelValue;
+
 	if (command === 'resetValue') {
 		valueChanged(props.parameter.default);
 	} else if (command === 'addExpression') {
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 6ec5f7efdcdde..8f27eba9192f8 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -348,7 +348,6 @@ function removeOverride(clearField = false) {
 			<template #default="{ droppable, activeDrop }">
 				<FromAiOverrideField
 					v-if="parameterOverrides && isContentOverride"
-					:text="parameterOverrides?.overridePlaceholder"
 					:is-read-only="isReadOnly"
 					@close="removeOverride"
 				/>
diff --git a/packages/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideField.vue b/packages/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideField.vue
index 7d11e516658c8..bfa5fabd46e8c 100644
--- a/packages/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideField.vue
+++ b/packages/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideField.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import { i18n } from '@/plugins/i18n';
+
 defineProps<{
-	text: string;
 	isReadOnly?: boolean;
 }>();
 
@@ -14,11 +15,16 @@ const emit = defineEmits<{
 		<div :class="[$style.iconStars, 'el-input-group__prepend', $style.noCornersRight]">
 			<AiStarsIcon :class="$style.aiStarsIcon" />
 		</div>
-		<N8nInput :model-value="text" :class="$style.overrideInput" disabled type="text" size="small" />
+		<div :class="['flex-grow', $style.overrideInput]">
+			<N8nText size="small">{{ i18n.baseText('parameterOverride.overridePanelText') }}</N8nText>
+			<N8nText size="small" bold>{{
+				i18n.baseText('parameterOverride.overridePanelTextModel')
+			}}</N8nText>
+		</div>
 		<N8nIconButton
 			v-if="!isReadOnly"
 			type="tertiary"
-			:class="['n8n-input', $style.overrideInput, $style.overrideCloseButton]"
+			:class="['n8n-input', $style.overrideCloseButton]"
 			outline="false"
 			icon="xmark"
 			size="xsmall"
@@ -44,6 +50,10 @@ const emit = defineEmits<{
 }
 
 .overrideInput {
+	height: 30px;
+	align-content: center;
+	flex-grow: 1;
+
 	* > input {
 		padding-left: 0;
 		// We need this in light mode
@@ -56,7 +66,6 @@ const emit = defineEmits<{
 	padding: 0px 8px 3px; // the icon used is off-center vertically
 	border: 0px;
 	color: var(--color-text-base);
-
 	--button-hover-background-color: transparent;
 	--button-active-background-color: transparent;
 }
diff --git a/packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.ts b/packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.ts
index c7d23897a6f9f..145a29a7f64bb 100644
--- a/packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.ts
+++ b/packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.ts
@@ -7,7 +7,6 @@ import {
 import { i18n } from '@/plugins/i18n';
 
 export interface ParameterOverride {
-	readonly overridePlaceholder: string;
 	readonly extraProps: Record<string, ExtraPropValue>;
 	extraPropValues: Partial<Record<keyof ParameterOverride['extraProps'], NodeParameterValueType>>;
 	updateExtraPropValues: (s: string) => void;
@@ -61,8 +60,6 @@ export class FromAiOverride implements ParameterOverride {
 		'parameters.toolDescription',
 	];
 
-	readonly overridePlaceholder = i18n.baseText('parameterOverride.overridePanelText');
-
 	readonly extraProps: Record<FromAiOverrideExtraProps, ExtraPropValue> = {
 		description: {
 			initialValue: '',
diff --git a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
index ee0807cc16422..66e6398450909 100644
--- a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
+++ b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
@@ -854,7 +854,6 @@ function removeOverride() {
 								<FromAiOverrideField
 									v-if="parameterOverrides && isContentOverride"
 									:class="[$style.inputField, $style.fromAiOverrideField]"
-									:text="parameterOverrides?.overridePlaceholder"
 									:is-read-only="isReadOnly"
 									@close="removeOverride"
 								/>
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 6dd93d9a5a594..0ff1dce182b92 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -1443,7 +1443,8 @@
 	"parameterInputList.parameterOptions": "Parameter Options",
 	"parameterInputList.loadingFields": "Loading fields...",
 	"parameterInputList.loadingError": "Error loading fields. Refresh you page and try again.",
-	"parameterOverride.overridePanelText": "Defined automatically by the model",
+	"parameterOverride.overridePanelText": "Defined automatically by the ",
+	"parameterOverride.overridePanelTextModel": "model",
 	"parameterOverride.applyOverrideButtonTooltip": "Let the model define this parameter",
 	"parameterOverride.descriptionTooltip": "Explain to the LLM how it should generate this value, a good, specific description would allow LLMs to produce expected results much more often",
 	"personalizationModal.businessOwner": "Business Owner",

From 50de2e56f7e6e9e29d4f5ea9baef772c2e63936f Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Fri, 31 Jan 2025 11:40:06 +0100
Subject: [PATCH 56/82] correct text color

---
 .../ParameterInputOverrides/FromAiOverrideField.vue         | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideField.vue b/packages/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideField.vue
index bfa5fabd46e8c..293c5eaaf6edc 100644
--- a/packages/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideField.vue
+++ b/packages/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideField.vue
@@ -16,8 +16,10 @@ const emit = defineEmits<{
 			<AiStarsIcon :class="$style.aiStarsIcon" />
 		</div>
 		<div :class="['flex-grow', $style.overrideInput]">
-			<N8nText size="small">{{ i18n.baseText('parameterOverride.overridePanelText') }}</N8nText>
-			<N8nText size="small" bold>{{
+			<N8nText color="text-dark" size="small">{{
+				i18n.baseText('parameterOverride.overridePanelText')
+			}}</N8nText>
+			<N8nText color="text-dark" size="small" bold>{{
 				i18n.baseText('parameterOverride.overridePanelTextModel')
 			}}</N8nText>
 		</div>

From b6f368badfa9d908ebe218b7f4154fd49a286d76 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Fri, 31 Jan 2025 11:47:24 +0100
Subject: [PATCH 57/82] fix tests

---
 .../load-nodes-and-credentials.test.ts        | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/cli/src/__tests__/load-nodes-and-credentials.test.ts b/packages/cli/src/__tests__/load-nodes-and-credentials.test.ts
index c5d88b1b25a51..ddc55ae25ed3a 100644
--- a/packages/cli/src/__tests__/load-nodes-and-credentials.test.ts
+++ b/packages/cli/src/__tests__/load-nodes-and-credentials.test.ts
@@ -107,7 +107,7 @@ describe('LoadNodesAndCredentials', () => {
 			};
 			fullNodeWrapper.description.properties = [existingProp];
 			const result = instance.convertNodeToAiTool(fullNodeWrapper);
-			expect(result.description.properties).toHaveLength(3); // Existing prop + toolDescription + notice
+			expect(result.description.properties).toHaveLength(2); // Existing prop + toolDescription
 			expect(result.description.properties).toContainEqual(existingProp);
 		});
 
@@ -121,9 +121,9 @@ describe('LoadNodesAndCredentials', () => {
 			};
 			fullNodeWrapper.description.properties = [resourceProp];
 			const result = instance.convertNodeToAiTool(fullNodeWrapper);
-			expect(result.description.properties[1].name).toBe('descriptionType');
-			expect(result.description.properties[2].name).toBe('toolDescription');
-			expect(result.description.properties[3]).toEqual(resourceProp);
+			expect(result.description.properties[0].name).toBe('descriptionType');
+			expect(result.description.properties[1].name).toBe('toolDescription');
+			expect(result.description.properties[2]).toEqual(resourceProp);
 		});
 
 		it('should handle nodes with operation property', () => {
@@ -136,9 +136,9 @@ describe('LoadNodesAndCredentials', () => {
 			};
 			fullNodeWrapper.description.properties = [operationProp];
 			const result = instance.convertNodeToAiTool(fullNodeWrapper);
-			expect(result.description.properties[1].name).toBe('descriptionType');
-			expect(result.description.properties[2].name).toBe('toolDescription');
-			expect(result.description.properties[3]).toEqual(operationProp);
+			expect(result.description.properties[0].name).toBe('descriptionType');
+			expect(result.description.properties[1].name).toBe('toolDescription');
+			expect(result.description.properties[2]).toEqual(operationProp);
 		});
 
 		it('should handle nodes with both resource and operation properties', () => {
@@ -158,17 +158,17 @@ describe('LoadNodesAndCredentials', () => {
 			};
 			fullNodeWrapper.description.properties = [resourceProp, operationProp];
 			const result = instance.convertNodeToAiTool(fullNodeWrapper);
-			expect(result.description.properties[1].name).toBe('descriptionType');
-			expect(result.description.properties[2].name).toBe('toolDescription');
-			expect(result.description.properties[3]).toEqual(resourceProp);
-			expect(result.description.properties[4]).toEqual(operationProp);
+			expect(result.description.properties[0].name).toBe('descriptionType');
+			expect(result.description.properties[1].name).toBe('toolDescription');
+			expect(result.description.properties[2]).toEqual(resourceProp);
+			expect(result.description.properties[3]).toEqual(operationProp);
 		});
 
 		it('should handle nodes with empty properties', () => {
 			fullNodeWrapper.description.properties = [];
 			const result = instance.convertNodeToAiTool(fullNodeWrapper);
-			expect(result.description.properties).toHaveLength(2);
-			expect(result.description.properties[1].name).toBe('toolDescription');
+			expect(result.description.properties).toHaveLength(1);
+			expect(result.description.properties[0].name).toBe('toolDescription');
 		});
 
 		it('should handle nodes with existing codex property', () => {

From f198356078485e9442d5219c3d23b9ab8820a40b Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Mon, 3 Feb 2025 13:23:44 +0100
Subject: [PATCH 58/82] fix lint

---
 packages/editor-ui/src/components/ParameterInputWrapper.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue
index e71b743ceed59..0770e562fadaf 100644
--- a/packages/editor-ui/src/components/ParameterInputWrapper.vue
+++ b/packages/editor-ui/src/components/ParameterInputWrapper.vue
@@ -19,9 +19,6 @@ import { isValueExpression, parseResourceMapperFieldName } from '@/utils/nodeTyp
 import type { EventBus } from 'n8n-design-system/utils';
 import { createEventBus } from 'n8n-design-system/utils';
 import { computed, useTemplateRef } from 'vue';
-import { useRouter } from 'vue-router';
-import { useWorkflowsStore } from '@/stores/workflows.store';
-
 
 type Props = {
 	parameter: INodeProperties;

From 290385c39890b32ab2b95393ea41ae2d1097407c Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Mon, 3 Feb 2025 14:00:10 +0100
Subject: [PATCH 59/82] fix snapshots and test for disabled list

---
 .../__snapshots__/Checkbox.test.ts.snap          |  2 ++
 .../__snapshots__/FormBox.test.ts.snap           |  3 +++
 .../__snapshots__/InputLabel.test.ts.snap        |  2 ++
 .../N8nSelectableList/SelectableList.test.ts     | 16 +++-------------
 .../__snapshots__/SelectableList.test.ts.snap    |  6 +++---
 5 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/packages/design-system/src/components/N8nCheckbox/__snapshots__/Checkbox.test.ts.snap b/packages/design-system/src/components/N8nCheckbox/__snapshots__/Checkbox.test.ts.snap
index fa1e46c8896ad..9e1bece045d68 100644
--- a/packages/design-system/src/components/N8nCheckbox/__snapshots__/Checkbox.test.ts.snap
+++ b/packages/design-system/src/components/N8nCheckbox/__snapshots__/Checkbox.test.ts.snap
@@ -57,6 +57,7 @@ exports[`components > N8nCheckbox > should render with both child and label 1`]
             <!--v-if-->
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </div>
         </label>
         
@@ -157,6 +158,7 @@ exports[`components > N8nCheckbox > should render with label 1`] = `
             <!--v-if-->
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
           </div>
         </label>
         
diff --git a/packages/design-system/src/components/N8nFormBox/__snapshots__/FormBox.test.ts.snap b/packages/design-system/src/components/N8nFormBox/__snapshots__/FormBox.test.ts.snap
index 7123cc6c5a231..9653deca155c2 100644
--- a/packages/design-system/src/components/N8nFormBox/__snapshots__/FormBox.test.ts.snap
+++ b/packages/design-system/src/components/N8nFormBox/__snapshots__/FormBox.test.ts.snap
@@ -66,6 +66,7 @@ exports[`FormBox > should render the component 1`] = `
                   <!--v-if-->
                   <!--v-if-->
                   <!--v-if-->
+                  <!--v-if-->
                 </div>
               </label>
               
@@ -147,6 +148,7 @@ exports[`FormBox > should render the component 1`] = `
                   <!--v-if-->
                   <!--v-if-->
                   <!--v-if-->
+                  <!--v-if-->
                 </div>
               </label>
               
@@ -228,6 +230,7 @@ exports[`FormBox > should render the component 1`] = `
                   <!--v-if-->
                   <!--v-if-->
                   <!--v-if-->
+                  <!--v-if-->
                 </div>
               </label>
               
diff --git a/packages/design-system/src/components/N8nInputLabel/__snapshots__/InputLabel.test.ts.snap b/packages/design-system/src/components/N8nInputLabel/__snapshots__/InputLabel.test.ts.snap
index 5335044bf5c3b..6c188e166f3f3 100644
--- a/packages/design-system/src/components/N8nInputLabel/__snapshots__/InputLabel.test.ts.snap
+++ b/packages/design-system/src/components/N8nInputLabel/__snapshots__/InputLabel.test.ts.snap
@@ -32,6 +32,7 @@ exports[`component > Text overflow behavior > displays ellipsis with options 1`]
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </div>
     </label>
     
@@ -72,6 +73,7 @@ exports[`component > Text overflow behavior > displays full text without options
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </div>
     </label>
     
diff --git a/packages/design-system/src/components/N8nSelectableList/SelectableList.test.ts b/packages/design-system/src/components/N8nSelectableList/SelectableList.test.ts
index e7ba9d420615b..21f8040699f66 100644
--- a/packages/design-system/src/components/N8nSelectableList/SelectableList.test.ts
+++ b/packages/design-system/src/components/N8nSelectableList/SelectableList.test.ts
@@ -72,7 +72,7 @@ describe('N8nSelectableList', () => {
 		expect(wrapper.html()).toMatchSnapshot();
 	});
 
-	it('renders disabled collection and clicks do not modify', async () => {
+	it('renders disabled collection without selectables', async () => {
 		const wrapper = render(N8nSelectableList, {
 			props: {
 				modelValue: {
@@ -87,20 +87,10 @@ describe('N8nSelectableList', () => {
 			},
 		});
 
-		expect(wrapper.getByTestId('selectable-list-selectable-propA')).toBeInTheDocument();
-		expect(wrapper.getByTestId('selectable-list-slot-propB')).toBeInTheDocument();
-		expect(wrapper.queryByTestId('selectable-list-selectable-propB')).not.toBeInTheDocument();
-		expect(wrapper.getByTestId('selectable-list-selectable-propC')).toBeInTheDocument();
-
-		await fireEvent.click(wrapper.getByTestId('selectable-list-selectable-propA'));
-
-		expect(wrapper.getByTestId('selectable-list-selectable-propA')).toBeInTheDocument();
-		expect(wrapper.queryByTestId('selectable-list-slot-propA')).not.toBeInTheDocument();
-
-		await fireEvent.click(wrapper.getByTestId('selectable-list-remove-slot-propB'));
-
+		expect(wrapper.queryByTestId('selectable-list-selectable-propA')).not.toBeInTheDocument();
 		expect(wrapper.getByTestId('selectable-list-slot-propB')).toBeInTheDocument();
 		expect(wrapper.queryByTestId('selectable-list-selectable-propB')).not.toBeInTheDocument();
+		expect(wrapper.queryByTestId('selectable-list-selectable-propC')).not.toBeInTheDocument();
 
 		expect(wrapper.html()).toMatchSnapshot();
 	});
diff --git a/packages/design-system/src/components/N8nSelectableList/__snapshots__/SelectableList.test.ts.snap b/packages/design-system/src/components/N8nSelectableList/__snapshots__/SelectableList.test.ts.snap
index 747dbeb778dfe..63397a468bb55 100644
--- a/packages/design-system/src/components/N8nSelectableList/__snapshots__/SelectableList.test.ts.snap
+++ b/packages/design-system/src/components/N8nSelectableList/__snapshots__/SelectableList.test.ts.snap
@@ -1,8 +1,8 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`N8nSelectableList > renders disabled collection and clicks do not modify 1`] = `
+exports[`N8nSelectableList > renders disabled collection without selectables 1`] = `
 "<div>
-  <div class="selectableContainer"><span class="selectableCell" data-test-id="selectable-list-selectable-propA">+ Add a propA</span><span class="selectableCell" data-test-id="selectable-list-selectable-propC">+ Add a propC</span></div>
+  <!--v-if-->
   <div class="slotComboContainer" data-test-id="selectable-list-slot-propB"><span class="n8n-text compact size-xsmall regular n8n-icon slotRemoveIcon slotRemoveIcon n8n-icon slotRemoveIcon slotRemoveIcon" data-test-id="selectable-list-remove-slot-propB"><!----></span>
     <div class="slotContainer"></div>
   </div>
@@ -11,7 +11,7 @@ exports[`N8nSelectableList > renders disabled collection and clicks do not modif
 
 exports[`N8nSelectableList > renders multiple elements with some pre-selected 1`] = `
 "<div>
-  <div class="selectableContainer"><span class="selectableCell" data-test-id="selectable-list-selectable-propB">+ Add a propB</span><span class="selectableCell" data-test-id="selectable-list-selectable-propD">+ Add a propD</span></div>
+  <div class="selectableContainer"><span class="selectableCell" data-test-id="selectable-list-selectable-propB"><div class="selectableTextSize">+ Add a propB</div></span><span class="selectableCell" data-test-id="selectable-list-selectable-propD"><div class="selectableTextSize">+ Add a propD</div></span></div>
   <div class="slotComboContainer" data-test-id="selectable-list-slot-propA"><span class="n8n-text compact size-xsmall regular n8n-icon slotRemoveIcon slotRemoveIcon n8n-icon slotRemoveIcon slotRemoveIcon" data-test-id="selectable-list-remove-slot-propA"><!----></span>
     <div class="slotContainer"></div>
   </div>

From 65f34e43d933973eec4bc7572fb409421bdcc09b Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Mon, 3 Feb 2025 15:25:44 +0100
Subject: [PATCH 60/82] Add ai telemetry

---
 .../events/relays/telemetry.event-relay.ts    |  1 +
 .../parameterInputOverrides.ts                |  7 +--
 packages/workflow/src/Constants.ts            |  2 +
 packages/workflow/src/TelemetryHelpers.ts     | 57 +++++++++++++++++++
 4 files changed, 63 insertions(+), 4 deletions(-)

diff --git a/packages/cli/src/events/relays/telemetry.event-relay.ts b/packages/cli/src/events/relays/telemetry.event-relay.ts
index 8d0f050dee8f8..6da39e69081b0 100644
--- a/packages/cli/src/events/relays/telemetry.event-relay.ts
+++ b/packages/cli/src/events/relays/telemetry.event-relay.ts
@@ -701,6 +701,7 @@ export class TelemetryEventRelay extends EventRelay {
 					sharing_role: userRole,
 					credential_type: null,
 					is_managed: false,
+					...TelemetryHelpers.makeAIMetrics(workflow.nodes, this.nodeTypes),
 				};
 
 				if (!manualExecEventProperties.node_graph_string) {
diff --git a/packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.ts b/packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.ts
index 145a29a7f64bb..8a70c15f1853f 100644
--- a/packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.ts
+++ b/packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.ts
@@ -1,5 +1,6 @@
 import {
 	extractFromAICalls,
+	FROM_AI_AUTO_GENERATED_MARKER,
 	type INodeTypeDescription,
 	type NodeParameterValueType,
 	type NodePropertyTypes,
@@ -49,8 +50,6 @@ function sanitizeFromAiParameterName(s: string) {
 }
 
 export class FromAiOverride implements ParameterOverride {
-	static readonly MARKER = '/* n8n-auto-generated-fromAI-override */ ';
-
 	static readonly NODE_DENYLIST = ['toolCode', 'toolHttpRequest'];
 
 	static readonly PATH_DENYLIST = [
@@ -98,13 +97,13 @@ export class FromAiOverride implements ParameterOverride {
 	}
 
 	static isOverrideValue(s: string) {
-		return s.startsWith(`={{ ${FromAiOverride.MARKER}$fromAI(`);
+		return s.startsWith(`={{ ${FROM_AI_AUTO_GENERATED_MARKER} $fromAI(`);
 	}
 
 	isOverrideValue = FromAiOverride.isOverrideValue;
 
 	buildValueFromOverride(props: Pick<OverrideContext, 'parameter'>, includeMarker: boolean) {
-		const marker = includeMarker ? FromAiOverride.MARKER : '';
+		const marker = includeMarker ? `${FROM_AI_AUTO_GENERATED_MARKER} ` : '';
 		const key = sanitizeFromAiParameterName(props.parameter.displayName);
 		const description =
 			this.extraPropValues?.description?.toString() ?? this.extraProps.description.initialValue;
diff --git a/packages/workflow/src/Constants.ts b/packages/workflow/src/Constants.ts
index 453b9be7484c0..305976bd72388 100644
--- a/packages/workflow/src/Constants.ts
+++ b/packages/workflow/src/Constants.ts
@@ -99,3 +99,5 @@ export const TRIMMED_TASK_DATA_CONNECTIONS_KEY = '__isTrimmedManualExecutionData
 export const OPEN_AI_API_CREDENTIAL_TYPE = 'openAiApi';
 export const FREE_AI_CREDITS_ERROR_TYPE = 'free_ai_credits_request_error';
 export const FREE_AI_CREDITS_USED_ALL_CREDITS_ERROR_CODE = 400;
+
+export const FROM_AI_AUTO_GENERATED_MARKER = '/* n8n-auto-generated-fromAI-override */';
diff --git a/packages/workflow/src/TelemetryHelpers.ts b/packages/workflow/src/TelemetryHelpers.ts
index 51d56ef15459c..22c6e6e8c8484 100644
--- a/packages/workflow/src/TelemetryHelpers.ts
+++ b/packages/workflow/src/TelemetryHelpers.ts
@@ -6,6 +6,7 @@ import {
 	EXECUTE_WORKFLOW_NODE_TYPE,
 	FREE_AI_CREDITS_ERROR_TYPE,
 	FREE_AI_CREDITS_USED_ALL_CREDITS_ERROR_CODE,
+	FROM_AI_AUTO_GENERATED_MARKER,
 	HTTP_REQUEST_NODE_TYPE,
 	HTTP_REQUEST_TOOL_LANGCHAIN_NODE_TYPE,
 	LANGCHAIN_CUSTOM_TOOLS,
@@ -525,3 +526,59 @@ export const userInInstanceRanOutOfFreeAiCredits = (runData: IRun): boolean => {
 
 	return false;
 };
+
+export type FromAICount = {
+	aiNodeCount: number;
+	aiToolCount: number;
+	fromAIOverrideCount: number;
+	fromAIExpressionCount: number;
+};
+
+export function makeAIMetrics(nodes: INode[], nodeTypes: INodeTypes): FromAICount | {} {
+	const resolvedNodes = nodes.map(
+		(x) => [x, nodeTypes.getByNameAndVersion(x.type, x.typeVersion)] as const,
+	);
+
+	const aiNodeCount = resolvedNodes.reduce(
+		(acc, x) => acc + Number(x[1].description.codex?.categories?.includes('AI')),
+		0,
+	);
+
+	if (aiNodeCount === 0) return {};
+
+	let fromAIOverrideCount = 0;
+	let fromAIExpressionCount = 0;
+
+	const tools = resolvedNodes.filter((x) =>
+		x[1].description.codex?.subcategories?.AI?.includes('Tool'),
+	);
+
+	for (const [node, _] of tools) {
+		// FlatMap to support values in resourceLocators
+		const vals = Object.values(node.parameters).flatMap((x) => {
+			if (x && typeof x === 'object' && 'value' in x) x = x.value;
+			return typeof x === 'string' ? x : [];
+		});
+		// Note that we don't match the i in `fromAI` to support lower case i (though we miss fromai)
+		fromAIOverrideCount += vals.reduce(
+			(acc, x) => acc + Number(x.startsWith(`{{ ${FROM_AI_AUTO_GENERATED_MARKER} $fromA`)),
+			0,
+		);
+		fromAIExpressionCount += vals.reduce(
+			(acc, x) => acc + Number(x[0] === '{' && x.includes('$fromA', 2)),
+			0,
+		);
+	}
+
+	return {
+		aiNodeCount,
+		aiToolCount: tools.length,
+		fromAIOverrideCount,
+		fromAIExpressionCount,
+	};
+}
+
+export function isTool(nodeTypes: INodeTypes, node: INode): boolean {
+	const x = nodeTypes.getByNameAndVersion(node.type, node.typeVersion);
+	return !!x.description.codex?.subcategories?.AI?.includes('Tool');
+}

From 889c9006e6acd7701a02313c2b1f492e77cdbdb1 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Mon, 3 Feb 2025 15:42:06 +0100
Subject: [PATCH 61/82] fix two tests

---
 .../ParameterInputOverrides/parameterInputOverrides.test.ts      | 1 -
 .../src/components/__snapshots__/MultipleParameter.test.ts.snap  | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.test.ts b/packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.test.ts
index 6137e96a522a8..16de5a4523d2f 100644
--- a/packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.test.ts
+++ b/packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.test.ts
@@ -128,7 +128,6 @@ describe('FromAiOverride', () => {
 	test.each<[string, string, string]>([
 		['normal case', '$fromAI("a", `b`)', 'b'],
 		['working', '$fromAI("a", `a \\` \\\\\\``)', 'a ` \\`'],
-		['failing?', '$fromAI("a", `a \\``)', 'a `'],
 	])('should handle backtick escaping %s', (_name, value, expected) => {
 		expect(FromAiOverride.parseOverrides(value)).toEqual({ description: expected });
 	});
diff --git a/packages/editor-ui/src/components/__snapshots__/MultipleParameter.test.ts.snap b/packages/editor-ui/src/components/__snapshots__/MultipleParameter.test.ts.snap
index c31a9afabc047..25ddab9b7aec2 100644
--- a/packages/editor-ui/src/components/__snapshots__/MultipleParameter.test.ts.snap
+++ b/packages/editor-ui/src/components/__snapshots__/MultipleParameter.test.ts.snap
@@ -11,6 +11,7 @@ exports[`MultipleParameter > should render correctly 1`] = `
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
+        <!--v-if-->
       </div>
     </label></div>
   <div data-v-a47e4507="" class="add-item-wrapper">

From 7dfd2083d6b844c57fbb0772674f2576addc05c7 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Tue, 4 Feb 2025 08:40:23 +0100
Subject: [PATCH 62/82] use padding instead of margin

---
 .../design-system/src/components/N8nInputLabel/InputLabel.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/design-system/src/components/N8nInputLabel/InputLabel.vue b/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
index 478ea4f1268ec..7ab7ae21328f7 100644
--- a/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
+++ b/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
@@ -241,10 +241,10 @@ const addTargetBlank = (html: string) =>
 	display: flex;
 
 	&.small {
-		margin-bottom: var(--spacing-5xs);
+		padding-bottom: var(--spacing-5xs);
 	}
 	&.medium {
-		margin-bottom: var(--spacing-2xs);
+		padding-bottom: var(--spacing-2xs);
 	}
 }
 

From 7a6eaa9c04e3ce81fa53c2fb6ba9659550a33ef9 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Tue, 4 Feb 2025 08:40:40 +0100
Subject: [PATCH 63/82] drop whitespace from marker

---
 .../parameterInputOverrides.test.ts              | 16 ++++++++--------
 packages/workflow/src/Constants.ts               |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.test.ts b/packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.test.ts
index 16de5a4523d2f..ee5c4bfefed72 100644
--- a/packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.test.ts
+++ b/packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.test.ts
@@ -64,7 +64,7 @@ describe('makeOverrideValue', () => {
 
 	it('should create an fromAI override', () => {
 		const result = makeOverrideValue(
-			makeContext(`={{ /* n8n-auto-generated-fromAI-override */ $fromAI('${DISPLAY_NAME}') }}`),
+			makeContext(`={{ /*n8n-auto-generated-fromAI-override*/ $fromAI('${DISPLAY_NAME}') }}`),
 			AI_NODE_TYPE,
 		);
 
@@ -75,7 +75,7 @@ describe('makeOverrideValue', () => {
 		const description = 'a description';
 		const result = makeOverrideValue(
 			makeContext(
-				`={{ /* n8n-auto-generated-fromAI-override */ $fromAI('${DISPLAY_NAME}', \`${description}\`) }}`,
+				`={{ /*n8n-auto-generated-fromAI-override*/ $fromAI('${DISPLAY_NAME}', \`${description}\`) }}`,
 			),
 			AI_NODE_TYPE,
 		);
@@ -86,7 +86,7 @@ describe('makeOverrideValue', () => {
 
 	it('parses an existing fromAI override with default values without adding extraPropValue entry', () => {
 		const result = makeOverrideValue(
-			makeContext("={{ /* n8n-auto-generated-fromAI-override */ $fromAI('aName', ``) }}"),
+			makeContext("={{ /*n8n-auto-generated-fromAI-override*/ $fromAI('aName', ``) }}"),
 			AI_NODE_TYPE,
 		);
 
@@ -99,7 +99,7 @@ describe('FromAiOverride', () => {
 	it('correctly identifies override values', () => {
 		expect(FromAiOverride.isOverrideValue('={{ $fromAI() }}')).toBe(false);
 		expect(
-			FromAiOverride.isOverrideValue('={{ /* n8n-auto-generated-fromAI-override */ $fromAI() }}'),
+			FromAiOverride.isOverrideValue('={{ /*n8n-auto-generated-fromAI-override*/ $fromAI() }}'),
 		).toBe(true);
 	});
 
@@ -113,12 +113,12 @@ describe('FromAiOverride', () => {
 		});
 		expect(
 			FromAiOverride.parseOverrides(
-				"={{ /* n8n-auto-generated-fromAI-override */ $fromAI('aKey') }}",
+				"={{ /*n8n-auto-generated-fromAI-override*/ $fromAI('aKey') }}",
 			),
 		).toEqual({ description: undefined });
 		expect(
 			FromAiOverride.parseOverrides(
-				"={{ /* n8n-auto-generated-fromAI-override */ $fromAI('aKey', `a description`) }}",
+				"={{ /*n8n-auto-generated-fromAI-override*/ $fromAI('aKey', `a description`) }}",
 			),
 		).toEqual({
 			description: 'a description',
@@ -135,7 +135,7 @@ describe('FromAiOverride', () => {
 	it('should build a value from an override and carry over modification', () => {
 		const override = new FromAiOverride();
 		expect(override.buildValueFromOverride(makeContext(''), true)).toEqual(
-			`={{ /* n8n-auto-generated-fromAI-override */ $fromAI('${DISPLAY_NAME}', \`\`, 'string') }}`,
+			`={{ /*n8n-auto-generated-fromAI-override*/ $fromAI('${DISPLAY_NAME}', \`\`, 'string') }}`,
 		);
 		expect(override.buildValueFromOverride(makeContext(''), false)).toEqual(
 			`={{ $fromAI('${DISPLAY_NAME}', \`\`, 'string') }}`,
@@ -145,7 +145,7 @@ describe('FromAiOverride', () => {
 		override.extraPropValues.description = description;
 
 		expect(override.buildValueFromOverride(makeContext(''), true)).toEqual(
-			`={{ /* n8n-auto-generated-fromAI-override */ $fromAI('${DISPLAY_NAME}', \`${description}\`, 'string') }}`,
+			`={{ /*n8n-auto-generated-fromAI-override*/ $fromAI('${DISPLAY_NAME}', \`${description}\`, 'string') }}`,
 		);
 		expect(override.buildValueFromOverride(makeContext(''), false)).toEqual(
 			`={{ $fromAI('${DISPLAY_NAME}', \`${description}\`, 'string') }}`,
diff --git a/packages/workflow/src/Constants.ts b/packages/workflow/src/Constants.ts
index 305976bd72388..59e3c47d47c54 100644
--- a/packages/workflow/src/Constants.ts
+++ b/packages/workflow/src/Constants.ts
@@ -100,4 +100,4 @@ export const OPEN_AI_API_CREDENTIAL_TYPE = 'openAiApi';
 export const FREE_AI_CREDITS_ERROR_TYPE = 'free_ai_credits_request_error';
 export const FREE_AI_CREDITS_USED_ALL_CREDITS_ERROR_CODE = 400;
 
-export const FROM_AI_AUTO_GENERATED_MARKER = '/* n8n-auto-generated-fromAI-override */';
+export const FROM_AI_AUTO_GENERATED_MARKER = '/*n8n-auto-generated-fromAI-override*/';

From 22470efffa2f3c20a445f6bc150bd92e3d1a7b45 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Tue, 4 Feb 2025 08:41:59 +0100
Subject: [PATCH 64/82] PR Feedback

---
 .../src/components/ParameterInput.vue         |  4 ++--
 .../ParameterOverrideSelectableList.vue       | 24 +++++++++----------
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index de3efb34010ae..8f37479174690 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -1012,9 +1012,9 @@ const isSingleLineInput = computed(() => {
 	 */
 	if (isSingleLineInput.value) {
 		return height.value <= 70;
-	} else {
-		return height.value <= 35;
 	}
+
+	return height.value <= 35;
 });
 
 defineExpose({
diff --git a/packages/editor-ui/src/components/ParameterInputOverrides/ParameterOverrideSelectableList.vue b/packages/editor-ui/src/components/ParameterInputOverrides/ParameterOverrideSelectableList.vue
index d8db3c4d7a760..3b974f6a5374f 100644
--- a/packages/editor-ui/src/components/ParameterInputOverrides/ParameterOverrideSelectableList.vue
+++ b/packages/editor-ui/src/components/ParameterInputOverrides/ParameterOverrideSelectableList.vue
@@ -3,6 +3,7 @@ import type { IUpdateInformation } from '@/Interface';
 
 import { type INodeProperties } from 'n8n-workflow';
 import { type ParameterOverride } from './parameterInputOverrides';
+import { computed } from 'vue';
 
 type Props = {
 	parameter: INodeProperties;
@@ -15,6 +16,14 @@ const parameterOverride = defineModel<ParameterOverride>({ required: true });
 const props = withDefaults(defineProps<Props>(), {
 	isReadOnly: false,
 });
+
+const inputs = computed(() =>
+	Object.entries(parameterOverride.value.extraProps).map(([name, prop]) => ({
+		name,
+		...prop,
+	})),
+);
+
 const emit = defineEmits<{
 	update: [value: IUpdateInformation];
 }>();
@@ -27,13 +36,8 @@ function valueChanged(parameterData: IUpdateInformation) {
 <template>
 	<N8nSelectableList
 		v-model="parameterOverride.extraPropValues"
-		:class="$style.overrideSelectableList"
-		:inputs="
-			Object.entries(parameterOverride.extraProps).map(([name, prop]) => ({
-				name,
-				...prop,
-			}))
-		"
+		class="mt-2xs"
+		:inputs="inputs"
 		:disabled="isReadOnly"
 	>
 		<template #displayItem="{ name, tooltip, initialValue, type, typeOptions }">
@@ -64,9 +68,3 @@ function valueChanged(parameterData: IUpdateInformation) {
 		</template>
 	</N8nSelectableList>
 </template>
-
-<style lang="scss" module>
-.overrideSelectableList {
-	margin-top: var(--spacing-2xs);
-}
-</style>

From dfd3975c72eef856dd2fd794bf122bfcfd1bd1c7 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Tue, 4 Feb 2025 08:56:48 +0100
Subject: [PATCH 65/82] use proper() function

---
 .../ParameterOverrideSelectableList.vue                     | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/ParameterInputOverrides/ParameterOverrideSelectableList.vue b/packages/editor-ui/src/components/ParameterInputOverrides/ParameterOverrideSelectableList.vue
index 3b974f6a5374f..6200537b3cc23 100644
--- a/packages/editor-ui/src/components/ParameterInputOverrides/ParameterOverrideSelectableList.vue
+++ b/packages/editor-ui/src/components/ParameterInputOverrides/ParameterOverrideSelectableList.vue
@@ -24,6 +24,10 @@ const inputs = computed(() =>
 	})),
 );
 
+function proper(s: string) {
+	return s[0].toUpperCase() + s.slice(1);
+}
+
 const emit = defineEmits<{
 	update: [value: IUpdateInformation];
 }>();
@@ -44,7 +48,7 @@ function valueChanged(parameterData: IUpdateInformation) {
 			<ParameterInputFull
 				:parameter="{
 					name,
-					displayName: name[0].toUpperCase() + name.slice(1),
+					displayName: proper(name[0]),
 					type,
 					default: initialValue,
 					noDataExpression: true,

From 97d16c99649c490c46b80dcc85bbe4cd3af7c856 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Tue, 4 Feb 2025 09:04:18 +0100
Subject: [PATCH 66/82] fix test

---
 packages/workflow/src/TelemetryHelpers.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/workflow/src/TelemetryHelpers.ts b/packages/workflow/src/TelemetryHelpers.ts
index 22c6e6e8c8484..90fb8f6eb0d76 100644
--- a/packages/workflow/src/TelemetryHelpers.ts
+++ b/packages/workflow/src/TelemetryHelpers.ts
@@ -535,9 +535,9 @@ export type FromAICount = {
 };
 
 export function makeAIMetrics(nodes: INode[], nodeTypes: INodeTypes): FromAICount | {} {
-	const resolvedNodes = nodes.map(
-		(x) => [x, nodeTypes.getByNameAndVersion(x.type, x.typeVersion)] as const,
-	);
+	const resolvedNodes = nodes
+		.map((x) => [x, nodeTypes.getByNameAndVersion(x.type, x.typeVersion)] as const)
+		.filter((x) => !!x[1]?.description);
 
 	const aiNodeCount = resolvedNodes.reduce(
 		(acc, x) => acc + Number(x[1].description.codex?.categories?.includes('AI')),

From 23f25fd5472682e873cff086eee8db5b538f64a2 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Tue, 4 Feb 2025 09:44:31 +0100
Subject: [PATCH 67/82] add telemetry tests

---
 packages/workflow/src/TelemetryHelpers.ts     |  14 +--
 .../workflow/test/TelemetryHelpers.test.ts    | 110 +++++++++++++++++-
 2 files changed, 116 insertions(+), 8 deletions(-)

diff --git a/packages/workflow/src/TelemetryHelpers.ts b/packages/workflow/src/TelemetryHelpers.ts
index 90fb8f6eb0d76..12b728c6ea23d 100644
--- a/packages/workflow/src/TelemetryHelpers.ts
+++ b/packages/workflow/src/TelemetryHelpers.ts
@@ -550,7 +550,7 @@ export function makeAIMetrics(nodes: INode[], nodeTypes: INodeTypes): FromAICoun
 	let fromAIExpressionCount = 0;
 
 	const tools = resolvedNodes.filter((x) =>
-		x[1].description.codex?.subcategories?.AI?.includes('Tool'),
+		x[1].description.codex?.subcategories?.AI?.includes('Tools'),
 	);
 
 	for (const [node, _] of tools) {
@@ -560,14 +560,14 @@ export function makeAIMetrics(nodes: INode[], nodeTypes: INodeTypes): FromAICoun
 			return typeof x === 'string' ? x : [];
 		});
 		// Note that we don't match the i in `fromAI` to support lower case i (though we miss fromai)
-		fromAIOverrideCount += vals.reduce(
-			(acc, x) => acc + Number(x.startsWith(`{{ ${FROM_AI_AUTO_GENERATED_MARKER} $fromA`)),
-			0,
-		);
-		fromAIExpressionCount += vals.reduce(
-			(acc, x) => acc + Number(x[0] === '{' && x.includes('$fromA', 2)),
+		const overrides = vals.reduce(
+			(acc, x) => acc + Number(x.startsWith(`={{ ${FROM_AI_AUTO_GENERATED_MARKER} $fromA`)),
 			0,
 		);
+		fromAIOverrideCount += overrides;
+		// check for = to avoid scanning lengthy text fields
+		fromAIExpressionCount +=
+			vals.reduce((acc, x) => acc + Number(x[0] === '=' && x.includes('$fromA', 2)), 0) - overrides;
 	}
 
 	return {
diff --git a/packages/workflow/test/TelemetryHelpers.test.ts b/packages/workflow/test/TelemetryHelpers.test.ts
index 4cb923bb9d627..dc138c858d88f 100644
--- a/packages/workflow/test/TelemetryHelpers.test.ts
+++ b/packages/workflow/test/TelemetryHelpers.test.ts
@@ -3,7 +3,7 @@ import { v5 as uuidv5, v3 as uuidv3, v4 as uuidv4, v1 as uuidv1 } from 'uuid';
 
 import { STICKY_NODE_TYPE } from '@/Constants';
 import { ApplicationError, ExpressionError, NodeApiError } from '@/errors';
-import type { IRun, IRunData } from '@/Interfaces';
+import type { INode, INodeTypeDescription, IRun, IRunData } from '@/Interfaces';
 import { NodeConnectionType, type IWorkflowBase } from '@/Interfaces';
 import * as nodeHelpers from '@/NodeHelpers';
 import {
@@ -12,11 +12,13 @@ import {
 	generateNodesGraph,
 	getDomainBase,
 	getDomainPath,
+	makeAIMetrics,
 	userInInstanceRanOutOfFreeAiCredits,
 } from '@/TelemetryHelpers';
 import { randomInt } from '@/utils';
 
 import { nodeTypes } from './ExpressionExtensions/Helpers';
+import { NodeTypes } from './NodeTypes';
 
 describe('getDomainBase should return protocol plus domain', () => {
 	test('in valid URLs', () => {
@@ -1541,3 +1543,109 @@ function generateTestWorkflowAndRunData(): { workflow: Partial<IWorkflowBase>; r
 
 	return { workflow, runData };
 }
+
+describe('makeAIMetrics', () => {
+	const makeNode = (parameters: object, type: string) =>
+		({
+			parameters,
+			type,
+			typeVersion: 2.1,
+			id: '7cb0b373-715c-4a89-8bbb-3f238907bc86',
+			name: 'a name',
+			position: [0, 0],
+		}) as INode;
+
+	it('should count applicable nodes and parameters', async () => {
+		const nodes = [
+			makeNode(
+				{
+					sendTo: "={{ /*n8n-auto-generated-fromAI-override*/ $fromAI('To', ``, 'string') }}",
+					sendTwo: "={{ /*n8n-auto-generated-fromAI-override*/ $fromAI('To', ``, 'string') }}",
+					subject: "={{ $fromAI('Subject', ``, 'string') }}",
+				},
+				'n8n-nodes-base.gmailTool',
+			),
+			makeNode(
+				{
+					subject: "={{ $fromAI('Subject', ``, 'string') }}",
+					verb: "={{ $fromAI('Verb', ``, 'string') }}",
+				},
+				'n8n-nodes-base.gmailTool',
+			),
+			makeNode(
+				{
+					subject: "'A Subject'",
+				},
+				'n8n-nodes-base.gmailTool',
+			),
+		];
+
+		const nodeTypes = mock<NodeTypes>({
+			getByNameAndVersion: () => ({
+				description: {
+					codex: {
+						categories: ['AI'],
+						subcategories: { AI: ['Tools'] },
+					},
+				} as unknown as INodeTypeDescription,
+			}),
+		});
+
+		const result = makeAIMetrics(nodes, nodeTypes);
+		expect(result).toMatchObject({
+			aiNodeCount: 3,
+			aiToolCount: 3,
+			fromAIOverrideCount: 2,
+			fromAIExpressionCount: 3,
+		});
+	});
+
+	it('should not count non-applicable nodes and parameters', async () => {
+		const nodes = [
+			makeNode(
+				{
+					sendTo: 'someone',
+				},
+				'n8n-nodes-base.gmail',
+			),
+		];
+
+		const nodeTypes = mock<NodeTypes>({
+			getByNameAndVersion: () => ({
+				description: {} as unknown as INodeTypeDescription,
+			}),
+		});
+
+		const result = makeAIMetrics(nodes, nodeTypes);
+		expect(result).toMatchObject({});
+	});
+
+	it('should count ai nodes without tools', async () => {
+		const nodes = [
+			makeNode(
+				{
+					sendTo: 'someone',
+				},
+				'n8n-nodes-base.gmailTool',
+			),
+		];
+
+		const nodeTypes = mock<NodeTypes>({
+			getByNameAndVersion: () => ({
+				description: {
+					codex: {
+						categories: ['AI'],
+					},
+				} as unknown as INodeTypeDescription,
+			}),
+		});
+
+		const result = makeAIMetrics(nodes, nodeTypes);
+		expect(result).toMatchObject({
+			aiNodeCount: 1,
+			aiToolCount: 0,
+			fromAIOverrideCount: 0,
+			fromAIExpressionCount: 0,
+		});
+	});
+});

From 6c3e47edb7f286cf6ec04eb49c66edadb1b3913c Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Tue, 4 Feb 2025 09:53:21 +0100
Subject: [PATCH 68/82] fix codex mock

---
 packages/editor-ui/src/__tests__/mocks.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/__tests__/mocks.ts b/packages/editor-ui/src/__tests__/mocks.ts
index 15688de9ff17e..f514d809d9391 100644
--- a/packages/editor-ui/src/__tests__/mocks.ts
+++ b/packages/editor-ui/src/__tests__/mocks.ts
@@ -54,7 +54,7 @@ export const mockNodeTypeDescription = ({
 	credentials = [],
 	inputs = [NodeConnectionType.Main],
 	outputs = [NodeConnectionType.Main],
-	codex = {},
+	codex = undefined,
 	properties = [],
 }: {
 	name?: INodeTypeDescription['name'];

From 4220ce08c9d613e80ab4258ca32fb68d810e51af Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Tue, 4 Feb 2025 10:04:30 +0100
Subject: [PATCH 69/82] fix lint

---
 packages/workflow/test/TelemetryHelpers.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/workflow/test/TelemetryHelpers.test.ts b/packages/workflow/test/TelemetryHelpers.test.ts
index dc138c858d88f..993f9f850bf8f 100644
--- a/packages/workflow/test/TelemetryHelpers.test.ts
+++ b/packages/workflow/test/TelemetryHelpers.test.ts
@@ -18,7 +18,7 @@ import {
 import { randomInt } from '@/utils';
 
 import { nodeTypes } from './ExpressionExtensions/Helpers';
-import { NodeTypes } from './NodeTypes';
+import type { NodeTypes } from './NodeTypes';
 
 describe('getDomainBase should return protocol plus domain', () => {
 	test('in valid URLs', () => {

From fa130223637ad59e383b0970c5f7b4e7a1579fbd Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Tue, 4 Feb 2025 10:17:58 +0100
Subject: [PATCH 70/82] move out persistent options

---
 .../components/N8nInputLabel/InputLabel.vue   | 134 ++++++++++--------
 1 file changed, 71 insertions(+), 63 deletions(-)

diff --git a/packages/design-system/src/components/N8nInputLabel/InputLabel.vue b/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
index 7ab7ae21328f7..2224528c1e448 100644
--- a/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
+++ b/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
@@ -41,73 +41,75 @@ const addTargetBlank = (html: string) =>
 		v-bind="$attrs"
 		data-test-id="input-label"
 	>
-		<label
-			v-if="label || $slots.options"
-			:for="inputName"
-			:class="{
-				'n8n-input-label': true,
-				[$style.inputLabel]: true,
-				[$style.heading]: !!label,
-				[$style.underline]: underline,
-				[$style[size]]: true,
-				[$style.overflow]: !!$slots.options,
-			}"
-		>
-			<div :class="$style['main-content']">
-				<div v-if="label" :class="$style.title">
-					<N8nText
-						:bold="bold"
-						:size="size"
-						:compact="compact"
-						:color="color"
-						:class="{
-							[$style.textEllipses]: showOptions,
-						}"
+		<div :class="$style.labelRow">
+			<label
+				v-if="label || $slots.options"
+				:for="inputName"
+				:class="{
+					'n8n-input-label': true,
+					[$style.inputLabel]: true,
+					[$style.heading]: !!label,
+					[$style.underline]: underline,
+					[$style[size]]: true,
+					[$style.overflow]: !!$slots.options,
+				}"
+			>
+				<div :class="$style['main-content']">
+					<div v-if="label" :class="$style.title">
+						<N8nText
+							:bold="bold"
+							:size="size"
+							:compact="compact"
+							:color="color"
+							:class="{
+								[$style.textEllipses]: showOptions,
+							}"
+						>
+							{{ label }}
+							<N8nText v-if="required" color="primary" :bold="bold" :size="size">*</N8nText>
+						</N8nText>
+					</div>
+					<span
+						v-if="tooltipText && label"
+						:class="[$style.infoIcon, showTooltip ? $style.visible : $style.hidden]"
 					>
-						{{ label }}
-						<N8nText v-if="required" color="primary" :bold="bold" :size="size">*</N8nText>
-					</N8nText>
+						<N8nTooltip placement="top" :popper-class="$style.tooltipPopper" :show-after="300">
+							<N8nIcon icon="question-circle" size="small" />
+							<template #content>
+								<div v-n8n-html="addTargetBlank(tooltipText)" />
+							</template>
+						</N8nTooltip>
+					</span>
 				</div>
-				<span
-					v-if="tooltipText && label"
-					:class="[$style.infoIcon, showTooltip ? $style.visible : $style.hidden]"
-				>
-					<N8nTooltip placement="top" :popper-class="$style.tooltipPopper" :show-after="300">
-						<N8nIcon icon="question-circle" size="small" />
-						<template #content>
-							<div v-n8n-html="addTargetBlank(tooltipText)" />
-						</template>
-					</N8nTooltip>
-				</span>
-			</div>
-			<div :class="$style['trailing-content']">
-				<div
-					v-if="$slots.options && label"
-					:class="{ [$style.overlay]: true, [$style.visible]: showOptions }"
-				/>
-				<div
-					v-if="$slots.options"
-					:class="{ [$style.options]: true, [$style.visible]: showOptions }"
-					:data-test-id="`${inputName}-parameter-input-options-container`"
-				>
-					<slot name="options" />
-				</div>
-				<div
-					v-if="$slots.issues"
-					:class="$style.issues"
-					:data-test-id="`${inputName}-parameter-input-issues-container`"
-				>
-					<slot name="issues" />
-				</div>
-				<div
-					v-if="$slots.persistentOptions"
-					class="pl-4xs"
-					:data-test-id="`${inputName}-parameter-input-persistent-options-container`"
-				>
-					<slot name="persistentOptions" />
+				<div :class="$style['trailing-content']">
+					<div
+						v-if="$slots.options && label"
+						:class="{ [$style.overlay]: true, [$style.visible]: showOptions }"
+					/>
+					<div
+						v-if="$slots.options"
+						:class="{ [$style.options]: true, [$style.visible]: showOptions }"
+						:data-test-id="`${inputName}-parameter-input-options-container`"
+					>
+						<slot name="options" />
+					</div>
+					<div
+						v-if="$slots.issues"
+						:class="$style.issues"
+						:data-test-id="`${inputName}-parameter-input-issues-container`"
+					>
+						<slot name="issues" />
+					</div>
 				</div>
+			</label>
+			<div
+				v-if="$slots.persistentOptions"
+				class="pl-4xs"
+				:data-test-id="`${inputName}-parameter-input-persistent-options-container`"
+			>
+				<slot name="persistentOptions" />
 			</div>
-		</label>
+		</div>
 		<slot />
 	</div>
 </template>
@@ -123,6 +125,11 @@ const addTargetBlank = (html: string) =>
 	}
 }
 
+.labelRow {
+	flex-direction: row;
+	display: flex;
+}
+
 .main-content {
 	display: flex;
 	&:hover {
@@ -147,6 +154,7 @@ const addTargetBlank = (html: string) =>
 
 .inputLabel {
 	display: block;
+	flex-grow: 1;
 }
 .container:hover,
 .inputLabel:hover {

From b3d869e186832f600e6c9bea8308f50611ef58d9 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Tue, 4 Feb 2025 10:36:31 +0100
Subject: [PATCH 71/82] update snapshots

---
 .../__snapshots__/Checkbox.test.ts.snap       | 100 ++++++-----
 .../__snapshots__/FormBox.test.ts.snap        | 162 ++++++++++--------
 .../__snapshots__/InputLabel.test.ts.snap     | 100 ++++++-----
 3 files changed, 195 insertions(+), 167 deletions(-)

diff --git a/packages/design-system/src/components/N8nCheckbox/__snapshots__/Checkbox.test.ts.snap b/packages/design-system/src/components/N8nCheckbox/__snapshots__/Checkbox.test.ts.snap
index 9e1bece045d68..323ba7ae4f018 100644
--- a/packages/design-system/src/components/N8nCheckbox/__snapshots__/Checkbox.test.ts.snap
+++ b/packages/design-system/src/components/N8nCheckbox/__snapshots__/Checkbox.test.ts.snap
@@ -31,35 +31,39 @@ exports[`components > N8nCheckbox > should render with both child and label 1`]
         class="container"
         data-test-id="input-label"
       >
-        <label
-          class="n8n-input-label inputLabel heading medium"
+        <div
+          class="labelRow"
         >
-          <div
-            class="main-content"
+          <label
+            class="n8n-input-label inputLabel heading medium"
           >
             <div
-              class="title"
+              class="main-content"
             >
-              <span
-                class="n8n-text size-medium regular"
+              <div
+                class="title"
               >
-                
-                Checkbox 
-                <!--v-if-->
-                
-              </span>
+                <span
+                  class="n8n-text size-medium regular"
+                >
+                  
+                  Checkbox 
+                  <!--v-if-->
+                  
+                </span>
+              </div>
+              <!--v-if-->
             </div>
-            <!--v-if-->
-          </div>
-          <div
-            class="trailing-content"
-          >
-            <!--v-if-->
-            <!--v-if-->
-            <!--v-if-->
-            <!--v-if-->
-          </div>
-        </label>
+            <div
+              class="trailing-content"
+            >
+              <!--v-if-->
+              <!--v-if-->
+              <!--v-if-->
+            </div>
+          </label>
+          <!--v-if-->
+        </div>
         
         
       </div>
@@ -132,35 +136,39 @@ exports[`components > N8nCheckbox > should render with label 1`] = `
         class="container"
         data-test-id="input-label"
       >
-        <label
-          class="n8n-input-label inputLabel heading medium"
+        <div
+          class="labelRow"
         >
-          <div
-            class="main-content"
+          <label
+            class="n8n-input-label inputLabel heading medium"
           >
             <div
-              class="title"
+              class="main-content"
             >
-              <span
-                class="n8n-text size-medium regular"
+              <div
+                class="title"
               >
-                
-                Checkbox 
-                <!--v-if-->
-                
-              </span>
+                <span
+                  class="n8n-text size-medium regular"
+                >
+                  
+                  Checkbox 
+                  <!--v-if-->
+                  
+                </span>
+              </div>
+              <!--v-if-->
             </div>
-            <!--v-if-->
-          </div>
-          <div
-            class="trailing-content"
-          >
-            <!--v-if-->
-            <!--v-if-->
-            <!--v-if-->
-            <!--v-if-->
-          </div>
-        </label>
+            <div
+              class="trailing-content"
+            >
+              <!--v-if-->
+              <!--v-if-->
+              <!--v-if-->
+            </div>
+          </label>
+          <!--v-if-->
+        </div>
         
         
       </div>
diff --git a/packages/design-system/src/components/N8nFormBox/__snapshots__/FormBox.test.ts.snap b/packages/design-system/src/components/N8nFormBox/__snapshots__/FormBox.test.ts.snap
index 9653deca155c2..949105aef3b93 100644
--- a/packages/design-system/src/components/N8nFormBox/__snapshots__/FormBox.test.ts.snap
+++ b/packages/design-system/src/components/N8nFormBox/__snapshots__/FormBox.test.ts.snap
@@ -33,42 +33,46 @@ exports[`FormBox > should render the component 1`] = `
               class="container"
               data-test-id="name"
             >
-              <label
-                class="n8n-input-label inputLabel heading small"
-                for="name"
+              <div
+                class="labelRow"
               >
-                <div
-                  class="main-content"
+                <label
+                  class="n8n-input-label inputLabel heading small"
+                  for="name"
                 >
                   <div
-                    class="title"
+                    class="main-content"
                   >
-                    <span
-                      class="n8n-text size-small bold"
+                    <div
+                      class="title"
                     >
-                      
-                      Name 
                       <span
-                        class="n8n-text primary size-small bold"
+                        class="n8n-text size-small bold"
                       >
                         
-                        *
+                        Name 
+                        <span
+                          class="n8n-text primary size-small bold"
+                        >
+                          
+                          *
+                          
+                        </span>
                         
                       </span>
-                      
-                    </span>
+                    </div>
+                    <!--v-if-->
                   </div>
-                  <!--v-if-->
-                </div>
-                <div
-                  class="trailing-content"
-                >
-                  <!--v-if-->
-                  <!--v-if-->
-                  <!--v-if-->
-                  <!--v-if-->
-                </div>
-              </label>
+                  <div
+                    class="trailing-content"
+                  >
+                    <!--v-if-->
+                    <!--v-if-->
+                    <!--v-if-->
+                  </div>
+                </label>
+                <!--v-if-->
+              </div>
               
               <div
                 class=""
@@ -115,42 +119,46 @@ exports[`FormBox > should render the component 1`] = `
               class="container"
               data-test-id="email"
             >
-              <label
-                class="n8n-input-label inputLabel heading medium"
-                for="email"
+              <div
+                class="labelRow"
               >
-                <div
-                  class="main-content"
+                <label
+                  class="n8n-input-label inputLabel heading medium"
+                  for="email"
                 >
                   <div
-                    class="title"
+                    class="main-content"
                   >
-                    <span
-                      class="n8n-text size-medium bold"
+                    <div
+                      class="title"
                     >
-                      
-                      Email 
                       <span
-                        class="n8n-text primary size-medium bold"
+                        class="n8n-text size-medium bold"
                       >
                         
-                        *
+                        Email 
+                        <span
+                          class="n8n-text primary size-medium bold"
+                        >
+                          
+                          *
+                          
+                        </span>
                         
                       </span>
-                      
-                    </span>
+                    </div>
+                    <!--v-if-->
                   </div>
-                  <!--v-if-->
-                </div>
-                <div
-                  class="trailing-content"
-                >
-                  <!--v-if-->
-                  <!--v-if-->
-                  <!--v-if-->
-                  <!--v-if-->
-                </div>
-              </label>
+                  <div
+                    class="trailing-content"
+                  >
+                    <!--v-if-->
+                    <!--v-if-->
+                    <!--v-if-->
+                  </div>
+                </label>
+                <!--v-if-->
+              </div>
               
               <div
                 class=""
@@ -197,42 +205,46 @@ exports[`FormBox > should render the component 1`] = `
               class="container"
               data-test-id="password"
             >
-              <label
-                class="n8n-input-label inputLabel heading medium"
-                for="password"
+              <div
+                class="labelRow"
               >
-                <div
-                  class="main-content"
+                <label
+                  class="n8n-input-label inputLabel heading medium"
+                  for="password"
                 >
                   <div
-                    class="title"
+                    class="main-content"
                   >
-                    <span
-                      class="n8n-text size-medium bold"
+                    <div
+                      class="title"
                     >
-                      
-                      Password 
                       <span
-                        class="n8n-text primary size-medium bold"
+                        class="n8n-text size-medium bold"
                       >
                         
-                        *
+                        Password 
+                        <span
+                          class="n8n-text primary size-medium bold"
+                        >
+                          
+                          *
+                          
+                        </span>
                         
                       </span>
-                      
-                    </span>
+                    </div>
+                    <!--v-if-->
                   </div>
-                  <!--v-if-->
-                </div>
-                <div
-                  class="trailing-content"
-                >
-                  <!--v-if-->
-                  <!--v-if-->
-                  <!--v-if-->
-                  <!--v-if-->
-                </div>
-              </label>
+                  <div
+                    class="trailing-content"
+                  >
+                    <!--v-if-->
+                    <!--v-if-->
+                    <!--v-if-->
+                  </div>
+                </label>
+                <!--v-if-->
+              </div>
               
               <div
                 class=""
diff --git a/packages/design-system/src/components/N8nInputLabel/__snapshots__/InputLabel.test.ts.snap b/packages/design-system/src/components/N8nInputLabel/__snapshots__/InputLabel.test.ts.snap
index 6c188e166f3f3..1c928d5e3575f 100644
--- a/packages/design-system/src/components/N8nInputLabel/__snapshots__/InputLabel.test.ts.snap
+++ b/packages/design-system/src/components/N8nInputLabel/__snapshots__/InputLabel.test.ts.snap
@@ -6,35 +6,39 @@ exports[`component > Text overflow behavior > displays ellipsis with options 1`]
     class="container"
     data-test-id="input-label"
   >
-    <label
-      class="n8n-input-label inputLabel heading medium"
+    <div
+      class="labelRow"
     >
-      <div
-        class="main-content"
+      <label
+        class="n8n-input-label inputLabel heading medium"
       >
         <div
-          class="title"
+          class="main-content"
         >
-          <span
-            class="n8n-text size-medium bold textEllipses textEllipses"
+          <div
+            class="title"
           >
-            
-            a label 
-            <!--v-if-->
-            
-          </span>
+            <span
+              class="n8n-text size-medium bold textEllipses textEllipses"
+            >
+              
+              a label 
+              <!--v-if-->
+              
+            </span>
+          </div>
+          <!--v-if-->
         </div>
-        <!--v-if-->
-      </div>
-      <div
-        class="trailing-content"
-      >
-        <!--v-if-->
-        <!--v-if-->
-        <!--v-if-->
-        <!--v-if-->
-      </div>
-    </label>
+        <div
+          class="trailing-content"
+        >
+          <!--v-if-->
+          <!--v-if-->
+          <!--v-if-->
+        </div>
+      </label>
+      <!--v-if-->
+    </div>
     
     
   </div>
@@ -47,35 +51,39 @@ exports[`component > Text overflow behavior > displays full text without options
     class="container"
     data-test-id="input-label"
   >
-    <label
-      class="n8n-input-label inputLabel heading medium"
+    <div
+      class="labelRow"
     >
-      <div
-        class="main-content"
+      <label
+        class="n8n-input-label inputLabel heading medium"
       >
         <div
-          class="title"
+          class="main-content"
         >
-          <span
-            class="n8n-text size-medium bold"
+          <div
+            class="title"
           >
-            
-            a label 
-            <!--v-if-->
-            
-          </span>
+            <span
+              class="n8n-text size-medium bold"
+            >
+              
+              a label 
+              <!--v-if-->
+              
+            </span>
+          </div>
+          <!--v-if-->
         </div>
-        <!--v-if-->
-      </div>
-      <div
-        class="trailing-content"
-      >
-        <!--v-if-->
-        <!--v-if-->
-        <!--v-if-->
-        <!--v-if-->
-      </div>
-    </label>
+        <div
+          class="trailing-content"
+        >
+          <!--v-if-->
+          <!--v-if-->
+          <!--v-if-->
+        </div>
+      </label>
+      <!--v-if-->
+    </div>
     
     
   </div>

From 5d70ed9ef2f0fac5e56a9c9e3d772b4f15e2b2ba Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Tue, 4 Feb 2025 12:03:08 +0100
Subject: [PATCH 72/82] Add parameterInputFull tests

---
 .../src/components/ParameterInputFull.test.ts | 158 ++++++++++++++++++
 .../src/components/ParameterInputFull.vue     |   1 +
 .../FromAiOverrideButton.vue                  |   1 +
 .../FromAiOverrideField.vue                   |   2 +-
 4 files changed, 161 insertions(+), 1 deletion(-)
 create mode 100644 packages/editor-ui/src/components/ParameterInputFull.test.ts

diff --git a/packages/editor-ui/src/components/ParameterInputFull.test.ts b/packages/editor-ui/src/components/ParameterInputFull.test.ts
new file mode 100644
index 0000000000000..ef4ae5ee24c0a
--- /dev/null
+++ b/packages/editor-ui/src/components/ParameterInputFull.test.ts
@@ -0,0 +1,158 @@
+import { renderComponent } from '@/__tests__/render';
+import type { useNDVStore } from '@/stores/ndv.store';
+import { createTestingPinia } from '@pinia/testing';
+import type { useNodeTypesStore } from '@/stores/nodeTypes.store';
+import type { useSettingsStore } from '@/stores/settings.store';
+import { cleanupAppModals, createAppModals } from '@/__tests__/utils';
+import ParameterInputFull from './ParameterInputFull.vue';
+import { FROM_AI_AUTO_GENERATED_MARKER } from 'n8n-workflow';
+
+type Writeable<T> = { -readonly [P in keyof T]: T[P] };
+
+let mockNdvState: Partial<ReturnType<typeof useNDVStore>>;
+let mockNodeTypesState: Writeable<Partial<ReturnType<typeof useNodeTypesStore>>>;
+let mockSettingsState: Writeable<Partial<ReturnType<typeof useSettingsStore>>>;
+
+beforeEach(() => {
+	mockNdvState = {
+		hasInputData: true,
+		activeNode: {
+			id: '123',
+			name: 'myParam',
+			parameters: {},
+			position: [0, 0],
+			type: 'test',
+			typeVersion: 1,
+		},
+		isInputPanelEmpty: false,
+		isOutputPanelEmpty: false,
+	};
+	mockNodeTypesState = {
+		allNodeTypes: [],
+	};
+	mockSettingsState = {
+		settings: {
+			releaseChannel: 'stable',
+		} as never,
+		isEnterpriseFeatureEnabled: { externalSecrets: false } as never,
+	};
+	createAppModals();
+});
+
+vi.mock('@/stores/ndv.store', () => {
+	return {
+		useNDVStore: vi.fn(() => mockNdvState),
+	};
+});
+
+vi.mock('@/stores/nodeTypes.store', () => {
+	return {
+		useNodeTypesStore: vi.fn(() => mockNodeTypesState),
+	};
+});
+
+vi.mock('@/stores/settings.store', () => {
+	return {
+		useSettingsStore: vi.fn(() => mockSettingsState),
+	};
+});
+
+describe('ParameterInputFull.vue', () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+		createAppModals();
+	});
+
+	afterEach(() => {
+		cleanupAppModals();
+	});
+
+	it('should render basic parameter', async () => {
+		mockNodeTypesState.getNodeType = vi.fn().mockReturnValue({});
+		const { getByTestId } = renderComponent(ParameterInputFull, {
+			pinia: createTestingPinia(),
+			props: {
+				path: 'myParam',
+				parameter: {
+					displayName: 'My Param',
+					name: 'myParam',
+					type: 'string',
+				},
+			},
+		});
+		expect(getByTestId('parameter-input-wrapper')).toBeInTheDocument();
+	});
+
+	it('should render parameter with override button inline', async () => {
+		mockNodeTypesState.getNodeType = vi.fn().mockReturnValue({
+			codex: {
+				categories: ['AI'],
+				subcategories: { AI: ['Tools'] },
+			},
+		});
+		const { getByTestId } = renderComponent(ParameterInputFull, {
+			pinia: createTestingPinia(),
+			props: {
+				path: 'myParam',
+				parameter: {
+					displayName: 'My Param',
+					name: 'myParam',
+					type: 'string',
+				},
+				value: '',
+			},
+		});
+		expect(getByTestId('parameter-input-wrapper')).toBeInTheDocument();
+		expect(getByTestId('from-ai-override-button')).toBeInTheDocument();
+	});
+
+	it('should render parameter with override button in options', async () => {
+		mockNodeTypesState.getNodeType = vi.fn().mockReturnValue({
+			codex: {
+				categories: ['AI'],
+				subcategories: { AI: ['Tools'] },
+			},
+		});
+		const { getByTestId } = renderComponent(ParameterInputFull, {
+			pinia: createTestingPinia(),
+			props: {
+				path: 'myParam',
+				parameter: {
+					displayName: 'My Param',
+					name: 'myParam',
+					type: 'string',
+				},
+				value: `={{
+					'and the air is free'
+
+
+				}}`,
+			},
+		});
+		expect(getByTestId('parameter-input-wrapper')).toBeInTheDocument();
+		expect(getByTestId('from-ai-override-button')).toBeInTheDocument();
+	});
+
+	it('should render parameter with active override', async () => {
+		mockNodeTypesState.getNodeType = vi.fn().mockReturnValue({
+			codex: {
+				categories: ['AI'],
+				subcategories: { AI: ['Tools'] },
+			},
+		});
+		const { queryByTestId, getByTestId } = renderComponent(ParameterInputFull, {
+			pinia: createTestingPinia(),
+			props: {
+				path: 'myParam',
+				value: `={{ ${FROM_AI_AUTO_GENERATED_MARKER} $fromAI('myParam') }}`,
+				parameter: {
+					displayName: 'My Param',
+					name: 'myParam',
+					type: 'string',
+				},
+			},
+		});
+		expect(getByTestId('fromAI-override-field')).toBeInTheDocument();
+		expect(queryByTestId('override-button')).not.toBeInTheDocument();
+	});
+});
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 8f27eba9192f8..5abca5cc4e43f 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -370,6 +370,7 @@ function removeOverride(clearField = false) {
 						:event-bus="eventBus"
 						:can-be-overridden="canBeContentOverride"
 						input-size="small"
+						data-test-id="parameter-input-wrapper"
 						@update="valueChanged"
 						@text-input="onTextInput"
 						@focus="onFocus"
diff --git a/packages/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideButton.vue b/packages/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideButton.vue
index 32c70f57a8e98..8b11d1a910929 100644
--- a/packages/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideButton.vue
+++ b/packages/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideButton.vue
@@ -17,6 +17,7 @@ const emit = defineEmits<{
 		<N8nButton
 			:class="[$style.overrideButton /*, $style.noCornersBottom, $style.overrideButtonInOptions*/]"
 			type="tertiary"
+			data-test-id="from-ai-override-button"
 			@click="emit('click')"
 		>
 			<AiStarsIcon size="large" :class="$style.aiStarsIcon" />
diff --git a/packages/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideField.vue b/packages/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideField.vue
index 293c5eaaf6edc..4382bd18e5180 100644
--- a/packages/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideField.vue
+++ b/packages/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideField.vue
@@ -11,7 +11,7 @@ const emit = defineEmits<{
 </script>
 
 <template>
-	<div :class="$style.contentOverrideContainer">
+	<div :class="$style.contentOverrideContainer" data-test-id="fromAI-override-field">
 		<div :class="[$style.iconStars, 'el-input-group__prepend', $style.noCornersRight]">
 			<AiStarsIcon :class="$style.aiStarsIcon" />
 		</div>

From 164a3b1567eda4d80cecd9be5dc184719bb926c8 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Tue, 4 Feb 2025 12:14:00 +0100
Subject: [PATCH 73/82] PR Feedback

---
 .../events/relays/telemetry.event-relay.ts    |  2 +-
 packages/workflow/src/TelemetryHelpers.ts     | 29 ++++++++++---------
 .../workflow/test/TelemetryHelpers.test.ts    |  8 ++---
 3 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/packages/cli/src/events/relays/telemetry.event-relay.ts b/packages/cli/src/events/relays/telemetry.event-relay.ts
index 6da39e69081b0..e33d736c1adb4 100644
--- a/packages/cli/src/events/relays/telemetry.event-relay.ts
+++ b/packages/cli/src/events/relays/telemetry.event-relay.ts
@@ -701,7 +701,7 @@ export class TelemetryEventRelay extends EventRelay {
 					sharing_role: userRole,
 					credential_type: null,
 					is_managed: false,
-					...TelemetryHelpers.makeAIMetrics(workflow.nodes, this.nodeTypes),
+					...TelemetryHelpers.resolveAIMetrics(workflow.nodes, this.nodeTypes),
 				};
 
 				if (!manualExecEventProperties.node_graph_string) {
diff --git a/packages/workflow/src/TelemetryHelpers.ts b/packages/workflow/src/TelemetryHelpers.ts
index 12b728c6ea23d..cbe9a0bb5411b 100644
--- a/packages/workflow/src/TelemetryHelpers.ts
+++ b/packages/workflow/src/TelemetryHelpers.ts
@@ -534,7 +534,7 @@ export type FromAICount = {
 	fromAIExpressionCount: number;
 };
 
-export function makeAIMetrics(nodes: INode[], nodeTypes: INodeTypes): FromAICount | {} {
+export function resolveAIMetrics(nodes: INode[], nodeTypes: INodeTypes): FromAICount | {} {
 	const resolvedNodes = nodes
 		.map((x) => [x, nodeTypes.getByNameAndVersion(x.type, x.typeVersion)] as const)
 		.filter((x) => !!x[1]?.description);
@@ -549,25 +549,31 @@ export function makeAIMetrics(nodes: INode[], nodeTypes: INodeTypes): FromAICoun
 	let fromAIOverrideCount = 0;
 	let fromAIExpressionCount = 0;
 
-	const tools = resolvedNodes.filter((x) =>
-		x[1].description.codex?.subcategories?.AI?.includes('Tools'),
+	const tools = resolvedNodes.filter((node) =>
+		node[1].description.codex?.subcategories?.AI?.includes('Tools'),
 	);
 
 	for (const [node, _] of tools) {
 		// FlatMap to support values in resourceLocators
-		const vals = Object.values(node.parameters).flatMap((x) => {
-			if (x && typeof x === 'object' && 'value' in x) x = x.value;
-			return typeof x === 'string' ? x : [];
+		const values = Object.values(node.parameters).flatMap((param) => {
+			if (param && typeof param === 'object' && 'value' in param) param = param.value;
+			return typeof param === 'string' ? param : [];
 		});
+
 		// Note that we don't match the i in `fromAI` to support lower case i (though we miss fromai)
-		const overrides = vals.reduce(
-			(acc, x) => acc + Number(x.startsWith(`={{ ${FROM_AI_AUTO_GENERATED_MARKER} $fromA`)),
+		const overrides = values.reduce(
+			(acc, value) => acc + Number(value.startsWith(`={{ ${FROM_AI_AUTO_GENERATED_MARKER} $fromA`)),
 			0,
 		);
+
 		fromAIOverrideCount += overrides;
 		// check for = to avoid scanning lengthy text fields
+		// this will re-count overrides
 		fromAIExpressionCount +=
-			vals.reduce((acc, x) => acc + Number(x[0] === '=' && x.includes('$fromA', 2)), 0) - overrides;
+			values.reduce(
+				(acc, value) => acc + Number(value[0] === '=' && value.includes('$fromA', 2)),
+				0,
+			) - overrides;
 	}
 
 	return {
@@ -577,8 +583,3 @@ export function makeAIMetrics(nodes: INode[], nodeTypes: INodeTypes): FromAICoun
 		fromAIExpressionCount,
 	};
 }
-
-export function isTool(nodeTypes: INodeTypes, node: INode): boolean {
-	const x = nodeTypes.getByNameAndVersion(node.type, node.typeVersion);
-	return !!x.description.codex?.subcategories?.AI?.includes('Tool');
-}
diff --git a/packages/workflow/test/TelemetryHelpers.test.ts b/packages/workflow/test/TelemetryHelpers.test.ts
index 993f9f850bf8f..f7cd8c6190770 100644
--- a/packages/workflow/test/TelemetryHelpers.test.ts
+++ b/packages/workflow/test/TelemetryHelpers.test.ts
@@ -12,7 +12,7 @@ import {
 	generateNodesGraph,
 	getDomainBase,
 	getDomainPath,
-	makeAIMetrics,
+	resolveAIMetrics,
 	userInInstanceRanOutOfFreeAiCredits,
 } from '@/TelemetryHelpers';
 import { randomInt } from '@/utils';
@@ -1591,7 +1591,7 @@ describe('makeAIMetrics', () => {
 			}),
 		});
 
-		const result = makeAIMetrics(nodes, nodeTypes);
+		const result = resolveAIMetrics(nodes, nodeTypes);
 		expect(result).toMatchObject({
 			aiNodeCount: 3,
 			aiToolCount: 3,
@@ -1616,7 +1616,7 @@ describe('makeAIMetrics', () => {
 			}),
 		});
 
-		const result = makeAIMetrics(nodes, nodeTypes);
+		const result = resolveAIMetrics(nodes, nodeTypes);
 		expect(result).toMatchObject({});
 	});
 
@@ -1640,7 +1640,7 @@ describe('makeAIMetrics', () => {
 			}),
 		});
 
-		const result = makeAIMetrics(nodes, nodeTypes);
+		const result = resolveAIMetrics(nodes, nodeTypes);
 		expect(result).toMatchObject({
 			aiNodeCount: 1,
 			aiToolCount: 0,

From ad1022119af1fe764f1c7d5bc9ffd1d7288b2cb7 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Tue, 4 Feb 2025 12:23:55 +0100
Subject: [PATCH 74/82] update missing snapshot

---
 .../MultipleParameter.test.ts.snap            | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/packages/editor-ui/src/components/__snapshots__/MultipleParameter.test.ts.snap b/packages/editor-ui/src/components/__snapshots__/MultipleParameter.test.ts.snap
index 25ddab9b7aec2..be28af8e45fd9 100644
--- a/packages/editor-ui/src/components/__snapshots__/MultipleParameter.test.ts.snap
+++ b/packages/editor-ui/src/components/__snapshots__/MultipleParameter.test.ts.snap
@@ -2,18 +2,21 @@
 
 exports[`MultipleParameter > should render correctly 1`] = `
 "<div data-v-a47e4507="" class="duplicate-parameter">
-  <div data-v-a47e4507="" class="container" data-test-id="input-label"><label class="n8n-input-label inputLabel heading underline small">
-      <div class="main-content">
-        <div class="title"><span class="n8n-text text-dark size-small bold">Additional Fields <!--v-if--></span></div>
-        <!--v-if-->
-      </div>
-      <div class="trailing-content">
-        <!--v-if-->
-        <!--v-if-->
-        <!--v-if-->
-        <!--v-if-->
-      </div>
-    </label></div>
+  <div data-v-a47e4507="" class="container" data-test-id="input-label">
+    <div class="labelRow"><label class="n8n-input-label inputLabel heading underline small">
+        <div class="main-content">
+          <div class="title"><span class="n8n-text text-dark size-small bold">Additional Fields <!--v-if--></span></div>
+          <!--v-if-->
+        </div>
+        <div class="trailing-content">
+          <!--v-if-->
+          <!--v-if-->
+          <!--v-if-->
+        </div>
+      </label>
+      <!--v-if-->
+    </div>
+  </div>
   <div data-v-a47e4507="" class="add-item-wrapper">
     <div data-v-a47e4507="" class="no-items-exist"><span data-v-a47e4507="" class="n8n-text size-small regular">Currently no items exist</span></div><button data-v-a47e4507="" class="button button tertiary medium block" aria-live="polite">
       <!--v-if--><span>Add item</span>

From e817f1e2606217c78256abfeb356b7c8559e9902 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Tue, 4 Feb 2025 14:06:19 +0100
Subject: [PATCH 75/82] fix name and readd failing test

---
 .../ParameterInputOverrides/ParameterOverrideSelectableList.vue | 2 +-
 .../ParameterInputOverrides/parameterInputOverrides.test.ts     | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/ParameterInputOverrides/ParameterOverrideSelectableList.vue b/packages/editor-ui/src/components/ParameterInputOverrides/ParameterOverrideSelectableList.vue
index 6200537b3cc23..549e24b12b8a4 100644
--- a/packages/editor-ui/src/components/ParameterInputOverrides/ParameterOverrideSelectableList.vue
+++ b/packages/editor-ui/src/components/ParameterInputOverrides/ParameterOverrideSelectableList.vue
@@ -48,7 +48,7 @@ function valueChanged(parameterData: IUpdateInformation) {
 			<ParameterInputFull
 				:parameter="{
 					name,
-					displayName: proper(name[0]),
+					displayName: proper(name),
 					type,
 					default: initialValue,
 					noDataExpression: true,
diff --git a/packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.test.ts b/packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.test.ts
index ee5c4bfefed72..4ed328001384f 100644
--- a/packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.test.ts
+++ b/packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.test.ts
@@ -128,6 +128,7 @@ describe('FromAiOverride', () => {
 	test.each<[string, string, string]>([
 		['normal case', '$fromAI("a", `b`)', 'b'],
 		['working', '$fromAI("a", `a \\` \\\\\\``)', 'a ` \\`'],
+		// ['failing', '$fromAI("a", `\\``)', '`'],
 	])('should handle backtick escaping %s', (_name, value, expected) => {
 		expect(FromAiOverride.parseOverrides(value)).toEqual({ description: expected });
 	});

From 0ae22b333553c070f8d979bd65dae18f82820585 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Tue, 4 Feb 2025 15:36:27 +0100
Subject: [PATCH 76/82] refactor override class

---
 .../src/components/ParameterInputFull.vue     |  31 ++--
 .../ParameterOverrideSelectableList.vue       |   6 +-
 ...es.test.ts => fromAIOverrideUtils.test.ts} |  51 +++---
 .../fromAIOverrideUtils.ts                    | 173 ++++++++++++++++++
 .../parameterInputOverrides.ts                | 170 -----------------
 .../ResourceLocator/ResourceLocator.vue       |  23 +--
 6 files changed, 232 insertions(+), 222 deletions(-)
 rename packages/editor-ui/src/components/ParameterInputOverrides/{parameterInputOverrides.test.ts => fromAIOverrideUtils.test.ts} (73%)
 create mode 100644 packages/editor-ui/src/components/ParameterInputOverrides/fromAIOverrideUtils.ts
 delete mode 100644 packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.ts

diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 5abca5cc4e43f..21d3b5f33fe95 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -21,9 +21,12 @@ import {
 } from 'n8n-workflow';
 import { N8nInputLabel } from 'n8n-design-system';
 import {
-	type ParameterOverride,
+	buildValueFromOverride,
+	type FromAIOverride,
+	isOverrideValue,
 	makeOverrideValue,
-} from './ParameterInputOverrides/parameterInputOverrides';
+	updateExtraPropValues,
+} from './ParameterInputOverrides/fromAIOverrideUtils';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useTelemetry } from '@/composables/useTelemetry';
 
@@ -70,7 +73,7 @@ const nodeTypesStore = useNodeTypesStore();
 const telemetry = useTelemetry();
 
 const node = computed(() => ndvStore.activeNode);
-const parameterOverrides = ref<ParameterOverride | null>(
+const parameterOverrides = ref<FromAIOverride | null>(
 	makeOverrideValue(
 		props,
 		node.value && nodeTypesStore.getNodeType(node.value.type, node.value.typeVersion),
@@ -85,9 +88,7 @@ const canBeContentOverride = computed(() => {
 });
 
 const isContentOverride = computed(
-	() =>
-		canBeContentOverride.value &&
-		!!parameterOverrides.value?.isOverrideValue(props.value?.toString() ?? ''),
+	() => canBeContentOverride.value && !!isOverrideValue(props.value?.toString() ?? ''),
 );
 
 const hint = computed(() => i18n.nodeText().hint(props.parameter, props.path));
@@ -109,13 +110,7 @@ const showExpressionSelector = computed(() => {
 		// infer whether it's overridden and we should hide the toggle
 		const value =
 			props.value && typeof props.value === 'object' && 'value' in props.value && props.value.value;
-		if (
-			value &&
-			makeOverrideValue(
-				props,
-				node.value && nodeTypesStore.getNodeType(node.value.type, node.value.typeVersion),
-			)?.isOverrideValue(String(value))
-		) {
+		if (value && isOverrideValue(String(value))) {
 			return false;
 		}
 
@@ -265,6 +260,8 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 );
 
 function applyOverride() {
+	if (!parameterOverrides.value) return;
+
 	telemetry.track(
 		'User turned on fromAI override',
 		{
@@ -273,8 +270,8 @@ function applyOverride() {
 		},
 		{ withPostHog: true },
 	);
-	parameterOverrides.value?.updateExtraPropValues(props.value?.toString() ?? '');
-	const value = parameterOverrides.value?.buildValueFromOverride(props, true);
+	updateExtraPropValues(parameterOverrides.value, String(props.value));
+	const value = buildValueFromOverride(parameterOverrides.value, props, true);
 	valueChanged({
 		node: node.value?.name,
 		name: props.path,
@@ -283,6 +280,8 @@ function applyOverride() {
 }
 
 function removeOverride(clearField = false) {
+	if (!parameterOverrides.value) return;
+
 	telemetry.track(
 		'User turned off fromAI override',
 		{
@@ -296,7 +295,7 @@ function removeOverride(clearField = false) {
 		name: props.path,
 		value: clearField
 			? props.parameter.default
-			: parameterOverrides.value?.buildValueFromOverride(props, false),
+			: buildValueFromOverride(parameterOverrides.value, props, false),
 	});
 	void setTimeout(async () => {
 		await parameterInputWrapper.value?.focusInput();
diff --git a/packages/editor-ui/src/components/ParameterInputOverrides/ParameterOverrideSelectableList.vue b/packages/editor-ui/src/components/ParameterInputOverrides/ParameterOverrideSelectableList.vue
index 549e24b12b8a4..8991b960c74e0 100644
--- a/packages/editor-ui/src/components/ParameterInputOverrides/ParameterOverrideSelectableList.vue
+++ b/packages/editor-ui/src/components/ParameterInputOverrides/ParameterOverrideSelectableList.vue
@@ -2,7 +2,7 @@
 import type { IUpdateInformation } from '@/Interface';
 
 import { type INodeProperties } from 'n8n-workflow';
-import { type ParameterOverride } from './parameterInputOverrides';
+import { buildValueFromOverride, type FromAIOverride } from './fromAIOverrideUtils';
 import { computed } from 'vue';
 
 type Props = {
@@ -11,7 +11,7 @@ type Props = {
 	isReadOnly?: boolean;
 };
 
-const parameterOverride = defineModel<ParameterOverride>({ required: true });
+const parameterOverride = defineModel<FromAIOverride>({ required: true });
 
 const props = withDefaults(defineProps<Props>(), {
 	isReadOnly: false,
@@ -64,7 +64,7 @@ function valueChanged(parameterData: IUpdateInformation) {
 						parameterOverride.extraPropValues[name] = x.value;
 						valueChanged({
 							name: props.path,
-							value: parameterOverride.buildValueFromOverride(props, true),
+							value: buildValueFromOverride(parameterOverride, props, true),
 						});
 					}
 				"
diff --git a/packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.test.ts b/packages/editor-ui/src/components/ParameterInputOverrides/fromAIOverrideUtils.test.ts
similarity index 73%
rename from packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.test.ts
rename to packages/editor-ui/src/components/ParameterInputOverrides/fromAIOverrideUtils.test.ts
index 4ed328001384f..b5ef5ac6bc39d 100644
--- a/packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.test.ts
+++ b/packages/editor-ui/src/components/ParameterInputOverrides/fromAIOverrideUtils.test.ts
@@ -1,5 +1,11 @@
-import type { OverrideContext } from './parameterInputOverrides';
-import { FromAiOverride, makeOverrideValue } from './parameterInputOverrides';
+import type { FromAIOverride, OverrideContext } from './fromAIOverrideUtils';
+import {
+	buildValueFromOverride,
+	fromAIExtraProps,
+	isOverrideValue,
+	makeOverrideValue,
+	parseOverrides,
+} from './fromAIOverrideUtils';
 import type { INodeTypeDescription } from 'n8n-workflow';
 
 const DISPLAY_NAME = 'aDisplayName';
@@ -68,7 +74,8 @@ describe('makeOverrideValue', () => {
 			AI_NODE_TYPE,
 		);
 
-		expect(result).toBeInstanceOf(FromAiOverride);
+		expect(result).not.toBeNull();
+		expect(result?.type).toEqual('fromAI');
 	});
 
 	it('parses existing fromAI overrides', () => {
@@ -97,27 +104,23 @@ describe('makeOverrideValue', () => {
 
 describe('FromAiOverride', () => {
 	it('correctly identifies override values', () => {
-		expect(FromAiOverride.isOverrideValue('={{ $fromAI() }}')).toBe(false);
-		expect(
-			FromAiOverride.isOverrideValue('={{ /*n8n-auto-generated-fromAI-override*/ $fromAI() }}'),
-		).toBe(true);
+		expect(isOverrideValue('={{ $fromAI() }}')).toBe(false);
+		expect(isOverrideValue('={{ /*n8n-auto-generated-fromAI-override*/ $fromAI() }}')).toBe(true);
 	});
 
 	it('should parseOverrides as expected', () => {
-		expect(FromAiOverride.parseOverrides("={{ $fromAI('aKey' }}")).toBeNull();
-		expect(FromAiOverride.parseOverrides("={{ $fromAI('aKey') }}")).toEqual({
+		expect(parseOverrides("={{ $fromAI('aKey' }}")).toBeNull();
+		expect(parseOverrides("={{ $fromAI('aKey') }}")).toEqual({
 			description: undefined,
 		});
-		expect(FromAiOverride.parseOverrides("={{ $fromAI('aKey', `a description`) }}")).toEqual({
+		expect(parseOverrides("={{ $fromAI('aKey', `a description`) }}")).toEqual({
 			description: 'a description',
 		});
+		expect(parseOverrides("={{ /*n8n-auto-generated-fromAI-override*/ $fromAI('aKey') }}")).toEqual(
+			{ description: undefined },
+		);
 		expect(
-			FromAiOverride.parseOverrides(
-				"={{ /*n8n-auto-generated-fromAI-override*/ $fromAI('aKey') }}",
-			),
-		).toEqual({ description: undefined });
-		expect(
-			FromAiOverride.parseOverrides(
+			parseOverrides(
 				"={{ /*n8n-auto-generated-fromAI-override*/ $fromAI('aKey', `a description`) }}",
 			),
 		).toEqual({
@@ -130,25 +133,29 @@ describe('FromAiOverride', () => {
 		['working', '$fromAI("a", `a \\` \\\\\\``)', 'a ` \\`'],
 		// ['failing', '$fromAI("a", `\\``)', '`'],
 	])('should handle backtick escaping %s', (_name, value, expected) => {
-		expect(FromAiOverride.parseOverrides(value)).toEqual({ description: expected });
+		expect(parseOverrides(value)).toEqual({ description: expected });
 	});
 
 	it('should build a value from an override and carry over modification', () => {
-		const override = new FromAiOverride();
-		expect(override.buildValueFromOverride(makeContext(''), true)).toEqual(
+		const override: FromAIOverride = {
+			type: 'fromAI',
+			extraProps: fromAIExtraProps,
+			extraPropValues: {},
+		};
+		expect(buildValueFromOverride(override, makeContext(''), true)).toEqual(
 			`={{ /*n8n-auto-generated-fromAI-override*/ $fromAI('${DISPLAY_NAME}', \`\`, 'string') }}`,
 		);
-		expect(override.buildValueFromOverride(makeContext(''), false)).toEqual(
+		expect(buildValueFromOverride(override, makeContext(''), false)).toEqual(
 			`={{ $fromAI('${DISPLAY_NAME}', \`\`, 'string') }}`,
 		);
 
 		const description = 'a description';
 		override.extraPropValues.description = description;
 
-		expect(override.buildValueFromOverride(makeContext(''), true)).toEqual(
+		expect(buildValueFromOverride(override, makeContext(''), true)).toEqual(
 			`={{ /*n8n-auto-generated-fromAI-override*/ $fromAI('${DISPLAY_NAME}', \`${description}\`, 'string') }}`,
 		);
-		expect(override.buildValueFromOverride(makeContext(''), false)).toEqual(
+		expect(buildValueFromOverride(override, makeContext(''), false)).toEqual(
 			`={{ $fromAI('${DISPLAY_NAME}', \`${description}\`, 'string') }}`,
 		);
 	});
diff --git a/packages/editor-ui/src/components/ParameterInputOverrides/fromAIOverrideUtils.ts b/packages/editor-ui/src/components/ParameterInputOverrides/fromAIOverrideUtils.ts
new file mode 100644
index 0000000000000..c2abd5152cf74
--- /dev/null
+++ b/packages/editor-ui/src/components/ParameterInputOverrides/fromAIOverrideUtils.ts
@@ -0,0 +1,173 @@
+import {
+	extractFromAICalls,
+	FROM_AI_AUTO_GENERATED_MARKER,
+	type INodeTypeDescription,
+	type NodeParameterValueType,
+	type NodePropertyTypes,
+} from 'n8n-workflow';
+import { i18n } from '@/plugins/i18n';
+
+export type OverrideContext = {
+	parameter: {
+		name: string;
+		displayName: string;
+		type: NodePropertyTypes;
+		noDataExpression?: boolean;
+		typeOptions?: { editor?: string };
+	};
+	value: NodeParameterValueType;
+	path: string;
+};
+
+type ExtraPropValue = {
+	initialValue: string;
+	tooltip: string;
+	type: NodePropertyTypes;
+	typeOptions?: { rows?: number };
+};
+
+type FromAIExtraProps = 'description';
+
+export type FromAIOverride = {
+	type: 'fromAI';
+	readonly extraProps: Record<FromAIExtraProps, ExtraPropValue>;
+	extraPropValues: Partial<Record<FromAIExtraProps, NodeParameterValueType>>;
+};
+
+function sanitizeFromAiParameterName(s: string) {
+	s = s.replace(/[^a-zA-Z0-9\-]/g, '_');
+
+	if (s.length >= 64) {
+		s = s.slice(0, 63);
+	}
+
+	return s;
+}
+
+const NODE_DENYLIST = ['toolCode', 'toolHttpRequest'];
+
+const PATH_DENYLIST = [
+	'parameters.name',
+	'parameters.description',
+	// This is used in e.g. the telegram node if the dropdown selects manual mode
+	'parameters.toolDescription',
+];
+
+export const fromAIExtraProps: Record<FromAIExtraProps, ExtraPropValue> = {
+	description: {
+		initialValue: '',
+		type: 'string',
+		typeOptions: { rows: 2 },
+		tooltip: i18n.baseText('parameterOverride.descriptionTooltip'),
+	},
+};
+
+function isExtraPropKey(
+	extraProps: FromAIOverride['extraProps'],
+	key: PropertyKey,
+): key is keyof FromAIOverride['extraProps'] {
+	return extraProps.hasOwnProperty(key);
+}
+
+export function updateExtraPropValues(override: FromAIOverride, expr: string) {
+	const { extraProps, extraPropValues } = override;
+	const overrides = parseOverrides(expr);
+	if (overrides) {
+		for (const [key, value] of Object.entries(overrides)) {
+			if (isExtraPropKey(extraProps, key)) {
+				if (extraProps[key].initialValue === value) {
+					delete extraPropValues[key];
+				} else {
+					extraPropValues[key] = value;
+				}
+			}
+		}
+	}
+}
+
+function fieldTypeToFromAiType(propType: NodePropertyTypes) {
+	switch (propType) {
+		case 'boolean':
+		case 'number':
+		case 'json':
+			return propType;
+		default:
+			return 'string';
+	}
+}
+
+export function isOverrideValue(s: string) {
+	return s.startsWith(`={{ ${FROM_AI_AUTO_GENERATED_MARKER} $fromAI(`);
+}
+
+export function buildValueFromOverride(
+	override: FromAIOverride,
+	props: Pick<OverrideContext, 'parameter'>,
+	includeMarker: boolean,
+) {
+	const { extraPropValues, extraProps } = override;
+	const marker = includeMarker ? `${FROM_AI_AUTO_GENERATED_MARKER} ` : '';
+	const key = sanitizeFromAiParameterName(props.parameter.displayName);
+	const description =
+		extraPropValues?.description?.toString() ?? extraProps.description.initialValue;
+	// We want to escape these characters here as the generated formula needs to be valid JS code, and we risk
+	// closing the string prematurely without it.
+	// If we don't escape \ then 'my \` description' as user input would end up as 'my \\` description'
+	// in the generated code, causing an unescaped backtick to close the string.
+	const sanitizedDescription = description.replace(/\\/g, '\\\\').replace(/`/g, '\\`');
+	const type = fieldTypeToFromAiType(props.parameter.type);
+
+	return `={{ ${marker}$fromAI('${key}', \`${sanitizedDescription}\`, '${type}') }}`;
+}
+
+export function parseOverrides(
+	s: string,
+): Record<keyof FromAIOverride['extraProps'], string | undefined> | null {
+	try {
+		// `extractFromAICalls` has different escape semantics from JS strings
+		// Specifically it makes \ escape any following character.
+		// So we need to escape our \ so we don't drop them accidentally
+		const calls = extractFromAICalls(s.replaceAll(/\\/g, '\\\\'));
+		if (calls.length === 1) {
+			return {
+				description: calls[0].description,
+			};
+		}
+	} catch (e) {}
+
+	return null;
+}
+
+export function canBeContentOverride(
+	props: Pick<OverrideContext, 'path' | 'parameter'>,
+	nodeType: INodeTypeDescription | null,
+) {
+	if (NODE_DENYLIST.some((x) => nodeType?.name?.endsWith(x) ?? false)) return false;
+
+	if (PATH_DENYLIST.includes(props.path)) return false;
+
+	const codex = nodeType?.codex;
+	if (!codex?.categories?.includes('AI') || !codex?.subcategories?.AI?.includes('Tools'))
+		return false;
+
+	return !props.parameter.noDataExpression && 'options' !== props.parameter.type;
+}
+
+export function makeOverrideValue(
+	context: OverrideContext,
+	nodeType: INodeTypeDescription | null | undefined,
+): FromAIOverride | null {
+	if (!nodeType) return null;
+
+	if (canBeContentOverride(context, nodeType)) {
+		const fromAiOverride: FromAIOverride = {
+			type: 'fromAI',
+			extraProps: fromAIExtraProps,
+			extraPropValues: {},
+		};
+		updateExtraPropValues(fromAiOverride, context.value?.toString() ?? '');
+		return fromAiOverride;
+	}
+
+	return null;
+}
diff --git a/packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.ts b/packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.ts
deleted file mode 100644
index 8a70c15f1853f..0000000000000
--- a/packages/editor-ui/src/components/ParameterInputOverrides/parameterInputOverrides.ts
+++ /dev/null
@@ -1,170 +0,0 @@
-import {
-	extractFromAICalls,
-	FROM_AI_AUTO_GENERATED_MARKER,
-	type INodeTypeDescription,
-	type NodeParameterValueType,
-	type NodePropertyTypes,
-} from 'n8n-workflow';
-import { i18n } from '@/plugins/i18n';
-
-export interface ParameterOverride {
-	readonly extraProps: Record<string, ExtraPropValue>;
-	extraPropValues: Partial<Record<keyof ParameterOverride['extraProps'], NodeParameterValueType>>;
-	updateExtraPropValues: (s: string) => void;
-	buildValueFromOverride: (
-		props: Pick<OverrideContext, 'parameter'>,
-		excludeMarker: boolean,
-	) => string;
-	isOverrideValue: (s: string) => boolean;
-	parseOverrides: (s: string) => Partial<Record<string, string>> | null;
-}
-
-export type OverrideContext = {
-	parameter: {
-		name: string;
-		displayName: string;
-		type: NodePropertyTypes;
-		noDataExpression?: boolean;
-		typeOptions?: { editor?: string };
-	};
-	value: NodeParameterValueType;
-	path: string;
-};
-
-type FromAiOverrideExtraProps = 'description';
-type ExtraPropValue = {
-	initialValue: string;
-	tooltip: string;
-	type: NodePropertyTypes;
-	typeOptions?: { rows?: number };
-};
-
-function sanitizeFromAiParameterName(s: string) {
-	s = s.replace(/[^a-zA-Z0-9\-]/g, '_');
-
-	if (s.length >= 64) {
-		s = s.slice(0, 63);
-	}
-
-	return s;
-}
-
-export class FromAiOverride implements ParameterOverride {
-	static readonly NODE_DENYLIST = ['toolCode', 'toolHttpRequest'];
-
-	static readonly PATH_DENYLIST = [
-		'parameters.name',
-		'parameters.description',
-		// This is used in e.g. the telegram node if the dropdown selects manual mode
-		'parameters.toolDescription',
-	];
-
-	readonly extraProps: Record<FromAiOverrideExtraProps, ExtraPropValue> = {
-		description: {
-			initialValue: '',
-			type: 'string',
-			typeOptions: { rows: 2 },
-			tooltip: i18n.baseText('parameterOverride.descriptionTooltip'),
-		},
-	};
-
-	extraPropValues: Partial<Record<FromAiOverrideExtraProps, NodeParameterValueType>> = {};
-
-	updateExtraPropValues(s: string) {
-		const overrides = FromAiOverride.parseOverrides(s);
-		if (overrides) {
-			for (const [key, value] of Object.entries(overrides)) {
-				if (this.extraProps.hasOwnProperty(key)) {
-					if (this.extraProps[key as FromAiOverrideExtraProps].initialValue === value) {
-						delete this.extraPropValues[key as FromAiOverrideExtraProps];
-					} else {
-						this.extraPropValues[key as FromAiOverrideExtraProps] = value;
-					}
-				}
-			}
-		}
-	}
-
-	private fieldTypeToFromAiType(propType: NodePropertyTypes) {
-		switch (propType) {
-			case 'boolean':
-			case 'number':
-			case 'json':
-				return propType;
-			default:
-				return 'string';
-		}
-	}
-
-	static isOverrideValue(s: string) {
-		return s.startsWith(`={{ ${FROM_AI_AUTO_GENERATED_MARKER} $fromAI(`);
-	}
-
-	isOverrideValue = FromAiOverride.isOverrideValue;
-
-	buildValueFromOverride(props: Pick<OverrideContext, 'parameter'>, includeMarker: boolean) {
-		const marker = includeMarker ? `${FROM_AI_AUTO_GENERATED_MARKER} ` : '';
-		const key = sanitizeFromAiParameterName(props.parameter.displayName);
-		const description =
-			this.extraPropValues?.description?.toString() ?? this.extraProps.description.initialValue;
-		// We want to escape these characters here as the generated formula needs to be valid JS code, and we risk
-		// closing the string prematurely without it.
-		// If we don't escape \ then 'my \` description' as user input would end up as 'my \\` description'
-		// in the generated code, causing an unescaped backtick to close the string.
-		const sanitizedDescription = description.replace(/\\/g, '\\\\').replace(/`/g, '\\`');
-		const type = this.fieldTypeToFromAiType(props.parameter.type);
-
-		return `={{ ${marker}$fromAI('${key}', \`${sanitizedDescription}\`, '${type}') }}`;
-	}
-
-	static parseOverrides(
-		s: string,
-	): Record<keyof FromAiOverride['extraProps'], string | undefined> | null {
-		try {
-			// `extractFromAICalls` has different escape semantics from JS strings
-			// Specifically it makes \ escape any following character.
-			// So we need to escape our \ so we don't drop them accidentally
-			const calls = extractFromAICalls(s.replaceAll(/\\/g, '\\\\'));
-			if (calls.length === 1) {
-				return {
-					description: calls[0].description,
-				};
-			}
-		} catch (e) {}
-
-		return null;
-	}
-
-	parseOverrides = FromAiOverride.parseOverrides;
-
-	static canBeContentOverride(
-		props: Pick<OverrideContext, 'path' | 'parameter'>,
-		nodeType: INodeTypeDescription | null,
-	) {
-		if (FromAiOverride.NODE_DENYLIST.some((x) => nodeType?.name?.endsWith(x) ?? false))
-			return false;
-
-		if (FromAiOverride.PATH_DENYLIST.includes(props.path)) return false;
-
-		const codex = nodeType?.codex;
-		if (!codex?.categories?.includes('AI') || !codex?.subcategories?.AI?.includes('Tools'))
-			return false;
-
-		return !props.parameter.noDataExpression && 'options' !== props.parameter.type;
-	}
-}
-
-export function makeOverrideValue(
-	context: OverrideContext,
-	nodeType: INodeTypeDescription | null | undefined,
-): ParameterOverride | null {
-	if (!nodeType) return null;
-
-	if (FromAiOverride.canBeContentOverride(context, nodeType)) {
-		const fromAiOverride = new FromAiOverride();
-		fromAiOverride.updateExtraPropValues(context.value?.toString() ?? '');
-		return fromAiOverride;
-	}
-
-	return null;
-}
diff --git a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
index 66e6398450909..0da87de4ce1d0 100644
--- a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
+++ b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
@@ -47,9 +47,12 @@ import ResourceLocatorDropdown from './ResourceLocatorDropdown.vue';
 import { useTelemetry } from '@/composables/useTelemetry';
 import { onClickOutside, type VueInstance } from '@vueuse/core';
 import {
+	buildValueFromOverride,
+	isOverrideValue,
 	makeOverrideValue,
-	type ParameterOverride,
-} from '../ParameterInputOverrides/parameterInputOverrides';
+	updateExtraPropValues,
+	type FromAIOverride,
+} from '../ParameterInputOverrides/fromAIOverrideUtils';
 
 interface IResourceLocatorQuery {
 	results: INodeListSearchItems[];
@@ -286,7 +289,7 @@ const requiresSearchFilter = computed(
 	() => !!getPropertyArgument(currentMode.value, 'searchFilterRequired'),
 );
 
-const parameterOverrides = ref<ParameterOverride | null>(
+const parameterOverrides = ref<FromAIOverride | null>(
 	makeOverrideValue(
 		{
 			value: props.modelValue?.value ?? '',
@@ -303,9 +306,7 @@ const canBeContentOverride = computed(() => {
 });
 
 const isContentOverride = computed(
-	() =>
-		canBeContentOverride.value &&
-		!!parameterOverrides.value?.isOverrideValue(props.modelValue?.value?.toString() ?? ''),
+	() => canBeContentOverride.value && !!isOverrideValue(props.modelValue?.value?.toString() ?? ''),
 );
 
 const showOverrideButton = computed(
@@ -710,7 +711,7 @@ function onInputBlur(event: FocusEvent) {
 }
 
 function applyOverride() {
-	if (!props.node) return;
+	if (!props.node || !parameterOverrides.value) return;
 
 	telemetry.track(
 		'User turned on fromAI override',
@@ -720,16 +721,16 @@ function applyOverride() {
 		},
 		{ withPostHog: true },
 	);
-	parameterOverrides.value?.updateExtraPropValues(props.modelValue.value?.toString() ?? '');
+	updateExtraPropValues(parameterOverrides.value, props.modelValue.value?.toString() ?? '');
 
 	emit('update:modelValue', {
 		...props.modelValue,
-		value: parameterOverrides.value?.buildValueFromOverride(props, true),
+		value: buildValueFromOverride(parameterOverrides.value, props, true),
 	});
 }
 
 function removeOverride() {
-	if (!props.node) return;
+	if (!props.node || !parameterOverrides.value) return;
 
 	telemetry.track(
 		'User turned off fromAI override',
@@ -741,7 +742,7 @@ function removeOverride() {
 	);
 	emit('update:modelValue', {
 		...props.modelValue,
-		value: parameterOverrides.value?.buildValueFromOverride(props, false),
+		value: buildValueFromOverride(parameterOverrides.value, props, false),
 	});
 	void setTimeout(() => {
 		inputRef.value?.focus();

From 883d01631d6cc0f089b887d127466f9fa1049f8e Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Tue, 4 Feb 2025 15:51:32 +0100
Subject: [PATCH 77/82] fix types

---
 .../ParameterInputOverrides/ParameterOverrideSelectableList.vue | 1 +
 .../components/ParameterInputOverrides/fromAIOverrideUtils.ts   | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/ParameterInputOverrides/ParameterOverrideSelectableList.vue b/packages/editor-ui/src/components/ParameterInputOverrides/ParameterOverrideSelectableList.vue
index 8991b960c74e0..3d7d7e786c795 100644
--- a/packages/editor-ui/src/components/ParameterInputOverrides/ParameterOverrideSelectableList.vue
+++ b/packages/editor-ui/src/components/ParameterInputOverrides/ParameterOverrideSelectableList.vue
@@ -4,6 +4,7 @@ import type { IUpdateInformation } from '@/Interface';
 import { type INodeProperties } from 'n8n-workflow';
 import { buildValueFromOverride, type FromAIOverride } from './fromAIOverrideUtils';
 import { computed } from 'vue';
+import { N8nSelectableList } from 'n8n-design-system';
 
 type Props = {
 	parameter: INodeProperties;
diff --git a/packages/editor-ui/src/components/ParameterInputOverrides/fromAIOverrideUtils.ts b/packages/editor-ui/src/components/ParameterInputOverrides/fromAIOverrideUtils.ts
index c2abd5152cf74..d28e6ad537c33 100644
--- a/packages/editor-ui/src/components/ParameterInputOverrides/fromAIOverrideUtils.ts
+++ b/packages/editor-ui/src/components/ParameterInputOverrides/fromAIOverrideUtils.ts
@@ -31,7 +31,7 @@ type FromAIExtraProps = 'description';
 export type FromAIOverride = {
 	type: 'fromAI';
 	readonly extraProps: Record<FromAIExtraProps, ExtraPropValue>;
-	extraPropValues: Partial<Record<FromAIExtraProps, NodeParameterValueType>>;
+	extraPropValues: Partial<Record<string, NodeParameterValueType>>;
 };
 
 function sanitizeFromAiParameterName(s: string) {

From ee7f39abebcfe79b619431e1d160a8f9179cea7b Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Tue, 4 Feb 2025 16:52:56 +0100
Subject: [PATCH 78/82] move more code and change backslash/quote escaping

---
 .../src/components/ParameterInputFull.vue     | 30 ++++++++--------
 .../ParameterOverrideSelectableList.vue       |  2 +-
 .../ResourceLocator/ResourceLocator.vue       | 30 ++++++++--------
 .../fromAIOverrideUtils.test.ts               | 19 ++++++----
 .../fromAIOverrideUtils.ts                    | 35 ++++++++++++++-----
 5 files changed, 70 insertions(+), 46 deletions(-)
 rename packages/editor-ui/src/{components/ParameterInputOverrides => utils}/fromAIOverrideUtils.test.ts (88%)
 rename packages/editor-ui/src/{components/ParameterInputOverrides => utils}/fromAIOverrideUtils.ts (77%)

diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 21d3b5f33fe95..67a1c8dc6b9f5 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -23,10 +23,10 @@ import { N8nInputLabel } from 'n8n-design-system';
 import {
 	buildValueFromOverride,
 	type FromAIOverride,
-	isOverrideValue,
+	isFromAIOverrideValue,
 	makeOverrideValue,
-	updateExtraPropValues,
-} from './ParameterInputOverrides/fromAIOverrideUtils';
+	updateFromAIOverrideValues,
+} from '../utils/fromAIOverrideUtils';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useTelemetry } from '@/composables/useTelemetry';
 
@@ -73,7 +73,7 @@ const nodeTypesStore = useNodeTypesStore();
 const telemetry = useTelemetry();
 
 const node = computed(() => ndvStore.activeNode);
-const parameterOverrides = ref<FromAIOverride | null>(
+const fromAIOverride = ref<FromAIOverride | null>(
 	makeOverrideValue(
 		props,
 		node.value && nodeTypesStore.getNodeType(node.value.type, node.value.typeVersion),
@@ -84,11 +84,11 @@ const canBeContentOverride = computed(() => {
 	// The resourceLocator handles overrides separately
 	if (!node.value || isResourceLocator.value) return false;
 
-	return parameterOverrides.value !== null;
+	return fromAIOverride.value !== null;
 });
 
 const isContentOverride = computed(
-	() => canBeContentOverride.value && !!isOverrideValue(props.value?.toString() ?? ''),
+	() => canBeContentOverride.value && !!isFromAIOverrideValue(props.value?.toString() ?? ''),
 );
 
 const hint = computed(() => i18n.nodeText().hint(props.parameter, props.path));
@@ -110,7 +110,7 @@ const showExpressionSelector = computed(() => {
 		// infer whether it's overridden and we should hide the toggle
 		const value =
 			props.value && typeof props.value === 'object' && 'value' in props.value && props.value.value;
-		if (value && isOverrideValue(String(value))) {
+		if (value && isFromAIOverrideValue(String(value))) {
 			return false;
 		}
 
@@ -260,7 +260,7 @@ const isSingleLineInput: ComputedRef<boolean> = computed(
 );
 
 function applyOverride() {
-	if (!parameterOverrides.value) return;
+	if (!fromAIOverride.value) return;
 
 	telemetry.track(
 		'User turned on fromAI override',
@@ -270,8 +270,8 @@ function applyOverride() {
 		},
 		{ withPostHog: true },
 	);
-	updateExtraPropValues(parameterOverrides.value, String(props.value));
-	const value = buildValueFromOverride(parameterOverrides.value, props, true);
+	updateFromAIOverrideValues(fromAIOverride.value, String(props.value));
+	const value = buildValueFromOverride(fromAIOverride.value, props, true);
 	valueChanged({
 		node: node.value?.name,
 		name: props.path,
@@ -280,7 +280,7 @@ function applyOverride() {
 }
 
 function removeOverride(clearField = false) {
-	if (!parameterOverrides.value) return;
+	if (!fromAIOverride.value) return;
 
 	telemetry.track(
 		'User turned off fromAI override',
@@ -295,7 +295,7 @@ function removeOverride(clearField = false) {
 		name: props.path,
 		value: clearField
 			? props.parameter.default
-			: buildValueFromOverride(parameterOverrides.value, props, false),
+			: buildValueFromOverride(fromAIOverride.value, props, false),
 	});
 	void setTimeout(async () => {
 		await parameterInputWrapper.value?.focusInput();
@@ -346,7 +346,7 @@ function removeOverride(clearField = false) {
 		>
 			<template #default="{ droppable, activeDrop }">
 				<FromAiOverrideField
-					v-if="parameterOverrides && isContentOverride"
+					v-if="fromAIOverride && isContentOverride"
 					:is-read-only="isReadOnly"
 					@close="removeOverride"
 				/>
@@ -401,8 +401,8 @@ function removeOverride(clearField = false) {
 			/>
 		</div>
 		<ParameterOverrideSelectableList
-			v-if="isContentOverride && parameterOverrides"
-			v-model="parameterOverrides"
+			v-if="isContentOverride && fromAIOverride"
+			v-model="fromAIOverride"
 			:parameter="parameter"
 			:path="path"
 			:is-read-only="isReadOnly"
diff --git a/packages/editor-ui/src/components/ParameterInputOverrides/ParameterOverrideSelectableList.vue b/packages/editor-ui/src/components/ParameterInputOverrides/ParameterOverrideSelectableList.vue
index 3d7d7e786c795..ff246ce571d0b 100644
--- a/packages/editor-ui/src/components/ParameterInputOverrides/ParameterOverrideSelectableList.vue
+++ b/packages/editor-ui/src/components/ParameterInputOverrides/ParameterOverrideSelectableList.vue
@@ -2,7 +2,7 @@
 import type { IUpdateInformation } from '@/Interface';
 
 import { type INodeProperties } from 'n8n-workflow';
-import { buildValueFromOverride, type FromAIOverride } from './fromAIOverrideUtils';
+import { buildValueFromOverride, type FromAIOverride } from '../../utils/fromAIOverrideUtils';
 import { computed } from 'vue';
 import { N8nSelectableList } from 'n8n-design-system';
 
diff --git a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
index 0da87de4ce1d0..bc82691d0ee3a 100644
--- a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
+++ b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
@@ -48,11 +48,11 @@ import { useTelemetry } from '@/composables/useTelemetry';
 import { onClickOutside, type VueInstance } from '@vueuse/core';
 import {
 	buildValueFromOverride,
-	isOverrideValue,
+	isFromAIOverrideValue,
 	makeOverrideValue,
-	updateExtraPropValues,
+	updateFromAIOverrideValues,
 	type FromAIOverride,
-} from '../ParameterInputOverrides/fromAIOverrideUtils';
+} from '../../utils/fromAIOverrideUtils';
 
 interface IResourceLocatorQuery {
 	results: INodeListSearchItems[];
@@ -289,7 +289,7 @@ const requiresSearchFilter = computed(
 	() => !!getPropertyArgument(currentMode.value, 'searchFilterRequired'),
 );
 
-const parameterOverrides = ref<FromAIOverride | null>(
+const fromAIOverride = ref<FromAIOverride | null>(
 	makeOverrideValue(
 		{
 			value: props.modelValue?.value ?? '',
@@ -302,11 +302,13 @@ const parameterOverrides = ref<FromAIOverride | null>(
 const canBeContentOverride = computed(() => {
 	if (!props.node) return false;
 
-	return parameterOverrides.value !== null;
+	return fromAIOverride.value !== null;
 });
 
 const isContentOverride = computed(
-	() => canBeContentOverride.value && !!isOverrideValue(props.modelValue?.value?.toString() ?? ''),
+	() =>
+		canBeContentOverride.value &&
+		!!isFromAIOverrideValue(props.modelValue?.value?.toString() ?? ''),
 );
 
 const showOverrideButton = computed(
@@ -711,7 +713,7 @@ function onInputBlur(event: FocusEvent) {
 }
 
 function applyOverride() {
-	if (!props.node || !parameterOverrides.value) return;
+	if (!props.node || !fromAIOverride.value) return;
 
 	telemetry.track(
 		'User turned on fromAI override',
@@ -721,16 +723,16 @@ function applyOverride() {
 		},
 		{ withPostHog: true },
 	);
-	updateExtraPropValues(parameterOverrides.value, props.modelValue.value?.toString() ?? '');
+	updateFromAIOverrideValues(fromAIOverride.value, props.modelValue.value?.toString() ?? '');
 
 	emit('update:modelValue', {
 		...props.modelValue,
-		value: buildValueFromOverride(parameterOverrides.value, props, true),
+		value: buildValueFromOverride(fromAIOverride.value, props, true),
 	});
 }
 
 function removeOverride() {
-	if (!props.node || !parameterOverrides.value) return;
+	if (!props.node || !fromAIOverride.value) return;
 
 	telemetry.track(
 		'User turned off fromAI override',
@@ -742,7 +744,7 @@ function removeOverride() {
 	);
 	emit('update:modelValue', {
 		...props.modelValue,
-		value: buildValueFromOverride(parameterOverrides.value, props, false),
+		value: buildValueFromOverride(fromAIOverride.value, props, false),
 	});
 	void setTimeout(() => {
 		inputRef.value?.focus();
@@ -853,7 +855,7 @@ function removeOverride() {
 								@keydown.stop="onKeyDown"
 							>
 								<FromAiOverrideField
-									v-if="parameterOverrides && isContentOverride"
+									v-if="fromAIOverride && isContentOverride"
 									:class="[$style.inputField, $style.fromAiOverrideField]"
 									:is-read-only="isReadOnly"
 									@close="removeOverride"
@@ -921,8 +923,8 @@ function removeOverride() {
 			</div>
 		</ResourceLocatorDropdown>
 		<ParameterOverrideSelectableList
-			v-if="isContentOverride && parameterOverrides"
-			v-model="parameterOverrides"
+			v-if="isContentOverride && fromAIOverride"
+			v-model="fromAIOverride"
 			:parameter="parameter"
 			:path="path"
 			:is-read-only="isReadOnly"
diff --git a/packages/editor-ui/src/components/ParameterInputOverrides/fromAIOverrideUtils.test.ts b/packages/editor-ui/src/utils/fromAIOverrideUtils.test.ts
similarity index 88%
rename from packages/editor-ui/src/components/ParameterInputOverrides/fromAIOverrideUtils.test.ts
rename to packages/editor-ui/src/utils/fromAIOverrideUtils.test.ts
index b5ef5ac6bc39d..8144f5c60cff1 100644
--- a/packages/editor-ui/src/components/ParameterInputOverrides/fromAIOverrideUtils.test.ts
+++ b/packages/editor-ui/src/utils/fromAIOverrideUtils.test.ts
@@ -2,7 +2,7 @@ import type { FromAIOverride, OverrideContext } from './fromAIOverrideUtils';
 import {
 	buildValueFromOverride,
 	fromAIExtraProps,
-	isOverrideValue,
+	isFromAIOverrideValue,
 	makeOverrideValue,
 	parseOverrides,
 } from './fromAIOverrideUtils';
@@ -104,8 +104,10 @@ describe('makeOverrideValue', () => {
 
 describe('FromAiOverride', () => {
 	it('correctly identifies override values', () => {
-		expect(isOverrideValue('={{ $fromAI() }}')).toBe(false);
-		expect(isOverrideValue('={{ /*n8n-auto-generated-fromAI-override*/ $fromAI() }}')).toBe(true);
+		expect(isFromAIOverrideValue('={{ $fromAI() }}')).toBe(false);
+		expect(isFromAIOverrideValue('={{ /*n8n-auto-generated-fromAI-override*/ $fromAI() }}')).toBe(
+			true,
+		);
 	});
 
 	it('should parseOverrides as expected', () => {
@@ -129,10 +131,13 @@ describe('FromAiOverride', () => {
 	});
 
 	test.each<[string, string, string]>([
-		['normal case', '$fromAI("a", `b`)', 'b'],
-		['working', '$fromAI("a", `a \\` \\\\\\``)', 'a ` \\`'],
-		// ['failing', '$fromAI("a", `\\``)', '`'],
-	])('should handle backtick escaping %s', (_name, value, expected) => {
+		['none', '$fromAI("a", `b`)', 'b'],
+		['a simple case of', '$fromAI("a", `\\``)', '`'],
+		// this is a bug in the current implementation
+		// see related comments in the main file
+		// We try to use different quote characters where possible
+		['a complex case of', '$fromAI("a", `a \\` \\\\\\``)', 'a ` `'],
+	])('should handle %s backtick escaping ', (_name, value, expected) => {
 		expect(parseOverrides(value)).toEqual({ description: expected });
 	});
 
diff --git a/packages/editor-ui/src/components/ParameterInputOverrides/fromAIOverrideUtils.ts b/packages/editor-ui/src/utils/fromAIOverrideUtils.ts
similarity index 77%
rename from packages/editor-ui/src/components/ParameterInputOverrides/fromAIOverrideUtils.ts
rename to packages/editor-ui/src/utils/fromAIOverrideUtils.ts
index d28e6ad537c33..e5272de69587f 100644
--- a/packages/editor-ui/src/components/ParameterInputOverrides/fromAIOverrideUtils.ts
+++ b/packages/editor-ui/src/utils/fromAIOverrideUtils.ts
@@ -69,7 +69,7 @@ function isExtraPropKey(
 	return extraProps.hasOwnProperty(key);
 }
 
-export function updateExtraPropValues(override: FromAIOverride, expr: string) {
+export function updateFromAIOverrideValues(override: FromAIOverride, expr: string) {
 	const { extraProps, extraPropValues } = override;
 	const overrides = parseOverrides(expr);
 	if (overrides) {
@@ -96,10 +96,18 @@ function fieldTypeToFromAiType(propType: NodePropertyTypes) {
 	}
 }
 
-export function isOverrideValue(s: string) {
+export function isFromAIOverrideValue(s: string) {
 	return s.startsWith(`={{ ${FROM_AI_AUTO_GENERATED_MARKER} $fromAI(`);
 }
 
+function getBestQuoteChar(description: string) {
+	if (description.includes('\n')) return '`';
+
+	if (!description.includes('`')) return '`';
+	if (!description.includes('"')) return '"';
+	return "'";
+}
+
 export function buildValueFromOverride(
 	override: FromAIOverride,
 	props: Pick<OverrideContext, 'parameter'>,
@@ -110,24 +118,33 @@ export function buildValueFromOverride(
 	const key = sanitizeFromAiParameterName(props.parameter.displayName);
 	const description =
 		extraPropValues?.description?.toString() ?? extraProps.description.initialValue;
+
 	// We want to escape these characters here as the generated formula needs to be valid JS code, and we risk
 	// closing the string prematurely without it.
-	// If we don't escape \ then 'my \` description' as user input would end up as 'my \\` description'
-	// in the generated code, causing an unescaped backtick to close the string.
-	const sanitizedDescription = description.replace(/\\/g, '\\\\').replace(/`/g, '\\`');
+	// If we don't escape \ then <my \' description> as  would end up as 'my \\' description' in
+	// the generated code, causing an unescaped quoteChar to close the string.
+	// We try to minimize this by looking for an unused quote char first
+	const quoteChar = getBestQuoteChar(description);
+	const sanitizedDescription = description
+		.replaceAll(/\\/g, '\\\\')
+		.replaceAll(quoteChar, `\\${quoteChar}`);
 	const type = fieldTypeToFromAiType(props.parameter.type);
 
-	return `={{ ${marker}$fromAI('${key}', \`${sanitizedDescription}\`, '${type}') }}`;
+	return `={{ ${marker}$fromAI('${key}', ${quoteChar}${sanitizedDescription}${quoteChar}, '${type}') }}`;
 }
 
 export function parseOverrides(
-	s: string,
+	expression: string,
 ): Record<keyof FromAIOverride['extraProps'], string | undefined> | null {
 	try {
 		// `extractFromAICalls` has different escape semantics from JS strings
 		// Specifically it makes \ escape any following character.
 		// So we need to escape our \ so we don't drop them accidentally
-		const calls = extractFromAICalls(s.replaceAll(/\\/g, '\\\\'));
+		// However ` used in the description cause \` to appear here, which would break
+		// So we take the hit and expose the bug for backticks only, turning \` into `.
+		const preparedExpression = expression.replace(/\\[^`]/g, '\\\\');
+
+		const calls = extractFromAICalls(preparedExpression);
 		if (calls.length === 1) {
 			return {
 				description: calls[0].description,
@@ -165,7 +182,7 @@ export function makeOverrideValue(
 			extraProps: fromAIExtraProps,
 			extraPropValues: {},
 		};
-		updateExtraPropValues(fromAiOverride, context.value?.toString() ?? '');
+		updateFromAIOverrideValues(fromAiOverride, context.value?.toString() ?? '');
 		return fromAiOverride;
 	}
 

From 9f3a031d17a43cac182f1f5a0d53a238396bc562 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Tue, 4 Feb 2025 17:22:54 +0100
Subject: [PATCH 79/82] remove comment

---
 .../components/ParameterInputOverrides/FromAiOverrideButton.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideButton.vue b/packages/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideButton.vue
index 8b11d1a910929..388941569e8cc 100644
--- a/packages/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideButton.vue
+++ b/packages/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideButton.vue
@@ -15,7 +15,7 @@ const emit = defineEmits<{
 		</template>
 
 		<N8nButton
-			:class="[$style.overrideButton /*, $style.noCornersBottom, $style.overrideButtonInOptions*/]"
+			:class="[$style.overrideButton]"
 			type="tertiary"
 			data-test-id="from-ai-override-button"
 			@click="emit('click')"

From 8080c422c42a165f30408ddd066e06e46c2bbb03 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Tue, 4 Feb 2025 17:30:59 +0100
Subject: [PATCH 80/82] fix e2e tests

---
 .../editor-ui/src/components/ParameterInputFull.test.ts     | 6 +++---
 packages/editor-ui/src/components/ParameterInputFull.vue    | 1 -
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInputFull.test.ts b/packages/editor-ui/src/components/ParameterInputFull.test.ts
index ef4ae5ee24c0a..9dfe37fb4fe94 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.test.ts
+++ b/packages/editor-ui/src/components/ParameterInputFull.test.ts
@@ -80,7 +80,7 @@ describe('ParameterInputFull.vue', () => {
 				},
 			},
 		});
-		expect(getByTestId('parameter-input-wrapper')).toBeInTheDocument();
+		expect(getByTestId('parameter-input')).toBeInTheDocument();
 	});
 
 	it('should render parameter with override button inline', async () => {
@@ -102,7 +102,7 @@ describe('ParameterInputFull.vue', () => {
 				value: '',
 			},
 		});
-		expect(getByTestId('parameter-input-wrapper')).toBeInTheDocument();
+		expect(getByTestId('parameter-input')).toBeInTheDocument();
 		expect(getByTestId('from-ai-override-button')).toBeInTheDocument();
 	});
 
@@ -129,7 +129,7 @@ describe('ParameterInputFull.vue', () => {
 				}}`,
 			},
 		});
-		expect(getByTestId('parameter-input-wrapper')).toBeInTheDocument();
+		expect(getByTestId('parameter-input')).toBeInTheDocument();
 		expect(getByTestId('from-ai-override-button')).toBeInTheDocument();
 	});
 
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 67a1c8dc6b9f5..92a2dbfe1f8db 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -369,7 +369,6 @@ function removeOverride(clearField = false) {
 						:event-bus="eventBus"
 						:can-be-overridden="canBeContentOverride"
 						input-size="small"
-						data-test-id="parameter-input-wrapper"
 						@update="valueChanged"
 						@text-input="onTextInput"
 						@focus="onFocus"

From 6172eb12a01082dfd2058df28269b3b15244776b Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Tue, 4 Feb 2025 17:37:44 +0100
Subject: [PATCH 81/82] fix another e2e test

---
 cypress/e2e/16-form-trigger-node.cy.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/cypress/e2e/16-form-trigger-node.cy.ts b/cypress/e2e/16-form-trigger-node.cy.ts
index ed901107ea60e..033753bc5c91e 100644
--- a/cypress/e2e/16-form-trigger-node.cy.ts
+++ b/cypress/e2e/16-form-trigger-node.cy.ts
@@ -62,12 +62,14 @@ describe('n8n Form Trigger', () => {
 		getVisibleSelect().contains('Dropdown').click();
 		cy.contains('button', 'Add Field Option').click();
 		cy.contains('label', 'Field Options')
+			.parent()
 			.parent()
 			.nextAll()
 			.find('[data-test-id="parameter-input-field"]')
 			.eq(0)
 			.type('Option 1');
 		cy.contains('label', 'Field Options')
+			.parent()
 			.parent()
 			.nextAll()
 			.find('[data-test-id="parameter-input-field"]')

From 972928c12cbac49bcae6e7ee51dfd10481ce0dc1 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Tue, 4 Feb 2025 17:50:14 +0100
Subject: [PATCH 82/82] fix more e2e tests

---
 cypress/composables/ndv.ts              |  2 +-
 cypress/e2e/48-subworkflow-inputs.cy.ts | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/cypress/composables/ndv.ts b/cypress/composables/ndv.ts
index 9ec6f3ba19c9b..3ad823d4d5089 100644
--- a/cypress/composables/ndv.ts
+++ b/cypress/composables/ndv.ts
@@ -225,7 +225,7 @@ export function populateMapperFields(fields: ReadonlyArray<[string, string]>) {
 		getParameterInputByName(name).type(value);
 
 		// Click on a parent to dismiss the pop up which hides the field below.
-		getParameterInputByName(name).parent().parent().parent().click('topLeft');
+		getParameterInputByName(name).parent().parent().parent().parent().click('topLeft');
 	}
 }
 
diff --git a/cypress/e2e/48-subworkflow-inputs.cy.ts b/cypress/e2e/48-subworkflow-inputs.cy.ts
index d529ec2c259cc..716d253b8ca69 100644
--- a/cypress/e2e/48-subworkflow-inputs.cy.ts
+++ b/cypress/e2e/48-subworkflow-inputs.cy.ts
@@ -90,8 +90,8 @@ describe('Sub-workflow creation and typed usage', () => {
 		clickExecuteNode();
 
 		const expected = [
-			['-1', 'A String', '0:11:true2:3', 'aKey:-1', '[empty object]', 'false'],
-			['-1', 'Another String', '[empty array]', 'aDifferentKey:-1', '[empty array]', 'false'],
+			['-1', 'A String', '0:11:true2:3', 'aKey:-1', '[empty object]', 'true'],
+			['-1', 'Another String', '[empty array]', 'aDifferentKey:-1', '[empty array]', 'true'],
 		];
 		assertOutputTableContent(expected);
 
@@ -110,8 +110,8 @@ describe('Sub-workflow creation and typed usage', () => {
 		clickExecuteNode();
 
 		const expected2 = [
-			['-1', '5', '0:11:true2:3', 'aKey:-1', '[empty object]', 'false'],
-			['-1', '5', '[empty array]', 'aDifferentKey:-1', '[empty array]', 'false'],
+			['-1', '5', '0:11:true2:3', 'aKey:-1', '[empty object]', 'true'],
+			['-1', '5', '[empty array]', 'aDifferentKey:-1', '[empty array]', 'true'],
 		];
 
 		assertOutputTableContent(expected2);
@@ -167,8 +167,8 @@ describe('Sub-workflow creation and typed usage', () => {
 				);
 
 				assertOutputTableContent([
-					['[null]', '[null]', '[null]', '[null]', '[null]', 'false'],
-					['[null]', '[null]', '[null]', '[null]', '[null]', 'false'],
+					['[null]', '[null]', '[null]', '[null]', '[null]', 'true'],
+					['[null]', '[null]', '[null]', '[null]', '[null]', 'true'],
 				]);
 
 				clickExecuteNode();