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

x_ipe/static/js/features/homepage-infinity.js

@@ -0,0 +1,314 @@
+/**
+ * Homepage Infinity Loop - FEATURE-026
+ * 
+ * Interactive visualization of the X-IPE development lifecycle.
+ * Displays 8 stages on an infinity loop (∞) with clickable navigation.
+ */
+
+class HomepageInfinity {
+    static sidebar = null;
+    static tooltipTimeout = null;
+    
+    static STAGE_MAPPING = {
+        ideation: {
+            icon: '📋',
+            label: 'REQUIREMENT',
+            theme: 'control',
+            status: 'ready',
+            section: 'requirements',
+            selector: '[data-section-id="requirements"]',
+            position: { left: '7.33%', top: '68.37%' }
+        },
+        requirement: {
+            icon: '💡',
+            label: 'IDEATION',
+            theme: 'control',
+            status: 'ready',
+            section: 'ideation',
+            selector: '[data-section-id="ideation"]',
+            position: { left: '15%', top: '17.6%' }
+        },
+        implementation: {
+            icon: '⚙️',
+            label: 'IMPLEMENT',
+            theme: 'control',
+            status: 'ready',
+            section: 'code',
+            selector: '[data-section-id="code"]',
+            position: { left: '34.44%', top: '82%' }
+        },
+        deployment: {
+            icon: '🚀',
+            label: 'DEPLOY',
+            theme: 'control',
+            status: 'tbd',
+            section: 'management',
+            selector: null,
+            position: { left: '60.33%', top: '26.69%' }
+        },
+        validation: {
+            icon: '✅',
+            label: 'VALIDATION',
+            theme: 'transparency',
+            status: 'ready',
+            section: 'quality-evaluation',
+            selector: '[data-section-id="quality-evaluation"]',
+            position: { left: '87.11%', top: '19.78%' }
+        },
+        monitoring: {
+            icon: '📊',
+            label: 'MONITORING',
+            theme: 'transparency',
+            status: 'ready',
+            section: 'tracing',
+            selector: '[data-section-id="tracing"]',
+            position: { left: '90.67%', top: '73.9%' }
+        },
+        feedback: {
+            icon: '💬',
+            label: 'FEEDBACK',
+            theme: 'transparency',
+            status: 'ready',
+            section: 'uiux-feedbacks',
+            selector: '[data-section-id="uiux-feedbacks"]',
+            position: { left: '63.33%', top: '79.04%' }
+        },
+        planning: {
+            icon: '📅',
+            label: 'PLANNING',
+            theme: 'transparency',
+            status: 'ready',
+            section: 'planning',
+            selector: '[data-section-id="planning"]',
+            position: { left: '41.56%', top: '30.25%' }
+        }
+    };
+
+    /**
+     * Get HTML template for homepage
+     * @returns {string} HTML template
+     */
+    static getTemplate() {
+        const stageButtons = this._renderStageButtons();
+        
+        return `
+<div class="homepage-infinity-container">
+    <header class="homepage-header">
+        <h1>X-IPE</h1>
+        <p>An AI native integrated project environment for end to end business value delivery</p>
+    </header>
+    
+    <div class="infinity-loop-container">
+        <div class="infinity-loop">
+            <img src="/static/img/homepage-infinity-loop.png" 
+                 alt="Development Lifecycle" 
+                 class="infinity-bg"
+                 onerror="this.style.display='none'">
+            
+            ${stageButtons}
+            
+            <span class="loop-label control">CONTROL</span>
+            <span class="loop-label transparency">TRANSPARENCY</span>
+        </div>
+    </div>
+    
+    <footer class="homepage-legend">
+        <span class="legend-control">● Control (What AI Does)</span>
+        <span class="legend-transparency">● Transparency (What We See)</span>
+    </footer>
+    
+    <div class="homepage-tooltip" id="homepage-tooltip" style="display: none;">
+        <span class="tooltip-text"></span>
+    </div>
+</div>
+`;
+    }
+
+    /**
+     * Render stage buttons HTML
+     * @returns {string} Stage buttons HTML
+     */
+    static _renderStageButtons() {
+        const buttons = [];
+        
+        for (const [stageId, config] of Object.entries(this.STAGE_MAPPING)) {
+            const tbdClass = config.status === 'tbd' ? ' tbd' : '';
+            const tbdAttr = config.status === 'tbd' ? ' data-tbd="true"' : '';
+            const tbdBadge = config.status === 'tbd' ? '<span class="tbd-badge">TBD</span>' : '';
+            
+            buttons.push(`
+            <button class="stage-btn ${config.theme}${tbdClass}"
+                    data-stage="${stageId}"
+                    data-section="${config.section}"
+                    data-selector="${config.selector || ''}"
+                    style="left: ${config.position.left}; top: ${config.position.top};"
+                    ${tbdAttr}>
+                <span class="stage-icon">${config.icon}</span>
+                <span class="stage-label">${config.label}</span>
+                ${tbdBadge}
+            </button>
+            `);
+        }
+        
+        return buttons.join('\n');
+    }
+
+    /**
+     * Initialize homepage with sidebar reference
+     * @param {ProjectSidebar} sidebar - Sidebar instance for navigation
+     */
+    static init(sidebar) {
+        this.sidebar = sidebar;
+        this._bindStageClicks();
+    }
+
+    /**
+     * Bind click handlers to stage buttons
+     */
+    static _bindStageClicks() {
+        const buttons = document.querySelectorAll('.stage-btn');
+        
+        buttons.forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                const stage = e.currentTarget.dataset.stage;
+                this.navigateToStage(stage);
+            });
+        });
+    }
+
+    /**
+     * Navigate to a stage's corresponding sidebar item
+     * @param {string} stage - Stage name (e.g., 'ideation')
+     */
+    static navigateToStage(stage) {
+        const config = this.STAGE_MAPPING[stage];
+        
+        if (!config) {
+            console.warn(`Unknown stage: ${stage}`);
+            return;
+        }
+        
+        // Handle TBD stages
+        if (config.status === 'tbd') {
+            this._showTooltip(stage, 'Coming Soon');
+            return;
+        }
+        
+        // Navigate to sidebar item
+        if (config.selector && this.sidebar) {
+            // Expand the section first
+            this._expandSection(config.section);
+            
+            // Then highlight and scroll to item
+            this._highlightItem(config.selector);
+        }
+    }
+
+    /**
+     * Expand a sidebar section
+     * @param {string} sectionId - Section ID to expand
+     */
+    static _expandSection(sectionId) {
+        // Main app uses data-section-id, workplace uses data-section
+        const sectionHeader = document.querySelector(`[data-section-id="${sectionId}"] .nav-section-header`) ||
+                              document.querySelector(`[data-section="${sectionId}"] .section-header`);
+        if (sectionHeader) {
+            const section = sectionHeader.closest('.nav-section, .sidebar-section');
+            // Check if section is collapsed (submenu hidden)
+            const submenu = section?.querySelector('.sidebar-submenu');
+            if (submenu && submenu.style.display === 'none') {
+                sectionHeader.click();
+            }
+        }
+        
+        // Also try using sidebar API if available
+        if (this.sidebar && typeof this.sidebar.expandSection === 'function') {
+            this.sidebar.expandSection(sectionId);
+        }
+    }
+
+    /**
+     * Highlight a sidebar item
+     * @param {string} selector - CSS selector for target item
+     */
+    static _highlightItem(selector) {
+        // Try multiple selector patterns
+        let item = document.querySelector(selector);
+        
+        // If not found, try finding by text content in sidebar
+        if (!item && selector.includes('ideas')) {
+            item = document.querySelector('[data-section-id="workplace"] .nav-section-header');
+        } else if (!item && selector.includes('requirements')) {
+            item = document.querySelector('[data-section-id="project"] .nav-section-header');
+        } else if (!item && selector.includes('planning')) {
+            item = document.querySelector('[data-section-id="management"] .nav-section-header');
+        }
+        
+        if (!item) {
+            console.warn(`Sidebar item not found: ${selector}`);
+            return;
+        }
+        
+        // Remove any existing highlights
+        document.querySelectorAll('.homepage-highlight').forEach(el => {
+            el.classList.remove('homepage-highlight');
+        });
+        
+        // Add highlight class
+        item.classList.add('homepage-highlight');
+        
+        // Scroll into view
+        item.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        
+        // Remove highlight after delay (3 seconds)
+        setTimeout(() => {
+            item.classList.remove('homepage-highlight');
+        }, 3000);
+    }
+
+    /**
+     * Show tooltip near a stage button
+     * @param {string} stage - Stage name
+     * @param {string} message - Tooltip message
+     */
+    static _showTooltip(stage, message) {
+        const tooltip = document.getElementById('homepage-tooltip');
+        const button = document.querySelector(`[data-stage="${stage}"]`);
+        
+        if (!tooltip || !button) return;
+        
+        // Set message
+        tooltip.querySelector('.tooltip-text').textContent = message;
+        
+        // Position near button
+        const rect = button.getBoundingClientRect();
+        tooltip.style.left = `${rect.left + rect.width / 2}px`;
+        tooltip.style.top = `${rect.bottom + 8}px`;
+        tooltip.style.display = 'block';
+        
+        // Clear existing timeout
+        if (this.tooltipTimeout) {
+            clearTimeout(this.tooltipTimeout);
+        }
+        
+        // Hide after 2 seconds
+        this.tooltipTimeout = setTimeout(() => {
+            this._hideTooltip();
+        }, 2000);
+    }
+
+    /**
+     * Hide tooltip
+     */
+    static _hideTooltip() {
+        const tooltip = document.getElementById('homepage-tooltip');
+        if (tooltip) {
+            tooltip.style.display = 'none';
+        }
+    }
+}
+
+// Export for use in workplace.js
+if (typeof window !== 'undefined') {
+    window.HomepageInfinity = HomepageInfinity;
+}

