claude-code-workflow 6.1.3 → 6.2.1

package/src/templates/dashboard-js/main.js

@@ -0,0 +1,87 @@
+// Application Entry Point
+// Initializes all components and sets up global event handlers
+
+document.addEventListener('DOMContentLoaded', async () => {
+  // Initialize Lucide icons (must be first to render SVG icons)
+  try { lucide.createIcons(); } catch (e) { console.error('Lucide icons init failed:', e); }
+
+  // Initialize i18n (must be early to translate static content)
+  try { initI18n(); } catch (e) { console.error('I18n init failed:', e); }
+
+  // Initialize components with error handling to prevent cascading failures
+  try { initTheme(); } catch (e) { console.error('Theme init failed:', e); }
+  try { initSidebar(); } catch (e) { console.error('Sidebar init failed:', e); }
+  try { initPathSelector(); } catch (e) { console.error('Path selector init failed:', e); }
+  try { initNavigation(); } catch (e) { console.error('Navigation init failed:', e); }
+  try { initSearch(); } catch (e) { console.error('Search init failed:', e); }
+  try { initRefreshButton(); } catch (e) { console.error('Refresh button init failed:', e); }
+  try { initCarousel(); } catch (e) { console.error('Carousel init failed:', e); }
+  try { initMcpManager(); } catch (e) { console.error('MCP Manager init failed:', e); }
+  try { initHookManager(); } catch (e) { console.error('Hook Manager init failed:', e); }
+  try { initCliStatus(); } catch (e) { console.error('CLI Status init failed:', e); }
+  try { initGlobalNotifications(); } catch (e) { console.error('Global notifications init failed:', e); }
+  try { initTaskQueueSidebar(); } catch (e) { console.error('Task queue sidebar init failed:', e); }
+  try { initVersionCheck(); } catch (e) { console.error('Version check init failed:', e); }
+
+  // Initialize real-time features (WebSocket + auto-refresh)
+  try { initWebSocket(); } catch (e) { console.log('WebSocket not available:', e.message); }
+  try { initAutoRefresh(); } catch (e) { console.error('Auto-refresh init failed:', e); }
+
+  // Server mode: load data from API
+  try {
+    if (window.SERVER_MODE) {
+      // Check URL for path parameter (from ccw view command)
+      const urlParams = new URLSearchParams(window.location.search);
+      const urlPath = urlParams.get('path');
+      const initialPath = urlPath || window.INITIAL_PATH || projectPath;
+
+      await switchToPath(initialPath);
+
+      // Clean up URL after loading (remove query param)
+      if (urlPath && window.history.replaceState) {
+        window.history.replaceState({}, '', window.location.pathname);
+      }
+    } else {
+      renderDashboard();
+    }
+  } catch (e) {
+    console.error('Dashboard render failed:', e);
+  }
+
+  // Global Escape key handler for modals
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+      closeMarkdownModal();
+
+      // Close JSON modal if exists
+      const jsonModal = document.querySelector('.json-modal-overlay');
+      if (jsonModal) {
+        const closeBtn = jsonModal.querySelector('.json-modal-close');
+        if (closeBtn) closeJsonModal(closeBtn);
+      }
+
+      // Close path modal if exists
+      closePathModal();
+
+      // Close MCP create modal if exists
+      if (typeof closeMcpCreateModal === 'function') {
+        closeMcpCreateModal();
+      }
+
+      // Close Hook create modal if exists
+      if (typeof closeHookCreateModal === 'function') {
+        closeHookCreateModal();
+      }
+
+      // Close notification sidebar if open
+      if (isNotificationPanelVisible && typeof toggleNotifSidebar === 'function') {
+        toggleNotifSidebar();
+      }
+
+      // Close task queue sidebar if open
+      if (isTaskQueueSidebarVisible && typeof toggleTaskQueueSidebar === 'function') {
+        toggleTaskQueueSidebar();
+      }
+    }
+  });
+});

package/src/templates/dashboard-js/state.js

