feat: add frontend error notification for rate limiting

ui/src/App.tsx

@@ -33,6 +33,7 @@ function App() {
   const [language, setLanguage] = useState('auto');
   const [theme, setTheme] = useState<Theme>(() => (localStorage.getItem('pg-theme') as Theme) || 'premium');
   const [result, setResult] = useState<RedactResponse | null>(null);
+  const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
   const [apiStatus, setApiStatus] = useState<'checking' | 'online' | 'offline'>('online');
   const [copied, setCopied] = useState(false);
@@ -66,10 +67,16 @@ function App() {
   const handleRedact = async () => {
     if (!text.trim()) return;
     setLoading(true);
+    setError(null);
     try {
       const response = await axios.post(`${API_URL}/api/redact`, { text, language });
       setResult(response.data);
-    } catch (err: any) { console.error(err); } 
+    } catch (err: any) { 
+      console.error(err);
+      const msg = err.response?.data?.detail || 'An unexpected error occurred.';
+      setError(typeof msg === 'string' ? msg : 'Analysis failed. Please try again.');
+      setTimeout(() => setError(null), 6000);
+    } 
     finally { setTimeout(() => setLoading(false), 400); }
   };
 
@@ -192,6 +199,22 @@ function App() {
           
           <div className="flex-grow md:flex-grow relative overflow-hidden bg-inherit h-[500px] md:h-auto md:min-h-0">
             {loading && <div className="loading-progress"><div className="loading-progress-bar" /></div>}
+            
+            {/* Error Alert */}
+            {error && (
+              <div className="absolute top-4 left-4 right-4 z-[60] animate-in slide-in-from-top-4 duration-300">
+                <div className="bg-rose-500 text-white px-4 py-3 rounded-xl shadow-2xl flex items-center justify-between gap-3 border border-rose-400">
+                  <div className="flex items-center gap-3">
+                    <Shield className="w-5 h-5 flex-none" />
+                    <p className="text-[11px] sm:text-xs font-bold leading-tight uppercase tracking-wider">{error}</p>
+                  </div>
+                  <button onClick={() => setError(null)} className="p-1 hover:bg-white/20 rounded-lg transition-colors">
+                    <Trash2 className="w-4 h-4" />
+                  </button>
+                </div>
+              </div>
+            )}
+
             <textarea 
               className={`w-full h-full p-4 sm:p-10 bg-transparent border-none outline-none text-[15px] sm:text-[16px] leading-[1.8] resize-none font-sans custom-scrollbar ${themeClasses.input}`}
               placeholder="Enter your document content here..."