@nocturnium/svelte-ide 1.0.0-rc.1 → 1.0.0

package/dist/components/agents/AgentCursor.svelte

@@ -9,7 +9,7 @@
 	 * - Typing indicator animation
 	 */
 
-	import type { Agent, AgentCursor as AgentCursorType, CursorPosition, CursorSelection } from '../../types';
+	import type { Agent, CursorPosition, CursorSelection } from '../../types';
 
 	interface Props {
 		/** The agent this cursor belongs to */

package/dist/components/agents/AgentPresenceBar.svelte

@@ -45,7 +45,6 @@
 	let overflowCount = $derived(Math.max(0, activeAgents.length - maxVisible));
 
 	// Group by status for summary
-	let onlineCount = $derived(agents.filter((a) => a.status === 'online').length);
 	let busyCount = $derived(agents.filter((a) => a.status === 'busy').length);
 	let stalledCount = $derived(agents.filter((a) => a.status === 'stalled').length);
 </script>

package/dist/components/ai/AIConversationList.svelte

@@ -78,6 +78,7 @@
 		if (filter === 'starred') {
 			result = result.filter((c) => c.starred);
 		} else if (filter === 'today') {
+			// eslint-disable-next-line svelte/prefer-svelte-reactivity -- temporary comparison value, not reactive UI state
 			const today = new Date();
 			today.setHours(0, 0, 0, 0);
 			result = result.filter((c) => new Date(c.updatedAt) >= today);

package/dist/components/ai/AIInlineEdit.svelte

@@ -17,6 +17,8 @@
 		class: className = ''
 	}: Props = $props();
 
+	// Seeded once from the prop: this is the editable input buffer, mounted fresh per edit.
+	// svelte-ignore state_referenced_locally
 	let prompt = $state(initialPrompt);
 	let isSubmitting = $state(false);
 
@@ -40,6 +42,9 @@
 	}
 </script>
 
+<!-- Wrapper-level keydown only captures Escape / Cmd+Enter shortcuts; the real controls
+	 (textarea, buttons) inside are the focusable interactive elements. -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div class="ai-inline-edit {className}" onkeydown={handleKeydown}>
 	<div class="ai-inline-edit__header">
 		<Icon name="sparkles" size={14} />
