working companion prototype
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import { SessionCreationForm } from './components/SessionCreationForm';
|
||||
import { SessionProgressMonitor } from './components/SessionProgressMonitor';
|
||||
import { LoginPrompt } from './components/LoginPrompt';
|
||||
import type { HostedSessionConfig } from '../../../packages/domain/entities/HostedSessionConfig';
|
||||
|
||||
interface SessionProgress {
|
||||
@@ -12,72 +13,97 @@ interface SessionProgress {
|
||||
errorMessage: string | null;
|
||||
}
|
||||
|
||||
interface PermissionStatus {
|
||||
accessibility: boolean;
|
||||
screenRecording: boolean;
|
||||
platform: string;
|
||||
}
|
||||
type AuthState = 'UNKNOWN' | 'AUTHENTICATED' | 'EXPIRED' | 'LOGGED_OUT' | 'CHECKING';
|
||||
type LoginStatus = 'idle' | 'waiting' | 'success' | 'error';
|
||||
|
||||
export function App() {
|
||||
const [authState, setAuthState] = useState<AuthState>('CHECKING');
|
||||
const [authError, setAuthError] = useState<string | undefined>(undefined);
|
||||
const [sessionId, setSessionId] = useState<string | null>(null);
|
||||
const [progress, setProgress] = useState<SessionProgress | null>(null);
|
||||
const [isRunning, setIsRunning] = useState(false);
|
||||
const [permissionStatus, setPermissionStatus] = useState<PermissionStatus | null>(null);
|
||||
const [permissionChecking, setPermissionChecking] = useState(true);
|
||||
const [missingPermissions, setMissingPermissions] = useState<string[]>([]);
|
||||
const [loginStatus, setLoginStatus] = useState<LoginStatus>('idle');
|
||||
|
||||
const checkPermissions = useCallback(async () => {
|
||||
const handleLogin = useCallback(async () => {
|
||||
if (!window.electronAPI) return;
|
||||
|
||||
setPermissionChecking(true);
|
||||
setAuthError(undefined);
|
||||
setLoginStatus('waiting');
|
||||
|
||||
try {
|
||||
const result = await window.electronAPI.checkPermissions();
|
||||
setPermissionStatus(result.status);
|
||||
setMissingPermissions(result.missingPermissions);
|
||||
// This now waits for login to complete (auto-detects and closes browser)
|
||||
const result = await window.electronAPI.initiateLogin();
|
||||
if (result.success) {
|
||||
// Login completed successfully - browser closed automatically
|
||||
setLoginStatus('success');
|
||||
// Show success message for 2 seconds before transitioning
|
||||
setTimeout(() => {
|
||||
setAuthState('AUTHENTICATED');
|
||||
}, 2000);
|
||||
} else {
|
||||
setLoginStatus('error');
|
||||
setAuthError(result.error);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to check permissions:', error);
|
||||
} finally {
|
||||
setPermissionChecking(false);
|
||||
console.error('Login failed:', error);
|
||||
setLoginStatus('error');
|
||||
setAuthError(error instanceof Error ? error.message : 'Login failed');
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleRetryAuth = useCallback(async () => {
|
||||
if (!window.electronAPI) return;
|
||||
|
||||
setAuthState('CHECKING');
|
||||
setAuthError(undefined);
|
||||
setLoginStatus('idle');
|
||||
|
||||
try {
|
||||
const result = await window.electronAPI.checkAuth();
|
||||
if (result.success && result.state) {
|
||||
setAuthState(result.state as AuthState);
|
||||
} else {
|
||||
setAuthError(result.error);
|
||||
setAuthState('UNKNOWN');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Auth check failed:', error);
|
||||
setAuthError(error instanceof Error ? error.message : 'Connection failed');
|
||||
setAuthState('UNKNOWN');
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
// Check permissions on app start
|
||||
checkPermissions();
|
||||
if (!window.electronAPI) return;
|
||||
|
||||
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 checkAuth = async () => {
|
||||
try {
|
||||
const result = await window.electronAPI.checkAuth();
|
||||
if (result.success && result.state) {
|
||||
setAuthState(result.state as AuthState);
|
||||
} else {
|
||||
setAuthError(result.error || 'Failed to check authentication');
|
||||
setAuthState('UNKNOWN');
|
||||
}
|
||||
});
|
||||
}
|
||||
}, [checkPermissions]);
|
||||
} catch (error) {
|
||||
setAuthError(error instanceof Error ? error.message : 'Failed to check authentication');
|
||||
setAuthState('UNKNOWN');
|
||||
}
|
||||
};
|
||||
|
||||
const handleOpenPermissionSettings = async (pane?: 'accessibility' | 'screenRecording') => {
|
||||
if (!window.electronAPI) return;
|
||||
await window.electronAPI.openPermissionSettings(pane);
|
||||
};
|
||||
checkAuth();
|
||||
|
||||
const handleRequestAccessibility = async () => {
|
||||
if (!window.electronAPI) return;
|
||||
await window.electronAPI.requestAccessibility();
|
||||
// Recheck permissions after request
|
||||
setTimeout(checkPermissions, 500);
|
||||
};
|
||||
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) => {
|
||||
// Recheck permissions before starting
|
||||
await checkPermissions();
|
||||
|
||||
if (missingPermissions.length > 0) {
|
||||
alert(`Cannot start automation: Missing permissions: ${missingPermissions.join(', ')}`);
|
||||
return;
|
||||
}
|
||||
|
||||
setIsRunning(true);
|
||||
const result = await window.electronAPI.startAutomation(config);
|
||||
|
||||
@@ -85,13 +111,7 @@ export function App() {
|
||||
setSessionId(result.sessionId);
|
||||
} else {
|
||||
setIsRunning(false);
|
||||
if (result.permissionError) {
|
||||
// Update permission status
|
||||
await checkPermissions();
|
||||
alert(`Permission Error: ${result.error}`);
|
||||
} else {
|
||||
alert(`Failed to start automation: ${result.error}`);
|
||||
}
|
||||
alert(`Failed to start automation: ${result.error}`);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -107,8 +127,47 @@ export function App() {
|
||||
}
|
||||
};
|
||||
|
||||
const isMacOS = permissionStatus?.platform === 'darwin';
|
||||
const hasAllPermissions = missingPermissions.length === 0;
|
||||
if (authState === 'CHECKING') {
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
minHeight: '100vh',
|
||||
backgroundColor: '#1a1a1a',
|
||||
}}>
|
||||
<div style={{
|
||||
width: '60px',
|
||||
height: '60px',
|
||||
border: '4px solid #333',
|
||||
borderTopColor: '#007bff',
|
||||
borderRadius: '50%',
|
||||
animation: 'spin 1s linear infinite',
|
||||
}} />
|
||||
<style>{`
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
`}</style>
|
||||
<p style={{ color: '#aaa', marginTop: '1.5rem', fontSize: '1.1rem' }}>
|
||||
Checking authentication...
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (authState !== 'AUTHENTICATED') {
|
||||
return (
|
||||
<LoginPrompt
|
||||
authState={authState}
|
||||
errorMessage={authError}
|
||||
onLogin={handleLogin}
|
||||
onRetry={handleRetryAuth}
|
||||
loginStatus={loginStatus}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
@@ -128,126 +187,9 @@ export function App() {
|
||||
Hosted Session Automation POC
|
||||
</p>
|
||||
|
||||
{/* Permission Banner */}
|
||||
{isMacOS && !permissionChecking && !hasAllPermissions && (
|
||||
<div style={{
|
||||
marginBottom: '1.5rem',
|
||||
padding: '1rem',
|
||||
backgroundColor: '#3d2020',
|
||||
border: '1px solid #dc3545',
|
||||
borderRadius: '8px',
|
||||
}}>
|
||||
<h3 style={{ color: '#ff6b6b', margin: '0 0 0.5rem 0', fontSize: '1rem' }}>
|
||||
⚠️ Missing Permissions
|
||||
</h3>
|
||||
<p style={{ color: '#ffaaaa', margin: '0 0 1rem 0', fontSize: '0.9rem' }}>
|
||||
GridPilot requires macOS permissions to control your computer for automation.
|
||||
Please grant the following permissions:
|
||||
</p>
|
||||
<ul style={{ color: '#ffaaaa', margin: '0 0 1rem 0', paddingLeft: '1.5rem', fontSize: '0.9rem' }}>
|
||||
{!permissionStatus?.accessibility && (
|
||||
<li style={{ marginBottom: '0.5rem' }}>
|
||||
<strong>Accessibility:</strong> Required for keyboard and mouse control
|
||||
</li>
|
||||
)}
|
||||
{!permissionStatus?.screenRecording && (
|
||||
<li style={{ marginBottom: '0.5rem' }}>
|
||||
<strong>Screen Recording:</strong> Required for screen capture and window detection
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
<div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
|
||||
{!permissionStatus?.accessibility && (
|
||||
<button
|
||||
onClick={handleRequestAccessibility}
|
||||
style={{
|
||||
padding: '0.5rem 1rem',
|
||||
backgroundColor: '#007bff',
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '0.9rem',
|
||||
}}
|
||||
>
|
||||
Request Accessibility
|
||||
</button>
|
||||
)}
|
||||
{!permissionStatus?.accessibility && (
|
||||
<button
|
||||
onClick={() => handleOpenPermissionSettings('accessibility')}
|
||||
style={{
|
||||
padding: '0.5rem 1rem',
|
||||
backgroundColor: '#6c757d',
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '0.9rem',
|
||||
}}
|
||||
>
|
||||
Open Accessibility Settings
|
||||
</button>
|
||||
)}
|
||||
{!permissionStatus?.screenRecording && (
|
||||
<button
|
||||
onClick={() => handleOpenPermissionSettings('screenRecording')}
|
||||
style={{
|
||||
padding: '0.5rem 1rem',
|
||||
backgroundColor: '#6c757d',
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '0.9rem',
|
||||
}}
|
||||
>
|
||||
Open Screen Recording Settings
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={checkPermissions}
|
||||
style={{
|
||||
padding: '0.5rem 1rem',
|
||||
backgroundColor: '#28a745',
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '0.9rem',
|
||||
}}
|
||||
>
|
||||
Recheck Permissions
|
||||
</button>
|
||||
</div>
|
||||
<p style={{ color: '#888', margin: '1rem 0 0 0', fontSize: '0.8rem' }}>
|
||||
After granting permissions in System Preferences, click "Recheck Permissions" or restart the app.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Permission Status Indicator */}
|
||||
{isMacOS && !permissionChecking && hasAllPermissions && (
|
||||
<div style={{
|
||||
marginBottom: '1.5rem',
|
||||
padding: '0.75rem 1rem',
|
||||
backgroundColor: '#1e3d1e',
|
||||
border: '1px solid #28a745',
|
||||
borderRadius: '8px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.5rem',
|
||||
}}>
|
||||
<span style={{ color: '#28a745', fontSize: '1.2rem' }}>✓</span>
|
||||
<span style={{ color: '#8eff8e', fontSize: '0.9rem' }}>
|
||||
All permissions granted - Ready for automation
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<SessionCreationForm
|
||||
onSubmit={handleStartAutomation}
|
||||
disabled={isRunning || (isMacOS && !hasAllPermissions)}
|
||||
disabled={isRunning}
|
||||
/>
|
||||
{isRunning && (
|
||||
<button
|
||||
|
||||
Reference in New Issue
Block a user