diff --git a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddDropdown.svelte b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddDropdown.svelte
index 0fb4ae9919..c33ffb7a36 100644
--- a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddDropdown.svelte
+++ b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddDropdown.svelte
@@ -5,7 +5,11 @@
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 	import * as Tooltip from '$lib/components/ui/tooltip';
 	import { cn } from '$lib/components/ui/utils';
-	import { ATTACHMENT_FILE_ITEMS, ATTACHMENT_TOOLTIP_TEXT, ICON_CLASS_DEFAULT } from '$lib/constants';
+	import {
+		ATTACHMENT_FILE_ITEMS,
+		ATTACHMENT_TOOLTIP_TEXT,
+		ICON_CLASS_DEFAULT
+	} from '$lib/constants';
 	import { getChatFormActionsContext } from '$lib/contexts';
 	import { AttachmentAction, AttachmentItemEnabledWhen } from '$lib/enums';
 	import { useAttachmentMenu } from '$lib/hooks/use-attachment-menu.svelte';
@@ -43,16 +47,15 @@
 	);
 
 	const FILE_MODALITY_ICONS: Record<string, { icon: typeof Image; label: string }> = {
-		[AttachmentItemEnabledWhen.HAS_VISION_MODALITY]: { icon: Image, label: 'Vision' },
 		[AttachmentItemEnabledWhen.HAS_AUDIO_MODALITY]: { icon: Mic, label: 'Audio' },
-		[AttachmentItemEnabledWhen.HAS_VIDEO_MODALITY]: { icon: Video, label: 'Video' }
+		[AttachmentItemEnabledWhen.HAS_VIDEO_MODALITY]: { icon: Video, label: 'Video' },
+		[AttachmentItemEnabledWhen.HAS_VISION_MODALITY]: { icon: Image, label: 'Vision' }
 	};
 
