parakon-runtime / tools /ui /src /lib /components /app /dialogs /DialogMcpServerAddNew.svelte

Parakon runtime: llama.cpp fork with fused 1-bit CUDA/Metal/CPU kernels (part 8)

b7b13c6 verified about 2 months ago

8.63 kB

<script lang="ts">
	import { browser } from '$app/environment';
	import { McpServerCardCompact, McpServerForm } from '$lib/components/app/mcp';
	import { Button } from '$lib/components/ui/button';
	import * as Dialog from '$lib/components/ui/dialog';
	import {
		DISMISSED_RECOMMENDED_MCP_SERVERS_LOCALSTORAGE_KEY,
		HEADERS,
		MCP_SERVER_ID_PREFIX,
		RECOMMENDED_MCP_SERVERS
	} from '$lib/constants';
	import { BooleanString, HealthCheckStatus } from '$lib/enums';
	import { mcpStore } from '$lib/stores';
	import { canonicalizeServerUrl, parseHeadersToArray, uuid } from '$lib/utils';

	interface Props {
		open: boolean;
		onOpenChange?: (open: boolean) => void;
	}

	let { onOpenChange, open = $bindable() }: Props = $props();

	let newServerUrl = $state('');
	let newServerName = $state('');
	let nameAutoFilled = $state('');
	let nameTouched = $state(false);

	let previewRun = 0;

	function handleNameChange(value: string) {
		newServerName = value;
		nameTouched = true;
	}
	let newServerHeaders = $state('');
	let newServerUseProxy = $state(false);

	let newServerWantsAuthorization = $state(false);

	let selectedRecommendationId = $derived.by(() => {
		const url = newServerUrl.trim();

		if (!url) return null;

		const targetCanonical = canonicalizeServerUrl(url);

		return (
			RECOMMENDED_MCP_SERVERS.find((rec) => canonicalizeServerUrl(rec.url) === targetCanonical)
				?.id ?? null
		);
	});
	let selectedRecommendation = $derived(
		selectedRecommendationId
			? (RECOMMENDED_MCP_SERVERS.find((rec) => rec.id === selectedRecommendationId) ?? null)
			: null
	);
	let authRequired = $derived(selectedRecommendation?.needsAuthorization ?? false);

	let bearerTokenFilled = $derived.by(() => {
		const pairs = parseHeadersToArray(newServerHeaders);
		const bearerPrefix = HEADERS.BEARER.toLowerCase();
		const bearer = pairs.find(
			(p) =>
				HEADERS.REDACTED.has(p.key.trim().toLowerCase()) &&
				p.value.trim().toLowerCase().startsWith(bearerPrefix)
		);

		if (!bearer) return false;

		return bearer.value.trim().slice(bearerPrefix.length).trim().length > 0;
	});

	let newServerUrlError = $derived.by(() => {
		if (!newServerUrl.trim()) return 'URL is required';

		try {
			new URL(newServerUrl);

			return null;
		} catch {
			return 'Invalid URL format';
		}
	});
	let newServerHeaderPairsValid = $derived(
		parseHeadersToArray(newServerHeaders).every((p) => p.key.trim() && p.value.trim())
	);
	let canSave = $derived(
		!newServerUrlError && newServerHeaderPairsValid && (!authRequired || bearerTokenFilled)
	);

	// Backward-compatible read: older versions stored a JSON array of dismissed ids.
	function readRecommendationsDismissed(): boolean {
		if (!browser) return false;

		const raw = localStorage.getItem(DISMISSED_RECOMMENDED_MCP_SERVERS_LOCALSTORAGE_KEY);

		if (!raw) return false;

		if (raw === BooleanString.TRUE) return true;

		if (raw === BooleanString.FALSE) return false;

		try {
			const parsed = JSON.parse(raw);

			return Array.isArray(parsed) && parsed.length > 0;
		} catch {
			return false;
		}
	}

	function writeRecommendationsDismissed(dismissed: boolean) {
		recommendationsDismissed = dismissed;

		if (browser) {
			localStorage.setItem(
				DISMISSED_RECOMMENDED_MCP_SERVERS_LOCALSTORAGE_KEY,
				dismissed ? BooleanString.TRUE : BooleanString.FALSE
			);
		}
	}

	let recommendationsDismissed = $state<boolean>(readRecommendationsDismissed());

	// Read-only once a recommendation is picked: switch is disabled, so we keep
	// the Authorization field in sync with the requirement.
	$effect(() => {
		if (authRequired) {
			newServerWantsAuthorization = true;
		}
	});

	// Debounced preview handshake: once the URL is valid and stable, fetch the
	// server-reported name to prefill the display name field. A manual edit
	// freezes the autofill for good, and failures stay silent.
	$effect(() => {
		const url = newServerUrl.trim();
		const headers = newServerHeaders.trim();
		const useProxy = newServerUseProxy;

		if (!open || newServerUrlError || !url) return;

		const run = ++previewRun;
		// One throwaway id per run: concurrent previews (URL typed, then the
		// bearer token pasted) would poison each other's shared health state.
		const previewId = `${MCP_SERVER_ID_PREFIX}-preview-${run}`;
		const timer = setTimeout(async () => {
			await mcpStore.runHealthCheck({
				enabled: false,
				headers: headers || undefined,
				id: previewId,
				url,
				useProxy
			});

			const state = mcpStore.getHealthCheckState(previewId);

			mcpStore.clearHealthCheck(previewId);

			if (run !== previewRun) return;

			if (state.status !== HealthCheckStatus.SUCCESS) return;

			const autoName = state.serverInfo?.title || state.serverInfo?.name || '';

			if (autoName && !nameTouched) {
				newServerName = autoName;
				nameAutoFilled = autoName;
			}
		}, 600);

		return () => clearTimeout(timer);
	});

	let hasSelection = $derived(selectedRecommendationId !== null);

	let unconfiguredRecommendations = $derived.by(() => {
		const configuredCanonicals = new Set(
			mcpStore.getServers().map((s) => canonicalizeServerUrl(s.url))
		);

		return RECOMMENDED_MCP_SERVERS.filter(
			(rec) => !configuredCanonicals.has(canonicalizeServerUrl(rec.url))
		);
	});

	let recommendationsToShow = $derived(recommendationsDismissed ? [] : unconfiguredRecommendations);

	function handleRecommendationClick(recommendedId: string) {
		const recommendation = RECOMMENDED_MCP_SERVERS.find((rec) => rec.id === recommendedId);

		if (!recommendation) return;

		newServerUrl = recommendation.url;
		newServerHeaders = '';
		newServerWantsAuthorization = recommendation.needsAuthorization ?? false;
	}

	function handleDismissAll() {
		writeRecommendationsDismissed(true);
	}

	function handleOpenChange(value: boolean) {
		if (!value) {
			newServerUrl = '';
			newServerName = '';
			nameAutoFilled = '';
			nameTouched = false;
			previewRun++;
			newServerHeaders = '';
			newServerUseProxy = false;
			newServerWantsAuthorization = false;
		}

		open = value;
		onOpenChange?.(value);
	}

	function saveNewServer() {
		if (!canSave) return;

		const newServerId = uuid() ?? `${MCP_SERVER_ID_PREFIX}-${Date.now()}`;

		mcpStore.addServer({
			// A name equal to the autofilled server-reported one is not a
			// customization: keep following the automatic label.
			displayName:
				newServerName.trim() && newServerName.trim() !== nameAutoFilled.trim()
					? newServerName.trim()
					: undefined,
			enabled: true,
			headers: newServerHeaders.trim() || undefined,
			id: newServerId,
			url: newServerUrl.trim(),
			useProxy: newServerUseProxy
		});

		handleOpenChange(false);
	}

	function handleSubmit(event: SubmitEvent) {
		event.preventDefault();
		saveNewServer();
	}