@@ -0,0 +1,243 @@
+// ========================================
+// State Management
+// ========================================
+// Global state variables and template placeholders
+// This module must be loaded first as other modules depend on these variables
+
+// ========== Data Placeholders ==========
+// These placeholders are replaced by the dashboard generator at build time
+let workflowData = {{WORKFLOW_DATA}};
+let projectPath = '{{PROJECT_PATH}}';
+let recentPaths = {{RECENT_PATHS}};
+
+// Platform detection for cross-platform MCP command generation
+// 'win32' for Windows, 'darwin' for macOS, 'linux' for Linux
+const serverPlatform = '{{SERVER_PLATFORM}}';
+const isWindowsPlatform = serverPlatform === 'win32';
+
+// ========== Application State ==========
+// Current filter for session list view ('all', 'active', 'archived')
+let currentFilter = 'all';
+
+// Current lite task type ('lite-plan', 'lite-fix', or null)
+let currentLiteType = null;
+
+// Current view mode ('sessions', 'liteTasks', 'project-overview', 'sessionDetail', 'liteTaskDetail')
+let currentView = 'sessions';
+
+// Current session detail key (null when not in detail view)
+let currentSessionDetailKey = null;
+
+// ========== Data Stores ==========
+// Store session data for modal/detail access
+// Key: session key, Value: session data object
+const sessionDataStore = {};
+
+// Store lite task session data for detail page access
+// Key: session key, Value: lite session data object
+const liteTaskDataStore = {};
+
+// Store task JSON data in a global map instead of inline script tags
+// Key: unique task ID, Value: raw task JSON data
+const taskJsonStore = {};
+
+// ========== Global Notification Queue ==========
+// Notification queue visible from any view (persisted to localStorage)
+const NOTIFICATION_STORAGE_KEY = 'ccw_notifications';
+const NOTIFICATION_MAX_STORED = 100;
+
+// Load notifications from localStorage on init
+let globalNotificationQueue = loadNotificationsFromStorage();
+let isNotificationPanelVisible = false;
+
+/**
+ * Load notifications from localStorage
+ * @returns {Array} Notification array
+ */
+function loadNotificationsFromStorage() {
+  try {
+    const stored = localStorage.getItem(NOTIFICATION_STORAGE_KEY);
+    if (stored) {
+      const parsed = JSON.parse(stored);
+      // Filter out notifications older than 7 days
+      const sevenDaysAgo = Date.now() - (7 * 24 * 60 * 60 * 1000);
+      return parsed.filter(n => new Date(n.timestamp).getTime() > sevenDaysAgo);
+    }
+  } catch (e) {
+    console.error('[Notifications] Failed to load from storage:', e);
+  }
+  return [];
+}
+
+/**
+ * Save notifications to localStorage
+ */
+function saveNotificationsToStorage() {
+  try {
+    // Keep only the last N notifications
+    const toSave = globalNotificationQueue.slice(0, NOTIFICATION_MAX_STORED);
+    localStorage.setItem(NOTIFICATION_STORAGE_KEY, JSON.stringify(toSave));
+  } catch (e) {
+    console.error('[Notifications] Failed to save to storage:', e);
+  }
+}
+// ========== Event Handler ==========
+/**
+ * Handle granular workflow events from CLI
+ * @param {Object} event - Event object with type, sessionId, payload
+ */
+function handleWorkflowEvent(event) {
+  const { type, payload, sessionId, entityId } = event;
+
+  switch(type) {
+    case 'SESSION_CREATED':
+      // Add to activeSessions array
+      if (payload) {
+        const sessionData = {
+          session_id: sessionId,
+          ...(payload.metadata || { status: 'planning', created_at: new Date().toISOString() }),
+          location: 'active'
+        };
+
+        // Add to store
+        const key = `session-${sessionId}`.replace(/[^a-zA-Z0-9-]/g, '-');
+        sessionDataStore[key] = sessionData;
+
+        // Add to workflowData
+        if (!workflowData.activeSessions) workflowData.activeSessions = [];
+        workflowData.activeSessions.push(sessionData);
+      }
+      break;
+
+    case 'SESSION_ARCHIVED':
+      // Move from active to archived
+      if (!workflowData.activeSessions) workflowData.activeSessions = [];
+      if (!workflowData.archivedSessions) workflowData.archivedSessions = [];
+
+      const activeIndex = workflowData.activeSessions.findIndex(s => s.session_id === sessionId);
+      if (activeIndex !== -1) {
+        const session = workflowData.activeSessions.splice(activeIndex, 1)[0];
+        session.location = 'archived';
+        if (payload && payload.metadata) {
+          Object.assign(session, payload.metadata);
+        }
+        workflowData.archivedSessions.push(session);
+
+        // Update store
+        const key = `session-${sessionId}`.replace(/[^a-zA-Z0-9-]/g, '-');
+        sessionDataStore[key] = session;
+      }
+      break;
+
+    case 'TASK_UPDATED':
+      // Find task in session and merge payload
+      const taskSessionKey = `session-${sessionId}`.replace(/[^a-zA-Z0-9-]/g, '-');
+      const taskSession = sessionDataStore[taskSessionKey];
+      if (taskSession && taskSession.tasks) {
+        const task = taskSession.tasks.find(t => t.task_id === entityId);
+        if (task && payload) {
+          Object.assign(task, payload);
+        }
+      }
+      break;
+
+    case 'SESSION_UPDATED':
+      // Update session metadata
+      const sessionKey = `session-${sessionId}`.replace(/[^a-zA-Z0-9-]/g, '-');
+      const session = sessionDataStore[sessionKey];
+      if (session && payload) {
+        Object.assign(session, payload);
+
+        // Update in workflowData arrays
+        const activeSession = workflowData.activeSessions?.find(s => s.session_id === sessionId);
+        const archivedSession = workflowData.archivedSessions?.find(s => s.session_id === sessionId);
+        if (activeSession) Object.assign(activeSession, payload);
+        if (archivedSession) Object.assign(archivedSession, payload);
+      }
+      break;
+
+    case 'TASK_CREATED':
+      // Add new task to session
+      const tcSessionKey = `session-${sessionId}`.replace(/[^a-zA-Z0-9-]/g, '-');
+      const tcSession = sessionDataStore[tcSessionKey];
+      if (tcSession) {
+        if (!tcSession.tasks) tcSession.tasks = [];
+        // Check if task already exists (by entityId or task_id in payload)
+        const taskId = entityId || (payload && payload.task_id);
+        const existingTask = tcSession.tasks.find(t => t.task_id === taskId);
+        if (!existingTask && payload) {
+          tcSession.tasks.push(payload);
+        }
+      }
+      break;
+
+    case 'SUMMARY_WRITTEN':
+      // Update session summary count or mark task as having summary
+      const swSessionKey = `session-${sessionId}`.replace(/[^a-zA-Z0-9-]/g, '-');
+      const swSession = sessionDataStore[swSessionKey];
+      if (swSession) {
+        if (!swSession.summaries) swSession.summaries = [];
+        swSession.summaries.push({ task_id: entityId, content: payload });
+        // Update task status if found
+        if (swSession.tasks && entityId) {
+          const task = swSession.tasks.find(t => t.task_id === entityId);
+          if (task) task.has_summary = true;
+        }
+      }
+      break;
+
+    case 'PLAN_UPDATED':
+      // Update session plan reference
+      const puSessionKey = `session-${sessionId}`.replace(/[^a-zA-Z0-9-]/g, '-');
+      const puSession = sessionDataStore[puSessionKey];
+      if (puSession) {
+        puSession.has_plan = true;
+        puSession.plan_updated_at = new Date().toISOString();
+      }
+      break;
+
+    case 'REVIEW_UPDATED':
+      // Update session review data
+      const ruSessionKey = `session-${sessionId}`.replace(/[^a-zA-Z0-9-]/g, '-');
+      const ruSession = sessionDataStore[ruSessionKey];
+      if (ruSession) {
+        if (!ruSession.review) ruSession.review = { dimensions: [], iterations: [], fixes: [] };
+        // Track review updates by type based on entityId pattern (prevent duplicates)
+        if (event.contentType === 'review-dim') {
+          if (!ruSession.review.dimensions.includes(entityId)) ruSession.review.dimensions.push(entityId);
+        } else if (event.contentType === 'review-iter') {
+          if (!ruSession.review.iterations.includes(entityId)) ruSession.review.iterations.push(entityId);
+        } else if (event.contentType === 'review-fix') {
+          if (!ruSession.review.fixes.includes(entityId)) ruSession.review.fixes.push(entityId);
+        }
+        ruSession.has_review = true;
+      }
+      break;
+
+    case 'CONTENT_WRITTEN':
+      // Generic content write - just log for debugging
+      console.log(`[State] Content written: ${event.contentType} for ${sessionId}`);
+      break;
+
+    case 'FILE_DELETED':
+      // File deleted from session - log and trigger refresh
+      console.log(`[State] File deleted: ${payload?.file_path || payload?.deleted} from ${sessionId}`);
+      break;
+
+    case 'DIRECTORY_CREATED':
+      // Directory created in session - log and trigger refresh
+      console.log(`[State] Directory created: ${payload?.directories?.join(', ') || 'unknown'} in ${sessionId}`);
+      break;
+  }
+
+  // Trigger UI updates
+  if (typeof updateStats === 'function') updateStats();
+  if (typeof updateBadges === 'function') updateBadges();
+  if (typeof updateCarousel === 'function') updateCarousel();
+  if (typeof refreshTaskQueue === 'function') refreshTaskQueue();
+
+  // Re-render current view if needed
+  if (currentView === 'sessions' && typeof renderSessions === 'function') {
+    renderSessions();
+  }
+}

