@myrialabs/clopen 0.1.1 → 0.1.3

package/frontend/lib/components/chat/tools/GrepTool.svelte

@@ -7,8 +7,8 @@
 
 	const { toolInput }: { toolInput: GrepToolInput } = $props();
 
-	const pattern = toolInput.input.pattern || '';
-	const searchPath = toolInput.input.path || 'current directory';
+	const pattern = $derived(toolInput.input.pattern || '');
+	const searchPath = $derived(toolInput.input.path || 'current directory');
 
 	// Get active search parameters for display
 	function getActiveParameters() {
@@ -55,10 +55,10 @@
 		return params;
 	}
 
-	const activeParameters = getActiveParameters();
+	const activeParameters = $derived(getActiveParameters());
 
-	const formattedPattern = truncateText(pattern, 40);
-	const formattedPath = formatPath(searchPath);
+	const formattedPattern = $derived(truncateText(pattern, 40));
+	const formattedPath = $derived(formatPath(searchPath));
 </script>
 
 <div class="bg-white dark:bg-slate-800 rounded-md border border-slate-200/60 dark:border-slate-700/60 p-3">

package/frontend/lib/components/chat/tools/ListMcpResourcesTool.svelte

@@ -5,7 +5,7 @@
 
 	const { toolInput }: { toolInput: ListMcpResourcesToolInput } = $props();
 	
-	const server = toolInput.input.server;
+	const server = $derived(toolInput.input.server);
 </script>
 
 <div class="bg-white dark:bg-slate-800 rounded-md border border-slate-200/60 dark:border-slate-700/60 p-3">

package/frontend/lib/components/chat/tools/NotebookEditTool.svelte

@@ -5,12 +5,12 @@
 
 	const { toolInput }: { toolInput: NotebookEditToolInput } = $props();
 	
-	const notebookPath = toolInput.input.notebook_path;
-	const fileName = notebookPath.split(/[/\\]/).pop() || notebookPath;
-	const cellId = toolInput.input.cell_id;
-	const cellType = toolInput.input.cell_type || 'code';
-	const editMode = toolInput.input.edit_mode || 'replace';
-	const newSource = toolInput.input.new_source;
+	const notebookPath = $derived(toolInput.input.notebook_path);
+	const fileName = $derived(notebookPath.split(/[/\\]/).pop() || notebookPath);
+	const cellId = $derived(toolInput.input.cell_id);
+	const cellType = $derived(toolInput.input.cell_type || 'code');
+	const editMode = $derived(toolInput.input.edit_mode || 'replace');
+	const newSource = $derived(toolInput.input.new_source);
 </script>
 
 <FileHeader filePath={notebookPath} fileName={fileName} />

package/frontend/lib/components/chat/tools/ReadMcpResourceTool.svelte

@@ -5,8 +5,8 @@
 
 	const { toolInput }: { toolInput: ReadMcpResourceToolInput } = $props();
 	
-	const server = toolInput.input.server;
-	const uri = toolInput.input.uri;
+	const server = $derived(toolInput.input.server);
+	const uri = $derived(toolInput.input.uri);
 </script>
 
 <div class="bg-white dark:bg-slate-800 rounded-md border border-slate-200/60 dark:border-slate-700/60 p-3">

package/frontend/lib/components/chat/tools/ReadTool.svelte

@@ -5,10 +5,10 @@
 
 	const { toolInput }: { toolInput: ReadToolInput } = $props();
 	
-	const filePath = toolInput.input.file_path || '';
-	const fileName = filePath.split(/[/\\]/).pop() || filePath || 'unknown';
-	const hasLimit = toolInput.input.limit !== undefined;
-	const hasOffset = toolInput.input.offset !== undefined;
+	const filePath = $derived(toolInput.input.file_path || '');
+	const fileName = $derived(filePath.split(/[/\\]/).pop() || filePath || 'unknown');
+	const hasLimit = $derived(toolInput.input.limit !== undefined);
+	const hasOffset = $derived(toolInput.input.offset !== undefined);
 </script>
 
 <div class="bg-white dark:bg-slate-800 rounded-md border border-slate-200/60 dark:border-slate-700/60 p-3">

package/frontend/lib/components/chat/tools/TaskStopTool.svelte

@@ -5,7 +5,7 @@
 
 	const { toolInput }: { toolInput: TaskStopToolInput } = $props();
 
