claude-code-workflow 6.1.4 → 6.2.1

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

@@ -0,0 +1,326 @@
+// ==========================================
+// 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>',
+  check: '<svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>',
+  copy: '<svg viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>',
+  terminal: '<svg viewBox="0 0 24 24"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg>'
+};
+
+function showPathSelectedModal(dirName, dirHandle) {
+  // Try to guess full path based on current project path
+  const currentPath = projectPath || '';
+  const basePath = currentPath.substring(0, currentPath.lastIndexOf('/')) || 'D:/projects';
+  const suggestedPath = basePath + '/' + dirName;
+
+  const modal = document.createElement('div');
+  modal.className = 'path-modal-overlay';
+  modal.innerHTML = `
+    <div class="path-modal">
+      <div class="path-modal-header">
+        <span class="path-modal-icon">${icons.folder}</span>
+        <h3>Folder Selected</h3>
+      </div>
+      <div class="path-modal-body">
+        <div class="selected-folder">
+          <strong>${dirName}</strong>
+        </div>
+        <p class="path-modal-note">
+          Confirm or edit the full path:
+        </p>
+        <div class="path-input-group" style="margin-top: 12px;">
+          <label>Full path:</label>
+          <input type="text" id="fullPathInput" value="${suggestedPath}" />
+          <button class="path-go-btn" id="pathGoBtn">Open</button>
+        </div>
+      </div>
+      <div class="path-modal-footer">
+        <button class="path-modal-close" id="pathCancelBtn">Cancel</button>
+      </div>
+    </div>
+  `;
+  document.body.appendChild(modal);
+
+  // Add event listeners (use arrow functions to ensure proper scope)
+  document.getElementById('pathGoBtn').addEventListener('click', () => {
+    console.log('Open button clicked');
+    goToPath();
+  });
+  document.getElementById('pathCancelBtn').addEventListener('click', () => closePathModal());
+
+  // Focus input, select all text, and add enter key listener
+  setTimeout(() => {
+    const input = document.getElementById('fullPathInput');
+    input?.focus();
+    input?.select();
+    input?.addEventListener('keypress', (e) => {
+      if (e.key === 'Enter') goToPath();
+    });
+  }, 100);
+}
+
+function showPathInputModal() {
+  const modal = document.createElement('div');
+  modal.className = 'path-modal-overlay';
+  modal.innerHTML = `
+    <div class="path-modal">
+      <div class="path-modal-header">
+        <span class="path-modal-icon">${icons.folder}</span>
+        <h3>Open Project</h3>
+      </div>
+      <div class="path-modal-body">
+        <div class="path-input-group" style="margin-top: 0;">
+          <label>Project path:</label>
+          <input type="text" id="fullPathInput" placeholder="D:/projects/my-project" />
+          <button class="path-go-btn" id="pathGoBtn">Open</button>
+        </div>
+      </div>
+      <div class="path-modal-footer">
+        <button class="path-modal-close" id="pathCancelBtn">Cancel</button>
+      </div>
+    </div>
+  `;
+  document.body.appendChild(modal);
+
+  // Add event listeners (use arrow functions to ensure proper scope)
+  document.getElementById('pathGoBtn').addEventListener('click', () => {
+    console.log('Open button clicked');
+    goToPath();
+  });
+  document.getElementById('pathCancelBtn').addEventListener('click', () => closePathModal());
+
+  // Focus input and add enter key listener
+  setTimeout(() => {
+    const input = document.getElementById('fullPathInput');
+    input?.focus();
+    input?.addEventListener('keypress', (e) => {
+      if (e.key === 'Enter') goToPath();
+    });
+  }, 100);
+}
+
+function goToPath() {
+  const input = document.getElementById('fullPathInput');
+  const path = input?.value?.trim();
+  if (path) {
+    closePathModal();
+    selectPath(path);
+  } else {
+    // Show error - input is empty
+    input.style.borderColor = 'var(--danger-color)';
+    input.placeholder = 'Please enter a path';
+    input.focus();
+  }
+}
+
+function closePathModal() {
+  const modal = document.querySelector('.path-modal-overlay');
+  if (modal) {
+    modal.remove();
+  }
+}
+
+function copyCommand(btn, dirName) {
+  const input = document.getElementById('fullPathInput');
+  const path = input?.value?.trim() || `[full-path-to-${dirName}]`;
+  const command = `ccw view -p "${path}"`;
+  navigator.clipboard.writeText(command).then(() => {
+    btn.innerHTML = icons.check + ' <span>Copied!</span>';
+    setTimeout(() => { btn.innerHTML = icons.copy + ' <span>Copy</span>'; }, 2000);
+  });
+}
+
+function showJsonModal(jsonId, taskId) {
+  // Get JSON from memory store instead of DOM
+  const rawTask = taskJsonStore[jsonId];
+  if (!rawTask) return;
+
+  const jsonContent = JSON.stringify(rawTask, null, 2);
+
+  // Create modal
+  const overlay = document.createElement('div');
+  overlay.className = 'json-modal-overlay';
+  overlay.innerHTML = `
+    <div class="json-modal">
+      <div class="json-modal-header">
+        <div class="json-modal-title">
+          <span class="task-id-badge">${escapeHtml(taskId)}</span>
+          <span>Task JSON</span>
+        </div>
+        <button class="json-modal-close" onclick="closeJsonModal(this)">&times;</button>
+      </div>
+      <div class="json-modal-body">
+        <pre class="json-modal-content">${escapeHtml(jsonContent)}</pre>
+      </div>
+      <div class="json-modal-footer">
+        <button class="btn-copy-json" onclick="copyJsonToClipboard(this)">Copy JSON</button>
+      </div>
+    </div>
+  `;
+
+  document.body.appendChild(overlay);
+
+  // Trigger animation
+  requestAnimationFrame(() => overlay.classList.add('active'));
+
+  // Close on overlay click
+  overlay.addEventListener('click', (e) => {
+    if (e.target === overlay) closeJsonModal(overlay.querySelector('.json-modal-close'));
+  });
+
+  // Close on Escape key
+  const escHandler = (e) => {
+    if (e.key === 'Escape') {
+      closeJsonModal(overlay.querySelector('.json-modal-close'));
+      document.removeEventListener('keydown', escHandler);
+    }
+  };
+  document.addEventListener('keydown', escHandler);
+}
+
+function closeJsonModal(btn) {
+  const overlay = btn.closest('.json-modal-overlay');
+  overlay.classList.remove('active');
+  setTimeout(() => overlay.remove(), 200);
+}
+
+function copyJsonToClipboard(btn) {
+  const content = btn.closest('.json-modal').querySelector('.json-modal-content').textContent;
+  navigator.clipboard.writeText(content).then(() => {
+    const original = btn.textContent;
+    btn.textContent = 'Copied!';
+    setTimeout(() => btn.textContent = original, 2000);
+  });
+}
+
+function openMarkdownModal(title, content, type = 'markdown') {
+  const modal = document.getElementById('markdownModal');
+  const titleEl = document.getElementById('markdownModalTitle');
+  const rawEl = document.getElementById('markdownRaw');
+  const previewEl = document.getElementById('markdownPreview');
+
+  // Normalize line endings
+  const normalizedContent = normalizeLineEndings(content);
+
+  titleEl.textContent = title;
+  rawEl.textContent = normalizedContent;
+
+  // Render preview based on type
+  if (typeof marked !== 'undefined' && type === 'markdown') {
+    previewEl.innerHTML = marked.parse(normalizedContent);
+  } else if (type === 'json') {
+    // For JSON, try to parse and re-stringify with formatting
+    try {
+      const parsed = typeof normalizedContent === 'string' ? JSON.parse(normalizedContent) : normalizedContent;
+      const formatted = JSON.stringify(parsed, null, 2);
+      previewEl.innerHTML = '<pre class="whitespace-pre-wrap language-json">' + escapeHtml(formatted) + '</pre>';
+    } catch (e) {
+      // If not valid JSON, show as-is
+      previewEl.innerHTML = '<pre class="whitespace-pre-wrap">' + escapeHtml(normalizedContent) + '</pre>';
+    }
+  } else {
+    // Fallback: simple text with line breaks
+    previewEl.innerHTML = '<pre class="whitespace-pre-wrap">' + escapeHtml(normalizedContent) + '</pre>';
+  }
+
+  // Show modal and default to preview tab
+  modal.classList.remove('hidden');
+  switchMarkdownTab('preview');
+}
+
+function closeMarkdownModal() {
+  const modal = document.getElementById('markdownModal');
+  modal.classList.add('hidden');
+}
+
+function switchMarkdownTab(tab) {
+  const rawEl = document.getElementById('markdownRaw');
+  const previewEl = document.getElementById('markdownPreview');
+  const rawTabBtn = document.getElementById('mdTabRaw');
+  const previewTabBtn = document.getElementById('mdTabPreview');
+
+  if (tab === 'raw') {
+    rawEl.classList.remove('hidden');
+    previewEl.classList.add('hidden');
+    rawTabBtn.classList.add('active', 'bg-background', 'text-foreground');
+    rawTabBtn.classList.remove('text-muted-foreground');
+    previewTabBtn.classList.remove('active', 'bg-background', 'text-foreground');
+    previewTabBtn.classList.add('text-muted-foreground');
+  } else {
+    rawEl.classList.add('hidden');
+    previewEl.classList.remove('hidden');
+    previewTabBtn.classList.add('active', 'bg-background', 'text-foreground');
+    previewTabBtn.classList.remove('text-muted-foreground');
+    rawTabBtn.classList.remove('active', 'bg-background', 'text-foreground');
+    rawTabBtn.classList.add('text-muted-foreground');
+  }
+}

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

