summaryrefslogtreecommitdiff
path: root/frontend/src/components/ContractCreateModal.tsx
diff options
context:
space:
mode:
authorsoryu <soryu@soryu.co>2026-01-29 02:24:48 +0000
committerGitHub <noreply@github.com>2026-01-29 02:24:48 +0000
commitcfe3ea0aae878ae8f591acdc33a48332ac875b9e (patch)
tree49a7f2d17f494f6c5f88d7c0692d57c21dea3244 /frontend/src/components/ContractCreateModal.tsx
parent764ace78046e78cce36b64cb3682cc5489bcf9d7 (diff)
downloadsoryu-cfe3ea0aae878ae8f591acdc33a48332ac875b9e.tar.gz
soryu-cfe3ea0aae878ae8f591acdc33a48332ac875b9e.zip
fix: Remove mistaken red team UI from VN frontend (#47)
* feat: Add Red Team UI to makima/frontend contract creation - Add redTeamEnabled and redTeamPrompt state to contracts page - Add "Enable Red Team Monitoring" checkbox with description - Add conditional "Custom Review Criteria" textarea when enabled - Include redTeamEnabled/redTeamPrompt in CreateContractRequest - Reset red team fields when canceling contract creation - Add redTeamEnabled to ContractSummary and Contract types - Add redTeamEnabled/redTeamPrompt to CreateContractRequest type - Add Red Team badge (🔍) to ContractList for enabled contracts Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * fix: Remove mistaken red team UI from VN frontend PR #39 accidentally added red team UI code to the wrong frontend directory (frontend/ instead of makima/frontend/). The correct implementation is already in makima/frontend/. This commit removes the mistaken changes: - Delete ContractCreateModal.tsx (was added by mistake) - Revert ContractList.tsx to remove red team badge and create modal - Revert ContractDetail.tsx to remove red team tab and notifications - Revert types.ts to remove contract/task types - Revert pc98.css to remove red team styling Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * [WIP] Heartbeat checkpoint - 2026-01-29 02:18:40 UTC --------- Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
Diffstat (limited to 'frontend/src/components/ContractCreateModal.tsx')
-rw-r--r--frontend/src/components/ContractCreateModal.tsx185
1 files changed, 0 insertions, 185 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>
- )
-}