claude-code-workflow 6.0.0

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

@@ -0,0 +1,260 @@
+// ==========================================
+// MODAL DIALOGS
+// ==========================================
+
+// 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/ccw/src/templates/dashboard-js/components/navigation.js

@@ -0,0 +1,239 @@
+// 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();
+  });
+}
+
+// Navigation
+function initNavigation() {
+  document.querySelectorAll('.nav-item[data-filter]').forEach(item => {
+    item.addEventListener('click', () => {
+      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', () => {
+      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', () => {
+      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();
+      }
+    });
+  });
+}
+
+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 = 'Project Overview';
+  } else if (currentView === 'mcp-manager') {
+    titleEl.textContent = 'MCP Server Management';
+  } else if (currentView === 'liteTasks') {
+    const names = { 'lite-plan': 'Lite Plan Sessions', 'lite-fix': 'Lite Fix Sessions' };
+    titleEl.textContent = names[currentLiteType] || 'Lite Tasks';
+  } else if (currentView === 'sessionDetail') {
+    titleEl.textContent = 'Session Detail';
+  } else if (currentView === 'liteTaskDetail') {
+    titleEl.textContent = 'Lite Task Detail';
+  } else {
+    const names = { 'all': 'All Sessions', 'active': 'Active Sessions', 'archived': 'Archived Sessions' };
+    titleEl.textContent = names[currentFilter] || '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) {
+        // Update stores
+        sessionDataStore = {};
+        liteTaskDataStore = {};
+
+        // Populate stores
+        [...(data.activeSessions || []), ...(data.archivedSessions || [])].forEach(s => {
+          sessionDataStore[s.session_id] = s;
+        });
+
+        [...(data.liteTasks?.litePlan || []), ...(data.liteTasks?.liteFix || [])].forEach(s => {
+          liteTaskDataStore[s.session_id] = 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('Workspace refreshed', 'success');
+      }
+    } else {
+      // Non-server mode: just reload page
+      window.location.reload();
+    }
+  } catch (error) {
+    console.error('Refresh failed:', error);
+    showRefreshToast('Refresh failed: ' + 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);
+
+  setTimeout(() => {
+    toast.classList.add('fade-out');
+    setTimeout(() => toast.remove(), 300);
+  }, 2000);
+}

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