-	const taskId = toolInput.input.task_id || toolInput.input.shell_id || 'unknown';
+	const taskId = $derived(toolInput.input.task_id || toolInput.input.shell_id || 'unknown');
 </script>
 
 <div class="bg-white dark:bg-slate-800 rounded-md border border-slate-200/60 dark:border-slate-700/60 p-3">

package/frontend/lib/components/chat/tools/TaskTool.svelte

@@ -15,7 +15,7 @@
 		return desc;
 	}
 
-	const formattedDesc = formatDescription(toolInput.input.description || '');
+	const formattedDesc = $derived(formatDescription(toolInput.input.description || ''));
 </script>
 
 <div class="bg-white dark:bg-slate-800 rounded-md border border-slate-200/60 dark:border-slate-700/60 p-3">

package/frontend/lib/components/chat/tools/TodoWriteTool.svelte

@@ -5,10 +5,10 @@
 
 	const { toolInput }: { toolInput: TodoWriteToolInput } = $props();
 
-	const todos = toolInput.input.todos;
-	const totalTodos = todos.length;
-	const completedTodos = todos.filter((t) => t.status === 'completed').length;
-	const percentage = totalTodos > 0 ? Math.round((completedTodos / totalTodos) * 100) : 0;
+	const todos = $derived(toolInput.input.todos);
+	const totalTodos = $derived(todos.length);
+	const completedTodos = $derived(todos.filter((t) => t.status === 'completed').length);
+	const percentage = $derived(totalTodos > 0 ? Math.round((completedTodos / totalTodos) * 100) : 0);
 
 	// Helper functions for todo items
 	function getStatusIcon(status: string): IconName {

package/frontend/lib/components/chat/tools/WebSearchTool.svelte

@@ -15,7 +15,7 @@
 		return query;
 	}
 
-	const formattedQuery = formatQuery(toolInput.input.query || '');
+	const formattedQuery = $derived(formatQuery(toolInput.input.query || ''));
 </script>
 
 <div class="bg-white dark:bg-slate-800 rounded-md border border-slate-200/60 dark:border-slate-700/60 p-3">

package/frontend/lib/components/chat/tools/WriteTool.svelte

@@ -5,9 +5,9 @@
 
 	const { toolInput }: { toolInput: WriteToolInput } = $props();
 
-	const filePath = toolInput.input.file_path || '';
-	const fileName = filePath.split(/[/\\]/).pop() || filePath || 'unknown';
-	const content = toolInput.input.content || '';
+	const filePath = $derived(toolInput.input.file_path || '');
+	const fileName = $derived(filePath.split(/[/\\]/).pop() || filePath || 'unknown');
+	const content = $derived(toolInput.input.content || '');
 </script>
 
 <FileHeader

package/frontend/lib/components/chat/tools/components/CodeBlock.svelte

@@ -56,9 +56,9 @@
 		}
 	};
 
-	const style = styles[type];
-	const formattedCode = formatCode(code);
-	const isTerminal = isTerminalOutput(code);
+	const style = $derived(styles[type]);
+	const formattedCode = $derived(formatCode(code));
+	const isTerminal = $derived(isTerminalOutput(code));
 </script>
 
 <div>

package/frontend/lib/components/chat/tools/components/DiffBlock.svelte

@@ -325,8 +325,8 @@
 		return result;
 	}
 
-	const diffGroups = computeDiff(oldString, newString);
-	const hasChanges = diffGroups.some(group => group.type === 'change');
+	const diffGroups = $derived(computeDiff(oldString, newString));
+	const hasChanges = $derived(diffGroups.some(group => group.type === 'change'));
 </script>
 
 <div>

package/frontend/lib/components/chat/tools/components/FileHeader.svelte

@@ -14,7 +14,7 @@
 
 	const { filePath, fileName, iconColor, badges = [], box = true }: Props = $props();
 
-	const displayFileName = fileName || filePath.split(/[/\\]/).pop() || filePath;
+	const displayFileName = $derived(fileName || filePath.split(/[/\\]/).pop() || filePath);
 </script>
 
 <div class={box ? "bg-white dark:bg-slate-800 rounded-md border border-slate-200/60 dark:border-slate-700/60 p-3" : ""}>

package/frontend/lib/components/chat/tools/components/InfoLine.svelte

@@ -13,7 +13,7 @@
 	const { icon, text, iconColor = 'text-slate-500', textColor = 'text-slate-600 dark:text-slate-400', title="" }: Props = $props();
 </script>
 
