import { useState, useEffect, useRef } from "react"; import { Link as RouterLink } from "react-router-dom"; import { Brain, Search, FileSearch, GitBranch, Lightbulb, CheckCircle2, Target, FileText, Link, Workflow, Database, TrendingUp, Filter, Zap, Shield, Sparkles, Clock, Network, Settings, ChevronRight, RotateCcw, ExternalLink, Code, Play, } from "lucide-react"; import { AgentStep, StepStatus } from "@/components/AgentStep"; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { GoalInput } from "@/components/GoalInput"; import { WidgetCustomizer } from "@/components/WidgetCustomizer"; import { ResearchReportModal } from "@/components/ResearchReportModal"; import { ReviseResearchForm, type ResearchConfig } from "@/components/ReviseResearchForm"; import { StateAssessmentCard } from "@/components/StateAssessmentCard"; import { GOAPConfigDisplay } from "@/components/GOAPConfigDisplay"; import { GOAPPlanner, parseGoal, type Step, type DataItem } from "@/lib/goapPlanner"; import { useToast } from "@/hooks/use-toast"; import { supabase } from "@/integrations/supabase/client"; interface WidgetConfig { primaryColor: string; accentColor: string; backgroundColor: string; cardBackgroundColor: string; cardBorderColor: string; textColor: string; secondaryTextColor: string; successColor: string; title: string; description: string; brandName: string; defaultGoal: string; fontFamily: string; borderRadius: string; animationSpeed: string; cardSpacing: string; showMetrics: boolean; showStats: boolean; compactMode: boolean; enableAI: boolean; aiModel: string; } const defaultResearchConfig: ResearchConfig = { goal: "", stateDefinition: { currentState: { goalDefined: true, informationGathered: false }, goalState: { verified: true, insightsGenerated: true }, stateGaps: ["Information needs to be gathered", "Analysis required", "Insights need generation"], }, researchGuidance: { focusAreas: [], excludeTopics: [], depth: "moderate", perspective: "technical", timeframe: "recent", }, prompts: { systemPrompt: `You are an expert research assistant specializing in GOAP (Goal-Oriented Action Planning) research workflows. Your role is to provide precise, evidence-based information for each research step. Format your responses as structured data points that can be used in subsequent research steps. Always include sources, confidence levels, and timestamps when available.`, searchQueryTemplate: "Latest {topic} advancements {year} research site:arxiv.org OR site:scholar.google.com OR site:ieee.org", analysisPrompt: `Analyze the following content and extract: 1. Key findings and methodologies 2. Actionable insights and recommendations 3. Technical details and specifications 4. Sources and citations 5. Confidence level (0-100%) based on source quality`, synthesisPrompt: `Synthesize the research findings into: 1. Coherent summary of key discoveries 2. Connections between different sources 3. Practical recommendations 4. Identified gaps or conflicts in the data 5. Overall confidence assessment`, }, goapConfig: { executionMode: "closed", enableReplanning: true, replanningTriggers: ["Action failure", "Low confidence results", "Missing preconditions"], costOptimization: true, parallelExecution: true, }, actionConfig: { maxActionCost: 5, enableFallbacks: true, validatePreconditions: true, trackEffects: true, }, parameters: { maxSources: 15, minConfidence: 85, maxSteps: 7, parallelAgents: 3, timeout: 120, }, filters: { dateRange: "past-year", sourceTypes: ["academic", "technical", "industry"], languages: ["en"], excludeDomains: [], }, }; const Index = () => { const { toast } = useToast(); const [widgetConfig, setWidgetConfig] = useState({ primaryColor: "#8b5cf6", accentColor: "#22c55e", backgroundColor: "#1a1a1a", cardBackgroundColor: "#262626", cardBorderColor: "#404040", textColor: "#ffffff", secondaryTextColor: "#a3a3a3", successColor: "#22c55e", title: "Goal-Oriented Action Planning", description: "AI-powered research planning using A* pathfinding and dynamic agent coordination", brandName: "", defaultGoal: "Research the latest advancements in quantum computing", fontFamily: "system-ui", borderRadius: "0.5rem", animationSpeed: "normal", cardSpacing: "1rem", showMetrics: true, showStats: true, compactMode: false, enableAI: true, aiModel: "google/gemini-2.5-flash", }); const [showCustomizer, setShowCustomizer] = useState(false); const [userGoal, setUserGoal] = useState(""); const [isPlanning, setIsPlanning] = useState(false); const [planGenerated, setPlanGenerated] = useState(false); const [steps, setSteps] = useState([]); const [isRunning, setIsRunning] = useState(false); const [visibleSteps, setVisibleSteps] = useState(1); const [showFinalAnalysis, setShowFinalAnalysis] = useState(false); const [showReportModal, setShowReportModal] = useState(false); const [showReviseForm, setShowReviseForm] = useState(false); const [finalRecommendations, setFinalRecommendations] = useState([]); const [showAdvancedSettings, setShowAdvancedSettings] = useState(false); const [researchConfig, setResearchConfig] = useState(defaultResearchConfig); const [currentGOAPState, setCurrentGOAPState] = useState>(defaultResearchConfig.stateDefinition.currentState); const [showGOAPCards, setShowGOAPCards] = useState(false); const activeStepRef = useRef(null); const goapCardsRef = useRef(null); const objectiveRef = useRef(null); const finalAnalysisRef = useRef(null); // GOAP Action definitions const createGOAPActions = (goal: string) => { const { domain, action, keywords } = parseGoal(goal); const keywordStr = keywords.join(", "); return [ { name: "analyzeGoal", cost: 1, preconditions: { goalDefined: true }, effects: { goalParsed: true }, stepGenerator: (userGoal: string) => ({ id: "1", title: "Goal Analysis", description: `Analyzing "${userGoal.slice(0, 60)}..." and breaking it down into actionable sub-goals.`, icon: Target, status: "pending" as StepStatus, data: [ { text: "Parse objective", icon: FileText, details: { objective: "Extract and structure the high-level goal from natural language input", preconditions: ["User input received", "NLP module initialized"], effects: ["Structured goal object created", "Sub-goals identified"], agents: ["Parser Agent", "NLP Agent"], } }, { text: "Identify dependencies", icon: Link, details: { objective: "Map relationships between actions and their requirements", preconditions: ["Goal parsed", "Action library loaded"], effects: ["Dependency graph generated", "Critical path identified"], agents: ["Dependency Analyzer", "Graph Builder"], sources: ["Action Registry", "State Definitions"] } }, { text: "Map state transitions", icon: Workflow, details: { objective: "Define how each action transforms the world state", preconditions: ["Dependencies mapped", "State space defined"], effects: ["Transition matrix created", "State reachability confirmed"], agents: ["State Mapper", "Validator Agent"], citations: ["GOAP: Goal-Oriented Action Planning - Orkin, J. (2006)"] } }, ], metrics: [{ label: "Sub-goals", value: "3" }, { label: "Actions", value: "7" }], }), }, { name: "assessState", cost: 1, preconditions: { goalParsed: true }, effects: { stateAssessed: true }, stepGenerator: () => ({ id: "2", title: "State Assessment", description: `Evaluating current knowledge about ${domain} and identifying information gaps.`, icon: Brain, status: "pending" as StepStatus, data: [ { text: "Assessing current state...", icon: Database, details: { objective: `Assess current knowledge and capability state for ${goal}`, effects: ["Baseline established", "Gaps identified"], agents: ["State Assessor"], } }, { text: "Defining success criteria...", icon: CheckCircle2, details: { objective: `Define success criteria and validation requirements for ${domain}`, preconditions: ["Goals defined"], effects: ["Validation criteria set", "Acceptance tests defined"], } }, { text: "Analyzing gaps...", icon: TrendingUp, details: { objective: `Quantify differences between current and target state for ${action} in ${domain}`, effects: ["Priority list generated", "Resource needs identified"], agents: ["Gap Analyzer", "Priority Ranker"], } }, ], metrics: [], }), }, { name: "gatherInformation", cost: 2, preconditions: { stateAssessed: true }, effects: { informationGathered: true }, stepGenerator: () => ({ id: "3", title: "Web Search", description: `Conducting intelligent searches for: ${keywordStr}`, icon: Search, status: "pending" as StepStatus, data: [ { text: `Searching for ${action} ${keywords[0] || "methods"}...`, icon: Search, details: { objective: `Execute targeted web searches for ${goal}`, sources: ["arXiv.org", "Google Scholar", "ACM Digital Library"], agents: ["Search Agent", "Query Optimizer"], } }, { text: "Gathering sources...", icon: Database, details: { objective: `Aggregate and catalog information sources for ${domain}`, effects: ["Source database populated", "Relevance scores assigned"], } }, { text: "Calculating relevance...", icon: TrendingUp, details: { objective: `Calculate information quality and applicability metrics for ${keywordStr}`, agents: ["Relevance Scorer", "ML Classifier"], citations: ["Information Retrieval Metrics - Manning et al."] } }, ], metrics: [], }), }, { name: "analyzeDocuments", cost: 2, preconditions: { informationGathered: true }, effects: { documentsAnalyzed: true }, stepGenerator: () => ({ id: "4", title: "Document Analysis", description: `Processing documents related to ${domain} to extract key insights.`, icon: FileSearch, status: "pending" as StepStatus, data: [ { text: "Parsing documents...", icon: FileText, details: { objective: `Extract structured data from ${domain} documents for ${goal}`, preconditions: ["Documents retrieved", "Parser modules loaded"], effects: ["Content extracted", "Metadata catalogued"], agents: ["Document Parser", "Text Extractor"], sources: ["PDF Parser", "HTML Scraper", "API Responses"] } }, { text: "Extracting insights...", icon: Lightbulb, details: { objective: `Identify key findings about ${keywordStr}`, preconditions: ["Documents parsed", "NLP models ready"], effects: ["Insights database populated", "Key points highlighted"], agents: ["Insight Extractor", "NLP Analyzer", "Pattern Recognizer"], citations: ["Named Entity Recognition - Nadeau & Sekine"] } }, { text: "Validating claims...", icon: Shield, details: { objective: `Verify factual accuracy for ${action} in ${domain}`, preconditions: ["Insights extracted", "Validation rules defined"], effects: ["Accuracy scores assigned", "Unreliable sources flagged"], agents: ["Fact Checker", "Source Validator", "Cross-Referencer"], sources: ["Fact-checking APIs", "Citation Databases"] } }, ], metrics: [], }), }, { name: "synthesizeKnowledge", cost: 2, preconditions: { documentsAnalyzed: true }, effects: { knowledgeSynthesized: true }, stepGenerator: () => ({ id: "5", title: "Knowledge Synthesis", description: `Synthesizing information from multiple ${domain} sources.`, icon: GitBranch, status: "pending" as StepStatus, data: [ { text: "Cross-referencing sources...", icon: Link, details: { objective: `Correlate ${domain} information across multiple sources for ${goal}`, preconditions: ["Multiple sources validated", "Correlation rules set"], effects: ["Source connections mapped", "Confidence levels adjusted"], agents: ["Cross-Referencer", "Correlation Analyzer"], sources: ["Academic papers", "Industry reports", "Technical documentation"] } }, { text: "Merging concepts...", icon: GitBranch, details: { objective: `Combine ${keywordStr} concepts into unified knowledge structures`, preconditions: ["Concepts identified", "Relationships defined"], effects: ["Knowledge graph updated", "Concept taxonomy refined"], agents: ["Concept Merger", "Ontology Builder", "Semantic Analyzer"], citations: ["Knowledge Graphs - Hogan et al. (2021)"] } }, { text: "Resolving conflicts...", icon: CheckCircle2, details: { objective: `Handle contradictory information about ${action} in ${domain}`, preconditions: ["Conflicts detected", "Resolution strategies loaded"], effects: ["Consensus reached", "Conflict resolution logged"], agents: ["Conflict Resolver", "Evidence Weigher", "Decision Maker"], sources: ["Source credibility scores", "Temporal data", "Expert systems"] } }, ], metrics: [{ label: "Sources", value: "18" }, { label: "Concepts", value: "12" }], }), }, { name: "generateInsights", cost: 2, preconditions: { knowledgeSynthesized: true }, effects: { insightsGenerated: true }, stepGenerator: () => ({ id: "6", title: "Insight Generation", description: `Generating actionable insights for ${domain} based on research findings.`, icon: Lightbulb, status: "pending" as StepStatus, data: [ { text: "Generating insights...", icon: Zap, details: { objective: `Create novel conclusions from synthesized ${domain} knowledge for ${goal}`, preconditions: ["Knowledge synthesized", "Analysis complete"], effects: ["Actionable insights created", "Recommendations formulated"], agents: ["Insight Generator", "Recommendation Engine", "Inference Agent"], citations: ["Automated Reasoning - Robinson (1965)", "AI Planning - Ghallab et al."] } }, { text: "Prioritizing by impact...", icon: TrendingUp, details: { objective: `Rank insights about ${keywordStr} by potential value and applicability`, preconditions: ["Insights generated", "Impact metrics defined"], effects: ["Priority scores assigned", "Implementation order set"], agents: ["Priority Ranker", "Impact Analyzer", "ROI Calculator"], sources: ["Business metrics", "Historical outcomes", "Expert heuristics"] } }, { text: "Validating feasibility...", icon: CheckCircle2, details: { objective: `Assess practicality of ${action} recommendations for ${domain}`, preconditions: ["Insights prioritized", "Constraint database available"], effects: ["Feasibility scores computed", "Resource needs estimated"], agents: ["Feasibility Validator", "Resource Planner", "Constraint Checker"], sources: ["Available resources", "Technical constraints", "Timeline requirements"] } }, ], metrics: [], }), }, { name: "verify", cost: 1, preconditions: { insightsGenerated: true }, effects: { verified: true }, stepGenerator: () => ({ id: "7", title: "Verification", description: "Cross-checking findings and ensuring accuracy before final presentation.", icon: CheckCircle2, status: "pending" as StepStatus, data: [ { text: "Verifying insights...", icon: Shield, details: { objective: `Perform final quality assurance on ${domain} insights for ${goal}`, preconditions: ["Insights validated", "Verification criteria set"], effects: ["Quality confirmed", "Errors corrected"], agents: ["Quality Assurance Agent", "Verification Bot", "Audit Agent"], sources: ["Quality standards", "Best practices", "Validation protocols"] } }, { text: "Checking sources...", icon: Filter, details: { objective: `Re-validate all ${keywordStr} information sources for final output`, preconditions: ["Sources catalogued", "Verification complete"], effects: ["Source reliability confirmed", "Citations verified"], agents: ["Source Checker", "Citation Validator", "Provenance Tracker"], citations: ["Information Provenance - Buneman et al. (2001)"] } }, { text: "Calculating confidence...", icon: TrendingUp, details: { objective: `Calculate overall confidence in ${action} research findings`, preconditions: ["All checks complete", "Confidence model loaded"], effects: ["Final confidence score computed", "Report ready"], agents: ["Confidence Calculator", "Statistical Analyzer", "Meta-Evaluator"], sources: ["Validation results", "Source quality scores", "Cross-reference matches"] } }, ], metrics: [], }), }, ]; }; // Handle goal submission and planning const handleGoalSubmit = async (goal: string) => { setUserGoal(goal); setIsPlanning(true); setShowFinalAnalysis(false); setShowGOAPCards(false); // Simulate planning phase await new Promise(resolve => setTimeout(resolve, 1500)); // Reset GOAP state to initial setCurrentGOAPState(researchConfig.stateDefinition.currentState); // Create GOAP planner const actions = createGOAPActions(goal); const planner = new GOAPPlanner(actions); // Calculate adaptive metrics based on goal complexity and GOAP config const goalComplexity = goal.split(' ').length; const adaptiveSubGoals = Math.min( Math.max(2, Math.ceil(goalComplexity / 10)), // 2-5 sub-goals based on word count researchConfig.parameters.maxSteps ); const adaptiveActions = researchConfig.goapConfig.executionMode === "open" ? researchConfig.parameters.maxSteps + 3 // More actions in open mode : researchConfig.goapConfig.executionMode === "focused" ? Math.min(5, researchConfig.parameters.maxSteps) // Fewer actions in focused mode : researchConfig.parameters.maxSteps; // Normal for closed mode // Define current and goal states const currentState = { goalDefined: true, goalParsed: false, stateAssessed: false, informationGathered: false, documentsAnalyzed: false, knowledgeSynthesized: false, insightsGenerated: false, verified: false, }; const goalState = { goalDefined: true, goalParsed: true, stateAssessed: true, informationGathered: true, documentsAnalyzed: true, knowledgeSynthesized: true, insightsGenerated: true, verified: true, }; // Generate plan const plan = planner.plan(currentState, goalState, goal); if (plan.length === 0) { toast({ title: "Planning Failed", description: "Could not generate a valid plan for this objective.", variant: "destructive", }); setIsPlanning(false); return; } // Update Goal Analysis step with adaptive metrics if (plan[0]) { plan[0].metrics = [ { label: "Sub-goals", value: String(adaptiveSubGoals) }, { label: "Actions", value: String(adaptiveActions) } ]; } toast({ title: "Plan Generated", description: `Created ${plan.length}-step research workflow using GOAP algorithm.`, }); setSteps(plan); setIsPlanning(false); setPlanGenerated(true); setVisibleSteps(1); // Issue #1694: do NOT auto-execute. Wait for the user to click // "Start Research" so the planning step is observable and reversible. }; // Execute research plan const executeResearch = async (stepsToExecute?: Step[], researchGoal?: string) => { const initialSteps = stepsToExecute || steps; console.log('executeResearch started, steps:', initialSteps.length); console.log('GOAP Config:', { executionMode: researchConfig.goapConfig.executionMode, enableReplanning: researchConfig.goapConfig.enableReplanning, costOptimization: researchConfig.goapConfig.costOptimization, parallelExecution: researchConfig.goapConfig.parallelExecution, }); setIsRunning(true); setShowFinalAnalysis(false); // Animate GOAP cards in setTimeout(() => setShowGOAPCards(true), 300); // Wait for GOAP cards animation to complete (4 seconds total) // State Assessment: 2s, Config: 1.5s delay + 2.5s = 4s total await new Promise(resolve => setTimeout(resolve, 4500)); // Keep a working copy that we update with AI data let workingSteps = [...initialSteps]; // Process each step sequentially for (let i = 0; i < workingSteps.length; i++) { console.log(`\n=== Processing step ${i}: ${workingSteps[i].title} ===`); // Update GOAP state based on step progression const stateUpdates: Record = { goalParsed: i >= 0, stateAssessed: i >= 1, informationGathered: i >= 2, documentsAnalyzed: i >= 3, knowledgeSynthesized: i >= 4, insightsGenerated: i >= 5, verified: i >= 6, }; setCurrentGOAPState(prev => ({ ...prev, ...stateUpdates })); console.log('GOAP State Updated:', stateUpdates); // Show and activate current step setVisibleSteps(i + 1); setSteps((prev) => { const newSteps = [...prev]; newSteps[i].status = "active"; return newSteps; }); // Wait a moment for UI to update await new Promise(resolve => setTimeout(resolve, 500)); // Call edge function to get real research data from Gemini if (widgetConfig.enableAI) { try { const currentStep = workingSteps[i]; // Build context from all previous completed steps (with their AI data) const previousStepsData = workingSteps.slice(0, i).map(step => ({ stepTitle: step.title, data: step.data.map(item => { const details = item.details as any; return { id: '', title: item.text, content: details?.objective || item.text, source: details?.source || (Array.isArray(details?.sources) ? details.sources[0] : undefined), confidence: details?.confidence, timestamp: details?.timestamp || new Date().toISOString(), }; }) })); console.log(`📤 Calling Gemini API for step ${i}`); console.log(` Context: ${previousStepsData.length} previous steps with ${previousStepsData.reduce((sum, s) => sum + s.data.length, 0)} total data items`); const { data, error } = await supabase.functions.invoke('research-step', { body: { goal: researchGoal || userGoal, stepTitle: currentStep.title, stepDescription: currentStep.description, stepType: currentStep.id, aiModel: widgetConfig.aiModel, config: { researchGuidance: researchConfig.researchGuidance, prompts: researchConfig.prompts, parameters: researchConfig.parameters, filters: researchConfig.filters, }, previousStepsData: previousStepsData, }, }); if (error) { console.error('❌ Error fetching research data:', error); // Check if replanning is enabled if (researchConfig.goapConfig.enableReplanning) { console.log('🔄 Replanning enabled - checking triggers'); const shouldReplan = researchConfig.goapConfig.replanningTriggers.includes("Action failure"); if (shouldReplan) { console.log('🔄 Replanning triggered due to action failure'); toast({ title: "Replanning Triggered", description: "Action failed - GOAP system is adapting the plan...", }); } } toast({ title: "AI Research Error", description: error.message || "Failed to generate research data", variant: "destructive", }); } else if (data && Array.isArray(data)) { console.log(`✅ Gemini returned ${data.length} items for step ${i}`); // Transform AI data into step data format const aiData = data.map((item: any) => ({ text: item.title, icon: Sparkles, details: { objective: item.content, source: item.source, confidence: item.confidence, timestamp: item.timestamp, } })); // Update working copy with AI data (THIS is what gets passed to next step) workingSteps[i].data = aiData; console.log(`💾 Updated working copy of step ${i} - will be used as context for step ${i + 1}`); // Also update UI state setSteps((prev) => { const newSteps = [...prev]; if (newSteps[i]) { newSteps[i].data = aiData; } return newSteps; }); } } catch (err) { console.error('Exception calling research-step:', err); toast({ title: "AI Research Error", description: "Failed to connect to research service", variant: "destructive", }); } } // Wait for research to complete (simulate processing time) await new Promise(resolve => setTimeout(resolve, 2000)); // Complete current step workingSteps[i].status = "completed"; setSteps((prev) => { const newSteps = [...prev]; newSteps[i].status = "completed"; console.log(`✓ Completed step ${i}: ${newSteps[i].title}`); return newSteps; }); // Wait before moving to next step await new Promise(resolve => setTimeout(resolve, 500)); console.log(`=== Step ${i} complete. Moving to next step ===\n`); } // All steps complete setIsRunning(false); // Generate final research report with all context if (widgetConfig.enableAI) { try { // Build comprehensive context from all completed steps const allResearchContext = workingSteps.map(step => ({ stepTitle: step.title, data: step.data.map(item => { const details = item.details as any; return { id: '', title: item.text, content: details?.objective || item.text, source: details?.source || (Array.isArray(details?.sources) ? details.sources[0] : undefined), confidence: details?.confidence, timestamp: details?.timestamp || new Date().toISOString(), }; }) })); const { data, error } = await supabase.functions.invoke('research-step', { body: { goal: researchGoal || userGoal, stepTitle: "Final Recommendations", stepDescription: `Based on all research findings, provide specific, actionable recommendations that directly answer: "${researchGoal || userGoal}". Include concrete suggestions with supporting data from the research.`, stepType: "final-report", aiModel: widgetConfig.aiModel, previousStepsData: allResearchContext, }, }); if (!error && data && Array.isArray(data)) { console.log('Final report recommendations generated:', data.length, 'items'); setFinalRecommendations(data); } } catch (err) { console.error('Error generating final report:', err); } } setTimeout(() => { setShowFinalAnalysis(true); }, 1000); }; const resetAll = () => { setUserGoal(""); setPlanGenerated(false); setSteps([]); setIsRunning(false); setShowFinalAnalysis(false); setShowReportModal(false); setShowReviseForm(false); setShowAdvancedSettings(false); setShowGOAPCards(false); setFinalRecommendations([]); setResearchConfig(defaultResearchConfig); setCurrentGOAPState(defaultResearchConfig.stateDefinition.currentState); setVisibleSteps(1); }; const handleReviseSubmit = (config: ResearchConfig) => { console.log("Revised research config:", config); setResearchConfig(config); setShowReviseForm(false); setUserGoal(config.goal); handleGoalSubmit(config.goal); toast({ title: "Research Revised", description: "Starting new research with updated parameters...", }); }; const handleAdvancedSettingsSubmit = (config: ResearchConfig) => { console.log("Advanced research config:", config); setResearchConfig(config); setShowAdvancedSettings(false); // If there's a goal in the config, update it if (config.goal && config.goal !== userGoal) { setUserGoal(config.goal); } toast({ title: "Advanced Settings Applied", description: "Research parameters have been configured. Submit your research goal to begin.", }); }; const handleGenerateWidget = () => { toast({ title: "Widget Code Generated", description: "Copy the embed code and paste it into your website.", }); }; // Auto-scroll effects useEffect(() => { if (activeStepRef.current && isRunning) { activeStepRef.current.scrollIntoView({ behavior: 'smooth', block: 'center', }); } }, [visibleSteps, isRunning]); useEffect(() => { if (goapCardsRef.current && showGOAPCards) { setTimeout(() => { goapCardsRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start', }); }, 200); // After GOAP Configuration completes (1.5s delay + 2.5s animation = 4s), scroll to objective setTimeout(() => { objectiveRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center', }); }, 4200); } }, [showGOAPCards]); useEffect(() => { if (finalAnalysisRef.current && showFinalAnalysis) { setTimeout(() => { finalAnalysisRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center', }); }, 300); } }, [showFinalAnalysis]); return (
{/* Hero Section */}
{widgetConfig.brandName || "GOAP Multi-Agent System"}

{widgetConfig.title}

{widgetConfig.description}

{planGenerated && ( )}
{/* Main Content */}
{/* Widget Customization Modal */} Widget Customization {/* Goal Input */} {!planGenerated && (
setShowAdvancedSettings(true)} onConfigUpdate={(optimizedConfig) => { setResearchConfig(prev => ({ ...prev, researchGuidance: { ...prev.researchGuidance, ...optimizedConfig.researchGuidance }, prompts: { ...prev.prompts, ...optimizedConfig.prompts }, parameters: { ...prev.parameters, ...optimizedConfig.parameters }, filters: { ...prev.filters, ...optimizedConfig.filters }, goapConfig: { ...prev.goapConfig, ...optimizedConfig.goapConfig } })); }} />
)} {/* Planning Status */} {isPlanning && (

Planning Research Workflow

Analyzing objective, identifying preconditions, calculating optimal action sequence...

)} {/* Research Execution */} {planGenerated && steps.length > 0 && ( <> {/* GOAP Configuration and State Assessment - Animated */} {showGOAPCards && (
)} {/* Control Button */}
Objective: {userGoal}
{/* Issue #1694: explicit "Start Research" gate so the plan is reviewable before execution. */} {!isRunning && visibleSteps <= 1 ? ( ) : (
)}
{/* Timeline */}
{/* Vertical line */}
{/* Steps */}
{steps.slice(0, visibleSteps).map((step, index) => (
))}
{/* Stats */} {widgetConfig.showStats && (
{steps.filter((s) => s.status === "completed").length}
Completed
{steps.filter((s) => s.status === "active").length}
Active
{steps.filter((s) => s.status === "pending").length}
Pending
)} {/* Final Research Report */} {showFinalAnalysis && (
{/* Header */}

Final Research Report

Comprehensive analysis generated by multi-agent GOAP research system

Total Steps
{steps.length}
Data Points
{steps.reduce((acc, step) => acc + (step.data?.length || 0), 0)}
Confidence
94%
Duration
{Math.round(steps.length * 3.5)}s
{/* Executive Summary */}

Executive Summary

This research successfully analyzed "{userGoal}" through a {steps.length}-step Goal-Oriented Action Planning (GOAP) workflow. The system coordinated multiple specialized agents to gather information, analyze documents, synthesize knowledge, and generate actionable insights with high confidence scores across all validation checks.

{/* Tabbed Report Sections */} Direct Answer Answer Key Findings Findings Methodology Method Next Steps Steps {/* Direct Answer Tab */} {finalRecommendations.length > 0 ? (
{finalRecommendations.slice(0, 4).map((rec: any, idx: number) => (
{rec.title}

{rec.content}

{rec.source && (
Source: {rec.source}
)}
))}
) : (

No direct answers available yet. Complete the research to see results.

)} {/* Key Findings Tab */}
{steps.slice(0, 3).map((step, idx) => (
{step.icon && }
{step.title}

{step.description}

{step.data && step.data.length > 0 && (
{step.data.slice(0, 3).map((item, i) => ( {item.text} ))}
)}
))}
{/* Methodology Tab */}
{steps.map((step, idx) => (
{idx + 1}
{step.title}
))}
{/* Next Steps Tab */}
    {[ "Review all gathered data points and cross-reference findings", "Validate insights with domain experts and stakeholders", "Develop implementation plan based on prioritized recommendations", "Monitor outcomes and iterate on initial strategies" ].map((rec, idx) => (
  • {rec}
    • ))}
{/* Footer */}
All verification checks passed
)} )}
{/* Research Report Modal */} { setShowReportModal(false); setShowReviseForm(true); }} primaryColor={widgetConfig.primaryColor} accentColor={widgetConfig.accentColor} successColor={widgetConfig.successColor} /> {/* Revise Research Form Modal */} Revise Research Configuration setShowReviseForm(false)} primaryColor={widgetConfig.primaryColor} accentColor={widgetConfig.accentColor} backgroundColor={widgetConfig.backgroundColor} /> {/* Advanced Settings Modal */} Advanced Research Settings setShowAdvancedSettings(false)} initialConfig={researchConfig} primaryColor={widgetConfig.primaryColor} accentColor={widgetConfig.accentColor} backgroundColor={widgetConfig.backgroundColor} /> {/* Footer */}
); }; export default Index;