dablew002/mindmirror-ai-debugger-cognitive-reflection-engine

1class ProblemSolver extends HTMLElement {2    constructor() {3        super();4        this.attachShadow({ mode: 'open' });5        this.personalityProfile = null;6    }7 8    setProfile(profile) {9        this.personalityProfile = profile;10        this.render();11    }12 13    async solveProblem(problemText) {14        if (!this.personalityProfile) {15            console.error("No personality profile set");16            return;17        }18 19        try {20            // Step 1: Classify the problem21            const classification = await this.classifyProblem(problemText);22            23            // Step 2: Generate solutions24            const solutions = await this.generateSolutions(problemText, classification);25            26            // Step 3: Create action plan27            const actionPlan = await this.createActionPlan(solutions);28            29            this.renderResults({ classification, solutions, actionPlan });30        } catch (error) {31            console.error("Problem solving failed:", error);32            this.renderError();33        }34    }35 36    async classifyProblem(problemText) {37        const prompt = `Classify this problem based on user profile:38        39        PROBLEM: ${problemText}40        USER PROFILE: ${JSON.stringify(this.personalityProfile)}41 42        Return JSON with:43        - type: ["personal", "practical", "hybrid"]44        - complexity: 1-1045        - emotionalIntensity: 1-1046        - recommendedApproach: ["therapeutic", "structured", "balanced"]47        - urgency: ["low", "medium", "high"]`;48 49        const response = await this.apiCall(50            prompt, 51            OPENROUTER_CONFIG.models.problemSolving52        );53        return JSON.parse(response.choices[0].message.content);54    }55 56    async generateSolutions(problemText, classification) {57        const prompt = `Generate 3 personalized solutions for:58        59        PROBLEM: ${problemText}60        CLASSIFICATION: ${JSON.stringify(classification)}61        PROFILE: ${JSON.stringify(this.personalityProfile)}62 63        For each solution provide:64        - name: Creative title65        - description: How it fits the profile66        - steps: Key milestones67        - confidence: 0-10068        - timeframe: Estimated duration69        70        Return as JSON array.`;71 72        const response = await this.apiCall(73            prompt,74            OPENROUTER_CONFIG.models.creativeGeneration75        );76        return JSON.parse(response.choices[0].message.content);77    }78 79    async apiCall(prompt, model) {80        const response = await fetch(`${OPENROUTER_CONFIG.baseUrl}/chat/completions`, {81            method: "POST",82            headers: {83                ...OPENROUTER_CONFIG.headers,84                "Content-Type": "application/json"85            },86            body: JSON.stringify({87                model,88                messages: [{ role: "user", content: prompt }]89            })90        });91        return await response.json();92    }93 94    render() {95        this.shadowRoot.innerHTML = `96            <style>97                :host {98                    display: block;99                    background: rgba(255, 255, 255, 0.05);100                    border-radius: 12px;101                    padding: 1.5rem;102                    margin: 1rem 0;103                }104                .solution {105                    background: rgba(0, 0, 0, 0.2);106                    border-radius: 8px;107                    padding: 1rem;108                    margin: 1rem 0;109                    border-left: 3px solid #6366f1;110                }111                .solution-title {112                    font-weight: 600;113                    color: #8b5cf6;114                    margin-bottom: 0.5rem;115                }116                .confidence {117                    display: inline-block;118                    background: rgba(139, 92, 246, 0.2);119                    padding: 0.25rem 0.5rem;120                    border-radius: 4px;121                    font-size: 0.8rem;122                    margin-left: 0.5rem;123                }124                .error {125                    color: #ef4444;126                    padding: 1rem;127                    background: rgba(239, 68, 68, 0.1);128                    border-radius: 8px;129                }130            </style>131            <div id="results-container"></div>132        `;133    }134 135    renderResults(data) {136        const container = this.shadowRoot.getElementById('results-container');137        138        let html = `139            <h3>Problem Analysis</h3>140            <p><strong>Type:</strong> ${data.classification.type}</p>141            <p><strong>Complexity:</strong> ${data.classification.complexity}/10</p>142            143            <h3 style="margin-top: 1.5rem;">Recommended Solutions</h3>144        `;145 146        data.solutions.forEach(solution => {147            html += `148                <div class="solution">149                    <div class="solution-title">${solution.name} 150                        <span class="confidence">${solution.confidence}% match</span>151                    </div>152                    <p>${solution.description}</p>153                    <p><strong>Timeframe:</strong> ${solution.timeframe}</p>154                    <details>155                        <summary>Steps</summary>156                        <ol>157                            ${solution.steps.map(step => `<li>${step}</li>`).join('')}158                        </ol>159                    </details>160                </div>161            `;162        });163 164        container.innerHTML = html;165    }166 167    renderError() {168        const container = this.shadowRoot.getElementById('results-container');169        container.innerHTML = `170            <div class="error">171                Failed to generate solutions. Please try again later.172            </div>173        `;174    }175}176 177customElements.define('problem-solver', ProblemSolver);