claude-code-workflow 6.0.0

package/ccw/src/templates/dashboard-js/components/task-drawer-renderers.js

@@ -0,0 +1,447 @@
+// ==========================================
+// TASK DRAWER RENDERERS
+// ==========================================
+// Detailed content renderers and helper functions for task drawer
+
+function renderPreAnalysisSteps(preAnalysis) {
+  if (!Array.isArray(preAnalysis) || preAnalysis.length === 0) {
+    return '<div class="empty-section">No pre-analysis steps</div>';
+  }
+
+  return `
+    <div class="lite-card">
+      <div class="lite-card-header">
+        <span class="lite-card-icon">🔍</span>
+        <h4 class="lite-card-title">Pre-Analysis Steps</h4>
+        <span class="lite-count-badge">${preAnalysis.length}</span>
+      </div>
+      <div class="lite-card-body">
+        <div class="lite-impl-steps">
+          ${preAnalysis.map((item, idx) => `
+            <div class="lite-impl-step">
+              <div class="lite-step-num">${idx + 1}</div>
+              <div class="lite-step-content">
+                <p class="lite-step-text">${escapeHtml(item.step || item.action || 'Step ' + (idx + 1))}</p>
+                ${item.action && item.action !== item.step ? `
+                  <div class="lite-step-meta">
+                    <span class="lite-step-label">Action:</span>
+                    <span class="lite-step-value">${escapeHtml(item.action)}</span>
+                  </div>
+                ` : ''}
+                ${item.commands?.length ? `
+                  <div class="lite-step-commands">
+                    ${item.commands.map(c => `<code class="lite-cmd-tag">${escapeHtml(typeof c === 'string' ? c : JSON.stringify(c))}</code>`).join('')}
+                  </div>
+                ` : ''}
+                ${item.output_to ? `
+                  <div class="lite-step-meta">
+                    <span class="lite-step-label">Output:</span>
+                    <code class="lite-file-tag">${escapeHtml(item.output_to)}</code>
+                  </div>
+                ` : ''}
+              </div>
+            </div>
+          `).join('')}
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+function renderImplementationStepsList(steps) {
+  if (!Array.isArray(steps) || steps.length === 0) {
+    return '<div class="empty-section">No implementation steps</div>';
+  }
+
+  return `
+    <div class="lite-card">
+      <div class="lite-card-header">
+        <span class="lite-card-icon">📋</span>
+        <h4 class="lite-card-title">Implementation Approach</h4>
+        <span class="lite-count-badge">${steps.length}</span>
+      </div>
+      <div class="lite-card-body">
+        <div class="session-impl-steps">
+          ${steps.map((step, idx) => {
+            const hasMods = step.modification_points?.length;
+            const hasFlow = step.logic_flow?.length;
+
+            return `
+            <div class="session-impl-step">
+              <div class="session-step-header">
+                <div class="lite-step-num">${step.step || idx + 1}</div>
+                <div class="session-step-title">${escapeHtml(step.title || 'Untitled Step')}</div>
+              </div>
+              ${step.description ? `<div class="session-step-desc">${escapeHtml(step.description)}</div>` : ''}
+              ${hasMods ? `
+                <div class="session-step-section">
+                  <div class="session-section-label">
+                    <span class="session-section-icon">🔧</span>
+                    <span>Modifications</span>
+                    <span class="lite-count-badge">${step.modification_points.length}</span>
+                  </div>
+                  <div class="session-mods-list">
+                    ${step.modification_points.map(mp => `
+                      <div class="session-mod-item">
+                        ${typeof mp === 'string' ? `<code class="lite-file-tag">${escapeHtml(mp)}</code>` : `
+                          <code class="lite-file-tag">${escapeHtml(mp.file || mp.path || '')}</code>
+                          ${mp.changes ? `<span class="session-mod-change">${escapeHtml(mp.changes)}</span>` : ''}
+                        `}
+                      </div>
+                    `).join('')}
+                  </div>
+                </div>
+              ` : ''}
+              ${hasFlow ? `
+                <div class="session-step-section">
+                  <div class="session-section-label">
+                    <span class="session-section-icon">⚡</span>
+                    <span>Logic Flow</span>
+                    <span class="lite-count-badge">${step.logic_flow.length}</span>
+                  </div>
+                  <div class="session-flow-list">
+                    ${step.logic_flow.map((lf, lfIdx) => `
+                      <div class="session-flow-item">
+                        <span class="session-flow-num">${lfIdx + 1}</span>
+                        <span class="session-flow-text">${escapeHtml(typeof lf === 'string' ? lf : lf.action || JSON.stringify(lf))}</span>
+                      </div>
+                    `).join('')}
+                  </div>
+                </div>
+              ` : ''}
+              ${step.depends_on?.length ? `
+                <div class="session-step-deps">
+                  <span class="session-deps-label">Dependencies:</span>
+                  <div class="lite-deps-tags">
+                    ${step.depends_on.map(d => `<span class="lite-dep-tag">${escapeHtml(d)}</span>`).join('')}
+                  </div>
+                </div>
+              ` : ''}
+            </div>
+          `}).join('')}
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+function renderTargetFiles(files) {
+  if (!Array.isArray(files) || files.length === 0) {
+    return '<div class="empty-section">No target files</div>';
+  }
+
+  // Get current project path for building full paths
+  const projectPath = window.currentProjectPath || '';
+
+  return `
+    <div class="lite-card">
+      <div class="lite-card-header">
+        <span class="lite-card-icon">📁</span>
+        <h4 class="lite-card-title">Target Files</h4>
+        <span class="lite-count-badge">${files.length}</span>
+      </div>
+      <div class="lite-card-body">
+        <div class="session-files-list">
+          ${files.map(f => {
+            const filePath = typeof f === 'string' ? f : (f.path || JSON.stringify(f));
+            // Build full path for vscode link
+            const fullPath = filePath.startsWith('/') || filePath.includes(':')
+              ? filePath
+              : (projectPath ? `${projectPath}/${filePath}` : filePath);
+            const vscodeUri = `vscode://file/${fullPath.replace(/\\/g, '/')}`;
+
+            return `
+              <a href="${vscodeUri}" class="session-file-item" title="Open in VS Code: ${escapeHtml(fullPath)}">
+                <span class="session-file-icon">📄</span>
+                <code class="session-file-path">${escapeHtml(filePath)}</code>
+                <span class="session-file-action">↗</span>
+              </a>
+            `;
+          }).join('')}
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+function renderTestCommands(testCommands) {
+  if (!testCommands || typeof testCommands !== 'object') return '';
+
+  const entries = Object.entries(testCommands);
+  if (entries.length === 0) return '';
+
+  return `
+    <div class="lite-card">
+      <div class="lite-card-header">
+        <span class="lite-card-icon">🧪</span>
+        <h4 class="lite-card-title">Test Commands</h4>
+        <span class="lite-count-badge">${entries.length}</span>
+      </div>
+      <div class="lite-card-body">
+        <div class="session-test-commands">
+          ${entries.map(([key, val]) => `
+            <div class="session-test-item">
+              <span class="session-test-label">${escapeHtml(key)}</span>
+              <code class="session-test-cmd">${escapeHtml(typeof val === 'string' ? val : JSON.stringify(val))}</code>
+            </div>
+          `).join('')}
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+function renderTaskDetail(sessionId, task) {
+  // Get raw task data for JSON view
+  const rawTask = task._raw || task;
+  const taskJsonId = `task-json-${sessionId}-${task.id}`.replace(/[^a-zA-Z0-9-]/g, '-');
+
+  // Store JSON in memory instead of inline script tag
+  taskJsonStore[taskJsonId] = rawTask;
+
+  return `
+    <div class="task-detail" id="task-${sessionId}-${task.id}">
+      <div class="task-detail-header">
+        <span class="task-id-badge">${escapeHtml(task.id)}</span>
+        <span class="task-title">${escapeHtml(task.title || 'Untitled')}</span>
+        <span class="task-status-badge ${task.status}">${task.status}</span>
+        <div class="task-header-actions">
+          <button class="btn-view-json" onclick="showJsonModal('${taskJsonId}', '${escapeHtml(task.id)}')">{ } JSON</button>
+        </div>
+      </div>
+
+      <!-- Collapsible: Meta -->
+      <div class="collapsible-section">
+        <div class="collapsible-header">
+          <span class="collapse-icon">▶</span>
+          <span class="section-label">meta</span>
+          <span class="section-preview">${escapeHtml((task.meta?.type || task.meta?.action || '') + (task.meta?.scope ? ' | ' + task.meta.scope : ''))}</span>
+        </div>
+        <div class="collapsible-content collapsed">
+          ${renderDynamicFields(task.meta || rawTask, ['type', 'action', 'agent', 'scope', 'module', 'execution_group'])}
+        </div>
+      </div>
+
+      <!-- Collapsible: Context -->
+      <div class="collapsible-section">
+        <div class="collapsible-header">
+          <span class="collapse-icon">▶</span>
+          <span class="section-label">context</span>
+          <span class="section-preview">${escapeHtml(getContextPreview(task.context, rawTask))}</span>
+        </div>
+        <div class="collapsible-content collapsed">
+          ${renderContextFields(task.context, rawTask)}
+        </div>
+      </div>
+
+      <!-- Collapsible: Flow Control (with Flowchart) -->
+      <div class="collapsible-section">
+        <div class="collapsible-header">
+          <span class="collapse-icon">▶</span>
+          <span class="section-label">flow_control</span>
+          <span class="section-preview">${escapeHtml(getFlowControlPreview(task.flow_control, rawTask))}</span>
+        </div>
+        <div class="collapsible-content collapsed">
+          <div class="flowchart-container" id="flowchart-${sessionId}-${task.id}"></div>
+          ${renderFlowControlDetails(task.flow_control, rawTask)}
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+function getContextPreview(context, rawTask) {
+  const items = [];
+  if (context?.requirements?.length) items.push(`${context.requirements.length} reqs`);
+  if (context?.acceptance?.length) items.push(`${context.acceptance.length} acceptance`);
+  if (context?.focus_paths?.length) items.push(`${context.focus_paths.length} paths`);
+  if (rawTask?.modification_points?.length) items.push(`${rawTask.modification_points.length} mods`);
+  return items.join(' | ') || 'No context';
+}
+
+function getFlowControlPreview(flowControl, rawTask) {
+  const steps = flowControl?.implementation_approach?.length || rawTask?.implementation?.length || 0;
+  return steps > 0 ? `${steps} steps` : 'No steps';
+}
+
+function renderDynamicFields(obj, priorityKeys = []) {
+  if (!obj || typeof obj !== 'object') return '<div class="field-value json-value-null">null</div>';
+
+  const entries = Object.entries(obj).filter(([k, v]) => v !== null && v !== undefined && k !== '_raw');
+  if (entries.length === 0) return '<div class="field-value json-value-null">Empty</div>';
+
+  // Sort: priority keys first, then alphabetically
+  entries.sort(([a], [b]) => {
+    const aIdx = priorityKeys.indexOf(a);
+    const bIdx = priorityKeys.indexOf(b);
+    if (aIdx !== -1 && bIdx !== -1) return aIdx - bIdx;
+    if (aIdx !== -1) return -1;
+    if (bIdx !== -1) return 1;
+    return a.localeCompare(b);
+  });
+
+  return `<div class="field-group">${entries.map(([key, value]) => renderFieldRow(key, value)).join('')}</div>`;
+}
+
+function renderFieldRow(key, value) {
+  return `
+    <div class="field-row">
+      <span class="field-label">${escapeHtml(key)}:</span>
+      <div class="field-value">${renderFieldValue(key, value)}</div>
+    </div>
+  `;
+}
+
+function renderFieldValue(key, value) {
+  if (value === null || value === undefined) {
+    return '<span class="json-value-null">null</span>';
+  }
+
+  if (typeof value === 'boolean') {
+    return `<span class="json-value-boolean">${value}</span>`;
+  }
+
+  if (typeof value === 'number') {
+    return `<span class="json-value-number">${value}</span>`;
+  }
+
+  if (typeof value === 'string') {
+    // Check if it's a path
+    if (key.includes('path') || key.includes('file') || value.includes('/') || value.includes('\\')) {
+      return `<span class="array-item path-item">${escapeHtml(value)}</span>`;
+    }
+    return `<span class="json-value-string">${escapeHtml(value)}</span>`;
+  }
+
+  if (Array.isArray(value)) {
+    if (value.length === 0) return '<span class="json-value-null">[]</span>';
+
+    // Check if array contains objects or strings
+    if (typeof value[0] === 'object') {
+      return `<div class="nested-array">${value.map((item, i) => `
+        <div class="array-object">
+          <div class="array-object-header">[${i + 1}]</div>
+          ${renderDynamicFields(item)}
+        </div>
+      `).join('')}</div>`;
+    }
+
+    // Array of strings/primitives
+    const isPathArray = key.includes('path') || key.includes('file');
+    return `<div class="array-value">${value.map(v =>
+      `<span class="array-item ${isPathArray ? 'path-item' : ''}">${escapeHtml(String(v))}</span>`
+    ).join('')}</div>`;
+  }
+
+  if (typeof value === 'object') {
+    return renderDynamicFields(value);
+  }
+
+  return escapeHtml(String(value));
+}
+
+function renderContextFields(context, rawTask) {
+  const sections = [];
+
+  // Requirements / Description
+  const requirements = context?.requirements || [];
+  const description = rawTask?.description;
+  if (requirements.length > 0 || description) {
+    sections.push(`
+      <div class="context-field">
+        <label>requirements:</label>
+        ${description ? `<p style="margin-bottom: 8px;">${escapeHtml(description)}</p>` : ''}
+        ${requirements.length > 0 ? `<ul>${requirements.map(r => `<li>${escapeHtml(r)}</li>`).join('')}</ul>` : ''}
+      </div>
+    `);
+  }
+
+  // Focus paths / Modification points
+  const focusPaths = context?.focus_paths || [];
+  const modPoints = rawTask?.modification_points || [];
+  if (focusPaths.length > 0 || modPoints.length > 0) {
+    sections.push(`
+      <div class="context-field">
+        <label>${modPoints.length > 0 ? 'modification_points:' : 'focus_paths:'}</label>
+        ${modPoints.length > 0 ? `
+          <div class="mod-points">
+            ${modPoints.map(m => `
+              <div class="mod-point">
+                <span class="array-item path-item">${escapeHtml(m.file || m)}</span>
+                ${m.target ? `<span class="mod-target">→ ${escapeHtml(m.target)}</span>` : ''}
+                ${m.change ? `<p class="mod-change">${escapeHtml(m.change)}</p>` : ''}
+              </div>
+            `).join('')}
+          </div>
+        ` : `
+          <div class="path-tags">${focusPaths.map(p => `<span class="path-tag">${escapeHtml(p)}</span>`).join('')}</div>
+        `}
+      </div>
+    `);
+  }
+
+  // Acceptance criteria
+  const acceptance = context?.acceptance || rawTask?.acceptance || [];
+  if (acceptance.length > 0) {
+    sections.push(`
+      <div class="context-field">
+        <label>acceptance:</label>
+        <ul>${acceptance.map(a => `<li>${escapeHtml(a)}</li>`).join('')}</ul>
+      </div>
+    `);
+  }
+
+  // Dependencies
+  const depends = context?.depends_on || rawTask?.depends_on || [];
+  if (depends.length > 0) {
+    sections.push(`
+      <div class="context-field">
+        <label>depends_on:</label>
+        <div class="path-tags">${depends.map(d => `<span class="array-item depends-badge">${escapeHtml(d)}</span>`).join('')}</div>
+      </div>
+    `);
+  }
+
+  // Reference
+  const reference = rawTask?.reference;
+  if (reference) {
+    sections.push(`
+      <div class="context-field">
+        <label>reference:</label>
+        ${renderDynamicFields(reference)}
+      </div>
+    `);
+  }
+
+  return sections.length > 0
+    ? `<div class="context-fields">${sections.join('')}</div>`
+    : '<div class="field-value json-value-null">No context data</div>';
+}
+
+function renderFlowControlDetails(flowControl, rawTask) {
+  const sections = [];
+
+  // Pre-analysis
+  const preAnalysis = flowControl?.pre_analysis || rawTask?.pre_analysis || [];
+  if (preAnalysis.length > 0) {
+    sections.push(`
+      <div class="context-field" style="margin-top: 16px;">
+        <label>pre_analysis:</label>
+        <ul>${preAnalysis.map(p => `<li>${escapeHtml(p)}</li>`).join('')}</ul>
+      </div>
+    `);
+  }
+
+  // Target files
+  const targetFiles = flowControl?.target_files || rawTask?.target_files || [];
+  if (targetFiles.length > 0) {
+    sections.push(`
+      <div class="context-field">
+        <label>target_files:</label>
+        <div class="path-tags">${targetFiles.map(f => `<span class="path-tag">${escapeHtml(f)}</span>`).join('')}</div>
+      </div>
+    `);
+  }
+
+  return sections.join('');
+}

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

@@ -0,0 +1,21 @@
+// ==========================================
+// THEME MANAGEMENT
+// ==========================================
+
+function initTheme() {
+  const saved = localStorage.getItem('theme') || 'light';
+  document.documentElement.setAttribute('data-theme', saved);
+  updateThemeIcon(saved);
+
+  document.getElementById('themeToggle').addEventListener('click', () => {
+    const current = document.documentElement.getAttribute('data-theme');
+    const next = current === 'light' ? 'dark' : 'light';
+    document.documentElement.setAttribute('data-theme', next);
+    localStorage.setItem('theme', next);
+    updateThemeIcon(next);
+  });
+}
+
+function updateThemeIcon(theme) {
+  document.getElementById('themeToggle').textContent = theme === 'light' ? '🌙' : '☀️';
+}

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

@@ -0,0 +1,57 @@
+// Application Entry Point
+// Initializes all components and sets up global event handlers
+
+document.addEventListener('DOMContentLoaded', async () => {
+  // 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); }
+
+  // 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) {
+      await switchToPath(window.INITIAL_PATH || projectPath);
+    } 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

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