n8n 2.35.4 → 2.36.2

package/templates/form-shell.handlebars

@@ -29,136 +29,158 @@
 			--color-icon-text: #6a5bdd;
 			--border-radius-card: 8px;
 			--border-radius-input: 6px;
-			--container-width: 480px;
+			/* Matches the form card's own --container-width so the panel and the card
+			   line up edge to edge; the narrow-viewport rule below mirrors the form's. */
+			--container-width: 448px;
 			--box-shadow-card: 0px 4px 16px 0px var(--color-card-shadow);
 			--box-shadow-dialog: 0px 12px 48px rgba(0, 0, 0, 0.18);
 		}
 		*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; }
 		body { font-family: var(--font-family); background: var(--color-background); min-height: 100vh; }
 		.shell { width: 100%; padding-top: 24px; }
-		/* Aligned to the form card's width, which centers itself in the iframe below. */
-		.req-card, .req-strip { width: var(--container-width); max-width: calc(100vw - 32px); margin: 0 auto 16px; }
+		.req-card, .req-summary { width: var(--container-width); margin: 0 auto 16px; }
 
-		/* --- Required-credentials card (1–2 credentials, inline) --- */
+		/* --- Single-account panel: the credential row connects directly --- */
 		.req-card {
 			background: var(--color-card-bg);
 			border: 1px solid var(--color-card-border);
 			border-radius: var(--border-radius-card);
 			box-shadow: var(--box-shadow-card);
-			padding: 20px;
+			padding: 8px 20px;
 		}
-		.req-title { font-size: 15px; font-weight: 600; color: var(--color-header); }
-		.req-sub { font-size: 13px; color: var(--color-muted); margin-top: 4px; margin-bottom: 14px; }
 
