import React, { useState } from 'react'
interface ContractCreateModalProps {
isOpen: boolean
onClose: () => void
onCreated: () => void
}
interface CreateContractForm {
name: string
description: string
contractType: string
redTeamEnabled: boolean
redTeamPrompt: string
}
export function ContractCreateModal({ isOpen, onClose, onCreated }: ContractCreateModalProps) {
const [form, setForm] = useState<CreateContractForm>({
name: '',
description: '',
contractType: 'simple',
redTeamEnabled: false,
redTeamPrompt: '',
})
const [loading, setLoading] = useState(false)
const [error, setError] = useState<string | null>(null)
if (!isOpen) return null
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
setLoading(true)
setError(null)
try {
const response = await fetch('/api/v1/contracts', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: form.name,
description: form.description || undefined,
contract_type: form.contractType,
red_team_enabled: form.redTeamEnabled,
red_team_prompt: form.redTeamEnabled && form.redTeamPrompt ? form.redTeamPrompt : undefined,
}),
})
if (!response.ok) {
const errorData = await response.json().catch(() => ({}))
throw new Error(errorData.message || `Failed to create contract: ${response.statusText}`)
}
// Reset form and close modal
setForm({
name: '',
description: '',
contractType: 'simple',
redTeamEnabled: false,
redTeamPrompt: '',
})
onCreated()
onClose()
} catch (err) {
setError(err instanceof Error ? err.message : 'Unknown error')
} finally {
setLoading(false)
}
}
return (
<div className="modal-overlay" onClick={onClose}>
<div className="settings-modal contract-create-modal" onClick={(e) => e.stopPropagation()}>
<div className="modal-header">
<h2 className="modal-title">Create Contract</h2>
<button className="modal-close-btn" onClick={onClose}>
×
</button>
</div>
<form onSubmit={handleSubmit}>
<div className="modal-content">
{error && (
<div className="form-error">
{error}
</div>
)}
<div className="settings-section">
<h3>Contract Details</h3>
<div className="setting-item">
<label>
Name
<input
type="text"
value={form.name}
onChange={(e) => setForm({ ...form, name: e.target.value })}
placeholder="Enter contract name"
required
className="form-input"
/>
</label>
</div>
<div className="setting-item">
<label>
Description
<textarea
value={form.description}
onChange={(e) => setForm({ ...form, description: e.target.value })}
placeholder="Enter contract description (optional)"
className="form-textarea"
rows={3}
/>
</label>
</div>
<div className="setting-item">
<label>
Contract Type
<select
value={form.contractType}
onChange={(e) => setForm({ ...form, contractType: e.target.value })}
className="form-select"
>
<option value="simple">Simple</option>
<option value="specification">Specification</option>
<option value="execute">Execute</option>
</select>
</label>
</div>
</div>
<div className="settings-section">
<h3>Red Team Monitoring</h3>
<div className="setting-item">
<label className="checkbox-label">
<input
type="checkbox"
checked={form.redTeamEnabled}
onChange={(e) => setForm({ ...form, redTeamEnabled: e.target.checked })}
/>
<span>Enable Red Team monitoring</span>
</label>
<div className="setting-description">
Spawns a parallel task that monitors work output for quality and compliance
</div>
</div>
{form.redTeamEnabled && (
<div className="setting-item red-team-prompt-container">
<label>
Custom review criteria (optional)
<textarea
value={form.redTeamPrompt}
onChange={(e) => setForm({ ...form, redTeamPrompt: e.target.value })}
placeholder="Enter custom criteria for the red team to evaluate against... (e.g., 'Ensure all functions have proper error handling', 'Verify security best practices are followed')"
className="form-textarea"
rows={4}
/>
</label>
<div className="setting-description">
Provide specific criteria for the red team to focus on during reviews
</div>
</div>
)}
</div>
</div>
<div className="modal-footer">
<button type="button" className="modal-btn secondary" onClick={onClose} disabled={loading}>
Cancel
</button>
<button type="submit" className="modal-btn primary" disabled={loading || !form.name.trim()}>
{loading ? 'Creating...' : 'Create Contract'}
</button>
</div>
</form>
</div>
</div>
)
}
