mirror of
https://github.com/leonvanzyl/autocoder.git
synced 2026-01-30 06:12:06 +00:00
Merge pull request #75 from ipodishima/feature/agent-scheduling
feat: add time-based agent scheduling with APScheduler
This commit is contained in:
Leon van Zyl
@@ -1,10 +1,13 @@
|
||||
import { useState } from 'react'
|
||||
import { Play, Square, Loader2, GitBranch } from 'lucide-react'
|
||||
import { Play, Square, Loader2, GitBranch, Clock } from 'lucide-react'
|
||||
import {
|
||||
useStartAgent,
|
||||
useStopAgent,
|
||||
useSettings,
|
||||
} from '../hooks/useProjects'
|
||||
import { useNextScheduledRun } from '../hooks/useSchedules'
|
||||
import { formatNextRun, formatEndTime } from '../lib/timeUtils'
|
||||
import { ScheduleModal } from './ScheduleModal'
|
||||
import type { AgentStatus } from '../lib/types'
|
||||
|
||||
interface AgentControlProps {
|
||||
@@ -21,6 +24,9 @@ export function AgentControl({ projectName, status }: AgentControlProps) {
|
||||
|
||||
const startAgent = useStartAgent(projectName)
|
||||
const stopAgent = useStopAgent(projectName)
|
||||
const { data: nextRun } = useNextScheduledRun(projectName)
|
||||
|
||||
const [showScheduleModal, setShowScheduleModal] = useState(false)
|
||||
|
||||
const isLoading = startAgent.isPending || stopAgent.isPending
|
||||
const isRunning = status === 'running' || status === 'paused'
|
||||
@@ -40,78 +46,113 @@ export function AgentControl({ projectName, status }: AgentControlProps) {
|
||||
const isStopped = status === 'stopped' || status === 'crashed'
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Concurrency slider - visible when stopped (not during loading or running) */}
|
||||
{isStopped && (
|
||||
<div className="flex items-center gap-2">
|
||||
<GitBranch size={16} className={isParallel ? 'text-[var(--color-neo-primary)]' : 'text-gray-400'} />
|
||||
<input
|
||||
type="range"
|
||||
min={1}
|
||||
max={5}
|
||||
value={concurrency}
|
||||
onChange={(e) => setConcurrency(Number(e.target.value))}
|
||||
<>
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Concurrency slider - visible when stopped */}
|
||||
{isStopped && (
|
||||
<div className="flex items-center gap-2">
|
||||
<GitBranch size={16} className={isParallel ? 'text-[var(--color-neo-primary)]' : 'text-gray-400'} />
|
||||
<input
|
||||
type="range"
|
||||
min={1}
|
||||
max={5}
|
||||
value={concurrency}
|
||||
onChange={(e) => setConcurrency(Number(e.target.value))}
|
||||
disabled={isLoading}
|
||||
className="w-16 h-2 accent-[var(--color-neo-primary)] cursor-pointer"
|
||||
title={`${concurrency} concurrent agent${concurrency > 1 ? 's' : ''}`}
|
||||
aria-label="Set number of concurrent agents"
|
||||
/>
|
||||
<span className="text-xs font-bold min-w-[1.5rem] text-center">
|
||||
{concurrency}x
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Show concurrency indicator when running with multiple agents */}
|
||||
{isRunning && isParallel && (
|
||||
<div className="flex items-center gap-1 text-xs text-[var(--color-neo-primary)] font-bold">
|
||||
<GitBranch size={14} />
|
||||
<span>{concurrency}x</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Schedule status display */}
|
||||
{nextRun?.is_currently_running && nextRun.next_end && (
|
||||
<div className="flex items-center gap-2 text-sm text-[var(--color-neo-done)] font-bold">
|
||||
<Clock size={16} className="flex-shrink-0" />
|
||||
<span>Running until {formatEndTime(nextRun.next_end)}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!nextRun?.is_currently_running && nextRun?.next_start && (
|
||||
<div className="flex items-center gap-2 text-sm text-gray-900 dark:text-white font-bold">
|
||||
<Clock size={16} className="flex-shrink-0" />
|
||||
<span>Next: {formatNextRun(nextRun.next_start)}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Start/Stop button */}
|
||||
{isLoadingStatus ? (
|
||||
<button
|
||||
disabled
|
||||
className="neo-btn text-sm py-2 px-3 opacity-50 cursor-not-allowed"
|
||||
title="Loading agent status..."
|
||||
aria-label="Loading agent status"
|
||||
>
|
||||
<Loader2 size={18} className="animate-spin" />
|
||||
</button>
|
||||
) : isStopped ? (
|
||||
<button
|
||||
onClick={handleStart}
|
||||
disabled={isLoading}
|
||||
className="w-16 h-2 accent-[var(--color-neo-primary)] cursor-pointer"
|
||||
title={`${concurrency} concurrent agent${concurrency > 1 ? 's' : ''}`}
|
||||
aria-label="Set number of concurrent agents"
|
||||
/>
|
||||
<span className="text-xs font-bold min-w-[1.5rem] text-center">
|
||||
{concurrency}x
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
className={`neo-btn text-sm py-2 px-3 ${
|
||||
yoloMode ? 'neo-btn-yolo' : 'neo-btn-success'
|
||||
}`}
|
||||
title={yoloMode ? 'Start Agent (YOLO Mode)' : 'Start Agent'}
|
||||
aria-label={yoloMode ? 'Start Agent in YOLO Mode' : 'Start Agent'}
|
||||
>
|
||||
{isLoading ? (
|
||||
<Loader2 size={18} className="animate-spin" />
|
||||
) : (
|
||||
<Play size={18} />
|
||||
)}
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={handleStop}
|
||||
disabled={isLoading}
|
||||
className={`neo-btn text-sm py-2 px-3 ${
|
||||
yoloMode ? 'neo-btn-yolo' : 'neo-btn-danger'
|
||||
}`}
|
||||
title={yoloMode ? 'Stop Agent (YOLO Mode)' : 'Stop Agent'}
|
||||
aria-label={yoloMode ? 'Stop Agent in YOLO Mode' : 'Stop Agent'}
|
||||
>
|
||||
{isLoading ? (
|
||||
<Loader2 size={18} className="animate-spin" />
|
||||
) : (
|
||||
<Square size={18} />
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Show concurrency indicator when running with multiple agents */}
|
||||
{isRunning && isParallel && (
|
||||
<div className="flex items-center gap-1 text-xs text-[var(--color-neo-primary)] font-bold">
|
||||
<GitBranch size={14} />
|
||||
<span>{concurrency}x</span>
|
||||
</div>
|
||||
)}
|
||||
{/* Clock button to open schedule modal */}
|
||||
<button
|
||||
onClick={() => setShowScheduleModal(true)}
|
||||
className="neo-btn text-sm py-2 px-3"
|
||||
title="Manage schedules"
|
||||
aria-label="Manage agent schedules"
|
||||
>
|
||||
<Clock size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{isLoadingStatus ? (
|
||||
<button
|
||||
disabled
|
||||
className="neo-btn text-sm py-2 px-3 opacity-50 cursor-not-allowed"
|
||||
title="Loading agent status..."
|
||||
aria-label="Loading agent status"
|
||||
>
|
||||
<Loader2 size={18} className="animate-spin" />
|
||||
</button>
|
||||
) : isStopped ? (
|
||||
<button
|
||||
onClick={handleStart}
|
||||
disabled={isLoading}
|
||||
className={`neo-btn text-sm py-2 px-3 ${
|
||||
yoloMode ? 'neo-btn-yolo' : 'neo-btn-success'
|
||||
}`}
|
||||
title={yoloMode ? 'Start Agent (YOLO Mode)' : 'Start Agent'}
|
||||
aria-label={yoloMode ? 'Start Agent in YOLO Mode' : 'Start Agent'}
|
||||
>
|
||||
{isLoading ? (
|
||||
<Loader2 size={18} className="animate-spin" />
|
||||
) : (
|
||||
<Play size={18} />
|
||||
)}
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={handleStop}
|
||||
disabled={isLoading}
|
||||
className={`neo-btn text-sm py-2 px-3 ${
|
||||
yoloMode ? 'neo-btn-yolo' : 'neo-btn-danger'
|
||||
}`}
|
||||
title={yoloMode ? 'Stop Agent (YOLO Mode)' : 'Stop Agent'}
|
||||
aria-label={yoloMode ? 'Stop Agent in YOLO Mode' : 'Stop Agent'}
|
||||
>
|
||||
{isLoading ? (
|
||||
<Loader2 size={18} className="animate-spin" />
|
||||
) : (
|
||||
<Square size={18} />
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{/* Schedule Modal */}
|
||||
<ScheduleModal
|
||||
projectName={projectName}
|
||||
isOpen={showScheduleModal}
|
||||
onClose={() => setShowScheduleModal(false)}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
442
ui/src/components/ScheduleModal.tsx
Normal file
442
ui/src/components/ScheduleModal.tsx
Normal file
@@ -0,0 +1,442 @@
|
||||
/**
|
||||
* Schedule Modal Component
|
||||
*
|
||||
* Modal for managing agent schedules (create, edit, delete).
|
||||
* Follows neobrutalism design patterns from SettingsModal.
|
||||
*/
|
||||
|
||||
import { useState, useEffect, useRef } from 'react'
|
||||
import { Clock, GitBranch, Trash2, X } from 'lucide-react'
|
||||
import {
|
||||
useSchedules,
|
||||
useCreateSchedule,
|
||||
useDeleteSchedule,
|
||||
useToggleSchedule,
|
||||
} from '../hooks/useSchedules'
|
||||
import {
|
||||
utcToLocal,
|
||||
localToUTC,
|
||||
formatDuration,
|
||||
DAYS,
|
||||
isDayActive,
|
||||
toggleDay,
|
||||
} from '../lib/timeUtils'
|
||||
import type { ScheduleCreate } from '../lib/types'
|
||||
|
||||
interface ScheduleModalProps {
|
||||
projectName: string
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export function ScheduleModal({ projectName, isOpen, onClose }: ScheduleModalProps) {
|
||||
const modalRef = useRef<HTMLDivElement>(null)
|
||||
const firstFocusableRef = useRef<HTMLButtonElement>(null)
|
||||
|
||||
// Queries and mutations
|
||||
const { data: schedulesData, isLoading } = useSchedules(projectName)
|
||||
const createSchedule = useCreateSchedule(projectName)
|
||||
const deleteSchedule = useDeleteSchedule(projectName)
|
||||
const toggleSchedule = useToggleSchedule(projectName)
|
||||
|
||||
// Form state for new schedule
|
||||
const [newSchedule, setNewSchedule] = useState<ScheduleCreate>({
|
||||
start_time: '22:00',
|
||||
duration_minutes: 240,
|
||||
days_of_week: 31, // Weekdays by default
|
||||
enabled: true,
|
||||
yolo_mode: false,
|
||||
model: null,
|
||||
max_concurrency: 3,
|
||||
})
|
||||
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
// Focus trap
|
||||
useEffect(() => {
|
||||
if (isOpen && firstFocusableRef.current) {
|
||||
firstFocusableRef.current.focus()
|
||||
}
|
||||
}, [isOpen])
|
||||
|
||||
// Keyboard navigation
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (!isOpen) return
|
||||
|
||||
if (e.key === 'Escape') {
|
||||
onClose()
|
||||
}
|
||||
|
||||
if (e.key === 'Tab' && modalRef.current) {
|
||||
const focusableElements = modalRef.current.querySelectorAll<HTMLElement>(
|
||||
'button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
|
||||
)
|
||||
const firstElement = focusableElements[0]
|
||||
const lastElement = focusableElements[focusableElements.length - 1]
|
||||
|
||||
if (e.shiftKey && document.activeElement === firstElement) {
|
||||
e.preventDefault()
|
||||
lastElement?.focus()
|
||||
} else if (!e.shiftKey && document.activeElement === lastElement) {
|
||||
e.preventDefault()
|
||||
firstElement?.focus()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', handleKeyDown)
|
||||
return () => document.removeEventListener('keydown', handleKeyDown)
|
||||
}, [isOpen, onClose])
|
||||
|
||||
if (!isOpen) return null
|
||||
|
||||
const schedules = schedulesData?.schedules || []
|
||||
|
||||
const handleCreateSchedule = async () => {
|
||||
try {
|
||||
setError(null)
|
||||
|
||||
// Validate
|
||||
if (newSchedule.days_of_week === 0) {
|
||||
setError('Please select at least one day')
|
||||
return
|
||||
}
|
||||
|
||||
// Validate duration
|
||||
if (newSchedule.duration_minutes < 1 || newSchedule.duration_minutes > 1440) {
|
||||
setError('Duration must be between 1 and 1440 minutes')
|
||||
return
|
||||
}
|
||||
|
||||
// Convert local time to UTC
|
||||
const scheduleToCreate = {
|
||||
...newSchedule,
|
||||
start_time: localToUTC(newSchedule.start_time),
|
||||
}
|
||||
|
||||
await createSchedule.mutateAsync(scheduleToCreate)
|
||||
|
||||
// Reset form
|
||||
setNewSchedule({
|
||||
start_time: '22:00',
|
||||
duration_minutes: 240,
|
||||
days_of_week: 31,
|
||||
enabled: true,
|
||||
yolo_mode: false,
|
||||
model: null,
|
||||
max_concurrency: 3,
|
||||
})
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to create schedule')
|
||||
}
|
||||
}
|
||||
|
||||
const handleToggleSchedule = async (scheduleId: number, enabled: boolean) => {
|
||||
try {
|
||||
setError(null)
|
||||
await toggleSchedule.mutateAsync({ scheduleId, enabled: !enabled })
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to toggle schedule')
|
||||
}
|
||||
}
|
||||
|
||||
const handleDeleteSchedule = async (scheduleId: number) => {
|
||||
if (!confirm('Are you sure you want to delete this schedule?')) return
|
||||
|
||||
try {
|
||||
setError(null)
|
||||
await deleteSchedule.mutateAsync(scheduleId)
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to delete schedule')
|
||||
}
|
||||
}
|
||||
|
||||
const handleToggleDay = (dayBit: number) => {
|
||||
setNewSchedule((prev) => ({
|
||||
...prev,
|
||||
days_of_week: toggleDay(prev.days_of_week, dayBit),
|
||||
}))
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="neo-modal-backdrop"
|
||||
onClick={(e) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
onClose()
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div ref={modalRef} className="neo-modal p-6" style={{ maxWidth: '650px', maxHeight: '80vh' }}>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock size={24} className="text-[var(--color-neo-progress)]" />
|
||||
<h2 className="text-xl font-bold text-gray-900 dark:text-white">Agent Schedules</h2>
|
||||
</div>
|
||||
<button
|
||||
ref={firstFocusableRef}
|
||||
onClick={onClose}
|
||||
className="neo-btn neo-btn-ghost p-2"
|
||||
aria-label="Close modal"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Error display */}
|
||||
{error && (
|
||||
<div className="mb-4 p-3 border-2 border-red-500 bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200 rounded">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Loading state */}
|
||||
{isLoading && (
|
||||
<div className="text-center py-8 text-gray-600 dark:text-gray-300">
|
||||
Loading schedules...
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Existing schedules */}
|
||||
{!isLoading && schedules.length > 0 && (
|
||||
<div className="space-y-3 mb-6 max-h-[300px] overflow-y-auto">
|
||||
{schedules.map((schedule) => {
|
||||
const localTime = utcToLocal(schedule.start_time)
|
||||
const duration = formatDuration(schedule.duration_minutes)
|
||||
|
||||
return (
|
||||
<div
|
||||
key={schedule.id}
|
||||
className="neo-card p-4 flex items-start justify-between gap-4"
|
||||
>
|
||||
<div className="flex-1">
|
||||
{/* Time and duration */}
|
||||
<div className="flex items-baseline gap-2 mb-2">
|
||||
<span className="text-lg font-bold text-gray-900 dark:text-white">{localTime}</span>
|
||||
<span className="text-sm text-gray-600 dark:text-gray-300">
|
||||
for {duration}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Days */}
|
||||
<div className="flex gap-1 mb-2">
|
||||
{DAYS.map((day) => {
|
||||
const isActive = isDayActive(schedule.days_of_week, day.bit)
|
||||
return (
|
||||
<span
|
||||
key={day.label}
|
||||
className={`text-xs px-2 py-1 rounded border-2 ${
|
||||
isActive
|
||||
? 'border-[var(--color-neo-progress)] bg-[var(--color-neo-progress)] text-white font-bold'
|
||||
: 'border-gray-300 dark:border-gray-600 text-gray-400 dark:text-gray-500'
|
||||
}`}
|
||||
>
|
||||
{day.label}
|
||||
</span>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Metadata */}
|
||||
<div className="flex gap-3 text-xs text-gray-600 dark:text-gray-300">
|
||||
{schedule.yolo_mode && (
|
||||
<span className="font-bold text-yellow-600">⚡ YOLO mode</span>
|
||||
)}
|
||||
<span className="flex items-center gap-1">
|
||||
<GitBranch size={12} />
|
||||
{schedule.max_concurrency}x
|
||||
</span>
|
||||
{schedule.model && <span>Model: {schedule.model}</span>}
|
||||
{schedule.crash_count > 0 && (
|
||||
<span className="text-red-600">Crashes: {schedule.crash_count}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Enable/disable toggle */}
|
||||
<button
|
||||
onClick={() => handleToggleSchedule(schedule.id, schedule.enabled)}
|
||||
className={`neo-btn neo-btn-ghost px-3 py-1 text-xs font-bold ${
|
||||
schedule.enabled
|
||||
? 'text-[var(--color-neo-done)]'
|
||||
: 'text-[var(--color-neo-text-secondary)]'
|
||||
}`}
|
||||
disabled={toggleSchedule.isPending}
|
||||
>
|
||||
{schedule.enabled ? 'Enabled' : 'Disabled'}
|
||||
</button>
|
||||
|
||||
{/* Delete button */}
|
||||
<button
|
||||
onClick={() => handleDeleteSchedule(schedule.id)}
|
||||
className="neo-btn neo-btn-ghost p-2 text-red-600 hover:bg-red-50"
|
||||
disabled={deleteSchedule.isPending}
|
||||
aria-label="Delete schedule"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Empty state */}
|
||||
{!isLoading && schedules.length === 0 && (
|
||||
<div className="text-center py-6 text-gray-600 dark:text-gray-300 mb-6">
|
||||
<Clock size={48} className="mx-auto mb-2 opacity-50 text-gray-400 dark:text-gray-500" />
|
||||
<p>No schedules configured yet</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Divider */}
|
||||
<div className="border-t-2 border-gray-200 dark:border-gray-700 my-6"></div>
|
||||
|
||||
{/* Add new schedule form */}
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-gray-900 dark:text-white mb-4">Add New Schedule</h3>
|
||||
|
||||
{/* Time and duration */}
|
||||
<div className="grid grid-cols-2 gap-4 mb-4">
|
||||
<div>
|
||||
<label className="block text-sm font-bold text-gray-700 dark:text-gray-200 mb-2">Start Time (Local)</label>
|
||||
<input
|
||||
type="time"
|
||||
value={newSchedule.start_time}
|
||||
onChange={(e) =>
|
||||
setNewSchedule((prev) => ({ ...prev, start_time: e.target.value }))
|
||||
}
|
||||
className="neo-input w-full"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-bold text-gray-700 dark:text-gray-200 mb-2">Duration (minutes)</label>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
max="1440"
|
||||
value={newSchedule.duration_minutes}
|
||||
onChange={(e) => {
|
||||
const parsed = parseInt(e.target.value, 10)
|
||||
const value = isNaN(parsed) ? 1 : Math.max(1, Math.min(1440, parsed))
|
||||
setNewSchedule((prev) => ({
|
||||
...prev,
|
||||
duration_minutes: value,
|
||||
}))
|
||||
}}
|
||||
className="neo-input w-full"
|
||||
/>
|
||||
<div className="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
||||
{formatDuration(newSchedule.duration_minutes)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Days of week */}
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-bold text-gray-700 dark:text-gray-200 mb-2">Days</label>
|
||||
<div className="flex gap-2">
|
||||
{DAYS.map((day) => {
|
||||
const isActive = isDayActive(newSchedule.days_of_week, day.bit)
|
||||
return (
|
||||
<button
|
||||
key={day.label}
|
||||
onClick={() => handleToggleDay(day.bit)}
|
||||
className={`neo-btn px-3 py-2 text-sm ${
|
||||
isActive
|
||||
? 'bg-[var(--color-neo-progress)] text-white border-[var(--color-neo-progress)]'
|
||||
: 'neo-btn-ghost'
|
||||
}`}
|
||||
>
|
||||
{day.label}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* YOLO mode toggle */}
|
||||
<div className="mb-4">
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={newSchedule.yolo_mode}
|
||||
onChange={(e) =>
|
||||
setNewSchedule((prev) => ({ ...prev, yolo_mode: e.target.checked }))
|
||||
}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<span className="text-sm font-bold text-gray-700 dark:text-gray-200">YOLO Mode (skip testing)</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Concurrency slider */}
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-bold text-gray-700 dark:text-gray-200 mb-2">
|
||||
Concurrent Agents (1-5)
|
||||
</label>
|
||||
<div className="flex items-center gap-3">
|
||||
<GitBranch
|
||||
size={16}
|
||||
className={newSchedule.max_concurrency > 1 ? 'text-[var(--color-neo-primary)]' : 'text-gray-400'}
|
||||
/>
|
||||
<input
|
||||
type="range"
|
||||
min={1}
|
||||
max={5}
|
||||
value={newSchedule.max_concurrency}
|
||||
onChange={(e) =>
|
||||
setNewSchedule((prev) => ({ ...prev, max_concurrency: Number(e.target.value) }))
|
||||
}
|
||||
className="flex-1 h-2 accent-[var(--color-neo-primary)] cursor-pointer"
|
||||
title={`${newSchedule.max_concurrency} concurrent agent${newSchedule.max_concurrency > 1 ? 's' : ''}`}
|
||||
aria-label="Set number of concurrent agents"
|
||||
/>
|
||||
<span className="text-sm font-bold min-w-[2rem] text-center text-gray-900 dark:text-white">
|
||||
{newSchedule.max_concurrency}x
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
||||
Run {newSchedule.max_concurrency} agent{newSchedule.max_concurrency > 1 ? 's' : ''} in parallel for faster feature completion
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Model selection (optional) */}
|
||||
<div className="mb-6">
|
||||
<label className="block text-sm font-bold text-gray-700 dark:text-gray-200 mb-2">
|
||||
Model (optional, defaults to global setting)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="e.g., claude-3-5-sonnet-20241022"
|
||||
value={newSchedule.model || ''}
|
||||
onChange={(e) =>
|
||||
setNewSchedule((prev) => ({ ...prev, model: e.target.value || null }))
|
||||
}
|
||||
className="neo-input w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex justify-end gap-3">
|
||||
<button onClick={onClose} className="neo-btn neo-btn-ghost">
|
||||
Close
|
||||
</button>
|
||||
<button
|
||||
onClick={handleCreateSchedule}
|
||||
disabled={createSchedule.isPending || newSchedule.days_of_week === 0}
|
||||
className="neo-btn neo-btn-primary"
|
||||
>
|
||||
{createSchedule.isPending ? 'Creating...' : 'Create Schedule'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -359,7 +359,7 @@ export function Terminal({ projectName, terminalId, isActive }: TerminalProps) {
|
||||
// when the container is first rendered.
|
||||
|
||||
// Handle keyboard input
|
||||
terminal.onData((data) => {
|
||||
terminal.onData((data: string) => {
|
||||
// If shell has exited, reconnect on any key
|
||||
// Use ref to avoid re-creating this callback when hasExited changes
|
||||
if (hasExitedRef.current) {
|
||||
@@ -378,7 +378,7 @@ export function Terminal({ projectName, terminalId, isActive }: TerminalProps) {
|
||||
})
|
||||
|
||||
// Handle terminal resize
|
||||
terminal.onResize(({ cols, rows }) => {
|
||||
terminal.onResize(({ cols, rows }: { cols: number; rows: number }) => {
|
||||
sendResize(cols, rows)
|
||||
})
|
||||
}, [encodeBase64, sendMessage, sendResize])
|
||||
|
||||
@@ -143,6 +143,8 @@ export function useStopAgent(projectName: string) {
|
||||
mutationFn: () => api.stopAgent(projectName),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['agent-status', projectName] })
|
||||
// Invalidate schedule status to reflect manual stop override
|
||||
queryClient.invalidateQueries({ queryKey: ['nextRun', projectName] })
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
112
ui/src/hooks/useSchedules.ts
Normal file
112
ui/src/hooks/useSchedules.ts
Normal file
@@ -0,0 +1,112 @@
|
||||
/**
|
||||
* React Query hooks for schedule data
|
||||
*/
|
||||
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import * as api from '../lib/api'
|
||||
import type { ScheduleCreate, ScheduleUpdate } from '../lib/types'
|
||||
|
||||
// ============================================================================
|
||||
// Schedules
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Hook to fetch all schedules for a project.
|
||||
*/
|
||||
export function useSchedules(projectName: string | null) {
|
||||
return useQuery({
|
||||
queryKey: ['schedules', projectName],
|
||||
queryFn: () => api.listSchedules(projectName!),
|
||||
enabled: !!projectName,
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Hook to fetch a single schedule.
|
||||
*/
|
||||
export function useSchedule(projectName: string | null, scheduleId: number | null) {
|
||||
return useQuery({
|
||||
queryKey: ['schedule', projectName, scheduleId],
|
||||
queryFn: () => api.getSchedule(projectName!, scheduleId!),
|
||||
enabled: !!projectName && !!scheduleId,
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Hook to create a new schedule.
|
||||
*/
|
||||
export function useCreateSchedule(projectName: string) {
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
return useMutation({
|
||||
mutationFn: (schedule: ScheduleCreate) => api.createSchedule(projectName, schedule),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['schedules', projectName] })
|
||||
queryClient.invalidateQueries({ queryKey: ['nextRun', projectName] })
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Hook to update an existing schedule.
|
||||
*/
|
||||
export function useUpdateSchedule(projectName: string) {
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
return useMutation({
|
||||
mutationFn: ({ scheduleId, update }: { scheduleId: number; update: ScheduleUpdate }) =>
|
||||
api.updateSchedule(projectName, scheduleId, update),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['schedules', projectName] })
|
||||
queryClient.invalidateQueries({ queryKey: ['nextRun', projectName] })
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Hook to delete a schedule.
|
||||
*/
|
||||
export function useDeleteSchedule(projectName: string) {
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
return useMutation({
|
||||
mutationFn: (scheduleId: number) => api.deleteSchedule(projectName, scheduleId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['schedules', projectName] })
|
||||
queryClient.invalidateQueries({ queryKey: ['nextRun', projectName] })
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Hook to toggle a schedule's enabled state.
|
||||
*/
|
||||
export function useToggleSchedule(projectName: string) {
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
return useMutation({
|
||||
mutationFn: ({ scheduleId, enabled }: { scheduleId: number; enabled: boolean }) =>
|
||||
api.updateSchedule(projectName, scheduleId, { enabled }),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['schedules', projectName] })
|
||||
queryClient.invalidateQueries({ queryKey: ['nextRun', projectName] })
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Next Run
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Hook to fetch the next scheduled run for a project.
|
||||
* Polls every 30 seconds to keep status up-to-date.
|
||||
*/
|
||||
export function useNextScheduledRun(projectName: string | null) {
|
||||
return useQuery({
|
||||
queryKey: ['nextRun', projectName],
|
||||
queryFn: () => api.getNextScheduledRun(projectName!),
|
||||
enabled: !!projectName,
|
||||
refetchInterval: 30000, // Refresh every 30 seconds
|
||||
})
|
||||
}
|
||||
@@ -26,6 +26,11 @@ import type {
|
||||
DevServerStatusResponse,
|
||||
DevServerConfig,
|
||||
TerminalInfo,
|
||||
Schedule,
|
||||
ScheduleCreate,
|
||||
ScheduleUpdate,
|
||||
ScheduleListResponse,
|
||||
NextRunResponse,
|
||||
} from './types'
|
||||
|
||||
const API_BASE = '/api'
|
||||
@@ -44,6 +49,11 @@ async function fetchJSON<T>(url: string, options?: RequestInit): Promise<T> {
|
||||
throw new Error(error.detail || `HTTP ${response.status}`)
|
||||
}
|
||||
|
||||
// Handle 204 No Content responses
|
||||
if (response.status === 204) {
|
||||
return undefined as T
|
||||
}
|
||||
|
||||
return response.json()
|
||||
}
|
||||
|
||||
@@ -441,3 +451,52 @@ export async function deleteTerminal(
|
||||
method: 'DELETE',
|
||||
})
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Schedule API
|
||||
// ============================================================================
|
||||
|
||||
export async function listSchedules(projectName: string): Promise<ScheduleListResponse> {
|
||||
return fetchJSON(`/projects/${encodeURIComponent(projectName)}/schedules`)
|
||||
}
|
||||
|
||||
export async function createSchedule(
|
||||
projectName: string,
|
||||
schedule: ScheduleCreate
|
||||
): Promise<Schedule> {
|
||||
return fetchJSON(`/projects/${encodeURIComponent(projectName)}/schedules`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(schedule),
|
||||
})
|
||||
}
|
||||
|
||||
export async function getSchedule(
|
||||
projectName: string,
|
||||
scheduleId: number
|
||||
): Promise<Schedule> {
|
||||
return fetchJSON(`/projects/${encodeURIComponent(projectName)}/schedules/${scheduleId}`)
|
||||
}
|
||||
|
||||
export async function updateSchedule(
|
||||
projectName: string,
|
||||
scheduleId: number,
|
||||
update: ScheduleUpdate
|
||||
): Promise<Schedule> {
|
||||
return fetchJSON(`/projects/${encodeURIComponent(projectName)}/schedules/${scheduleId}`, {
|
||||
method: 'PATCH',
|
||||
body: JSON.stringify(update),
|
||||
})
|
||||
}
|
||||
|
||||
export async function deleteSchedule(
|
||||
projectName: string,
|
||||
scheduleId: number
|
||||
): Promise<void> {
|
||||
await fetchJSON(`/projects/${encodeURIComponent(projectName)}/schedules/${scheduleId}`, {
|
||||
method: 'DELETE',
|
||||
})
|
||||
}
|
||||
|
||||
export async function getNextScheduledRun(projectName: string): Promise<NextRunResponse> {
|
||||
return fetchJSON(`/projects/${encodeURIComponent(projectName)}/schedules/next`)
|
||||
}
|
||||
|
||||
155
ui/src/lib/timeUtils.ts
Normal file
155
ui/src/lib/timeUtils.ts
Normal file
@@ -0,0 +1,155 @@
|
||||
/**
|
||||
* Time Zone Utilities
|
||||
* ====================
|
||||
*
|
||||
* Utilities for converting between UTC and local time for schedule management.
|
||||
* All times in the database are stored in UTC and displayed in the user's local timezone.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Convert "HH:MM" UTC time to user's local time.
|
||||
* @param utcTime Time string in "HH:MM" format (UTC)
|
||||
* @returns Time string in "HH:MM" format (local)
|
||||
*/
|
||||
export function utcToLocal(utcTime: string): string {
|
||||
const [hours, minutes] = utcTime.split(':').map(Number)
|
||||
const utcDate = new Date()
|
||||
utcDate.setUTCHours(hours, minutes, 0, 0)
|
||||
|
||||
const localHours = utcDate.getHours()
|
||||
const localMinutes = utcDate.getMinutes()
|
||||
|
||||
return `${String(localHours).padStart(2, '0')}:${String(localMinutes).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert "HH:MM" local time to UTC for storage.
|
||||
* @param localTime Time string in "HH:MM" format (local)
|
||||
* @returns Time string in "HH:MM" format (UTC)
|
||||
*/
|
||||
export function localToUTC(localTime: string): string {
|
||||
const [hours, minutes] = localTime.split(':').map(Number)
|
||||
const localDate = new Date()
|
||||
localDate.setHours(hours, minutes, 0, 0)
|
||||
|
||||
const utcHours = localDate.getUTCHours()
|
||||
const utcMinutes = localDate.getUTCMinutes()
|
||||
|
||||
return `${String(utcHours).padStart(2, '0')}:${String(utcMinutes).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
/**
|
||||
* Format a duration in minutes to a human-readable string.
|
||||
* @param minutes Duration in minutes
|
||||
* @returns Formatted string (e.g., "4h", "1h 30m", "30m")
|
||||
*/
|
||||
export function formatDuration(minutes: number): string {
|
||||
const hours = Math.floor(minutes / 60)
|
||||
const mins = minutes % 60
|
||||
|
||||
if (hours === 0) return `${mins}m`
|
||||
if (mins === 0) return `${hours}h`
|
||||
return `${hours}h ${mins}m`
|
||||
}
|
||||
|
||||
/**
|
||||
* Format an ISO datetime string to a human-readable next run format.
|
||||
* Uses the browser's locale settings for 12/24-hour format.
|
||||
* @param isoString ISO datetime string in UTC
|
||||
* @returns Formatted string (e.g., "22:00", "10:00 PM", "Mon 22:00")
|
||||
*/
|
||||
export function formatNextRun(isoString: string): string {
|
||||
const date = new Date(isoString)
|
||||
const now = new Date()
|
||||
const diffMs = date.getTime() - now.getTime()
|
||||
const diffHours = Math.floor(diffMs / (1000 * 60 * 60))
|
||||
|
||||
if (diffHours < 24) {
|
||||
// Same day or within 24 hours - just show time
|
||||
return date.toLocaleTimeString([], {
|
||||
hour: 'numeric',
|
||||
minute: '2-digit'
|
||||
})
|
||||
}
|
||||
|
||||
// Further out - show day and time
|
||||
return date.toLocaleString([], {
|
||||
weekday: 'short',
|
||||
hour: 'numeric',
|
||||
minute: '2-digit'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Format an ISO datetime string to show the end time.
|
||||
* Uses the browser's locale settings for 12/24-hour format.
|
||||
* @param isoString ISO datetime string in UTC
|
||||
* @returns Formatted string (e.g., "14:00", "2:00 PM")
|
||||
*/
|
||||
export function formatEndTime(isoString: string): string {
|
||||
const date = new Date(isoString)
|
||||
return date.toLocaleTimeString([], {
|
||||
hour: 'numeric',
|
||||
minute: '2-digit'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Day bit values for the days_of_week bitfield.
|
||||
*/
|
||||
export const DAY_BITS = {
|
||||
Mon: 1,
|
||||
Tue: 2,
|
||||
Wed: 4,
|
||||
Thu: 8,
|
||||
Fri: 16,
|
||||
Sat: 32,
|
||||
Sun: 64,
|
||||
} as const
|
||||
|
||||
/**
|
||||
* Array of days with their labels and bit values.
|
||||
*/
|
||||
export const DAYS = [
|
||||
{ label: 'Mon', bit: 1 },
|
||||
{ label: 'Tue', bit: 2 },
|
||||
{ label: 'Wed', bit: 4 },
|
||||
{ label: 'Thu', bit: 8 },
|
||||
{ label: 'Fri', bit: 16 },
|
||||
{ label: 'Sat', bit: 32 },
|
||||
{ label: 'Sun', bit: 64 },
|
||||
] as const
|
||||
|
||||
/**
|
||||
* Check if a day is active in a bitfield.
|
||||
* @param bitfield The days_of_week bitfield
|
||||
* @param dayBit The bit value for the day to check
|
||||
* @returns True if the day is active
|
||||
*/
|
||||
export function isDayActive(bitfield: number, dayBit: number): boolean {
|
||||
return (bitfield & dayBit) !== 0
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle a day in a bitfield.
|
||||
* @param bitfield The current days_of_week bitfield
|
||||
* @param dayBit The bit value for the day to toggle
|
||||
* @returns New bitfield with the day toggled
|
||||
*/
|
||||
export function toggleDay(bitfield: number, dayBit: number): number {
|
||||
return bitfield ^ dayBit
|
||||
}
|
||||
|
||||
/**
|
||||
* Get human-readable description of active days.
|
||||
* @param bitfield The days_of_week bitfield
|
||||
* @returns Description string (e.g., "Every day", "Weekdays", "Mon, Wed, Fri")
|
||||
*/
|
||||
export function formatDaysDescription(bitfield: number): string {
|
||||
if (bitfield === 127) return 'Every day'
|
||||
if (bitfield === 31) return 'Weekdays'
|
||||
if (bitfield === 96) return 'Weekends'
|
||||
|
||||
const activeDays = DAYS.filter(d => isDayActive(bitfield, d.bit))
|
||||
return activeDays.map(d => d.label).join(', ')
|
||||
}
|
||||
@@ -489,3 +489,53 @@ export interface SettingsUpdate {
|
||||
testing_agent_ratio?: number
|
||||
count_testing_in_concurrency?: boolean
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Schedule Types
|
||||
// ============================================================================
|
||||
|
||||
export interface Schedule {
|
||||
id: number
|
||||
project_name: string
|
||||
start_time: string // "HH:MM" in UTC
|
||||
duration_minutes: number
|
||||
days_of_week: number // Bitfield: Mon=1, Tue=2, Wed=4, Thu=8, Fri=16, Sat=32, Sun=64
|
||||
enabled: boolean
|
||||
yolo_mode: boolean
|
||||
model: string | null
|
||||
max_concurrency: number // 1-5 concurrent agents
|
||||
crash_count: number
|
||||
created_at: string
|
||||
}
|
||||
|
||||
export interface ScheduleCreate {
|
||||
start_time: string // "HH:MM" format (local time, will be stored as UTC)
|
||||
duration_minutes: number
|
||||
days_of_week: number
|
||||
enabled: boolean
|
||||
yolo_mode: boolean
|
||||
model: string | null
|
||||
max_concurrency: number // 1-5 concurrent agents
|
||||
}
|
||||
|
||||
export interface ScheduleUpdate {
|
||||
start_time?: string
|
||||
duration_minutes?: number
|
||||
days_of_week?: number
|
||||
enabled?: boolean
|
||||
yolo_mode?: boolean
|
||||
model?: string | null
|
||||
max_concurrency?: number
|
||||
}
|
||||
|
||||
export interface ScheduleListResponse {
|
||||
schedules: Schedule[]
|
||||
}
|
||||
|
||||
export interface NextRunResponse {
|
||||
has_schedules: boolean
|
||||
next_start: string | null // ISO datetime in UTC
|
||||
next_end: string | null // ISO datetime in UTC (latest end if overlapping)
|
||||
is_currently_running: boolean
|
||||
active_schedule_count: number
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user