Create FixerModal.tsx

components/FixerModal.tsx

@@ -0,0 +1,165 @@
+
+import React, { useState, useEffect } from 'react';
+import { Wrench, X, Bug, HardHat, CheckCircle2, Play, AlertTriangle } from 'lucide-react';
+import { fixArchitectureErrors, AgentStatus } from '../services/geminiService';
+import { Node, Edge } from 'reactflow';
+import { NodeData } from '../types';
+
+interface FixerModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onApply: (nodes: any[], edges: any[]) => void;
+  errorMsg: string;
+  nodes: Node<NodeData>[];
+  edges: Edge[];
+}
+
+const FixerModal: React.FC<FixerModalProps> = ({ isOpen, onClose, onApply, errorMsg, nodes, edges }) => {
+  const [isFixing, setIsFixing] = useState(false);
+  const [agentStatus, setAgentStatus] = useState<AgentStatus>('idle');
+  const [agentMessage, setAgentMessage] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      setAgentStatus('idle');
+      setAgentMessage('');
+      setError(null);
+      setIsFixing(false);
+    }
+  }, [isOpen]);
+
+  const handleStartFix = async () => {
+    setIsFixing(true);
+    setAgentStatus('debugger');
+    setAgentMessage('Initializing debugging protocols...');
+    
+    try {
+      const result = await fixArchitectureErrors(nodes, edges, errorMsg, (status, msg) => {
+        setAgentStatus(status);
+        setAgentMessage(msg);
+      });
+
+      if (result && result.nodes && result.edges) {
+         // Post-process to ensure compatibility
+         const processedNodes = result.nodes.map((n: any) => ({
+            ...n,
+            type: 'custom',
+            data: { ...n.data, label: n.data.label || n.data.type }
+         }));
+         const processedEdges = result.edges.map((e: any) => ({
+            ...e, animated: true, style: { stroke: '#94a3b8' }
+         }));
+
+         setTimeout(() => {
+            onApply(processedNodes, processedEdges);
+            onClose();
+         }, 1000);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to fix architecture");
+      setAgentStatus('error');
+      setIsFixing(false);
+    }
+  };
+
+  const renderAgentStep = (step: AgentStatus, icon: React.ReactNode, label: string) => {
+      const order = ['idle', 'debugger', 'architect', 'patcher', 'complete'];
+      const stepIdx = order.indexOf(step);
+      const currentIdx = order.indexOf(agentStatus);
+      
+      const isCurrent = agentStatus === step;
+      const isDone = currentIdx > stepIdx && agentStatus !== 'error';
+      const isPending = currentIdx < stepIdx;
+
+      let statusColor = 'text-slate-600';
+      if (isDone) statusColor = 'text-emerald-400';
+      if (isCurrent) statusColor = 'text-amber-400 animate-pulse';
+      if (agentStatus === 'error') statusColor = 'text-red-400';
+
+      return (
+        <div className={`flex items-center gap-3 p-3 rounded-lg border transition-all duration-300 ${isCurrent ? 'bg-slate-800 border-amber-500/30' : 'bg-slate-900 border-slate-800'}`}>
+            <div className={`${statusColor}`}>
+                {isDone ? <CheckCircle2 size={24} /> : icon}
+            </div>
+            <div className="flex-1">
+                <div className={`font-semibold text-sm ${isCurrent ? 'text-amber-200' : isDone ? 'text-emerald-200' : 'text-slate-400'}`}>
+                    {label}
+                </div>
+                {isCurrent && (
+                     <div className="text-xs text-slate-500 mt-1">{agentMessage}</div>
+                )}
+            </div>
+            {isCurrent && <div className="w-2 h-2 rounded-full bg-amber-400 animate-ping" />}
+        </div>
+      );
+  }
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="absolute inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4">
+      <div className="bg-slate-950 w-full max-w-lg rounded-xl border border-red-500/30 shadow-2xl flex flex-col overflow-hidden animate-in fade-in zoom-in duration-200">
+        
+        <div className="flex items-center justify-between px-6 py-4 border-b border-slate-800 bg-gradient-to-r from-slate-900 to-slate-800">
+          <h2 className="text-lg font-bold text-white flex items-center gap-2">
+            <Wrench className="text-red-400" size={20} />
+            Auto-Fixer
+          </h2>
+          <button onClick={onClose} className="text-slate-400 hover:text-white transition-colors">
+            <X size={20} />
+          </button>
+        </div>
+
+        <div className="p-6 space-y-6">
+          {!isFixing && agentStatus !== 'complete' ? (
+            <>
+                <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-4 flex gap-3 items-start">
+                    <AlertTriangle className="text-red-400 shrink-0 mt-0.5" size={18} />
+                    <div>
+                        <h3 className="text-sm font-bold text-red-200 mb-1">Detected Issues</h3>
+                        <p className="text-xs text-red-300/80 font-mono leading-relaxed max-h-32 overflow-y-auto">
+                            {errorMsg}
+                        </p>
+                    </div>
+                </div>
+
+                <div className="text-sm text-slate-400">
+                    Deploy AI debugging agents to analyze the graph structure and apply corrections automatically.
+                </div>
+
+                <div className="flex justify-end pt-2">
+                    <button
+                        onClick={handleStartFix}
+                        className="flex items-center gap-2 px-6 py-2.5 rounded-lg font-medium text-white bg-red-600 hover:bg-red-500 transition-all shadow-lg shadow-red-900/20"
+                    >
+                        <Play size={18} fill="currentColor" />
+                        Run Diagnostics & Fix
+                    </button>
+                </div>
+            </>
+          ) : (
+            <div className="space-y-3">
+                {renderAgentStep('debugger', <Bug size={24} />, "Debugger: Identifying Root Cause")}
+                {renderAgentStep('architect', <HardHat size={24} />, "Architect: Planning Structural Fix")}
+                {renderAgentStep('patcher', <Wrench size={24} />, "Patcher: Applying Fixes to Graph")}
+                
+                {agentStatus === 'complete' && (
+                     <div className="text-center text-emerald-400 font-bold mt-6 animate-pulse">
+                        Fixes Applied Successfully!
+                     </div>
+                )}
+                {agentStatus === 'error' && (
+                     <div className="text-center text-red-400 font-bold mt-6">
+                        {error || "An error occurred during fixing."}
+                     </div>
+                )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FixerModal;