add byok announcement in wave ai panel

Author: sawka

frontend/app/aipanel/aipanel.tsx

@@ -21,6 +21,7 @@ import { AIPanelHeader } from "./aipanelheader";
 import { AIPanelInput } from "./aipanelinput";
 import { AIPanelMessages } from "./aipanelmessages";
 import { AIRateLimitStrip } from "./airatelimitstrip";
+import { BYOKAnnouncement } from "./byokannouncement";
 import { TelemetryRequiredMessage } from "./telemetryrequired";
 import { WaveAIModel } from "./waveai-model";
 
@@ -85,7 +86,7 @@ const AIWelcomeMessage = memo(() => {
     return (
         <div className="text-secondary py-8">
             <div className="text-center">
-                <i className="fa fa-sparkles text-4xl text-accent mb-4 block"></i>
+                <i className="fa fa-sparkles text-4xl text-accent mb-2 block"></i>
                 <p className="text-lg font-bold text-primary">Welcome to Wave AI</p>
             </div>
             <div className="mt-4 text-left max-w-md mx-auto">
@@ -154,6 +155,7 @@ const AIWelcomeMessage = memo(() => {
                         </div>
                     </div>
                 </div>
+                <BYOKAnnouncement />
                 <div className="mt-4 text-center text-[12px] text-muted">
                     BETA: Free to use. Daily limits keep our costs in check.
                 </div>

frontend/app/aipanel/byokannouncement.tsx

@@ -0,0 +1,47 @@
+// Copyright 2025, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { WaveAIModel } from "./waveai-model";
+
+const BYOKAnnouncement = () => {
+    const model = WaveAIModel.getInstance();
+
+    const handleOpenConfig = async () => {
+        await model.openWaveAIConfig();
+    };
+
+    return (
+        <div className="bg-blue-900/20 border border-blue-500 rounded-lg p-4 mt-4">
+            <div className="flex items-start gap-3">
+                <i className="fa fa-key text-blue-400 text-lg mt-0.5"></i>
+                <div className="text-left flex-1">
+                    <div className="text-blue-400 font-medium mb-1">New: BYOK & Local AI Support</div>
+                    <div className="text-secondary text-sm mb-3">
+                        Wave AI now supports bring-your-own-key (BYOK) with OpenAI, Google Gemini, Azure, and
+                        OpenRouter, plus local models via Ollama, LM Studio, and other OpenAI-compatible providers.
+                    </div>
+                    <div className="flex items-center gap-3">
+                        <button
+                            onClick={handleOpenConfig}
+                            className="bg-blue-500/80 hover:bg-blue-500 text-secondary hover:text-primary px-3 py-1.5 rounded-md text-sm font-medium cursor-pointer transition-colors"
+                        >
+                            Configure AI Modes
+                        </button>
+                        <a
+                            href="https://docs.waveterm.dev/waveai-modes"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="text-secondary hover:text-primary text-sm cursor-pointer transition-colors flex items-center gap-1"
+                        >
+                            View Docs <i className="fa fa-external-link text-xs"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+BYOKAnnouncement.displayName = "BYOKAnnouncement";
+
+export { BYOKAnnouncement };