feat: ultimate version phase 1 - multi-agent orchestration and interactive roadmap

Author: EGABO-TECH

src/components/JourneyRoadmap.tsx

@@ -0,0 +1,67 @@
+import { motion } from "framer-motion";
+import { Plane, Hotel, MapPin, CheckCircle2, Navigation } from "lucide-react";
+
+interface RoadmapEvent {
+  type: 'flight' | 'hotel' | 'activity' | 'done';
+  title: string;
+  details: string;
+  agent: string;
+  time?: string;
+}
+
+export const JourneyRoadmap = ({ events }: { events: RoadmapEvent[] }) => {
+  return (
+    <div className="relative py-8 pl-8 pr-4 overflow-hidden bg-card/40 rounded-3xl border border-border/40 backdrop-blur-2xl shadow-2xl mt-6">
+      <div className="absolute top-0 right-0 p-8 opacity-[0.02] pointer-events-none">
+          <Navigation className="h-40 w-40" />
+      </div>
+      
+      <div className="absolute left-[39px] top-10 bottom-10 w-0.5 bg-gradient-to-b from-primary via-purple-500 to-emerald-500 rounded-full opacity-30 shadow-[0_0_10px_rgba(14,165,233,0.3)]" />
+
+      <div className="space-y-10 relative z-10">
+        {events.map((event, i) => (
+          <motion.div
+            key={i}
+            initial={{ opacity: 0, x: -20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ delay: i * 0.3 }}
+            className="flex gap-8 relative group"
+          >
+            <div className={`h-8 w-8 rounded-xl flex items-center justify-center shrink-0 shadow-lg relative z-20 transition-transform group-hover:scale-110 ${
+              event.type === 'flight' ? 'bg-blue-500/20 text-blue-400 border border-blue-500/30' :
+              event.type === 'hotel' ? 'bg-purple-500/20 text-purple-400 border border-purple-500/30' :
+              event.type === 'activity' ? 'bg-emerald-500/20 text-emerald-400 border border-emerald-500/30' :
+              'bg-primary/20 text-primary border border-primary/30'
+            }`}>
+                {event.type === 'flight' && <Plane className="h-4 w-4" />}
+                {event.type === 'hotel' && <Hotel className="h-4 w-4" />}
+                {event.type === 'activity' && <MapPin className="h-4 w-4" />}
+                {event.type === 'done' && <CheckCircle2 className="h-4 w-4" />}
+            </div>
+
+            <div className="flex-1">
+              <div className="flex items-center justify-between mb-1">
+                <h4 className="font-display font-bold text-lg text-foreground tracking-tight group-hover:text-primary transition-colors">
+                    {event.title}
+                </h4>
+                <span className="text-[9px] font-bold uppercase tracking-[0.2em] px-2 py-0.5 rounded bg-primary/10 text-primary/70 border border-primary/10">
+                    {event.agent}
+                </span>
+              </div>
+              <p className="text-sm text-muted-foreground font-medium leading-relaxed opacity-80 decoration-primary/20 hover:opacity-100 transition-opacity">
+                {event.details}
+              </p>
+              {event.time && (
+                  <div className="mt-2 flex items-center gap-2 text-[10px] font-mono text-muted-foreground/40">
+                      <span>{event.time} UTC</span>
+                      <span className="h-1 w-1 rounded-full bg-border" />
+                      <span>Verified Node</span>
+                  </div>
+              )}
+            </div>
+          </motion.div>
+        ))}
+      </div>
+    </div>
+  );
+};

src/pages/Plan.tsx

@@ -2,6 +2,7 @@ import { useState, useRef, useEffect } from "react";
 // Deployment Cache Bust: 2026-03-25T01:58:00Z
 import { SendHorizontal, Bot, User, ShieldCheck, CreditCard, CheckCircle2, Sparkles, MapPin, Plane } from "lucide-react";
 import { motion, AnimatePresence } from "framer-motion";
