255 lines
8.3 KiB
TypeScript
255 lines
8.3 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
||
|
||
interface SessionProgress {
|
||
sessionId: string;
|
||
currentStep: number;
|
||
state: string;
|
||
completedSteps: number[];
|
||
hasError: boolean;
|
||
errorMessage: string | null;
|
||
}
|
||
|
||
interface SessionProgressMonitorProps {
|
||
sessionId: string | null;
|
||
progress: SessionProgress | null;
|
||
isRunning: boolean;
|
||
}
|
||
|
||
const STEP_NAMES: { [key: number]: string } = {
|
||
1: 'Navigate to Hosted Racing',
|
||
2: 'Click Create a Race',
|
||
3: 'Fill Race Information',
|
||
4: 'Configure Server Details',
|
||
5: 'Set Admins',
|
||
6: 'Add Admin',
|
||
7: 'Set Time Limits',
|
||
8: 'Set Cars',
|
||
9: 'Add Car',
|
||
10: 'Set Car Classes',
|
||
11: 'Set Track',
|
||
12: 'Add Track',
|
||
13: 'Configure Track Options',
|
||
14: 'Set Time of Day',
|
||
15: 'Configure Weather',
|
||
16: 'Set Race Options',
|
||
17: 'Set Track Conditions'
|
||
};
|
||
|
||
export function SessionProgressMonitor({ sessionId, progress, isRunning }: SessionProgressMonitorProps) {
|
||
const [ackStatusByStep, setAckStatusByStep] = useState<Record<number, string>>({});
|
||
const [automationEventMsg, setAutomationEventMsg] = useState<string | null>(null);
|
||
|
||
const getStateColor = (state: string) => {
|
||
switch (state) {
|
||
case 'IN_PROGRESS': return '#0066cc';
|
||
case 'COMPLETED': return '#28a745';
|
||
case 'FAILED': return '#dc3545';
|
||
case 'STOPPED_AT_STEP_18': return '#ffc107';
|
||
default: return '#6c757d';
|
||
}
|
||
};
|
||
|
||
const getStateLabel = (state: string) => {
|
||
switch (state) {
|
||
case 'IN_PROGRESS': return 'Running';
|
||
case 'COMPLETED': return 'Completed';
|
||
case 'FAILED': return 'Failed';
|
||
case 'STOPPED_AT_STEP_18': return 'Stopped at Step 18';
|
||
default: return state;
|
||
}
|
||
};
|
||
|
||
// Request overlay action when the current step changes (gate overlay rendering on ack)
|
||
useEffect(() => {
|
||
if (!progress || !sessionId) return;
|
||
const currentStep = progress.currentStep;
|
||
const action = {
|
||
id: `${progress.sessionId}-${currentStep}`,
|
||
label: STEP_NAMES[currentStep] || `Step ${currentStep}`,
|
||
meta: {},
|
||
timeoutMs: 1000
|
||
};
|
||
let mounted = true;
|
||
(async () => {
|
||
try {
|
||
// Use electronAPI overlayActionRequest to obtain ack
|
||
if (window.electronAPI?.overlayActionRequest) {
|
||
const ack = await window.electronAPI.overlayActionRequest(action);
|
||
if (!mounted) return;
|
||
setAckStatusByStep(prev => ({ ...prev, [currentStep]: ack.status }));
|
||
} else {
|
||
// If no IPC available, mark tentative as fallback
|
||
setAckStatusByStep(prev => ({ ...prev, [currentStep]: 'tentative' }));
|
||
}
|
||
} catch (e) {
|
||
if (!mounted) return;
|
||
setAckStatusByStep(prev => ({ ...prev, [currentStep]: 'failed' }));
|
||
}
|
||
})();
|
||
return () => { mounted = false; };
|
||
}, [progress?.currentStep, sessionId]);
|
||
|
||
// Subscribe to automation events for optional live updates
|
||
useEffect(() => {
|
||
if (window.electronAPI?.onAutomationEvent) {
|
||
const off = window.electronAPI.onAutomationEvent((ev) => {
|
||
if (ev && ev.payload && ev.payload.actionId && ev.type) {
|
||
setAutomationEventMsg(`${ev.type} ${ev.payload.actionId}`);
|
||
} else if (ev && ev.type) {
|
||
setAutomationEventMsg(ev.type);
|
||
}
|
||
});
|
||
return () => { if (typeof off === 'function') off(); };
|
||
}
|
||
return;
|
||
}, []);
|
||
|
||
if (!sessionId && !isRunning) {
|
||
return (
|
||
<div style={{ textAlign: 'center', color: '#666', paddingTop: '4rem' }}>
|
||
<h2 style={{ marginBottom: '1rem' }}>Session Progress</h2>
|
||
<p>Configure and start an automation session to see progress here.</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div>
|
||
<h2 style={{ marginBottom: '1.5rem', color: '#fff' }}>Session Progress</h2>
|
||
|
||
{sessionId && (
|
||
<div style={{
|
||
marginBottom: '2rem',
|
||
padding: '1rem',
|
||
backgroundColor: '#1a1a1a',
|
||
borderRadius: '4px',
|
||
border: '1px solid #333'
|
||
}}>
|
||
<div style={{ marginBottom: '0.5rem', color: '#aaa', fontSize: '14px' }}>
|
||
Session ID
|
||
</div>
|
||
<div style={{ fontFamily: 'monospace', fontSize: '12px', color: '#fff' }}>
|
||
{sessionId}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{progress && (
|
||
<>
|
||
<div style={{
|
||
marginBottom: '2rem',
|
||
padding: '1rem',
|
||
backgroundColor: '#1a1a1a',
|
||
borderRadius: '4px',
|
||
border: '1px solid #333'
|
||
}}>
|
||
<div style={{ marginBottom: '0.5rem', color: '#aaa', fontSize: '14px' }}>
|
||
Status
|
||
</div>
|
||
<div style={{
|
||
fontSize: '18px',
|
||
fontWeight: 'bold',
|
||
color: getStateColor(progress.state)
|
||
}}>
|
||
{getStateLabel(progress.state)}
|
||
</div>
|
||
</div>
|
||
|
||
{progress.state === 'STOPPED_AT_STEP_18' && (
|
||
<div style={{
|
||
marginBottom: '2rem',
|
||
padding: '1rem',
|
||
backgroundColor: '#332b00',
|
||
border: '1px solid #ffc107',
|
||
borderRadius: '4px',
|
||
color: '#ffc107'
|
||
}}>
|
||
<strong>⚠️ Safety Stop</strong>
|
||
<p style={{ marginTop: '0.5rem', fontSize: '14px', lineHeight: '1.5' }}>
|
||
Automation stopped at step 18 (Track Conditions) as configured.
|
||
This prevents accidental session creation during POC demonstration.
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{progress.hasError && progress.errorMessage && (
|
||
<div style={{
|
||
marginBottom: '2rem',
|
||
padding: '1rem',
|
||
backgroundColor: '#2d0a0a',
|
||
border: '1px solid #dc3545',
|
||
borderRadius: '4px',
|
||
color: '#dc3545'
|
||
}}>
|
||
<strong>Error</strong>
|
||
<p style={{ marginTop: '0.5rem', fontSize: '14px' }}>
|
||
{progress.errorMessage}
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
<div style={{ marginBottom: '1rem', color: '#aaa', fontSize: '14px' }}>
|
||
Progress: {progress.completedSteps.length} / 17 steps
|
||
</div>
|
||
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
|
||
{Object.entries(STEP_NAMES).map(([stepNum, stepName]) => {
|
||
const step = parseInt(stepNum);
|
||
const isCompleted = progress.completedSteps.includes(step);
|
||
const isCurrent = progress.currentStep === step;
|
||
|
||
return (
|
||
<div
|
||
key={step}
|
||
style={{
|
||
padding: '0.75rem',
|
||
backgroundColor: isCurrent ? '#1a3a1a' : isCompleted ? '#0d2b0d' : '#1a1a1a',
|
||
border: `1px solid ${isCurrent ? '#28a745' : isCompleted ? '#1d4d1d' : '#333'}`,
|
||
borderRadius: '4px',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: '1rem'
|
||
}}
|
||
>
|
||
<div style={{
|
||
width: '30px',
|
||
height: '30px',
|
||
borderRadius: '50%',
|
||
backgroundColor: isCompleted ? '#28a745' : isCurrent ? '#0066cc' : '#333',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
color: '#fff',
|
||
fontSize: '14px',
|
||
fontWeight: 'bold',
|
||
flexShrink: 0
|
||
}}>
|
||
{isCompleted ? '✓' : step}
|
||
</div>
|
||
<div style={{ flex: 1 }}>
|
||
<div style={{
|
||
color: isCurrent ? '#28a745' : isCompleted ? '#aaa' : '#666',
|
||
fontSize: '14px',
|
||
fontWeight: isCurrent ? 'bold' : 'normal'
|
||
}}>
|
||
{stepName}
|
||
</div>
|
||
</div>
|
||
{isCurrent && (
|
||
<div style={{
|
||
fontSize: '12px',
|
||
color: '#0066cc',
|
||
fontWeight: 'bold'
|
||
}}>
|
||
IN PROGRESS
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
);
|
||
} |