ui: mask API Key field in settings and error splash to stop browser a… (#26562)

* ui: mask API Key field in settings and error splash to stop browser autofill

* ui: set autocomplete=new-password on private fields

The password input type makes browsers offer to save the API key
in the password manager and autofill saved site credentials into
the field. The new-password autocomplete value disables both.

---------

Co-authored-by: Pascal <admin@serveurperso.com>

tools/ui/src/lib/components/app/server/ServerErrorSplash.svelte

@@ -158,6 +158,8 @@
 					<div class="relative">
 						<Input
 							id="api-key-input"
+							type="password"
+							autocomplete="new-password"
 							placeholder="Enter your API key..."
 							bind:value={apiKeyInput}
 							onkeydown={handleApiKeyKeydown}

tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChatFields.svelte

@@ -81,7 +81,8 @@
 				<div class="relative w-full">
 					<Input
 						id={field.key}
-						type={field.isPositiveInteger ? 'number' : 'text'}
+						type={field.isPrivate ? 'password' : field.isPositiveInteger ? 'number' : 'text'}
+						autocomplete={field.isPrivate ? 'new-password' : undefined}
 						{...field.isPositiveInteger
 							? {
 									min: String(field.min ?? 1),

tools/ui/src/lib/constants/settings-registry.constants.ts

@@ -324,6 +324,7 @@ const SETTINGS_REGISTRY: Record<string, SettingsSectionEntry> = {
 			{
 				defaultValue: '',
 				help: `Set the API Key if you are using <code> ${CLI_FLAGS.API_KEY} </code> option for the server.`,
+				isPrivate: true,
 				key: SETTINGS_KEYS.API_KEY,
 				label: 'API Key',
 				section: SETTINGS_SECTION_SLUGS.GENERAL,
@@ -713,6 +714,7 @@ export const SETTINGS_CHAT_SECTIONS: SettingsSection[] = [
 			help: s.help,
 			isExperimental: s.isExperimental,
 			isPositiveInteger: s.isPositiveInteger,
+			isPrivate: s.isPrivate,
 			key: s.key,
 			label: s.label,
 			max: s.max,

tools/ui/src/lib/services/mcp.service.ts

@@ -18,7 +18,8 @@ import {
 	DEFAULT_CLIENT_VERSION,
 	DEFAULT_IMAGE_MIME_TYPE,
 	DEFAULT_MCP_CONFIG,
-	HEADERS
+	HEADERS,
+	NEWLINE
 } from '$lib/constants';
 import {
 	MCPConnectionPhase,
@@ -70,6 +71,7 @@ interface ToolResultContentItem {
 
 interface ToolCallResult {
 	content?: ToolResultContentItem[];
+	structuredContent?: Record<string, unknown>;
 	isError?: boolean;
 	_meta?: Record<string, unknown>;
 }
@@ -1012,10 +1014,20 @@ export class MCPService {
 
 		if (!Array.isArray(content)) return '';
 
-		return content
+		const formatted = content
 			.map((item) => this.formatSingleContent(item))
 			.filter(Boolean)
-			.join('\n');
+			.join(NEWLINE);
+
+		if (formatted !== '') {
+			return formatted;
+		}
+
+		if (result.structuredContent && typeof result.structuredContent === 'object') {
+			return JSON.stringify(result.structuredContent);
+		}
+
+		return '';
 	}
 
 	private static formatSingleContent(content: ToolResultContentItem): string {

tools/ui/src/lib/types/settings.d.ts

@@ -31,6 +31,7 @@ export interface SettingsEntry {
 	radioOptions?: Array<{ value: string; label: string; key: string; isExperimental?: boolean }>;
 	isExperimental?: boolean;
 	isPositiveInteger?: boolean;
+	isPrivate?: boolean;
 	placeholder?: string;
 	min?: number;
 	max?: number;
@@ -55,6 +56,7 @@ export interface SettingsFieldConfig {
 	type: SettingsFieldType;
 	isExperimental?: boolean;
 	isPositiveInteger?: boolean;
+	isPrivate?: boolean;
 	placeholder?: string;
 	min?: number;
 	max?: number;

tools/ui/tests/unit/mcp-service.test.ts

@@ -2,7 +2,7 @@ import { Client } from '@modelcontextprotocol/sdk/client';
 import { CORS_PROXY } from '$lib/constants';
 import { MCPConnectionPhase, MCPTransportType } from '$lib/enums';
 import { MCPService } from '$lib/services/mcp.service';
-import type { MCPConnectionLog, MCPServerConfig } from '$lib/types';
+import type { MCPConnection, MCPConnectionLog, MCPServerConfig } from '$lib/types';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 
 type DiagnosticFetchFactory = (
@@ -329,4 +329,21 @@ describe('MCPService', () => {
 			)
 		).toHaveLength(0);
 	});
+
+	it('falls back to structuredContent when content array is empty', async () => {
+		const connection = {
+			client: {
+				callTool: vi.fn().mockResolvedValue({
+					content: [],
+					structuredContent: { accounts: [{ id: 1 }], total: 1 }
+				})
+			},
+			requestTimeoutMs: 9000,
+			serverName: 'test-server'
+		} as unknown as MCPConnection;
+		const result = await MCPService.callTool(connection, { arguments: {}, name: 'tool' });
+
+		expect(result.isError).toBe(false);
+		expect(result.content).toBe('{"accounts":[{"id":1}],"total":1}');
+	});
 });

tools/ui/tests/unit/settings-private-fields.test.ts

@@ -0,0 +1,12 @@
+import { SETTINGS_CHAT_SECTIONS, SETTINGS_KEYS } from '$lib/constants';
+import { describe, expect, it } from 'vitest';
+
+describe('checkApiKeyField', () => {
+	it('should have isPrivate set to true', () => {
+		const fields = SETTINGS_CHAT_SECTIONS.flatMap((section) => section.fields);
+		const apiKeyField = fields.find((field) => field?.key === SETTINGS_KEYS.API_KEY);
+
+		expect(apiKeyField).toBeDefined();
+		expect(apiKeyField?.isPrivate).toBe(true);
+	});
+});