claude-code-workflow 6.1.4 → 6.2.2

package/ccw/src/templates/dashboard-js/components/modals.js

@@ -2,6 +2,72 @@
 // MODAL DIALOGS
 // ==========================================
 
+// Generic Modal Functions
+function showModal(title, content, options = {}) {
+  // Remove existing modal if any
+  closeModal();
+
+  const overlay = document.createElement('div');
+  overlay.className = 'generic-modal-overlay';
+  overlay.innerHTML = `
+    <div class="generic-modal ${options.size || ''}">
+      <div class="generic-modal-header">
+        <h3 class="generic-modal-title">${escapeHtml(title)}</h3>
+        <button class="generic-modal-close" onclick="closeModal()">&times;</button>
+      </div>
+      <div class="generic-modal-body">
+        ${content}
+      </div>
+    </div>
+  `;
+
+  document.body.appendChild(overlay);
+
+  // Trigger animation
+  requestAnimationFrame(() => overlay.classList.add('active'));
+
+  // Initialize Lucide icons in modal
+  if (window.lucide) lucide.createIcons();
+
+  // Close on overlay click
+  overlay.addEventListener('click', (e) => {
+    if (e.target === overlay) closeModal();
+  });
+
+  // Close on Escape key
+  const escHandler = (e) => {
+    if (e.key === 'Escape') {
+      closeModal();
+      document.removeEventListener('keydown', escHandler);
+    }
+  };
+  document.addEventListener('keydown', escHandler);
+}
+
+function closeModal() {
+  // Try generic modal overlay first
+  const genericOverlay = document.querySelector('.generic-modal-overlay');
+  if (genericOverlay) {
+    genericOverlay.classList.remove('active');
+    setTimeout(() => genericOverlay.remove(), 200);
+    return;
+  }
+
+  // Try CodexLens config modal
+  const codexLensModal = document.getElementById('codexlensConfigModal');
+  if (codexLensModal) {
+    codexLensModal.remove();
+    return;
+  }
+
+  // Try any modal-backdrop
+  const modalBackdrop = document.querySelector('.modal-backdrop');
+  if (modalBackdrop) {
+    modalBackdrop.remove();
+    return;
+  }
+}
+
 // SVG Icons
 const icons = {
   folder: '<svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>',

package/ccw/src/templates/dashboard-js/components/navigation.js

@@ -52,10 +52,25 @@ function initPathSelector() {
   });
 }
 
