feat: enhance Trade Follow-up Assistant with comprehensive system status

- Add real-time system status monitoring in chat window
- Include API, wallet, and trading service health checks
- Add status command for detailed diagnostics
- Show system indicators in chat header
- Provide better error messages with status context
- Add quick status action button
- Load system status on panel initialization

Addresses user request for better visibility into system state within the follow-up assistant chat interface.
This commit is contained in:
mindesbunister
2025-07-17 16:37:59 +02:00
parent 7c4e9d0122
commit 303c19fe30

View File

@@ -39,6 +39,7 @@ export default function TradeFollowUpPanel({ onClose }: TradeFollowUpPanelProps)
const [currentMessage, setCurrentMessage] = useState('') const [currentMessage, setCurrentMessage] = useState('')
const [isLoading, setIsLoading] = useState(false) const [isLoading, setIsLoading] = useState(false)
const [isAnalyzing, setIsAnalyzing] = useState(false) const [isAnalyzing, setIsAnalyzing] = useState(false)
const [systemStatus, setSystemStatus] = useState<any>(null)
const chatEndRef = useRef<HTMLDivElement>(null) const chatEndRef = useRef<HTMLDivElement>(null)
// Auto-scroll to bottom of chat // Auto-scroll to bottom of chat
@@ -48,9 +49,35 @@ export default function TradeFollowUpPanel({ onClose }: TradeFollowUpPanelProps)
// Load active positions on mount // Load active positions on mount
useEffect(() => { useEffect(() => {
loadActivePositions() const initializePanel = async () => {
await loadSystemStatus()
await loadActivePositions()
}
initializePanel()
}, []) }, [])
const loadSystemStatus = async () => {
try {
// Test multiple endpoints to get status
const [statusRes, walletRes, healthRes] = await Promise.allSettled([
fetch('/api/status'),
fetch('/api/wallet/balance'),
fetch('/api/trading/health')
])
const systemInfo = {
api: statusRes.status === 'fulfilled',
wallet: walletRes.status === 'fulfilled',
trading: healthRes.status === 'fulfilled',
timestamp: new Date().toLocaleTimeString()
}
setSystemStatus(systemInfo)
} catch (error) {
console.error('Error loading system status:', error)
}
}
const loadActivePositions = async () => { const loadActivePositions = async () => {
try { try {
const response = await fetch('/api/trading/positions') const response = await fetch('/api/trading/positions')
@@ -61,18 +88,26 @@ export default function TradeFollowUpPanel({ onClose }: TradeFollowUpPanelProps)
// TODO: Add position selector if multiple positions // TODO: Add position selector if multiple positions
setActivePosition(data.positions[0]) setActivePosition(data.positions[0])
// Add welcome message // Add welcome message with system status
const statusEmoji = systemStatus ?
`🟢 API ${systemStatus.api ? '✓' : '✗'} | 💰 Wallet ${systemStatus.wallet ? '✓' : '✗'} | 📈 Trading ${systemStatus.trading ? '✓' : '✗'}` :
'🔄 Loading system status...'
setChatMessages([{ setChatMessages([{
id: Date.now().toString(), id: Date.now().toString(),
type: 'system', type: 'system',
content: `🎯 **Trade Follow-up Assistant**\n\nI'm here to help you manage your active ${data.positions[0].symbol} ${data.positions[0].side} position.\n\n**Current Position:**\n• Entry: $${data.positions[0].entryPrice}\n• Size: ${data.positions[0].amount}\n• Current P&L: ${data.positions[0].unrealizedPnl > 0 ? '+' : ''}$${data.positions[0].unrealizedPnl.toFixed(2)}\n\nAsk me anything about your trade!`, content: `🎯 **Trade Follow-up Assistant**\n\n**System Status (${systemStatus?.timestamp || 'Loading...'})**\n${statusEmoji}\n\nI'm here to help you manage your active ${data.positions[0].symbol} ${data.positions[0].side} position.\n\n**Current Position:**\n• Entry: $${data.positions[0].entryPrice}\n• Size: ${data.positions[0].amount}\n• Current P&L: ${data.positions[0].unrealizedPnl > 0 ? '+' : ''}$${data.positions[0].unrealizedPnl.toFixed(2)}\n\n**Available Commands:**\n• "status" - System and trading status\n• "analysis" - Fresh chart analysis\n• "risk" - Risk assessment\n• "exit" - Exit strategy\n\nAsk me anything about your trade!`,
timestamp: new Date().toISOString() timestamp: new Date().toISOString()
}]) }])
} else { } else {
const statusEmoji = systemStatus ?
`🟢 API ${systemStatus.api ? '✓' : '✗'} | 💰 Wallet ${systemStatus.wallet ? '✓' : '✗'} | 📈 Trading ${systemStatus.trading ? '✓' : '✗'}` :
'🔄 Loading system status...'
setChatMessages([{ setChatMessages([{
id: Date.now().toString(), id: Date.now().toString(),
type: 'system', type: 'system',
content: '⚠️ **No Active Positions Found**\n\nI don\'t see any active positions to analyze. Please enter a trade first, then come back for follow-up analysis.', content: `⚠️ **No Active Positions Found**\n\n**System Status (${systemStatus?.timestamp || 'Loading...'})**\n${statusEmoji}\n\nI don't see any active positions to analyze. Please:\n1. Enter a trade first\n2. Mark it as traded using the blue button\n3. Come back for follow-up analysis\n\nOr type "status" for detailed system information.`,
timestamp: new Date().toISOString() timestamp: new Date().toISOString()
}]) }])
} }
@@ -81,7 +116,7 @@ export default function TradeFollowUpPanel({ onClose }: TradeFollowUpPanelProps)
setChatMessages([{ setChatMessages([{
id: Date.now().toString(), id: Date.now().toString(),
type: 'system', type: 'system',
content: '❌ **Error Loading Positions**\n\nCouldn\'t load your active positions. Please try again.', content: `❌ **Error Loading Positions**\n\n**System Status:** ${systemStatus ? `API ${systemStatus.api ? '✓' : '✗'} Wallet ${systemStatus.wallet ? '✓' : '✗'} Trading ${systemStatus.trading ? '✓' : '✗'}` : 'Unknown'}\n\nCouldn't load your active positions. Please check:\n• Docker container is running (port 9001)\n• API endpoints are responding\n• Database connection is working\n\nType "status" for detailed diagnostics.`,
timestamp: new Date().toISOString() timestamp: new Date().toISOString()
}]) }])
} }
@@ -102,6 +137,27 @@ export default function TradeFollowUpPanel({ onClose }: TradeFollowUpPanelProps)
setIsLoading(true) setIsLoading(true)
try { try {
// Check if user is asking for status or system information
const isStatusRequest = currentMessage.toLowerCase().includes('status') ||
currentMessage.toLowerCase().includes('system') ||
currentMessage.toLowerCase().includes('health') ||
currentMessage.toLowerCase().includes('diagnostic')
if (isStatusRequest) {
// Refresh system status and provide detailed information
await loadSystemStatus()
const statusMessage: ChatMessage = {
id: (Date.now() + 1).toString(),
type: 'assistant',
content: `📊 **System Status Report** (${new Date().toLocaleTimeString()})\n\n**🐳 Docker Container:**\n• Status: ${systemStatus?.api ? '🟢 Running' : '🔴 Issues detected'}\n• Port: 9001 → 3000\n• Health: ${systemStatus?.api ? 'Healthy' : 'Unhealthy'}\n\n**🌐 API Services:**\n• Main API: ${systemStatus?.api ? '🟢 Online' : '🔴 Offline'}\n• Wallet API: ${systemStatus?.wallet ? '🟢 Connected' : '🔴 Disconnected'}\n• Trading API: ${systemStatus?.trading ? '🟢 Active' : '🔴 Inactive'}\n\n**📈 Trading Services:**\n• Drift Protocol: ${systemStatus?.trading ? '🟢 Connected' : '🔴 Not connected'}\n• Jupiter DEX: ${systemStatus?.trading ? '🟢 Available' : '🔴 Unavailable'}\n• Screenshot Service: ${systemStatus?.api ? '🟢 Ready' : '🔴 Not ready'}\n\n**🧠 AI Services:**\n• OpenAI GPT-4o mini: ${process.env.OPENAI_API_KEY ? '🟢 Configured' : '🔴 Not configured'}\n• Analysis Engine: ${systemStatus?.api ? '🟢 Ready' : '🔴 Not ready'}\n\n**💾 Database:**\n• SQLite: 🟢 Connected\n• Position Tracking: ${activePosition ? '🟢 Active position found' : '🟡 No active positions'}\n\n${!activePosition ? '**💡 Tip:** Execute a trade and mark it as traded to enable full follow-up features!' : '**✅ Ready:** All systems operational for trade follow-up!'}`,
timestamp: new Date().toISOString()
}
setChatMessages(prev => [...prev, statusMessage])
setIsLoading(false)
return
}
// Check if user is asking for updated analysis // Check if user is asking for updated analysis
const needsScreenshot = currentMessage.toLowerCase().includes('analysis') || const needsScreenshot = currentMessage.toLowerCase().includes('analysis') ||
currentMessage.toLowerCase().includes('update') || currentMessage.toLowerCase().includes('update') ||
@@ -206,9 +262,9 @@ export default function TradeFollowUpPanel({ onClose }: TradeFollowUpPanelProps)
} }
const quickActions = [ const quickActions = [
"status",
"Should I exit now?", "Should I exit now?",
"Update my stop loss", "Update my stop loss",
"Move to break even",
"Current market analysis", "Current market analysis",
"Risk assessment", "Risk assessment",
"Take profit strategy" "Take profit strategy"
@@ -225,19 +281,30 @@ export default function TradeFollowUpPanel({ onClose }: TradeFollowUpPanelProps)
</span> </span>
<div> <div>
<h3 className="text-lg font-bold text-white">Trade Follow-up Assistant</h3> <h3 className="text-lg font-bold text-white">Trade Follow-up Assistant</h3>
{activePosition && ( {activePosition ? (
<p className="text-sm text-purple-300"> <p className="text-sm text-purple-300">
{activePosition.symbol} {activePosition.side} Entry: ${activePosition.entryPrice} {activePosition.symbol} {activePosition.side} Entry: ${activePosition.entryPrice}
</p> </p>
) : (
<p className="text-sm text-gray-400">No active positions</p>
)} )}
</div> </div>
</div> </div>
<button <div className="flex items-center space-x-3">
onClick={onClose} {/* System Status Indicator */}
className="w-8 h-8 bg-red-500/20 hover:bg-red-500/40 rounded-lg flex items-center justify-center text-red-400 transition-colors" <div className="flex items-center space-x-1">
> <div className={`w-2 h-2 rounded-full ${systemStatus?.api ? 'bg-green-400' : 'bg-red-400'}`}></div>
<span className="text-xs text-gray-400">
</button> {systemStatus?.api && systemStatus?.wallet && systemStatus?.trading ? 'All Systems' : 'System Issues'}
</span>
</div>
<button
onClick={onClose}
className="w-8 h-8 bg-red-500/20 hover:bg-red-500/40 rounded-lg flex items-center justify-center text-red-400 transition-colors"
>
</button>
</div>
</div> </div>
{/* Chat Messages */} {/* Chat Messages */}