Fix system prompt flow: ensure system prompts reach OpenAI API

- Fixed critical bug where system prompts weren't making it to OpenAI completions API
- Root cause: Chat initialization only created user message, ignored systemPromptDrafts
- Updated chat initialization to check systemPromptDrafts.get(chatId) and build proper messages array
- System prompt now becomes part of permanent chat history from start
- OpenAI API now receives complete messages array with system prompt included

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

Co-authored-by: AnthonyRonning <AnthonyRonning@users.noreply.github.com>

Author: claude[bot]

frontend/src/routes/_auth.chat.$chatId.tsx

@@ -70,7 +70,7 @@ function SystemMessage({ text, loading }: { text: string; loading?: boolean }) {
 
 function ChatComponent() {
   const { chatId } = Route.useParams();
-  const { model, persistChat, getChatById, userPrompt, setUserPrompt, addChat } = useLocalState();
+  const { model, persistChat, getChatById, userPrompt, setUserPrompt, addChat, systemPromptDrafts } = useLocalState();
   const openai = useOpenAI();
   const queryClient = useQueryClient();
   const [showScrollButton, setShowScrollButton] = useState(false);
@@ -153,17 +153,29 @@ function ChatComponent() {
       }
       if (queryChat.messages.length === 0) {
         console.warn("Chat has no messages, using user prompt");
-        const messages = userPrompt
-          ? ([{ role: "user", content: userPrompt }] as ChatMessage[])
-          : [];
+        
+        // Build messages array with system prompt first (if exists), then user prompt
+        const messages: ChatMessage[] = [];
+        
+        // Check for system prompt draft for this chat
+        const systemPromptDraft = systemPromptDrafts.get(chatId);
+        if (systemPromptDraft?.trim()) {
+          messages.push({ role: "system", content: systemPromptDraft.trim() } as ChatMessage);
+        }
+        
+        // Add user prompt if exists
+        if (userPrompt) {
+          messages.push({ role: "user", content: userPrompt } as ChatMessage);
+        }
+        
         setLocalChat((localChat) => ({ ...localChat, messages }));
         return;
       }
       setLocalChat(queryChat);
     }
     // I don't want to re-run this effect if the user prompt changes
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [queryChat, chatId, isPending]);
+  }, [queryChat, chatId, isPending, systemPromptDrafts]);
 
   // IMPORTANT that this runs only once (because it uses the user's tokens!)
   const userPromptEffectRan = useRef(false);