+// Cleanup function for view transitions
+function cleanupPreviousView() {
+  // Cleanup graph explorer
+  if (currentView === 'graph-explorer' && typeof window.cleanupGraphExplorer === 'function') {
+    window.cleanupGraphExplorer();
+  }
+  // Hide storage card when leaving cli-manager
+  var storageCard = document.getElementById('storageCard');
+  if (storageCard) {
+    storageCard.style.display = 'none';
+  }
+}
+
 // Navigation
 function initNavigation() {
   document.querySelectorAll('.nav-item[data-filter]').forEach(item => {
     item.addEventListener('click', () => {
+      cleanupPreviousView();
+
       setActiveNavItem(item);
       currentFilter = item.dataset.filter;
       currentLiteType = null;
@@ -70,6 +85,8 @@ function initNavigation() {
   // Lite Tasks Navigation
   document.querySelectorAll('.nav-item[data-lite]').forEach(item => {
     item.addEventListener('click', () => {
+      cleanupPreviousView();
+
       setActiveNavItem(item);
       currentLiteType = item.dataset.lite;
       currentFilter = null;
@@ -84,6 +101,8 @@ function initNavigation() {
   // View Navigation (Project Overview, MCP Manager, etc.)
   document.querySelectorAll('.nav-item[data-view]').forEach(item => {
     item.addEventListener('click', () => {
+      cleanupPreviousView();
+
       setActiveNavItem(item);
       currentView = item.dataset.view;
       currentFilter = null;
@@ -98,6 +117,32 @@ function initNavigation() {
         renderProjectOverview();
       } else if (currentView === 'explorer') {
         renderExplorer();
+      } else if (currentView === 'cli-manager') {
+        renderCliManager();
+      } else if (currentView === 'cli-history') {
+        renderCliHistoryView();
+      } else if (currentView === 'hook-manager') {
+        renderHookManager();
+      } else if (currentView === 'memory') {
+        renderMemoryView();
+      } else if (currentView === 'prompt-history') {
+        renderPromptHistoryView();
+      } else if (currentView === 'skills-manager') {
+        renderSkillsManager();
+      } else if (currentView === 'rules-manager') {
+        renderRulesManager();
+      } else if (currentView === 'claude-manager') {
+        renderClaudeManager();
+      } else if (currentView === 'graph-explorer') {
+        renderGraphExplorer();
+      } else if (currentView === 'help') {
+        renderHelpView();
+      } else if (currentView === 'core-memory') {
+        if (typeof renderCoreMemoryView === 'function') {
+          renderCoreMemoryView();
+        } else {
+          console.error('renderCoreMemoryView not defined - please refresh the page');
+        }
       }
     });
   });
@@ -111,21 +156,43 @@ function setActiveNavItem(item) {
 function updateContentTitle() {
   const titleEl = document.getElementById('contentTitle');
   if (currentView === 'project-overview') {
-    titleEl.textContent = 'Project Overview';
+    titleEl.textContent = t('title.projectOverview');
   } else if (currentView === 'mcp-manager') {
-    titleEl.textContent = 'MCP Server Management';
+    titleEl.textContent = t('title.mcpManagement');
   } else if (currentView === 'explorer') {
-    titleEl.textContent = 'File Explorer';
+    titleEl.textContent = t('title.fileExplorer');
+  } else if (currentView === 'cli-manager') {
+    titleEl.textContent = t('title.cliTools');
+  } else if (currentView === 'cli-history') {
+    titleEl.textContent = t('title.cliHistory');
+  } else if (currentView === 'hook-manager') {
+    titleEl.textContent = t('title.hookManager');
+  } else if (currentView === 'memory') {
+    titleEl.textContent = t('title.memoryModule');
+  } else if (currentView === 'prompt-history') {
+    titleEl.textContent = t('title.promptHistory');
+  } else if (currentView === 'skills-manager') {
+    titleEl.textContent = t('title.skillsManager');
+  } else if (currentView === 'rules-manager') {
+    titleEl.textContent = t('title.rulesManager');
+  } else if (currentView === 'claude-manager') {
+    titleEl.textContent = t('title.claudeManager');
+  } else if (currentView === 'graph-explorer') {
+    titleEl.textContent = t('title.graphExplorer');
+  } else if (currentView === 'help') {
+    titleEl.textContent = t('title.helpGuide');
+  } else if (currentView === 'core-memory') {
+    titleEl.textContent = t('title.coreMemory');
   } else if (currentView === 'liteTasks') {
-    const names = { 'lite-plan': 'Lite Plan Sessions', 'lite-fix': 'Lite Fix Sessions' };
-    titleEl.textContent = names[currentLiteType] || 'Lite Tasks';
+    const names = { 'lite-plan': t('title.litePlanSessions'), 'lite-fix': t('title.liteFixSessions') };
+    titleEl.textContent = names[currentLiteType] || t('title.liteTasks');
   } else if (currentView === 'sessionDetail') {
-    titleEl.textContent = 'Session Detail';
+    titleEl.textContent = t('title.sessionDetail');
   } else if (currentView === 'liteTaskDetail') {
-    titleEl.textContent = 'Lite Task Detail';
+    titleEl.textContent = t('title.liteTaskDetail');
   } else {
-    const names = { 'all': 'All Sessions', 'active': 'Active Sessions', 'archived': 'Archived Sessions' };
-    titleEl.textContent = names[currentFilter] || 'Sessions';
+    const names = { 'all': t('title.allSessions'), 'active': t('title.activeSessions'), 'archived': t('title.archivedSessions') };
+    titleEl.textContent = names[currentFilter] || t('title.sessions');
   }
 }
 
@@ -195,7 +262,7 @@ async function refreshWorkspace() {
           renderProjectOverview();
         }
 
-        showRefreshToast('Workspace refreshed', 'success');
+        showRefreshToast(t('toast.workspaceRefreshed'), 'success');
       }
     } else {
       // Non-server mode: just reload page
@@ -203,7 +270,7 @@ async function refreshWorkspace() {
     }
   } catch (error) {
     console.error('Refresh failed:', error);
-    showRefreshToast('Refresh failed: ' + error.message, 'error');
+    showRefreshToast(t('toast.refreshFailed', { error: error.message }), 'error');
   } finally {
     btn.classList.remove('refreshing');
     btn.disabled = false;
@@ -238,8 +305,9 @@ function showRefreshToast(message, type) {
   toast.textContent = message;
   document.body.appendChild(toast);
 
+  // Increase display time to 3.5 seconds for better visibility
   setTimeout(() => {
     toast.classList.add('fade-out');
     setTimeout(() => toast.remove(), 300);
-  }, 2000);
+  }, 3500);
 }