claude-code-workflow 6.0.0

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

@@ -0,0 +1,200 @@
+// ========================================
+// API and Data Loading
+// ========================================
+// Server communication and data loading functions
+// Note: Some functions are only available in server mode
+
+// ========== Data Loading ==========
+
+/**
+ * Load dashboard data from API (server mode only)
+ * @param {string} path - Project path to load data for
+ * @returns {Promise<Object|null>} Dashboard data object or null if failed
+ */
+async function loadDashboardData(path) {
+  if (!window.SERVER_MODE) {
+    console.warn('loadDashboardData called in static mode');
+    return null;
+  }
+
+  try {
+    const response = await fetch(`/api/data?path=${encodeURIComponent(path)}`);
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+    }
+    return await response.json();
+  } catch (err) {
+    console.error('Failed to load dashboard data:', err);
+    return null;
+  }
+}
+
+// ========== Path Management ==========
+
+/**
+ * Switch to a new project path (server mode only)
+ * Loads dashboard data and updates UI
+ * @param {string} path - Project path to switch to
+ */
+async function switchToPath(path) {
+  // Show loading state
+  const container = document.getElementById('mainContent');
+  container.innerHTML = '<div class="loading">Loading...</div>';
+
+  try {
+    const data = await loadDashboardData(path);
+    if (data) {
+      // Update global data
+      workflowData = data;
+      projectPath = data.projectPath;
+      recentPaths = data.recentPaths || [];
+
+      // Update UI
+      document.getElementById('currentPath').textContent = projectPath;
+      renderDashboard();
+      refreshRecentPaths();
+    }
+  } catch (err) {
+    console.error('Failed to switch path:', err);
+    container.innerHTML = '<div class="error">Failed to load project data</div>';
+  }
+}
+
+/**
+ * Select a path from recent paths list
+ * @param {string} path - Path to select
+ */
+async function selectPath(path) {
+  localStorage.setItem('selectedPath', path);
+
+  // Server mode: load data dynamically
+  if (window.SERVER_MODE) {
+    await switchToPath(path);
+    return;
+  }
+
+  // Static mode: show command to run
+  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.terminal}</span>
+        <h3>Run Command</h3>
+      </div>
+      <div class="path-modal-body">
+        <p>To view the dashboard for this project, run:</p>
+        <div class="path-modal-command">
+          <code>ccw view -p "${path}"</code>
+          <button class="copy-btn" id="copyCommandBtn">${icons.copy} <span>Copy</span></button>
+        </div>
+        <p class="path-modal-note" style="margin-top: 12px;">
+          Or use <code>ccw serve</code> for live path switching.
+        </p>
+      </div>
+      <div class="path-modal-footer">
+        <button class="path-modal-close" onclick="this.closest('.path-modal-overlay').remove()">OK</button>
+      </div>
+    </div>
+  `;
+  document.body.appendChild(modal);
+
+  // Add copy handler
+  document.getElementById('copyCommandBtn').addEventListener('click', function() {
+    navigator.clipboard.writeText('ccw view -p "' + path + '"').then(() => {
+      this.innerHTML = icons.check + ' <span>Copied!</span>';
+      setTimeout(() => { this.innerHTML = icons.copy + ' <span>Copy</span>'; }, 2000);
+    });
+  });
+}
+
+/**
+ * Refresh recent paths dropdown UI
+ */
+function refreshRecentPaths() {
+  const recentContainer = document.getElementById('recentPaths');
+  recentContainer.innerHTML = '';
+
+  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);
+  });
+}
+
+/**
+ * Remove a path from recent paths list
+ */
+async function removeRecentPathFromList(path) {
+  try {
+    const response = await fetch('/api/remove-recent-path', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ path })
+    });
+
+    if (response.ok) {
+      const data = await response.json();
+      if (data.success) {
+        recentPaths = data.paths;
+        refreshRecentPaths();
+        showRefreshToast('Path removed', 'success');
+      }
+    }
+  } catch (err) {
+    console.error('Failed to remove path:', err);
+    showRefreshToast('Failed to remove path', 'error');
+  }
+}
+
+// ========== File System Access ==========
+
+/**
+ * Browse for folder using File System Access API or fallback to input dialog
+ */
+async function browseForFolder() {
+  // Try modern File System Access API first
+  if ('showDirectoryPicker' in window) {
+    try {
+      const dirHandle = await window.showDirectoryPicker({
+        mode: 'read',
+        startIn: 'documents'
+      });
+      // Get the directory name (we can't get full path for security reasons)
+      const dirName = dirHandle.name;
+      showPathSelectedModal(dirName, dirHandle);
+      return;
+    } catch (err) {
+      if (err.name === 'AbortError') {
+        // User cancelled
+        return;
+      }
+      console.warn('Directory picker failed:', err);
+    }
+  }
+
+  // Fallback: show input dialog
+  showPathInputModal();
+}

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

@@ -0,0 +1,112 @@
+// ==========================================
+// Conflict Resolution Tab
+// ==========================================
+
+async function loadAndRenderConflictTab(session, contentArea) {
+  contentArea.innerHTML = '<div class="tab-loading">Loading conflict resolution...</div>';
+
+  try {
+    if (window.SERVER_MODE && session.path) {
+      const response = await fetch(`/api/session-detail?path=${encodeURIComponent(session.path)}&type=conflict`);
+      if (response.ok) {
+        const data = await response.json();
+        contentArea.innerHTML = renderConflictCards(data.conflictResolution);
+        return;
+      }
+    }
+    contentArea.innerHTML = `
+      <div class="tab-empty-state">
+        <div class="empty-icon">⚖️</div>
+        <div class="empty-title">No Conflict Resolution</div>
+        <div class="empty-text">No conflict-resolution-decisions.json found for this session.</div>
+      </div>
+    `;
+  } catch (err) {
+    contentArea.innerHTML = `<div class="tab-error">Failed to load conflict resolution: ${err.message}</div>`;
+  }
+}
+
+function renderConflictCards(conflictResolution) {
+  if (!conflictResolution) {
+    return `
+      <div class="tab-empty-state">
+        <div class="empty-icon">⚖️</div>
+        <div class="empty-title">No Conflict Resolution</div>
+        <div class="empty-text">No conflict decisions found for this session.</div>
+      </div>
+    `;
+  }
+
+  let cards = [];
+
+  // Header info
+  cards.push(`
+    <div class="conflict-tab-header">
+      <h3>⚖️ Conflict Resolution Decisions</h3>
+      <div class="conflict-meta-info">
+        <span>Session: <strong>${escapeHtml(conflictResolution.session_id || 'N/A')}</strong></span>
+        ${conflictResolution.resolved_at ? `<span>Resolved: <strong>${formatDate(conflictResolution.resolved_at)}</strong></span>` : ''}
+      </div>
+    </div>
+  `);
+
+  // User Decisions as cards
+  if (conflictResolution.user_decisions && Object.keys(conflictResolution.user_decisions).length > 0) {
+    const decisions = Object.entries(conflictResolution.user_decisions);
+
+    cards.push(`<div class="conflict-section-title">🎯 User Decisions (${decisions.length})</div>`);
+    cards.push('<div class="conflict-cards-grid">');
+
+    for (const [key, decision] of decisions) {
+      const label = key.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+      cards.push(`
+        <div class="conflict-card decision-card">
+          <div class="conflict-card-header">
+            <span class="conflict-card-label">${escapeHtml(label)}</span>
+          </div>
+          <div class="conflict-card-choice">
+            <span class="choice-label">Choice:</span>
+            <span class="choice-value">${escapeHtml(decision.choice || 'N/A')}</span>
+          </div>
+          ${decision.description ? `
+            <div class="conflict-card-desc">${escapeHtml(decision.description)}</div>
+          ` : ''}
+          ${decision.implications && decision.implications.length > 0 ? `
+            <div class="conflict-card-implications">
+              <span class="impl-label">Implications:</span>
+              <ul>
+                ${decision.implications.map(impl => `<li>${escapeHtml(impl)}</li>`).join('')}
+              </ul>
+            </div>
+          ` : ''}
+        </div>
+      `);
+    }
+    cards.push('</div>');
+  }
+
+  // Resolved Conflicts as cards
+  if (conflictResolution.resolved_conflicts && conflictResolution.resolved_conflicts.length > 0) {
+    cards.push(`<div class="conflict-section-title">✅ Resolved Conflicts (${conflictResolution.resolved_conflicts.length})</div>`);
+    cards.push('<div class="conflict-cards-grid">');
+
+    for (const conflict of conflictResolution.resolved_conflicts) {
+      cards.push(`
+        <div class="conflict-card resolved-card">
+          <div class="conflict-card-header">
+            <span class="conflict-card-id">${escapeHtml(conflict.id || 'N/A')}</span>
+            <span class="conflict-category-tag">${escapeHtml(conflict.category || 'General')}</span>
+          </div>
+          <div class="conflict-card-brief">${escapeHtml(conflict.brief || '')}</div>
+          <div class="conflict-card-strategy">
+            <span class="strategy-label">Strategy:</span>
+            <span class="strategy-tag">${escapeHtml(conflict.strategy || 'N/A')}</span>
+          </div>
+        </div>
+      `);
+    }
+    cards.push('</div>');
+  }
+
+  return `<div class="conflict-tab-content">${cards.join('')}</div>`;
+}

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

@@ -0,0 +1,54 @@
+// Exploration helpers loaded
+
+// Helper: Render exploration field with smart type detection
+function renderExpField(label, value) {
+  if (value === null || value === undefined) return '';
+  let rendered;
+  if (typeof value === 'string') {
+    rendered = `<p>${escapeHtml(value)}</p>`;
+  } else if (Array.isArray(value)) {
+    rendered = renderExpArray(value);
+  } else if (typeof value === 'object') {
+    rendered = renderExpObject(value);
+  } else {
+    rendered = `<p>${escapeHtml(String(value))}</p>`;
+  }
+  return `<div class="exp-field"><label>${escapeHtml(label)}</label>${rendered}</div>`;
+}
+
+// Helper: Render array values
+function renderExpArray(arr) {
+  if (!arr.length) return '<p>-</p>';
+  if (typeof arr[0] === 'object' && arr[0] !== null) {
+    return `<div class="exp-array-objects">${arr.map(item => {
+      if (item.question) {
+        return `<div class="clarification-item">
+          <div class="clarification-question">${escapeHtml(item.question)}</div>
+          ${item.impact ? `<div class="clarification-impact">Impact: ${escapeHtml(item.impact)}</div>` : ''}
+          ${item.priority ? `<span class="priority-badge priority-${item.priority}">${item.priority}</span>` : ''}
+        </div>`;
+      }
+      return `<div class="exp-object-item">${renderExpObject(item)}</div>`;
+    }).join('')}</div>`;
+  }
+  return `<ul class="exp-list">${arr.map(item => `<li>${escapeHtml(String(item))}</li>`).join('')}</ul>`;
+}
+
+// Helper: Render object values recursively
+function renderExpObject(obj) {
+  if (!obj || typeof obj !== 'object') return '';
+  const entries = Object.entries(obj).filter(([k]) => !k.startsWith('_'));
+  if (!entries.length) return '<p>-</p>';
+  return `<div class="exp-object">${entries.map(([key, val]) => {
+    const label = key.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+    if (val === null || val === undefined) return '';
+    if (typeof val === 'string') {
+      return `<div class="exp-obj-field"><span class="exp-obj-key">${escapeHtml(label)}:</span> <span class="exp-obj-val">${escapeHtml(val)}</span></div>`;
+    } else if (Array.isArray(val)) {
+      return `<div class="exp-obj-field"><span class="exp-obj-key">${escapeHtml(label)}:</span>${renderExpArray(val)}</div>`;
+    } else if (typeof val === 'object') {
+      return `<div class="exp-obj-nested"><span class="exp-obj-key">${escapeHtml(label)}</span>${renderExpObject(val)}</div>`;
+    }
+    return `<div class="exp-obj-field"><span class="exp-obj-key">${escapeHtml(label)}:</span> <span class="exp-obj-val">${escapeHtml(String(val))}</span></div>`;
+  }).join('')}</div>`;
+}