diff options
Diffstat (limited to 'frontend/src/components')
| -rw-r--r-- | frontend/src/components/ContractCreateModal.tsx | 185 | ||||
| -rw-r--r-- | frontend/src/components/ContractDetail.tsx | 139 | ||||
| -rw-r--r-- | frontend/src/components/ContractList.tsx | 61 |
3 files changed, 22 insertions, 363 deletions
diff --git a/frontend/src/components/ContractCreateModal.tsx b/frontend/src/components/ContractCreateModal.tsx deleted file mode 100644 index e1d9732..0000000 --- a/frontend/src/components/ContractCreateModal.tsx +++ /dev/null @@ -1,185 +0,0 @@ -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> - ) -} diff --git a/frontend/src/components/ContractDetail.tsx b/frontend/src/components/ContractDetail.tsx index a9dd550..72527ce 100644 --- a/frontend/src/components/ContractDetail.tsx +++ b/frontend/src/components/ContractDetail.tsx @@ -12,8 +12,6 @@ interface TaskSummary { id: string name: string status: string - is_supervisor?: boolean - is_red_team?: boolean } interface ContractRepository { @@ -32,24 +30,6 @@ interface Contract { status: string version: number created_at: string - red_team_enabled?: boolean - red_team_prompt?: string -} - -interface RedTeamNotification { - id: string - contract_id: string - red_team_task_id: string - related_task_id?: string - message: string - severity: 'info' | 'warning' | 'critical' - file_path?: string - context?: string - delivered: boolean - delivered_at?: string - acknowledged: boolean - acknowledged_at?: string - created_at: string } interface ContractWithRelations { @@ -59,7 +39,7 @@ interface ContractWithRelations { tasks: TaskSummary[] } -type Tab = 'overview' | 'files' | 'tasks' | 'repositories' | 'red-team' +type Tab = 'overview' | 'files' | 'tasks' | 'repositories' export function ContractDetail() { const { id } = useParams<{ id: string }>() @@ -67,8 +47,6 @@ export function ContractDetail() { const [loading, setLoading] = useState(true) const [error, setError] = useState<string | null>(null) const [activeTab, setActiveTab] = useState<Tab>('overview') - const [notifications, setNotifications] = useState<RedTeamNotification[]>([]) - const [notificationsLoading, setNotificationsLoading] = useState(false) useEffect(() => { async function fetchContract() { @@ -92,28 +70,6 @@ export function ContractDetail() { fetchContract() }, [id]) - // Fetch red team notifications when viewing red-team tab - useEffect(() => { - async function fetchNotifications() { - if (!id || activeTab !== 'red-team' || !data?.contract.red_team_enabled) return - - try { - setNotificationsLoading(true) - const response = await fetch(`/api/v1/contracts/${id}/red-team/notifications`) - if (response.ok) { - const notificationData = await response.json() - setNotifications(notificationData.notifications || []) - } - } catch (err) { - console.error('Failed to fetch red team notifications:', err) - } finally { - setNotificationsLoading(false) - } - } - - fetchNotifications() - }, [id, activeTab, data?.contract.red_team_enabled]) - if (loading) { return ( <div className="contract-detail-container"> @@ -152,14 +108,7 @@ export function ContractDetail() { <Link to="/contracts" className="back-link"> Back to Contracts </Link> - <h1 className="contract-title"> - {contract.name} - {contract.red_team_enabled && ( - <span className="red-team-badge" title="Red Team monitoring enabled"> - đĄī¸ Red Team - </span> - )} - </h1> + <h1 className="contract-title">{contract.name}</h1> {contract.description && ( <p className="contract-description">{contract.description}</p> )} @@ -195,14 +144,6 @@ export function ContractDetail() { > Repositories ({repositories.length}) </button> - {contract.red_team_enabled && ( - <button - className={`tab-button red-team-tab ${activeTab === 'red-team' ? 'active' : ''}`} - onClick={() => setActiveTab('red-team')} - > - đĄī¸ Red Team - </button> - )} </div> <div className="contract-tab-content"> @@ -253,12 +194,8 @@ export function ContractDetail() { ) : ( <ul className="task-list"> {tasks.map((task) => ( - <li key={task.id} className={`task-item ${task.is_red_team ? 'red-team-task' : ''}`}> - <h3> - {task.is_red_team && <span className="task-badge red-team">đĄī¸</span>} - {task.is_supervisor && <span className="task-badge supervisor">đ</span>} - {task.name} - </h3> + <li key={task.id} className="task-item"> + <h3>{task.name}</h3> <span className={`task-status status-${task.status}`}> {task.status} </span> @@ -289,74 +226,6 @@ export function ContractDetail() { )} </div> )} - - {activeTab === 'red-team' && contract.red_team_enabled && ( - <div className="tab-panel red-team-panel"> - <h2>đĄī¸ Red Team Monitoring</h2> - - {contract.red_team_prompt && ( - <div className="red-team-prompt"> - <h3>Review Criteria</h3> - <p>{contract.red_team_prompt}</p> - </div> - )} - - <div className="red-team-status"> - <h3>Red Team Task</h3> - {(() => { - const redTeamTask = tasks.find(t => t.is_red_team) - if (redTeamTask) { - return ( - <div className="red-team-task-info"> - <span className="task-name">{redTeamTask.name}</span> - <span className={`task-status status-${redTeamTask.status}`}> - {redTeamTask.status} - </span> - </div> - ) - } - return <p className="no-task">Red team task not yet spawned</p> - })()} - </div> - - <div className="red-team-notifications"> - <h3>Alerts ({notifications.length})</h3> - {notificationsLoading ? ( - <p>Loading notifications...</p> - ) : notifications.length === 0 ? ( - <p className="no-alerts">No alerts from red team</p> - ) : ( - <ul className="notification-list"> - {notifications.map((notification) => ( - <li - key={notification.id} - className={`notification-item severity-${notification.severity}`} - > - <div className="notification-header"> - <span className={`severity-badge ${notification.severity}`}> - {notification.severity === 'critical' && 'đ¨'} - {notification.severity === 'warning' && 'â ī¸'} - {notification.severity === 'info' && 'âšī¸'} - {notification.severity.toUpperCase()} - </span> - <span className="notification-time"> - {new Date(notification.created_at).toLocaleString()} - </span> - </div> - <p className="notification-message">{notification.message}</p> - {notification.file_path && ( - <span className="notification-file">File: {notification.file_path}</span> - )} - {notification.context && ( - <pre className="notification-context">{notification.context}</pre> - )} - </li> - ))} - </ul> - )} - </div> - </div> - )} </div> </div> ) diff --git a/frontend/src/components/ContractList.tsx b/frontend/src/components/ContractList.tsx index 253b44f..77012db 100644 --- a/frontend/src/components/ContractList.tsx +++ b/frontend/src/components/ContractList.tsx @@ -1,6 +1,5 @@ -import React, { useEffect, useState, useCallback } from 'react' +import React, { useEffect, useState } from 'react' import { Link } from 'react-router-dom' -import { ContractCreateModal } from './ContractCreateModal' interface ContractSummary { id: string @@ -13,35 +12,32 @@ interface ContractSummary { task_count: number repository_count: number created_at: string - // Red team fields - red_team_enabled?: boolean } export function ContractList() { const [contracts, setContracts] = useState<ContractSummary[]>([]) const [loading, setLoading] = useState(true) const [error, setError] = useState<string | null>(null) - const [showCreateModal, setShowCreateModal] = useState(false) - const fetchContracts = useCallback(async () => { - try { - setLoading(true) - const response = await fetch('/api/v1/contracts') - if (!response.ok) { - throw new Error(`Failed to fetch contracts: ${response.statusText}`) + useEffect(() => { + async function fetchContracts() { + try { + setLoading(true) + const response = await fetch('/api/v1/contracts') + if (!response.ok) { + throw new Error(`Failed to fetch contracts: ${response.statusText}`) + } + const data = await response.json() + setContracts(data.contracts || []) + } catch (err) { + setError(err instanceof Error ? err.message : 'Unknown error') + } finally { + setLoading(false) } - const data = await response.json() - setContracts(data.contracts || []) - } catch (err) { - setError(err instanceof Error ? err.message : 'Unknown error') - } finally { - setLoading(false) } - }, []) - useEffect(() => { fetchContracts() - }, [fetchContracts]) + }, []) if (loading) { return ( @@ -61,15 +57,7 @@ export function ContractList() { return ( <div className="contract-list-container"> - <div className="contract-list-header"> - <h1>Contracts</h1> - <button - className="create-contract-btn" - onClick={() => setShowCreateModal(true)} - > - + New Contract - </button> - </div> + <h1>Contracts</h1> {contracts.length === 0 ? ( <p>No contracts found</p> ) : ( @@ -77,14 +65,7 @@ export function ContractList() { {contracts.map((contract) => ( <li key={contract.id} className="contract-item"> <Link to={`/contracts/${contract.id}`}> - <h2> - {contract.name} - {contract.red_team_enabled && ( - <span className="red-team-badge" title="Red Team monitoring enabled"> - đ - </span> - )} - </h2> + <h2>{contract.name}</h2> {contract.description && <p>{contract.description}</p>} <div className="contract-meta"> <span>Phase: {contract.phase}</span> @@ -97,12 +78,6 @@ export function ContractList() { ))} </ul> )} - - <ContractCreateModal - isOpen={showCreateModal} - onClose={() => setShowCreateModal(false)} - onCreated={fetchContracts} - /> </div> ) } |