|
|
<script setup>
|
|
|
import { ref, watch, onMounted } from 'vue';
|
|
|
import { X, TrendingUp, Brain, AlertTriangle, CheckCircle, Clock, Zap, Target, Activity, ChevronDown, ChevronUp } from 'lucide-vue-next';
|
|
|
import { api } from '../services/api';
|
|
|
|
|
|
const props = defineProps({
|
|
|
isOpen: Boolean,
|
|
|
symbol: String
|
|
|
});
|
|
|
|
|
|
const emit = defineEmits(['close']);
|
|
|
|
|
|
const loading = ref(false);
|
|
|
const analysisData = ref(null);
|
|
|
const loadingStep = ref('');
|
|
|
const loadingSteps = [
|
|
|
'Fetching real-time market data...',
|
|
|
'Calculating volatility & technical indicators...',
|
|
|
'Searching latest news & analyzing sentiment...',
|
|
|
'Consulting Strategy Advisor agent...',
|
|
|
'Validating with Risk Manager...',
|
|
|
'Finalizing recommendation...'
|
|
|
];
|
|
|
|
|
|
let loadingInterval = null;
|
|
|
|
|
|
const startLoadingAnimation = () => {
|
|
|
let step = 0;
|
|
|
loadingStep.value = loadingSteps[0];
|
|
|
loadingInterval = setInterval(() => {
|
|
|
step = (step + 1) % loadingSteps.length;
|
|
|
loadingStep.value = loadingSteps[step];
|
|
|
}, 5000);
|
|
|
};
|
|
|
|
|
|
const stopLoadingAnimation = () => {
|
|
|
if (loadingInterval) {
|
|
|
clearInterval(loadingInterval);
|
|
|
loadingInterval = null;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const error = ref(null);
|
|
|
|
|
|
|
|
|
const agentLogs = ref([]);
|
|
|
|
|
|
const AGENT_ICONS = {
|
|
|
'MarketAnalyst': '📊',
|
|
|
'SentimentAnalyst': '📰',
|
|
|
'StrategyAdvisor': '🧠',
|
|
|
'RiskManager': '🛡️',
|
|
|
'System': '🤖',
|
|
|
'User': '🕵️♂️'
|
|
|
};
|
|
|
|
|
|
const isStreaming = ref(false);
|
|
|
const streamingStep = ref('');
|
|
|
const streamingProgress = ref(0);
|
|
|
|
|
|
const runAnalysis = async () => {
|
|
|
if (!props.symbol) return;
|
|
|
|
|
|
loading.value = true;
|
|
|
isStreaming.value = false;
|
|
|
error.value = null;
|
|
|
agentLogs.value = [];
|
|
|
analysisData.value = null;
|
|
|
startLoadingAnimation();
|
|
|
|
|
|
try {
|
|
|
const response = await api.post('/options-analysis', {
|
|
|
symbol: props.symbol,
|
|
|
provider: 'google'
|
|
|
});
|
|
|
|
|
|
if (response) {
|
|
|
loading.value = false;
|
|
|
stopLoadingAnimation();
|
|
|
await streamSimulation(response.logs || [], response.result);
|
|
|
}
|
|
|
|
|
|
} catch (err) {
|
|
|
console.error('Analysis error:', err);
|
|
|
error.value = err.message || 'Failed to analyze options strategy';
|
|
|
loading.value = false;
|
|
|
stopLoadingAnimation();
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const streamSimulation = async (logs, result) => {
|
|
|
isStreaming.value = true;
|
|
|
analysisData.value = null;
|
|
|
agentLogs.value = [];
|
|
|
|
|
|
const TOTAL_DURATION = 3500;
|
|
|
const stepDelay = Math.max(100, TOTAL_DURATION / (logs.length || 1));
|
|
|
|
|
|
for (let i = 0; i < logs.length; i++) {
|
|
|
const log = logs[i];
|
|
|
streamingStep.value = `ACTIVE NODE: ${log.source.toUpperCase()}`;
|
|
|
streamingProgress.value = ((i + 1) / logs.length) * 100;
|
|
|
agentLogs.value.push(log);
|
|
|
await new Promise(resolve => setTimeout(resolve, stepDelay));
|
|
|
}
|
|
|
|
|
|
await new Promise(resolve => setTimeout(resolve, 600));
|
|
|
isStreaming.value = false;
|
|
|
analysisData.value = result;
|
|
|
};
|
|
|
|
|
|
watch([() => props.symbol, () => props.isOpen], ([newSymbol, newIsOpen]) => {
|
|
|
if (newSymbol && newIsOpen) {
|
|
|
analysisData.value = null;
|
|
|
agentLogs.value = [];
|
|
|
runAnalysis();
|
|
|
}
|
|
|
}, { immediate: true });
|
|
|
|
|
|
const logsContainer = ref(null);
|
|
|
|
|
|
const getAgentColor = (source) => {
|
|
|
switch (source) {
|
|
|
case 'MarketAnalyst': return 'text-blue-400';
|
|
|
case 'SentimentAnalyst': return 'text-rose-400';
|
|
|
case 'StrategyAdvisor': return 'text-amber-400';
|
|
|
case 'RiskManager': return 'text-emerald-400';
|
|
|
case 'System': return 'text-slate-500';
|
|
|
default: return 'text-white';
|
|
|
}
|
|
|
};
|
|
|
|
|
|
watch(agentLogs, () => {
|
|
|
if (logsContainer.value) {
|
|
|
setTimeout(() => {
|
|
|
logsContainer.value.scrollTop = logsContainer.value.scrollHeight;
|
|
|
}, 50);
|
|
|
}
|
|
|
}, { deep: true });
|
|
|
|
|
|
const closeModal = () => {
|
|
|
emit('close');
|
|
|
};
|
|
|
|
|
|
const showLogsMobile = ref(false);
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<div v-if="isOpen" class="fixed inset-0 z-[120] flex items-center justify-center md:p-4 overflow-hidden">
|
|
|
|
|
|
<div class="absolute inset-0 bg-slate-950/98 backdrop-blur-xl" @click="closeModal"></div>
|
|
|
|
|
|
|
|
|
<div class="relative w-full h-full md:h-[85vh] md:max-w-6xl bg-[#0b1120] border-0 md:border md:border-slate-800 md:rounded-[2.5rem] shadow-2xl flex flex-col overflow-hidden animate-in fade-in duration-300">
|
|
|
|
|
|
|
|
|
<div class="flex-none flex items-center justify-between px-6 py-4 md:py-8 border-b border-slate-800 bg-slate-900/40">
|
|
|
<div class="flex items-center gap-4">
|
|
|
<div class="w-10 h-10 md:w-14 md:h-14 bg-blue-600/10 rounded-xl md:rounded-2xl border border-blue-500/20 flex items-center justify-center text-blue-500 shadow-lg">
|
|
|
<Zap class="w-6 h-6 md:w-8 md:h-8" />
|
|
|
</div>
|
|
|
<div>
|
|
|
<h2 class="text-base md:text-2xl font-black text-white tracking-widest uppercase">Agentic <span class="text-blue-500">Strategist</span></h2>
|
|
|
<div class="flex items-center gap-2 mt-0.5">
|
|
|
<span class="text-[9px] md:text-[11px] font-black text-slate-500 uppercase tracking-widest">Asset Target:</span>
|
|
|
<span class="px-2 py-0.5 rounded-lg bg-blue-600/10 text-blue-400 font-black text-[10px] md:text-xs border border-blue-500/20">{{ symbol }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<button @click="closeModal" class="p-2 md:p-3 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-xl md:rounded-2xl transition-all shadow-lg active:scale-95">
|
|
|
<X class="w-5 h-5 md:w-6 md:h-6" />
|
|
|
</button>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="flex-1 flex flex-col lg:flex-row overflow-hidden bg-[#05080f]/30 min-h-0">
|
|
|
|
|
|
|
|
|
<div class="flex-1 overflow-y-auto custom-scrollbar p-6 md:p-12 space-y-8 md:space-y-12 min-h-0 overscroll-contain" style="-webkit-overflow-scrolling: touch;">
|
|
|
|
|
|
|
|
|
<div v-if="loading || isStreaming" class="flex flex-col items-center justify-center py-20 text-center space-y-8">
|
|
|
<div class="relative">
|
|
|
<div class="w-24 h-24 md:w-32 md:h-32 border-4 border-slate-800 rounded-[2.5rem] md:rounded-[3.5rem] flex items-center justify-center shadow-2xl">
|
|
|
<Brain class="w-10 h-10 md:w-16 md:h-16 text-blue-500 animate-pulse" />
|
|
|
<div class="absolute inset-0 border-4 border-blue-500 border-t-transparent rounded-[2.5rem] md:rounded-[3.5rem] animate-spin"></div>
|
|
|
</div>
|
|
|
<div class="absolute -bottom-2 -right-2 bg-emerald-500 w-8 h-8 rounded-full border-4 border-[#0b1120] flex items-center justify-center animate-bounce">
|
|
|
<Activity class="w-4 h-4 text-white" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="space-y-2">
|
|
|
<h3 class="text-xl md:text-3xl font-black text-white tracking-tight leading-tight">{{ streamingStep || loadingStep }}</h3>
|
|
|
<p class="text-xs md:text-sm font-black text-slate-500 uppercase tracking-[0.3em]">Decrypting multi-agent consensus</p>
|
|
|
</div>
|
|
|
|
|
|
<div class="w-full max-w-sm h-1.5 bg-slate-900 rounded-full overflow-hidden border border-slate-800">
|
|
|
<div class="h-full bg-blue-500 shadow-lg shadow-blue-500/50 transition-all duration-300" :style="{ width: streamingProgress + '%' }"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<template v-else-if="analysisData">
|
|
|
|
|
|
<div class="relative p-6 md:p-10 rounded-[2rem] md:rounded-[3rem] border-2 group transition-all overflow-hidden"
|
|
|
:class="analysisData.final_decision === 'TRADE' ? 'bg-emerald-500/10 border-emerald-500/40 shadow-xl shadow-emerald-500/5' : 'bg-amber-500/10 border-amber-500/40 shadow-xl shadow-amber-500/5'">
|
|
|
<Zap class="absolute -right-10 -top-10 w-40 h-40 opacity-5 group-hover:scale-110 transition-transform duration-700" :class="analysisData.final_decision === 'TRADE' ? 'text-emerald-500' : 'text-amber-500'" />
|
|
|
|
|
|
<div class="relative z-10 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-6">
|
|
|
<div class="space-y-2">
|
|
|
<span class="text-[10px] md:text-xs font-black uppercase tracking-[.4em] opacity-60 block" :class="analysisData.final_decision === 'TRADE' ? 'text-emerald-400' : 'text-amber-400'">Final Intelligence Decision</span>
|
|
|
<h3 class="text-4xl md:text-6xl font-black text-white tracking-tighter">{{ analysisData.final_decision === 'TRADE' ? 'EXECUTE' : 'MAINTAIN' }}</h3>
|
|
|
<div class="flex items-center gap-3">
|
|
|
<div class="flex-1 h-2 bg-black/40 rounded-full overflow-hidden w-40">
|
|
|
<div class="h-full bg-current transition-all duration-1000 shadow-inner" :style="{ width: analysisData.confidence + '%' }" :class="analysisData.final_decision === 'TRADE' ? 'bg-emerald-500' : 'bg-amber-500'"></div>
|
|
|
</div>
|
|
|
<span class="text-sm font-black text-white whitespace-nowrap">{{ analysisData.confidence }}% CONFIDENCE</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="w-16 h-16 md:w-24 md:h-24 rounded-3xl md:rounded-[2.5rem] bg-white/5 flex items-center justify-center border border-white/10 shadow-2xl backdrop-blur-md">
|
|
|
<component :is="analysisData.final_decision === 'TRADE' ? TrendingUp : Clock" class="w-8 h-8 md:w-12 md:h-12" :class="analysisData.final_decision === 'TRADE' ? 'text-emerald-400' : 'text-amber-400'" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="space-y-6">
|
|
|
<div class="flex items-center gap-4">
|
|
|
<div class="h-px bg-slate-800 flex-1"></div>
|
|
|
<span class="text-[10px] font-black text-slate-500 uppercase tracking-widest">Logic Vectors</span>
|
|
|
<div class="h-px bg-slate-800 flex-1"></div>
|
|
|
</div>
|
|
|
|
|
|
<div class="bg-slate-900 border border-slate-800 p-6 md:p-8 rounded-[2rem] shadow-xl relative overflow-hidden group">
|
|
|
<div class="absolute inset-0 bg-gradient-to-br from-blue-500/[0.02] to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
|
|
<div class="relative z-10 flex flex-col gap-6">
|
|
|
<div class="flex items-start gap-5">
|
|
|
<div class="w-12 h-12 bg-blue-600/10 rounded-2xl flex items-center justify-center text-blue-400 border border-blue-500/20 shrink-0">
|
|
|
<Target class="w-6 h-6" />
|
|
|
</div>
|
|
|
<div class="space-y-1">
|
|
|
<h4 class="text-xs font-black text-slate-500 uppercase tracking-widest">Actionable Intelligence</h4>
|
|
|
<p class="text-sm md:text-xl font-bold text-white leading-relaxed">{{ analysisData.actionable_recommendation }}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
|
<div class="bg-slate-950/80 border border-slate-800 p-5 rounded-2xl flex items-center gap-4">
|
|
|
<div class="w-10 h-10 bg-indigo-500/10 rounded-xl flex items-center justify-center text-indigo-400 border border-indigo-500/20">
|
|
|
<Zap class="w-5 h-5" />
|
|
|
</div>
|
|
|
<div>
|
|
|
<div class="text-[9px] font-black text-slate-600 uppercase tracking-widest mb-0.5">Entry Target</div>
|
|
|
<div class="text-base font-black text-white font-mono">${{ analysisData.entry_price || 'MARKET' }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="bg-slate-950/80 border border-slate-800 p-5 rounded-2xl flex items-center gap-4">
|
|
|
<div class="w-10 h-10 bg-rose-500/10 rounded-xl flex items-center justify-center text-rose-400 border border-rose-500/20">
|
|
|
<AlertTriangle class="w-5 h-5" />
|
|
|
</div>
|
|
|
<div>
|
|
|
<div class="text-[9px] font-black text-slate-600 uppercase tracking-widest mb-0.5">Risk Exposure</div>
|
|
|
<div class="text-xs font-bold text-slate-300 leading-tight">{{ analysisData.risk_warning?.substring(0, 50) || 'Standard Vector Integrity' }}...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<button @click="showLogsMobile = !showLogsMobile" class="lg:hidden w-full py-4 bg-slate-900 border border-slate-800 rounded-2xl flex items-center justify-center gap-2 text-xs font-black uppercase tracking-widest text-slate-400 transition-all">
|
|
|
<Activity class="w-4 h-4" /> {{ showLogsMobile ? 'Hide Process Feed' : 'Show Process Feed' }}
|
|
|
<ChevronDown class="w-4 h-4 transition-transform duration-300" :class="showLogsMobile ? 'rotate-180' : ''" />
|
|
|
</button>
|
|
|
</template>
|
|
|
|
|
|
|
|
|
<div v-else-if="error" class="flex flex-col items-center justify-center py-20 text-center px-10">
|
|
|
<div class="w-20 h-20 bg-rose-500/10 rounded-3xl flex items-center justify-center border border-rose-500/20 text-rose-500 mb-6 animate-pulse">
|
|
|
<AlertTriangle class="w-10 h-10" />
|
|
|
</div>
|
|
|
<h3 class="text-xl font-bold text-white mb-2">Architect Link Severed</h3>
|
|
|
<p class="text-sm text-slate-500 max-w-xs mb-8">{{ error }}</p>
|
|
|
<button @click="runAnalysis" class="px-8 py-3 bg-white text-slate-950 font-black rounded-xl text-xs uppercase tracking-widest hover:scale-105 transition-all shadow-xl active:scale-95">Re-Establish Connection</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="w-full lg:w-[450px] bg-black border-t lg:border-t-0 lg:border-l border-slate-800 flex flex-col font-mono overflow-hidden transition-all duration-300 min-h-0"
|
|
|
:class="[showLogsMobile ? 'flex-1' : 'hidden lg:flex lg:flex-none h-0 lg:h-full']">
|
|
|
|
|
|
<div class="p-4 bg-slate-900/80 border-b border-slate-800 flex items-center justify-between">
|
|
|
<div class="flex items-center gap-3">
|
|
|
<div class="w-2 h-2 bg-emerald-500 rounded-full animate-pulse shadow-[0_0_8px_rgba(16,185,129,0.8)]"></div>
|
|
|
<span class="text-[10px] font-black text-slate-400 tracking-widest">NEXUS_FEED_V2.1</span>
|
|
|
</div>
|
|
|
<span class="text-[9px] font-bold text-slate-600">ENCRYPTION: AES-256</span>
|
|
|
</div>
|
|
|
|
|
|
<div class="flex-1 overflow-y-auto px-4 md:px-6 py-6 space-y-6 custom-scrollbar min-h-0 overscroll-contain" ref="logsContainer" style="-webkit-overflow-scrolling: touch;">
|
|
|
<div v-if="agentLogs.length === 0" class="flex flex-col items-center justify-center mt-20 text-slate-800">
|
|
|
<Activity class="w-12 h-12 mb-4 opacity-10" />
|
|
|
<span class="text-[10px] font-black uppercase tracking-[0.4em]">Listening for signal...</span>
|
|
|
</div>
|
|
|
|
|
|
<div v-for="(log, i) in agentLogs" :key="i" class="animate-in slide-in-from-left duration-500">
|
|
|
<div class="flex gap-4">
|
|
|
<div class="w-10 h-10 rounded-xl bg-slate-900 border border-slate-800 flex items-center justify-center text-xl shadow-inner shrink-0">
|
|
|
{{ AGENT_ICONS[log.source] || '🤖' }}
|
|
|
</div>
|
|
|
<div class="flex-1 min-w-0">
|
|
|
<div class="flex items-center justify-between mb-1.5">
|
|
|
<span class="text-[9px] md:text-[10px] uppercase font-black tracking-widest" :class="getAgentColor(log.source)">{{ log.source }}</span>
|
|
|
<span class="text-[8px] text-slate-700">T+{{ i < 10 ? '0' + i : i }}ms</span>
|
|
|
</div>
|
|
|
<div class="text-[11px] md:text-[12px] leading-relaxed text-slate-400 bg-slate-950/50 p-3 rounded-2xl border border-white/5 whitespace-pre-wrap" v-html="log.content"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div v-if="loading || isStreaming" class="flex items-center gap-3 pt-4 border-t border-slate-900 border-dashed">
|
|
|
<div class="flex gap-1">
|
|
|
<div class="w-1 h-1 bg-blue-500 rounded-full animate-bounce"></div>
|
|
|
<div class="w-1 h-1 bg-blue-500 rounded-full animate-bounce [animation-delay:0.2s]"></div>
|
|
|
<div class="w-1 h-1 bg-blue-500 rounded-full animate-bounce [animation-delay:0.4s]"></div>
|
|
|
</div>
|
|
|
<span class="text-[9px] font-black text-blue-500 uppercase tracking-widest animate-pulse">Stream established...</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="p-3 bg-slate-900/80 border-t border-slate-800 flex justify-between">
|
|
|
<div class="flex items-center gap-4 text-[8px] font-black text-slate-600 uppercase tracking-widest">
|
|
|
<span>Nodes: 4/4</span>
|
|
|
<span>Latency: 12ms</span>
|
|
|
</div>
|
|
|
<Activity class="w-3 h-3 text-slate-700" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<style scoped>
|
|
|
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
|
|
|
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 10px; }
|
|
|
|
|
|
.animate-in {
|
|
|
animation-duration: 0.4s;
|
|
|
animation-fill-mode: both;
|
|
|
}
|
|
|
@keyframes fadeIn {
|
|
|
from { opacity: 0; transform: scale(1.02); }
|
|
|
to { opacity: 1; transform: scale(1); }
|
|
|
}
|
|
|
.fade-in { animation-name: fadeIn; }
|
|
|
|
|
|
@keyframes slideInLeft {
|
|
|
from { opacity: 0; transform: translateX(-20px); }
|
|
|
to { opacity: 1; transform: translateX(0); }
|
|
|
}
|
|
|
.slide-in-from-left { animation-name: slideInLeft; }
|
|
|
</style>
|
|
|
|
