claude-code-workflow 6.1.4 → 6.2.2

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

@@ -0,0 +1,337 @@
+// CLI History View
+// Standalone view for CLI execution history with batch delete support
+
+// ========== Multi-Select State ==========
+var selectedExecutions = new Set();
+var isMultiSelectMode = false;
+
+// ========== Rendering ==========
+async function renderCliHistoryView() {
+  var container = document.getElementById('mainContent');
+  if (!container) return;
+
+  // Hide stats grid and search for History view
+  var statsGrid = document.getElementById('statsGrid');
+  var searchInput = document.getElementById('searchInput');
+  if (statsGrid) statsGrid.style.display = 'none';
+  if (searchInput) searchInput.parentElement.style.display = 'none';
+
+  // Load history data
+  await loadCliHistory();
+
+  // Filter by search query
+  var filteredHistory = cliHistorySearch
+    ? cliExecutionHistory.filter(function(exec) {
+        return exec.prompt_preview.toLowerCase().includes(cliHistorySearch.toLowerCase()) ||
+               exec.tool.toLowerCase().includes(cliHistorySearch.toLowerCase());
+      })
+    : cliExecutionHistory;
+
+  var historyHtml = '';
+
+  if (cliExecutionHistory.length === 0) {
+    historyHtml = '<div class="history-empty-state">' +
+      '<i data-lucide="terminal" class="w-12 h-12"></i>' +
+      '<h3>No executions yet</h3>' +
+      '<p>CLI execution history will appear here</p>' +
+    '</div>';
+  } else if (filteredHistory.length === 0) {
+    historyHtml = '<div class="history-empty-state">' +
+      '<i data-lucide="search-x" class="w-10 h-10"></i>' +
+      '<h3>No matching results</h3>' +
+      '<p>Try adjusting your search or filter</p>' +
+    '</div>';
+  } else {
+    historyHtml = '<div class="history-list">';
+    for (var i = 0; i < filteredHistory.length; i++) {
+      var exec = filteredHistory[i];
+      var statusIcon = exec.status === 'success' ? 'check-circle' :
+                       exec.status === 'timeout' ? 'clock' : 'x-circle';
+      var statusClass = exec.status === 'success' ? 'success' :
+                        exec.status === 'timeout' ? 'warning' : 'error';
+      var duration = formatDuration(exec.duration_ms);
+      var timeAgo = getTimeAgo(new Date(exec.timestamp));
+      var isSelected = selectedExecutions.has(exec.id);
+
+      // Turn count badge for multi-turn conversations
+      var turnBadge = exec.turn_count && exec.turn_count > 1
+        ? '<span class="history-turn-badge"><i data-lucide="messages-square" class="w-3 h-3"></i> ' + exec.turn_count + '</span>'
+        : '';
+
+      var sourceDirHtml = exec.sourceDir && exec.sourceDir !== '.'
+        ? '<span class="history-source-dir"><i data-lucide="folder" class="w-3 h-3"></i> ' + escapeHtml(exec.sourceDir) + '</span>'
+        : '';
+
+      // Multi-select checkbox
+      var checkboxHtml = isMultiSelectMode
+        ? '<div class="history-checkbox-wrapper" onclick="event.stopPropagation(); toggleExecutionSelection(\'' + exec.id + '\')">' +
+            '<input type="checkbox" class="history-checkbox" ' + (isSelected ? 'checked' : '') + ' tabindex="-1">' +
+          '</div>'
+        : '';
+
+      historyHtml += '<div class="history-item' + (isSelected ? ' history-item-selected' : '') + '" ' +
+        'onclick="' + (isMultiSelectMode ? 'toggleExecutionSelection(\'' + exec.id + '\')' : 'showExecutionDetail(\'' + exec.id + (exec.sourceDir ? '\',\'' + escapeHtml(exec.sourceDir) : '') + '\')') + '">' +
+        checkboxHtml +
+        '<div class="history-item-main">' +
+          '<div class="history-item-header">' +
+            '<span class="history-tool-tag tool-' + exec.tool + '">' + exec.tool + '</span>' +
+            '<span class="history-mode-tag">' + (exec.mode || 'analysis') + '</span>' +
+            turnBadge +
+            sourceDirHtml +
+            '<span class="history-status ' + statusClass + '">' +
+              '<i data-lucide="' + statusIcon + '" class="w-3.5 h-3.5"></i>' +
+              exec.status +
+            '</span>' +
+          '</div>' +
+          '<div class="history-item-prompt">' + escapeHtml(exec.prompt_preview) + '</div>' +
+          '<div class="history-item-meta">' +
+            '<span class="history-time"><i data-lucide="clock" class="w-3 h-3"></i> ' + timeAgo + '</span>' +
+            '<span class="history-duration"><i data-lucide="timer" class="w-3 h-3"></i> ' + duration + '</span>' +
+            '<span class="history-id"><i data-lucide="hash" class="w-3 h-3"></i> ' + exec.id.split('-')[0] + '</span>' +
+          '</div>' +
+        '</div>' +
+        '<div class="history-item-actions">' +
+          '<button class="btn-icon" onclick="event.stopPropagation(); showExecutionDetail(\'' + exec.id + '\')" title="View Details">' +
+            '<i data-lucide="eye" class="w-4 h-4"></i>' +
+          '</button>' +
+          '<button class="btn-icon btn-danger" onclick="event.stopPropagation(); confirmDeleteExecution(\'' + exec.id + (exec.sourceDir ? '\',\'' + escapeHtml(exec.sourceDir) : '') + '\')" title="Delete">' +
+            '<i data-lucide="trash-2" class="w-4 h-4"></i>' +
+          '</button>' +
+        '</div>' +
+      '</div>';
+    }
+    historyHtml += '</div>';
+  }
+
+  // Build batch actions bar
+  var batchActionsHtml = '';
+  if (isMultiSelectMode) {
+    batchActionsHtml = '<div class="history-batch-actions">' +
+      '<span class="batch-select-count">' + selectedExecutions.size + ' selected</span>' +
+      '<button class="btn btn-sm btn-outline" onclick="selectAllExecutions()">' +
+        '<i data-lucide="check-square" class="w-3.5 h-3.5"></i> Select All' +
+      '</button>' +
+      '<button class="btn btn-sm btn-outline" onclick="clearExecutionSelection()">' +
+        '<i data-lucide="square" class="w-3.5 h-3.5"></i> Clear' +
+      '</button>' +
+      '<button class="btn btn-sm btn-danger" onclick="confirmBatchDelete()" ' + (selectedExecutions.size === 0 ? 'disabled' : '') + '>' +
+        '<i data-lucide="trash-2" class="w-3.5 h-3.5"></i> Delete Selected' +
+      '</button>' +
+      '<button class="btn btn-sm btn-outline" onclick="exitMultiSelectMode()">' +
+        '<i data-lucide="x" class="w-3.5 h-3.5"></i> Cancel' +
+      '</button>' +
+    '</div>';
+  }
+
+  container.innerHTML = '<div class="history-view">' +
+    '<div class="history-header">' +
+      '<div class="history-header-left">' +
+        '<span class="history-count">' + cliExecutionHistory.length + ' execution' + (cliExecutionHistory.length !== 1 ? 's' : '') + '</span>' +
+      '</div>' +
+      '<div class="history-header-right">' +
+        '<div class="history-search-wrapper">' +
+          '<i data-lucide="search" class="w-4 h-4"></i>' +
+          '<input type="text" class="history-search-input" placeholder="Search executions..." ' +
+            'value="' + escapeHtml(cliHistorySearch) + '" ' +
+            'onkeyup="searchCliHistoryView(this.value)" oninput="searchCliHistoryView(this.value)">' +
+        '</div>' +
+        '<select class="history-filter-select" onchange="filterCliHistoryView(this.value)">' +
+          '<option value=""' + (cliHistoryFilter === null ? ' selected' : '') + '>All Tools</option>' +
+          '<option value="gemini"' + (cliHistoryFilter === 'gemini' ? ' selected' : '') + '>Gemini</option>' +
+          '<option value="qwen"' + (cliHistoryFilter === 'qwen' ? ' selected' : '') + '>Qwen</option>' +
+          '<option value="codex"' + (cliHistoryFilter === 'codex' ? ' selected' : '') + '>Codex</option>' +
+        '</select>' +
+        // Batch delete dropdown
+        '<div class="history-delete-dropdown">' +
+          '<button class="btn-icon" onclick="toggleDeleteDropdown(event)" title="Delete Options">' +
+            '<i data-lucide="trash" class="w-4 h-4"></i>' +
+          '</button>' +
+          '<div class="delete-dropdown-menu" id="deleteDropdownMenu">' +
+            '<button onclick="enterMultiSelectMode()">' +
+              '<i data-lucide="check-square" class="w-3.5 h-3.5"></i> Multi-select Delete' +
+            '</button>' +
+            '<button onclick="confirmDeleteByTool(\'gemini\')">' +
+              '<i data-lucide="trash-2" class="w-3.5 h-3.5"></i> Delete All Gemini' +
+            '</button>' +
+            '<button onclick="confirmDeleteByTool(\'qwen\')">' +
+              '<i data-lucide="trash-2" class="w-3.5 h-3.5"></i> Delete All Qwen' +
+            '</button>' +
+            '<button onclick="confirmDeleteByTool(\'codex\')">' +
+              '<i data-lucide="trash-2" class="w-3.5 h-3.5"></i> Delete All Codex' +
+            '</button>' +
+            '<div class="dropdown-divider"></div>' +
+            '<button class="delete-all-btn" onclick="confirmDeleteAll()">' +
+              '<i data-lucide="alert-triangle" class="w-3.5 h-3.5"></i> Delete All History' +
+            '</button>' +
+          '</div>' +
+        '</div>' +
+        '<button class="btn-icon" onclick="refreshCliHistoryView()" title="Refresh">' +
+          '<i data-lucide="refresh-cw" class="w-4 h-4"></i>' +
+        '</button>' +
+      '</div>' +
+    '</div>' +
+    batchActionsHtml +
+    historyHtml +
+  '</div>';
+
+  // Initialize Lucide icons
+  if (window.lucide) lucide.createIcons();
+}
+
+// ========== Actions ==========
+async function filterCliHistoryView(tool) {
+  cliHistoryFilter = tool || null;
+  await loadCliHistory();
+  renderCliHistoryView();
+}
+
+function searchCliHistoryView(query) {
+  cliHistorySearch = query;
+  renderCliHistoryView();
+  // Preserve focus and cursor position
+  var searchInput = document.querySelector('.history-search-input');
+  if (searchInput) {
+    searchInput.focus();
+    searchInput.setSelectionRange(query.length, query.length);
+  }
+}
+
+async function refreshCliHistoryView() {
+  await loadCliHistory();
+  renderCliHistoryView();
+  showRefreshToast('History refreshed', 'success');
+}
+
+// ========== Multi-Select Functions ==========
+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);
+    }
+  }
+}
+
+function closeDeleteDropdown() {
+  var menu = document.getElementById('deleteDropdownMenu');
+  if (menu) menu.classList.remove('show');
+  document.removeEventListener('click', closeDeleteDropdown);
+}
+
+function enterMultiSelectMode() {
+  closeDeleteDropdown();
+  isMultiSelectMode = true;
+  selectedExecutions.clear();
+  renderCliHistoryView();
+}
+
+function exitMultiSelectMode() {
+  isMultiSelectMode = false;
+  selectedExecutions.clear();
+  renderCliHistoryView();
+}
+
+function toggleExecutionSelection(executionId) {
+  if (selectedExecutions.has(executionId)) {
+    selectedExecutions.delete(executionId);
+  } else {
+    selectedExecutions.add(executionId);
+  }
+  renderCliHistoryView();
+}
+
+function selectAllExecutions() {
+  var filteredHistory = cliHistorySearch
+    ? cliExecutionHistory.filter(function(exec) {
+        return exec.prompt_preview.toLowerCase().includes(cliHistorySearch.toLowerCase()) ||
+               exec.tool.toLowerCase().includes(cliHistorySearch.toLowerCase());
+      })
+    : cliExecutionHistory;
+
+  filteredHistory.forEach(function(exec) {
+    selectedExecutions.add(exec.id);
+  });
+  renderCliHistoryView();
+}
+
+function clearExecutionSelection() {
+  selectedExecutions.clear();
+  renderCliHistoryView();
+}
+
+// ========== Batch Delete Functions ==========
+function confirmBatchDelete() {
+  var count = selectedExecutions.size;
+  if (count === 0) return;
+
+  if (confirm('Delete ' + count + ' selected execution' + (count > 1 ? 's' : '') + '? This action cannot be undone.')) {
+    batchDeleteExecutions(Array.from(selectedExecutions));
+  }
+}
+
+function confirmDeleteByTool(tool) {
+  closeDeleteDropdown();
+  var toolExecutions = cliExecutionHistory.filter(function(exec) { return exec.tool === tool; });
+  var count = toolExecutions.length;
+
+  if (count === 0) {
+    showRefreshToast('No ' + tool + ' executions to delete', 'info');
+    return;
+  }
+
+  if (confirm('Delete all ' + count + ' ' + tool + ' execution' + (count > 1 ? 's' : '') + '? This action cannot be undone.')) {
+    var ids = toolExecutions.map(function(exec) { return exec.id; });
+    batchDeleteExecutions(ids);
+  }
+}
+
+function confirmDeleteAll() {
+  closeDeleteDropdown();
+  var count = cliExecutionHistory.length;
+
+  if (count === 0) {
+    showRefreshToast('No executions to delete', 'info');
+    return;
+  }
+
+  if (confirm('Delete ALL ' + count + ' execution' + (count > 1 ? 's' : '') + '? This action cannot be undone.')) {
+    var ids = cliExecutionHistory.map(function(exec) { return exec.id; });
+    batchDeleteExecutions(ids);
+  }
+}
+
+async function batchDeleteExecutions(ids) {
+  showRefreshToast('Deleting ' + ids.length + ' executions...', 'info');
+
+  try {
+    var response = await fetch('/api/cli/batch-delete', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        path: projectPath,
+        ids: ids
+      })
+    });
+
+    var result = await response.json();
+
+    if (result.success) {
+      showRefreshToast('Deleted ' + result.deleted + ' execution' + (result.deleted > 1 ? 's' : ''), 'success');
+      // Exit multi-select mode and refresh
+      isMultiSelectMode = false;
+      selectedExecutions.clear();
+      await loadCliHistory();
+      renderCliHistoryView();
+    } else {
+      showRefreshToast('Delete failed: ' + (result.error || 'Unknown error'), 'error');
+    }
+  } catch (err) {
+    console.error('Batch delete failed:', err);
+    showRefreshToast('Delete failed: ' + err.message, 'error');
+  }
+}

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