+import { JourneyRoadmap } from "../components/JourneyRoadmap";
 
 type Message = {
   role: "assistant" | "user";
@@ -10,6 +11,7 @@ type Message = {
   amount?: string;
   txId?: string;
   isStreaming?: boolean;
+  roadmap?: any[];
 };
 
 // Custom Typewriter Hook
@@ -125,30 +127,44 @@ export default function Plan() {
 
     const isUganda = userMsg.toLowerCase().includes("uganda") || userMsg.toLowerCase().includes("safari") || userMsg.toLowerCase().includes("entebbe");
 
-    // Realistic Agent Orchestration Logic
+    // Ultimate Multi-Agent Orchestration Logic
     setTimeout(() => {
       setIsTyping(false);
-
-      const response1 = isUganda
-        ? "Excellent! I'm initializing the Uganda Tourism Protocol. Scanning flights from Entebbe International (EBB) and checking availability at Kampala Serena Hotel..."
-        : "I'm orchestrating your Flow. Scanning global flight databases and premium accommodation providers for your journey...";
-
+      
+      const response1 = isUganda 
+        ? "SkyFlow Agent initializing Uganda Protocol. Scanning Entebbe International (EBB) flight corridor and StayBot verifying Serena Hotel suites..."
+        : "Agentic Cluster initializing. Global orchestration layer scanning multi-modal logistics for your Flow...";
+      
       setMessages((prev) => [...prev, { role: "assistant", content: response1, isStreaming: true }]);
-
+      
       setIsTyping(true);
       setTimeout(() => {
         setIsTyping(false);
-
+        
         const response2 = isUganda
-          ? "I've locked in an exquisite 5-day itinerary: Flight UR402, 3 nights at Chobe Safari Lodge, and a private game drive in Murchison Falls. Everything is ready for checkout."
-          : "I've optimized your itinerary for zero friction. Routes and stays are reserved. Would you like to proceed to secure this Flow via MiniPay?";
-
-        setMessages((prev) => [...prev.map((m, idx) => idx === prev.length - 1 ? { ...m, isStreaming: false } : m), { role: "assistant", content: response2, isStreaming: true }]);
+          ? "Orchestration complete. I've successfully converged your journey across three specialized agents. Your interactive Flow roadmap is ready for final review."
+          : "Flow convergence achieved. Logistics are locked and verified across the network. Review your personalized journey Roadmap below.";
+        
+        const roadmap = isUganda ? [
+            { type: 'flight', title: 'Flight UR402', details: 'Entebbe International Departure • Business Class Reserved', agent: 'SKYFLOW' },
+            { type: 'hotel', title: 'Chobe Safari Lodge', details: '3 Nights Luxury Suite • River View Authenticated', agent: 'STAYBOT' },
+            { type: 'activity', title: 'Murchison Falls Game Drive', details: 'Private 4x4 Orchestrated • Sunrise Departure', agent: 'LOCALGUIDE' },
+            { type: 'done', title: 'Everything Ready', details: 'All nodes synchronized and ready for blockchain booking.', agent: 'AI PILOT' }
+        ] : [
+            { type: 'flight', title: 'Global Route', details: 'Optimized flight path found with zero-friction connections.', agent: 'SKYFLOW' },
+            { type: 'hotel', title: 'Premium Stay', details: 'Accommodation verified via verified network providers.', agent: 'STAYBOT' },
+            { type: 'done', title: 'Ready for Flow', details: 'Agentic sequence complete.', agent: 'AI PILOT' }
+        ];
+
+        setMessages((prev) => [
+            ...prev.map((m, idx) => idx === prev.length - 1 ? { ...m, isStreaming: false } : m), 
+            { role: "assistant", content: response2, isStreaming: true, roadmap: roadmap as any }
+        ]);
 
         if (isUganda) {
           setTimeout(() => {
             setShowCheckout(true);
-          }, 3000); // Wait for typing to finish roughly
+          }, 4500); // Wait for roadmap animation
         }
       }, 3500);