711 lines
27 KiB
JavaScript
711 lines
27 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import './App.css';
|
|
|
|
const App = () => {
|
|
const [tasks, setTasks] = useState([]);
|
|
const [selectedTask, setSelectedTask] = useState(null);
|
|
const [showForm, setShowForm] = useState(false);
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
description: '',
|
|
prompt: '',
|
|
schedule_type: 'manual',
|
|
schedule_value: '',
|
|
enabled: true
|
|
});
|
|
const [systemInfo, setSystemInfo] = useState(null);
|
|
const [usageStats, setUsageStats] = useState(null);
|
|
const [authStatus, setAuthStatus] = useState(null);
|
|
const [mcpServers, setMcpServers] = useState(null);
|
|
const [showAddMcp, setShowAddMcp] = useState(false);
|
|
const [mcpForm, setMcpForm] = useState({ name: '', server_type: 'sse', url: '', command: '' });
|
|
const [loading, setLoading] = useState(false);
|
|
const [activeView, setActiveView] = useState('tasks'); // 'tasks' | 'dashboard'
|
|
|
|
// Fetch tasks on component mount
|
|
useEffect(() => {
|
|
fetchTasks();
|
|
fetchSystemInfo();
|
|
fetchUsageStats();
|
|
fetchAuthStatus();
|
|
fetchMcpServers();
|
|
const interval = setInterval(() => {
|
|
fetchTasks();
|
|
fetchSystemInfo();
|
|
fetchUsageStats();
|
|
fetchAuthStatus();
|
|
fetchMcpServers();
|
|
}, 10000);
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
const fetchTasks = async () => {
|
|
try {
|
|
const response = await fetch('/api/tasks');
|
|
const data = await response.json();
|
|
setTasks(data);
|
|
} catch (error) {
|
|
console.error('Error fetching tasks:', error);
|
|
}
|
|
};
|
|
|
|
const fetchSystemInfo = async () => {
|
|
try {
|
|
const response = await fetch('/api/system/info');
|
|
const data = await response.json();
|
|
setSystemInfo(data);
|
|
} catch (error) {
|
|
console.error('Error fetching system info:', error);
|
|
}
|
|
};
|
|
|
|
const fetchUsageStats = async () => {
|
|
try {
|
|
const response = await fetch('/api/system/usage');
|
|
const data = await response.json();
|
|
setUsageStats(data);
|
|
} catch (error) {
|
|
console.error('Error fetching usage stats:', error);
|
|
}
|
|
};
|
|
|
|
const fetchAuthStatus = async () => {
|
|
try {
|
|
const response = await fetch('/api/auth/status');
|
|
const data = await response.json();
|
|
setAuthStatus(data);
|
|
} catch (error) {
|
|
console.error('Error fetching auth status:', error);
|
|
}
|
|
};
|
|
|
|
const [loginLoading, setLoginLoading] = useState(false);
|
|
|
|
const handleLogin = async () => {
|
|
setLoginLoading(true);
|
|
try {
|
|
const response = await fetch('/api/auth/login', { method: 'POST' });
|
|
const data = await response.json();
|
|
setAuthStatus(prev => ({ ...prev, ...data }));
|
|
if (data.auth_url) {
|
|
window.open(data.auth_url, '_blank');
|
|
} else if (data.status === 'error') {
|
|
alert(data.message || 'Login failed. Check container logs.');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error initiating login:', error);
|
|
alert('Failed to connect to auth endpoint');
|
|
}
|
|
setLoginLoading(false);
|
|
};
|
|
|
|
const handleLogout = async () => {
|
|
try {
|
|
await fetch('/api/auth/logout', { method: 'POST' });
|
|
fetchAuthStatus();
|
|
} catch (error) {
|
|
console.error('Error logging out:', error);
|
|
}
|
|
};
|
|
|
|
const fetchMcpServers = async () => {
|
|
try {
|
|
const response = await fetch('/api/mcp/servers');
|
|
const data = await response.json();
|
|
setMcpServers(data);
|
|
} catch (error) {
|
|
console.error('Error fetching MCP servers:', error);
|
|
}
|
|
};
|
|
|
|
const handleAddMcp = async (e) => {
|
|
e.preventDefault();
|
|
try {
|
|
const response = await fetch('/api/mcp/servers', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(mcpForm)
|
|
});
|
|
const data = await response.json();
|
|
if (data.status === 'ok') {
|
|
setShowAddMcp(false);
|
|
setMcpForm({ name: '', server_type: 'sse', url: '', command: '' });
|
|
fetchMcpServers();
|
|
} else {
|
|
alert(data.message || 'Failed to add MCP server');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error adding MCP server:', error);
|
|
}
|
|
};
|
|
|
|
const handleRemoveMcp = async (name) => {
|
|
if (!confirm(`Remove MCP server "${name}"?`)) return;
|
|
try {
|
|
await fetch(`/api/mcp/servers/${name}`, { method: 'DELETE' });
|
|
fetchMcpServers();
|
|
} catch (error) {
|
|
console.error('Error removing MCP server:', error);
|
|
}
|
|
};
|
|
|
|
const handleCreateTask = async (e) => {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
|
|
try {
|
|
const response = await fetch('/api/tasks', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(formData)
|
|
});
|
|
|
|
if (response.ok) {
|
|
await fetchTasks();
|
|
setShowForm(false);
|
|
setFormData({
|
|
name: '',
|
|
description: '',
|
|
prompt: '',
|
|
schedule_type: 'manual',
|
|
schedule_value: '',
|
|
enabled: true
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error('Error creating task:', error);
|
|
}
|
|
|
|
setLoading(false);
|
|
};
|
|
|
|
const handleRunTask = async (taskId) => {
|
|
try {
|
|
const response = await fetch(`/api/tasks/${taskId}/run`, {
|
|
method: 'POST'
|
|
});
|
|
const data = await response.json();
|
|
console.log('Task started:', data);
|
|
await fetchTasks();
|
|
} catch (error) {
|
|
console.error('Error running task:', error);
|
|
}
|
|
};
|
|
|
|
const handleDeleteTask = async (taskId) => {
|
|
if (confirm('Delete this task?')) {
|
|
try {
|
|
await fetch(`/api/tasks/${taskId}`, { method: 'DELETE' });
|
|
await fetchTasks();
|
|
setSelectedTask(null);
|
|
} catch (error) {
|
|
console.error('Error deleting task:', error);
|
|
}
|
|
}
|
|
};
|
|
|
|
const getStatusColor = (status) => {
|
|
switch (status) {
|
|
case 'running': return '#3498db';
|
|
case 'completed': return '#27ae60';
|
|
case 'failed': return '#e74c3c';
|
|
default: return '#95a5a6';
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="app-container">
|
|
<header className="app-header">
|
|
<div className="header-content">
|
|
<h1>Claude Persistent Agent</h1>
|
|
<p>Scheduled task management & Claude Code runner</p>
|
|
</div>
|
|
<div className="header-right">
|
|
<nav className="header-nav">
|
|
<button className={`nav-btn ${activeView === 'tasks' ? 'active' : ''}`} onClick={() => setActiveView('tasks')}>Tasks</button>
|
|
<button className={`nav-btn ${activeView === 'dashboard' ? 'active' : ''}`} onClick={() => setActiveView('dashboard')}>Dashboard</button>
|
|
</nav>
|
|
<div className="auth-badge">
|
|
{authStatus?.status === 'logged_in' ? (
|
|
<span className="auth-ok" title={authStatus.account}>● {authStatus.account || 'Logged in'}</span>
|
|
) : authStatus?.status === 'pending' ? (
|
|
<span className="auth-pending">⏳ Awaiting login…</span>
|
|
) : (
|
|
<button className="auth-login-btn" onClick={handleLogin} disabled={loginLoading}>
|
|
{loginLoading ? '⏳ Connecting…' : '🔐 Login with Claude Max'}
|
|
</button>
|
|
)}
|
|
</div>
|
|
{systemInfo && (
|
|
<div className="system-status">
|
|
<span className={`status-indicator ${systemInfo.scheduler_running ? 'running' : 'stopped'}`}></span>
|
|
<span>{systemInfo.task_count} tasks · {systemInfo.total_runs || 0} runs</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</header>
|
|
|
|
<main className="app-main">
|
|
{activeView === 'dashboard' && (
|
|
<div className="dashboard-view">
|
|
<h2 className="dashboard-title">System Dashboard</h2>
|
|
<div className="dashboard-grid">
|
|
{systemInfo && (
|
|
<>
|
|
<div className="dash-card">
|
|
<div className="dash-card-icon">📋</div>
|
|
<div className="dash-card-value">{systemInfo.task_count}</div>
|
|
<div className="dash-card-label">Total Tasks</div>
|
|
</div>
|
|
<div className="dash-card">
|
|
<div className="dash-card-icon">✅</div>
|
|
<div className="dash-card-value">{systemInfo.completed_runs || 0}</div>
|
|
<div className="dash-card-label">Completed Runs</div>
|
|
</div>
|
|
<div className="dash-card">
|
|
<div className="dash-card-icon">❌</div>
|
|
<div className="dash-card-value">{systemInfo.failed_runs || 0}</div>
|
|
<div className="dash-card-label">Failed Runs</div>
|
|
</div>
|
|
<div className="dash-card">
|
|
<div className="dash-card-icon">⚡</div>
|
|
<div className="dash-card-value">{systemInfo.running_runs || 0}</div>
|
|
<div className="dash-card-label">Currently Running</div>
|
|
</div>
|
|
<div className="dash-card">
|
|
<div className="dash-card-icon">🔄</div>
|
|
<div className="dash-card-value">{systemInfo.total_runs || 0}</div>
|
|
<div className="dash-card-label">Total Runs Ever</div>
|
|
</div>
|
|
<div className="dash-card">
|
|
<div className="dash-card-icon">{systemInfo.scheduler_running ? '🟢' : '🔴'}</div>
|
|
<div className="dash-card-value">{systemInfo.scheduler_running ? 'Active' : 'Stopped'}</div>
|
|
<div className="dash-card-label">Scheduler</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
<div className="dashboard-section">
|
|
<h3>Claude Authentication</h3>
|
|
<div className="auth-panel">
|
|
{authStatus?.status === 'logged_in' ? (
|
|
<div className="auth-connected">
|
|
<span className="auth-icon">✅</span>
|
|
<div>
|
|
<div className="auth-title">Connected to Claude Max</div>
|
|
<div className="auth-sub">{authStatus.account}</div>
|
|
</div>
|
|
<button className="btn btn-secondary btn-sm" onClick={handleLogout}>Log Out</button>
|
|
</div>
|
|
) : authStatus?.status === 'pending' ? (
|
|
<div className="auth-pending-panel">
|
|
<span className="auth-icon">⏳</span>
|
|
<div>
|
|
<div className="auth-title">Waiting for browser login…</div>
|
|
<div className="auth-sub">Complete the login in the browser tab that opened, then come back here.</div>
|
|
{authStatus.auth_url && (
|
|
<a className="auth-url-link" href={authStatus.auth_url} target="_blank" rel="noreferrer">
|
|
Click here if the browser tab didn't open →
|
|
</a>
|
|
)}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="auth-disconnected">
|
|
<span className="auth-icon">🔐</span>
|
|
<div>
|
|
<div className="auth-title">Not logged in</div>
|
|
<div className="auth-sub">Log in with your Claude Max account to run tasks</div>
|
|
</div>
|
|
<button className="btn btn-primary btn-sm" onClick={handleLogin}>Login with Claude Max</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="dashboard-section">
|
|
<h3>MCP Servers</h3>
|
|
<div className="mcp-panel">
|
|
{mcpServers?.servers?.length > 0 ? (
|
|
<div className="mcp-list">
|
|
{mcpServers.servers.map((srv, i) => (
|
|
<div key={i} className="mcp-row">
|
|
<span className="mcp-status-dot connected"></span>
|
|
<span className="mcp-name">{srv.name || srv}</span>
|
|
<span className="mcp-details">{srv.details || srv.url || srv.type || ''}</span>
|
|
<button className="btn-icon" onClick={() => handleRemoveMcp(srv.name || srv)} title="Remove">✕</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="mcp-empty">
|
|
<p>No MCP servers configured.</p>
|
|
{mcpServers?.raw && <pre className="mcp-raw">{mcpServers.raw}</pre>}
|
|
</div>
|
|
)}
|
|
|
|
{showAddMcp ? (
|
|
<form className="mcp-add-form" onSubmit={handleAddMcp}>
|
|
<div className="mcp-form-row">
|
|
<input type="text" placeholder="Server name" value={mcpForm.name}
|
|
onChange={e => setMcpForm({...mcpForm, name: e.target.value})} required />
|
|
<select value={mcpForm.server_type}
|
|
onChange={e => setMcpForm({...mcpForm, server_type: e.target.value})}>
|
|
<option value="sse">SSE (URL)</option>
|
|
<option value="stdio">Stdio (Command)</option>
|
|
</select>
|
|
</div>
|
|
{mcpForm.server_type === 'sse' ? (
|
|
<input type="url" placeholder="https://mcp-server-url/mcp" value={mcpForm.url}
|
|
onChange={e => setMcpForm({...mcpForm, url: e.target.value})} required />
|
|
) : (
|
|
<input type="text" placeholder="Command (e.g. npx mcp-server)" value={mcpForm.command}
|
|
onChange={e => setMcpForm({...mcpForm, command: e.target.value})} required />
|
|
)}
|
|
<div className="mcp-form-actions">
|
|
<button type="submit" className="btn btn-primary btn-sm">Add Server</button>
|
|
<button type="button" className="btn btn-secondary btn-sm" onClick={() => setShowAddMcp(false)}>Cancel</button>
|
|
</div>
|
|
</form>
|
|
) : (
|
|
<button className="btn btn-secondary btn-sm mcp-add-btn" onClick={() => setShowAddMcp(true)}>+ Add MCP Server</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="dashboard-section">
|
|
<h3>Claude API Usage</h3>
|
|
<div className="usage-grid">
|
|
{usageStats ? (
|
|
<>
|
|
<div className="usage-row">
|
|
<span className="usage-label">Claude Runs (all time)</span>
|
|
<span className="usage-value">{usageStats.claude_runs_total ?? '—'}</span>
|
|
</div>
|
|
<div className="usage-row">
|
|
<span className="usage-label">Active Sessions</span>
|
|
<span className="usage-value">{usageStats.session_count ?? '—'}</span>
|
|
</div>
|
|
<div className="usage-row">
|
|
<span className="usage-label">First Run</span>
|
|
<span className="usage-value">{usageStats.first_run ? new Date(usageStats.first_run).toLocaleString() : '—'}</span>
|
|
</div>
|
|
<div className="usage-row">
|
|
<span className="usage-label">Last Run</span>
|
|
<span className="usage-value">{usageStats.last_run ? new Date(usageStats.last_run).toLocaleString() : '—'}</span>
|
|
</div>
|
|
<div className="usage-row highlight">
|
|
<span className="usage-label">🔄 Next Monthly Reset</span>
|
|
<span className="usage-value">{usageStats.next_reset ? new Date(usageStats.next_reset).toLocaleDateString() : '—'}</span>
|
|
</div>
|
|
<div className="usage-row highlight">
|
|
<span className="usage-label">⏳ Days Until Reset</span>
|
|
<span className="usage-value">{usageStats.days_until_reset ?? '—'}</span>
|
|
</div>
|
|
{usageStats.note && (
|
|
<div className="usage-note">{usageStats.note}</div>
|
|
)}
|
|
</>
|
|
) : (
|
|
<div className="usage-loading">Loading usage stats…</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="dashboard-section">
|
|
<h3>Task Breakdown</h3>
|
|
<div className="task-breakdown">
|
|
{tasks.length === 0 ? (
|
|
<p className="empty-msg">No tasks yet. Create one in the Tasks view.</p>
|
|
) : (
|
|
tasks.map(t => (
|
|
<div key={t.id} className="breakdown-row">
|
|
<span className="breakdown-name">{t.name}</span>
|
|
<span className="breakdown-type">{t.schedule_type}</span>
|
|
<span className={`breakdown-status status-${t.status}`}>{t.status}</span>
|
|
<span className="breakdown-last">{t.last_run ? new Date(t.last_run).toLocaleString() : 'never'}</span>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{activeView === 'tasks' && (<>
|
|
<aside className="sidebar">
|
|
<button
|
|
className="btn btn-primary btn-create"
|
|
onClick={() => setShowForm(true)}
|
|
>
|
|
+ New Task
|
|
</button>
|
|
|
|
<div className="tasks-list">
|
|
<h2>Tasks</h2>
|
|
{tasks.length === 0 ? (
|
|
<p className="empty-state">No tasks yet. Create one to get started.</p>
|
|
) : (
|
|
tasks.map((task) => (
|
|
<div
|
|
key={task.id}
|
|
className={`task-item ${selectedTask?.id === task.id ? 'active' : ''}`}
|
|
onClick={() => setSelectedTask(task)}
|
|
>
|
|
<div className="task-item-header">
|
|
<h3>{task.name}</h3>
|
|
<span
|
|
className="status-badge"
|
|
style={{ backgroundColor: getStatusColor(task.status) }}
|
|
>
|
|
{task.status}
|
|
</span>
|
|
</div>
|
|
<p className="task-schedule">
|
|
{task.schedule_type === 'manual' ? 'Manual' : `${task.schedule_type}: ${task.schedule_value}`}
|
|
</p>
|
|
{task.last_run && (
|
|
<p className="task-last-run">
|
|
Last run: {new Date(task.last_run).toLocaleString()}
|
|
</p>
|
|
)}
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</aside>
|
|
|
|
<section className="content">
|
|
{showForm ? (
|
|
<div className="form-container">
|
|
<h2>Create New Task</h2>
|
|
<form onSubmit={handleCreateTask} className="task-form">
|
|
<div className="form-group">
|
|
<label>Task Name</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
value={formData.name}
|
|
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
|
placeholder="e.g., Daily Backup"
|
|
/>
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
<label>Description</label>
|
|
<textarea
|
|
value={formData.description}
|
|
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
|
placeholder="Optional description"
|
|
rows={2}
|
|
/>
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
<label>Claude Prompt</label>
|
|
<textarea
|
|
required
|
|
value={formData.prompt}
|
|
onChange={(e) => setFormData({ ...formData, prompt: e.target.value })}
|
|
placeholder="What should Claude do? Be specific..."
|
|
rows={6}
|
|
/>
|
|
</div>
|
|
|
|
<div className="form-row">
|
|
<div className="form-group">
|
|
<label>Schedule Type</label>
|
|
<select
|
|
value={formData.schedule_type}
|
|
onChange={(e) => setFormData({ ...formData, schedule_type: e.target.value })}
|
|
>
|
|
<option value="manual">Manual Only</option>
|
|
<option value="recurring">Recurring (Cron)</option>
|
|
<option value="once">Once (Datetime)</option>
|
|
</select>
|
|
</div>
|
|
|
|
{formData.schedule_type === 'recurring' && (
|
|
<div className="form-group">
|
|
<label>Cron Expression</label>
|
|
<input
|
|
type="text"
|
|
value={formData.schedule_value}
|
|
onChange={(e) => setFormData({ ...formData, schedule_value: e.target.value })}
|
|
placeholder="0 9 * * * (daily at 9am)"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{formData.schedule_type === 'once' && (
|
|
<div className="form-group">
|
|
<label>Run At</label>
|
|
<input
|
|
type="datetime-local"
|
|
value={formData.schedule_value}
|
|
onChange={(e) => setFormData({ ...formData, schedule_value: e.target.value })}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="form-group checkbox">
|
|
<input
|
|
type="checkbox"
|
|
checked={formData.enabled}
|
|
onChange={(e) => setFormData({ ...formData, enabled: e.target.checked })}
|
|
/>
|
|
<label>Enabled</label>
|
|
</div>
|
|
|
|
<div className="form-actions">
|
|
<button type="submit" className="btn btn-primary" disabled={loading}>
|
|
{loading ? 'Creating...' : 'Create Task'}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="btn btn-secondary"
|
|
onClick={() => setShowForm(false)}
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
) : selectedTask ? (
|
|
<div className="task-detail">
|
|
<div className="task-detail-header">
|
|
<h2>{selectedTask.name}</h2>
|
|
<div className="task-actions">
|
|
<button
|
|
className="btn btn-success"
|
|
onClick={() => handleRunTask(selectedTask.id)}
|
|
>
|
|
▶ Run Now
|
|
</button>
|
|
<button
|
|
className="btn btn-danger"
|
|
onClick={() => handleDeleteTask(selectedTask.id)}
|
|
>
|
|
🗑 Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="task-meta">
|
|
<div className="meta-item">
|
|
<span className="label">Status:</span>
|
|
<span
|
|
className="value"
|
|
style={{ color: getStatusColor(selectedTask.status) }}
|
|
>
|
|
{selectedTask.status}
|
|
</span>
|
|
</div>
|
|
<div className="meta-item">
|
|
<span className="label">Schedule:</span>
|
|
<span className="value">
|
|
{selectedTask.schedule_type === 'manual'
|
|
? 'Manual'
|
|
: `${selectedTask.schedule_type}: ${selectedTask.schedule_value}`}
|
|
</span>
|
|
</div>
|
|
<div className="meta-item">
|
|
<span className="label">Created:</span>
|
|
<span className="value">
|
|
{new Date(selectedTask.created_at).toLocaleString()}
|
|
</span>
|
|
</div>
|
|
{selectedTask.last_run && (
|
|
<div className="meta-item">
|
|
<span className="label">Last Run:</span>
|
|
<span className="value">
|
|
{new Date(selectedTask.last_run).toLocaleString()}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{selectedTask.description && (
|
|
<div className="task-section">
|
|
<h3>Description</h3>
|
|
<p>{selectedTask.description}</p>
|
|
</div>
|
|
)}
|
|
|
|
<div className="task-section">
|
|
<h3>Prompt</h3>
|
|
<pre className="prompt-display">{selectedTask.prompt}</pre>
|
|
</div>
|
|
|
|
<TaskRuns taskId={selectedTask.id} />
|
|
</div>
|
|
) : (
|
|
<div className="empty-state-main">
|
|
<h2>Select a task to view details</h2>
|
|
<p>Or create a new one to get started</p>
|
|
</div>
|
|
)}
|
|
</section>
|
|
</>)} {/* end activeView === 'tasks' */}
|
|
</main>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const TaskRuns = ({ taskId }) => {
|
|
const [runs, setRuns] = useState([]);
|
|
|
|
useEffect(() => {
|
|
const fetchRuns = async () => {
|
|
try {
|
|
const response = await fetch(`/api/tasks/${taskId}/runs`);
|
|
const data = await response.json();
|
|
setRuns(data);
|
|
} catch (error) {
|
|
console.error('Error fetching runs:', error);
|
|
}
|
|
};
|
|
|
|
fetchRuns();
|
|
const interval = setInterval(fetchRuns, 3000);
|
|
return () => clearInterval(interval);
|
|
}, [taskId]);
|
|
|
|
return (
|
|
<div className="task-section">
|
|
<h3>Run History</h3>
|
|
{runs.length === 0 ? (
|
|
<p className="empty">No runs yet</p>
|
|
) : (
|
|
<div className="runs-list">
|
|
{runs.map((run) => (
|
|
<div key={run.run_id} className="run-item">
|
|
<div className="run-header">
|
|
<span className={`run-status ${run.status}`}>{run.status}</span>
|
|
<span className="run-time">
|
|
{new Date(run.started_at).toLocaleString()}
|
|
</span>
|
|
</div>
|
|
{run.output && (
|
|
<details>
|
|
<summary>Output</summary>
|
|
<pre>{run.output}</pre>
|
|
</details>
|
|
)}
|
|
{run.error && (
|
|
<details>
|
|
<summary>Error</summary>
|
|
<pre className="error">{run.error}</pre>
|
|
</details>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default App;
|