Optimization for AI Chat/ Fixed Themes not loading

src/app/(dashboard)/ai-assistant/page.tsx

@@ -1,17 +1,33 @@
 "use client"
 
-import { useState, useCallback } from "react"
+import { useState, useCallback, useEffect } from "react"
 import { AIChat } from "@/components/ai/ai-chat"
 import { JobSelector } from "@/components/ai/job-selector"
-import { Bot, Lightbulb, Target, MessageSquare } from "lucide-react"
+import { Bot, Lightbulb, Target, MessageSquare, Wifi, WifiOff } from "lucide-react"
 
 export default function AIAssistantPage() {
   const [selectedJob, setSelectedJob] = useState<{ job_title: string; keywords: string[]; industry: string; description: string } | null>(null)
+  const [aiOnline, setAiOnline] = useState<boolean | null>(null)
 
   const handleJobSelect = useCallback((job: typeof selectedJob) => {
     setSelectedJob(job)
   }, [])
 
+  useEffect(() => {
+    let cancelled = false
+    const check = async () => {
+      try {
+        const res = await fetch("/api/ai/jobs")
+        if (!cancelled) setAiOnline(res.ok)
+      } catch {
+        if (!cancelled) setAiOnline(false)
+      }
+    }
+    check()
+    const id = setInterval(check, 15000)
+    return () => { cancelled = true; clearInterval(id) }
+  }, [])
+
   return (
     <div className="flex h-[calc(100vh-3.5rem)]">
       <div className="flex-1 flex flex-col min-w-0">
@@ -20,10 +36,22 @@ export default function AIAssistantPage() {
             <div className="h-9 w-9 rounded-lg bg-[#1BB0CE]/15 flex items-center justify-center">
               <Bot className="h-5 w-5 text-[#1BB0CE]" />
             </div>
-            <div>
+            <div className="flex-1">
               <h1 className="text-lg font-semibold text-[#e8e8ef]">AI Sales Assistant</h1>
               <p className="text-xs text-[#6a6a75]">Uncensored sales tips and strategies powered by local AI</p>
             </div>
+            <div className="flex items-center gap-2 text-xs">
+              <span className={aiOnline === null ? "text-[#6a6a75]" : aiOnline ? "text-green-400" : "text-red-400"}>
+                {aiOnline === null ? "Checking..." : aiOnline ? "Connected" : "Disconnected"}
+              </span>
+              {aiOnline === null ? (
+                <span className="h-2 w-2 rounded-full bg-[#6a6a75]" />
+              ) : aiOnline ? (
+                <Wifi className="h-3.5 w-3.5 text-green-400" />
+              ) : (
+                <WifiOff className="h-3.5 w-3.5 text-red-400" />
+              )}
+            </div>
           </div>
         </div>