-		/* --- Compact strip (3+ credentials) --- */
-		.req-strip {
+		/* --- Summary line (two or more accounts, details behind the dialog) --- */
+		.req-summary {
 			display: flex;
 			align-items: center;
-			gap: 14px;
+			gap: 12px;
 			background: var(--color-card-bg);
 			border: 1px solid var(--color-card-border);
 			border-radius: var(--border-radius-card);
 			box-shadow: var(--box-shadow-card);
-			padding: 16px 18px;
+			padding: 14px 18px;
 		}
-		.stack { display: flex; align-items: center; }
-		.stack .cred-icon { margin-right: -8px; border: 2px solid var(--color-card-bg); }
-		.stack .more {
-			width: 28px; height: 28px; border-radius: 6px; border: 2px solid var(--color-card-bg);
-			background: #eceafd; color: var(--color-icon-text);
-			font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center;
-		}
-		.strip-meta { flex: 1; min-width: 0; }
-		.strip-title { font-size: 14px; font-weight: 600; color: var(--color-header); }
-		.strip-count { font-size: 13px; color: var(--color-muted); margin-top: 2px; }
+		.summary-icon { display: flex; flex-shrink: 0; color: var(--color-muted); }
+		.summary-icon svg { display: block; }
+		.summary-icon .icon-ok, .req-summary.all-connected .summary-icon .icon-pending { display: none; }
+		.req-summary.all-connected .summary-icon { color: var(--color-ok); }
+		.req-summary.all-connected .summary-icon .icon-ok { display: block; }
+		.summary-text { flex: 1; min-width: 0; font-size: 13px; color: var(--color-header); }
 
-		/* --- Credential row (shared by card + dialog) --- */
+		/* --- Credential row (shared by the single-account panel + dialog) --- */
 		.cred-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
-		.req-card .cred-row + .cred-row,
-		.dialog .cred-row + .cred-row { border-top: 1px solid #f0f1f4; }
 		.cred-icon {
 			width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0;
 			background: var(--color-icon-bg); color: var(--color-icon-text);
 			font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center;
 		}
+		/* Provider icon, served unauthenticated from /icons/** on this same origin. */
+		img.cred-icon { background: none; object-fit: contain; }
 		.cred-meta { flex: 1; min-width: 0; }
 		.cred-name { display: block; font-size: 14px; font-weight: 600; color: var(--color-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+		/* Stays muted when connected — the green lives on the row's control, not the copy. */
 		.cred-sub { display: block; font-size: 12px; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-		.cred-sub.connected { color: var(--color-ok); }
 
 		/* --- Buttons --- */
 		.btn {
 			font-family: var(--font-family); font-size: 13px; font-weight: 600;
 			padding: 8px 16px; border-radius: var(--border-radius-input); border: 1px solid transparent; cursor: pointer;
+			flex-shrink: 0;
 		}
 		.btn-primary { background: var(--color-primary); color: var(--color-primary-text); }
 		.btn-primary:hover { opacity: 0.88; }
 		.btn-secondary { background: var(--color-card-bg); color: var(--color-label); border-color: var(--color-card-border); }
 		.btn-secondary:hover { border-color: var(--color-muted); }
+		/* Connect (primary) while accounts are outstanding; Manage (quiet) once they're all in. */
+		#open-dialog { display: inline-flex; align-items: center; gap: 6px; }
+		#open-dialog .dot { display: none; width: 7px; height: 7px; border-radius: 50%; background: var(--color-ok); }
+		.req-summary.all-connected #open-dialog { background: var(--color-card-bg); color: var(--color-label); border-color: var(--color-card-border); }
+		.req-summary.all-connected #open-dialog:hover { opacity: 1; border-color: var(--color-muted); }
+		.req-summary.all-connected #open-dialog .dot { display: block; }
 		.cred-connected { position: relative; }
-		.btn-connected { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--color-ok); font-family: var(--font-family); font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 4px; }
+		/* Bordered like the Connect button it replaces, so the row's control keeps its shape. */
+		.btn-connected {
+			display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
+			background: var(--color-card-bg); border: 1px solid var(--color-card-border); border-radius: var(--border-radius-input);
+			color: var(--color-label); font-family: var(--font-family); font-size: 13px; font-weight: 600; padding: 8px 12px;
+		}
+		.btn-connected:hover { border-color: var(--color-muted); }
+		.btn-connected .caret { color: var(--color-muted); }
 		.btn-connected .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-ok); }
 		/* Fixed so the menu escapes the dialog's overflow clipping; positioned by JS. */
 		.cred-menu { display: none; position: fixed; min-width: 150px; background: var(--color-card-bg); border: 1px solid var(--color-card-border); border-radius: 6px; box-shadow: var(--box-shadow-dialog); z-index: 30; }
 		.cred-menu.open { display: block; }
 		.btn-disconnect { display: block; width: 100%; text-align: left; white-space: nowrap; background: none; border: 0; padding: 8px 14px; font-family: var(--font-family); font-size: 13px; color: #a02f28; cursor: pointer; }
 		.btn-disconnect:hover { background: #fdeceb; }
-		.cred-status-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--color-ok); white-space: nowrap; }
-		.cred-status-ok .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-ok); }
 		.cred-blocked { font-size: 13px; color: var(--color-muted); }
 
 		/* --- Dialog --- */
 		.overlay { display: none; position: fixed; inset: 0; background: rgba(20, 20, 30, 0.28); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); align-items: center; justify-content: center; z-index: 10; padding: 16px; }
 		.overlay.open { display: flex; }
-		.dialog { width: 480px; max-width: 100%; max-height: calc(100vh - 48px); display: flex; flex-direction: column; background: var(--color-card-bg); border-radius: 12px; box-shadow: var(--box-shadow-dialog); overflow: hidden; }
+		.dialog { width: 448px; max-width: 100%; max-height: calc(100vh - 48px); display: flex; flex-direction: column; background: var(--color-card-bg); border-radius: 12px; box-shadow: var(--box-shadow-dialog); overflow: hidden; }
 		.dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 8px; }
 		.dialog-title { font-size: 16px; font-weight: 600; color: var(--color-header); }
 		.dialog-close { background: none; border: 0; font-size: 20px; line-height: 1; color: var(--color-muted); cursor: pointer; }
-		.dialog-sub { padding: 0 20px 8px; font-size: 13px; color: var(--color-muted); }
+		.dialog-sub { padding: 0 20px 16px; font-size: 13px; color: var(--color-muted); }
 		.dialog-list { padding: 0 20px; overflow-y: auto; }
 		.dialog-foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-top: 1px solid #f0f1f4; }
 		.dialog-count { font-size: 13px; color: var(--color-muted); }
 
 		/* --- The form itself, unchanged, in a null-origin sandboxed iframe --- */
 		#form-frame { display: block; width: 100%; height: calc(100vh - 40px); border: 0; background: transparent; }
+
+		/* Mirrors the form card's own narrow-viewport width so the edges stay aligned. */
+		@media only screen and (max-width: 500px) {
+			.req-card, .req-summary { width: 95%; }
+		}
 	</style>
 </head>
 
 <body>