x_ipe/static/js/features/kb-core.js

@@ -0,0 +1,371 @@
+/**
+ * FEATURE-025-A: KB Core Infrastructure
+ * 
+ * Frontend JavaScript for Knowledge Base page.
+ * Uses two-column layout (like Ideation view) with tree on left of content area.
+ */
+
+const kbCore = {
+    index: null,
+    topics: [],
+    searchTerm: '',
+    container: null,
+
+    /**
+     * Render the Knowledge Base view in a container (like WorkplaceManager)
+     */
+    render(container) {
+        this.container = container;
+        container.innerHTML = `
+            <div class="kb-container">
+                <div class="kb-sidebar pinned" id="kb-sidebar">
+                    <div class="kb-sidebar-header">
+                        <span class="kb-sidebar-title">Knowledge Base</span>
+                        <button class="kb-refresh-btn" id="btn-refresh-index" title="Refresh index">
+                            <i class="bi bi-arrow-clockwise"></i>
+                        </button>
+                    </div>
+                    <div class="kb-search-box">
+                        <input type="text" class="kb-search-input" id="kb-search" placeholder="Search files...">
+                    </div>
+                    <div class="kb-tree" id="kb-tree">
+                        <div class="kb-loading"><i class="bi bi-hourglass-split"></i> Loading...</div>
+                    </div>
+                </div>
+                <div class="kb-content" id="kb-content">
+                    <div class="kb-placeholder">
+                        <i class="bi bi-archive"></i>
+                        <h5>Knowledge Base</h5>
+                        <p class="text-muted">Select a file from the tree to view</p>
+                    </div>
+                </div>
+            </div>
+        `;
+        this.init();
+    },
+
+    /**
+     * Initialize the Knowledge Base view.
+     * Fetches index and renders tree + content.
+     */
+    async init() {
+        console.log('[KB] Initializing Knowledge Base view');
+        
+        // Bind event handlers
+        this.bindEvents();
+        
+        // Load initial data
+        await this.loadIndex();
+        
+        // Render UI
+        this.renderTree();
+        this.renderWelcome();
+    },
+
+    /**
+     * Bind DOM event handlers.
+     */
+    bindEvents() {
+        // Refresh button
+        const refreshBtn = document.getElementById('btn-refresh-index');
+        if (refreshBtn) {
+            refreshBtn.addEventListener('click', () => this.refreshIndex());
+        }
+
+        // Search input
+        const searchInput = document.getElementById('kb-search');
+        if (searchInput) {
+            searchInput.addEventListener('input', (e) => {
+                this.searchTerm = e.target.value.toLowerCase();
+                this.renderTree();
+            });
+        }
+    },
+
+    /**
+     * Load file index from API.
+     */
+    async loadIndex() {
+        try {
+            const response = await fetch('/api/kb/index');
+            if (response.ok) {
+                this.index = await response.json();
+                console.log('[KB] Index loaded:', this.index.files?.length || 0, 'files');
+            } else {
+                console.error('[KB] Failed to load index:', response.status);
+                this.index = { version: '1.0', last_updated: null, files: [] };
+            }
+        } catch (error) {
+            console.error('[KB] Error loading index:', error);
+            this.index = { version: '1.0', last_updated: null, files: [] };
+        }
+
+        // Also load topics
+        try {
+            const response = await fetch('/api/kb/topics');
+            if (response.ok) {
+                const data = await response.json();
+                this.topics = data.topics || [];
+            }
+        } catch (error) {
+            console.error('[KB] Error loading topics:', error);
+            this.topics = [];
+        }
+    },
+
+    /**
+     * Refresh index from file system.
+     */
+    async refreshIndex() {
+        const refreshBtn = document.getElementById('btn-refresh-index');
+        if (refreshBtn) {
+            refreshBtn.disabled = true;
+            refreshBtn.innerHTML = '<i class="bi bi-hourglass-split"></i>';
+        }
+
+        try {
+            const response = await fetch('/api/kb/index/refresh', { method: 'POST' });
+            if (response.ok) {
+                this.index = await response.json();
+                console.log('[KB] Index refreshed:', this.index.files?.length || 0, 'files');
+                
+                // Reload topics
+                await this.loadIndex();
+                
+                // Re-render
+                this.renderTree();
+            }
+        } catch (error) {
+            console.error('[KB] Error refreshing index:', error);
+        } finally {
+            if (refreshBtn) {
+                refreshBtn.disabled = false;
+                refreshBtn.innerHTML = '<i class="bi bi-arrow-clockwise"></i>';
+            }
+        }
+    },
+
+    /**
+     * Render the tree in kb-sidebar (within content area).
+     */
+    renderTree() {
+        const container = document.getElementById('kb-tree');
+        if (!container) return;
+
+        const files = this.index?.files || [];
+        
+        // Filter by search term
+        const filteredFiles = this.searchTerm
+            ? files.filter(f => 
+                f.name.toLowerCase().includes(this.searchTerm) ||
+                f.topic?.toLowerCase().includes(this.searchTerm) ||
+                f.keywords?.some(k => k.includes(this.searchTerm))
+              )
+            : files;
+
+        // Group by folder structure
+        const landing = filteredFiles.filter(f => f.path.startsWith('landing/'));
+        const byTopic = {};
+        
+        filteredFiles.forEach(f => {
+            if (f.topic && !f.path.startsWith('landing/')) {
+                if (!byTopic[f.topic]) byTopic[f.topic] = [];
+                byTopic[f.topic].push(f);
+            }
+        });
+
+        // Build HTML
+        let html = '';
+        
+        // Landing folder
+        html += `
+            <div class="kb-folder">
+                <div class="kb-folder-header" data-folder="landing">
+                    <i class="bi bi-chevron-down"></i>
+                    <i class="bi bi-inbox text-warning"></i>
+                    <span>Landing (${landing.length})</span>
+                </div>
+                <div class="kb-folder-files">
+                    ${landing.map(f => this.renderFileItem(f)).join('')}
+                    ${landing.length === 0 ? '<div class="kb-empty">No files</div>' : ''}
+                </div>
+            </div>
+        `;
+
+        // Topic folders
+        const sortedTopics = Object.keys(byTopic).sort();
+        sortedTopics.forEach(topic => {
+            const topicFiles = byTopic[topic];
+            html += `
+                <div class="kb-folder">
+                    <div class="kb-folder-header" data-folder="${topic}">
+                        <i class="bi bi-chevron-down"></i>
+                        <i class="bi bi-folder text-info"></i>
+                        <span>${topic} (${topicFiles.length})</span>
+                    </div>
+                    <div class="kb-folder-files">
+                        ${topicFiles.map(f => this.renderFileItem(f)).join('')}
+                    </div>
+                </div>
+            `;
+        });
+
+        // Empty topics placeholder
+        if (sortedTopics.length === 0 && landing.length === 0) {
+            html += '<div class="kb-empty-state"><i class="bi bi-archive"></i><p>No files in Knowledge Base</p></div>';
+        }
+
+        container.innerHTML = html;
+
+        // Bind folder toggle events
+        container.querySelectorAll('.kb-folder-header').forEach(header => {
+            header.addEventListener('click', (e) => {
+                const folder = e.currentTarget.closest('.kb-folder');
+                folder.classList.toggle('collapsed');
+                const icon = e.currentTarget.querySelector('i:first-child');
+                icon.classList.toggle('bi-chevron-down');
+                icon.classList.toggle('bi-chevron-right');
+            });
+        });
+
+        // Bind file click events
+        container.querySelectorAll('.kb-file-item').forEach(item => {
+            item.addEventListener('click', () => {
+                // Remove active from others
+                container.querySelectorAll('.kb-file-item').forEach(i => i.classList.remove('active'));
+                item.classList.add('active');
+                
+                const path = item.dataset.path;
+                this.showFilePreview(path);
+            });
+        });
+    },
+
+    /**
+     * Render a single file item in the sidebar.
+     */
+    renderFileItem(file) {
+        const icon = this.getFileIcon(file.type);
+        return `
+            <div class="kb-file-item" data-path="${file.path}" title="${file.name}">
+                <i class="bi ${icon}"></i>
+                <span class="kb-file-name">${file.name}</span>
+            </div>
+        `;
+    },
+
+    /**
+     * Get Bootstrap icon class for file type.
+     */
+    getFileIcon(type) {
+        const icons = {
+            'pdf': 'bi-file-earmark-pdf text-danger',
+            'markdown': 'bi-markdown text-info',
+            'text': 'bi-file-text',
+            'docx': 'bi-file-earmark-word text-primary',
+            'xlsx': 'bi-file-earmark-excel text-success',
+            'python': 'bi-filetype-py text-warning',
+            'javascript': 'bi-filetype-js text-warning',
+            'typescript': 'bi-filetype-tsx text-primary',
+            'java': 'bi-filetype-java text-danger',
+            'json': 'bi-filetype-json text-warning',
+            'html': 'bi-filetype-html text-danger',
+            'css': 'bi-filetype-css text-info',
+            'image': 'bi-file-image text-success',
+            'unknown': 'bi-file-earmark'
+        };
+        return icons[type] || icons['unknown'];
+    },
+
+    /**
+     * Render welcome/placeholder in content area.
+     */
+    renderWelcome() {
+        const content = document.getElementById('kb-content');
+        if (!content) return;
+        
+        const files = this.index?.files || [];
+        const landing = files.filter(f => f.path.startsWith('landing/'));
+        
+        content.innerHTML = `
+            <div class="kb-welcome">
+                <div class="kb-stats mb-4">
+                    <span class="badge bg-secondary me-2">${files.length} files</span>
+                    <span class="badge bg-info">${this.topics.length} topics</span>
+                </div>
+                <div class="kb-section">
+                    <h6><i class="bi bi-inbox text-warning me-2"></i>Landing (Unprocessed)</h6>
+                    <div class="kb-landing-list">
+                        ${landing.length > 0 ? landing.map(f => `
+                            <div class="kb-landing-file">
+                                <i class="bi ${this.getFileIcon(f.type)}"></i>
+                                <span>${f.name}</span>
+                                <span class="text-muted small ms-auto">${this.formatSize(f.size)}</span>
+                            </div>
+                        `).join('') : '<p class="text-muted small">No files in landing folder</p>'}
+                    </div>
+                </div>
+                <div class="kb-section mt-4">
+                    <h6><i class="bi bi-folder text-info me-2"></i>Topics</h6>
+                    <div class="kb-topics-grid">
+                        ${this.topics.length > 0 ? this.topics.map(topic => {
+                            const topicFiles = files.filter(f => f.topic === topic);
+                            return `
+                                <div class="kb-topic-card">
+                                    <i class="bi bi-folder me-2"></i>${topic}
+                                    <span class="badge bg-secondary ms-auto">${topicFiles.length}</span>
+                                </div>
+                            `;
+                        }).join('') : '<p class="text-muted small">No topics created yet</p>'}
+                    </div>
+                </div>
+            </div>
+        `;
+    },
+
+    /**
+     * Show file preview in content area.
+     */
+    async showFilePreview(path) {
+        const content = document.getElementById('kb-content');
+        if (!content) return;
+        
+        const file = this.index?.files?.find(f => f.path === path);
+        if (!file) {
+            content.innerHTML = '<div class="kb-error">File not found</div>';
+            return;
+        }
+        
+        content.innerHTML = `
+            <div class="kb-file-preview">
+                <div class="kb-file-header">
+                    <i class="bi ${this.getFileIcon(file.type)} fs-4"></i>
+                    <div class="kb-file-info">
+                        <h6 class="mb-0">${file.name}</h6>
+                        <small class="text-muted">${file.path} · ${this.formatSize(file.size)}</small>
+                    </div>
+                </div>
+                <div class="kb-file-meta mt-3">
+                    <span class="badge bg-secondary me-1">${file.type}</span>
+                    ${file.topic ? `<span class="badge bg-info me-1">${file.topic}</span>` : ''}
+                    ${(file.keywords || []).map(k => `<span class="badge bg-outline-secondary me-1">${k}</span>`).join('')}
+                </div>
+                <div class="kb-file-content mt-3">
+                    <p class="text-muted small">File preview coming in a future release.</p>
+                </div>
+            </div>
+        `;
+    },
+
+    /**
+     * Format file size for display.
+     */
+    formatSize(bytes) {
+        if (bytes < 1024) return bytes + ' B';
+        if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+        return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+    }
+};
+
+// Export for use in template
+window.kbCore = kbCore;