feat: add AI auto-fix UI — types, API client, ValidationSummary button, review modal, and TreeEditorPage wiring
- New ai-fix.ts types for request/response - fixTree() method on treesApi - "Fix with AI" button in ValidationSummary (shows for fixable errors) - AIFixReviewModal with per-fix apply/skip and apply-all - TreeEditorPage orchestrates the fix flow Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
170
frontend/src/components/tree-editor/AIFixReviewModal.tsx
Normal file
170
frontend/src/components/tree-editor/AIFixReviewModal.tsx
Normal file
@@ -0,0 +1,170 @@
|
||||
import { useState } from 'react'
|
||||
import { X, Check, SkipForward, Sparkles, ChevronDown, ChevronUp } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import type { AIFixProposal } from '@/types'
|
||||
|
||||
interface AIFixReviewModalProps {
|
||||
fixes: AIFixProposal[]
|
||||
onApply: (fix: AIFixProposal) => void
|
||||
onApplyAll: () => void
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export function AIFixReviewModal({ fixes, onApply, onApplyAll, onClose }: AIFixReviewModalProps) {
|
||||
const [appliedIds, setAppliedIds] = useState<Set<string>>(new Set())
|
||||
const [skippedIds, setSkippedIds] = useState<Set<string>>(new Set())
|
||||
const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set(fixes.map(f => f.target_node_id)))
|
||||
|
||||
const handleApply = (fix: AIFixProposal) => {
|
||||
onApply(fix)
|
||||
setAppliedIds(prev => new Set(prev).add(fix.target_node_id))
|
||||
}
|
||||
|
||||
const handleSkip = (fix: AIFixProposal) => {
|
||||
setSkippedIds(prev => new Set(prev).add(fix.target_node_id))
|
||||
}
|
||||
|
||||
const toggleExpanded = (id: string) => {
|
||||
setExpandedIds(prev => {
|
||||
const next = new Set(prev)
|
||||
if (next.has(id)) next.delete(id)
|
||||
else next.add(id)
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
const pendingFixes = fixes.filter(
|
||||
f => !appliedIds.has(f.target_node_id) && !skippedIds.has(f.target_node_id)
|
||||
)
|
||||
const allHandled = pendingFixes.length === 0
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4">
|
||||
<div className="relative flex h-[80vh] w-full max-w-2xl flex-col bg-card border border-border rounded-2xl shadow-lg">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between border-b border-border px-6 py-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Sparkles className="h-5 w-5 text-primary" />
|
||||
<h2 className="text-lg font-semibold text-foreground">
|
||||
AI Fix Proposals ({fixes.length})
|
||||
</h2>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
<X className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-3">
|
||||
{fixes.map((fix) => {
|
||||
const isApplied = appliedIds.has(fix.target_node_id)
|
||||
const isSkipped = skippedIds.has(fix.target_node_id)
|
||||
const isExpanded = expandedIds.has(fix.target_node_id)
|
||||
|
||||
return (
|
||||
<div
|
||||
key={fix.target_node_id}
|
||||
className={cn(
|
||||
'rounded-lg border p-4',
|
||||
isApplied
|
||||
? 'border-emerald-400/30 bg-emerald-400/5'
|
||||
: isSkipped
|
||||
? 'border-border bg-accent/30 opacity-60'
|
||||
: 'border-border bg-card'
|
||||
)}
|
||||
>
|
||||
{/* Fix header */}
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex-1">
|
||||
<p className="text-sm text-red-400 mb-1">{fix.error_message}</p>
|
||||
<p className="text-sm text-foreground">{fix.description}</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Node: {fix.target_node_id}
|
||||
</p>
|
||||
</div>
|
||||
{isApplied && (
|
||||
<span className="flex items-center gap-1 rounded-full bg-emerald-400/10 px-2 py-1 text-xs text-emerald-400">
|
||||
<Check className="h-3 w-3" /> Applied
|
||||
</span>
|
||||
)}
|
||||
{isSkipped && (
|
||||
<span className="text-xs text-muted-foreground">Skipped</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Expand/collapse detail */}
|
||||
{!isApplied && !isSkipped && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => toggleExpanded(fix.target_node_id)}
|
||||
className="mt-2 flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
{isExpanded ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
|
||||
{isExpanded ? 'Hide' : 'Show'} details
|
||||
</button>
|
||||
|
||||
{isExpanded && (
|
||||
<div className="mt-3 grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<p className="text-xs font-medium text-muted-foreground mb-1">Before</p>
|
||||
<pre className="overflow-x-auto rounded bg-accent/50 p-2 text-xs text-muted-foreground max-h-48 overflow-y-auto">
|
||||
{JSON.stringify(fix.original_node, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs font-medium text-emerald-400 mb-1">After</p>
|
||||
<pre className="overflow-x-auto rounded bg-emerald-400/5 p-2 text-xs text-foreground max-h-48 overflow-y-auto">
|
||||
{JSON.stringify(fix.fixed_node, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Action buttons */}
|
||||
<div className="mt-3 flex gap-2">
|
||||
<button
|
||||
onClick={() => handleApply(fix)}
|
||||
className="flex items-center gap-1 rounded-md bg-gradient-brand px-3 py-1.5 text-xs font-medium text-white shadow-sm shadow-primary/20 hover:opacity-90"
|
||||
>
|
||||
<Check className="h-3 w-3" />
|
||||
Apply
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleSkip(fix)}
|
||||
className="flex items-center gap-1 rounded-md border border-border px-3 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
<SkipForward className="h-3 w-3" />
|
||||
Skip
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex items-center justify-between border-t border-border px-6 py-4">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
{allHandled ? 'Done' : 'Cancel'}
|
||||
</button>
|
||||
{!allHandled && (
|
||||
<button
|
||||
onClick={onApplyAll}
|
||||
className="rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
|
||||
>
|
||||
Apply All ({pendingFixes.length})
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,14 +1,16 @@
|
||||
import { useState } from 'react'
|
||||
import { AlertCircle, AlertTriangle, ChevronDown, ChevronUp } from 'lucide-react'
|
||||
import { AlertCircle, AlertTriangle, ChevronDown, ChevronUp, Sparkles, Loader2 } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import type { ValidationError } from '@/store/treeEditorStore'
|
||||
|
||||
interface ValidationSummaryProps {
|
||||
errors: ValidationError[]
|
||||
onSelectNode: (nodeId: string) => void
|
||||
onFixWithAI?: () => void
|
||||
isFixing?: boolean
|
||||
}
|
||||
|
||||
export function ValidationSummary({ errors, onSelectNode }: ValidationSummaryProps) {
|
||||
export function ValidationSummary({ errors, onSelectNode, onFixWithAI, isFixing }: ValidationSummaryProps) {
|
||||
const [isExpanded, setIsExpanded] = useState(true)
|
||||
|
||||
const errorItems = errors.filter(e => e.severity === 'error')
|
||||
@@ -22,6 +24,8 @@ export function ValidationSummary({ errors, onSelectNode }: ValidationSummaryPro
|
||||
}
|
||||
}
|
||||
|
||||
const hasFixableErrors = errorItems.some(e => e.nodeId)
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
@@ -32,14 +36,16 @@ export function ValidationSummary({ errors, onSelectNode }: ValidationSummaryPro
|
||||
)}
|
||||
>
|
||||
{/* Header */}
|
||||
<button
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
<div
|
||||
className={cn(
|
||||
'flex w-full items-center justify-between p-3 text-left transition-colors hover:bg-accent',
|
||||
'flex w-full items-center justify-between p-3 transition-colors',
|
||||
errorItems.length > 0 ? 'text-red-400' : 'text-yellow-400'
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
className="flex items-center gap-2 text-left hover:opacity-80"
|
||||
>
|
||||
{errorItems.length > 0 ? (
|
||||
<AlertCircle className="h-5 w-5" />
|
||||
) : (
|
||||
@@ -58,9 +64,35 @@ export function ValidationSummary({ errors, onSelectNode }: ValidationSummaryPro
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
{isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
|
||||
</button>
|
||||
{isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
|
||||
</button>
|
||||
|
||||
{/* Fix with AI button */}
|
||||
{onFixWithAI && hasFixableErrors && (
|
||||
<button
|
||||
onClick={onFixWithAI}
|
||||
disabled={isFixing}
|
||||
className={cn(
|
||||
'flex items-center gap-1.5 rounded-md px-3 py-1 text-xs font-medium transition-colors',
|
||||
isFixing
|
||||
? 'bg-primary/10 text-primary cursor-wait'
|
||||
: 'bg-gradient-brand text-white shadow-sm shadow-primary/20 hover:opacity-90'
|
||||
)}
|
||||
>
|
||||
{isFixing ? (
|
||||
<>
|
||||
<Loader2 className="h-3 w-3 animate-spin" />
|
||||
Generating fixes...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Sparkles className="h-3 w-3" />
|
||||
Fix with AI
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Error/Warning List */}
|
||||
{isExpanded && (
|
||||
|
||||
Reference in New Issue
Block a user