@@ -75,7 +80,7 @@
 			{#if isSubmitting}
 				<Spinner size="xs" />
 			{:else}
-				{#snippet icon()}<Icon name="wand" size={14} />{/snippet}
+				{#snippet _icon()}<Icon name="wand" size={14} />{/snippet}
 			{/if}
 			Apply
 		</Button>

package/dist/components/ai/AIMessage.svelte

@@ -85,7 +85,7 @@
 
 		{#if message.toolCalls && message.toolCalls.length > 0}
 			<div class="ai-message__tool-calls">
-				{#each message.toolCalls as toolCall}
+				{#each message.toolCalls as toolCall (toolCall.id)}
 					<AIToolCallDisplay
 						{toolCall}
 						status="completed"

package/dist/components/ai/AIMessageActions.svelte

@@ -17,7 +17,6 @@
 	let showConfirmDelete = $state(false);
 
 	const isUser = $derived(message.role === 'user');
-	const isAssistant = $derived(message.role === 'assistant');
 
 	async function handleCopy() {
 		try {

package/dist/components/ai/AIMessageContent.svelte

@@ -154,7 +154,7 @@
 </script>
 
 <div class="message-content" class:streaming={isStreaming}>
-	{#each blocks as block, i}
+	{#each blocks as block, i (i)}
 		{#if block.type === 'code'}
 			<div class="code-block">
 				<div class="code-header">
@@ -173,7 +173,7 @@
 						{/if}
 					</button>
 				</div>
-				<pre class="code-content"><code>{#each tokenizeCode(block.content, block.language || 'plaintext') as token}<span class="token-{token.type}">{token.text}</span>{/each}</code></pre>
+				<pre class="code-content"><code>{#each tokenizeCode(block.content, block.language || 'plaintext') as token, ti (ti)}<span class="token-{token.type}">{token.text}</span>{/each}</code></pre>
 			</div>
 		{:else if block.type === 'inline-code'}
 			<code class="inline-code">{block.content}</code>

package/dist/components/ai/AIPanel.svelte

@@ -17,6 +17,7 @@
 	import {
 		initPersistence,
 		saveConversation,
+		autoSaveConversation,
 		loadConversations,
 		deleteConversation as deletePersisted,
 		toggleStarConversation,
@@ -37,12 +38,8 @@
 	let inputValue = $state('');
 	let messagesContainer: HTMLDivElement;
 	let textareaEl: HTMLTextAreaElement;
-	let sidebarOpen = $state(false);
-
-	// Sync with prop changes
-	$effect(() => {
-		sidebarOpen = showSidebar;
-	});
+	// Writable derived: tracks the prop, but can be toggled locally (Svelte ≥5.25).
+	let sidebarOpen = $derived(showSidebar);
 	let persistedConversations = $state<AIConversation[]>([]);
 
 	// Auto-resize textarea without causing cursor jump
@@ -72,11 +69,13 @@
 		}
 	});
 
-	// Auto-save conversation when messages change
+	// Auto-save conversation when messages change. Use the debounced helper (not
+	// saveConversation) so a burst of streamed tokens collapses into one write and
+	// the persistence call is deferred out of this effect's synchronous run.
 	$effect(() => {
 		const conv = getActiveConversation();
 		if (conv && getMessages().length > 0) {
-			saveConversation(conv);
+			autoSaveConversation(conv);
 		}
 	});
 

package/dist/components/core/Avatar.svelte

@@ -15,7 +15,7 @@
 		size = 'md',
 		color,
 		isAI = false,
-		status,
+		status: _status,
 		class: className = ''
 	}: Props = $props();
 

package/dist/components/core/ContextMenu.svelte

@@ -81,7 +81,7 @@
 		style="left: {adjustedX}px; top: {adjustedY}px"
 		role="menu"
 	>
-		{#each items as item}
+		{#each items as item (item.id)}
 			{#if item.separator}
 				<div class="ide-context-menu__separator"></div>
 			{:else}

package/dist/components/core/ErrorBoundary.svelte

@@ -86,7 +86,7 @@ export function clearError() {
 
 				{#if recoveryOptions.length > 0}
 					<div class="recovery-options">
-						{#each recoveryOptions as option}
+						{#each recoveryOptions as option (option.id)}
 							<button
 								class="recovery-btn"
 								class:recommended={option.recommended}

package/dist/components/editor/BreakpointLayer.svelte

@@ -10,7 +10,7 @@
 	 */
 
 	import { onMount } from 'svelte';
-	import type { BreakpointManager, Breakpoint, BreakpointType } from './core/breakpoints';
+	import type { BreakpointManager, Breakpoint } from './core/breakpoints';
 	import { getBreakpointIcon, getBreakpointColor } from './core/breakpoints';
 
 	interface Props {
@@ -37,7 +37,7 @@
 		gutterWidth = 50,
 		enabled = true,
 		onToggle,
-		onEdit
+		onEdit: _onEdit
 	}: Props = $props();
 
 	let breakpoints = $state<Breakpoint[]>([]);
@@ -251,7 +251,7 @@
 			}}
 			onkeydown={(e) => {
 				if (e.key === 'Enter') {
-					const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+					const _rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
 					handleGutterClick(0, e as unknown as MouseEvent);
 				}
 			}}

package/dist/components/editor/CognitiveLoadMeter.svelte

@@ -121,7 +121,7 @@
 				<div class="cognitive-meter__tooltip-section">
 					<span class="cognitive-meter__tooltip-label">High complexity regions:</span>
 					<ul class="cognitive-meter__tooltip-list">
-						{#each highComplexityRegions.slice(0, 5) as region}
+						{#each highComplexityRegions.slice(0, 5) as region (region.startLine)}
 							<li>
 								<span class="cognitive-meter__tooltip-region-name">
 									{region.name || `${region.type} at line ${region.startLine + 1}`}
@@ -143,7 +143,7 @@
 			{#if metrics.regions.some((r) => r.suggestion)}
 				<div class="cognitive-meter__tooltip-section">
 					<span class="cognitive-meter__tooltip-label">Suggestions:</span>
-					{#each metrics.regions.filter((r) => r.suggestion).slice(0, 2) as region}
+					{#each metrics.regions.filter((r) => r.suggestion).slice(0, 2) as region (region.startLine)}
 						<p class="cognitive-meter__tooltip-suggestion">
 							{region.suggestion}
 						</p>

package/dist/components/editor/CollaborativeEditor.svelte

@@ -46,14 +46,14 @@
 
 	let {
 		doc: externalDoc,
-		documentId,
+		documentId: _documentId,
 		initialContent = '',
 		textName = 'content',
 		language = 'plaintext',
 		readonly = false,
 		preferences = {},
 		class: className = '',
-		currentUser,
+		currentUser: _currentUser,
 		onChange,
 		onCursorChange,
 		onSave

package/dist/components/editor/CommandPalette.svelte

@@ -7,7 +7,7 @@
 	 */
 
 	import { getCommandRegistry, type Command } from './core/commands';
-	import { onMount } from 'svelte';
+	import { SvelteMap } from 'svelte/reactivity';
 
 	interface Props {
 		/** Whether the palette is open */
@@ -43,7 +43,7 @@
 
 	// Group commands by category
 	let groupedCommands = $derived.by(() => {
-		const groups = new Map<string, Command[]>();
+		const groups = new SvelteMap<string, Command[]>();
 		for (const cmd of commands) {
 			const existing = groups.get(cmd.category) || [];
 			existing.push(cmd);
@@ -57,7 +57,8 @@
 
 	// Reset selection when query changes
 	$effect(() => {
-		query;
+		// Track query to reset selection on each change
+		void query;
 		selectedIndex = 0;
 	});
 
@@ -169,7 +170,6 @@
 </script>
 
 {#if open}
-	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 	<div
 		class="command-palette__backdrop"
 		onclick={handleBackdropClick}
@@ -200,13 +200,13 @@
 				{#if flatCommands.length === 0}
 					<div class="command-palette__empty">No commands found</div>
 				{:else}
-					{#each [...groupedCommands] as [category, categoryCommands], categoryIdx}
+					{#each [...groupedCommands] as [category, categoryCommands], _categoryIdx (category)}
 						<div class="command-palette__group">
 							<div class="command-palette__group-header">
 								<span class="command-palette__group-icon">{getCategoryIcon(category)}</span>
 								<span class="command-palette__group-label">{getCategoryLabel(category)}</span>
 							</div>
-							{#each categoryCommands as command, cmdIdx}
+							{#each categoryCommands as command, cmdIdx (command.id)}
 								{@const flatIdx = getFlatIndex(category, cmdIdx)}
 								<button
 									class="command-palette__item"
@@ -216,6 +216,7 @@
 								>
 									<span class="command-palette__item-icon">{command.icon || ''}</span>
 									<span class="command-palette__item-label">
+										<!-- eslint-disable-next-line svelte/no-at-html-tags -- content is sanitized via escapeHtml before regex substitution -->
 										{@html highlightMatch(command.label, query)}
 									</span>
 									{#if command.shortcut}

package/dist/components/editor/ComplexityLayer.svelte

@@ -7,6 +7,7 @@
 	 * Hover over gutter indicators for details.
 	 */
 
+	import { SvelteMap } from 'svelte/reactivity';
 	import type { ComplexityMetrics, ComplexityRegion } from './core/complexity-analyzer';
 
 	interface Props {
@@ -58,7 +59,7 @@
 
 	// Group by line (in case of overlapping regions, take highest score)
 	let lineScores = $derived.by(() => {
-		const scores = new Map<number, { score: number; region: ComplexityRegion; isStart: boolean; isEnd: boolean }>();
+		const scores = new SvelteMap<number, { score: number; region: ComplexityRegion; isStart: boolean; isEnd: boolean }>();
 
 		for (const indicator of lineIndicators) {
 			const existing = scores.get(indicator.line);

package/dist/components/editor/ComplexityLayer.svelte.d.ts

@@ -1,10 +1,3 @@
-/**
-     * Complexity Layer
-     *
-     * Shows complexity indicators in the gutter area only.
-     * No background highlighting - keeps editing area clean.
-     * Hover over gutter indicators for details.
-     */
 import type { ComplexityMetrics } from './core/complexity-analyzer';
 interface Props {
     /** Complexity metrics for the current document */

package/dist/components/editor/ConflictZoneLayer.svelte

@@ -149,7 +149,7 @@
 				<!-- Participant avatars -->
 				{#if showParticipants && zone.participants.length > 0}
 					<div class="conflict-zone__participants">
-						{#each zone.participants.slice(0, 3) as participant, i}
+						{#each zone.participants.slice(0, 3) as participant, i (participant.userId)}
 							<div
 								class="conflict-zone__avatar"
 								class:conflict-zone__avatar--ai={participant.isAI}
@@ -209,7 +209,7 @@
 			</div>
 
 			<div class="conflict-tooltip__participants">
-				{#each hoveredZone.participants as participant}
+				{#each hoveredZone.participants as participant (participant.userId)}
 					<div class="conflict-tooltip__participant">
 						<span
 							class="conflict-tooltip__dot"

package/dist/components/editor/ContextLens.svelte

@@ -52,7 +52,7 @@
 		charWidth,
 		gutterWidth,
 		enabled = true,
-		language = 'typescript'
+		language: _language = 'typescript'
 	}: Props = $props();
 
 	// Extract context lens items from code

package/dist/components/editor/CustomEditor.svelte

@@ -154,7 +154,6 @@
 	let cursorBlinkInterval: ReturnType<typeof setInterval>;
 
 	// Track previous content prop to detect external changes only
-	// svelte-ignore state_referenced_locally
 	let previousContentProp = $state(content);
 
 	// Track the content the editor itself last emitted (via onChange / bind:content
@@ -163,7 +162,6 @@
 	// rebuild the document model every keystroke, wiping undo/redo and collapsing
 	// multi-cursor. Only a genuine external change (content !== what we emitted and
 	// !== the current editor content) should re-apply via setContent.
-	// svelte-ignore state_referenced_locally
 	let lastEmittedContent = content;
 
 	// Track last cursor position to avoid unnecessary blink resets
@@ -571,7 +569,7 @@
 		});
 	}
 
-	function openFind(withReplace = false) {
+	function openFind(_withReplace = false) {
 		showFindReplace = true;
 
 		// Pre-fill with selected text if any
@@ -934,7 +932,7 @@
 		<!-- Search match highlights (below selection) -->
 		{#if showFindReplace && searchMatches.length > 0}
 			<div class="custom-editor__matches">
-				{#each matchRects as rect}
+				{#each matchRects as rect, i (i)}
 					<div
 						class="custom-editor__match"
 						class:custom-editor__match--current={rect.isCurrent}

package/dist/components/editor/DebugConsole.svelte

@@ -9,7 +9,7 @@
 	 * - Command history
 	 */
 
-	import { onMount } from 'svelte';
+	import { SvelteSet } from 'svelte/reactivity';
 
 	export type ConsoleEntryType = 'input' | 'output' | 'error' | 'warning' | 'info' | 'log';
 
@@ -69,10 +69,7 @@
 	let inputRef = $state<HTMLInputElement>(null!);
 	let consoleRef = $state<HTMLDivElement>(null!);
 	let filter = $state<ConsoleEntryType | 'all'>('all');
-	let expandedIds = $state<Set<string>>(new Set());
-
-	// Entry counter for unique IDs
-	let entryCounter = 0;
+	const expandedIds = new SvelteSet<string>();
 
 	// Filtered entries
 	const filteredEntries = $derived(
@@ -156,13 +153,11 @@
 	 * Toggle entry expansion
 	 */
 	function toggleExpand(id: string) {
-		const newExpanded = new Set(expandedIds);
-		if (newExpanded.has(id)) {
-			newExpanded.delete(id);
+		if (expandedIds.has(id)) {
+			expandedIds.delete(id);
 		} else {
-			newExpanded.add(id);
+			expandedIds.add(id);
 		}
-		expandedIds = newExpanded;
 	}
 
 	/**
@@ -265,7 +260,7 @@
 			</div>
 
 			<div class="header-filters">
-				{#each (['all', 'error', 'warning', 'info', 'log'] as const) as filterType}
+				{#each (['all', 'error', 'warning', 'info', 'log'] as const) as filterType (filterType)}
 					{@const count = entryCounts()[filterType]}
 					<button
 						class="filter-btn"

package/dist/components/editor/EchoCursorLayer.svelte

@@ -8,6 +8,7 @@
 
 	import type { EchoCursor, EchoCursorManager, EchoCursorEvent } from './core/echo-cursor';
 	import { onMount } from 'svelte';
+	import { SvelteMap } from 'svelte/reactivity';
 
 	interface Props {
 		/** Echo cursor manager instance */
@@ -30,12 +31,12 @@
 		charWidth,
 		gutterWidth = 50,
 		enabled = true,
-		onAddEchoPoint
+		onAddEchoPoint: _onAddEchoPoint
 	}: Props = $props();
 
 	let echoCursors = $state<EchoCursor[]>([]);
 	let replayingCursors = $state<Set<string>>(new Set());
-	let recentReplay = $state<Map<string, { text: string; opacity: number }>>(new Map());
+	let recentReplay = new SvelteMap<string, { text: string; opacity: number }>();
 
 	// Subscribe to echo cursor events
 	onMount(() => {
@@ -58,7 +59,6 @@
 							text: event.keystroke.data.text,
 							opacity: 1
 						});
-						recentReplay = new Map(recentReplay);
 					}
 					break;
 				case 'replay-completed':
@@ -68,10 +68,8 @@
 						const entry = recentReplay.get(event.cursorId);
 						if (entry) {
 							entry.opacity = 0;
-							recentReplay = new Map(recentReplay);
 							setTimeout(() => {
 								recentReplay.delete(event.cursorId);
-								recentReplay = new Map(recentReplay);
 							}, 200);
 						}
 					}, 100);
@@ -80,7 +78,7 @@
 					if (!event.enabled) {
 						echoCursors = [];
 						replayingCursors = new Set();
-						recentReplay = new Map();
+						recentReplay.clear();
 					}
 					break;
 			}

package/dist/components/editor/EditorGutter.svelte

@@ -20,11 +20,11 @@
 	let {
 		lineIndex,
 		lineNumbers,
-		gutterWidth,
+		gutterWidth: _gutterWidth,
 		folding,
 		hasFoldIndicator,
 		isFoldCollapsed,
-		hiddenLineCount,
+		hiddenLineCount: _hiddenLineCount,
 		onFoldIndicatorClick
 	}: Props = $props();
 </script>

package/dist/components/editor/EditorPane.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Editor from './Editor.svelte';
 	import EditorTabs from './EditorTabs.svelte';
-	import type { EditorTab, EditorPreferences } from '../../types';
+	import type { EditorPreferences } from '../../types';
 	import {
 		getTabs,
 		getActiveTab,

package/dist/components/editor/EditorSelections.svelte

@@ -12,7 +12,7 @@
 		getSelectionEnd,
 		isSelectionEmpty
 	} from './core';
-	import { CONTENT_PADDING, FALLBACK_VIEWPORT_HEIGHT } from './constants';
+	import { FALLBACK_VIEWPORT_HEIGHT } from './constants';
 
 	interface Props {
 		cursors: readonly Cursor[];
@@ -128,7 +128,7 @@
 
 <!-- Selection layer (all cursor selections) -->
 <div class="custom-editor__selections">
-	{#each getSelectionRects() as rect}
+	{#each getSelectionRects() as rect, i (i)}
 		<div
 			class="custom-editor__selection"
 			class:custom-editor__selection--secondary={!rect.isPrimary}

package/dist/components/editor/FileExplorer.svelte

@@ -31,6 +31,7 @@
 	import AgentAvatar from '../agents/AgentAvatar.svelte';
 	import type { VFSLockStatus, Agent } from '../../types';
 	import { tick, onDestroy } from 'svelte';
+	import { SvelteSet } from 'svelte/reactivity';
 
 	interface Props {
 		/** Root file nodes */
@@ -110,15 +111,6 @@
 		return statusMap.get(path) ?? 'clean';
 	}
 
-	// Helper to check if a folder contains any files with changes
-	function folderHasChanges(node: FileNode): boolean {
-		if (node.type === 'file') {
-			return getFileStatus(node.path) !== 'clean';
-		}
-		if (!node.children) return false;
-		return node.children.some((child) => folderHasChanges(child));
-	}
-
 	// Get the most "important" status for a folder (deleted > modified > created > renamed)
 	function getFolderStatus(node: FileNode): FileChangeStatus {
 		if (node.type === 'file') return getFileStatus(node.path);
@@ -171,7 +163,7 @@
 		return agentsByFile.get(path) ?? [];
 	}
 
-	let expandedFolders = $state<Set<string>>(new Set());
+	let expandedFolders = new SvelteSet<string>();
 	let contextMenuNode = $state<FileNode | null>(null);
 	let contextMenuPos = $state({ x: 0, y: 0 });
 	let showContextMenu = $state(false);
@@ -194,13 +186,11 @@
 	function toggleFolder(node: FileNode) {
 		if (node.type !== 'folder') return;
 
-		const newExpanded = new Set(expandedFolders);
-		if (newExpanded.has(node.path)) {
-			newExpanded.delete(node.path);
+		if (expandedFolders.has(node.path)) {
+			expandedFolders.delete(node.path);
 		} else {
-			newExpanded.add(node.path);
+			expandedFolders.add(node.path);
 		}
-		expandedFolders = newExpanded;
 		onToggle?.(node);
 	}
 
@@ -208,9 +198,7 @@
 	async function startInlineCreation(parentPath: string, type: 'file' | 'folder') {
 		// Expand parent folder if it's not root
 		if (parentPath) {
-			const newExpanded = new Set(expandedFolders);
-			newExpanded.add(parentPath);
-			expandedFolders = newExpanded;
+			expandedFolders.add(parentPath);
 		}
 
 		inlineCreation = {

package/dist/components/editor/FindReplace.svelte

@@ -57,12 +57,9 @@
 
 	let findInput = $state<HTMLInputElement | null>(null);
 	let replaceInput = $state<HTMLInputElement | null>(null);
-	let showReplaceLocal = $state(false);
 
-	// Sync with prop
-	$effect(() => {
-		showReplaceLocal = showReplace;
-	});
+	// Writable derived: tracks the showReplace prop but allows local overrides (e.g. toggle)
+	let showReplaceLocal = $derived(showReplace);
 
 	// Focus find input on mount
 	onMount(() => {

package/dist/components/editor/GhostBracketLayer.svelte

@@ -143,7 +143,6 @@
 			{/if}
 
 			<!-- Ghost bracket marker -->
-			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<div
 				class="ghost-bracket"
 				role="tooltip"
@@ -187,7 +186,7 @@
 		{/each}
 
 		<!-- Bracket mismatch markers -->
-		{#each mismatches as mismatch}
+		{#each mismatches as mismatch (`${mismatch.position.line}:${mismatch.position.column}:${mismatch.issue}`)}
 			{@const color = getSeverityColor(mismatch.severity)}
 			<div
 				class="bracket-mismatch bracket-mismatch--{mismatch.issue}"

package/dist/components/editor/InlineDiagnosticsLayer.svelte

@@ -72,6 +72,7 @@
 
 	// Group diagnostics by line for gutter icons
 	const diagnosticsByLine = $derived(() => {
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity -- local computation variable recreated each derivation, not mutated reactive state
 		const byLine = new Map<number, Diagnostic[]>();
 		for (const d of diagnostics) {
 			const line = d.range.start.line;
@@ -235,7 +236,6 @@
 
 	<!-- Tooltip -->
 	{#if showTooltip && hoveredDiagnostic}
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
 			class="diagnostic-tooltip"
 			role="tooltip"
@@ -254,6 +254,7 @@
 				{#if hoveredDiagnostic.code}
 					<span class="tooltip-code">
 						{#if hoveredDiagnostic.codeUrl}
+							<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -- codeUrl is an external URL from diagnostic data, not a local app path -->
 							<a href={hoveredDiagnostic.codeUrl} target="_blank" rel="noopener">
 								{hoveredDiagnostic.code}
 							</a>
@@ -268,7 +269,7 @@
 
 			{#if hoveredDiagnostic.relatedInfo && hoveredDiagnostic.relatedInfo.length > 0}
 				<div class="tooltip-related">
-					{#each hoveredDiagnostic.relatedInfo as info}
+					{#each hoveredDiagnostic.relatedInfo as info, i (i)}
 						<div class="related-item">
 							<span class="related-location">
 								{info.filePath || 'this file'}:{info.range.start.line + 1}
@@ -282,7 +283,7 @@
 			{#if hoveredDiagnostic.fixes && hoveredDiagnostic.fixes.length > 0}
 				<div class="tooltip-fixes">
 					<div class="fixes-header">Quick Fixes</div>
-					{#each hoveredDiagnostic.fixes as fix}
+					{#each hoveredDiagnostic.fixes as fix, i (i)}
 						<button
 							class="fix-button"
 							class:fix-button--preferred={fix.isPreferred}