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

x_ipe/static/js/features/workplace.js

@@ -4,10 +4,12 @@
  * 
  * Two-column view for managing ideas with upload, tree navigation,
  * inline editing with auto-save, and folder rename.
+ * 
+ * CR-006: Added folder view panel, drag-drop, and search functionality.
  */
 class WorkplaceManager {
     constructor() {
-        this.currentView = 'tree'; // tree | upload | editor
+        this.currentView = 'tree'; // tree | upload | editor | folderView | tracing | homepage
         this.currentPath = null;
         this.saveTimer = null;
         this.saveDelay = 5000; // 5 seconds auto-save delay
@@ -24,6 +26,19 @@ class WorkplaceManager {
         this.easyMDE = null; // EasyMDE editor instance for compose view
         this.copilotPrompts = []; // Loaded from x-ipe-docs/config/copilot-prompt.json
         this.targetFolderPath = null; // Target folder for compose/upload (null = create new folder)
+        
+        // CR-006: New managers
+        this.folderViewManager = null;
+        this.treeSearchManager = null;
+        this.treeDragManager = null;
+        this.confirmDialog = null;
+        
+        // FEATURE-023-B: Tracing Dashboard
+        this.tracingDashboard = null;
+        
+        // FEATURE-026: Homepage reference
+        this.sidebarRef = null;
+        
         this._loadCopilotPrompts();
     }
     
@@ -35,7 +50,8 @@ class WorkplaceManager {
             const response = await fetch('/api/config/copilot-prompt');
             if (response.ok) {
                 const data = await response.json();
-                this.copilotPrompts = data.prompts || [];
+                // TASK-196: Config structure is data.ideation.prompts, not data.prompts
+                this.copilotPrompts = data.ideation?.prompts || [];
             }
         } catch (error) {
             console.warn('Failed to load copilot prompts:', error);
@@ -52,16 +68,27 @@ class WorkplaceManager {
             <div class="workplace-container">
                 <div class="workplace-sidebar pinned" id="workplace-sidebar">
                     <div class="workplace-sidebar-icons">
-                        <button class="workplace-sidebar-icon" title="Browse Ideas" id="workplace-icon-browse">
+                        <button class="workplace-sidebar-icon active" title="Browse Ideas" id="workplace-icon-browse">
                             <i class="bi bi-folder2"></i>
                         </button>
+                        <button class="workplace-sidebar-icon" title="Tracing Dashboard" id="workplace-icon-tracing">
+                            <i class="bi bi-graph-up"></i>
+                        </button>
                     </div>
                     <div class="workplace-sidebar-content">
                         <div class="workplace-sidebar-header">
                             <span class="workplace-sidebar-title">Ideas</span>
-                            <button class="workplace-pin-btn" title="Unpin sidebar" id="workplace-pin-btn">
-                                <i class="bi bi-pin-angle-fill"></i>
-                            </button>
+                            <div class="workplace-sidebar-header-actions">
+                                <button class="workplace-create-folder-btn" title="Create new folder" id="workplace-create-folder-btn">
+                                    <i class="bi bi-folder-plus"></i>
+                                </button>
+                                <button class="workplace-collapse-all-btn" title="Collapse all folders" id="workplace-collapse-all-btn">
+                                    <i class="bi bi-arrows-collapse"></i>
+                                </button>
+                                <button class="workplace-pin-btn" title="Unpin sidebar" id="workplace-pin-btn">
+                                    <i class="bi bi-pin-angle-fill"></i>
+                                </button>
+                            </div>
                         </div>
                         <div class="workplace-tree" id="workplace-tree">
                             <div class="loading-spinner">
@@ -84,9 +111,12 @@ class WorkplaceManager {
         
         // Bind sidebar icon events
         document.getElementById('workplace-icon-browse').addEventListener('click', () => {
-            // Toggle expanded state on mobile/touch
-            const sidebar = document.getElementById('workplace-sidebar');
-            sidebar.classList.toggle('expanded');
+            this._switchToIdeasView();
+        });
+        
+        // FEATURE-023-B: Tracing icon event
+        document.getElementById('workplace-icon-tracing').addEventListener('click', () => {
+            this._switchToTracingView();
         });
         
         // Bind pin button
@@ -108,9 +138,220 @@ class WorkplaceManager {
             }
         });
         
+        // Bind create folder button
+        document.getElementById('workplace-create-folder-btn').addEventListener('click', () => {
+            this._createFolder(); // Create new folder at root level
+        });
+        
+        // Bind collapse all button
+        document.getElementById('workplace-collapse-all-btn').addEventListener('click', () => {
+            this._collapseAllFolders();
+        });
+        
         // Load tree and start polling
         await this.loadTree();
         this._startPolling();
+        
+        // CR-006: Initialize new managers
+        this._initCR006Managers();
+    }
+    
+    /**
+     * CR-006: Initialize folder view, search, and drag-drop managers
+     */
+    _initCR006Managers() {
+        const treeContainer = document.getElementById('workplace-tree');
+        const contentContainer = document.getElementById('workplace-content');
+        
+        if (!treeContainer || !contentContainer) return;
+        
+        // Initialize confirm dialog
+        if (typeof ConfirmDialog !== 'undefined') {
+            this.confirmDialog = new ConfirmDialog();
+        }
+        
+        // Initialize folder view manager
+        if (typeof FolderViewManager !== 'undefined') {
+            this.folderViewManager = new FolderViewManager({
+                container: contentContainer,
+                onAction: async (action, path, data) => {
+                    return await this._handleFolderViewAction(action, path, data);
+                },
+                onNavigate: (path) => {
+                    this.openFile(path);
+                },
+                onClose: () => {
+                    this._closeFolderView();
+                }
+            });
+            this.folderViewManager.init();
+        }
+        
+        // Initialize search manager
+        if (typeof TreeSearchManager !== 'undefined') {
+            this.treeSearchManager = new TreeSearchManager({
+                treeContainer: treeContainer
+            });
+            this.treeSearchManager.init();
+        }
+        
+        // Initialize drag manager
+        if (typeof TreeDragManager !== 'undefined') {
+            this.treeDragManager = new TreeDragManager({
+                treeContainer: treeContainer,
+                onMove: async (sourcePath, targetPath) => {
+                    return await this._handleMoveItem(sourcePath, targetPath);
+                },
+                onMoveComplete: () => {
+                    this.loadTree();
+                }
+            });
+            this.treeDragManager.init();
+        }
+    }
+    
+    /**
+     * CR-006: Handle folder view actions
+     */
+    async _handleFolderViewAction(action, path, data) {
+        try {
+            switch (action) {
+                case 'add-file':
+                    this.showUploadView(path);
+                    return true;
+                    
+                case 'add-folder':
+                    // Prompt for folder name and create via API
+                    const folderName = prompt('Enter folder name:');
+                    if (folderName && folderName.trim()) {
+                        const response = await fetch('/api/ideas/create-folder', {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json'
+                            },
+                            body: JSON.stringify({
+                                folder_name: folderName.trim(),
+                                parent_folder: path
+                            })
+                        });
+                        const result = await response.json();
+                        if (result.success) {
+                            this._showToast(`Folder "${result.folder_name}" created`, 'success');
+                            await this.loadTree();
+                        } else {
+                            this._showToast(result.error || 'Failed to create folder', 'error');
+                        }
+                        return result.success;
+                    }
+                    return false;
+                    
+                case 'rename':
+                    const newName = prompt(`Rename "${data.name || path.split('/').pop()}" to:`, data.name || path.split('/').pop());
+                    if (newName && newName !== data.name) {
+                        if (data.type === 'folder') {
+                            const result = await this._renameFolder(path, newName);
+                            return result.success;
+                        } else {
+                            const result = await this._renameFile(path, newName);
+                            return result.success;
+                        }
+                    }
+                    return false;
+                    
+                case 'delete':
+                    const deleteResult = await this._deleteItem(path);
+                    if (deleteResult.success) {
+                        this.loadTree();
+                    }
+                    return deleteResult.success;
+                    
+                case 'duplicate':
+                    const dupResponse = await fetch('/api/ideas/duplicate', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ path: path })
+                    });
+                    const dupResult = await dupResponse.json();
+                    if (dupResult.success) {
+                        this._showToast('Item duplicated', 'success');
+                        this.loadTree();
+                    }
+                    return dupResult.success;
+                
+                // TASK-241: Handle move action from folder view drag-drop
+                case 'move':
+                    const moveResult = await this._handleMoveItem(path, data.targetPath);
+                    if (moveResult) {
+                        this.loadTree();
+                    }
+                    return moveResult;
+                    
+                default:
+                    console.warn('Unknown folder view action:', action);
+                    return false;
+            }
+        } catch (error) {
+            console.error('Folder view action failed:', error);
+            this._showToast('Action failed', 'error');
+            return false;
+        }
+    }
+    
+    /**
+     * CR-006: Handle move item via drag-drop
+     */
+    async _handleMoveItem(sourcePath, targetPath) {
+        try {
+            const response = await fetch('/api/ideas/move', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    source_path: sourcePath,
+                    target_folder: targetPath
+                })
+            });
+            
+            const result = await response.json();
+            
+            if (result.success) {
+                this._showToast('Item moved', 'success');
+                return true;
+            } else {
+                this._showToast(result.error || 'Move failed', 'error');
+                return false;
+            }
+        } catch (error) {
+            console.error('Move failed:', error);
+            this._showToast('Move failed', 'error');
+            return false;
+        }
+    }
+    
+    /**
+     * CR-006: Open folder view for a folder
+     */
+    openFolderView(folderPath) {
+        if (this.folderViewManager) {
+            this.currentView = 'folderView';
+            this.folderViewManager.render(folderPath);
+        }
+    }
+    
+    /**
+     * CR-006: Close folder view and return to placeholder
+     */
+    _closeFolderView() {
+        this.currentView = 'tree';
+        const contentContainer = document.getElementById('workplace-content');
+        if (contentContainer) {
+            contentContainer.innerHTML = `
+                <div class="workplace-placeholder">
+                    <i class="bi bi-lightbulb"></i>
+                    <h5>Welcome to Workplace</h5>
+                    <p class="text-muted">Click a file to preview, or click the folder arrow to browse contents</p>
+                </div>
+            `;
+        }
     }
     
     /**
@@ -216,6 +457,18 @@ class WorkplaceManager {
         return expanded;
     }
     
+    /**
+     * Collapse all expanded folders in the tree
+     */
+    _collapseAllFolders() {
+        const container = document.getElementById('workplace-tree');
+        if (!container) return;
+        const expandedItems = container.querySelectorAll('.workplace-tree-item.expanded');
+        expandedItems.forEach(item => {
+            item.classList.remove('expanded');
+        });
+    }
+    
     /**
      * Restore expanded state to folders after re-rendering
      */