-<div class="flex items-center gap-1.5" {title}>
-	<Icon name={icon} class="{iconColor} w-3.5 h-3.5" />
+<div class="flex items-start gap-1.5" {title}>
+	<Icon name={icon} class="{iconColor} w-3.5 h-3.5 flex-none" />
 	<span class="text-xs {textColor}">{text}</span>
 </div>

package/frontend/lib/components/chat/tools/components/StatsBadges.svelte

@@ -12,7 +12,7 @@
 
 	const { stats, columns = 3 }: Props = $props();
 
-	const gridClass = columns === 2 ? 'grid-cols-2' : columns === 4 ? 'grid-cols-4' : 'grid-cols-3';
+	const gridClass = $derived(columns === 2 ? 'grid-cols-2' : columns === 4 ? 'grid-cols-4' : 'grid-cols-3');
 </script>
 
 <div class="grid {gridClass} gap-4 text-center text-sm">

package/frontend/lib/components/chat/tools/components/TerminalCommand.svelte

@@ -15,7 +15,7 @@
 		return { mainCommand, args };
 	}
 
-	const { mainCommand, args } = parseCommandParts(command);
+	const parsedCommand = $derived(parseCommandParts(command));
 </script>
 
 <!-- Description (if provided) -->
@@ -38,15 +38,15 @@
 			</div>
 		{/if}
 	</div>
-	
+
 	<!-- Terminal-style command display -->
 	<div class="bg-slate-50 dark:bg-slate-950 border border-slate-200/60 dark:border-slate-800/60 rounded-md p-2.5 font-mono text-sm">
 		<div class="flex items-start gap-2">
 			<span class="text-green-600 dark:text-green-400 select-none">$</span>
 			<div class="flex-1 text-slate-900 dark:text-slate-200 break-all">
