ui: ESLint config updates (#27700)

* chore: Spacing between sibling elements in html markup

* chore: Formatting and linting rules

tools/ui/tests/client/components/AgenticPerfWrapper.svelte

@@ -7,10 +7,10 @@
 <Tooltip.Provider>
 	{#if perfState.message}
 		<ChatMessageAgenticContent
+			isLastAssistantMessage
+			isStreaming={perfState.isStreaming}
 			message={perfState.message}
 			toolMessages={perfState.toolMessages}
-			isStreaming={perfState.isStreaming}
-			isLastAssistantMessage
 		/>
 	{/if}
 </Tooltip.Provider>

tools/ui/tests/client/components/McpServerFormWrapper.svelte

@@ -25,13 +25,13 @@
 	can read it back without a custom binding API.
 -->
 <McpServerForm
-	url="https://example.test/mcp"
 	headers={headersState}
-	onUrlChange={() => {}}
+	id="mcp-server-form-test"
 	onHeadersChange={(value) => {
 		headersState = value;
 	}}
-	id="mcp-server-form-test"
+	onUrlChange={() => {}}
+	url="https://example.test/mcp"
 />
 
-<div data-testid="captured-headers" data-captured-headers={headersState} hidden></div>
+<div data-captured-headers={headersState} data-testid="captured-headers" hidden></div>

tools/ui/tests/client/components/PickerListScrollHarness.svelte

@@ -25,13 +25,13 @@
 {#if open}
 	<div data-testid="picker-host">
 		<ChatFormPickerList
-			{items}
 			isLoading={false}
-			{selectedIndex}
-			searchQuery=""
-			showSearchInput={false}
-			{scrollTrigger}
 			itemKey={(it) => it.id}
+			{items}
+			{scrollTrigger}
+			searchQuery=""
+			{selectedIndex}
+			showSearchInput={false}
 		>
 			{#snippet item(it, index, isSelected)}
 				<ChatFormPickerListItem dataIndex={index} {isSelected} onclick={() => {}}>

tools/ui/tests/stories/ChatMessage.stories.svelte

@@ -1,4 +1,4 @@
-<script module lang="ts">
+<script lang="ts" module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import ChatMessage from '$lib/components/app/chat/ChatMessages/ChatMessage/ChatMessage.svelte';
 	import type { ChatMessageActions } from '$lib/types';
@@ -100,10 +100,10 @@
 </script>
 
 <Story
-	name="User"
 	args={{
 		message: userMessage
 	}}
+	name="User"
 	play={async () => {
 		const { settingsStore } = await import('$lib/stores/settings/index.svelte');
 
@@ -112,11 +112,11 @@
 />
 
 <Story
-	name="Assistant"
 	args={{
 		class: 'max-w-[56rem] w-[calc(100vw-2rem)]',
 		message: assistantMessage
 	}}
+	name="Assistant"
 	play={async () => {
 		const { settingsStore } = await import('$lib/stores/settings/index.svelte');
 
@@ -125,11 +125,11 @@
 />
 
 <Story
-	name="AssistantWithReasoning"
 	args={{
 		class: 'max-w-[56rem] w-[calc(100vw-2rem)]',
 		message: assistantWithReasoning
 	}}
+	name="AssistantWithReasoning"
 	play={async () => {
 		const { settingsStore } = await import('$lib/stores/settings/index.svelte');
 
@@ -138,11 +138,11 @@
 />
 
 <Story
-	name="RawLlmOutput"
 	args={{
 		class: 'max-w-[56rem] w-[calc(100vw-2rem)]',
 		message: rawOutputMessage
 	}}
+	name="RawLlmOutput"
 	play={async () => {
 		const { settingsStore } = await import('$lib/stores/settings/index.svelte');
 
@@ -151,11 +151,11 @@
 />
 
 <Story
-	name="WithReasoningContent"
 	args={{
 		message: streamingMessage
 	}}
 	asChild
+	name="WithReasoningContent"
 	play={async () => {
 		const { settingsStore } = await import('$lib/stores/settings/index.svelte');
 
@@ -203,15 +203,15 @@
 	}}
 >
 	<div class="w-[56rem]">
-		<ChatMessage message={streamingMessage} {chatActions} />
+		<ChatMessage {chatActions} message={streamingMessage} />
 	</div>
 </Story>
 
 <Story
-	name="Processing"
 	args={{
 		message: processingMessage
 	}}
+	name="Processing"
 	play={async () => {
 		const { settingsStore } = await import('$lib/stores/settings/index.svelte');
 

tools/ui/tests/stories/ChatScreenForm.stories.svelte

@@ -1,4 +1,4 @@
-<script module lang="ts">
+<script lang="ts" module>
 	import jpgAsset from './fixtures/assets/1.jpg?url';
 	import pdfAsset from './fixtures/assets/example.pdf?raw';
 	import svgAsset from './fixtures/assets/hf-logo.svg?url';
@@ -42,8 +42,8 @@
 </script>
 
 <Story
-	name="Default"
 	args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
+	name="Default"
 	play={async ({ canvas, userEvent }) => {
 		const textarea = await canvas.findByRole('textbox');
 		const submitButton = await canvas.findByRole('button', { name: 'Send' });
@@ -67,14 +67,14 @@
 	}}
 />
 
-<Story name="Loading" args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]', isLoading: true }} />
+<Story args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]', isLoading: true }} name="Loading" />
 
 <Story
-	name="FileAttachments"
 	args={{
 		class: 'max-w-[56rem] w-[calc(100vw-2rem)]',
 		uploadedFiles: fileAttachments
 	}}
+	name="FileAttachments"
 	play={async ({ canvas }) => {
 		const jpgAttachment = canvas.getByAltText('1.jpg');
 		const svgAttachment = canvas.getByAltText('hf-logo.svg');

tools/ui/tests/stories/MarkdownContent.stories.svelte

@@ -1,4 +1,4 @@
-<script module lang="ts">
+<script lang="ts" module>
 	import { AI_TUTORIAL_MD } from './fixtures/ai-tutorial.js';
 	import { API_DOCS_MD } from './fixtures/api-docs.js';
 	import { BLOG_POST_MD } from './fixtures/blog-post.js';
@@ -19,40 +19,39 @@
 	});
 </script>
 
-<Story name="Empty" args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]', content: EMPTY_MD }} />
+<Story args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]', content: EMPTY_MD }} name="Empty" />
 
 <Story
-	name="AI Tutorial"
 	args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]', content: AI_TUTORIAL_MD }}
+	name="AI Tutorial"
 />
 
 <Story
-	name="API Documentation"
 	args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]', content: API_DOCS_MD }}
+	name="API Documentation"
 />
 
 <Story
-	name="Technical Blog"
 	args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]', content: BLOG_POST_MD }}
+	name="Technical Blog"
 />
 
 <Story
-	name="Data Analysis"
 	args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]', content: DATA_ANALYSIS_MD }}
+	name="Data Analysis"
 />
 
 <Story
-	name="README file"
 	args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]', content: README_MD }}
+	name="README file"
 />
 
 <Story
-	name="Math Formulas"
 	args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]', content: MATH_FORMULAS_MD }}
+	name="Math Formulas"
 />
 
 <Story
-	name="URL Links"
 	args={{
 		class: 'max-w-[56rem] w-[calc(100vw-2rem)]',
 		content: `# URL Links Test
@@ -68,6 +67,7 @@ You can also test inline links like https://example.com or https://docs.python.o
 
 All links should have \`target="_blank"\` and \`rel="noopener noreferrer"\` attributes for security.`
 	}}
+	name="URL Links"
 	play={async (context) => {
 		const { canvasElement } = context;
 

tools/ui/tests/stories/ModelsSelector.stories.svelte

@@ -1,4 +1,4 @@
-<script module lang="ts">
+<script lang="ts" module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import ModelsSelectorList from '$lib/components/app/models/ModelsSelectorList.svelte';
 	import ModelsSelectorOption from '$lib/components/app/models/ModelsSelectorOption.svelte';
@@ -122,11 +122,11 @@
 <Story name="List">
 	<div class="w-80 rounded-lg border border-border bg-popover p-2 shadow-md">
 		<ModelsSelectorList
-			groups={groupedOptions}
-			currentModel={selectedModel}
 			{activeId}
-			onSelect={handleSelect}
+			currentModel={selectedModel}
+			groups={groupedOptions}
 			onInfoClick={(modelName) => console.log('Info clicked:', modelName)}
+			onSelect={handleSelect}
 		/>
 	</div>
 </Story>
@@ -134,15 +134,15 @@
 <Story name="SingleLoaded">
 	<div class="w-80 rounded-lg border border-border bg-popover p-2 shadow-md">
 		<ModelsSelectorList
+			activeId={null}
+			currentModel={null}
 			groups={{
 				available: [],
 				favorites: [],
 				loaded: [loadedModels[0]]
 			}}
-			currentModel={null}
-			activeId={null}
-			onSelect={handleSelect}
 			onInfoClick={(modelName) => console.log('Info clicked:', modelName)}
+			onSelect={handleSelect}
 		/>
 	</div>
 </Story>
@@ -150,15 +150,15 @@
 <Story name="WithFavoritesOnly">
 	<div class="w-80 rounded-lg border border-border bg-popover p-2 shadow-md">
 		<ModelsSelectorList
+			activeId={null}
+			currentModel={null}
 			groups={{
 				available: [],
 				favorites: favoriteModels,
 				loaded: []
 			}}
-			currentModel={null}
-			activeId={null}
-			onSelect={handleSelect}
 			onInfoClick={(modelName) => console.log('Info clicked:', modelName)}
+			onSelect={handleSelect}
 		/>
 	</div>
 </Story>
@@ -168,55 +168,60 @@
 		<div class="px-2 py-2 text-[13px] font-semibold text-muted-foreground/70 select-none">
 			Server model states
 		</div>
+
 		<ModelsSelectorOption
+			hideOrgName={true}
+			isFav={false}
+			isHighlighted={false}
+			isSelected={false}
+			onKeyDown={() => {}}
+			onMouseEnter={() => {}}
+			onSelect={() => {}}
 			option={mockModel('model-idle', 'Model (idle)', 'meta')}
-			isSelected={false}
-			isHighlighted={false}
-			isFav={false}
-			hideOrgName={true}
-			onSelect={() => {}}
-			onMouseEnter={() => {}}
-			onKeyDown={() => {}}
 		/>
+
 		<ModelsSelectorOption
+			hideOrgName={true}
+			isFav={false}
+			isHighlighted={false}
+			isSelected={false}
+			onKeyDown={() => {}}
+			onMouseEnter={() => {}}
+			onSelect={() => {}}
 			option={mockModel('model-loading', 'Model (loading)', 'meta')}
-			isSelected={false}
-			isHighlighted={false}
-			isFav={false}
-			hideOrgName={true}
-			onSelect={() => {}}
-			onMouseEnter={() => {}}
-			onKeyDown={() => {}}
 		/>
+
 		<ModelsSelectorOption
+			hideOrgName={true}
+			isFav={false}
+			isHighlighted={false}
+			isSelected={false}
+			onKeyDown={() => {}}
+			onMouseEnter={() => {}}
+			onSelect={() => {}}
 			option={mockModel('model-loaded', 'Model (loaded)', 'meta')}
-			isSelected={false}
-			isHighlighted={false}
-			isFav={false}
-			hideOrgName={true}
-			onSelect={() => {}}
-			onMouseEnter={() => {}}
-			onKeyDown={() => {}}
 		/>
+
 		<ModelsSelectorOption
+			hideOrgName={true}
+			isFav={false}
+			isHighlighted={false}
+			isSelected={false}
+			onKeyDown={() => {}}
+			onMouseEnter={() => {}}
+			onSelect={() => {}}
 			option={mockModel('model-sleeping', 'Model (sleeping)', 'meta')}
-			isSelected={false}
-			isHighlighted={false}
-			isFav={false}
-			hideOrgName={true}
-			onSelect={() => {}}
-			onMouseEnter={() => {}}
-			onKeyDown={() => {}}
 		/>
+
 		<ModelsSelectorOption
-			option={mockModel('model-failed', 'Model (failed)', 'meta')}
-			isSelected={false}
-			isHighlighted={false}
-			isFav={false}
 			hideOrgName={true}
-			onSelect={() => {}}
-			onMouseEnter={() => {}}
+			isFav={false}
+			isHighlighted={false}
+			isSelected={false}
 			onKeyDown={() => {}}
+			onMouseEnter={() => {}}
+			onSelect={() => {}}
+			option={mockModel('model-failed', 'Model (failed)', 'meta')}
 		/>
 	</div>
 </Story>
@@ -226,45 +231,49 @@
 		<div class="px-2 py-2 text-[13px] font-semibold text-muted-foreground/70 select-none">
 			Selection states
 		</div>
+
 		<ModelsSelectorOption
+			hideOrgName={true}
+			isFav={false}
+			isHighlighted={false}
+			isSelected={false}
+			onKeyDown={() => {}}
+			onMouseEnter={() => {}}
+			onSelect={() => {}}
 			option={mockModel('normal-model', 'Normal Model', 'meta')}
-			isSelected={false}
-			isHighlighted={false}
-			isFav={false}
-			hideOrgName={true}
-			onSelect={() => {}}
-			onMouseEnter={() => {}}
-			onKeyDown={() => {}}
 		/>
+
 		<ModelsSelectorOption
-			option={mockModel('selected-model', 'Selected Model', 'meta')}
+			hideOrgName={true}
+			isFav={false}
+			isHighlighted={false}
 			isSelected={true}
-			isHighlighted={false}
-			isFav={false}
-			hideOrgName={true}
-			onSelect={() => {}}
-			onMouseEnter={() => {}}
 			onKeyDown={() => {}}
+			onMouseEnter={() => {}}
+			onSelect={() => {}}
+			option={mockModel('selected-model', 'Selected Model', 'meta')}
 		/>
+
 		<ModelsSelectorOption
-			option={mockModel('highlighted-model', 'Highlighted Model', 'meta')}
-			isSelected={false}
+			hideOrgName={true}
+			isFav={false}
 			isHighlighted={true}
-			isFav={false}
-			hideOrgName={true}
-			onSelect={() => {}}
-			onMouseEnter={() => {}}
-			onKeyDown={() => {}}
-		/>
-		<ModelsSelectorOption
-			option={mockModel('fav-model', 'Favorite Model', 'Qwen')}
 			isSelected={false}
-			isHighlighted={false}
-			isFav={true}
-			hideOrgName={true}
-			onSelect={() => {}}
-			onMouseEnter={() => {}}
 			onKeyDown={() => {}}
+			onMouseEnter={() => {}}
+			onSelect={() => {}}
+			option={mockModel('highlighted-model', 'Highlighted Model', 'meta')}
+		/>
+
+		<ModelsSelectorOption
+			hideOrgName={true}
+			isFav={true}
+			isHighlighted={false}
+			isSelected={false}
+			onKeyDown={() => {}}
+			onMouseEnter={() => {}}
+			onSelect={() => {}}
+			option={mockModel('fav-model', 'Favorite Model', 'Qwen')}
 		/>
 	</div>
 </Story>

tools/ui/tests/stories/PwaRefreshAlert.stories.svelte

@@ -1,4 +1,4 @@
-<script module lang="ts">
+<script lang="ts" module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import PwaRefreshAlert from '$lib/components/pwa/PwaRefreshAlert.svelte';
 	import { expect } from 'storybook/test';
@@ -13,8 +13,8 @@
 </script>
 
 <Story
-	name="Default"
 	args={{ needRefresh: true, updateServiceWorker: () => console.log('reload') }}
+	name="Default"
 	play={async ({ canvas }) => {
 		const title = canvas.getByText('Update available');
 
@@ -31,8 +31,8 @@
 />
 
 <Story
-	name="Hidden"
 	args={{ needRefresh: false, updateServiceWorker: () => console.log('reload') }}
+	name="Hidden"
 	play={async ({ canvas }) => {
 		const title = canvas.queryByText('Update available');
 
@@ -41,11 +41,11 @@
 />
 
 <Story
-	name="ClickReload"
 	args={{
 		needRefresh: true,
 		updateServiceWorker: () => console.log('reload')
 	}}
+	name="ClickReload"
 	play={async ({ canvas, userEvent }) => {
 		const button = canvas.getByRole('button', { name: 'Reload' });
 

tools/ui/tests/stories/SidebarNavigation.stories.svelte

@@ -1,4 +1,4 @@
-<script module lang="ts">
+<script lang="ts" module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import SidebarNavigation from '$lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte';
 	import { waitFor } from 'storybook/test';

tools/ui/tests/stories/a11y/ActionIcon.a11y.stories.svelte

@@ -1,4 +1,4 @@
-<script module lang="ts">
+<script lang="ts" module>
 	import { Copy } from '@lucide/svelte';
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import ActionIcon from '$lib/components/app/actions/ActionIcon.svelte';
@@ -29,6 +29,7 @@
 >
 	<div>
 		<button type="button">before</button>
-		<ActionIcon icon={Copy} tooltip="Copy" onclick={() => {}} />
+
+		<ActionIcon icon={Copy} onclick={() => {}} tooltip="Copy" />
 	</div>
 </Story>

tools/ui/tests/stories/a11y/ChatMessageStatistics.a11y.stories.svelte

@@ -1,4 +1,4 @@
-<script module lang="ts">
+<script lang="ts" module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import ChatMessageStatistics from '$lib/components/app/chat/ChatMessages/ChatMessageStatistics/ChatMessageStatistics.svelte';
 	import { expect } from 'storybook/test';
@@ -14,7 +14,6 @@
 </script>
 
 <Story
-	name="ViewButtonsSingleTabStop"
 	args={{
 		agenticTimings: {
 			llm: { predicted_ms: 1000, predicted_n: 200, prompt_ms: 500, prompt_n: 100 },
@@ -29,6 +28,7 @@
 		promptMs: 500,
 		promptTokens: 100
 	}}
+	name="ViewButtonsSingleTabStop"
 	play={async ({ canvas, userEvent }) => {
 		const reading = await canvas.findByRole('button', { name: 'Reading' });
 		const generation = await canvas.findByRole('button', { name: 'Generation' });

tools/ui/tests/stories/a11y/ChatScreenForm.a11y.stories.svelte

@@ -1,4 +1,4 @@
-<script module lang="ts">
+<script lang="ts" module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import ChatScreenForm from '$lib/components/app/chat/ChatScreen/ChatScreenForm.svelte';
 	import { ATTACHMENT_TOOLTIP_TEXT } from '$lib/constants';
@@ -15,8 +15,8 @@
 </script>
 
 <Story
-	name="AddButtonSingleTabStop"
 	args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
+	name="AddButtonSingleTabStop"
 	play={async ({ canvas, userEvent }) => {
 		const textarea = await canvas.findByRole('textbox');
 
@@ -35,8 +35,8 @@
 />
 
 <Story
-	name="AddDropdownFocusesFirstEnabled"
 	args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
+	name="AddDropdownFocusesFirstEnabled"
 	play={async ({ canvas, userEvent }) => {
 		const trigger = await canvas.findByRole('button', { name: ATTACHMENT_TOOLTIP_TEXT });
 

tools/ui/tests/stories/a11y/ScrollCarousel.a11y.stories.svelte

@@ -1,4 +1,4 @@
-<script module lang="ts">
+<script lang="ts" module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import { ScrollCarousel } from '$lib/components/app';
 	import { ScrollCarouselVariant } from '$lib/enums';
@@ -34,10 +34,13 @@
 >
 	<div>
 		<button type="button">before</button>
+
 		<ScrollCarousel class="w-96" variant={ScrollCarouselVariant.CENTER}>
 			<div class="h-12 w-12 shrink-0 bg-muted"></div>
+
 			<div class="h-12 w-12 shrink-0 bg-muted"></div>
 		</ScrollCarousel>
+
 		<button type="button">after</button>
 	</div>
 </Story>
@@ -61,6 +64,7 @@
 >
 	<div>
 		<button type="button">before</button>
+
 		<ScrollCarousel class="w-48" variant={ScrollCarouselVariant.CENTER}>
 			{#each [...Array(20).keys()] as i (i)}
 				<div class="h-12 w-24 shrink-0 bg-muted">{i}</div>

tools/ui/tests/stories/a11y/SidebarNavigationConversationItem.a11y.stories.svelte

@@ -1,4 +1,4 @@
-<script module lang="ts">
+<script lang="ts" module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import SidebarNavigationConversationItem from '$lib/components/app/navigation/SidebarNavigation/SidebarNavigationConversationItem.svelte';
 	import { expect } from 'storybook/test';
@@ -22,8 +22,8 @@
 </script>
 
 <Story
-	name="ForkIconSingleTabStop"
 	args={{ conversation: mockForkedConversation, depth: 1 }}
+	name="ForkIconSingleTabStop"
 	play={async ({ canvas, userEvent }) => {
 		const row = await canvas.findByRole('button', { name: /Forked Conversation/ });
 		const forkIcon = await canvas.findByRole('link');