@@ -0,0 +1,194 @@
+// ==========================================
+// NOTIFICATIONS COMPONENT
+// ==========================================
+// Real-time silent refresh (no notification bubbles)
+
+let wsConnection = null;
+let autoRefreshInterval = null;
+let lastDataHash = null;
+const AUTO_REFRESH_INTERVAL_MS = 30000; // 30 seconds
+
+// ========== WebSocket Connection ==========
+function initWebSocket() {
+  const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+  const wsUrl = `${protocol}//${window.location.host}/ws`;
+
+  try {
+    wsConnection = new WebSocket(wsUrl);
+
+    wsConnection.onopen = () => {
+      console.log('[WS] Connected');
+    };
+
+    wsConnection.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        handleNotification(data);
+      } catch (e) {
+        console.error('[WS] Failed to parse message:', e);
+      }
+    };
+
+    wsConnection.onclose = () => {
+      console.log('[WS] Disconnected, reconnecting in 5s...');
+      setTimeout(initWebSocket, 5000);
+    };
+
+    wsConnection.onerror = (error) => {
+      console.error('[WS] Error:', error);
+    };
+  } catch (e) {
+    console.log('[WS] WebSocket not available, using polling');
+  }
+}
+
+// ========== Notification Handler ==========
+function handleNotification(data) {
+  const { type, payload } = data;
+
+  // Silent refresh - no notification bubbles
+  switch (type) {
+    case 'session_updated':
+    case 'summary_written':
+    case 'task_completed':
+    case 'new_session':
+      // Just refresh data silently
+      refreshIfNeeded();
+      // Optionally highlight in carousel if it's the current session
+      if (payload.sessionId && typeof carouselGoTo === 'function') {
+        carouselGoTo(payload.sessionId);
+      }
+      break;
+
+    default:
+      console.log('[WS] Unknown notification type:', type);
+  }
+}
+
+// ========== Auto Refresh ==========
+function initAutoRefresh() {
+  // Calculate initial hash
+  lastDataHash = calculateDataHash();
+
+  // Start polling interval
+  autoRefreshInterval = setInterval(checkForChanges, AUTO_REFRESH_INTERVAL_MS);
+}
+
+function calculateDataHash() {
+  if (!workflowData) return null;
+
+  // Simple hash based on key data points
+  const hashData = {
+    activeSessions: (workflowData.activeSessions || []).length,
+    archivedSessions: (workflowData.archivedSessions || []).length,
+    totalTasks: workflowData.statistics?.totalTasks || 0,
+    completedTasks: workflowData.statistics?.completedTasks || 0,
+    generatedAt: workflowData.generatedAt
+  };
+
+  return JSON.stringify(hashData);
+}
+
+async function checkForChanges() {
+  if (!window.SERVER_MODE) return;
+
+  try {
+    const response = await fetch(`/api/data?path=${encodeURIComponent(projectPath)}`);
+    if (!response.ok) return;
+
+    const newData = await response.json();
+    const newHash = JSON.stringify({
+      activeSessions: (newData.activeSessions || []).length,
+      archivedSessions: (newData.archivedSessions || []).length,
+      totalTasks: newData.statistics?.totalTasks || 0,
+      completedTasks: newData.statistics?.completedTasks || 0,
+      generatedAt: newData.generatedAt
+    });
+
+    if (newHash !== lastDataHash) {
+      lastDataHash = newHash;
+      // Silent refresh - no notification
+      await refreshWorkspaceData(newData);
+    }
+  } catch (e) {
+    console.error('[AutoRefresh] Check failed:', e);
+  }
+}
+
+async function refreshIfNeeded() {
+  if (!window.SERVER_MODE) return;
+
+  try {
+    const response = await fetch(`/api/data?path=${encodeURIComponent(projectPath)}`);
+    if (!response.ok) return;
+
+    const newData = await response.json();
+    await refreshWorkspaceData(newData);
+  } catch (e) {
+    console.error('[Refresh] Failed:', e);
+  }
+}
+
+async function refreshWorkspaceData(newData) {
+  // Update global data
+  window.workflowData = newData;
+
+  // Clear and repopulate stores
+  Object.keys(sessionDataStore).forEach(k => delete sessionDataStore[k]);
+  Object.keys(liteTaskDataStore).forEach(k => delete liteTaskDataStore[k]);
+
+  [...(newData.activeSessions || []), ...(newData.archivedSessions || [])].forEach(s => {
+    const key = `session-${s.session_id}`.replace(/[^a-zA-Z0-9-]/g, '-');
+    sessionDataStore[key] = s;
+  });
+
+  [...(newData.liteTasks?.litePlan || []), ...(newData.liteTasks?.liteFix || [])].forEach(s => {
+    const key = `lite-${s.session_id}`.replace(/[^a-zA-Z0-9-]/g, '-');
+    liteTaskDataStore[key] = s;
+  });
+
+  // Update UI silently
+  updateStats();
+  updateBadges();
+  updateCarousel();
+
+  // Re-render current view if needed
+  if (currentView === 'sessions') {
+    renderSessions();
+  } else if (currentView === 'liteTasks') {
+    renderLiteTasks();
+  }
+
+  lastDataHash = calculateDataHash();
+}
+
+// ========== Cleanup ==========
+function stopAutoRefresh() {
+  if (autoRefreshInterval) {
+    clearInterval(autoRefreshInterval);
+    autoRefreshInterval = null;
+  }
+}
+
+function closeWebSocket() {
+  if (wsConnection) {
+    wsConnection.close();
+    wsConnection = null;
+  }
+}
+
+// ========== Navigation Helper ==========
+function goToSession(sessionId) {
+  // Find session in carousel and navigate
+  const sessionKey = `session-${sessionId}`.replace(/[^a-zA-Z0-9-]/g, '-');
+
+  // Jump to session in carousel if visible
+  if (typeof carouselGoTo === 'function') {
+    carouselGoTo(sessionId);
+  }
+
+  // Navigate to session detail
+  if (sessionDataStore[sessionKey]) {
+    showSessionDetailPage(sessionKey);
+  }
+}