@@ -257,11 +510,15 @@ class WorkplaceManager {
         
         for (const node of nodes) {
             const li = document.createElement('li');
-            li.className = 'workplace-tree-item';
+            li.className = 'workplace-tree-item tree-item'; // CR-006: Added tree-item for drag-drop
             li.dataset.path = node.path;
             li.dataset.type = node.type;
             li.dataset.name = node.name;
             
+            // CR-006: Enable drag-drop
+            li.setAttribute('draggable', 'true');
+            li.dataset.draggable = 'true';
+            
             const itemContent = document.createElement('div');
             itemContent.className = 'workplace-tree-item-content';
             // CR-002: Add idea-folder-node class and data for drag-drop targets
@@ -275,8 +532,9 @@ class WorkplaceManager {
             const icon = document.createElement('i');
             icon.className = node.type === 'folder' ? 'bi bi-folder' : 'bi bi-file-earmark';
             
+            // CR-006: Add tree-label class for search matching
             const nameSpan = document.createElement('span');
-            nameSpan.className = 'workplace-tree-name';
+            nameSpan.className = 'workplace-tree-name tree-label';
             nameSpan.textContent = node.name;
             
             // Action buttons container
@@ -333,16 +591,31 @@ class WorkplaceManager {
                 actionBtns.appendChild(renameBtn);
             }
             
-            // Delete button
-            const deleteBtn = document.createElement('button');
-            deleteBtn.className = 'workplace-tree-action-btn workplace-tree-delete-btn';
-            deleteBtn.innerHTML = '<i class="bi bi-trash"></i>';
-            deleteBtn.title = `Delete ${node.type}`;
-            deleteBtn.addEventListener('click', (e) => {
-                e.stopPropagation();
-                this.confirmDelete(node.path, node.name, node.type);
-            });
-            actionBtns.appendChild(deleteBtn);
+            // Delete button (only for files - folders can be deleted in folder view)
+            if (node.type === 'file') {
+                const deleteBtn = document.createElement('button');
+                deleteBtn.className = 'workplace-tree-action-btn workplace-tree-delete-btn';
+                deleteBtn.innerHTML = '<i class="bi bi-trash"></i>';
+                deleteBtn.title = `Delete ${node.type}`;
+                deleteBtn.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    this.confirmDelete(node.path, node.name, node.type);
+                });
+                actionBtns.appendChild(deleteBtn);
+            }
+            
+            // CR-006: Folder view button (">") for folders - positioned at right
+            if (node.type === 'folder') {
+                const folderViewBtn = document.createElement('button');
+                folderViewBtn.className = 'workplace-tree-action-btn tree-folder-view-btn';
+                folderViewBtn.innerHTML = '<i class="bi bi-box-arrow-in-right"></i>';
+                folderViewBtn.title = 'Enter folder view';
+                folderViewBtn.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    this.openFolderView(node.path);
+                });
+                actionBtns.appendChild(folderViewBtn);
+            }
             
             itemContent.appendChild(icon);
             itemContent.appendChild(nameSpan);
