🔧 API Orchestration Example (EP-Centric)

💻 Interactive Slider Code (The Debounce Pattern)

// INTERACTIVE SLIDER PATTERN: Calculate → Guidance
class InteractiveCalculator {
    constructor() {
        this.debounceTimer = null;
        this.lastCalculateResults = null;  // Store for passing to Guidance
    }

    // Called on EVERY slider movement (instant)
    async onSliderMove(value) {
        // STEP 1: Call Calculate API immediately (<20ms)
        const calculateRequest = {
            tier: this.tier,
            user_profile: { 
                current_age: this.age, 
                income: this.income,
                monthly_contribution: value  // Slider value
            },
            portfolio: this.portfolio
        };

        const response = await fetch('/api/v1/calculate/simulate', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(calculateRequest)
        });
        
        this.lastCalculateResults = await response.json();

        // STEP 2: Update charts IMMEDIATELY
        this.updateCharts(this.lastCalculateResults);
        this.updateSuccessProbability(this.lastCalculateResults.results.success_probability);

        // STEP 3: Debounce the Guidance API call (300ms)
        clearTimeout(this.debounceTimer);
        this.debounceTimer = setTimeout(() => this.onSliderCommit(), 300);
    }

    // Called when user STOPS moving (debounced)
    async onSliderCommit() {
        // STEP 4: Call Guidance API — entry_point_id required, calc_results OPTIONAL
        const guidanceRequest = {
            entry_point_id: this.entryPointId,  // from URL param or UTM resolution
            user_profile: this.userProfile,
            portfolio: this.portfolio,
            calculation_results: this.lastCalculateResults  // OPTIONAL — enables $ insights
        };

        const response = await fetch('/api/v1/guidance/context', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(guidanceRequest)
        });
        
        const guidance = await response.json();

        // STEP 5: Update text/insights
        this.updateHeadline(guidance.headline);  // "You're on track — Evergreen adds $350K"
        this.updateDifferentiators(guidance.journey_context.differentiators);
    }
}

// The result:
// • User drags slider → Charts animate smoothly (Calculate API)
// • User stops → Text updates with insights (Guidance API)