</script>

<Dialog.Root onOpenChange={handleOpenChange} {open}>
	<Dialog.Content class="max-w-2xl!">
		<Dialog.Header>
			<Dialog.Title class="select-none">Add New MCP Server</Dialog.Title>
		</Dialog.Header>
		{#if recommendationsToShow.length > 0}
			<div class="space-y-3 pt-2">
				<div class="flex items-center justify-between gap-3">
					<h3 class="text-sm font-medium">Recommended Servers</h3>
					<Button class="text-muted-foreground" onclick={handleDismissAll} size="sm" variant="ghost"
						>Dismiss</Button
					>
				</div>
				<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
					{#each recommendationsToShow as recommendation (recommendation.id)}
						<McpServerCardCompact
							dimmed={hasSelection && selectedRecommendationId !== recommendation.id}
							onClick={() => handleRecommendationClick(recommendation.id)}
							selected={selectedRecommendationId === recommendation.id}
							server={recommendation}
						/>
					{/each}
				</div>
			</div>
		{/if}
		<form class="contents" onsubmit={handleSubmit}>
			<div class="space-y-4 py-4">
				<McpServerForm
					bind:wantsAuthorization={newServerWantsAuthorization}
					headers={newServerHeaders}
					id="new-server"
					name={newServerName}
					onHeadersChange={(v) => (newServerHeaders = v)}
					onNameChange={handleNameChange}
					onUrlChange={(v) => (newServerUrl = v)}
					onUseProxyChange={(v) => (newServerUseProxy = v)}
					required={authRequired}
					url={newServerUrl}
					urlError={newServerUrl ? newServerUrlError : null}
					useProxy={newServerUseProxy}
				/>
			</div>
			<Dialog.Footer>
				<Button onclick={() => handleOpenChange(false)} size="sm" variant="secondary">
					Cancel
				</Button>
				<Button aria-label="Save" disabled={!canSave} size="sm" type="submit" variant="default">
					Add
				</Button>
			</Dialog.Footer>
		</form>
	</Dialog.Content>
</Dialog.Root>

	<script lang="ts">
	import { browser } from '$app/environment';
	import { McpServerCardCompact, McpServerForm } from '$lib/components/app/mcp';
	import { Button } from '$lib/components/ui/button';
	import * as Dialog from '$lib/components/ui/dialog';
	import {
	DISMISSED_RECOMMENDED_MCP_SERVERS_LOCALSTORAGE_KEY,
	HEADERS,
	MCP_SERVER_ID_PREFIX,
	RECOMMENDED_MCP_SERVERS
	} from '$lib/constants';
	import { BooleanString, HealthCheckStatus } from '$lib/enums';
	import { mcpStore } from '$lib/stores';
	import { canonicalizeServerUrl, parseHeadersToArray, uuid } from '$lib/utils';

	interface Props {
	open: boolean;
	onOpenChange?: (open: boolean) => void;
	}

	let { onOpenChange, open = $bindable() }: Props = $props();

	let newServerUrl = $state('');
	let newServerName = $state('');
	let nameAutoFilled = $state('');
	let nameTouched = $state(false);

	let previewRun = 0;

	function handleNameChange(value: string) {
	newServerName = value;
	nameTouched = true;
	}
	let newServerHeaders = $state('');
	let newServerUseProxy = $state(false);

	let newServerWantsAuthorization = $state(false);

	let selectedRecommendationId = $derived.by(() => {
	const url = newServerUrl.trim();

	if (!url) return null;

	const targetCanonical = canonicalizeServerUrl(url);

	return (
	RECOMMENDED_MCP_SERVERS.find((rec) => canonicalizeServerUrl(rec.url) === targetCanonical)
	?.id ?? null
	);
	});
	let selectedRecommendation = $derived(
	selectedRecommendationId
	? (RECOMMENDED_MCP_SERVERS.find((rec) => rec.id === selectedRecommendationId) ?? null)
	: null
	);
	let authRequired = $derived(selectedRecommendation?.needsAuthorization ?? false);

	let bearerTokenFilled = $derived.by(() => {
	const pairs = parseHeadersToArray(newServerHeaders);
	const bearerPrefix = HEADERS.BEARER.toLowerCase();
	const bearer = pairs.find(
	(p) =>
	HEADERS.REDACTED.has(p.key.trim().toLowerCase()) &&
	p.value.trim().toLowerCase().startsWith(bearerPrefix)
	);

	if (!bearer) return false;

	return bearer.value.trim().slice(bearerPrefix.length).trim().length > 0;
	});

	let newServerUrlError = $derived.by(() => {
	if (!newServerUrl.trim()) return 'URL is required';

	try {
	new URL(newServerUrl);

	return null;
	} catch {
	return 'Invalid URL format';
	}
	});
	let newServerHeaderPairsValid = $derived(
	parseHeadersToArray(newServerHeaders).every((p) => p.key.trim() && p.value.trim())
	);
	let canSave = $derived(
	!newServerUrlError && newServerHeaderPairsValid && (!authRequired \|\| bearerTokenFilled)
	);

	// Backward-compatible read: older versions stored a JSON array of dismissed ids.
	function readRecommendationsDismissed(): boolean {
	if (!browser) return false;

	const raw = localStorage.getItem(DISMISSED_RECOMMENDED_MCP_SERVERS_LOCALSTORAGE_KEY);

	if (!raw) return false;

	if (raw === BooleanString.TRUE) return true;

	if (raw === BooleanString.FALSE) return false;

	try {
	const parsed = JSON.parse(raw);

	return Array.isArray(parsed) && parsed.length > 0;
	} catch {
	return false;
	}
	}

	function writeRecommendationsDismissed(dismissed: boolean) {
	recommendationsDismissed = dismissed;

	if (browser) {
	localStorage.setItem(
	DISMISSED_RECOMMENDED_MCP_SERVERS_LOCALSTORAGE_KEY,
	dismissed ? BooleanString.TRUE : BooleanString.FALSE
	);
	}
	}

	let recommendationsDismissed = $state<boolean>(readRecommendationsDismissed());

	// Read-only once a recommendation is picked: switch is disabled, so we keep
	// the Authorization field in sync with the requirement.
	$effect(() => {
	if (authRequired) {
	newServerWantsAuthorization = true;
	}
	});

	// Debounced preview handshake: once the URL is valid and stable, fetch the
	// server-reported name to prefill the display name field. A manual edit
	// freezes the autofill for good, and failures stay silent.
	$effect(() => {
	const url = newServerUrl.trim();
	const headers = newServerHeaders.trim();
	const useProxy = newServerUseProxy;

	if (!open \|\| newServerUrlError \|\| !url) return;

	const run = ++previewRun;
	// One throwaway id per run: concurrent previews (URL typed, then the
	// bearer token pasted) would poison each other's shared health state.
	const previewId = `${MCP_SERVER_ID_PREFIX}-preview-${run}`;
	const timer = setTimeout(async () => {
	await mcpStore.runHealthCheck({
	enabled: false,
	headers: headers \|\| undefined,
	id: previewId,
	url,
	useProxy
	});

	const state = mcpStore.getHealthCheckState(previewId);

	mcpStore.clearHealthCheck(previewId);

	if (run !== previewRun) return;

	if (state.status !== HealthCheckStatus.SUCCESS) return;

	const autoName = state.serverInfo?.title \|\| state.serverInfo?.name \|\| '';

	if (autoName && !nameTouched) {
	newServerName = autoName;
	nameAutoFilled = autoName;
	}
	}, 600);

	return () => clearTimeout(timer);
	});

	let hasSelection = $derived(selectedRecommendationId !== null);

	let unconfiguredRecommendations = $derived.by(() => {
	const configuredCanonicals = new Set(
	mcpStore.getServers().map((s) => canonicalizeServerUrl(s.url))
	);

	return RECOMMENDED_MCP_SERVERS.filter(
	(rec) => !configuredCanonicals.has(canonicalizeServerUrl(rec.url))
	);
	});

	let recommendationsToShow = $derived(recommendationsDismissed ? [] : unconfiguredRecommendations);

	function handleRecommendationClick(recommendedId: string) {
	const recommendation = RECOMMENDED_MCP_SERVERS.find((rec) => rec.id === recommendedId);

	if (!recommendation) return;

	newServerUrl = recommendation.url;
	newServerHeaders = '';
	newServerWantsAuthorization = recommendation.needsAuthorization ?? false;
	}

	function handleDismissAll() {
	writeRecommendationsDismissed(true);
	}

	function handleOpenChange(value: boolean) {
	if (!value) {
	newServerUrl = '';
	newServerName = '';
	nameAutoFilled = '';
	nameTouched = false;
	previewRun++;
	newServerHeaders = '';
	newServerUseProxy = false;
	newServerWantsAuthorization = false;
	}

	open = value;
	onOpenChange?.(value);
	}

	function saveNewServer() {
	if (!canSave) return;

	const newServerId = uuid() ?? `${MCP_SERVER_ID_PREFIX}-${Date.now()}`;

	mcpStore.addServer({
	// A name equal to the autofilled server-reported one is not a
	// customization: keep following the automatic label.
	displayName:
	newServerName.trim() && newServerName.trim() !== nameAutoFilled.trim()
	? newServerName.trim()
	: undefined,
	enabled: true,
	headers: newServerHeaders.trim() \|\| undefined,
	id: newServerId,
	url: newServerUrl.trim(),
	useProxy: newServerUseProxy
	});

	handleOpenChange(false);
	}

	function handleSubmit(event: SubmitEvent) {
	event.preventDefault();
	saveNewServer();
	}
	</script>

	<Dialog.Root onOpenChange={handleOpenChange} {open}>
	<Dialog.Content class="max-w-2xl!">
	<Dialog.Header>
	<Dialog.Title class="select-none">Add New MCP Server</Dialog.Title>
	</Dialog.Header>

	{#if recommendationsToShow.length > 0}
	<div class="space-y-3 pt-2">
	<div class="flex items-center justify-between gap-3">
	<h3 class="text-sm font-medium">Recommended Servers</h3>

	<Button class="text-muted-foreground" onclick={handleDismissAll} size="sm" variant="ghost"
	>Dismiss</Button
	>
	</div>

	<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
	{#each recommendationsToShow as recommendation (recommendation.id)}
	<McpServerCardCompact
	dimmed={hasSelection && selectedRecommendationId !== recommendation.id}
	onClick={() => handleRecommendationClick(recommendation.id)}
	selected={selectedRecommendationId === recommendation.id}
	server={recommendation}
	/>
	{/each}
	</div>
	</div>
	{/if}

	<form class="contents" onsubmit={handleSubmit}>
	<div class="space-y-4 py-4">
	<McpServerForm
	bind:wantsAuthorization={newServerWantsAuthorization}
	headers={newServerHeaders}
	id="new-server"
	name={newServerName}
	onHeadersChange={(v) => (newServerHeaders = v)}
	onNameChange={handleNameChange}
	onUrlChange={(v) => (newServerUrl = v)}
	onUseProxyChange={(v) => (newServerUseProxy = v)}
	required={authRequired}
	url={newServerUrl}
	urlError={newServerUrl ? newServerUrlError : null}
	useProxy={newServerUseProxy}
	/>
	</div>

	<Dialog.Footer>
	<Button onclick={() => handleOpenChange(false)} size="sm" variant="secondary">
	Cancel
	</Button>

	<Button aria-label="Save" disabled={!canSave} size="sm" type="submit" variant="default">
	Add
	</Button>
	</Dialog.Footer>
	</form>
	</Dialog.Content>
	</Dialog.Root>