claude-code-workflow 6.3.26 → 6.3.28

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') {

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

@@ -6,6 +6,7 @@
 // ========== Issue State ==========
 var issueData = {
   issues: [],
+  historyIssues: [], // Archived/completed issues from history
   queue: { tasks: [], solutions: [], conflicts: [], execution_groups: [], grouped_items: {} },
   selectedIssue: null,
   selectedSolution: null,
@@ -58,6 +59,18 @@ async function loadIssueData() {
   }
 }
 
+async function loadIssueHistory() {
+  try {
+    const response = await fetch('/api/issues/history?path=' + encodeURIComponent(projectPath));
+    if (!response.ok) throw new Error('Failed to load issue history');
+    const data = await response.json();
+    issueData.historyIssues = data.issues || [];
+  } catch (err) {
+    console.error('Failed to load issue history:', err);
+    issueData.historyIssues = [];
+  }
+}
+
 async function loadQueueData() {
   try {
     const response = await fetch('/api/queue?path=' + encodeURIComponent(projectPath));
@@ -93,10 +106,21 @@ function renderIssueView() {
   if (!container) return;
 
   const issues = issueData.issues || [];
+  const historyIssues = issueData.historyIssues || [];
+
   // Apply both status and search filters
-  let filteredIssues = issueData.statusFilter === 'all'
-    ? issues
-    : issues.filter(i => i.status === issueData.statusFilter);
+  let filteredIssues;
+  if (issueData.statusFilter === 'all') {
+    filteredIssues = issues;
+  } else if (issueData.statusFilter === 'completed') {
+    // For 'completed' filter, include both current completed issues and archived history issues
+    const currentCompleted = issues.filter(i => i.status === 'completed');
+    // Mark history issues as archived for visual distinction
+    const archivedIssues = historyIssues.map(i => ({ ...i, _isArchived: true }));
+    filteredIssues = [...currentCompleted, ...archivedIssues];
+  } else {
+    filteredIssues = issues.filter(i => i.status === issueData.statusFilter);
+  }
 
   if (issueData.searchQuery) {
     const query = issueData.searchQuery.toLowerCase();
@@ -309,12 +333,15 @@ function renderIssueCard(issue) {
     failed: 'failed'
   };
 
+  const isArchived = issue._isArchived;
+
   return `
-    <div class="issue-card" onclick="openIssueDetail('${issue.id}')">
+    <div class="issue-card ${isArchived ? 'archived' : ''}" onclick="openIssueDetail('${issue.id}'${isArchived ? ', true' : ''})">
       <div class="flex items-start justify-between mb-3">
         <div class="flex items-center gap-2">
           <span class="issue-id font-mono text-sm">${issue.id}</span>
           <span class="issue-status ${statusColors[issue.status] || ''}">${issue.status || 'unknown'}</span>
+          ${isArchived ? '<span class="issue-archived-badge">' + (t('issues.archived') || 'Archived') + '</span>' : ''}
         </div>
         <span class="issue-priority" title="${t('issues.priority') || 'Priority'}: ${issue.priority || 3}">
           ${renderPriorityStars(issue.priority || 3)}
@@ -360,8 +387,12 @@ function renderPriorityStars(priority) {
   return stars;
 }
 
-function filterIssuesByStatus(status) {
+async function filterIssuesByStatus(status) {
   issueData.statusFilter = status;
+  // Load history data when filtering by 'completed' status
+  if (status === 'completed' && issueData.historyIssues.length === 0) {
+    await loadIssueHistory();
+  }
   renderIssueView();
 }
 
@@ -725,7 +756,7 @@ async function saveQueueOrder(groupId, newOrder) {
 }
 
 // ========== Detail Panel ==========
-async function openIssueDetail(issueId) {
+async function openIssueDetail(issueId, isArchived = false) {
   const panel = document.getElementById('issueDetailPanel');
   if (!panel) return;
 
@@ -733,7 +764,23 @@ async function openIssueDetail(issueId) {
   panel.classList.remove('hidden');
   lucide.createIcons();
 
-  const detail = await loadIssueDetail(issueId);
+  let detail;
+  if (isArchived) {
+    // For archived issues, get detail from historyIssues (already loaded)
+    const historyIssue = issueData.historyIssues.find(i => i.id === issueId);
+    if (historyIssue) {
+      // Mark as archived and provide minimal detail structure
+      detail = {
+        ...historyIssue,
+        _isArchived: true,
+        solutions: historyIssue.solutions || [],
+        tasks: historyIssue.tasks || []
+      };
+    }
+  } else {
+    detail = await loadIssueDetail(issueId);
+  }
+
   if (!detail) {
     panel.innerHTML = '<div class="p-8 text-center text-destructive">Failed to load issue</div>';
     return;