@@ -6,6 +6,10 @@ function renderDashboard() {
   // Show stats grid and search (may be hidden by MCP view)
   showStatsAndSearch();
 
+  // Hide storage card (only shown in CLI Manager view)
+  const storageCard = document.getElementById('storageCard');
+  if (storageCard) storageCard.style.display = 'none';
+
   updateStats();
   updateBadges();
   updateCarousel();
@@ -74,8 +78,8 @@ function renderSessions() {
     container.innerHTML = `
       <div class="empty-state" style="grid-column: 1/-1;">
         <div class="empty-icon"><i data-lucide="inbox" class="w-12 h-12"></i></div>
-        <div class="empty-title">No Sessions Found</div>
-        <div class="empty-text">No workflow sessions match your current filter.</div>
+        <div class="empty-title">${t('empty.noSessions')}</div>
+        <div class="empty-text">${t('empty.noSessionsText')}</div>
       </div>
     `;
     if (typeof lucide !== 'undefined') lucide.createIcons();
@@ -98,38 +102,63 @@ function renderSessionCard(session) {
   const isActive = session._isActive !== false;
   const date = session.created_at;
 
+  // Get session status from metadata (default to 'planning' for new sessions)
+  // 3 states: planning → active → completed (archived)
+  const sessionStatus = session.status || 'planning';
+  const isPlanning = sessionStatus === 'planning';
+
   // Get session type badge
   const sessionType = session.type || 'workflow';
   const typeBadge = sessionType !== 'workflow' ? `<span class="session-type-badge ${sessionType}">${sessionType}</span>` : '';
 
+  // Determine status badge class and text
+  // Priority: archived location > planning status > active status
+  let statusClass, statusText;
+  if (!isActive) {
+    // Archived sessions (completed) always show as ARCHIVED
+    statusClass = 'archived';
+    statusText = t('session.status.archived');
+  } else if (isPlanning) {
+    // Planning state - session created but not yet executed
+    statusClass = 'planning';
+    statusText = t('session.status.planning');
+  } else {
+    // Active state - session is being executed
+    statusClass = 'active';
+    statusText = t('session.status.active');
+  }
+
   // Store session data for modal
   const sessionKey = `session-${session.session_id}`.replace(/[^a-zA-Z0-9-]/g, '-');
   sessionDataStore[sessionKey] = session;
 
   // Special rendering for review sessions
   if (sessionType === 'review') {
-    return renderReviewSessionCard(session, sessionKey, typeBadge, isActive, date);
+    return renderReviewSessionCard(session, sessionKey, typeBadge, isActive, isPlanning, date);
   }
 
+  // Card class includes planning modifier for special styling (only for active sessions)
+  const cardClass = isActive && isPlanning ? 'session-card planning' : 'session-card';
+
   return `
-    <div class="session-card" onclick="showSessionDetailPage('${sessionKey}')">
+    <div class="${cardClass}" onclick="showSessionDetailPage('${sessionKey}')">
       <div class="session-header">
         <div class="session-title">${escapeHtml(session.session_id || 'Unknown')}</div>
         <div class="session-badges">
           ${typeBadge}
-          <span class="session-status ${isActive ? 'active' : 'archived'}">
-            ${isActive ? 'ACTIVE' : 'ARCHIVED'}
+          <span class="session-status ${statusClass}">
+            ${statusText}
           </span>
         </div>
       </div>
       <div class="session-body">
         <div class="session-meta">
           <span class="session-meta-item"><i data-lucide="calendar" class="w-3.5 h-3.5 inline mr-1"></i>${formatDate(date)}</span>
-          <span class="session-meta-item"><i data-lucide="list-checks" class="w-3.5 h-3.5 inline mr-1"></i>${taskCount} tasks</span>
+          <span class="session-meta-item"><i data-lucide="list-checks" class="w-3.5 h-3.5 inline mr-1"></i>${taskCount} ${t('session.tasks')}</span>
         </div>
-        ${taskCount > 0 ? `
+        ${taskCount > 0 && !isPlanning ? `
           <div class="progress-container">
-            <span class="progress-label">Progress</span>
+            <span class="progress-label">${t('session.progress')}</span>
             <div class="progress-bar-wrapper">
               <div class="progress-bar">
                 <div class="progress-fill" style="width: ${progress}%"></div>
@@ -144,7 +173,7 @@ function renderSessionCard(session) {
 }
 
 // Special card rendering for review sessions
-function renderReviewSessionCard(session, sessionKey, typeBadge, isActive, date) {
+function renderReviewSessionCard(session, sessionKey, typeBadge, isActive, isPlanning, date) {
   // Calculate findings stats from reviewDimensions
   const dimensions = session.reviewDimensions || [];
   let totalFindings = 0;
@@ -162,21 +191,38 @@ function renderReviewSessionCard(session, sessionKey, typeBadge, isActive, date)
     lowCount += findings.filter(f => f.severity === 'low').length;
   });
 
+  // Determine status badge class and text
+  // Priority: archived > planning > active
+  let statusClass, statusText;
+  if (!isActive) {
+    statusClass = 'archived';
+    statusText = t('session.status.archived');
+  } else if (isPlanning) {
+    statusClass = 'planning';
+    statusText = t('session.status.planning');
+  } else {
+    statusClass = 'active';
+    statusText = t('session.status.active');
+  }
+
+  // Card class includes planning modifier for special styling (only for active sessions)
+  const cardClass = isActive && isPlanning ? 'session-card planning' : 'session-card';
+
   return `
-    <div class="session-card" onclick="showSessionDetailPage('${sessionKey}')">
+    <div class="${cardClass}" onclick="showSessionDetailPage('${sessionKey}')">
       <div class="session-header">
         <div class="session-title">${escapeHtml(session.session_id || 'Unknown')}</div>
         <div class="session-badges">
           ${typeBadge}
-          <span class="session-status ${isActive ? 'active' : 'archived'}">
-            ${isActive ? 'ACTIVE' : 'ARCHIVED'}
+          <span class="session-status ${statusClass}">
+            ${statusText}
           </span>
         </div>
       </div>
       <div class="session-body">
         <div class="session-meta">
           <span class="session-meta-item"><i data-lucide="calendar" class="w-3.5 h-3.5 inline mr-1"></i>${formatDate(date)}</span>
-          <span class="session-meta-item"><i data-lucide="search" class="w-3.5 h-3.5 inline mr-1"></i>${totalFindings} findings</span>
+          <span class="session-meta-item"><i data-lucide="search" class="w-3.5 h-3.5 inline mr-1"></i>${totalFindings} ${t('session.findings')}</span>
         </div>
         ${totalFindings > 0 ? `
           <div class="review-findings-summary">
@@ -187,7 +233,7 @@ function renderReviewSessionCard(session, sessionKey, typeBadge, isActive, date)
               ${lowCount > 0 ? `<span class="finding-count low"><i data-lucide="check-circle" class="w-3 h-3 inline"></i> ${lowCount}</span>` : ''}
             </div>
             <div class="dimensions-info">
-              ${dimensions.length} dimensions
+              ${dimensions.length} ${t('session.dimensions')}
             </div>
           </div>
         ` : ''}