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

2025-11-22 00:25:06 +01:00
parent d20554df55
commit 7eae6e3bd4
39 changed files with 515 additions and 1939 deletions
--- a/apps/companion/renderer/App.tsx
+++ b/apps/companion/renderer/App.tsx
@@ -0,0 +1,110 @@
+import React, { useState, useEffect } from 'react';
+import { SessionCreationForm } from './components/SessionCreationForm';
+import { SessionProgressMonitor } from './components/SessionProgressMonitor';
+import type { HostedSessionConfig } from '../../../packages/domain/entities/HostedSessionConfig';
+
+interface SessionProgress {
+  sessionId: string;
+  currentStep: number;
+  state: string;
+  completedSteps: number[];
+  hasError: boolean;
+  errorMessage: string | null;
+}
+
+export function App() {
+  const [sessionId, setSessionId] = useState<string | null>(null);
+  const [progress, setProgress] = useState<SessionProgress | null>(null);
+  const [isRunning, setIsRunning] = useState(false);
+
+  useEffect(() => {
+    if (window.electronAPI) {
+      window.electronAPI.onSessionProgress((newProgress: SessionProgress) => {
+        setProgress(newProgress);
+        if (newProgress.state === 'COMPLETED' || 
+            newProgress.state === 'FAILED' || 
+            newProgress.state === 'STOPPED_AT_STEP_18') {
+          setIsRunning(false);
+        }
+      });
+    }
+  }, []);
+
+  const handleStartAutomation = async (config: HostedSessionConfig) => {
+    setIsRunning(true);
+    const result = await window.electronAPI.startAutomation(config);
+    
+    if (result.success && result.sessionId) {
+      setSessionId(result.sessionId);
+    } else {
+      setIsRunning(false);
+      alert(`Failed to start automation: ${result.error}`);
+    }
+  };
+
+  const handleStopAutomation = async () => {
+    if (sessionId) {
+      const result = await window.electronAPI.stopAutomation(sessionId);
+      if (result.success) {
+        setIsRunning(false);
+        setProgress(prev => prev ? { ...prev, state: 'STOPPED', hasError: false, errorMessage: 'User stopped automation' } : null);
+      } else {
+        alert(`Failed to stop automation: ${result.error}`);
+      }
+    }
+  };
+
+  return (
+    <div style={{
+      display: 'flex',
+      minHeight: '100vh',
+      backgroundColor: '#1a1a1a'
+    }}>
+      <div style={{
+        flex: 1,
+        padding: '2rem',
+        borderRight: '1px solid #333'
+      }}>
+        <h1 style={{ marginBottom: '2rem', color: '#fff' }}>
+          GridPilot Companion
+        </h1>
+        <p style={{ marginBottom: '2rem', color: '#aaa' }}>
+          Hosted Session Automation POC
+        </p>
+        <SessionCreationForm
+          onSubmit={handleStartAutomation}
+          disabled={isRunning}
+        />
+        {isRunning && (
+          <button
+            onClick={handleStopAutomation}
+            style={{
+              marginTop: '1rem',
+              padding: '0.75rem 1.5rem',
+              backgroundColor: '#dc3545',
+              color: '#fff',
+              border: 'none',
+              borderRadius: '4px',
+              cursor: 'pointer',
+              fontSize: '1rem',
+              fontWeight: 'bold'
+            }}
+          >
+            Stop Automation
+          </button>
+        )}
+      </div>
+      <div style={{
+        flex: 1,
+        padding: '2rem',
+        backgroundColor: '#0d0d0d'
+      }}>
+        <SessionProgressMonitor 
+          sessionId={sessionId}
+          progress={progress}
+          isRunning={isRunning}
+        />
+      </div>
+    </div>
+  );
+}
--- a/apps/companion/renderer/components/SessionCreationForm.tsx
+++ b/apps/companion/renderer/components/SessionCreationForm.tsx
@@ -0,0 +1,177 @@
+import React, { useState } from 'react';
+import type { HostedSessionConfig } from '../../../../packages/domain/entities/HostedSessionConfig';
+
+interface SessionCreationFormProps {
+  onSubmit: (config: HostedSessionConfig) => void;
+  disabled: boolean;
+}
+
+export function SessionCreationForm({ onSubmit, disabled }: SessionCreationFormProps) {
+  const [config, setConfig] = useState<HostedSessionConfig>({
+    sessionName: 'POC Test Session',
+    serverName: 'POC Server',
+    password: 'test123',
+    adminPassword: 'admin123',
+    maxDrivers: 40,
+    trackId: 'watkins-glen',
+    carIds: ['porsche-911-gt3-r'],
+    weatherType: 'dynamic',
+    timeOfDay: 'afternoon',
+    sessionDuration: 60,
+    practiceLength: 15,
+    qualifyingLength: 10,
+    warmupLength: 5,
+    raceLength: 30,
+    startType: 'standing',
+    restarts: 'single-file',
+    damageModel: 'realistic',
+    trackState: 'auto'
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSubmit(config);
+  };
+
+  const inputStyle: React.CSSProperties = {
+    width: '100%',
+    padding: '0.5rem',
+    backgroundColor: '#2a2a2a',
+    border: '1px solid #444',
+    borderRadius: '4px',
+    color: '#e0e0e0',
+    fontSize: '14px'
+  };
+
+  const labelStyle: React.CSSProperties = {
+    display: 'block',
+    marginBottom: '0.5rem',
+    color: '#aaa',
+    fontSize: '14px'
+  };
+
+  const fieldStyle: React.CSSProperties = {
+    marginBottom: '1rem'
+  };
+
+  return (
+    <form onSubmit={handleSubmit} style={{ maxWidth: '500px' }}>
+      <h2 style={{ marginBottom: '1.5rem', color: '#fff' }}>Session Configuration</h2>
+      
+      <div style={fieldStyle}>
+        <label style={labelStyle}>Session Name</label>
+        <input
+          type="text"
+          value={config.sessionName}
+          onChange={(e) => setConfig({ ...config, sessionName: e.target.value })}
+          style={inputStyle}
+          disabled={disabled}
+          required
+        />
+      </div>
+
+      <div style={fieldStyle}>
+        <label style={labelStyle}>Server Name</label>
+        <input
+          type="text"
+          value={config.serverName}
+          onChange={(e) => setConfig({ ...config, serverName: e.target.value })}
+          style={inputStyle}
+          disabled={disabled}
+          required
+        />
+      </div>
+
+      <div style={fieldStyle}>
+        <label style={labelStyle}>Max Drivers</label>
+        <input
+          type="number"
+          value={config.maxDrivers}
+          onChange={(e) => setConfig({ ...config, maxDrivers: parseInt(e.target.value) })}
+          style={inputStyle}
+          disabled={disabled}
+          min="1"
+          max="60"
+          required
+        />
+      </div>
+
+      <div style={fieldStyle}>
+        <label style={labelStyle}>Track</label>
+        <input
+          type="text"
+          value={config.trackId}
+          onChange={(e) => setConfig({ ...config, trackId: e.target.value })}
+          style={inputStyle}
+          disabled={disabled}
+          required
+        />
+      </div>
+
+      <div style={fieldStyle}>
+        <label style={labelStyle}>Weather Type</label>
+        <select
+          value={config.weatherType}
+          onChange={(e) => setConfig({ ...config, weatherType: e.target.value as any })}
+          style={inputStyle}
+          disabled={disabled}
+        >
+          <option value="static">Static</option>
+          <option value="dynamic">Dynamic</option>
+        </select>
+      </div>
+
+      <div style={fieldStyle}>
+        <label style={labelStyle}>Time of Day</label>
+        <select
+          value={config.timeOfDay}
+          onChange={(e) => setConfig({ ...config, timeOfDay: e.target.value as any })}
+          style={inputStyle}
+          disabled={disabled}
+        >
+          <option value="morning">Morning</option>
+          <option value="afternoon">Afternoon</option>
+          <option value="evening">Evening</option>
+          <option value="night">Night</option>
+        </select>
+      </div>
+
+      <div style={fieldStyle}>
+        <label style={labelStyle}>Race Length (minutes)</label>
+        <input
+          type="number"
+          value={config.raceLength}
+          onChange={(e) => setConfig({ ...config, raceLength: parseInt(e.target.value) })}
+          style={inputStyle}
+          disabled={disabled}
+          min="1"
+          required
+        />
+      </div>
+
+      <button
+        type="submit"
+        disabled={disabled}
+        style={{
+          width: '100%',
+          padding: '0.75rem',
+          backgroundColor: disabled ? '#444' : '#0066cc',
+          color: '#fff',
+          border: 'none',
+          borderRadius: '4px',
+          fontSize: '16px',
+          fontWeight: 'bold',
+          cursor: disabled ? 'not-allowed' : 'pointer',
+          marginTop: '1rem'
+        }}
+      >
+        {disabled ? 'Automation Running...' : 'Start Automation'}
+      </button>
+
+      <p style={{ marginTop: '1rem', fontSize: '12px', color: '#888', lineHeight: '1.5' }}>
+        Note: This POC will execute steps 1-18 and stop at step 18 (Track Conditions) for safety.
+        The actual session creation will not be completed.
+      </p>
+    </form>
+  );
+}
--- a/apps/companion/renderer/components/SessionProgressMonitor.tsx
+++ b/apps/companion/renderer/components/SessionProgressMonitor.tsx
@@ -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>
+  );
+}
--- a/apps/companion/renderer/index.css
+++ b/apps/companion/renderer/index.css
@@ -0,0 +1,19 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: #1a1a1a;
+  color: #e0e0e0;
+}
+
+#root {
+  min-height: 100vh;
+}
--- a/apps/companion/renderer/index.html
+++ b/apps/companion/renderer/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>GridPilot - Hosted Session Automation POC</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="./main.tsx"></script>
+</body>
+</html>
--- a/apps/companion/renderer/main.tsx
+++ b/apps/companion/renderer/main.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { App } from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
--- a/apps/companion/renderer/types.d.ts
+++ b/apps/companion/renderer/types.d.ts
@@ -0,0 +1,9 @@
+import type { ElectronAPI } from '../main/preload';
+
+declare global {
+  interface Window {
+    electronAPI: ElectronAPI;
+  }
+}
+
+export {};