Initial commit: Velocity-OS migration

webos/src/intelligence-rail/SentinelAlertBanner.tsx

@@ -0,0 +1,99 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useSentinelStore } from '../store/sentinelStore';
+import styles from './SentinelAlertBanner.module.css';
+
+/**
+ * SentinelAlertBanner
+ * Non-blocking notification ribbon that slides from the top edge
+ * when a CCTV event fires (showroom visitor detected).
+ *
+ * Choreography from UX Master Plan §4.2:
+ *  T+0ms   — WebSocket event fires
+ *  T+200ms — Ribbon slides in: translateY(-100%) → translateY(0)
+ *             spring(stiffness:300, damping:28)
+ *  Never blocks the current view.
+ *  "Open Sentinel" → navigate to /showroom
+ *  Auto-dismiss after 30s if broker does not interact.
+ */
+export function SentinelAlertBanner() {
+  const navigate = useNavigate();
+  const {
+    pendingAlert,
+    clearPendingAlert,
+  } = useSentinelStore();
+
+  // Auto-dismiss after 30 seconds
+  useEffect(() => {
+    if (!pendingAlert) return;
+    const timer = setTimeout(clearPendingAlert, 30_000);
+    return () => clearTimeout(timer);
+  }, [pendingAlert, clearPendingAlert]);
+
+  const handleOpenShowroom = () => {
+    clearPendingAlert();
+    navigate('/showroom');
+  };
+
+  return (
+    <AnimatePresence>
+      {pendingAlert && (
+        <motion.div
+          className={`${styles.banner} glass-amber`}
+          role="alert"
+          aria-live="assertive"
+          initial={{ y: '-100%', opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          exit={{ y: '-100%', opacity: 0 }}
+          transition={{
+            type: 'spring',
+            stiffness: 300,
+            damping: 28,
+          }}
+        >
+          <div className={styles.content}>
+            {/* Live indicator */}
+            <span className="live-dot" style={{ background: 'var(--color-amber)' }} />
+
+            {/* Alert text */}
+            <div className={styles.text}>
+              <span className={styles.title}>
+                {pendingAlert.matchedName
+                  ? `${pendingAlert.matchedName} detected in showroom`
+                  : 'Visitor detected in Showroom Zone A'
+                }
+              </span>
+              <span className={styles.sub}>
+                {pendingAlert.confidence
+                  ? `${pendingAlert.matchedName
+                      ? 'Match'
+                      : 'Face'} · ${pendingAlert.confidence}% confidence`
+                  : 'Unknown contact'
+                }
+              </span>
+            </div>
+          </div>
+
+          {/* Actions */}
+          <div className={styles.actions}>
+            <button
+              className="btn-primary"
+              onClick={handleOpenShowroom}
+              aria-label="Open Showroom Mode"
+            >
+              Open Sentinel
+            </button>
+            <button
+              className="btn-ghost"
+              onClick={clearPendingAlert}
+              aria-label="Dismiss alert"
+            >
+              Dismiss
+            </button>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}