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

1class ProgressTracker extends HTMLElement {2    constructor() {3        super();4        this.attachShadow({ mode: 'open' });5        this.progressData = null;6    }7 8    setProgressData(data) {9        this.progressData = data;10        this.render();11    }12 13    render() {14        this.shadowRoot.innerHTML = `15            <style>16                :host {17                    display: block;18                    background: rgba(255, 255, 255, 0.05);19                    border-radius: 12px;20                    padding: 1.5rem;21                    margin: 1rem 0;22                }23                .phase {24                    margin-bottom: 1.5rem;25                }26                .phase-title {27                    font-weight: 600;28                    margin-bottom: 0.5rem;29                    color: #8b5cf6;30                }31                .current-phase {32                    border-left: 3px solid #8b5cf6;33                    padding-left: 0.5rem;34                }35                .task {36                    margin: 0.25rem 0;37                    display: flex;38                    align-items: center;39                }40                .task-checkbox {41                    margin-right: 0.5rem;42                }43                .current-task {44                    font-weight: 500;45                }46                .progress-bar {47                    height: 8px;48                    background: rgba(255, 255, 255, 0.1);49                    border-radius: 4px;50                    margin: 1rem 0;51                    overflow: hidden;52                }53                .progress-fill {54                    height: 100%;55                    background: linear-gradient(to right, #8b5cf6, #6366f1);56                    border-radius: 4px;57                    transition: width 0.3s ease;58                }59                .metric {60                    display: inline-block;61                    margin-right: 1rem;62                    background: rgba(139, 92, 246, 0.2);63                    padding: 0.5rem;64                    border-radius: 6px;65                }66                .metric-value {67                    font-weight: 600;68                    color: #8b5cf6;69                }70            </style>71            <div id="tracker-container"></div>72        `;73    }74 75    renderProgress() {76        if (!this.progressData) return;77 78        const container = this.shadowRoot.getElementById('tracker-container');79        let html = `80            <div class="progress-bar">81                <div class="progress-fill" style="width: ${this.progressData.overallProgress}%"></div>82            </div>83            84            <div style="margin-bottom: 1.5rem;">85                ${Object.entries(this.progressData.metrics).map(([key, value]) => `86                    <span class="metric">87                        ${key.replace(/_/g, ' ')}: <span class="metric-value">${value}%</span>88                    </span>89                `).join('')}90            </div>91            92            <h3>Your Progress Journey</h3>93        `;94 95        this.progressData.phases.forEach(phase => {96            html += `97                <div class="phase ${phase.status === 'current' ? 'current-phase' : ''}">98                    <div class="phase-title">${phase.name}</div>99                    ${phase.tasks.map(task => `100                        <div class="task ${task.current ? 'current-task' : ''}">101                            <input type="checkbox" class="task-checkbox" ${task.completed ? 'checked' : ''}>102                            ${task.text}103                        </div>104                    `).join('')}105                </div>106            `;107        });108 109        container.innerHTML = html;110    }111}112 113customElements.define('progress-tracker', ProgressTracker);