ui: Linting & Formatting scripts (#26819)

tools/ui/src/lib/components/app/dialogs/DialogChatAttachmentsPreview.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { Dialog } from 'bits-ui';
 	import { X } from '@lucide/svelte';
-	import * as DialogUI from '$lib/components/ui/dialog';
 	import { ChatAttachmentsPreview } from '$lib/components/app';
+	import * as DialogUI from '$lib/components/ui/dialog';
 	import { KeyboardKey } from '$lib/enums';
+	import { Dialog } from 'bits-ui';
 
 	interface Props {
 		open: boolean;
@@ -14,11 +14,11 @@
 	}
 
 	let {
-		open = $bindable(false),
-		uploadedFiles = [],
-		attachments = [],
 		activeModelId,
-		previewFocusIndex = 0
+		attachments = [],
+		open = $bindable(false),
+		previewFocusIndex = 0,
+		uploadedFiles = []
 	}: Props = $props();
 
 	function handleClose() {
@@ -59,6 +59,7 @@
 		}
 
 		document.addEventListener('keydown', handleKeyDown);
+
 		return () => document.removeEventListener('keydown', handleKeyDown);
 	});
 </script>

tools/ui/src/lib/components/app/dialogs/DialogChatError.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import * as AlertDialog from '$lib/components/ui/alert-dialog';
 	import { AlertTriangle, TimerOff } from '@lucide/svelte';
+	import * as AlertDialog from '$lib/components/ui/alert-dialog';
 	import { ErrorDialogType } from '$lib/enums';
 
 	interface Props {
@@ -11,7 +11,7 @@
 		onOpenChange?: (open: boolean) => void;
 	}
 
-	let { open = $bindable(), type, message, contextInfo, onOpenChange }: Props = $props();
+	let { contextInfo, message, onOpenChange, open = $bindable(), type }: Props = $props();
 
 	const isTimeout = $derived(type === ErrorDialogType.TIMEOUT);
 	const title = $derived(isTimeout ? 'TCP Timeout' : 'Server Error');

tools/ui/src/lib/components/app/dialogs/DialogCodePreview.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive } from 'bits-ui';
 	import XIcon from '@lucide/svelte/icons/x';
+	import { Dialog as DialogPrimitive } from 'bits-ui';
 
 	interface Props {
 		open: boolean;
@@ -9,7 +9,7 @@
 		onOpenChange?: (open: boolean) => void;
 	}
 
-	let { open = $bindable(), code, language, onOpenChange }: Props = $props();
+	let { code, language, onOpenChange, open = $bindable() }: Props = $props();
 
 	let iframeRef = $state<HTMLIFrameElement | null>(null);
 

tools/ui/src/lib/components/app/dialogs/DialogConfirmation.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import * as AlertDialog from '$lib/components/ui/alert-dialog';
-	import type { Component, Snippet } from 'svelte';
 	import { KeyboardKey } from '$lib/enums';
+	import type { Component, Snippet } from 'svelte';
 
 	interface Props {
 		open: boolean;
@@ -18,17 +18,17 @@
 	}
 
 	let {
+		cancelText = 'Cancel',
+		children,
+		confirmText = 'Confirm',
+		description,
+		icon,
+		onCancel,
+		onConfirm,
+		onKeydown,
 		open = $bindable(),
 		title,
-		description,
-		confirmText = 'Confirm',
-		cancelText = 'Cancel',
-		variant = 'default',
-		icon,
-		onConfirm,
-		onCancel,
-		onKeydown,
-		children
+		variant = 'default'
 	}: Props = $props();
 
 	function handleKeydown(event: KeyboardEvent) {
@@ -37,6 +37,7 @@
 
 			onConfirm();
 		}
+
 		onKeydown?.(event);
 	}
 

tools/ui/src/lib/components/app/dialogs/DialogConversationRename.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
+	import { Pencil } from '@lucide/svelte';
 	import * as AlertDialog from '$lib/components/ui/alert-dialog';
 	import { Button } from '$lib/components/ui/button';
 	import { Input } from '$lib/components/ui/input';
