refactor: Use Svelte derived state for non-mutable reactive variables

tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessage.svelte

@@ -38,8 +38,8 @@
 		assistantMessages: number;
 		messageTypes: string[];
 	} | null>(null);
-	let editedContent = $state(message.content);
-	let editedExtras = $state<DatabaseMessageExtra[]>(message.extra ? [...message.extra] : []);
+	let editedContent = $derived(message.content);
+	let editedExtras = $derived<DatabaseMessageExtra[]>(message.extra ? [...message.extra] : []);
 	let editedUploadedFiles = $state<ChatUploadedFile[]>([]);
 	let isEditing = $state(false);
 	let showDeleteDialog = $state(false);

tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageStatistics.svelte

@@ -33,7 +33,7 @@
 		hideSummary = false
 	}: Props = $props();
 
-	let activeView: ChatMessageStatsView = $state(initialView);
+	let activeView: ChatMessageStatsView = $derived(initialView);
 	let hasAutoSwitchedToGeneration = $state(false);
 
 	$effect(() => {

tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreenForm.svelte

@@ -32,9 +32,9 @@
 	}: Props = $props();
 
 	let chatFormRef: ChatForm | undefined = $state(undefined);
-	let message = $state(initialMessage);
-	let previousIsLoading = $state(isLoading);
-	let previousInitialMessage = $state(initialMessage);
+	let message = $derived(initialMessage);
+	let previousIsLoading = $derived(isLoading);
+	let previousInitialMessage = $derived(initialMessage);
 
 	// Sync message when initialMessage prop changes (e.g., after draft restoration)
 	$effect(() => {

tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettings.svelte

@@ -310,7 +310,7 @@
 		// }
 	];
 
-	let activeSection = $state<SettingsSectionTitle>(
+	let activeSection = $derived<SettingsSectionTitle>(
 		initialSection ?? SETTINGS_SECTION_TITLES.GENERAL
 	);
 	let currentSection = $derived(

tools/server/webui/src/lib/components/app/mcp/McpConnectionLogs.svelte

@@ -14,7 +14,7 @@
 
 	let { logs, connectionTimeMs, defaultExpanded = false, class: className }: Props = $props();
 
-	let isExpanded = $state(defaultExpanded);
+	let isExpanded = $derived(defaultExpanded);
 </script>
 
 {#if logs.length > 0}

tools/server/webui/src/lib/components/app/mcp/McpServerCard/McpServerCard.svelte

@@ -56,7 +56,7 @@
 	let connectionTimeMs = $derived(successState?.connectionTimeMs);
 	let instructions = $derived(successState?.instructions);
 
-	let isEditing = $state(!server.url.trim());
+	let isEditing = $derived(!server.url.trim());
 	let showDeleteDialog = $state(false);
 	let editFormRef: McpServerCardEditForm | null = $state(null);
 

tools/server/webui/src/lib/components/app/mcp/McpServerCard/McpServerCardEditForm.svelte

@@ -12,9 +12,9 @@
 
 	let { serverId, serverUrl, serverUseProxy = false, onSave, onCancel }: Props = $props();
 
-	let editUrl = $state(serverUrl);
+	let editUrl = $derived(serverUrl);
 	let editHeaders = $state('');
-	let editUseProxy = $state(serverUseProxy);
+	let editUseProxy = $derived(serverUseProxy);
 
 	let urlError = $derived.by(() => {
 		if (!editUrl.trim()) return 'URL is required';