claude-code-workflow 6.1.4 → 6.2.2

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

@@ -1,116 +1,136 @@
-// ========================================
-// 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
- */
+// ========================================
+// 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;
+  }
+}
+
+/**
+ * Load recent paths from API (server mode only)
+ * @returns {Promise<Array>} Array of recent paths or empty array if failed
+ */
+async function loadRecentPaths() {
+  if (!window.SERVER_MODE) {
+    return [];
+  }
+
+  try {
+    const response = await fetch('/api/recent-paths');
+    if (!response.ok) return [];
+    const data = await response.json();
+    return data.paths || [];
+  } catch (err) {
+    console.error('Failed to load recent paths:', err);
+    return [];
+  }
+}
+
+// ========== 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 = '';
@@ -169,32 +189,32 @@ async function removeRecentPathFromList(path) {
   }
 }
 
-// ========== 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();
-}
+// ========== 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/carousel.js

@@ -110,7 +110,7 @@ function renderCarouselSlide(direction = 'none') {
       <div class="carousel-empty flex items-center justify-center h-full text-muted-foreground">
         <div class="text-center">
           <div class="text-3xl mb-2">🎯</div>
-          <p class="text-sm">No active sessions</p>
+          <p class="text-sm">${t('carousel.noActiveSessions')}</p>
         </div>
       </div>
     `;
@@ -172,7 +172,7 @@ function renderCarouselSlide(direction = 'none') {
             <!-- Progress -->
             <div class="mb-2">
               <div class="flex items-center justify-between text-xs mb-1">
-                <span class="text-muted-foreground">Progress</span>
+                <span class="text-muted-foreground">${t('session.progress')}</span>
                 <span class="text-foreground font-medium">${completed}/${taskCount}</span>
               </div>
               <div class="h-1.5 bg-muted rounded-full overflow-hidden">
@@ -196,7 +196,7 @@ function renderCarouselSlide(direction = 'none') {
 
           <!-- Right Column: Task List -->
           <div class="w-[45%] flex flex-col border-l border-border pl-3">
-            <div class="text-xs font-medium text-muted-foreground mb-1.5">Recent Tasks</div>
+            <div class="text-xs font-medium text-muted-foreground mb-1.5">${t('tab.tasks')}</div>
             <div class="task-list flex-1 space-y-1 overflow-hidden">
               ${displayTasks.length > 0 ? displayTasks.map(task => `
                 <div class="flex items-center gap-1.5 text-xs">
@@ -204,7 +204,7 @@ function renderCarouselSlide(direction = 'none') {
                   <span class="truncate flex-1 ${task.status === 'in_progress' ? 'text-foreground font-medium' : 'text-muted-foreground'}">${escapeHtml(task.title || task.id || 'Task')}</span>
                 </div>
               `).join('') : `
-                <div class="text-xs text-muted-foreground">No tasks yet</div>
+                <div class="text-xs text-muted-foreground">${t('empty.noTasks')}</div>
               `}
             </div>
             <!-- Progress percentage -->