Enhance analysis progress tracking with detailed steps

Features Added:
 Detailed Analysis Steps: 6-step progress tracking
 Real-time Progress Panel: Shows current step and percentage
 Timeframe Progress: Shows which timeframe is being analyzed
 Visual Progress Indicators: Color-coded status icons
 Step Duration Tracking: Shows timing for each step
 Session ID Display: Unique analysis session identifier

Progress Steps:
1. Initialize → 2. Setup → 3. Capture → 4. AI Analysis → 5. Combine → 6. Complete

UI Improvements:
- Detailed Analysis Progress panel instead of generic timer
- Real-time step visualization with icons and descriptions
- Progress percentage and duration display
- Animated indicators for active steps

Technical Implementation:
- Enhanced AutomationStatus with analysisProgress field
- 6-step detailed progress tracking in automation service
- Progress session management and real-time updates
- Enhanced UI components for progress visualization
This commit is contained in:
mindesbunister
2025-07-23 14:54:28 +02:00
parent a09b4bf8b2
commit bdb8f21290

View File

@@ -544,8 +544,98 @@ export default function AutomationPageV2() {
)}
</div>
{/* Analysis Progress */}
{status?.analysisProgress && (
<div className="bg-gray-800 p-6 rounded-lg border border-gray-700">
<div className="flex items-center justify-between mb-4">
<h3 className="text-xl font-bold text-white">Analysis Progress</h3>
<div className="text-xs text-blue-400">
Session: {status.analysisProgress.sessionId.split('-').pop()}
</div>
</div>
<div className="space-y-4">
{/* Overall Progress */}
<div className="flex items-center justify-between">
<span className="text-gray-300">Step {status.analysisProgress.currentStep} of {status.analysisProgress.totalSteps}</span>
<span className="text-blue-400 font-semibold">
{Math.round((status.analysisProgress.currentStep / status.analysisProgress.totalSteps) * 100)}%
</span>
</div>
<div className="bg-gray-700 rounded-full h-2">
<div
className="bg-blue-500 h-2 rounded-full transition-all duration-500"
style={{
width: `${(status.analysisProgress.currentStep / status.analysisProgress.totalSteps) * 100}%`
}}
></div>
</div>
{/* Timeframe Progress */}
{status.analysisProgress.timeframeProgress && (
<div className="p-3 bg-blue-600/10 border border-blue-600/30 rounded-lg">
<div className="flex items-center justify-between text-sm">
<span className="text-blue-400">
Analyzing {status.analysisProgress.timeframeProgress.currentTimeframe || 'timeframes'}
</span>
<span className="text-blue-300">
{status.analysisProgress.timeframeProgress.current}/{status.analysisProgress.timeframeProgress.total}
</span>
</div>
</div>
)}
{/* Detailed Steps */}
<div className="space-y-2">
{status.analysisProgress.steps.map((step, index) => (
<div key={step.id} className={`flex items-center space-x-3 p-2 rounded-lg ${
step.status === 'active' ? 'bg-blue-600/20 border border-blue-600/30' :
step.status === 'completed' ? 'bg-green-600/20 border border-green-600/30' :
step.status === 'error' ? 'bg-red-600/20 border border-red-600/30' :
'bg-gray-700/30'
}`}>
{/* Status Icon */}
<div className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold ${
step.status === 'active' ? 'bg-blue-500 text-white animate-pulse' :
step.status === 'completed' ? 'bg-green-500 text-white' :
step.status === 'error' ? 'bg-red-500 text-white' :
'bg-gray-600 text-gray-300'
}`}>
{step.status === 'active' ? '⏳' :
step.status === 'completed' ? '✓' :
step.status === 'error' ? '✗' :
index + 1}
</div>
{/* Step Info */}
<div className="flex-1">
<div className={`font-semibold text-sm ${
step.status === 'active' ? 'text-blue-300' :
step.status === 'completed' ? 'text-green-300' :
step.status === 'error' ? 'text-red-300' :
'text-gray-400'
}`}>
{step.title}
</div>
<div className="text-xs text-gray-400">
{step.details || step.description}
</div>
</div>
{/* Duration */}
{step.duration && (
<div className="text-xs text-gray-500">
{(step.duration / 1000).toFixed(1)}s
</div>
)}
</div>
))}
</div>
</div>
</div>
)}
{/* Analysis Timer */}
{status?.isActive && (
{status?.isActive && !status?.analysisProgress && (
<div className="bg-gray-800 p-6 rounded-lg border border-gray-700">
<div className="flex items-center justify-between mb-4">
<h3 className="text-xl font-bold text-white">Analysis Timer</h3>
@@ -559,7 +649,7 @@ export default function AutomationPageV2() {
{formatCountdown(nextAnalysisCountdown)}
</div>
<div className="text-sm text-gray-400">
{nextAnalysisCountdown > 0 ? 'Next Analysis In' : 'Analysis Running'}
{nextAnalysisCountdown > 0 ? 'Next Analysis In' : 'Analysis Starting Soon'}
</div>
</div>
<div className="bg-gray-700 rounded-full h-2">