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/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>
   )
 }