claude-code-workflow 6.3.27 → 6.3.28

package/ccw/src/templates/dashboard-js/views/api-settings.js

@@ -216,6 +216,11 @@ async function saveCliSettingsEndpoint(data) {
     const result = await response.json();
     showRefreshToast(t('apiSettings.settingsSaved'), 'success');
 
+    // Invalidate cache to ensure fresh data on page refresh
+    if (window.cacheManager) {
+      window.cacheManager.invalidate('cli-wrapper-endpoints');
+    }
+
     // Refresh data and re-render
     await loadCliSettings(true);
     renderCliSettingsList();
@@ -250,6 +255,11 @@ async function deleteCliSettingsEndpoint(endpointId) {
 
     showRefreshToast(t('apiSettings.settingsDeleted'), 'success');
 
+    // Invalidate cache to ensure fresh data on page refresh
+    if (window.cacheManager) {
+      window.cacheManager.invalidate('cli-wrapper-endpoints');
+    }
+
     // Refresh data and re-render
     await loadCliSettings(true);
     selectedCliSettingsId = null;
@@ -635,6 +645,11 @@ async function saveProvider() {
     const result = await response.json();
     showRefreshToast(t('apiSettings.providerSaved'), 'success');
 
+    // Invalidate cache to ensure fresh data on page refresh
+    if (window.cacheManager) {
+      window.cacheManager.invalidate('cli-litellm-endpoints');
+    }
+
     closeProviderModal();
     // Force refresh data after saving
     apiSettingsData = null;
@@ -660,6 +675,12 @@ async function deleteProvider(providerId) {
     if (!response.ok) throw new Error('Failed to delete provider');
 
     showRefreshToast(t('apiSettings.providerDeleted'), 'success');
+
+    // Invalidate cache to ensure fresh data on page refresh
+    if (window.cacheManager) {
+      window.cacheManager.invalidate('cli-litellm-endpoints');
+    }
+
     // Force refresh data after deleting
     apiSettingsData = null;
     await renderApiSettings();
@@ -998,6 +1019,11 @@ async function saveEndpoint() {
     const result = await response.json();
     showRefreshToast(t('apiSettings.endpointSaved'), 'success');
 
+    // Invalidate cache to ensure fresh data on page refresh
+    if (window.cacheManager) {
+      window.cacheManager.invalidate('cli-litellm-endpoints');
+    }
+
     closeEndpointModal();
     // Force refresh data after saving
     apiSettingsData = null;
@@ -1023,6 +1049,12 @@ async function deleteEndpoint(endpointId) {
     if (!response.ok) throw new Error('Failed to delete endpoint');
 
     showRefreshToast(t('apiSettings.endpointDeleted'), 'success');
+
+    // Invalidate cache to ensure fresh data on page refresh
+    if (window.cacheManager) {
+      window.cacheManager.invalidate('cli-litellm-endpoints');
+    }
+
     // Force refresh data after deleting
     apiSettingsData = null;
     await renderApiSettings();

package/ccw/src/templates/dashboard-js/views/claude-manager.js

@@ -1,6 +1,10 @@
 // CLAUDE.md Manager View
 // Three-column layout: File Tree | Viewer/Editor | Metadata & Actions
 
+// ========== Lifecycle Management ==========
+var claudeManagerDestroy = null;
+var createDialogOverlay = null;  // Track create dialog overlay for cleanup
+
 // ========== State Management ==========
 var claudeFilesData = {
   user: { main: null },
@@ -19,9 +23,15 @@ var fileTreeExpanded = {
 var searchQuery = '';
 var freshnessData = {}; // { [filePath]: FreshnessResult }
 var freshnessSummary = null;
+var searchKeyboardHandlerAdded = false;
 
 // ========== Main Render Function ==========
 async function renderClaudeManager() {
+  // Initialize lifecycle
+  if (typeof initClaudeManager === 'function') {
+    initClaudeManager();
+  }
+
   var container = document.getElementById('mainContent');
   if (!container) return;
 
@@ -749,9 +759,11 @@ function filterFileTree(query) {
   renderFileTree();
 
   // Add keyboard shortcut handler
-  if (query && !window.claudeSearchKeyboardHandlerAdded) {
-    document.addEventListener('keydown', handleSearchKeyboard);
-    window.claudeSearchKeyboardHandlerAdded = true;
+  if (query && !searchKeyboardHandlerAdded) {
+    (function() {
+      document.addEventListener('keydown', handleSearchKeyboard);
+      searchKeyboardHandlerAdded = true;
+    })();
   }
 }
 
@@ -796,6 +808,7 @@ function showCreateFileDialog() {
     '</div>';
 
   document.body.insertAdjacentHTML('beforeend', dialog);
+  createDialogOverlay = document.querySelector('.modal-overlay');
   if (window.lucide) lucide.createIcons();
 }
 
@@ -918,3 +931,31 @@ function updateClaudeBadge() {
     badge.textContent = total;
   }
 }
+
+// ========== Lifecycle Functions ==========
+function destroyClaudeManager() {
+  // Remove search keyboard event listener if added
+  if (searchKeyboardHandlerAdded) {
+    document.removeEventListener('keydown', handleSearchKeyboard);
+    searchKeyboardHandlerAdded = false;
+  }
+
+  // Remove create dialog overlay if exists
+  if (createDialogOverlay) {
+    createDialogOverlay.remove();
+    createDialogOverlay = null;
+  }
+
+  // Reset view-specific state
+  selectedFile = null;
+  isEditMode = false;
+  isDirty = false;
+}
+
+// Expose init/destroy functions for lifecycle management
+window.initClaudeManager = function() {
+  claudeManagerDestroy = destroyClaudeManager;
+};
+
+// Make destroyClaudeManager accessible globally as well
+window.destroyClaudeManager = destroyClaudeManager;

package/ccw/src/templates/dashboard-js/views/cli-manager.js

@@ -395,6 +395,10 @@ async function updateCliToolConfig(tool, updates) {
     }
     if (data.success && cliToolConfig && cliToolConfig.tools) {
       cliToolConfig.tools[tool] = data.config;
+      // Invalidate cache to ensure fresh data on page refresh
+      if (window.cacheManager) {
+        window.cacheManager.invalidate('cli-config');
+      }
     }
     return data;
   } catch (err) {
@@ -554,6 +558,298 @@ function buildToolConfigModalContent(tool, config, models, status) {
   '</div>';
 }
 
+// ========== File Browser Modal ==========
+
+var fileBrowserState = {
+  currentPath: '',
+  showHidden: false,
+  onSelect: null
+};
+
+function showFileBrowserModal(onSelect) {
+  fileBrowserState.onSelect = onSelect;
+  fileBrowserState.showHidden = false;
+  
+  // Create modal overlay
+  var overlay = document.createElement('div');
+  overlay.id = 'fileBrowserOverlay';
+  overlay.className = 'modal-overlay';
+  overlay.innerHTML = buildFileBrowserModalContent();
+  document.body.appendChild(overlay);
+  
+  // Load initial directory (home)
+  loadFileBrowserDirectory('');
+  
+  // Initialize events
+  initFileBrowserEvents();
+  
+  // Initialize icons
+  if (window.lucide) lucide.createIcons();
+}
+
+function buildFileBrowserModalContent() {
+  // Detect if Windows
+  var isWindows = navigator.platform.indexOf('Win') > -1;
+  var driveButtons = '';
+  if (isWindows) {
+    driveButtons = '<div class="file-browser-drives">' +
+      '<button class="btn-xs btn-outline drive-btn" data-drive="C:/">C:</button>' +
+      '<button class="btn-xs btn-outline drive-btn" data-drive="D:/">D:</button>' +
+      '<button class="btn-xs btn-outline drive-btn" data-drive="E:/">E:</button>' +
+    '</div>';
+  }
+  
+  return '<div class="modal-content file-browser-modal">' +
+    '<div class="modal-header">' +
+      '<h3><i data-lucide="folder-open" class="w-4 h-4"></i> ' + t('cli.fileBrowser') + '</h3>' +
+      '<button class="modal-close" id="fileBrowserCloseBtn">&times;</button>' +
+    '</div>' +
+    '<div class="modal-body">' +
+      '<div class="file-browser-toolbar">' +
+        '<button class="btn-sm btn-outline" id="fileBrowserUpBtn" title="' + t('cli.fileBrowserUp') + '">' +
+          '<i data-lucide="arrow-up" class="w-3.5 h-3.5"></i>' +
+        '</button>' +
+        '<button class="btn-sm btn-outline" id="fileBrowserHomeBtn" title="' + t('cli.fileBrowserHome') + '">' +
+          '<i data-lucide="home" class="w-3.5 h-3.5"></i>' +
+        '</button>' +
+        driveButtons +
+        '<input type="text" id="fileBrowserPathInput" class="file-browser-path" placeholder="Enter path and press Enter" />' +
+        '<label class="file-browser-hidden-toggle">' +
+          '<input type="checkbox" id="fileBrowserShowHidden" checked />' +
+          '<span>' + t('cli.fileBrowserShowHidden') + '</span>' +
+        '</label>' +
+      '</div>' +
+      '<div class="file-browser-list" id="fileBrowserList">' +
+        '<div class="file-browser-loading"><i data-lucide="loader-2" class="w-5 h-5 animate-spin"></i></div>' +
+      '</div>' +
+    '</div>' +
+    '<div class="modal-footer">' +
+      '<button class="btn btn-outline" id="fileBrowserCancelBtn">' + t('cli.fileBrowserCancel') + '</button>' +
+      '<button class="btn btn-primary" id="fileBrowserSelectBtn" disabled>' +
+        '<i data-lucide="check" class="w-3.5 h-3.5"></i> ' + t('cli.fileBrowserSelect') +
+      '</button>' +
+    '</div>' +
+  '</div>';
+}
+
+async function loadFileBrowserDirectory(path) {
+  var listContainer = document.getElementById('fileBrowserList');
+  var pathInput = document.getElementById('fileBrowserPathInput');
+  
+  if (listContainer) {
+    listContainer.innerHTML = '<div class="file-browser-loading"><i data-lucide="loader-2" class="w-5 h-5 animate-spin"></i></div>';
+    if (window.lucide) lucide.createIcons();
+  }
+  
+  try {
+    var response = await fetch('/api/dialog/browse', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ path: path, showHidden: fileBrowserState.showHidden })
+    });
+    
+    if (!response.ok) {
+      throw new Error('Failed to load directory');
+    }
+    
+    var data = await response.json();
+    fileBrowserState.currentPath = data.currentPath;
+    
+    if (pathInput) {
+      pathInput.value = data.currentPath;
+    }
+    
+    renderFileBrowserItems(data.items);
+  } catch (err) {
+    console.error('Failed to load directory:', err);
+    if (listContainer) {
+      listContainer.innerHTML = '<div class="file-browser-error">' +
+        '<p>' + t('cli.fileBrowserApiError') + '</p>' +
+        '<p class="file-browser-hint">' + t('cli.fileBrowserManualHint') + '</p>' +
+      '</div>';
+    }
+    // Enable manual path entry mode - enable select button when path is typed
+    var selectBtn = document.getElementById('fileBrowserSelectBtn');
+    var pathInput = document.getElementById('fileBrowserPathInput');
+    if (selectBtn && pathInput) {
+      selectBtn.disabled = false;
+      pathInput.focus();
+    }
+  }
+}
+
+function renderFileBrowserItems(items) {
+  var listContainer = document.getElementById('fileBrowserList');
+  if (!listContainer) return;
+  
+  if (!items || items.length === 0) {
+    listContainer.innerHTML = '<div class="file-browser-empty">Empty directory</div>';
+    return;
+  }
+  
+  var html = items.map(function(item) {
+    var icon = item.isDirectory ? 'folder' : 'file';
+    var itemClass = 'file-browser-item' + (item.isDirectory ? ' is-directory' : ' is-file');
+    return '<div class="' + itemClass + '" data-path="' + escapeHtml(item.path) + '" data-is-dir="' + item.isDirectory + '">' +
+      '<i data-lucide="' + icon + '" class="w-4 h-4"></i>' +
+      '<span class="file-browser-item-name">' + escapeHtml(item.name) + '</span>' +
+    '</div>';
+  }).join('');
+  
+  listContainer.innerHTML = html;
+  
+  // Initialize icons
+  if (window.lucide) lucide.createIcons();
+  
+  // Add click handlers
+  listContainer.querySelectorAll('.file-browser-item').forEach(function(el) {
+    el.onclick = function() {
+      var isDir = el.getAttribute('data-is-dir') === 'true';
+      var path = el.getAttribute('data-path');
+      
+      if (isDir) {
+        // Navigate into directory
+        loadFileBrowserDirectory(path);
+      } else {
+        // Select file
+        listContainer.querySelectorAll('.file-browser-item').forEach(function(item) {
+          item.classList.remove('selected');
+        });
+        el.classList.add('selected');
+        
+        // Enable select button
+        var selectBtn = document.getElementById('fileBrowserSelectBtn');
+        if (selectBtn) {
+          selectBtn.disabled = false;
+          selectBtn.setAttribute('data-selected-path', path);
+        }
+      }
+    };
+    
+    // Double-click to select file or enter directory
+    el.ondblclick = function() {
+      var isDir = el.getAttribute('data-is-dir') === 'true';
+      var path = el.getAttribute('data-path');
+      
+      if (isDir) {
+        loadFileBrowserDirectory(path);
+      } else {
+        // Select and close
+        closeFileBrowserModal(path);
+      }
+    };
+  });
+}
+
+function initFileBrowserEvents() {
+  // Close button
+  var closeBtn = document.getElementById('fileBrowserCloseBtn');
+  if (closeBtn) {
+    closeBtn.onclick = function() { closeFileBrowserModal(null); };
+  }
+  
+  // Cancel button
+  var cancelBtn = document.getElementById('fileBrowserCancelBtn');
+  if (cancelBtn) {
+    cancelBtn.onclick = function() { closeFileBrowserModal(null); };
+  }
+  
+  // Select button
+  var selectBtn = document.getElementById('fileBrowserSelectBtn');
+  if (selectBtn) {
+    selectBtn.onclick = function() {
+      // First try selected path from list, then fall back to path input
+      var path = selectBtn.getAttribute('data-selected-path');
+      if (!path) {
+        var pathInput = document.getElementById('fileBrowserPathInput');
+        if (pathInput && pathInput.value.trim()) {
+          path = pathInput.value.trim();
+        }
+      }
+      if (path) {
+        closeFileBrowserModal(path);
+      }
+    };
+  }
+  
+  // Up button
+  var upBtn = document.getElementById('fileBrowserUpBtn');
+  if (upBtn) {
+    upBtn.onclick = function() {
+      // Get parent path
+      var currentPath = fileBrowserState.currentPath;
+      var parentPath = currentPath.replace(/[/\\][^/\\]+$/, '') || '/';
+      loadFileBrowserDirectory(parentPath);
+    };
+  }
+  
+  // Home button
+  var homeBtn = document.getElementById('fileBrowserHomeBtn');
+  if (homeBtn) {
+    homeBtn.onclick = function() {
+      loadFileBrowserDirectory('');
+    };
+  }
+  
+  // Drive buttons (Windows)
+  document.querySelectorAll('.drive-btn').forEach(function(btn) {
+    btn.onclick = function() {
+      var drive = btn.getAttribute('data-drive');
+      if (drive) {
+        loadFileBrowserDirectory(drive);
+      }
+    };
+  });
+  
+  // Path input - allow manual entry
+  var pathInput = document.getElementById('fileBrowserPathInput');
+  if (pathInput) {
+    pathInput.onkeydown = function(e) {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        var path = pathInput.value.trim();
+        if (path) {
+          loadFileBrowserDirectory(path);
+        }
+      }
+    };
+  }
+  
+  // Show hidden checkbox
+  var showHiddenCheckbox = document.getElementById('fileBrowserShowHidden');
+  if (showHiddenCheckbox) {
+    showHiddenCheckbox.checked = true; // Default to show hidden
+    fileBrowserState.showHidden = true;
+    showHiddenCheckbox.onchange = function() {
+      fileBrowserState.showHidden = showHiddenCheckbox.checked;
+      loadFileBrowserDirectory(fileBrowserState.currentPath);
+    };
+  }
+  
+  // Click outside to close
+  var overlay = document.getElementById('fileBrowserOverlay');
+  if (overlay) {
+    overlay.onclick = function(e) {
+      if (e.target === overlay) {
+        closeFileBrowserModal(null);
+      }
+    };
+  }
+}
+
+function closeFileBrowserModal(selectedPath) {
+  var overlay = document.getElementById('fileBrowserOverlay');
+  if (overlay) {
+    overlay.remove();
+  }
+  
+  if (fileBrowserState.onSelect && selectedPath) {
+    fileBrowserState.onSelect(selectedPath);
+  }
+  
+  fileBrowserState.onSelect = null;
+}
+
 function initToolConfigModalEvents(tool, currentConfig, models) {
   // Local tags state (copy from config)
   var currentTags = (currentConfig.tags || []).slice();
@@ -754,38 +1050,14 @@ function initToolConfigModalEvents(tool, currentConfig, models) {
   // Environment file browse button (only for gemini/qwen)
   var envFileBrowseBtn = document.getElementById('envFileBrowseBtn');
   if (envFileBrowseBtn) {
-    envFileBrowseBtn.onclick = async function() {
-      try {
-        // Use file dialog API if available
-        var response = await fetch('/api/dialog/open-file', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            title: t('cli.envFile'),
-            filters: [
-              { name: 'Environment Files', extensions: ['env'] },
-              { name: 'All Files', extensions: ['*'] }
-            ],
-            defaultPath: ''
-          })
-        });
-        
-        if (response.ok) {
-          var data = await response.json();
-          if (data.filePath) {
-            var envFileInput = document.getElementById('envFileInput');
-            if (envFileInput) {
-              envFileInput.value = data.filePath;
-            }
-          }
-        } else {
-          // Fallback: prompt user to enter path manually
-          showRefreshToast('File dialog not available. Please enter path manually.', 'info');
+    envFileBrowseBtn.onclick = function() {
+      showFileBrowserModal(function(selectedPath) {
+        var envFileInput = document.getElementById('envFileInput');
+        if (envFileInput && selectedPath) {
+          envFileInput.value = selectedPath;
+          envFileInput.focus();
         }
-      } catch (err) {
-        console.error('Failed to open file dialog:', err);
-        showRefreshToast('File dialog not available. Please enter path manually.', 'info');
-      }
+      });
     };
   }
 

package/ccw/src/templates/dashboard-js/views/history.js

@@ -7,6 +7,9 @@ var isMultiSelectMode = false;
 
 // ========== Rendering ==========
 async function renderCliHistoryView() {
+  // Reset view state to prevent stale data persistence
+  resetHistoryViewState();
+
   var container = document.getElementById('mainContent');
   if (!container) return;
 
@@ -183,6 +186,9 @@ async function renderCliHistoryView() {
   if (window.lucide) lucide.createIcons();
 }
 
+// Export destroy function for lifecycle management
+window.destroyCliHistoryView = destroyCliHistoryView;
+
 // ========== Actions ==========
 async function copyExecutionId(executionId) {
   try {
@@ -218,16 +224,28 @@ async function refreshCliHistoryView() {
 }
 
 // ========== Multi-Select Functions ==========
+var deleteDropdownListenerActive = false;
+
 function toggleDeleteDropdown(event) {
   event.stopPropagation();
   var menu = document.getElementById('deleteDropdownMenu');
   if (menu) {
-    menu.classList.toggle('show');
-    // Close on outside click
     if (menu.classList.contains('show')) {
-      setTimeout(function() {
-        document.addEventListener('click', closeDeleteDropdown);
-      }, 0);
+      // Closing: remove listener if active
+      menu.classList.remove('show');
+      if (deleteDropdownListenerActive) {
+        document.removeEventListener('click', closeDeleteDropdown);
+        deleteDropdownListenerActive = false;
+      }
+    } else {
+      // Opening: add listener if not already active
+      menu.classList.add('show');
+      if (!deleteDropdownListenerActive) {
+        setTimeout(function() {
+          document.addEventListener('click', closeDeleteDropdown);
+          deleteDropdownListenerActive = true;
+        }, 0);
+      }
     }
   }
 }
@@ -235,7 +253,10 @@ function toggleDeleteDropdown(event) {
 function closeDeleteDropdown() {
   var menu = document.getElementById('deleteDropdownMenu');
   if (menu) menu.classList.remove('show');
-  document.removeEventListener('click', closeDeleteDropdown);
+  if (deleteDropdownListenerActive) {
+    document.removeEventListener('click', closeDeleteDropdown);
+    deleteDropdownListenerActive = false;
+  }
 }
 
 function enterMultiSelectMode() {
@@ -279,6 +300,23 @@ function clearExecutionSelection() {
   renderCliHistoryView();
 }
 
+function resetHistoryViewState() {
+  selectedExecutions.clear();
+  isMultiSelectMode = false;
+}
+
+// ========== View Lifecycle ==========
+function destroyCliHistoryView() {
+  // Clean up dropdown listener if active
+  if (deleteDropdownListenerActive) {
+    document.removeEventListener('click', closeDeleteDropdown);
+    deleteDropdownListenerActive = false;
+  }
+  // Ensure dropdown menu is closed
+  var menu = document.getElementById('deleteDropdownMenu');
+  if (menu) menu.classList.remove('show');
+}
+
 // ========== Batch Delete Functions ==========
 function confirmBatchDelete() {
   var count = selectedExecutions.size;

package/ccw/src/templates/dashboard-js/views/home.js

@@ -51,6 +51,7 @@ function updateBadges() {
   const liteTasks = workflowData.liteTasks || {};
   document.getElementById('badgeLitePlan').textContent = liteTasks.litePlan?.length || 0;
   document.getElementById('badgeLiteFix').textContent = liteTasks.liteFix?.length || 0;
+  document.getElementById('badgeMultiCliPlan').textContent = liteTasks.multiCliPlan?.length || 0;
 
   // MCP badge - load async if needed
   if (typeof loadMcpConfig === 'function') {