style: restyle ErrorBanner with neutral card fill and destructive accent bar

Replace the all-red destructive Alert variant (transparent background, full
red text) with a neutral card-filled banner, a left destructive accent bar,
red icon, foreground title, and muted body/detail text. Improves the send-error
and git-error banners on the dark theme.

Author: chriswritescode-dev

frontend/src/components/ui/error-banner.tsx

@@ -1,6 +1,7 @@
 import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert'
 import { Button } from '@/components/ui/button'
 import { AlertCircle, X } from 'lucide-react'
+import { cn } from '@/lib/utils'
 
 export interface ErrorBannerProps {
   title?: string
@@ -12,29 +13,29 @@ export interface ErrorBannerProps {
 
 export function ErrorBanner({ title, summary, detail, onDismiss, className }: ErrorBannerProps) {
   return (
-    <Alert variant="destructive" className={className}>
+    <Alert className={cn('bg-card border-border border-l-[3px] border-l-destructive', className)}>
       <div className="flex flex-col gap-2">
         <div className="flex items-start gap-2">
-          <AlertCircle className="h-4 w-4 mt-0.5 flex-shrink-0" />
+          <AlertCircle className="h-4 w-4 mt-0.5 flex-shrink-0 text-red-400" />
           <div className="flex-1 min-w-0">
             {title && (
-              <AlertTitle className="mb-1 font-medium leading-none tracking-tight">{title}</AlertTitle>
+              <AlertTitle className="mb-1 font-medium leading-none tracking-tight text-foreground">{title}</AlertTitle>
             )}
-            <AlertDescription className="text-sm">{summary}</AlertDescription>
+            <AlertDescription className="text-sm text-muted-foreground">{summary}</AlertDescription>
           </div>
           {onDismiss && (
             <Button
               variant="ghost"
               size="sm"
-              className="h-7 w-7 p-0 flex-shrink-0"
+              className="h-7 w-7 p-0 flex-shrink-0 text-muted-foreground"
               onClick={onDismiss}
             >
               <X className="w-3.5 h-3.5" />
             </Button>
           )}
         </div>
         {detail && (
-          <pre className="p-2 rounded border bg-destructive/5 border-destructive/20 text-xs font-mono overflow-auto max-h-32">
+          <pre className="p-2 rounded border bg-background border-border text-xs font-mono text-muted-foreground overflow-auto max-h-32">
             {detail}
           </pre>
         )}