feat: add feature editing capability for pending/in-progress features

Add the ability for users to edit features that are not yet completed,
allowing them to provide corrections or additional instructions when the
agent is stuck or implementing a feature incorrectly.

Backend changes:
- Add FeatureUpdate schema in server/schemas.py with optional fields
- Add PATCH /api/projects/{project_name}/features/{feature_id} endpoint
- Validate that completed features (passes=True) cannot be edited

Frontend changes:
- Add FeatureUpdate type in ui/src/lib/types.ts
- Add updateFeature() API function in ui/src/lib/api.ts
- Add useUpdateFeature() React Query mutation hook
- Create EditFeatureForm.tsx component with pre-filled form values
- Update FeatureModal.tsx with Edit button for non-completed features

The edit form allows modifying category, name, description, priority,
and test steps. Save button is disabled until changes are detected.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Auto
2026-01-14 14:54:53 +02:00
parent 07c2010d32
commit d1b8eb5f99
8 changed files with 373 additions and 4 deletions

View File

@@ -1,6 +1,7 @@
import { useState } from 'react'
import { X, CheckCircle2, Circle, SkipForward, Trash2, Loader2, AlertCircle } from 'lucide-react'
import { X, CheckCircle2, Circle, SkipForward, Trash2, Loader2, AlertCircle, Pencil } from 'lucide-react'
import { useSkipFeature, useDeleteFeature } from '../hooks/useProjects'
import { EditFeatureForm } from './EditFeatureForm'
import type { Feature } from '../lib/types'
interface FeatureModalProps {
@@ -12,6 +13,7 @@ interface FeatureModalProps {
export function FeatureModal({ feature, projectName, onClose }: FeatureModalProps) {
const [error, setError] = useState<string | null>(null)
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
const [showEdit, setShowEdit] = useState(false)
const skipFeature = useSkipFeature(projectName)
const deleteFeature = useDeleteFeature(projectName)
@@ -36,6 +38,18 @@ export function FeatureModal({ feature, projectName, onClose }: FeatureModalProp
}
}
// Show edit form when in edit mode
if (showEdit) {
return (
<EditFeatureForm
feature={feature}
projectName={projectName}
onClose={() => setShowEdit(false)}
onSaved={onClose}
/>
)
}
return (
<div className="neo-modal-backdrop" onClick={onClose}>
<div
@@ -159,6 +173,14 @@ export function FeatureModal({ feature, projectName, onClose }: FeatureModalProp
</div>
) : (
<div className="flex gap-3">
<button
onClick={() => setShowEdit(true)}
disabled={skipFeature.isPending}
className="neo-btn neo-btn-primary flex-1"
>
<Pencil size={18} />
Edit
</button>
<button
onClick={handleSkip}
disabled={skipFeature.isPending}
@@ -169,7 +191,7 @@ export function FeatureModal({ feature, projectName, onClose }: FeatureModalProp
) : (
<>
<SkipForward size={18} />
Skip (Move to End)
Skip
</>
)}
</button>