Fix OpenRouter API key input field validation

- Add client-side validation to check API key before sending requests
- Improve error handling with toast notifications and provider modal
- Add computed value to ensure proper API key validation
- Fix API key serialization to handle empty strings properly
- Add proper trimming and undefined handling for edge cases

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

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

components/editor/ask-ai/index.tsx

@@ -50,6 +50,11 @@ export function AskAI({
   setSelectedElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
 }) {
   const [openrouterApiKey] = useLocalStorage<string>("openrouter-api-key", "");
+  
+  // Check if OpenRouter API key is properly loaded from localStorage
+  const isOpenRouterApiKeyValid = useMemo(() => {
+    return openrouterApiKey && openrouterApiKey.trim().length > 0;
+  }, [openrouterApiKey]);
   const refThink = useRef<HTMLDivElement | null>(null);
   const audio = useRef<HTMLAudioElement | null>(null);
 
@@ -105,8 +110,18 @@ export function AskAI({
           promptLength: prompt.length,
           hasSelectedElement: !!selectedElementHtml,
           selectedElementLength: selectedElementHtml.length,
-          totalHtmlLength: html.length
+          totalHtmlLength: html.length,
+          hasOpenRouterApiKey: isOpenRouterApiKeyValid
         });
+        
+        // Validate OpenRouter API key if using OpenRouter
+        if (provider === "openrouter" && !isOpenRouterApiKeyValid) {
+          toast.error("OpenRouter API key is required for this model");
+          setOpenProvider(true);
+          setProviderError("OpenRouter API key is required for this model");
+          setisAiWorking(false);
+          return;
+        }
         const request = await fetch("/api/ask-ai", {
           method: "PUT",
           body: JSON.stringify({
@@ -116,7 +131,7 @@ export function AskAI({
             model,
             html,
             selectedElementHtml,
-            openrouterApiKey,
+            openrouterApiKey: openrouterApiKey?.trim() || undefined,
           }),
           headers: {
             "Content-Type": "application/json",
@@ -159,6 +174,15 @@ export function AskAI({
           htmlLength: html.length
         });
         
+        // Validate OpenRouter API key if using OpenRouter
+        if (provider === "openrouter" && !isOpenRouterApiKeyValid) {
+          toast.error("OpenRouter API key is required for this model");
+          setOpenProvider(true);
+          setProviderError("OpenRouter API key is required for this model");
+          setisAiWorking(false);
+          return;
+        }
+        
         const request = await fetch("/api/ask-ai", {
           method: "POST",
           body: JSON.stringify({
@@ -167,7 +191,7 @@ export function AskAI({
             model,
             html: isSameHtml ? "" : html,
             redesignMarkdown,
-            openrouterApiKey,
+            openrouterApiKey: openrouterApiKey?.trim() || undefined,
           }),
           headers: {
             "Content-Type": "application/json",