mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: restructure to monorepo with apps and packages directories - Move companion app to apps/companion with electron-vite - Move domain/application/infrastructure to packages/ - Fix ELECTRON_RUN_AS_NODE env var issue for VS Code terminal - Remove legacy esbuild bundler (replaced by electron-vite) - Update workspace scripts in root package.json

Browse Source
This commit is contained in:
Marc Mintel
2025-11-22 00:25:06 +01:00
parent d20554df55
commit 7eae6e3bd4
39 changed files with 515 additions and 1939 deletions
Download Patch File Download Diff File Expand all files Collapse all files

208
apps/companion/renderer/components/SessionProgressMonitor.tsx Normal file
View File

@@ -0,0 +1,208 @@
import React 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: 'Configure Team Driving',
18: 'Set Track Conditions'
};
export function SessionProgressMonitor({ sessionId, progress, isRunning }: SessionProgressMonitorProps) {
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;
}
};
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} / 18 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>
);
}