claude-code-workflow 6.1.4 → 6.2.1

package/ccw/src/templates/dashboard-js/components/tabs-other.js

@@ -1,273 +0,0 @@
-// ==========================================
-// Tab Content Renderers - Other Tabs
-// ==========================================
-// Functions for rendering Summary, IMPL Plan, Review, and Lite Context tabs
-
-// ==========================================
-// Summary Tab Rendering
-// ==========================================
-
-function renderSummaryContent(summaries) {
-  if (!summaries || summaries.length === 0) {
-    return `
-      <div class="tab-empty-state">
-        <div class="empty-icon"><i data-lucide="file-text" class="w-12 h-12"></i></div>
-        <div class="empty-title">No Summaries</div>
-        <div class="empty-text">No summaries found in .summaries/</div>
-      </div>
-    `;
-  }
-
-  // Store summaries in global variable for modal access
-  window._currentSummaries = summaries;
-
-  return `
-    <div class="summary-tab-content space-y-4">
-      ${summaries.map((s, idx) => {
-        const normalizedContent = normalizeLineEndings(s.content || '');
-        // Extract first 3 lines for preview
-        const previewLines = normalizedContent.split('\n').slice(0, 3).join('\n');
-        const hasMore = normalizedContent.split('\n').length > 3;
-        return `
-          <div class="summary-item-card">
-            <div class="summary-item-header">
-              <h4 class="summary-item-title"><i data-lucide="file-text" class="w-4 h-4 inline mr-1"></i>${escapeHtml(s.name || 'Summary')}</h4>
-              <button class="btn-view-modal" onclick="openMarkdownModal('${escapeHtml(s.name || 'Summary')}', window._currentSummaries[${idx}].content, 'markdown');">
-                <i data-lucide="eye" class="w-4 h-4 inline mr-1"></i>View
-              </button>
-            </div>
-            <div class="summary-item-preview">
-              <pre class="summary-preview-text">${escapeHtml(previewLines)}${hasMore ? '\n...' : ''}</pre>
-            </div>
-          </div>
-        `;
-      }).join('')}
-    </div>
-  `;
-}
-
-// ==========================================
-// IMPL Plan Tab Rendering
-// ==========================================
-
-function renderImplPlanContent(implPlan) {
-  if (!implPlan) {
-    return `
-      <div class="tab-empty-state">
-        <div class="empty-icon"><i data-lucide="ruler" class="w-12 h-12"></i></div>
-        <div class="empty-title">No IMPL Plan</div>
-        <div class="empty-text">No IMPL_PLAN.md found for this session.</div>
-      </div>
-    `;
-  }
-
-  // Normalize and store in global variable for modal access
-  const normalizedContent = normalizeLineEndings(implPlan);
-  window._currentImplPlan = normalizedContent;
-
-  // Extract first 5 lines for preview
-  const previewLines = normalizedContent.split('\n').slice(0, 5).join('\n');
-  const hasMore = normalizedContent.split('\n').length > 5;
-
-  return `
-    <div class="impl-plan-tab-content">
-      <div class="impl-plan-card">
-        <div class="impl-plan-header">
-          <h3 class="impl-plan-title"><i data-lucide="ruler" class="w-5 h-5 inline mr-2"></i>Implementation Plan</h3>
-          <button class="btn-view-modal" onclick="openMarkdownModal('IMPL_PLAN.md', window._currentImplPlan, 'markdown')">
-            <i data-lucide="eye" class="w-4 h-4 inline mr-1"></i>View
-          </button>
-        </div>
-        <div class="impl-plan-preview">
-          <pre class="impl-plan-preview-text">${escapeHtml(previewLines)}${hasMore ? '\n...' : ''}</pre>
-        </div>
-      </div>
-    </div>
-  `;
-}
-
-// ==========================================
-// Review Tab Rendering
-// ==========================================
-// NOTE: Enhanced review tab with multi-select, filtering, and preview panel
-// is now in _review_tab.js - renderReviewContent() function defined there
-
-// ==========================================
-// Lite Context Tab Rendering
-// ==========================================
-
-function renderLiteContextContent(context, explorations, session) {
-  const plan = session.plan || {};
-  let sections = [];
-
-  // Render explorations if available (from exploration-*.json files)
-  if (explorations && explorations.manifest) {
-    sections.push(renderExplorationContext(explorations));
-  }
-
-  // If we have context from context-package.json
-  if (context) {
-    sections.push(`
-      <div class="context-package-section">
-        <div class="collapsible-section">
-          <div class="collapsible-header">
-            <span class="collapse-icon">▶</span>
-            <span class="section-label">Context Package</span>
-          </div>
-          <div class="collapsible-content collapsed">
-            <pre class="json-content">${escapeHtml(JSON.stringify(context, null, 2))}</pre>
-          </div>
-        </div>
-      </div>
-    `);
-  }
-
-  // Fallback: show context from plan
-  if (plan.focus_paths?.length || plan.summary) {
-    sections.push(`
-      <div class="plan-context-section">
-        ${plan.summary ? `
-          <div class="context-section">
-            <h4>Summary</h4>
-            <p>${escapeHtml(plan.summary)}</p>
-          </div>
-        ` : ''}
-        ${plan.focus_paths?.length ? `
-          <div class="context-section">
-            <h4>Focus Paths</h4>
-            <div class="path-tags">
-              ${plan.focus_paths.map(p => `<span class="path-tag">${escapeHtml(p)}</span>`).join('')}
-            </div>
-          </div>
-        ` : ''}
-      </div>
-    `);
-  }
-
-  // If we have any sections, wrap them
-  if (sections.length > 0) {
-    return `<div class="context-tab-content">${sections.join('')}</div>`;
-  }
-
-  return `
-    <div class="tab-empty-state">
-      <div class="empty-icon"><i data-lucide="package" class="w-12 h-12"></i></div>
-      <div class="empty-title">No Context Data</div>
-      <div class="empty-text">No context-package.json or exploration files found for this session.</div>
-    </div>
-  `;
-}
-
-
-// ==========================================
-// Exploration Context Rendering
-// ==========================================
-
-function renderExplorationContext(explorations) {
-  if (!explorations || !explorations.manifest) {
-    return '';
-  }
-
-  const manifest = explorations.manifest;
-  const data = explorations.data || {};
-
-  let sections = [];
-
-  // Header with manifest info
-  sections.push(`
-    <div class="exploration-header">
-      <h4>${escapeHtml(manifest.task_description || 'Exploration Context')}</h4>
-      <div class="exploration-meta">
-        <span class="meta-item">Complexity: <strong>${escapeHtml(manifest.complexity || 'N/A')}</strong></span>
-        <span class="meta-item">Explorations: <strong>${manifest.exploration_count || 0}</strong></span>
-      </div>
-    </div>
-  `);
-
-  // Render each exploration angle as collapsible section
-  const explorationOrder = ['architecture', 'dependencies', 'patterns', 'integration-points'];
-  const explorationTitles = {
-    'architecture': '<i data-lucide="blocks" class="w-4 h-4 inline mr-1"></i>Architecture',
-    'dependencies': '<i data-lucide="package" class="w-4 h-4 inline mr-1"></i>Dependencies',
-    'patterns': '<i data-lucide="git-branch" class="w-4 h-4 inline mr-1"></i>Patterns',
-    'integration-points': '<i data-lucide="plug" class="w-4 h-4 inline mr-1"></i>Integration Points'
-  };
-
-  for (const angle of explorationOrder) {
-    const expData = data[angle];
-    if (!expData) {
-      continue;
-    }
-
-    const angleContent = renderExplorationAngle(angle, expData);
-
-    sections.push(`
-      <div class="exploration-section collapsible-section">
-        <div class="collapsible-header">
-          <span class="collapse-icon">▶</span>
-          <span class="section-label">${explorationTitles[angle] || angle}</span>
-        </div>
-        <div class="collapsible-content collapsed">
-          ${angleContent}
-        </div>
-      </div>
-    `);
-  }
-
-  return `<div class="exploration-context">${sections.join('')}</div>`;
-}
-
-function renderExplorationAngle(angle, data) {
-  let content = [];
-
-  // Project structure - handle string or object
-  if (data.project_structure) {
-    content.push(renderExpField('Project Structure', data.project_structure));
-  }
-
-  // Relevant files
-  if (data.relevant_files && data.relevant_files.length) {
-    content.push(`
-      <div class="exp-field">
-        <label>Relevant Files (${data.relevant_files.length})</label>
-        <div class="relevant-files-list">
-          ${data.relevant_files.slice(0, 10).map(f => `
-            <div class="file-item-exp">
-              <div class="file-path"><code>${escapeHtml(f.path || '')}</code></div>
-              <div class="file-relevance">Relevance: ${f.relevance ? (f.relevance * 100).toFixed(0) : 0}%</div>
-              ${f.rationale ? `<div class="file-rationale">${escapeHtml((f.rationale || "").substring(0, 200))}...</div>` : ''}
-            </div>
-          `).join('')}
-          ${data.relevant_files.length > 10 ? `<div class="more-files">... and ${data.relevant_files.length - 10} more files</div>` : ''}
-        </div>
-      </div>
-    `);
-  }
-
-  // Patterns - handle string or object
-  if (data.patterns) {
-    content.push(renderExpField('Patterns', data.patterns));
-  }
-
-  // Dependencies - handle string or object
-  if (data.dependencies) {
-    content.push(renderExpField('Dependencies', data.dependencies));
-  }
-
-  // Integration points - handle string or object
-  if (data.integration_points) {
-    content.push(renderExpField('Integration Points', data.integration_points));
-  }
-
-  // Constraints - handle string or object
-  if (data.constraints) {
-    content.push(renderExpField('Constraints', data.constraints));
-  }
-
-  // Clarification needs - handle array or object
-  if (data.clarification_needs) {
-    content.push(renderExpField('Clarification Needs', data.clarification_needs));
-  }
-
-  return content.join('') || '<p>No data available</p>';
-}

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

@@ -1,72 +0,0 @@
-// 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 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 { initGlobalNotifications(); } catch (e) { console.error('Global notifications 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();
-      }
-    }
-  });
-});

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

@@ -1,42 +0,0 @@
-// ========================================
-// 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}};
-
-// ========== 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
-let globalNotificationQueue = [];
-let isNotificationPanelVisible = false;

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

@@ -1,153 +0,0 @@
-// ========================================
-// 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);
-}