+	{{#*inline "credRow"}}
+		<div
+			class='cred-row'
+			data-cred-id='{{id}}'
+			data-status='{{status}}'
+			data-resolver-id='{{resolverId}}'
+			data-not-connected-text='{{notConnectedText}}'
+			{{#if connected}} data-connected='true'{{/if}}
+			{{#if revokeUrl}} data-revoke-url='{{revokeUrl}}'{{/if}}
+		>
+			{{!-- The provider icon when it resolved server-side, else the letter tile. --}}
+			{{#if iconUrl}}
+				<img class='cred-icon cred-icon-img' src='{{iconUrl}}' alt='' data-initial='{{initial}}' />
+			{{else}}
+				<span class='cred-icon'>{{initial}}</span>
+			{{/if}}
+			<span class='cred-meta'>
+				<span class='cred-name'>{{name}}</span>
+				<span class='cred-sub'>{{#if connected}}{{#if account}}Connected as {{account}}{{else}}Connected{{/if}}{{else}}{{notConnectedText}}{{/if}}{{#if usedBy}} · used by {{usedBy}}{{/if}}</span>
+			</span>
+			{{#if connected}}
+				<span class='cred-connected'><button type='button' class='btn-connected'><span class='dot'></span> Connected <span class='caret'>&#9662;</span></button><div class='cred-menu'><button type='button' class='btn-disconnect'>Disconnect</button></div></span>
+			{{else if authorizationUrl}}
+				<button class='btn btn-secondary connect' data-url='{{authorizationUrl}}'>{{#if (eq status 'expired')}}Reconnect{{else}}Connect{{/if}}</button>
+			{{else}}
+				<span class='cred-blocked'>Ask the form owner</span>
+			{{/if}}
+		</div>
+	{{/inline}}
+
 	<div class='shell' data-submitter-email='{{submitterEmail}}'>
 		{{#if useDialog}}
-			<div class='req-strip'>
-				<div class='stack'>
-					{{#each iconStack}}
-						<span class='cred-icon'>{{this}}</span>
-					{{/each}}
-					{{#if moreCount}}<span class='more'>+{{moreCount}}</span>{{/if}}
-				</div>
-				<div class='strip-meta'>
-					<div class='strip-title'>Required credentials</div>
-					<div class='strip-count'>{{connectedCount}} of {{total}} credentials connected</div>
-				</div>
-				<button class='btn btn-primary' id='open-dialog'>Connect</button>
+			<div class='req-summary{{#if allConnected}} all-connected{{/if}}' id='req-summary'>
+				<span class='summary-icon'>
+					<svg class='icon-pending' width='17' height='17' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.3' aria-hidden='true'><circle cx='8' cy='8' r='6.7' /><path d='M8 7.3v3.5' stroke-linecap='round' /><circle cx='8' cy='5.1' r='.8' fill='currentColor' stroke='none' /></svg>
+					<svg class='icon-ok' width='17' height='17' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.3' aria-hidden='true'><circle cx='8' cy='8' r='6.7' /><path d='m5.2 8.2 1.9 1.9 3.7-4' stroke-linecap='round' stroke-linejoin='round' /></svg>
+				</span>
+				<span class='summary-text' id='summary-text'>{{summaryText}}</span>
+				<button class='btn btn-primary' id='open-dialog'><span class='dot'></span><span class='label'>{{#if allConnected}}Manage{{else}}Connect{{/if}}</span></button>
 			</div>
 		{{else}}
 			<div class='req-card'>
-				<div class='req-title'>Required credentials</div>
-				<div class='req-sub'>Connect required credentials to run this form using your data.</div>
 				{{#each credentials}}
-					<div class='cred-row' data-cred-id='{{id}}' data-status='{{status}}' data-resolver-id='{{resolverId}}'{{#if connected}} data-connected='true'{{/if}}{{#if revokeUrl}} data-revoke-url='{{revokeUrl}}'{{/if}}>
-						<span class='cred-icon'>{{initial}}</span>
-						<span class='cred-meta'>
-							<span class='cred-name'>{{name}}</span>
-							<span class='cred-sub {{#if connected}}connected{{/if}}'>{{#if connected}}{{#if account}}Connected as {{account}}{{else}}Connected{{/if}}{{else}}Not connected{{/if}}{{#if usedBy}} · used by {{usedBy}}{{/if}}</span>
-						</span>
-						{{#if connected}}
-							<span class='cred-connected'><button type='button' class='btn-connected'><span class='dot'></span> Connected <span class='caret'>&#9662;</span></button><div class='cred-menu'><button type='button' class='btn-disconnect'>Disconnect</button></div></span>
-						{{else if authorizationUrl}}
-							<button class='btn btn-secondary connect' data-url='{{authorizationUrl}}'>{{#if (eq status 'expired')}}Reconnect{{else}}Connect{{/if}}</button>
-						{{else}}
-							<span class='cred-blocked'>Ask the form owner</span>
-						{{/if}}
-					</div>
+					{{> credRow notConnectedText='Not connected · needed to submit this form'}}
 				{{/each}}
 			</div>
 		{{/if}}
@@ -174,30 +196,17 @@
 		<div class='overlay' id='overlay'>
 			<div class='dialog' role='dialog' aria-modal='true' aria-labelledby='dialog-title'>
 				<div class='dialog-head'>
-					<span class='dialog-title' id='dialog-title'>Required credentials</span>
+					<span class='dialog-title' id='dialog-title'>Connect your accounts</span>
 					<button class='dialog-close' id='close-dialog' aria-label='Close'>&times;</button>
 				</div>
-				<div class='dialog-sub'>Connect required credentials to run this form using your data.</div>
+				<div class='dialog-sub'>Submitting this form uses these accounts on your behalf.</div>
 				<div class='dialog-list'>
 					{{#each credentials}}
-						<div class='cred-row' data-cred-id='{{id}}' data-status='{{status}}' data-resolver-id='{{resolverId}}'{{#if connected}} data-connected='true'{{/if}}{{#if revokeUrl}} data-revoke-url='{{revokeUrl}}'{{/if}}>
-							<span class='cred-icon'>{{initial}}</span>
-							<span class='cred-meta'>
-								<span class='cred-name'>{{name}}</span>
-								<span class='cred-sub {{#if connected}}connected{{/if}}'>{{#if connected}}{{#if account}}Connected as {{account}}{{else}}Connected{{/if}}{{else}}Not connected{{/if}}{{#if usedBy}} · used by {{usedBy}}{{/if}}</span>
-							</span>
-							{{#if connected}}
-								<span class='cred-connected'><button type='button' class='btn-connected'><span class='dot'></span> Connected <span class='caret'>&#9662;</span></button><div class='cred-menu'><button type='button' class='btn-disconnect'>Disconnect</button></div></span>
-							{{else if authorizationUrl}}
-								<button class='btn btn-secondary connect' data-url='{{authorizationUrl}}'>{{#if (eq status 'expired')}}Reconnect{{else}}Connect{{/if}}</button>
-							{{else}}
-								<span class='cred-blocked'>Ask the form owner</span>
-							{{/if}}
-						</div>
+						{{> credRow notConnectedText='Not connected'}}
 					{{/each}}
 				</div>
 				<div class='dialog-foot'>
-					<span class='dialog-count'>{{connectedCount}} of {{total}} credentials connected</span>
+					<span class='dialog-count' id='dialog-count'>{{footerText}}</span>
 					<button class='btn btn-primary' id='done-dialog'>Done</button>
 				</div>
 			</div>
@@ -217,37 +226,72 @@
 			});
 			var total = Object.keys(ids).length;
 
+			function accountsLabel(count) { return count === 1 ? 'account' : 'accounts'; }
+
+			// Mirrors `formShellSummaryText` in nodes-base/nodes/Form/utils/utils.ts,
+			// which renders the same line server-side and is what the unit tests cover.
+			function summaryText(count) {
+				var remaining = total - count;
+				if (remaining <= 0) return 'All ' + total + ' accounts connected · ready to submit';
+				if (count === 0) return total + ' accounts needed to submit this form';
+				return remaining + ' more ' + accountsLabel(remaining) + ' needed to submit this form';
+			}
+
+			var summaryEl = document.getElementById('summary-text');
+			var summaryRow = document.getElementById('req-summary');
+			var countEl = document.getElementById('dialog-count');
+			var openBtnLabel = document.querySelector('#open-dialog .label');
+
 			function refresh() {
 				var count = Object.keys(connected).length;
-				var txt = count + ' of ' + total + ' credentials connected';
-				document.querySelectorAll('.strip-count, .dialog-count').forEach(function (el) {
-					el.textContent = txt;
-				});
+				var allConnected = count >= total;
+				if (summaryEl) summaryEl.textContent = summaryText(count);
+				if (summaryRow) summaryRow.classList.toggle('all-connected', allConnected);
+				if (openBtnLabel) openBtnLabel.textContent = allConnected ? 'Manage' : 'Connect';
+				if (countEl) countEl.textContent = count + ' of ' + total + ' ' + accountsLabel(total) + ' connected';
 				// UX-only signal to the form iframe; the server-side POST gate is the guarantee.
 				if (frame && frame.contentWindow) {
 					frame.contentWindow.postMessage(
-						{ type: count >= total ? 'n8n-shell-credentials-ready' : 'n8n-shell-credentials-not-ready' },
+						{ type: allConnected ? 'n8n-shell-credentials-ready' : 'n8n-shell-credentials-not-ready' },
 						'*',
 					);
 				}
 			}
 
+			if (frame) frame.addEventListener('load', refresh);
+
 			var shellEl = document.querySelector('.shell');
 			var SUBMITTER_EMAIL = shellEl ? shellEl.getAttribute('data-submitter-email') || '' : '';
 			var CONNECTED_MENU_HTML =
 				'<button type="button" class="btn-connected"><span class="dot"></span> Connected <span class="caret">&#9662;</span></button>' +
 				'<div class="cred-menu"><button type="button" class="btn-disconnect">Disconnect</button></div>';
 
+			// A provider icon that 404s (renamed node package, stale path) falls back to
+			// the letter tile the row also carries.
+			function fallBackToLetterTile(img) {
+				if (!img || !img.classList || !img.classList.contains('cred-icon-img')) return;
+				var tile = document.createElement('span');
+				tile.className = 'cred-icon';
+				tile.textContent = img.getAttribute('data-initial') || '?';
+				img.replaceWith(tile);
+			}
+			// Capture phase because `error` doesn't bubble.
+			document.addEventListener('error', function (e) { fallBackToLetterTile(e.target); }, true);
+			// Images load in parallel with this script, so some may have already failed
+			// by the time the listener above attaches — sweep those up.
+			document.querySelectorAll('.cred-icon-img').forEach(function (img) {
+				if (img.complete && img.naturalWidth === 0) fallBackToLetterTile(img);
+			});
+
 			function markConnected(id) {
 				if (!id || connected[id]) return;
 				connected[id] = true;
-				// Card and dialog share the same data-cred-id; update both.
+				// The single-account panel and the dialog share the same data-cred-id.
 				document.querySelectorAll('.cred-row[data-cred-id="' + id + '"]').forEach(function (row) {
 					row.setAttribute('data-connected', 'true');
 					var sub = row.querySelector('.cred-sub');
 					if (sub) {
 						sub.textContent = SUBMITTER_EMAIL ? 'Connected as ' + SUBMITTER_EMAIL : 'Connected';
-						sub.classList.add('connected');
 					}
 					var btn = row.querySelector('.connect');
 					if (btn) {
@@ -284,8 +328,13 @@
 				});
 			} catch (e) {}
 			window.addEventListener('message', function (event) {
-				// Ignore the sandboxed form iframe so author content can't spoof a connect.
-				if (frame && event.source === frame.contentWindow) return;
+				// The sandboxed form iframe can't spoof a connect: its only accepted message is
+				// the POST gate's rejection, which carries ids and moves rows one way only, so
+				// the worst author script can do is degrade its own form's UX.
+				if (frame && event.source === frame.contentWindow) {
+					handleGateRejection(event.data);
+					return;
+				}
 				if (event.data === 'success') onSuccessSignal();
 			});
 
@@ -302,7 +351,11 @@
 				document.querySelectorAll('.cred-row[data-cred-id="' + id + '"]').forEach(function (row) {
 					row.removeAttribute('data-connected');
 					var sub = row.querySelector('.cred-sub');
-					if (sub) { sub.textContent = 'Not connected'; sub.classList.remove('connected'); }
+					if (sub) {
+						// The single-account row spells out why the account is needed; the
+						// dialog's rows sit under copy that already says it.
+						sub.textContent = row.getAttribute('data-not-connected-text') || 'Not connected';
+					}
 					var wrap = row.querySelector('.cred-connected');
 					if (wrap) {
 						var btn = document.createElement('button');
@@ -402,7 +455,7 @@
 				document.querySelectorAll('.cred-menu.open').forEach(function (m) { m.classList.remove('open'); });
 			});
 
-			// Dialog (3+ credentials)
+			// Dialog (two or more accounts)
 			var overlay = document.getElementById('overlay');
 			var open = document.getElementById('open-dialog');
 			if (open && overlay) {
@@ -411,6 +464,22 @@
 				document.getElementById('done-dialog').addEventListener('click', function () { overlay.classList.remove('open'); });
 				overlay.addEventListener('click', function (e) { if (e.target === overlay) overlay.classList.remove('open'); });
 			}
+
+			// The form's POST was refused by the server-side gate. Rows rendered at page load
+			// can be stale (revoked since, or disconnected in another tab), so flip the ones
+			// the server no longer considers connected and surface the panel — the 2+ layout
+			// otherwise keeps every row behind the summary line. Declared after the dialog
+			// wiring so `overlay` is assigned; hoisting keeps it callable from the listener
+			// above.
+			function handleGateRejection(data) {
+				if (!data || data.type !== 'n8n-form-credentials-rejected' || !Array.isArray(data.ids)) return;
+				data.ids.forEach(function (id) {
+					// Only rows the server actually rendered, so a crafted key can't walk the
+					// prototype chain. Never markConnected from here — one direction only.
+					if (typeof id === 'string' && Object.prototype.hasOwnProperty.call(ids, id)) markDisconnected(id);
+				});
+				if (overlay) overlay.classList.add('open');
+			}
 		})();
 	</script>
 </body>

package/templates/form-trigger.handlebars

@@ -261,6 +261,12 @@
 				cursor: not-allowed;
 			}
 
+			#submit-hint {
+				margin-top: 8px;
+				font-size: var(--font-size-link);
+				color: var(--color-link);
+			}
+
 			#submit-btn:disabled:hover {
 				opacity: 1;
 			}
@@ -281,6 +287,23 @@
 				visibility: visible;
 			}
 
+			{{#if hasAuthenticatedSubmitter}}
+				/* Form-level error above Submit. Unlike .error-hidden it must not reserve
+				   space while empty, or every form gets a permanent gap above Submit. */
+				#submit-error {
+					display: none;
+					color: var(--color-error);
+					text-align: left;
+					font-size: var(--font-size-error);
+					padding-top: 6px;
+					padding-bottom: 9px;
+				}
+
+				#submit-error.error-show {
+					display: block;
+				}
+			{{/if}}
+
 			/* multiselect ----------------------------------- */
 			.multiselect {
 				padding-left: 6px;
@@ -631,7 +654,9 @@
 						{{/each}}
 					</div>
 
-					<button id='submit-btn' type='submit' {{#if shellInner}}disabled title='Connect the required credentials first'{{/if}}>
+					{{#if hasAuthenticatedSubmitter}}<p id='submit-error'></p>{{/if}}
+
+					<button id='submit-btn' type='submit' {{#if shellInner}}disabled title='Connect the required accounts first'{{/if}}>
 						<span><svg
 								xmlns='http://www.w3.org/2000/svg'
 								height='18px'
@@ -643,6 +668,11 @@
 							</svg></span>
 						{{ buttonLabel }}
 					</button>
+
+					{{#if shellInner}}
+						{{!-- Only inside the hosting shell, where the connect panel above supplies the accounts. --}}
+						<p id='submit-hint'>This form will run using your connected accounts.</p>
+					{{/if}}
 				</form>
 
 				<div class='card' id='submitted-form' style='display: none;'>
@@ -715,6 +745,47 @@
 				}
 			}
 
+			{{#if hasAuthenticatedSubmitter}}
+				// True when this form is the inner frame of the hosting shell, which owns the
+				// connect panel and the submit button's enabled state.
+				const isShellInner = {{#if shellInner}}true{{else}}false{{/if}};
+
+				// The submit-time credential gate refused this submission. Explain it and hand the
+				// form back with the answers intact. The panel names the accounts, so the banner
+				// only has to say what to do next.
+				function handleCredentialGate(credentials) {
+					updateError(
+						document.querySelector('#submit-error'),
+						'add',
+						'Not all required accounts are connected. ' +
+							(isShellInner
+								? 'Connect them above, then submit again.'
+								: 'Open this form in a new tab to connect them, then come back here and submit again.'),
+					);
+
+					const btn = document.querySelector('#submit-btn');
+					btn.style.cursor = '';
+					btn.querySelector('span').style.display = '';
+
+					if (isShellInner) {
+						// The shell owns the disabled state, so hand it the rows it still shows as
+						// connected and let its readiness signal re-disable Submit. Ids only: it must
+						// not have to trust a name or a URL from this frame. targetOrigin '*' because
+						// the frame is sandboxed without allow-same-origin and can't know the parent's.
+						window.parent.postMessage(
+							{
+								type: 'n8n-form-credentials-rejected',
+								// The body lists every required credential, connected ones included.
+								ids: credentials.filter((c) => c.credentialStatus !== 'configured').map((c) => c.credentialId),
+							},
+							'*',
+						);
+					} else {
+						btn.disabled = false;
+					}
+				}
+			{{/if}}
+
 			function validateInput(input, errorElement) {
 				const value = input.value.trim();
 				const type = input.type;
@@ -1010,6 +1081,7 @@
  						const selectedValues = getSelectedValues(multiselect);
  						formData.append(multiselect.id, JSON.stringify(selectedValues));
  					});
+					{{#if hasAuthenticatedSubmitter}}updateError(document.querySelector('#submit-error'), 'remove');{{/if}}
 					document.querySelector('#submit-btn').disabled = true;
 					document.querySelector('#submit-btn').style.cursor = 'not-allowed';
 					document.querySelector('#submit-btn span').style.display = 'inline-block';
@@ -1034,6 +1106,22 @@
 						headers,
 					})
 						.then(async function (response) {
+							{{#if hasAuthenticatedSubmitter}}
+								// A credential-gate rejection keeps the submitter on the page with their
+								// answers, so handle it before the useResponseData branch below paints the
+								// response body over the whole document.
+								if (response.status === 428) {
+									// Clone: that branch reads the body too, and a body can only be read once.
+									// Any other 428 — the webhook trigger's gate has no `status` — falls
+									// through untouched.
+									const gate = await response.clone().json().catch(() => null);
+									if (gate && gate.status === 'credential_connections_required') {
+										handleCredentialGate(gate.credentials);
+										return;
+									}
+								}
+							{{/if}}
+
 							const useResponseData = document.getElementById("useResponseData").value;
 
 							if (useResponseData === "true") {
@@ -1132,9 +1220,16 @@
 				if (event.data.type === 'n8n-shell-credentials-ready') {
 					btn.disabled = false;
 					btn.removeAttribute('title');
+					{{#if hasAuthenticatedSubmitter}}
+						// A rejection banner asking for the credentials is stale once the panel
+						// reports them connected. Guarded because shellInner comes from a query
+						// param, so a form with no submitter identity — and so no banner in the
+						// markup — can still render this listener.
+						updateError(document.querySelector('#submit-error'), 'remove');
+					{{/if}}
 				} else if (event.data.type === 'n8n-shell-credentials-not-ready') {
 					btn.disabled = true;
-					btn.setAttribute('title', 'Connect the required credentials first');
+					btn.setAttribute('title', 'Connect the required accounts first');
 				}
 			});
 		</script>

package/dist/modules/agents/agent-knowledge-gate.d.ts

@@ -1,2 +0,0 @@
-import type { AgentsConfig } from '@n8n/config';
-export declare function isAgentKnowledgeBaseEnabled(config: Pick<AgentsConfig, 'sandboxEnabled' | 'sandboxProvider'>, aiAssistantAvailable: boolean): boolean;

package/dist/modules/agents/agent-knowledge-gate.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isAgentKnowledgeBaseEnabled = isAgentKnowledgeBaseEnabled;
-function isAgentKnowledgeBaseEnabled(config, aiAssistantAvailable) {
-    return aiAssistantAvailable || (config.sandboxEnabled && config.sandboxProvider === 'daytona');
-}
-//# sourceMappingURL=agent-knowledge-gate.js.map

package/dist/modules/agents/agent-knowledge-gate.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"agent-knowledge-gate.js","sourceRoot":"","sources":["../../../src/modules/agents/agent-knowledge-gate.ts"],"names":[],"mappings":";;;AAEA,qCACC,MAAgE,EAChE,oBAA6B;IAE7B,OAAO,oBAAoB,IAAI,CAAC,MAAM,CAAC,cAAc,IAAI,MAAM,CAAC,eAAe,KAAK,SAAS,CAAC,CAAC;AAChG,CAAC"}