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>

frontend/src/api/trees.ts

@@ -1,5 +1,5 @@
 import apiClient from './client'
-import type { Tree, TreeListItem, TreeCreate, TreeUpdate, TreeFilters, TreeShareCreate, TreeShare, TreeVisibilityUpdate, TreeValidationResponse } from '@/types'
+import type { Tree, TreeListItem, TreeCreate, TreeUpdate, TreeFilters, TreeShareCreate, TreeShare, TreeVisibilityUpdate, TreeValidationResponse, AIFixTreeRequest, AIFixTreeResponse } from '@/types'
 
 export const treesApi = {
   async list(params?: TreeFilters): Promise<TreeListItem[]> {
@@ -65,6 +65,12 @@ export const treesApi = {
     const response = await apiClient.post<TreeValidationResponse>(`/trees/${id}/can-publish`)
     return response.data
   },
+
+  // AI auto-fix
+  async fixTree(request: AIFixTreeRequest): Promise<AIFixTreeResponse> {
+    const response = await apiClient.post<AIFixTreeResponse>('/ai/fix-tree', request)
+    return response.data
+  },
 }
 
 export default treesApi

frontend/src/components/tree-editor/AIFixReviewModal.tsx

@@ -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>
+  )
+}

frontend/src/components/tree-editor/ValidationSummary.tsx

@@ -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
+      <div
-        onClick={() => setIsExpanded(!isExpanded)}
         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" />}
-        {isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+        </button>
-      </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 && (

frontend/src/pages/TreeEditorPage.tsx

@@ -5,10 +5,11 @@ import { Undo2, Redo2, Save, CheckCircle2, Monitor, FileText, Code2, LayoutList,
 import { getMonacoEditor } from '@/components/tree-editor/code-mode'
 import { treesApi } from '@/api/trees'
 import { treeMarkdownApi } from '@/api/treeMarkdown'
-import type { TreeCreate, TreeUpdate, TreeStatus, TreeStructure } from '@/types'
+import type { TreeCreate, TreeUpdate, TreeStatus, TreeStructure, AIFixProposal } from '@/types'
 import { useTreeEditorStore, useTreeEditorTemporal } from '@/store/treeEditorStore'
 import { TreeEditorLayout } from '@/components/tree-editor/TreeEditorLayout'
 import { ValidationSummary } from '@/components/tree-editor/ValidationSummary'
+import { AIFixReviewModal } from '@/components/tree-editor/AIFixReviewModal'
 import { useKeyboardShortcuts } from '@/hooks/useKeyboardShortcuts'
 import { usePermissions } from '@/hooks/usePermissions'
 import { Spinner } from '@/components/common/Spinner'
@@ -58,6 +59,8 @@ export function TreeEditorPage() {
   const [showAnalytics, setShowAnalytics] = useState(false)
   const [isMetadataOpen, setIsMetadataOpen] = useState(false)
   const [editingNodeId, setEditingNodeId] = useState<string | null>(null)
+  const [isFixing, setIsFixing] = useState(false)
+  const [fixProposals, setFixProposals] = useState<AIFixProposal[] | null>(null)
 
   // Mobile detection
   const [isMobile, setIsMobile] = useState(false)
@@ -217,6 +220,54 @@ export function TreeEditorPage() {
     selectNode(nodeId)
   }
 
+  const handleFixWithAI = async () => {
+    const store = useTreeEditorStore.getState()
+    if (!store.treeStructure) return
+
+    const fixableErrors = store.validationErrors
+      .filter(e => e.severity === 'error' && e.nodeId)
+      .map(e => ({ node_id: e.nodeId!, message: e.message }))
+
+    if (fixableErrors.length === 0) return
+
+    setIsFixing(true)
+    try {
+      const result = await treesApi.fixTree({
+        tree_structure: store.treeStructure as unknown as Record<string, unknown>,
+        tree_name: store.name,
+        tree_type: 'troubleshooting',
+        validation_errors: fixableErrors,
+      })
+      if (result.fixes.length > 0) {
+        setFixProposals(result.fixes)
+      } else {
+        toast.info('AI could not generate fixes for these errors')
+      }
+    } catch {
+      toast.error('Failed to generate AI fixes. Please try again.')
+    } finally {
+      setIsFixing(false)
+    }
+  }
+
+  const handleApplyFix = (fix: AIFixProposal) => {
+    updateNode(fix.target_node_id, fix.fixed_node as Partial<TreeStructure>)
+  }
+
+  const handleApplyAllFixes = () => {
+    if (!fixProposals) return
+    for (const fix of fixProposals) {
+      handleApplyFix(fix)
+    }
+    setFixProposals(null)
+    setTimeout(() => { validate() }, 100)
+  }
+
+  const handleCloseFixModal = () => {
+    setFixProposals(null)
+    validate()
+  }
+
   const handleNodeSelect = useCallback((nodeId: string | null) => {
     if (nodeId) {
       setIsMetadataOpen(false) // close metadata when opening node editor
@@ -685,6 +736,8 @@ export function TreeEditorPage() {
           <ValidationSummary
             errors={validationErrors}
             onSelectNode={handleSelectNode}
+            onFixWithAI={handleFixWithAI}
+            isFixing={isFixing}
           />
         </div>
       )}
@@ -705,6 +758,16 @@ export function TreeEditorPage() {
           <FlowAnalyticsPanel treeId={id} />
         </div>
       )}
+
+      {/* AI Fix Review Modal */}
+      {fixProposals && (
+        <AIFixReviewModal
+          fixes={fixProposals}
+          onApply={handleApplyFix}
+          onApplyAll={handleApplyAllFixes}
+          onClose={handleCloseFixModal}
+        />
+      )}
     </div>
   )
 }

frontend/src/types/ai-fix.ts

@@ -0,0 +1,24 @@
+export interface AIFixValidationError {
+  node_id: string
+  message: string
+}
+
+export interface AIFixProposal {
+  target_node_id: string
+  error_message: string
+  description: string
+  original_node: Record<string, unknown>
+  fixed_node: Record<string, unknown>
+}
+
+export interface AIFixTreeRequest {
+  tree_structure: Record<string, unknown>
+  tree_name: string
+  tree_type: 'troubleshooting' | 'procedural' | 'maintenance'
+  validation_errors: AIFixValidationError[]
+}
+
+export interface AIFixTreeResponse {
+  fixes: AIFixProposal[]
+  tokens_used: { input: number; output: number }
+}

frontend/src/types/index.ts

@@ -45,3 +45,10 @@ export type {
   AIAssembleResponse,
   AIWizardPhase,
 } from './ai'
+
+export type {
+  AIFixTreeRequest,
+  AIFixTreeResponse,
+  AIFixProposal,
+  AIFixValidationError,
+} from './ai-fix'