feat/#24 WebOS Completion (#25)

#24 WebOS Completion

Co-authored-by: Sayan Datta <sayan@Sayans-MacBook-Air.local>
Reviewed-on: sagnik/Project_Velocity#25

app/src/components/modules/Catalyst.tsx

@@ -758,34 +758,8 @@ function LiveEventItem({ event }: { event: LiveOptimizationEvent }) {
   );
 }
 
-const MOCK_STREAM: Array<{ type: LiveEventType; message: string; campaign: string; value?: string }> = [
-  { type: 'optimize', message: 'Expanded 3BHK audience targeting — added "Property Investment" interest layer.', campaign: '3BHK Prestige Launch', value: '+22k reach' },
-  { type: 'rotate',   message: 'Rotated in Arabic Poster (Qwen-2512) as new creative variant for A/B test.', campaign: 'Penthouse Whale Retarget' },
-  { type: 'shift',    message: 'Shifted AED 150 from underperforming Ad Set C to Ad Set A (CTR 3.2%).', campaign: '1BHK Investment', value: '+AED 150' },
-  { type: 'pause',    message: 'Paused Ad Set D — CPA crossed AED 480 threshold (target: AED 400).', campaign: 'Penthouse Whale Retarget', value: 'CPA: AED 481' },
-  { type: 'create',   message: 'Created new Custom Audience from 18 Closed/Won CRM leads (hashed emails).', campaign: '3BHK Prestige Launch' },
-];
-
 function LiveOptimizationFeed() {
-  const { liveEvents, pushLiveEvent } = useMarketingStore();
-  const streamIdx = useRef(0);
-
-  useEffect(() => {
-    const t = setInterval(() => {
-      const item = MOCK_STREAM[streamIdx.current % MOCK_STREAM.length];
-      streamIdx.current++;
-      pushLiveEvent({
-        id: `ev_${Date.now()}`,
-        type: item.type,
-        message: item.message,
-        campaignName: item.campaign,
-        timestamp: new Date(),
-        value: item.value,
-      });
-    }, 4000);
-    return () => clearInterval(t);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const { liveEvents } = useMarketingStore();
 
   return (
     <Widget delay={0.4} colSpan={1}>
@@ -796,11 +770,17 @@ function LiveOptimizationFeed() {
         <LiveBadge />
       </div>
       <div className="space-y-2 max-h-72 overflow-y-auto custom-scrollbar pr-1">
-        <AnimatePresence mode="popLayout" initial={false}>
-          {liveEvents.slice(0, 8).map((ev) => (
-            <LiveEventItem key={ev.id} event={ev} />
-          ))}
-        </AnimatePresence>
+        {liveEvents.length === 0 ? (
+          <div className="rounded-xl border border-white/8 bg-white/[0.02] p-4 text-sm text-zinc-400">
+            No live optimization events are available. Connect the production ad-platform integrations to populate this stream.
+          </div>
+        ) : (
+          <AnimatePresence mode="popLayout" initial={false}>
+            {liveEvents.slice(0, 8).map((ev) => (
+              <LiveEventItem key={ev.id} event={ev} />
+            ))}
+          </AnimatePresence>
+        )}
       </div>
     </Widget>
   );