-				<span class="text-violet-600 dark:text-violet-300 font-medium">{mainCommand}</span>
-				{#if args.length > 0}
-					<span class="text-slate-700 dark:text-slate-300"> {args.join(' ')}</span>
+				<span class="text-violet-600 dark:text-violet-300 font-medium">{parsedCommand.mainCommand}</span>
+				{#if parsedCommand.args.length > 0}
+					<span class="text-slate-700 dark:text-slate-300"> {parsedCommand.args.join(' ')}</span>
 				{/if}
 			</div>
 		</div>

package/frontend/lib/components/common/Button.svelte

@@ -33,7 +33,7 @@
 		lg: 'px-4 md:px-6 py-3 text-sm md:text-base rounded-lg'
 	};
 
-	const buttonClasses = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`;
+	const buttonClasses = $derived(`${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`);
 
 	function handleClick() {
 		if (!disabled && !loading && onclick) {

package/frontend/lib/components/common/Card.svelte

@@ -31,11 +31,11 @@
 		lg: 'p-4 md:p-6'
 	};
 
-	const clickableClasses = clickable
+	const clickableClasses = $derived(clickable
 		? 'cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800'
-		: '';
+		: '');
 
-	const cardClasses = `${baseClasses} ${variantClasses[variant]} ${paddingClasses[padding]} ${clickableClasses} ${className}`;
+	const cardClasses = $derived(`${baseClasses} ${variantClasses[variant]} ${paddingClasses[padding]} ${clickableClasses} ${className}`);
 
 	function handleClick() {
 		if (clickable && onclick) {

package/frontend/lib/components/common/Input.svelte

@@ -22,14 +22,14 @@
 	const baseClasses =
 		'block w-full px-3 py-3 border border-slate-300 dark:border-slate-600 rounded-lg transition-colors duration-200 focus:outline-none text-sm font-medium';
 
-	const stateClasses = error
+	const stateClasses = $derived(error
 		? 'border-red-400 focus:border-red-500 focus:ring-2 focus:ring-red-200 dark:focus:ring-red-900/20'
-		: 'focus:border-violet-500 focus:ring-2 focus:ring-violet-200 dark:focus:ring-violet-900/20';
+		: 'focus:border-violet-500 focus:ring-2 focus:ring-violet-200 dark:focus:ring-violet-900/20');
 
 	const backgroundClasses =
 		'bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500';
 
-	const inputClasses = `${baseClasses} ${stateClasses} ${backgroundClasses} ${className}`;
+	const inputClasses = $derived(`${baseClasses} ${stateClasses} ${backgroundClasses} ${className}`);
 
 	function handleInput(event: Event) {
 		const target = event.target as HTMLInputElement;

package/frontend/lib/components/common/LoadingSpinner.svelte

@@ -35,7 +35,7 @@
 		xl: 'text-xl'
 	};
 
-	const spinnerClasses = `animate-spin rounded-full border-2 ${sizeClasses[size]} ${color ? colorClasses[color] : ''} border-t-transparent ${className}`;
+	const spinnerClasses = $derived(`animate-spin rounded-full border-2 ${sizeClasses[size]} ${color ? colorClasses[color] : ''} border-t-transparent ${className}`);
 </script>
 
 <div class="flex flex-col items-center space-y-2" {...props}>

package/frontend/lib/components/common/Select.svelte

@@ -22,18 +22,18 @@
 	const baseClasses =
 		'block w-full px-3 py-3 pr-10 border border-slate-300 dark:border-slate-600 rounded-lg transition-colors duration-200 focus:outline-none text-sm font-medium appearance-none cursor-pointer';
 
-	const stateClasses = error
+	const stateClasses = $derived(error
 		? 'border-red-400 focus:border-red-500 focus:ring-2 focus:ring-red-200 dark:focus:ring-red-900/20'
-		: 'focus:border-violet-500 focus:ring-2 focus:ring-violet-200 dark:focus:ring-violet-900/20';
+		: 'focus:border-violet-500 focus:ring-2 focus:ring-violet-200 dark:focus:ring-violet-900/20');
 
 	const backgroundClasses =
 		'bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100';
 
-	const disabledClasses = disabled 
-		? 'cursor-not-allowed opacity-60' 
-		: '';
+	const disabledClasses = $derived(disabled
+		? 'cursor-not-allowed opacity-60'
+		: '');
 
-	const selectClasses = `${baseClasses} ${stateClasses} ${backgroundClasses} ${disabledClasses} ${className}`;
+	const selectClasses = $derived(`${baseClasses} ${stateClasses} ${backgroundClasses} ${disabledClasses} ${className}`);
 
 	function handleChange(event: Event) {
 		const target = event.target as HTMLSelectElement;

package/frontend/lib/components/common/Textarea.svelte

@@ -23,9 +23,9 @@
 	const baseClasses =
 		'block w-full px-3 py-3 border border-slate-300 dark:border-slate-600 rounded-lg transition-colors duration-200 focus:outline-none text-sm font-medium';
 
-	const stateClasses = error
+	const stateClasses = $derived(error
 		? 'border-red-400 focus:border-red-500 focus:ring-2 focus:ring-red-200 dark:focus:ring-red-900/20'
-		: 'focus:border-violet-500 focus:ring-2 focus:ring-violet-200 dark:focus:ring-violet-900/20';
+		: 'focus:border-violet-500 focus:ring-2 focus:ring-violet-200 dark:focus:ring-violet-900/20');
 
 	const backgroundClasses =
 		'bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500';
@@ -37,7 +37,7 @@
 		vertical: 'resize-y'
 	};
 
-	const textareaClasses = `${baseClasses} ${stateClasses} ${backgroundClasses} ${resizeClasses[resize]} ${className}`;
+	const textareaClasses = $derived(`${baseClasses} ${stateClasses} ${backgroundClasses} ${resizeClasses[resize]} ${className}`);
 
 	function handleInput(event: Event) {
 		const target = event.target as HTMLTextAreaElement;

package/frontend/lib/components/files/FileViewer.svelte

@@ -439,7 +439,7 @@
 				<!-- External change badge + refresh button -->
 				{#if externallyChanged && onForceReload}
 					<div class="flex items-center gap-1 mr-1">
-						<span class="text-[10px] px-1.5 py-0.5 rounded bg-amber-100 dark:bg-amber-900/50 text-amber-700 dark:text-amber-400 font-medium whitespace-nowrap">
+						<span class="text-3xs px-1.5 py-0.5 rounded bg-amber-100 dark:bg-amber-900/50 text-amber-700 dark:text-amber-400 font-medium whitespace-nowrap">
 							Changed externally
 						</span>
 						<button

package/frontend/lib/components/git/ChangesSection.svelte

@@ -20,15 +20,13 @@
 		onResolve?: (path: string) => void;
 	}
 
-	const {
+	let {
 		title, icon, files, section,
-		collapsed = false,
+		collapsed: isCollapsed = $bindable(false),
 		onStage, onUnstage, onDiscard,
 		onStageAll, onUnstageAll, onDiscardAll,
 		onViewDiff, onResolve
 	}: Props = $props();
-
-	let isCollapsed = $state(collapsed);
 </script>
 
 {#if files.length > 0}

package/frontend/lib/components/preview/browser/BrowserPreview.svelte

@@ -112,7 +112,7 @@
 			}
 		},
 		onMcpCursorHide: () => {
-			mcpVirtualCursor = { ...mcpVirtualCursor, visible: false };
+			// Cursor stays visible between automated steps until user interacts manually
 		},
 		transformBrowserToDisplayCoordinates: (browserX, browserY) => {
 			return transformBrowserToDisplayCoordinates(browserX, browserY);
@@ -360,44 +360,33 @@
 	function handleCanvasInteraction(action: any) {
 		const tab = activeTab;
 		if (tab && tab.sessionId) {
+			// Hide the AI cursor instantly if the human explicitly interacts
+			mcpVirtualCursor = { ...mcpVirtualCursor, visible: false };	
 			coordinator.sendInteraction(action);
 		}
 	}
 
 	function transformBrowserToDisplayCoordinates(browserX: number, browserY: number): { x: number, y: number } | null {
 		let canvasElement: HTMLCanvasElement | null = null;
-
-		// Try to get canvas element from canvasAPI first (preferred method)
 		if (canvasAPI && canvasAPI.getCanvasElement) {
 			canvasElement = canvasAPI.getCanvasElement();
 		}
-
-		// Fallback: Try to get canvas element directly from DOM if canvasAPI not ready yet
-		// This handles race condition where context menu event arrives before canvasAPI is set
 		if (!canvasElement && typeof document !== 'undefined') {
-			// Canvas is rendered inside Container component
-			const foundCanvas = document.querySelector('canvas[tabindex="0"]') as HTMLCanvasElement;
-			if (foundCanvas) {
-				canvasElement = foundCanvas;
-				debug.log('preview', `Using fallback DOM query to get canvas element`);
-			}
-		}
-
-		if (!canvasElement) {
-			debug.warn('preview', `Transform coordinates failed: canvasElement not found (browser: ${browserX}, ${browserY})`);
-			return null;
+			canvasElement = document.querySelector('canvas[tabindex="0"]') as HTMLCanvasElement;
 		}
+		if (!canvasElement) return null;
 
 		try {
 			const canvasRect = canvasElement.getBoundingClientRect();
+			if (!canvasRect || canvasElement.width === 0 || canvasElement.height === 0) return null;
+			
 			const scaleX = canvasRect.width / canvasElement.width;
 			const scaleY = canvasRect.height / canvasElement.height;
 			const screenX = canvasRect.left + (browserX * scaleX);
 			const screenY = canvasRect.top + (browserY * scaleY);
 
 			return { x: screenX, y: screenY };
-		} catch (error) {
-			debug.error('preview', 'Error transforming coordinates:', error);
+		} catch (e) {
 			return null;
 		}
 	}
@@ -500,6 +489,7 @@
 				bind:isStreamReady
 				bind:errorMessage
 				bind:virtualCursor
+				bind:mcpVirtualCursor
 				bind:canvasAPI
 				bind:previewDimensions
 				bind:lastFrameData={currentTabLastFrameData}
@@ -509,16 +499,6 @@
 			/>
 		</div>
 
-		<!-- Virtual Cursor - User -->
-		{#if !isCurrentTabMcpControlled()}
-			<VirtualCursor cursor={virtualCursor} />
-		{/if}
-
-		<!-- MCP Virtual Cursor -->
-		{#if mcpHandler.mcpControlState.isControlled}
-			<VirtualCursor cursor={mcpVirtualCursor} />
-		{/if}
-
 		<!-- Native UI Overlays -->
 		<SelectDropdown
 			bind:selectInfo={currentSelectInfo}

package/frontend/lib/components/preview/browser/components/Container.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import Icon from '$frontend/lib/components/common/Icon.svelte';
 	import Canvas from './Canvas.svelte';
+	import VirtualCursor from './VirtualCursor.svelte';
 	import { scale } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
 	import { onDestroy } from 'svelte';
@@ -27,6 +28,11 @@
 			y: 0,
 			visible: false
 		}),
+		mcpVirtualCursor = $bindable<{ x: number; y: number; visible: boolean; clicking?: boolean }>({
+			x: 0,
+			y: 0,
+			visible: false
+		}),
 		lastFrameData = $bindable<any>(null), // Add lastFrameData prop
 
 		// MCP Control State
@@ -419,6 +425,7 @@
 					</div> -->
 				</div>
 			{/if}
+
 		</div>
 	{:else}
 		<div
@@ -431,6 +438,16 @@
 			<p class="text-sm">Enter a URL to preview your web application</p>
 		</div>
 	{/if}
+
+	<!-- Virtual Cursor - User -->
+	{#if !isMcpControlled}
+		<VirtualCursor cursor={virtualCursor} />
+	{/if}
+
+	<!-- MCP Virtual Cursor -->
+	{#if mcpVirtualCursor.visible}
+		<VirtualCursor cursor={mcpVirtualCursor} />
+	{/if}
 </div>
 
 <style>

package/frontend/lib/components/preview/browser/components/VirtualCursor.svelte

@@ -7,8 +7,8 @@
 <!-- Virtual Cursor for Autonomous Testing -->
 {#if cursor.visible}
 	<div 
-		class="fixed pointer-events-none z-50 transition-all duration-100"
-		style="left: {cursor.x - 4}px; top: {cursor.y - 2}px;"
+		class="fixed pointer-events-none z-50 transition-all duration-100 ease-out"
+		style="left: {cursor.x}px; top: {cursor.y}px; margin-left: -4.167px; margin-top: -2.5px;"
 	>
 		<!-- Cursor body with fixed size -->
 		<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" 

package/frontend/lib/components/settings/appearance/AppearanceSettings.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { themeStore, toggleDarkMode } from '$frontend/lib/stores/ui/theme.svelte';
 	import Icon from '../../common/Icon.svelte';
-	import LayoutPresetSettings from './LayoutPresetSettings.svelte';
 </script>
 
 <div class="py-1">
@@ -44,8 +43,3 @@
 		</div>
 	</div>
 </div>
-
-<!-- Layout Presets -->
-<div class="mt-6">
-	<LayoutPresetSettings />
-</div>

package/frontend/lib/components/settings/appearance/LayoutPresetSettings.svelte

@@ -8,34 +8,34 @@
 	// Group presets by category
 	const presetCategories = [
 		{
-			name: 'Single Panel Focus',
-			description: 'Full screen layouts for maximum focus',
+			name: 'Single Panel',
+			description: 'Full screen focus mode',
 			icon: 'lucide:maximize-2',
-			presets: builtInPresets.slice(0, 5)
+			presets: builtInPresets.slice(0, 1)
 		},
 		{
-			name: 'Two Panel Layouts',
-			description: 'Dual focus workflows',
+			name: 'Two Panels',
+			description: 'Dual panel layouts',
 			icon: 'lucide:columns-2',
-			presets: builtInPresets.slice(5, 13)
+			presets: builtInPresets.slice(1, 4)
 		},
 		{
-			name: 'Three Panel Layouts',
-			description: 'Balanced multi-panel setups',
+			name: 'Three Panels',
+			description: 'Multi-panel arrangements',
 			icon: 'lucide:columns-3',
-			presets: builtInPresets.slice(13, 22)
+			presets: builtInPresets.slice(4, 8)
 		},
 		{
-			name: 'Four Panel Layouts',
-			description: 'All panels visible',
+			name: 'Four Panels',
+			description: 'Complex grid layouts',
 			icon: 'lucide:layout-grid',
-			presets: builtInPresets.slice(22, 26)
+			presets: builtInPresets.slice(8, 11)
 		},
 		{
-			name: 'Five Panel Layouts',
-			description: 'Full workspace with source control',
+			name: 'Five Panels',
+			description: 'Full workspace grid',
 			icon: 'lucide:layout-dashboard',
-			presets: builtInPresets.slice(26, 28)
+			presets: builtInPresets.slice(11, 12)
 		}
 	];
 

package/frontend/lib/components/settings/appearance/LayoutPreview.svelte

@@ -8,7 +8,7 @@
 
 	const { layout, size = 'small' }: Props = $props();
 
-	const height = size === 'small' ? 'h-8' : 'h-12';
+	const height = $derived(size === 'small' ? 'h-8' : 'h-12');
 
 	// Panel colors - softer colors that blend with theme
 	const panelColors: Record<PanelId, string> = {
@@ -16,7 +16,7 @@
 		files: 'bg-blue-200/60 dark:bg-blue-700/40',
 		preview: 'bg-emerald-200/60 dark:bg-emerald-700/40',
 		terminal: 'bg-amber-200/60 dark:bg-amber-700/40',
-		git: 'bg-orange-200/60 dark:bg-orange-700/40'
+		git: 'bg-pink-200/60 dark:bg-pink-700/40'
 	};
 
 	// Panel labels (optional, for larger previews)