Merge pull request #506 from AtalayaLabs/claude/frontend-performance-analysis-iwtyx1

frontend/src/lib/components/AppShell.svelte

@@ -6,7 +6,7 @@
 	import { searchFiles } from '$lib/api/endpoints/search';
 	import { fileInlineUrl } from '$lib/api/endpoints/files';
 	import type { FileItem, FolderItem } from '$lib/api/types';
-	import CommandPalette from '$lib/components/CommandPalette.svelte';
+	import { lazyComponent } from '$lib/composables/lazyComponent.svelte';
 	import Icon from '$lib/icons/Icon.svelte';
 	import { iconNameFromClass } from '$lib/utils/display';
 	import { userInitials, avatarColorIndex } from '$lib/utils/avatar';
@@ -19,6 +19,10 @@
 
 	let { children }: { children: Snippet } = $props();
 
+	// The command palette is loaded on its first Cmd/Ctrl+K and mounted open.
+	// Until then its ~400-line module stays out of the initial bundle.
+	const palette = lazyComponent(() => import('$lib/components/CommandPalette.svelte'));
+
 	interface NavLink {
 		href: string;
 		label: string;
@@ -232,6 +236,13 @@
 <svelte:window
 	onclick={closeMenus}
 	onkeydown={(e) => {
+		// First Cmd/Ctrl+K loads the palette and mounts it open; once mounted,
+		// the palette's own handler takes over toggling/closing.
+		if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k' && !palette.component) {
+			e.preventDefault();
+			void palette.load();
+			return;
+		}
 		if (e.key !== 'Escape') return;
 		if (aboutOpen) aboutOpen = false;
 		else if (searchActive) closeMobileSearch();
@@ -692,7 +703,10 @@
 	</div>
 {/if}
 
-<CommandPalette />
+{#if palette.component}
+	{@const CommandPalette = palette.component}
+	<CommandPalette autoOpen />
+{/if}
 
 <style>
 	/* Body becomes the sidebar+main flex row only while the shell is mounted. */

frontend/src/lib/components/CommandPalette.svelte

@@ -17,6 +17,10 @@
 		run: () => void;
 	}
 
+	// `autoOpen` lets a lazy host (AppShell) mount us already-open on the first
+	// Cmd/Ctrl+K, since our own key listener only exists once we're mounted.
+	let { autoOpen = false }: { autoOpen?: boolean } = $props();
+
 	let open = $state(false);
 	// Drives the enter animation: flipped on after mount so the overlay/panel
 	// transition from their initial (faded/offset) state.
@@ -30,6 +34,18 @@
 	// Element focused before the palette opened, restored on close.
 	let prevFocus: HTMLElement | null = null;
 
+	// When mounted already-open (autoOpen), run the same enter sequence the
+	// keyboard path uses. Guarded so it fires once, not on every reopen.
+	let didAutoOpen = false;
+	$effect(() => {
+		if (didAutoOpen || !autoOpen) return;
+		didAutoOpen = true;
+		open = true;
+		prevFocus = document.activeElement as HTMLElement | null;
+		requestAnimationFrame(() => (entered = true));
+		queueMicrotask(() => input?.focus());
+	});
+
 	function close() {
 		open = false;
 		entered = false;