@@ -393,11 +666,15 @@ class WorkplaceManager {
         
         for (const node of nodes) {
             const li = document.createElement('li');
-            li.className = 'workplace-tree-item';
+            li.className = 'workplace-tree-item tree-item'; // CR-006: Added tree-item for drag-drop
             li.dataset.path = node.path;
             li.dataset.type = node.type;
             li.dataset.name = node.name;
             
+            // CR-006: Enable drag-drop
+            li.setAttribute('draggable', 'true');
+            li.dataset.draggable = 'true';
+            
             const itemContent = document.createElement('div');
             itemContent.className = 'workplace-tree-item-content';
             // CR-002: Add idea-folder-node class and data for drag-drop targets
@@ -411,8 +688,9 @@ class WorkplaceManager {
             const icon = document.createElement('i');
             icon.className = node.type === 'folder' ? 'bi bi-folder' : 'bi bi-file-earmark';
             
+            // CR-006: Add tree-label class for search matching
             const nameSpan = document.createElement('span');
-            nameSpan.className = 'workplace-tree-name';
+            nameSpan.className = 'workplace-tree-name tree-label';
             nameSpan.textContent = node.name;
             
             // Action buttons container
@@ -443,16 +721,31 @@ class WorkplaceManager {
                 actionBtns.appendChild(renameBtn);
             }
             
-            // Delete button
-            const deleteBtn = document.createElement('button');
-            deleteBtn.className = 'workplace-tree-action-btn workplace-tree-delete-btn';
-            deleteBtn.innerHTML = '<i class="bi bi-trash"></i>';
-            deleteBtn.title = `Delete ${node.type}`;
-            deleteBtn.addEventListener('click', (e) => {
-                e.stopPropagation();
-                this.confirmDelete(node.path, node.name, node.type);
-            });
-            actionBtns.appendChild(deleteBtn);
+            // Delete button (only for files - folders can be deleted in folder view)
+            if (node.type === 'file') {
+                const deleteBtn = document.createElement('button');
+                deleteBtn.className = 'workplace-tree-action-btn workplace-tree-delete-btn';
+                deleteBtn.innerHTML = '<i class="bi bi-trash"></i>';
+                deleteBtn.title = `Delete ${node.type}`;
+                deleteBtn.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    this.confirmDelete(node.path, node.name, node.type);
+                });
+                actionBtns.appendChild(deleteBtn);
+            }
+            
+            // CR-006: Folder view button for nested folders - positioned at right
+            if (node.type === 'folder') {
+                const folderViewBtn = document.createElement('button');
+                folderViewBtn.className = 'workplace-tree-action-btn tree-folder-view-btn';
+                folderViewBtn.innerHTML = '<i class="bi bi-box-arrow-in-right"></i>';
+                folderViewBtn.title = 'Enter folder view';
+                folderViewBtn.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    this.openFolderView(node.path);
+                });
+                actionBtns.appendChild(folderViewBtn);
+            }
             
             itemContent.appendChild(icon);
             itemContent.appendChild(nameSpan);
