fix(frontend): remove unused import and restore ApiError styles

Author: Garvit Sharma

frontend/src/components/ui/ApiError.tsx

@@ -1,24 +1,28 @@
 import { AlertCircle, X } from "lucide-react";
-import { useState } from "react";
+
 
 interface ApiErrorProps {
-  message: string;
+  message: string | null;
+  onDismiss: () => void;
 }
 
-export function ApiError({ message }: ApiErrorProps) {
-  const [visible, setVisible] = useState(true);
-
-  if (!visible) return null;
+export function ApiError({ message, onDismiss }: ApiErrorProps) {
+  if (!message) return null;
 
   return (
-    <div className="w-full border border-red-500/40 bg-red-900/20 text-red-200 px-4 py-3 rounded-lg flex items-start justify-between gap-3">
+    <div role="alert" aria-live="assertive" className="w-full border border-red-500/40 bg-red-900/20 text-red-200 px-4 py-3 rounded-lg flex items-start justify-between gap-3">
       <div className="flex items-start gap-2">
         <AlertCircle className="w-5 h-5 mt-0.5" />
-        <p className="text-sm">{message}</p>
+
+        <p className="text-sm break-words">{message}</p>
       </div>
 
-      <button onClick={() => setVisible(false)}>
-        <X className="w-4 h-4 hover:text-red-400" />
+      <button
+        onClick={onDismiss}
+        aria-label="Dismiss error"
+        className="cursor-pointer hover:text-red-400 transition-colors"
+      >
+        <X className="w-4 h-4" />
       </button>
     </div>
   );

frontend/src/pages/NewAnalysis.tsx

@@ -64,7 +64,7 @@ export default function NewAnalysis() {
       return
     }
 
-    setBusy(true)
+    
     setResultRun(null)
     setResultPayload(null)
 
@@ -100,7 +100,7 @@ export default function NewAnalysis() {
 
   return (
     <div className="max-w-4xl mx-auto px-6 py-8 space-y-8">
-        {error && (<div className="mb-4"><ApiError message={error} /></div>)}
+        <ApiError message={error} onDismiss={() => setError(null)} />
 
       {/* Step 1 — Analysis Type */}
       <section>

frontend/src/pages/Upload.tsx

@@ -59,6 +59,7 @@ export default function Upload() {
   const handleUpload = async () => {
     if (!file) return
     setBusy(true)
+    setError(null);
     setUploadProgress(0)
 
     try {
@@ -88,7 +89,7 @@ export default function Upload() {
 
   return (
     <div className="max-w-3xl mx-auto px-6 py-8 space-y-6">
-        {error && (<ApiError message={error} />)}
+        <ApiError message={error} onDismiss={() => setError(null)} />
       {/* Drop Zone */}
       <div
         onDragOver={(e) => { e.preventDefault(); setDragging(true) }}