@@ -0,0 +1,313 @@
+// Navigation and Routing
+// Manages navigation events, active state, content title updates, search, and path selector
+
+// Path Selector
+function initPathSelector() {
+  const btn = document.getElementById('pathButton');
+  const menu = document.getElementById('pathMenu');
+  const recentContainer = document.getElementById('recentPaths');
+
+  // Render recent paths
+  if (recentPaths && recentPaths.length > 0) {
+    recentPaths.forEach(path => {
+      const item = document.createElement('div');
+      item.className = 'path-item' + (path === projectPath ? ' active' : '');
+      item.dataset.path = path;
+
+      // Path text
+      const pathText = document.createElement('span');
+      pathText.className = 'path-text';
+      pathText.textContent = path;
+      pathText.addEventListener('click', () => selectPath(path));
+      item.appendChild(pathText);
+
+      // Delete button (only for non-current paths)
+      if (path !== projectPath) {
+        const deleteBtn = document.createElement('button');
+        deleteBtn.className = 'path-delete-btn';
+        deleteBtn.innerHTML = '×';
+        deleteBtn.title = 'Remove from recent';
+        deleteBtn.addEventListener('click', async (e) => {
+          e.stopPropagation();
+          await removeRecentPathFromList(path);
+        });
+        item.appendChild(deleteBtn);
+      }
+
+      recentContainer.appendChild(item);
+    });
+  }
+
+  btn.addEventListener('click', (e) => {
+    e.stopPropagation();
+    menu.classList.toggle('hidden');
+  });
+
+  document.addEventListener('click', () => {
+    menu.classList.add('hidden');
+  });
+
+  document.getElementById('browsePath').addEventListener('click', async () => {
+    await browseForFolder();
+  });
+}
+
+// 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;
+      currentView = 'sessions';
+      currentSessionDetailKey = null;
+      updateContentTitle();
+      showStatsAndSearch();
+      renderSessions();
+    });
+  });
+
+  // Lite Tasks Navigation
+  document.querySelectorAll('.nav-item[data-lite]').forEach(item => {
+    item.addEventListener('click', () => {
+      cleanupPreviousView();
+
+      setActiveNavItem(item);
+      currentLiteType = item.dataset.lite;
+      currentFilter = null;
+      currentView = 'liteTasks';
+      currentSessionDetailKey = null;
+      updateContentTitle();
+      showStatsAndSearch();
+      renderLiteTasks();
+    });
+  });
+
+  // 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;
+      currentLiteType = null;
+      currentSessionDetailKey = null;
+      updateContentTitle();
+
+      // Route to appropriate view
+      if (currentView === 'mcp-manager') {
+        renderMcpManager();
+      } else if (currentView === 'project-overview') {
+        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');
+        }
+      }
+    });
+  });
+}
+
+function setActiveNavItem(item) {
+  document.querySelectorAll('.nav-item').forEach(i => i.classList.remove('active'));
+  item.classList.add('active');
+}
+
+function updateContentTitle() {
+  const titleEl = document.getElementById('contentTitle');
+  if (currentView === 'project-overview') {
+    titleEl.textContent = t('title.projectOverview');
+  } else if (currentView === 'mcp-manager') {
+    titleEl.textContent = t('title.mcpManagement');
+  } else if (currentView === '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': t('title.litePlanSessions'), 'lite-fix': t('title.liteFixSessions') };
+    titleEl.textContent = names[currentLiteType] || t('title.liteTasks');
+  } else if (currentView === 'sessionDetail') {
+    titleEl.textContent = t('title.sessionDetail');
+  } else if (currentView === 'liteTaskDetail') {
+    titleEl.textContent = t('title.liteTaskDetail');
+  } else {
+    const names = { 'all': t('title.allSessions'), 'active': t('title.activeSessions'), 'archived': t('title.archivedSessions') };
+    titleEl.textContent = names[currentFilter] || t('title.sessions');
+  }
+}
+
+// Search
+function initSearch() {
+  const input = document.getElementById('searchInput');
+  input.addEventListener('input', (e) => {
+    const query = e.target.value.toLowerCase();
+    document.querySelectorAll('.session-card').forEach(card => {
+      const text = card.textContent.toLowerCase();
+      card.style.display = text.includes(query) ? '' : 'none';
+    });
+  });
+}
+
+// Refresh Workspace
+function initRefreshButton() {
+  const btn = document.getElementById('refreshWorkspace');
+  if (btn) {
+    btn.addEventListener('click', refreshWorkspace);
+  }
+}
+
+async function refreshWorkspace() {
+  const btn = document.getElementById('refreshWorkspace');
+
+  // Add spinning animation
+  btn.classList.add('refreshing');
+  btn.disabled = true;
+
+  try {
+    if (window.SERVER_MODE) {
+      // Reload data from server
+      const data = await loadDashboardData(projectPath);
+      if (data) {
+        // Clear and repopulate stores
+        Object.keys(sessionDataStore).forEach(k => delete sessionDataStore[k]);
+        Object.keys(liteTaskDataStore).forEach(k => delete liteTaskDataStore[k]);
+
+        // Populate stores
+        [...(data.activeSessions || []), ...(data.archivedSessions || [])].forEach(s => {
+          const sessionKey = `session-${s.session_id}`.replace(/[^a-zA-Z0-9-]/g, '-');
+          sessionDataStore[sessionKey] = s;
+        });
+
+        [...(data.liteTasks?.litePlan || []), ...(data.liteTasks?.liteFix || [])].forEach(s => {
+          const sessionKey = `lite-${s.session_id}`.replace(/[^a-zA-Z0-9-]/g, '-');
+          liteTaskDataStore[sessionKey] = s;
+        });
+
+        // Update global data
+        window.workflowData = data;
+
+        // Update sidebar counts
+        updateSidebarCounts(data);
+
+        // Re-render current view
+        if (currentView === 'sessions') {
+          renderSessions();
+        } else if (currentView === 'liteTasks') {
+          renderLiteTasks();
+        } else if (currentView === 'sessionDetail' && currentSessionDetailKey) {
+          showSessionDetailPage(currentSessionDetailKey);
+        } else if (currentView === 'liteTaskDetail' && currentSessionDetailKey) {
+          showLiteTaskDetailPage(currentSessionDetailKey);
+        } else if (currentView === 'project-overview') {
+          renderProjectOverview();
+        }
+
+        showRefreshToast(t('toast.workspaceRefreshed'), 'success');
+      }
+    } else {
+      // Non-server mode: just reload page
+      window.location.reload();
+    }
+  } catch (error) {
+    console.error('Refresh failed:', error);
+    showRefreshToast(t('toast.refreshFailed', { error: error.message }), 'error');
+  } finally {
+    btn.classList.remove('refreshing');
+    btn.disabled = false;
+  }
+}
+
+function updateSidebarCounts(data) {
+  // Update session counts
+  const activeCount = document.querySelector('.nav-item[data-filter="active"] .nav-count');
+  const archivedCount = document.querySelector('.nav-item[data-filter="archived"] .nav-count');
+  const allCount = document.querySelector('.nav-item[data-filter="all"] .nav-count');
+
+  if (activeCount) activeCount.textContent = data.activeSessions?.length || 0;
+  if (archivedCount) archivedCount.textContent = data.archivedSessions?.length || 0;
+  if (allCount) allCount.textContent = (data.activeSessions?.length || 0) + (data.archivedSessions?.length || 0);
+
+  // Update lite task counts
+  const litePlanCount = document.querySelector('.nav-item[data-lite="lite-plan"] .nav-count');
+  const liteFixCount = document.querySelector('.nav-item[data-lite="lite-fix"] .nav-count');
+
+  if (litePlanCount) litePlanCount.textContent = data.liteTasks?.litePlan?.length || 0;
+  if (liteFixCount) liteFixCount.textContent = data.liteTasks?.liteFix?.length || 0;
+}
+
+function showRefreshToast(message, type) {
+  // Remove existing toast
+  const existing = document.querySelector('.status-toast');
+  if (existing) existing.remove();
+
+  const toast = document.createElement('div');
+  toast.className = `status-toast ${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);
+  }, 3500);
+}