@@ -493,6 +786,9 @@ class WorkplaceManager {
         const nameSpan = li.querySelector('.workplace-tree-name');
         const originalName = currentName;
         
+        // Disable drag during editing to allow text selection
+        li.setAttribute('draggable', 'false');
+        
         const input = document.createElement('input');
         input.type = 'text';
         input.className = 'workplace-rename-input';
@@ -506,8 +802,12 @@ class WorkplaceManager {
             if (!this.renamingFolder) return;
             
             const newName = input.value.trim();
+            const liElement = this.renamingFolder;
             this.renamingFolder = null;
             
+            // Re-enable drag after editing
+            liElement.setAttribute('draggable', 'true');
+            
             if (save && newName && newName !== originalName) {
                 try {
                     const response = await fetch('/api/ideas/rename', {
@@ -584,6 +884,9 @@ class WorkplaceManager {
         const nameSpan = li.querySelector('.workplace-tree-name');
         const originalName = currentName;
         
+        // Disable drag during editing to allow text selection
+        li.setAttribute('draggable', 'false');
+        
         const input = document.createElement('input');
         input.type = 'text';
         input.className = 'workplace-rename-input';
@@ -597,8 +900,12 @@ class WorkplaceManager {
             if (!this.renamingFolder) return;
             
             const newName = input.value.trim();
+            const liElement = this.renamingFolder;
             this.renamingFolder = null;
             
+            // Re-enable drag after editing
+            liElement.setAttribute('draggable', 'true');
+            
             if (save && newName && newName !== originalName) {
                 try {
                     const response = await fetch('/api/ideas/rename-file', {
@@ -681,6 +988,9 @@ class WorkplaceManager {
         this.hasUnsavedChanges = false;
         this.isEditing = false;
         
+        // Highlight parent folder in tree
+        this._highlightParentFolder(path);
+        
         // Detect file type
         const ext = path.split('.').pop().toLowerCase();
         this.fileExtension = ext;
@@ -1494,6 +1804,9 @@ class WorkplaceManager {
         this.hasUnsavedChanges = false;
         this.targetFolderPath = targetFolder;
         
+        // Clear folder highlight when leaving file view
+        this._highlightParentFolder(null);
+        
         // Build target folder indicator
         const folderName = targetFolder ? targetFolder.split('/').pop() : null;
         const targetIndicator = targetFolder ? `
@@ -2136,6 +2449,166 @@ class WorkplaceManager {
         }
     }
     
+    /**
+     * CR-006 Fix: Delete item wrapper for folder view (calls deleteItem API)
+     * @param {string} path - Path to delete
+     * @returns {Object} Result with success boolean
+     */
+    async _deleteItem(path) {
+        try {
+            const response = await fetch('/api/ideas/delete', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ path: path })
+            });
+            
+            const result = await response.json();
+            
+            if (result.success) {
+                const name = path.split('/').pop();
+                this._showToast(`Deleted: ${name}`, 'success');
+                
+                // If currently viewing the deleted file, clear the editor
+                if (this.currentPath && (this.currentPath === path || this.currentPath.startsWith(path + '/'))) {
+                    this.currentPath = null;
+                    this.hasUnsavedChanges = false;
+                }
+            } else {
+                this._showToast(result.error || 'Failed to delete', 'error');
+            }
+            
+            return result;
+        } catch (error) {
+            console.error('Failed to delete:', error);
+            this._showToast('Failed to delete', 'error');
+            return { success: false, error: error.message };
+        }
+    }
+    
+    /**
+     * CR-006 Fix: Rename file via API
+     * @param {string} path - File path
+     * @param {string} newName - New file name
+     * @returns {Object} Result with success boolean
+     */
+    async _renameFile(path, newName) {
+        try {
+            const response = await fetch('/api/ideas/rename-file', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    path: path,
+                    new_name: newName
+                })
+            });
+            
+            const result = await response.json();
+            
+            if (result.success) {
+                this._showToast('File renamed successfully', 'success');
+                
+                // Update currentPath if viewing this file
+                if (this.currentPath === path) {
+                    this.currentPath = result.new_path;
+                }
+                
+                await this.loadTree();
+            } else {
+                this._showToast(result.error || 'Failed to rename file', 'error');
+            }
+            
+            return result;
+        } catch (error) {
+            console.error('Failed to rename file:', error);
+            this._showToast('Failed to rename file', 'error');
+            return { success: false, error: error.message };
+        }
+    }
+    
+    /**
+     * CR-006 Fix: Rename folder via API
+     * @param {string} path - Folder path
+     * @param {string} newName - New folder name
+     * @returns {Object} Result with success boolean
+     */
+    async _renameFolder(path, newName) {
+        try {
+            // Extract the old folder name from path
+            const parts = path.split('/');
+            const oldName = parts.pop();
+            
+            const response = await fetch('/api/ideas/rename', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    old_name: oldName,
+                    new_name: newName
+                })
+            });
+            
+            const result = await response.json();
+            
+            if (result.success) {
+                this._showToast('Folder renamed successfully', 'success');
+                
+                // Update currentPath if viewing a file inside the renamed folder
+                if (this.currentPath) {
+                    const oldSegment = '/' + oldName + '/';
+                    const newSegment = '/' + newName + '/';
+                    if (this.currentPath.includes(oldSegment)) {
+                        this.currentPath = this.currentPath.replace(oldSegment, newSegment);
+                    }
+                }
+                
+                await this.loadTree();
+            } else {
+                this._showToast(result.error || 'Failed to rename folder', 'error');
+            }
+            
+            return result;
+        } catch (error) {
+            console.error('Failed to rename folder:', error);
+            this._showToast('Failed to rename folder', 'error');
+            return { success: false, error: error.message };
+        }
+    }
+    
+    /**
+     * Create a new empty folder at the root level or inside a parent folder
+     * @param {string|null} parentFolder - Optional parent folder path
+     */
+    async _createFolder(parentFolder = null) {
+        const folderName = prompt('Enter folder name:');
+        if (!folderName || !folderName.trim()) {
+            return;
+        }
+        
+        try {
+            const response = await fetch('/api/ideas/create-folder', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    folder_name: folderName.trim(),
+                    parent_folder: parentFolder
+                })
+            });
+            
+            const result = await response.json();
+            
+            if (result.success) {
+                this._showToast(`Folder "${result.folder_name}" created`, 'success');
+                await this.loadTree();
+            } else {
+                this._showToast(result.error || 'Failed to create folder', 'error');
+            }
+        } catch (error) {
+            console.error('Failed to create folder:', error);
+            this._showToast('Failed to create folder', 'error');
+        }
+    }
+    
     /**
      * Download a file from the idea folder
      */
@@ -2186,6 +2659,53 @@ class WorkplaceManager {
         }
     }
     
+    /**
+     * Highlight the parent folder of the currently previewed file
+     * Changes folder icon to yellow to indicate active file location
+     */
+    _highlightParentFolder(filePath) {
+        // Remove previous highlight
+        const previousHighlight = document.querySelectorAll('.workplace-tree-item.folder-highlighted');
+        previousHighlight.forEach(el => {
+            el.classList.remove('folder-highlighted');
+            const icon = el.querySelector('.workplace-tree-item-content > i.bi-folder, .workplace-tree-item-content > i.bi-folder-fill');
+            if (icon) {
+                icon.classList.remove('bi-folder-fill');
+                icon.classList.add('bi-folder');
+            }
+        });
+        
+        if (!filePath) return;
+        
+        // Get parent folder path
+        const pathParts = filePath.split('/');
+        pathParts.pop(); // Remove file name
+        const parentFolderPath = pathParts.join('/');
+        
+        if (!parentFolderPath) return;
+        
+        // Find and highlight the parent folder
+        const treeItems = document.querySelectorAll('.workplace-tree-item[data-type="folder"]');
+        for (const item of treeItems) {
+            if (item.dataset.path === parentFolderPath) {
+                item.classList.add('folder-highlighted');
+                const icon = item.querySelector('.workplace-tree-item-content > i.bi-folder');
+                if (icon) {
+                    icon.classList.remove('bi-folder');
+                    icon.classList.add('bi-folder-fill');
+                }
+                
+                // Expand parent folders to make highlighted folder visible
+                let parent = item.parentElement?.closest('.workplace-tree-item.has-children');
+                while (parent) {
+                    parent.classList.add('expanded');
+                    parent = parent.parentElement?.closest('.workplace-tree-item.has-children');
+                }
+                break;
+            }
+        }
+    }
+    
     /**
      * Escape HTML special characters
      */
@@ -2194,4 +2714,112 @@ class WorkplaceManager {
         div.textContent = text || '';
         return div.innerHTML;
     }
+    
+    // =========================================================================
+    // FEATURE-023-B: Tracing Dashboard View
+    // =========================================================================
+    
+    /**
+     * Switch to Ideas view (tree navigation)
+     */
+    _switchToIdeasView() {
+        // Update active icon
+        document.querySelectorAll('.workplace-sidebar-icon').forEach(icon => {
+            icon.classList.remove('active');
+        });
+        document.getElementById('workplace-icon-browse').classList.add('active');
+        
+        // Show sidebar content, hide tracing
+        const sidebarContent = document.querySelector('.workplace-sidebar-content');
+        if (sidebarContent) {
+            sidebarContent.style.display = '';
+        }
+        
+        // Destroy tracing dashboard if active
+        if (this.tracingDashboard) {
+            this.tracingDashboard.destroy();
+            this.tracingDashboard = null;
+        }
+        
+        // Restore content to placeholder or current view
+        const contentContainer = document.getElementById('workplace-content');
+        if (contentContainer && this.currentView === 'tracing') {
+            contentContainer.innerHTML = `
+                <div class="workplace-placeholder">
+                    <i class="bi bi-lightbulb"></i>
+                    <h5>Welcome to Workplace</h5>
+                    <p class="text-muted">Hover sidebar to browse ideas, or click pin to keep it open</p>
+                </div>
+            `;
+            this.currentView = 'tree';
+        }
+    }
+    
+    /**
+     * Switch to Tracing Dashboard view
+     */
+    _switchToTracingView() {
+        // Update active icon
+        document.querySelectorAll('.workplace-sidebar-icon').forEach(icon => {
+            icon.classList.remove('active');
+        });
+        document.getElementById('workplace-icon-tracing').classList.add('active');
+        
+        // Hide sidebar content (tree)
+        const sidebarContent = document.querySelector('.workplace-sidebar-content');
+        if (sidebarContent) {
+            sidebarContent.style.display = 'none';
+        }
+        
+        // Collapse sidebar to icons only
+        const sidebar = document.getElementById('workplace-sidebar');
+        if (sidebar) {
+            sidebar.classList.remove('pinned', 'expanded');
+        }
+        
+        // Initialize tracing dashboard
+        this.currentView = 'tracing';
+        const contentContainer = document.getElementById('workplace-content');
+        if (contentContainer && window.TracingDashboard) {
+            this.tracingDashboard = new window.TracingDashboard(contentContainer);
+            this.tracingDashboard.init();
+        } else if (contentContainer) {
+            contentContainer.innerHTML = `
+                <div class="workplace-placeholder">
+                    <i class="bi bi-graph-up"></i>
+                    <h5>Tracing Dashboard</h5>
+                    <p class="text-muted">Tracing module not loaded</p>
+                </div>
+            `;
+        }
+    }
+    
+    /**
+     * FEATURE-026: Show Homepage Infinity Loop
+     * Called when X-IPE logo is clicked or no file selected
+     */
+    showHomepage() {
+        this.currentView = 'homepage';
+        this.currentPath = null;
+        
+        // Try workplace-content first (workplace two-column view), then content-body (main app)
+        const contentContainer = document.getElementById('workplace-content') || 
+                                 document.getElementById('content-body');
+        if (!contentContainer) return;
+        
+        // Check if HomepageInfinity is available
+        if (typeof window.HomepageInfinity !== 'undefined') {
+            contentContainer.innerHTML = window.HomepageInfinity.getTemplate();
+            window.HomepageInfinity.init(this.sidebarRef);
+        } else {
+            // Fallback placeholder
+            contentContainer.innerHTML = `
+                <div class="workplace-placeholder">
+                    <i class="bi bi-infinity"></i>
+                    <h5>X-IPE</h5>
+                    <p class="text-muted">AI-Powered Development Lifecycle</p>
+                </div>
+            `;
+        }
+    }
 }