feat(frontend): toast notifications + error boundary

frontend/src/App.tsx

@@ -17,6 +17,7 @@ import FeatureCards from "./components/FeatureCards"
 import HowItWorks from "./components/HowItWorks"
 import ExampleRepos from "./components/ExampleRepos"
 import { usePrefersReducedMotion } from "./hooks/usePrefersReducedMotion"
+import { useToast } from "./components/Toast"
 import { useHistory } from "./hooks/useHistory"
 import HistoryPanel from "./components/HistoryPanel"
 
@@ -41,6 +42,7 @@ type TabKey = (typeof TABS)[number]
 export default function App() {
   const { dark, toggle } = useTheme()
   const reducedMotion = usePrefersReducedMotion()
+  const { addToast } = useToast()
   const { history, addEntry, clearHistory } = useHistory()
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState("")
@@ -65,14 +67,21 @@ export default function App() {
     try {
       const data = await analyze(url, br)
       setResult(data)
+      if (data.total_violations === 0) {
+        addToast("No violations found — architecture looks clean!", "success")
+      } else {
+        addToast(`Found ${data.total_violations} violation(s)`, "info")
+      }
       addEntry({
         url,
         branch: br,
         violations: data.total_violations,
         drift: data.drift_score,
       })
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Analysis failed")
+      const msg = err instanceof Error ? err.message : "Analysis failed"
+      setError(msg)
+      addToast(msg, "error")
     } finally {
       setLoading(false)
     }

frontend/src/components/Toast.tsx

@@ -0,0 +1,89 @@
+import { useState, useCallback, createContext, useContext, useEffect } from "react"
+import { X, CheckCircle, AlertTriangle, Info } from "lucide-react"
+
+export interface Toast {
+  id: string
+  message: string
+  type: "success" | "error" | "info"
+}
+
+interface ToastContextValue {
+  toasts: Toast[]
+  addToast: (message: string, type?: Toast["type"]) => void
+  removeToast: (id: string) => void
+}
+
+const ToastContext = createContext<ToastContextValue | null>(null)
+
+export function useToast() {
+  const ctx = useContext(ToastContext)
+  if (!ctx) throw new Error("useToast must be used within ToastProvider")
+  return ctx
+}
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([])
+
+  const addToast = useCallback((message: string, type: Toast["type"] = "info") => {
+    const id = Math.random().toString(36).slice(2)
+    setToasts((prev) => [...prev, { id, message, type }])
+  }, [])
+
+  const removeToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id))
+  }, [])
+
+  return (
+    <ToastContext.Provider value={{ toasts, addToast, removeToast }}>
+      {children}
+      <ToastContainer toasts={toasts} onRemove={removeToast} />
+    </ToastContext.Provider>
+  )
+}
+
+function ToastContainer({ toasts, onRemove }: { toasts: Toast[]; onRemove: (id: string) => void }) {
+  if (toasts.length === 0) return null
+
+  return (
+    <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2" role="status" aria-live="polite">
+      {toasts.map((toast) => (
+        <ToastItem key={toast.id} toast={toast} onRemove={onRemove} />
+      ))}
+    </div>
+  )
+}
+
+function ToastItem({ toast, onRemove }: { toast: Toast; onRemove: (id: string) => void }) {
+  useEffect(() => {
+    const timer = setTimeout(() => onRemove(toast.id), 4000)
+    return () => clearTimeout(timer)
+  }, [toast.id, onRemove])
+
+  const icons = {
+    success: <CheckCircle className="h-4 w-4 text-green-400" />,
+    error: <AlertTriangle className="h-4 w-4 text-error" />,
+    info: <Info className="h-4 w-4 text-brand" />,
+  }
+
+  const bg = {
+    success: "border-green-400/30 bg-green-400/10",
+    error: "border-error/30 bg-error/10",
+    info: "border-brand/30 bg-brand/10",
+  }
+
+  return (
+    <div
+      className={`flex items-center gap-2 rounded-md border px-4 py-3 text-sm text-content shadow-lg ${bg[toast.type]}`}
+    >
+      {icons[toast.type]}
+      <span>{toast.message}</span>
+      <button
+        onClick={() => onRemove(toast.id)}
+        className="ml-2 rounded p-0.5 transition-colors hover:bg-surface-2"
+        aria-label="Dismiss"
+      >
+        <X className="h-3 w-3" />
+      </button>
+    </div>
+  )
+}

frontend/src/main.tsx

@@ -3,11 +3,14 @@ import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
 import ErrorBoundary from './components/ErrorBoundary'
+import { ToastProvider } from './components/Toast'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <ErrorBoundary>
-      <App />
+      <ToastProvider>
+        <App />
+      </ToastProvider>
     </ErrorBoundary>
   </StrictMode>,
 )