-	const supportedModalities = $derived.by(
-		() =>
-			ATTACHMENT_FILE_ITEMS.filter((item) => attachmentMenu.isItemEnabled(item.enabledWhen))
-				.map((item) => FILE_MODALITY_ICONS[item.enabledWhen ?? ''])
-				.filter((modality) => modality !== undefined)
+	const supportedModalities = $derived.by(() =>
+		ATTACHMENT_FILE_ITEMS.filter((item) => attachmentMenu.isItemEnabled(item.enabledWhen))
+			.map((item) => FILE_MODALITY_ICONS[item.enabledWhen ?? ''])
+			.filter((modality) => modality !== undefined)
 	);
 </script>
 
diff --git a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddReasoningSubmenu.svelte b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddReasoningSubmenu.svelte
index c2e676f3d5..197d6c2e59 100644
--- a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddReasoningSubmenu.svelte
+++ b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddReasoningSubmenu.svelte
@@ -9,67 +9,67 @@
 </script>
 
 <DropdownMenu.Sub>
-		<DropdownMenu.SubTrigger class="flex cursor-pointer items-center gap-2">
-			{#if reasoning.isReasoningActive}
-				<Lightbulb class="{ICON_CLASS_DEFAULT} shrink-0 text-amber-400" />
-			{:else if reasoning.isOff}
-				<LightbulbOff class="{ICON_CLASS_DEFAULT} shrink-0 text-muted-foreground" />
-			{:else}
-				<Lightbulb class="{ICON_CLASS_DEFAULT} shrink-0 text-muted-foreground" />
-			{/if}
+	<DropdownMenu.SubTrigger class="flex cursor-pointer items-center gap-2">
+		{#if reasoning.isReasoningActive}
+			<Lightbulb class="{ICON_CLASS_DEFAULT} shrink-0 text-amber-400" />
+		{:else if reasoning.isOff}
+			<LightbulbOff class="{ICON_CLASS_DEFAULT} shrink-0 text-muted-foreground" />
+		{:else}
+			<Lightbulb class="{ICON_CLASS_DEFAULT} shrink-0 text-muted-foreground" />
+		{/if}
 
-			<span
-				class="text-sm inline-flex gap-2 {!reasoning.isReasoningActive
-					? 'text-muted-foreground'
-					: ''}"
-			>
-				Reasoning
-
-				<span class="capitalize text-muted-foreground">
-					{reasoning.currentEffort}
-				</span>
-			</span>
-		</DropdownMenu.SubTrigger>
-
-		<DropdownMenu.SubContent
-			class="w-60 bg-popover p-1.5 text-popover-foreground shadow-md outline-none"
+		<span
+			class="text-sm inline-flex gap-2 {!reasoning.isReasoningActive
+				? 'text-muted-foreground'
+				: ''}"
 		>
-			{#each reasoning.levels as level (level.value)}
-				{@const tokenLabel = reasoning.tokenLabel(level)}
-				<DropdownMenu.Item
-					class="flex w-full cursor-pointer items-center gap-3 rounded-md px-2 py-1.75 text-left text-sm transition-colors hover:bg-accent {reasoning.isSelected(
-						level
-					)
-						? 'bg-accent'
-						: ''}"
-					onclick={() => reasoning.select(level)}
-				>
-					{#if reasoning.isSelected(level)}
-						<Check class="{ICON_CLASS_DEFAULT} shrink-0 text-foreground" />
-					{:else}
-						<div class="{ICON_CLASS_DEFAULT} shrink-0"></div>
-					{/if}
+			Reasoning
 
-					<span class="flex-1">{level.label}</span>
+			<span class="capitalize text-muted-foreground">
+				{reasoning.currentEffort}
+			</span>
+		</span>
+	</DropdownMenu.SubTrigger>
 
-					{#if tokenLabel}
-						<span class="text-[11px] text-muted-foreground opacity-60">
-							{tokenLabel}
-						</span>
-					{/if}
+	<DropdownMenu.SubContent
+		class="w-60 bg-popover p-1.5 text-popover-foreground shadow-md outline-none"
+	>
+		{#each reasoning.levels as level (level.value)}
+			{@const tokenLabel = reasoning.tokenLabel(level)}
+			<DropdownMenu.Item
+				class="flex w-full cursor-pointer items-center gap-3 rounded-md px-2 py-1.75 text-left text-sm transition-colors hover:bg-accent {reasoning.isSelected(
+					level
+				)
+					? 'bg-accent'
+					: ''}"
+				onclick={() => reasoning.select(level)}
+			>
+				{#if reasoning.isSelected(level)}
+					<Check class="{ICON_CLASS_DEFAULT} shrink-0 text-foreground" />
+				{:else}
+					<div class="{ICON_CLASS_DEFAULT} shrink-0"></div>
+				{/if}
 
-					{#if level.hasInfo}
-						<Tooltip.Root>
-							<Tooltip.Trigger>
-								<Info class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-							</Tooltip.Trigger>
+				<span class="flex-1">{level.label}</span>
 
-							<Tooltip.Content side="left">
-								<p>Maximum reasoning effort with extended context usage</p>
-							</Tooltip.Content>
-						</Tooltip.Root>
-					{/if}
-				</DropdownMenu.Item>
-			{/each}
-		</DropdownMenu.SubContent>
-	</DropdownMenu.Sub>
+				{#if tokenLabel}
+					<span class="text-[11px] text-muted-foreground opacity-60">
+						{tokenLabel}
+					</span>
+				{/if}
+
+				{#if level.hasInfo}
+					<Tooltip.Root>
+						<Tooltip.Trigger>
+							<Info class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+						</Tooltip.Trigger>
+
+						<Tooltip.Content side="left">
+							<p>Maximum reasoning effort with extended context usage</p>
+						</Tooltip.Content>
+					</Tooltip.Root>
+				{/if}
+			</DropdownMenu.Item>
+		{/each}
+	</DropdownMenu.SubContent>
+</DropdownMenu.Sub>
diff --git a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddSheet.svelte b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddSheet.svelte
index 1ff17038fc..e8da0af6b9 100644
--- a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddSheet.svelte
+++ b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddSheet.svelte
@@ -63,7 +63,7 @@
 	<Sheet.Root bind:open={sheetOpen}>
 		{@render trigger({ disabled: chatFormActions.disabled, onclick: () => (sheetOpen = true) })}
 
-		<Sheet.Content side="bottom" class="max-h-[85vh] gap-0 overflow-y-auto">
+		<Sheet.Content class="max-h-[85vh] gap-0 overflow-y-auto" side="bottom">
 			<Sheet.Header>
 				<Sheet.Title>Add to chat</Sheet.Title>
 
@@ -73,7 +73,7 @@
 			</Sheet.Header>
 
 			<div class="flex flex-col gap-1 px-1.5 pb-2">
-				<Collapsible.Root open={filesExpanded} onOpenChange={(open) => (filesExpanded = open)}>
+				<Collapsible.Root onOpenChange={(open) => (filesExpanded = open)} open={filesExpanded}>
 					<Collapsible.Trigger class={sheetItemClass}>
 						{#if filesExpanded}
 							<ChevronDown class="{ICON_CLASS_DEFAULT} shrink-0" />
@@ -92,9 +92,9 @@
 								{@const enabled = attachmentMenu.isItemEnabled(item.enabledWhen)}
 								{#if enabled}
 									<button
-										type="button"
 										class={sheetItemClass}
 										onclick={() => attachmentMenu.callbacks[item.action]()}
+										type="button"
 									>
 										<item.icon class="{ICON_CLASS_DEFAULT} shrink-0" />
 
@@ -103,7 +103,7 @@
 								{:else if item.disabledTooltip}
 									<Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
 										<Tooltip.Trigger>
-											<button type="button" class={sheetItemClass} disabled>
+											<button class={sheetItemClass} disabled type="button">
 												<item.icon class="{ICON_CLASS_DEFAULT} shrink-0" />
 
 												<span>{item.label}</span>
@@ -121,9 +121,9 @@
 				</Collapsible.Root>
 
 				<button
-					type="button"
 					class={sheetItemClass}
 					onclick={() => attachmentMenu.callbacks[AttachmentAction.SYSTEM_PROMPT_CLICK]()}
+					type="button"
 				>
 					<MessageSquare class="{ICON_CLASS_DEFAULT} shrink-0" />
 
@@ -131,7 +131,7 @@
 				</button>
 
 				{#if toolsPanel.totalToolCount > 0}
-					<Collapsible.Root open={toolsExpanded} onOpenChange={(open) => (toolsExpanded = open)}>
+					<Collapsible.Root onOpenChange={(open) => (toolsExpanded = open)} open={toolsExpanded}>
 						<Collapsible.Trigger class={sheetItemClass}>
 							{#if toolsExpanded}
 								<ChevronDown class="{ICON_CLASS_DEFAULT} shrink-0" />
@@ -163,12 +163,12 @@
 				{/if}
 
 				<button
-					type="button"
 					class={sheetItemClass}
 					onclick={() => {
 						sheetOpen = false;
 						chatFormActions.onMcpSettingsClick?.();
 					}}
+					type="button"
 				>
 					<McpLogo class="inline {ICON_CLASS_DEFAULT} shrink-0" />
 
@@ -186,18 +186,18 @@
 	{@const groupDisabled = toolsPanel.isGroupDisabled(group)}
 
 	<button
-		type="button"
 		class="{sheetItemRowClass} {groupDisabled ? 'opacity-50' : ''}"
 		onclick={() => toolsPanel.toggleGroupByKey(group.key)}
+		type="button"
 	>
 		{#if favicon}
 			<img
-				src={favicon}
 				alt=""
 				class="{ICON_CLASS_DEFAULT} shrink-0 rounded-sm"
 				onerror={(e) => {
 					(e.currentTarget as HTMLImageElement).style.display = 'none';
 				}}
+				src={favicon}
 			/>
 		{/if}
 
@@ -210,8 +210,8 @@
 		<Checkbox
 			{checked}
 			class="{ICON_CLASS_DEFAULT} shrink-0"
-			onclick={(e) => e.stopPropagation()}
 			onCheckedChange={() => toolsPanel.toggleGroupByKey(group.key)}
+			onclick={(e) => e.stopPropagation()}
 		/>
 	</button>
 {/snippet}
diff --git a/tools/ui/src/lib/components/app/dialogs/DialogMcpServers.svelte b/tools/ui/src/lib/components/app/dialogs/DialogMcpServers.svelte
index d6b90920a4..2eaaa0a657 100644
--- a/tools/ui/src/lib/components/app/dialogs/DialogMcpServers.svelte
+++ b/tools/ui/src/lib/components/app/dialogs/DialogMcpServers.svelte
@@ -16,7 +16,7 @@
 	}
 </script>
 
-<Dialog.Root {open} onOpenChange={handleOpenChange}>
+<Dialog.Root onOpenChange={handleOpenChange} {open}>
 	<Dialog.Content
 		class="md:h-[calc(100vh-4rem)]! md:max-h-240! md:w-[calc(100vw-4rem)]! md:max-w-360! flex flex-col"
 	>
diff --git a/tools/ui/src/lib/components/app/dialogs/DialogSettingsChat.svelte b/tools/ui/src/lib/components/app/dialogs/DialogSettingsChat.svelte
index 268a00442f..5e0046aae5 100644
--- a/tools/ui/src/lib/components/app/dialogs/DialogSettingsChat.svelte
+++ b/tools/ui/src/lib/components/app/dialogs/DialogSettingsChat.svelte
@@ -17,7 +17,7 @@
 	}
 </script>
 
-<Dialog.Root {open} onOpenChange={handleOpenChange}>
+<Dialog.Root onOpenChange={handleOpenChange} {open}>
 	<Dialog.Content
 		class="md:h-[calc(100vh-4rem)]! md:max-h-240! md:w-[calc(100vw-4rem)]! md:max-w-6xl! flex flex-col p-0 md:p-6 gap-0"
 	>
@@ -29,6 +29,6 @@
 			</Dialog.Title>
 		</Dialog.Header>
 
-		<SettingsChat {initialSection} onSectionChange={() => {}} onClose={() => (open = false)} />
+		<SettingsChat {initialSection} onClose={() => (open = false)} onSectionChange={() => {}} />
 	</Dialog.Content>
 </Dialog.Root>
diff --git a/tools/ui/src/lib/components/app/models/ModelId.svelte b/tools/ui/src/lib/components/app/models/ModelId.svelte
index 123aec8980..ea700580a0 100644
--- a/tools/ui/src/lib/components/app/models/ModelId.svelte
+++ b/tools/ui/src/lib/components/app/models/ModelId.svelte
@@ -120,6 +120,7 @@
 						<Tooltip.Trigger>
 							<Lightbulb class="h-3 w-3 text-muted-foreground" />
 						</Tooltip.Trigger>
+
 						<Tooltip.Content>
 							<p>Reasoning</p>
 						</Tooltip.Content>
@@ -131,6 +132,7 @@
 						<Tooltip.Trigger>
 							<Image class="h-3 w-3 text-muted-foreground" />
 						</Tooltip.Trigger>
+
 						<Tooltip.Content>
 							<p>Vision</p>
 						</Tooltip.Content>
@@ -142,6 +144,7 @@
 						<Tooltip.Trigger>
 							<Video class="h-3 w-3 text-muted-foreground" />
 						</Tooltip.Trigger>
+
 						<Tooltip.Content>
 							<p>Video</p>
 						</Tooltip.Content>
@@ -153,6 +156,7 @@
 						<Tooltip.Trigger>
 							<Mic class="h-3 w-3 text-muted-foreground" />
 						</Tooltip.Trigger>
+
 						<Tooltip.Content>
 							<p>Audio</p>
 						</Tooltip.Content>
diff --git a/tools/ui/src/lib/components/app/models/ModelsSelectorOption.svelte b/tools/ui/src/lib/components/app/models/ModelsSelectorOption.svelte
index e83021b2b9..16bc4f8976 100644
--- a/tools/ui/src/lib/components/app/models/ModelsSelectorOption.svelte
+++ b/tools/ui/src/lib/components/app/models/ModelsSelectorOption.svelte
@@ -85,10 +85,10 @@
 		aliases={option.aliases}
 		class="flex-1"
 		{hideOrgName}
+		{modalities}
 		modelId={option.model}
-		modalities={modalities}
-		{supportsThinking}
 		showRawTooltip
+		{supportsThinking}
 		tags={option.tags}
 	/>
 
diff --git a/tools/ui/src/lib/components/app/settings/SettingsMcpServers.svelte b/tools/ui/src/lib/components/app/settings/SettingsMcpServers.svelte
index 127a035ad5..c0cf0000d3 100644
--- a/tools/ui/src/lib/components/app/settings/SettingsMcpServers.svelte
+++ b/tools/ui/src/lib/components/app/settings/SettingsMcpServers.svelte
@@ -86,7 +86,6 @@
 					<McpServerCardSkeleton />
 				{:else}
 					<McpServerCard
-						{server}
 						enabled={server.enabled}
 						onBrowseResources={() => (isResourcesDialogOpen = true)}
 						onDelete={() => mcpStore.removeServer(server.id)}
@@ -103,6 +102,7 @@
 							}
 						}}
 						onUpdate={(updates) => mcpStore.updateServer(server.id, updates)}
+						{server}
 					/>
 				{/if}
 			{/each}
diff --git a/tools/ui/src/lib/components/ui/dialog/dialog-header.svelte b/tools/ui/src/lib/components/ui/dialog/dialog-header.svelte
index 99abfce4be..fd590e1860 100644
--- a/tools/ui/src/lib/components/ui/dialog/dialog-header.svelte
+++ b/tools/ui/src/lib/components/ui/dialog/dialog-header.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive } from 'bits-ui';
 	import XIcon from '@lucide/svelte/icons/x';
 	import { cn, type WithElementRef } from '$lib/components/ui/utils';
+	import { Dialog as DialogPrimitive } from 'bits-ui';
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
@@ -22,11 +22,11 @@
 -->
 <div
 	bind:this={ref}
-	data-slot="dialog-header"
 	class={cn(
 		'flex flex-col gap-2 text-center sm:text-left sticky top-0 z-50 bg-background md:bg-transparent',
 		className
 	)}
+	data-slot="dialog-header"
 	{...restProps}
 >
 	{@render children?.()}
@@ -36,6 +36,7 @@
 			class="absolute top-0 right-0 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
 		>
 			<XIcon />
+
 			<span class="sr-only">Close</span>
 		</DialogPrimitive.Close>
 	{/if}