feat(web): sprint1 ui core with global toasts and improved chat layout

web/src/components/ToastViewport.tsx

@@ -0,0 +1,30 @@
+import { useEffect } from "react";
+import { createPortal } from "react-dom";
+import { useUiStore } from "../store/uiStore";
+
+export function ToastViewport() {
+  const message = useUiStore((s) => s.toastMessage);
+  const clearToast = useUiStore((s) => s.clearToast);
+
+  useEffect(() => {
+    if (!message) {
+      return;
+    }
+    const timer = window.setTimeout(() => clearToast(), 2200);
+    return () => window.clearTimeout(timer);
+  }, [message, clearToast]);
+
+  if (!message) {
+    return null;
+  }
+
+  return createPortal(
+    <div className="pointer-events-none fixed bottom-3 left-0 right-0 z-[300] flex justify-center px-3">
+      <div className="rounded-lg border border-slate-700/80 bg-slate-900/95 px-3 py-2 text-xs text-slate-100 shadow-xl">
+        {message}
+      </div>
+    </div>,
+    document.body
+  );
+}
+