claude-code-workflow 6.0.0

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

@@ -0,0 +1,153 @@
+// ========================================
+// Utility Functions
+// ========================================
+// General-purpose helper functions used across the application
+
+// ========== HTML/Text Processing ==========
+
+/**
+ * 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;');
+}
+
+/**
+ * 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);
+}

package/ccw/src/templates/dashboard-js/views/fix-session.js

@@ -0,0 +1,180 @@
+// ============================================
+// FIX SESSION VIEW
+// ============================================
+// Fix session detail page rendering
+
+function renderFixSessionDetailPage(session) {
+  const isActive = session._isActive !== false;
+  const tasks = session.tasks || [];
+
+  // Calculate fix statistics
+  const totalTasks = tasks.length;
+  const fixedCount = tasks.filter(t => t.status === 'completed' && t.result === 'fixed').length;
+  const failedCount = tasks.filter(t => t.status === 'completed' && t.result === 'failed').length;
+  const pendingCount = tasks.filter(t => t.status === 'pending').length;
+  const inProgressCount = tasks.filter(t => t.status === 'in_progress').length;
+  const percentComplete = totalTasks > 0 ? ((fixedCount + failedCount) / totalTasks * 100) : 0;
+
+  return `
+    <div class="session-detail-page session-type-fix">
+      <!-- Header -->
+      <div class="detail-header">
+        <button class="btn-back" onclick="goBackToSessions()">
+          <span class="back-icon">←</span>
+          <span>Back to Sessions</span>
+        </button>
+        <div class="detail-title-row">
+          <h2 class="detail-session-id">🔧 ${escapeHtml(session.session_id)}</h2>
+          <div class="detail-badges">
+            <span class="session-type-badge test-fix">Fix</span>
+            <span class="session-status ${isActive ? 'active' : 'archived'}">
+              ${isActive ? 'ACTIVE' : 'ARCHIVED'}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fix Progress Section -->
+      <div class="fix-progress-section">
+        <div class="fix-progress-header">
+          <h3>🔧 Fix Progress</h3>
+          <span class="phase-badge ${session.phase || 'execution'}">${session.phase || 'Execution'}</span>
+        </div>
+
+        <!-- Progress Bar -->
+        <div class="fix-progress-bar">
+          <div class="fix-progress-bar-fill" style="width: ${percentComplete}%"></div>
+        </div>
+        <div class="progress-text">
+          <strong>${fixedCount + failedCount}/${totalTasks}</strong> completed (${percentComplete.toFixed(1)}%)
+        </div>
+
+        <!-- Summary Cards -->
+        <div class="fix-summary-grid">
+          <div class="summary-card">
+            <div class="summary-icon">📊</div>
+            <div class="summary-value">${totalTasks}</div>
+            <div class="summary-label">Total Tasks</div>
+          </div>
+          <div class="summary-card fixed">
+            <div class="summary-icon">✅</div>
+            <div class="summary-value">${fixedCount}</div>
+            <div class="summary-label">Fixed</div>
+          </div>
+          <div class="summary-card failed">
+            <div class="summary-icon">❌</div>
+            <div class="summary-value">${failedCount}</div>
+            <div class="summary-label">Failed</div>
+          </div>
+          <div class="summary-card pending">
+            <div class="summary-icon">⏳</div>
+            <div class="summary-value">${pendingCount}</div>
+            <div class="summary-label">Pending</div>
+          </div>
+        </div>
+
+        <!-- Stage Timeline (if available) -->
+        ${session.stages && session.stages.length > 0 ? `
+          <div class="stage-timeline">
+            ${session.stages.map((stage, idx) => `
+              <div class="stage-item ${stage.status || 'pending'}">
+                <div class="stage-number">Stage ${idx + 1}</div>
+                <div class="stage-mode">${stage.execution_mode === 'parallel' ? '⚡ Parallel' : '➡️ Serial'}</div>
+                <div class="stage-groups">${stage.groups?.length || 0} groups</div>
+              </div>
+            `).join('')}
+          </div>
+        ` : ''}
+      </div>
+
+      <!-- Fix Tasks Grid -->
+      <div class="fix-tasks-section">
+        <div class="tasks-header">
+          <h3>📋 Fix Tasks</h3>
+          <div class="task-filters">
+            <button class="filter-btn active" data-status="all" onclick="filterFixTasks('all')">All</button>
+            <button class="filter-btn" data-status="pending" onclick="filterFixTasks('pending')">Pending</button>
+            <button class="filter-btn" data-status="in_progress" onclick="filterFixTasks('in_progress')">In Progress</button>
+            <button class="filter-btn" data-status="fixed" onclick="filterFixTasks('fixed')">Fixed</button>
+            <button class="filter-btn" data-status="failed" onclick="filterFixTasks('failed')">Failed</button>
+          </div>
+        </div>
+        <div class="fix-tasks-grid" id="fixTasksGrid">
+          ${renderFixTasksGrid(tasks)}
+        </div>
+      </div>
+
+      <!-- Session Info -->
+      <div class="detail-info-bar">
+        <div class="info-item">
+          <span class="info-label">Created:</span>
+          <span class="info-value">${formatDate(session.created_at)}</span>
+        </div>
+        ${session.archived_at ? `
+          <div class="info-item">
+            <span class="info-label">Archived:</span>
+            <span class="info-value">${formatDate(session.archived_at)}</span>
+          </div>
+        ` : ''}
+        <div class="info-item">
+          <span class="info-label">Project:</span>
+          <span class="info-value">${escapeHtml(session.project || '-')}</span>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+function renderFixTasksGrid(tasks) {
+  if (!tasks || tasks.length === 0) {
+    return `
+      <div class="empty-state">
+        <div class="empty-icon">📋</div>
+        <div class="empty-text">No fix tasks found</div>
+      </div>
+    `;
+  }
+
+  return tasks.map(task => {
+    const statusClass = task.status === 'completed' ? (task.result || 'completed') : task.status;
+    const statusText = task.status === 'completed' ? (task.result || 'completed') : task.status;
+
+    return `
+      <div class="fix-task-card status-${statusClass}" data-status="${statusClass}">
+        <div class="task-card-header">
+          <span class="task-id-badge">${escapeHtml(task.task_id || task.id || 'N/A')}</span>
+          <span class="task-status-badge ${statusClass}">${statusText}</span>
+        </div>
+        <div class="task-card-title">${escapeHtml(task.title || 'Untitled Task')}</div>
+        ${task.finding_title ? `<div class="task-finding">${escapeHtml(task.finding_title)}</div>` : ''}
+        ${task.file ? `<div class="task-file">📄 ${escapeHtml(task.file)}${task.line ? ':' + task.line : ''}</div>` : ''}
+        <div class="task-card-meta">
+          ${task.dimension ? `<span class="task-dimension">${escapeHtml(task.dimension)}</span>` : ''}
+          ${task.attempts && task.attempts > 1 ? `<span class="task-attempts">🔄 ${task.attempts} attempts</span>` : ''}
+          ${task.commit_hash ? `<span class="task-commit">💾 ${task.commit_hash.substring(0, 7)}</span>` : ''}
+        </div>
+      </div>
+    `;
+  }).join('');
+}
+
+function initFixSessionPage(session) {
+  // Initialize event handlers for fix session page
+  // Filter handlers are inline onclick
+}
+
+function filterFixTasks(status) {
+  // Update filter buttons
+  document.querySelectorAll('.task-filters .filter-btn').forEach(btn => {
+    btn.classList.toggle('active', btn.dataset.status === status);
+  });
+
+  // Filter task cards
+  document.querySelectorAll('.fix-task-card').forEach(card => {
+    if (status === 'all' || card.dataset.status === status) {
+      card.style.display = '';
+    } else {
+      card.style.display = 'none';
+    }
+  });
+}

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

@@ -0,0 +1,193 @@
+// ==========================================
+// HOME VIEW - Dashboard Homepage
+// ==========================================
+
+function renderDashboard() {
+  // Show stats grid and search (may be hidden by MCP view)
+  showStatsAndSearch();
+
+  updateStats();
+  updateBadges();
+  updateCarousel();
+  renderSessions();
+  document.getElementById('generatedAt').textContent = workflowData.generatedAt || new Date().toISOString();
+}
+
+function showStatsAndSearch() {
+  const statsGrid = document.getElementById('statsGrid');
+  const searchInput = document.getElementById('searchInput');
+  if (statsGrid) statsGrid.style.display = '';
+  if (searchInput) searchInput.parentElement.style.display = '';
+}
+
+function hideStatsAndCarousel() {
+  const statsGrid = document.getElementById('statsGrid');
+  const searchInput = document.getElementById('searchInput');
+  if (statsGrid) statsGrid.style.display = 'none';
+  if (searchInput) searchInput.parentElement.style.display = 'none';
+}
+
+function updateStats() {
+  const stats = workflowData.statistics || {};
+  document.getElementById('statTotalSessions').textContent = stats.totalSessions || 0;
+  document.getElementById('statActiveSessions').textContent = stats.activeSessions || 0;
+  document.getElementById('statTotalTasks').textContent = stats.totalTasks || 0;
+  document.getElementById('statCompletedTasks').textContent = stats.completedTasks || 0;
+}
+
+function updateBadges() {
+  const active = workflowData.activeSessions || [];
+  const archived = workflowData.archivedSessions || [];
+
+  document.getElementById('badgeAll').textContent = active.length + archived.length;
+  document.getElementById('badgeActive').textContent = active.length;
+  document.getElementById('badgeArchived').textContent = archived.length;
+
+  // Lite Tasks badges
+  const liteTasks = workflowData.liteTasks || {};
+  document.getElementById('badgeLitePlan').textContent = liteTasks.litePlan?.length || 0;
+  document.getElementById('badgeLiteFix').textContent = liteTasks.liteFix?.length || 0;
+
+  // MCP badge - load async if needed
+  if (typeof loadMcpConfig === 'function') {
+    loadMcpConfig().then(() => {
+      if (typeof updateMcpBadge === 'function') {
+        updateMcpBadge();
+      }
+    }).catch(e => console.error('MCP badge update failed:', e));
+  }
+}
+
+function renderSessions() {
+  const container = document.getElementById('mainContent');
+
+  let sessions = [];
+
+  if (currentFilter === 'all' || currentFilter === 'active') {
+    sessions = sessions.concat((workflowData.activeSessions || []).map(s => ({ ...s, _isActive: true })));
+  }
+  if (currentFilter === 'all' || currentFilter === 'archived') {
+    sessions = sessions.concat((workflowData.archivedSessions || []).map(s => ({ ...s, _isActive: false })));
+  }
+
+  if (sessions.length === 0) {
+    container.innerHTML = `
+      <div class="empty-state" style="grid-column: 1/-1;">
+        <div class="empty-icon">📭</div>
+        <div class="empty-title">No Sessions Found</div>
+        <div class="empty-text">No workflow sessions match your current filter.</div>
+      </div>
+    `;
+    return;
+  }
+
+  container.innerHTML = `<div class="sessions-grid">${sessions.map(session => renderSessionCard(session)).join('')}</div>`;
+}
+
+function renderSessionCard(session) {
+  const tasks = session.tasks || [];
+  const taskCount = session.taskCount || tasks.length;
+  const completed = tasks.filter(t => t.status === 'completed').length;
+  const progress = taskCount > 0 ? Math.round((completed / taskCount) * 100) : 0;
+
+  // Use _isActive flag set during rendering, default to true
+  const isActive = session._isActive !== false;
+  const date = session.created_at;
+
+  // Get session type badge
+  const sessionType = session.type || 'workflow';
+  const typeBadge = sessionType !== 'workflow' ? `<span class="session-type-badge ${sessionType}">${sessionType}</span>` : '';
+
+  // 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 `
+    <div class="session-card" 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>
+        </div>
+      </div>
+      <div class="session-body">
+        <div class="session-meta">
+          <span class="session-meta-item">📅 ${formatDate(date)}</span>
+          <span class="session-meta-item">📋 ${taskCount} tasks</span>
+        </div>
+        ${taskCount > 0 ? `
+          <div class="progress-container">
+            <span class="progress-label">Progress</span>
+            <div class="progress-bar-wrapper">
+              <div class="progress-bar">
+                <div class="progress-fill" style="width: ${progress}%"></div>
+              </div>
+              <span class="progress-text">${completed}/${taskCount} (${progress}%)</span>
+            </div>
+          </div>
+        ` : ''}
+      </div>
+    </div>
+  `;
+}
+
+// Special card rendering for review sessions
+function renderReviewSessionCard(session, sessionKey, typeBadge, isActive, date) {
+  // Calculate findings stats from reviewDimensions
+  const dimensions = session.reviewDimensions || [];
+  let totalFindings = 0;
+  let criticalCount = 0;
+  let highCount = 0;
+  let mediumCount = 0;
+  let lowCount = 0;
+
+  dimensions.forEach(dim => {
+    const findings = dim.findings || [];
+    totalFindings += findings.length;
+    criticalCount += findings.filter(f => f.severity === 'critical').length;
+    highCount += findings.filter(f => f.severity === 'high').length;
+    mediumCount += findings.filter(f => f.severity === 'medium').length;
+    lowCount += findings.filter(f => f.severity === 'low').length;
+  });
+
+  return `
+    <div class="session-card" 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>
+        </div>
+      </div>
+      <div class="session-body">
+        <div class="session-meta">
+          <span class="session-meta-item">📅 ${formatDate(date)}</span>
+          <span class="session-meta-item">🔍 ${totalFindings} findings</span>
+        </div>
+        ${totalFindings > 0 ? `
+          <div class="review-findings-summary">
+            <div class="findings-severity-row">
+              ${criticalCount > 0 ? `<span class="finding-count critical">🔴 ${criticalCount}</span>` : ''}
+              ${highCount > 0 ? `<span class="finding-count high">🟠 ${highCount}</span>` : ''}
+              ${mediumCount > 0 ? `<span class="finding-count medium">🟡 ${mediumCount}</span>` : ''}
+              ${lowCount > 0 ? `<span class="finding-count low">🟢 ${lowCount}</span>` : ''}
+            </div>
+            <div class="dimensions-info">
+              ${dimensions.length} dimensions
+            </div>
+          </div>
+        ` : ''}
+      </div>
+    </div>
+  `;
+}