-	import { Pencil } from '@lucide/svelte';
 
 	interface Props {
 		open: boolean;
@@ -13,11 +13,11 @@
 	}
 
 	let {
-		open = $bindable(),
 		currentTitle,
-		value = $bindable(''),
+		onCancel,
 		onConfirm,
-		onCancel
+		open = $bindable(),
+		value = $bindable('')
 	}: Props = $props();
 
 	let inputRef = $state<HTMLInputElement | null>(null);
@@ -42,7 +42,9 @@
 
 	function handleSubmit(event: Event) {
 		event.preventDefault();
+
 		if (!canSubmit) return;
+
 		value = value.trim();
 		onConfirm();
 	}

tools/ui/src/lib/components/app/dialogs/DialogConversationSelection.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import * as Dialog from '$lib/components/ui/dialog';
 	import { ConversationSelection } from '$lib/components/app';
+	import * as Dialog from '$lib/components/ui/dialog';
 
 	interface Props {
 		conversations: DatabaseConversation[];

tools/ui/src/lib/components/app/dialogs/DialogEmptyFileAlert.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import * as AlertDialog from '$lib/components/ui/alert-dialog';
 	import { FileX } from '@lucide/svelte';
+	import * as AlertDialog from '$lib/components/ui/alert-dialog';
 
 	interface Props {
 		open: boolean;
@@ -8,7 +8,7 @@
 		onOpenChange?: (open: boolean) => void;
 	}
 
-	let { open = $bindable(), emptyFiles, onOpenChange }: Props = $props();
+	let { emptyFiles, onOpenChange, open = $bindable() }: Props = $props();
 
 	function handleOpenChange(newOpen: boolean) {
 		open = newOpen;

tools/ui/src/lib/components/app/dialogs/DialogExportSettings.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
+	import { Shield, ShieldOff } from '@lucide/svelte';
 	import * as AlertDialog from '$lib/components/ui/alert-dialog';
 	import { Checkbox } from '$lib/components/ui/checkbox';
 	import Label from '$lib/components/ui/label/label.svelte';
-	import { Shield, ShieldOff } from '@lucide/svelte';
 
 	let {
-		open = $bindable(),
 		includeSensitiveData = $bindable(false),
 		onCancel,
-		onConfirm
+		onConfirm,
+		open = $bindable()
 	}: {
 		open: boolean;
 		includeSensitiveData: boolean;

tools/ui/src/lib/components/app/dialogs/DialogFileUploadError.svelte

@@ -12,7 +12,7 @@
 		onOpenChange?: (open: boolean) => void;
 	}
 
-	let { open = $bindable(), fileErrorData, onOpenChange }: Props = $props();
+	let { fileErrorData, onOpenChange, open = $bindable() }: Props = $props();
 
 	function handleOpenChange(newOpen: boolean) {
 		open = newOpen;

tools/ui/src/lib/components/app/dialogs/DialogMcpResourcePreview.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
-	import * as Dialog from '$lib/components/ui/dialog';
 	import { Download } from '@lucide/svelte';
+	import { ActionIconCopyToClipboard, SyntaxHighlightedCode } from '$lib/components/app';
 	import { Button } from '$lib/components/ui/button';
+	import * as Dialog from '$lib/components/ui/dialog';
+	import { DEFAULT_RESOURCE_FILENAME } from '$lib/constants';
+	import { MimeTypeIncludes, MimeTypeText } from '$lib/enums';
 	import { mcpStore } from '$lib/stores/mcp.svelte';
-	import { SyntaxHighlightedCode, ActionIconCopyToClipboard } from '$lib/components/app';
+	import type { DatabaseMessageExtraMcpResource } from '$lib/types';
 	import {
+		downloadResourceContent,
 		getLanguageFromFilename,
 		isCodeResource,
-		isImageResource,
-		downloadResourceContent
+		isImageResource
 	} from '$lib/utils';
-	import { MimeTypeIncludes, MimeTypeText } from '$lib/enums';
-	import { DEFAULT_RESOURCE_FILENAME } from '$lib/constants';
-	import type { DatabaseMessageExtraMcpResource } from '$lib/types';
 
 	interface Props {
 		open: boolean;
@@ -20,14 +20,16 @@
 		extra: DatabaseMessageExtraMcpResource;
 	}
 
-	let { open = $bindable(), onOpenChange, extra }: Props = $props();
+	let { extra, onOpenChange, open = $bindable() }: Props = $props();
 
 	const serverName = $derived(mcpStore.getServerDisplayName(extra.serverName));
 	const favicon = $derived(mcpStore.getServerFavicon(extra.serverName));
 
 	function getLanguage(): string {
 		if (extra.mimeType?.includes(MimeTypeIncludes.JSON)) return MimeTypeIncludes.JSON;
+
 		if (extra.mimeType?.includes(MimeTypeIncludes.JAVASCRIPT)) return MimeTypeIncludes.JAVASCRIPT;
+
 		if (extra.mimeType?.includes(MimeTypeIncludes.TYPESCRIPT)) return MimeTypeIncludes.TYPESCRIPT;
 
 		const name = extra.name || extra.uri || '';

tools/ui/src/lib/components/app/dialogs/DialogMcpResourcesBrowser.svelte

@@ -1,24 +1,24 @@
 <script lang="ts">
-	import { ICON_CLASS_DEFAULT } from '$lib/constants/css-classes';
-	import { FolderOpen, Plus, Loader2, Braces } from '@lucide/svelte';
-	import { toast } from 'svelte-sonner';
-	import * as Dialog from '$lib/components/ui/dialog';
-	import { Button } from '$lib/components/ui/button';
-	import { mcpStore } from '$lib/stores/mcp.svelte';
-	import { conversationsStore } from '$lib/stores/conversations.svelte';
+	import { Braces, FolderOpen, Loader2, Plus } from '@lucide/svelte';
 	import {
-		mcpResources,
-		mcpTotalResourceCount,
-		mcpResourceStore
-	} from '$lib/stores/mcp-resources.svelte';
-	import {
-		McpResourcesBrowser,
 		McpResourcePreview,
+		McpResourcesBrowser,
 		McpResourceTemplateForm
 	} from '$lib/components/app';
+	import { Button } from '$lib/components/ui/button';
+	import * as Dialog from '$lib/components/ui/dialog';
+	import { ICON_CLASS_DEFAULT } from '$lib/constants/css-classes';
+	import { conversationsStore } from '$lib/stores/conversations.svelte';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import {
+		mcpResources,
+		mcpResourceStore,
+		mcpTotalResourceCount
+	} from '$lib/stores/mcp-resources.svelte';
+	import type { MCPResourceContent, MCPResourceInfo, MCPResourceTemplateInfo } from '$lib/types';
 	import { getResourceDisplayName } from '$lib/utils';
-	import type { MCPResourceInfo, MCPResourceContent, MCPResourceTemplateInfo } from '$lib/types';
 	import { SvelteSet } from 'svelte/reactivity';
+	import { toast } from 'svelte-sonner';
 
 	interface Props {
 		open?: boolean;
@@ -27,7 +27,7 @@
 		preSelectedUri?: string;
 	}
 
-	let { open = $bindable(false), onOpenChange, onAttach, preSelectedUri }: Props = $props();
+	let { onAttach, onOpenChange, open = $bindable(false), preSelectedUri }: Props = $props();
 
 	let selectedResources = new SvelteSet<string>();
 	let lastSelectedUri = $state<string | null>(null);
@@ -144,16 +144,17 @@
 				if (mcpResourceStore.isAttached(templatePreviewUri)) {
 					toast.info('Resource already attached');
 					handleOpenChange(false);
+
 					return;
 				}
 
 				const resourceInfo: MCPResourceInfo = {
-					uri: templatePreviewUri,
 					name: templatePreviewUri.split('/').pop() || templatePreviewUri,
-					serverName: selectedTemplate.serverName
+					serverName: selectedTemplate.serverName,
+					uri: templatePreviewUri
 				};
-
 				const attachment = mcpResourceStore.addAttachment(resourceInfo);
+
 				mcpResourceStore.updateAttachmentContent(attachment.id, templatePreviewContent);
 
 				toast.success(`Resource attached: ${resourceInfo.name}`);
@@ -215,6 +216,7 @@
 		return allResources.sort((a, b) => {
 			const aName = getResourceDisplayName(a);
 			const bName = getResourceDisplayName(b);
+
 			return aName.localeCompare(bName);
 		});
 	}
@@ -339,9 +341,9 @@
 					<!-- Template resolved: show preview -->
 					<McpResourcePreview
 						resource={{
-							uri: templatePreviewUri ?? '',
 							name: templatePreviewUri?.split('/').pop() || (templatePreviewUri ?? ''),
-							serverName: selectedTemplate?.serverName || ''
+							serverName: selectedTemplate?.serverName || '',
+							uri: templatePreviewUri ?? ''
 						}}
 						preloadedContent={templatePreviewContent}
 					/>

tools/ui/src/lib/components/app/dialogs/DialogMcpServerAddNew.svelte

@@ -1,10 +1,8 @@
 <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 { McpServerCardCompact, McpServerForm } from '$lib/components/app/mcp';
-	import { mcpStore } from '$lib/stores/mcp.svelte';
-	import { conversationsStore } from '$lib/stores/conversations.svelte';
-	import { parseHeadersToArray, uuid, canonicalizeServerUrl } from '$lib/utils';
 	import {
 		BEARER_PREFIX,
 		BOOL_FALSE_STRING,
@@ -14,15 +12,17 @@
 		RECOMMENDED_MCP_SERVERS,
 		REDACTED_HEADERS
 	} from '$lib/constants';
-	import { browser } from '$app/environment';
 	import { HealthCheckStatus } from '$lib/enums';
+	import { conversationsStore } from '$lib/stores/conversations.svelte';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { canonicalizeServerUrl, parseHeadersToArray, uuid } from '$lib/utils';
 
 	interface Props {
 		open: boolean;
 		onOpenChange?: (open: boolean) => void;
 	}
 
-	let { open = $bindable(), onOpenChange }: Props = $props();
+	let { onOpenChange, open = $bindable() }: Props = $props();
 
 	let newServerUrl = $state('');
 	let newServerName = $state('');
@@ -42,8 +42,11 @@
 
 	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
@@ -72,6 +75,7 @@
 
 	let newServerUrlError = $derived.by(() => {
 		if (!newServerUrl.trim()) return 'URL is required';
+
 		try {
 			new URL(newServerUrl);
 
@@ -90,15 +94,18 @@
 	// 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 === BOOL_TRUE_STRING) return true;
+
 		if (raw === BOOL_FALSE_STRING) return false;
 
 		try {
 			const parsed = JSON.parse(raw);
+
 			return Array.isArray(parsed) && parsed.length > 0;
 		} catch {
 			return false;
@@ -142,10 +149,10 @@
 		const previewId = `${MCP_SERVER_ID_PREFIX}-preview-${run}`;
 		const timer = setTimeout(async () => {
 			await mcpStore.runHealthCheck({
-				id: previewId,
 				enabled: false,
-				url,
 				headers: headers || undefined,
+				id: previewId,
+				url,
 				useProxy
 			});
 
@@ -207,6 +214,7 @@
 			newServerUseProxy = false;
 			newServerWantsAuthorization = false;
 		}
+
 		open = value;
 		onOpenChange?.(value);
 	}
@@ -217,16 +225,16 @@
 		const newServerId = uuid() ?? `${MCP_SERVER_ID_PREFIX}-${Date.now()}`;
 
 		mcpStore.addServer({
-			id: newServerId,
-			enabled: true,
-			url: newServerUrl.trim(),
 			// 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
 		});
 

tools/ui/src/lib/components/app/dialogs/DialogMermaidPreview.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import * as Dialog from '$lib/components/ui/dialog/index.js';
 	import { MermaidPreview } from '$lib/components/app/content';
+	import * as Dialog from '$lib/components/ui/dialog/index.js';
 
 	interface Props {
 		open: boolean;
@@ -8,7 +8,7 @@
 		onOpenChange?: (open: boolean) => void;
 	}
 
-	let { open = $bindable(), svgHtml, onOpenChange }: Props = $props();
+	let { onOpenChange, open = $bindable(), svgHtml }: Props = $props();
 </script>
 
 <Dialog.Root bind:open {onOpenChange}>

tools/ui/src/lib/components/app/dialogs/DialogModelInformation.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
+	import { ActionIconCopyToClipboard, BadgesModality } from '$lib/components/app';
 	import * as Dialog from '$lib/components/ui/dialog';
 	import * as Table from '$lib/components/ui/table';
-	import { BadgesModality, ActionIconCopyToClipboard } from '$lib/components/app';
+	import { modelOptions, modelsLoading, modelsStore } from '$lib/stores/models.svelte';
 	import { serverStore } from '$lib/stores/server.svelte';
-	import { modelsStore, modelOptions, modelsLoading } from '$lib/stores/models.svelte';
-	import { formatFileSize, formatParameters, formatNumber } from '$lib/utils';
 	import type { ApiLlamaCppServerProps } from '$lib/types';
+	import { formatFileSize, formatNumber, formatParameters } from '$lib/utils';
 
 	interface Props {
 		open?: boolean;
@@ -14,7 +14,7 @@
 		modelId?: string | null;
 	}
 
-	let { open = $bindable(), onOpenChange, modelId = null }: Props = $props();
+	let { modelId = null, onOpenChange, open = $bindable() }: Props = $props();
 
 	let isRouter = $derived(serverStore.isRouterMode);
 
@@ -35,12 +35,14 @@
 		if (isRouter && modelId) {
 			return models.find((m) => m.model === modelId) ?? null;
 		}
+
 		return models[0] ?? null;
 	});
 
 	// Get modalities from modelStore using the model ID from the first model
 	let modalities = $derived.by(() => {
 		if (!firstModel?.id) return [];
+
 		return modelsStore.getModelModalitiesArray(firstModel.id);
 	});
 
@@ -67,6 +69,7 @@
 					isLoadingRouterProps = false;
 				});
 		}
+
 		if (!open) {
 			routerModelProps = null;
 		}

tools/ui/src/lib/components/app/dialogs/DialogModelNotAvailable.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { ICON_CLASS_DEFAULT } from '$lib/constants/css-classes';
-	import { URL_PARAMS } from '$lib/constants';
-	import * as AlertDialog from '$lib/components/ui/alert-dialog';
 	import { AlertTriangle, ArrowRight } from '@lucide/svelte';
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
+	import * as AlertDialog from '$lib/components/ui/alert-dialog';
+	import { URL_PARAMS } from '$lib/constants';
+	import { ICON_CLASS_DEFAULT } from '$lib/constants/css-classes';
 
 	interface Props {
 		open: boolean;
@@ -13,7 +13,7 @@
 		onOpenChange?: (open: boolean) => void;
 	}
 
-	let { open = $bindable(), modelName, availableModels = [], onOpenChange }: Props = $props();
+	let { availableModels = [], modelName, onOpenChange, open = $bindable() }: Props = $props();
 
 	function handleOpenChange(newOpen: boolean) {
 		open = newOpen;
@@ -23,6 +23,7 @@
 	function handleSelectModel(model: string) {
 		// Build URL with selected model, preserving other params
 		const url = new URL(page.url);
+
 		url.searchParams.set(URL_PARAMS.MODEL, model);
 
 		handleOpenChange(false);