x-ipe 1.0.23__py3-none-any.whl → 1.0.25__py3-none-any.whl

x_ipe/static/js/features/quality-evaluation.js

@@ -0,0 +1,387 @@
+/**
+ * FEATURE-024: Project Quality Evaluation UI
+ * 
+ * Quality Evaluation View component for viewing and acting on project quality reports.
+ * Integrates with Workplace sidebar and provides action bar, version timeline, and markdown preview.
+ */
+class QualityEvaluationView {
+    constructor(container) {
+        this.container = container;
+        this.config = null;
+        this.status = null;
+        this.currentVersion = null;
+    }
+
+    // -------------------------------------------------------------------------
+    // Lifecycle
+    // -------------------------------------------------------------------------
+
+    async init() {
+        this.renderLoading();
+        try {
+            await Promise.all([
+                this.loadConfig(),
+                this.loadStatus()
+            ]);
+            
+            if (this.status.exists) {
+                await this.loadContent();
+                this.renderWithData();
+            } else {
+                this.renderEmptyState();
+            }
+        } catch (error) {
+            console.error('[QualityEval] Init error:', error);
+            this.renderError('Failed to load quality evaluation data');
+        }
+    }
+
+    destroy() {
+        this.container.innerHTML = '';
+    }
+
+    // -------------------------------------------------------------------------
+    // API Methods
+    // -------------------------------------------------------------------------
+
+    async loadConfig() {
+        try {
+            const response = await fetch('/api/config/copilot-prompt');
+            if (response.ok) {
+                this.config = await response.json();
+            } else {
+                this.config = this.getDefaultConfig();
+            }
+        } catch (error) {
+            console.warn('[QualityEval] Failed to load config:', error);
+            this.config = this.getDefaultConfig();
+        }
+    }
+
+    async loadStatus() {
+        const response = await fetch('/api/quality-evaluation/status');
+        if (response.ok) {
+            this.status = await response.json();
+        } else {
+            this.status = { exists: false, versions: [] };
+        }
+    }
+
+    async loadContent(version = null) {
+        const url = version 
+            ? `/api/quality-evaluation/content?version=${version}`
+            : '/api/quality-evaluation/content';
+        
+        const response = await fetch(url);
+        if (response.ok) {
+            const data = await response.json();
+            this.currentVersion = data.version;
+            this.currentContent = data.content;
+            return data;
+        }
+        throw new Error('Failed to load content');
+    }
+
+    getDefaultConfig() {
+        return {
+            version: '2.0',
+            evaluation: {
+                evaluate: {
+                    label: 'Evaluate Project Quality',
+                    icon: 'bi-clipboard-check',
+                    command: 'Evaluate project quality and generate report to x-ipe-docs/quality-evaluation/project-quality-evaluation.md'
+                },
+                refactoring: []
+            },
+            placeholder: {
+                'evaluation-file': 'x-ipe-docs/quality-evaluation/project-quality-evaluation.md'
+            }
+        };
+    }
+
+    // -------------------------------------------------------------------------
+    // Rendering
+    // -------------------------------------------------------------------------
+
+    renderLoading() {
+        this.container.innerHTML = `
+            <div class="quality-eval-view">
+                <div class="quality-loading">
+                    <div class="spinner-border" role="status">
+                        <span class="visually-hidden">Loading...</span>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+
+    renderError(message) {
+        this.container.innerHTML = `
+            <div class="quality-eval-view">
+                <div class="quality-empty-state">
+                    <div class="quality-empty-icon">
+                        <i class="bi bi-exclamation-triangle"></i>
+                    </div>
+                    <h5 class="quality-empty-title">Error</h5>
+                    <p class="quality-empty-desc">${message}</p>
+                    <button class="btn btn-evaluate" onclick="window.qualityEvaluationView.init()">
+                        <i class="bi bi-arrow-clockwise"></i>
+                        Retry
+                    </button>
+                </div>
+            </div>
+        `;
+    }
+
+    renderEmptyState() {
+        const evaluateConfig = this.config?.evaluation?.evaluate || this.getDefaultConfig().evaluation.evaluate;
+        
+        this.container.innerHTML = `
+            <div class="quality-eval-view">
+                <div class="quality-empty-state">
+                    <div class="quality-empty-icon">
+                        <i class="bi bi-clipboard-check"></i>
+                    </div>
+                    <h5 class="quality-empty-title">No Evaluation Yet</h5>
+                    <p class="quality-empty-desc">
+                        Run your first project quality evaluation to get insights on requirements coverage,
+                        feature alignment, and test completeness.
+                    </p>
+                    <button class="btn btn-evaluate" id="quality-empty-cta">
+                        <i class="bi ${evaluateConfig.icon}"></i>
+                        ${evaluateConfig.label}
+                    </button>
+                </div>
+            </div>
+        `;
+        
+        this.bindEmptyStateEvents();
+    }
+
+    renderWithData() {
+        this.container.innerHTML = `
+            <div class="quality-eval-view">
+                ${this.renderActionBar()}
+                ${this.renderVersionTimeline()}
+                <div class="quality-markdown-preview">
+                    <div class="quality-markdown-content" id="quality-markdown-content">
+                        ${this.renderMarkdown(this.currentContent)}
+                    </div>
+                </div>
+            </div>
+        `;
+        
+        this.bindEvents();
+    }
+
+    renderActionBar() {
+        const evaluateConfig = this.config?.evaluation?.evaluate || this.getDefaultConfig().evaluation.evaluate;
+        const refactoringOptions = this.config?.evaluation?.refactoring || [];
+        
+        return `
+            <div class="quality-action-bar">
+                ${refactoringOptions.length > 0 ? this.renderRefactoringDropdown(refactoringOptions) : ''}
+                <button class="btn btn-evaluate" id="quality-evaluate-btn">
+                    <i class="bi ${evaluateConfig.icon}"></i>
+                    Evaluate
+                </button>
+            </div>
+        `;
+    }
+
+    renderRefactoringDropdown(options) {
+        const items = options.map(opt => `
+            <div class="dropdown-item" data-command="${this.escapeHtml(opt.command)}">
+                <i class="bi ${opt.icon}"></i>
+                <span>${this.escapeHtml(opt.label)}</span>
+            </div>
+        `).join('');
+        
+        return `
+            <div class="dropdown-refactoring">
+                <button class="btn btn-refactoring">
+                    <i class="bi bi-arrow-repeat"></i>
+                    Refactoring
+                    <i class="bi bi-chevron-down" style="font-size: 0.75rem;"></i>
+                </button>
+                <div class="dropdown-menu">
+                    ${items}
+                </div>
+            </div>
+        `;
+    }
+
+    renderVersionTimeline() {
+        if (!this.status.versions || this.status.versions.length === 0) {
+            return '';
+        }
+        
+        const tabs = this.status.versions.map(v => `
+            <div class="quality-version-tab ${v.version === this.currentVersion ? 'active' : ''}" 
+                 data-version="${v.version}">
+                <span class="version-number">${v.version}</span>
+                <span class="version-date">${v.date}</span>
+            </div>
+        `).join('');
+        
+        return `
+            <div class="quality-version-timeline">
+                ${tabs}
+            </div>
+        `;
+    }
+
+    renderMarkdown(content) {
+        if (!content) {
+            return '<p class="text-muted">No content available.</p>';
+        }
+        
+        // Use marked.js if available, otherwise basic conversion
+        if (typeof marked !== 'undefined') {
+            return marked.parse(content);
+        }
+        
+        // Basic markdown conversion fallback
+        return this.basicMarkdownToHtml(content);
+    }
+
+    basicMarkdownToHtml(content) {
+        let html = content
+            // Headers
+            .replace(/^### (.*$)/gm, '<h3>$1</h3>')
+            .replace(/^## (.*$)/gm, '<h2>$1</h2>')
+            .replace(/^# (.*$)/gm, '<h1>$1</h1>')
+            // Bold and italic
+            .replace(/\*\*\*(.*?)\*\*\*/g, '<strong><em>$1</em></strong>')
+            .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+            .replace(/\*(.*?)\*/g, '<em>$1</em>')
+            // Inline code
+            .replace(/`([^`]+)`/g, '<code>$1</code>')
+            // Lists
+            .replace(/^\- (.*$)/gm, '<li>$1</li>')
+            .replace(/^\d+\. (.*$)/gm, '<li>$1</li>')
+            // Paragraphs
+            .replace(/\n\n/g, '</p><p>')
+            .replace(/\n/g, '<br>');
+        
+        return `<p>${html}</p>`;
+    }
+
+    // -------------------------------------------------------------------------
+    // Event Handling
+    // -------------------------------------------------------------------------
+
+    bindEmptyStateEvents() {
+        const ctaBtn = document.getElementById('quality-empty-cta');
+        if (ctaBtn) {
+            ctaBtn.addEventListener('click', () => this.handleEvaluateClick());
+        }
+    }
+
+    bindEvents() {
+        // Evaluate button
+        const evaluateBtn = document.getElementById('quality-evaluate-btn');
+        if (evaluateBtn) {
+            evaluateBtn.addEventListener('click', () => this.handleEvaluateClick());
+        }
+        
+        // Refactoring dropdown items
+        const refactoringItems = this.container.querySelectorAll('.dropdown-item[data-command]');
+        refactoringItems.forEach(item => {
+            item.addEventListener('click', (e) => {
+                const command = e.currentTarget.dataset.command;
+                this.handleRefactoringClick(command);
+            });
+        });
+        
+        // Version tabs
+        const versionTabs = this.container.querySelectorAll('.quality-version-tab');
+        versionTabs.forEach(tab => {
+            tab.addEventListener('click', (e) => {
+                const version = e.currentTarget.dataset.version;
+                this.handleVersionClick(version);
+            });
+        });
+    }
+
+    handleEvaluateClick() {
+        const evaluateConfig = this.config?.evaluation?.evaluate || this.getDefaultConfig().evaluation.evaluate;
+        const command = this.replacePlaceholders(evaluateConfig.command);
+        this.sendToConsole(command);
+    }
+
+    handleRefactoringClick(command) {
+        const resolvedCommand = this.replacePlaceholders(command);
+        this.sendToConsole(resolvedCommand);
+    }
+
+    async handleVersionClick(version) {
+        if (version === this.currentVersion) return;
+        
+        try {
+            await this.loadContent(version);
+            
+            // Update active tab
+            const tabs = this.container.querySelectorAll('.quality-version-tab');
+            tabs.forEach(tab => {
+                tab.classList.toggle('active', tab.dataset.version === version);
+            });
+            
+            // Update content
+            const contentEl = document.getElementById('quality-markdown-content');
+            if (contentEl) {
+                contentEl.innerHTML = this.renderMarkdown(this.currentContent);
+            }
+        } catch (error) {
+            console.error('[QualityEval] Failed to load version:', error);
+        }
+    }
+
+    // -------------------------------------------------------------------------
+    // Helpers
+    // -------------------------------------------------------------------------
+
+    replacePlaceholders(command) {
+        if (!command) return command;
+        
+        const placeholders = this.config?.placeholder || {};
+        let result = command;
+        
+        // Replace known placeholders
+        if (placeholders['evaluation-file']) {
+            result = result.replace(/<evaluation-file>/g, placeholders['evaluation-file']);
+        }
+        
+        return result;
+    }
+
+    sendToConsole(command) {
+        // Expand terminal panel first
+        if (window.terminalPanel) {
+            window.terminalPanel.expand();
+        }
+        
+        // Use terminalManager to type command (user can review/edit before pressing Enter)
+        if (window.terminalManager && window.terminalManager.sendCopilotPromptCommandNoEnter) {
+            window.terminalManager.sendCopilotPromptCommandNoEnter(command);
+        } else {
+            // Fallback: copy to clipboard and show alert
+            navigator.clipboard.writeText(command).then(() => {
+                console.log('[QualityEval] Command copied to clipboard:', command);
+                alert(`Command copied to clipboard:\n${command}`);
+            }).catch(() => {
+                console.log('[QualityEval] Command:', command);
+                alert(`Copy this command to console:\n${command}`);
+            });
+        }
+    }
+
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+}
+
+// Export for global access
+window.QualityEvaluationView = QualityEvaluationView;