package/src/templates/dashboard-js/utils.js

@@ -0,0 +1,199 @@
+// ========================================
+// Utility Functions
+// ========================================
+// General-purpose helper functions used across the application
+
+// ========== HTML/Text Processing ==========
+
+/**
+ * Encode JSON config data to Base64 for safe HTML attribute storage
+ * @param {Object} config - Configuration object to encode
+ * @returns {string} Base64 encoded JSON string
+ */
+function encodeConfigData(config) {
+  try {
+    const jsonStr = JSON.stringify(config);
+    return btoa(encodeURIComponent(jsonStr));
+  } catch (err) {
+    console.error('[Utils] Error encoding config data:', err);
+    return '';
+  }
+}
+
+/**
+ * Decode Base64 config data back to JSON object
+ * @param {string} encoded - Base64 encoded string
+ * @returns {Object|null} Decoded configuration object or null on error
+ */
+function decodeConfigData(encoded) {
+  try {
+    if (!encoded) return null;
+    const jsonStr = decodeURIComponent(atob(encoded));
+    return JSON.parse(jsonStr);
+  } catch (err) {
+    console.error('[Utils] Error decoding config data:', err);
+    return null;
+  }
+}
+
+/**
+ * Escape HTML special characters to prevent XSS attacks
+ * @param {string} str - String to escape
+ * @returns {string} Escaped string safe for HTML insertion
+ */
+function escapeHtml(str) {
+  if (typeof str !== 'string') return str;
+  return str
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}
+
+/**
+ * Unescape HTML entities back to original characters
+ * @param {string} str - String with HTML entities
+ * @returns {string} String with entities decoded
+ */
+function unescapeHtml(str) {
+  if (typeof str !== 'string') return str;
+  return str
+    .replace(/&quot;/g, '"')
+    .replace(/&#039;/g, "'")
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&amp;/g, '&');
+}
+
+/**
+ * Truncate text to specified maximum length
+ * @param {string} text - Text to truncate
+ * @param {number} maxLen - Maximum length (including ellipsis)
+ * @returns {string} Truncated text with '...' if needed
+ */
+function truncateText(text, maxLen) {
+  if (!text) return '';
+  return text.length > maxLen ? text.substring(0, maxLen - 3) + '...' : text;
+}
+
+/**
+ * Normalize line endings in content
+ * Handles both literal \r\n escape sequences and actual newlines
+ * @param {string} content - Content to normalize
+ * @returns {string} Content with normalized line endings (LF only)
+ */
+function normalizeLineEndings(content) {
+  if (!content) return '';
+  let normalized = content;
+  // If content has literal \r\n or \n as text (escaped), convert to actual newlines
+  if (normalized.includes('\\r\\n')) {
+    normalized = normalized.replace(/\\r\\n/g, '\n');
+  } else if (normalized.includes('\\n')) {
+    normalized = normalized.replace(/\\n/g, '\n');
+  }
+  // Normalize CRLF to LF for consistent rendering
+  normalized = normalized.replace(/\r\n/g, '\n');
+  return normalized;
+}
+
+// ========== Date/Time Formatting ==========
+
+/**
+ * Format ISO date string to human-readable format
+ * @param {string} dateStr - ISO date string
+ * @returns {string} Formatted date string (YYYY/MM/DD HH:mm) or '-' if invalid
+ */
+function formatDate(dateStr) {
+  if (!dateStr) return '-';
+  try {
+    const date = new Date(dateStr);
+    // Check if date is valid
+    if (isNaN(date.getTime())) return '-';
+    // Format: YYYY/MM/DD HH:mm
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    return `${year}/${month}/${day} ${hours}:${minutes}`;
+  } catch (e) {
+    return '-';
+  }
+}
+
+// ========== UI Helpers ==========
+
+/**
+ * Get color for relevance score visualization
+ * @param {number} score - Relevance score (0-1)
+ * @returns {string} CSS color value
+ */
+function getRelevanceColor(score) {
+  if (score >= 0.95) return '#10b981';
+  if (score >= 0.90) return '#3b82f6';
+  if (score >= 0.80) return '#f59e0b';
+  return '#6b7280';
+}
+
+/**
+ * Get CSS class for role badge styling
+ * @param {string} role - Role identifier
+ * @returns {string} CSS class name
+ */
+function getRoleBadgeClass(role) {
+  const roleMap = {
+    'core-hook': 'primary',
+    'api-client': 'success',
+    'api-router': 'info',
+    'service-layer': 'warning',
+    'pydantic-schemas': 'secondary',
+    'orm-model': 'secondary',
+    'typescript-types': 'info'
+  };
+  return roleMap[role] || 'secondary';
+}
+
+/**
+ * Toggle collapsible section visibility
+ * @param {HTMLElement} header - Section header element
+ */
+function toggleSection(header) {
+  const content = header.nextElementSibling;
+  const icon = header.querySelector('.collapse-icon');
+  const isCollapsed = content.classList.contains('collapsed');
+
+  content.classList.toggle('collapsed');
+  header.classList.toggle('expanded');
+  icon.textContent = isCollapsed ? '▼' : '▶';
+
+  // Render flowchart if expanding flow_control section
+  if (isCollapsed && header.querySelector('.section-label')?.textContent === 'flow_control') {
+    const taskId = content.closest('[data-task-id]')?.dataset.taskId;
+    if (taskId) {
+      const task = taskJsonStore[taskId];
+      if (task?.flow_control) {
+        setTimeout(() => renderFullFlowchart(task.flow_control), 100);
+      }
+    }
+  }
+}
+
+/**
+ * Initialize collapsible sections within a container
+ * @param {HTMLElement} container - Container element to search within
+ */
+function initCollapsibleSections(container) {
+  setTimeout(() => {
+    const headers = container.querySelectorAll('.collapsible-header');
+    headers.forEach((header) => {
+      if (!header._clickBound) {
+        header._clickBound = true;
+        header.addEventListener('click', function(e) {
+          e.stopPropagation();
+          toggleSection(this);
+        });
+      }
+    });
+  }, 100);
+}