fix: show system prompt selector on new chat page

- Add onSelect callback to SystemPromptSelector for 'new' mode
- Track selected prompt locally (newChatPromptId) before conversation exists
- Show selector in both 'new' and 'conversation' modes
- Apply newChatPromptId when streaming in new conversation

Note: Theme toggle mechanism works but CSS lacks light mode styles
(app uses hardcoded dark colors, would need CSS refactoring)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/lib/components/chat/ChatWindow.svelte

@@ -72,6 +72,9 @@
 	let hasKnowledgeBase = $state(false);
 	let lastRagContext = $state<string | null>(null);
 
+	// System prompt for new conversations (before a conversation is created)
+	let newChatPromptId = $state<string | null>(null);
+
 	// Derived: Check if selected model supports thinking
 	const supportsThinking = $derived.by(() => {
 		const caps = modelsState.selectedCapabilities;
@@ -410,7 +413,7 @@
 			// Wait for prompts to be loaded
 			await promptsState.ready();
 
-			// Priority: per-conversation prompt > global active prompt > none
+			// Priority: per-conversation prompt > new chat prompt > global active prompt > none
 			let promptContent: string | null = null;
 			if (conversation?.systemPromptId) {
 				// Use per-conversation prompt
@@ -418,6 +421,12 @@
 				if (conversationPrompt) {
 					promptContent = conversationPrompt.content;
 				}
+			} else if (newChatPromptId) {
+				// Use new chat selected prompt (before conversation is created)
+				const newChatPrompt = promptsState.get(newChatPromptId);
+				if (newChatPrompt) {
+					promptContent = newChatPrompt.content;
+				}
 			} else if (promptsState.activePrompt) {
 				// Fall back to global active prompt
 				promptContent = promptsState.activePrompt.content;
@@ -856,12 +865,17 @@
 						{/if}
 					</button>
 
-					<!-- System prompt selector (only in conversation mode) -->
+					<!-- System prompt selector -->
 					{#if mode === 'conversation' && conversation}
 						<SystemPromptSelector
 							conversationId={conversation.id}
 							currentPromptId={conversation.systemPromptId}
 						/>
+					{:else if mode === 'new'}
+						<SystemPromptSelector
+							currentPromptId={newChatPromptId}
+							onSelect={(promptId) => (newChatPromptId = promptId)}
+						/>
 					{/if}
 				</div>
 

frontend/src/lib/components/chat/SystemPromptSelector.svelte

@@ -2,16 +2,19 @@
 	/**
 	 * SystemPromptSelector - Dropdown to select a system prompt for the current conversation
 	 * Allows per-conversation prompt assignment with quick preview
+	 * In 'new' mode (no conversationId), uses onSelect callback for local state management
 	 */
 	import { promptsState, conversationsState, toastState } from '$lib/stores';
 	import { updateSystemPrompt } from '$lib/storage';
 
 	interface Props {
-		conversationId: string | null;
+		conversationId?: string | null;
 		currentPromptId?: string | null;
+		/** Callback for 'new' mode - called when prompt is selected without a conversation */
+		onSelect?: (promptId: string | null) => void;
 	}
 
-	let { conversationId, currentPromptId = null }: Props = $props();
+	let { conversationId = null, currentPromptId = null, onSelect }: Props = $props();
 
 	// UI state
 	let isOpen = $state(false);
@@ -46,9 +49,16 @@
 	 * Handle prompt selection
 	 */
 	async function handleSelect(promptId: string | null): Promise<void> {
-		if (!conversationId) return;
+		// In 'new' mode (no conversation), use the callback
+		if (!conversationId) {
+			onSelect?.(promptId);
+			const promptName = promptId ? prompts.find((p) => p.id === promptId)?.name : null;
+			toastState.success(promptName ? `Using "${promptName}"` : 'System prompt cleared');
+			closeDropdown();
+			return;
+		}
 
-		// Update in storage
+		// Update in storage for existing conversation
 		const result = await updateSystemPrompt(conversationId, promptId);
 		if (result.success) {
 			// Update in memory