claude-code-workflow 6.3.26 → 6.3.28

package/ccw/src/templates/dashboard-css/21-cli-toolmgmt.css

@@ -661,3 +661,160 @@
   color: hsl(var(--success));
 }
 
+/* ========================================
+ * File Browser Modal
+ * ======================================== */
+
+.file-browser-modal {
+  width: 600px;
+  max-width: 90vw;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.file-browser-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  background: hsl(var(--muted) / 0.3);
+  border-radius: 0.375rem;
+  margin-bottom: 0.75rem;
+}
+
+.file-browser-toolbar .btn-sm {
+  flex-shrink: 0;
+  padding: 0.375rem;
+}
+
+.file-browser-path {
+  flex: 1;
+  padding: 0.375rem 0.5rem;
+  font-family: monospace;
+  font-size: 0.75rem;
+  background: hsl(var(--background));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.25rem;
+  color: hsl(var(--foreground));
+}
+
+.file-browser-path:focus {
+  outline: none;
+  border-color: hsl(var(--primary));
+  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2);
+}
+
+.file-browser-drives {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.btn-xs {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.6875rem;
+  border-radius: 0.25rem;
+}
+
+.drive-btn {
+  font-family: monospace;
+  font-weight: 600;
+}
+
+.file-browser-hidden-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.75rem;
+  color: hsl(var(--muted-foreground));
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.file-browser-hidden-toggle input {
+  cursor: pointer;
+}
+
+.file-browser-list {
+  flex: 1;
+  min-height: 300px;
+  max-height: 400px;
+  overflow-y: auto;
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.375rem;
+  background: hsl(var(--background));
+}
+
+.file-browser-loading,
+.file-browser-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 200px;
+  color: hsl(var(--muted-foreground));
+  font-size: 0.875rem;
+}
+
+.file-browser-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 200px;
+  font-size: 0.875rem;
+  text-align: center;
+  padding: 1rem;
+  gap: 0.5rem;
+}
+
+.file-browser-error p {
+  margin: 0;
+  color: hsl(var(--destructive));
+}
+
+.file-browser-hint {
+  color: hsl(var(--muted-foreground));
+  font-size: 0.8rem;
+}
+
+.file-browser-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  border-bottom: 1px solid hsl(var(--border) / 0.5);
+  transition: background-color 0.15s;
+}
+
+.file-browser-item:last-child {
+  border-bottom: none;
+}
+
+.file-browser-item:hover {
+  background: hsl(var(--muted) / 0.5);
+}
+
+.file-browser-item.selected {
+  background: hsl(var(--primary) / 0.15);
+  border-color: hsl(var(--primary) / 0.3);
+}
+
+.file-browser-item.is-directory {
+  color: hsl(var(--primary));
+}
+
+.file-browser-item.is-file {
+  color: hsl(var(--foreground));
+}
+
+.file-browser-item-name {
+  flex: 1;
+  font-size: 0.8125rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+

package/ccw/src/templates/dashboard-css/32-issue-manager.css

@@ -128,6 +128,29 @@
   box-shadow: 0 4px 12px hsl(var(--foreground) / 0.08);
 }
 
+/* Archived Issue Card */
+.issue-card.archived {
+  opacity: 0.85;
+  background: hsl(var(--muted) / 0.3);
+}
+
+.issue-card.archived:hover {
+  opacity: 1;
+}
+
+.issue-archived-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125rem 0.375rem;
+  background: hsl(var(--muted));
+  color: hsl(var(--muted-foreground));
+  font-size: 0.625rem;
+  font-weight: 500;
+  border-radius: 0.25rem;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+
 .issue-card-header {
   display: flex;
   align-items: flex-start;

package/ccw/src/templates/dashboard-js/components/cli-stream-viewer.js

@@ -3,6 +3,12 @@
  * Real-time streaming output viewer for CLI executions
  */
 
+// ===== Lifecycle Management =====
+let cliStreamViewerDestroy = null;
+let streamKeyboardHandler = null;
+let streamScrollHandler = null;  // Track scroll listener
+let streamStatusTimers = [];  // Track status update timers
+
 // ===== State Management =====
 let cliStreamExecutions = {};  // { executionId: { tool, mode, output, status, startTime, endTime } }
 let activeStreamTab = null;
@@ -91,7 +97,7 @@ async function syncActiveExecutions() {
 // ===== Initialization =====
 function initCliStreamViewer() {
   // Initialize keyboard shortcuts
-  document.addEventListener('keydown', function(e) {
+  streamKeyboardHandler = function(e) {
     if (e.key === 'Escape' && isCliStreamViewerOpen) {
       if (searchFilter) {
         clearSearch();
@@ -108,12 +114,14 @@ function initCliStreamViewer() {
         searchInput.select();
       }
     }
-  });
+  };
+  document.addEventListener('keydown', streamKeyboardHandler);
 
   // Initialize scroll detection for auto-scroll
   const content = document.getElementById('cliStreamContent');
   if (content) {
-    content.addEventListener('scroll', handleStreamContentScroll);
+    streamScrollHandler = handleStreamContentScroll;
+    content.addEventListener('scroll', streamScrollHandler);
   }
 
   // Sync active executions from server (recover state for mid-execution joins)
@@ -592,11 +600,12 @@ function renderStreamStatus(executionId) {
   
   // Update duration periodically for running executions
   if (exec.status === 'running') {
-    setTimeout(() => {
+    const timerId = setTimeout(() => {
       if (activeStreamTab === executionId && cliStreamExecutions[executionId]?.status === 'running') {
         renderStreamStatus(executionId);
       }
     }, 1000);
+    streamStatusTimers.push(timerId);
   }
 }
 
@@ -760,6 +769,31 @@ if (document.readyState === 'loading') {
   initCliStreamViewer();
 }
 
+// ===== Lifecycle Functions =====
+function destroyCliStreamViewer() {
+  // Remove keyboard event listener if exists
+  if (streamKeyboardHandler) {
+    document.removeEventListener('keydown', streamKeyboardHandler);
+    streamKeyboardHandler = null;
+  }
+
+  // Remove scroll event listener if exists
+  if (streamScrollHandler) {
+    const content = document.getElementById('cliStreamContent');
+    if (content) {
+      content.removeEventListener('scroll', streamScrollHandler);
+    }
+    streamScrollHandler = null;
+  }
+
+  // Clear all pending status update timers
+  streamStatusTimers.forEach(timerId => clearTimeout(timerId));
+  streamStatusTimers = [];
+}
+
+// Export lifecycle functions
+window.destroyCliStreamViewer = destroyCliStreamViewer;
+
 // ===== Global Exposure =====
 window.toggleCliStreamViewer = toggleCliStreamViewer;
 window.handleCliStreamStarted = handleCliStreamStarted;

package/ccw/src/templates/dashboard-js/components/hook-manager.js

@@ -359,48 +359,73 @@ async function loadAvailableSkills() {
  * Convert internal hook format to Claude Code format
  * Internal: { command, args, matcher, timeout }
  * Claude Code: { matcher, hooks: [{ type: "command", command: "...", timeout }] }
+ *
+ * IMPORTANT: For bash -c commands, use single quotes to wrap the script argument
+ * to avoid complex escaping issues with jq commands inside.
+ * See: https://github.com/catlog22/Claude-Code-Workflow/issues/73
  */
 function convertToClaudeCodeFormat(hookData) {
   // If already in correct format, return as-is
   if (hookData.hooks && Array.isArray(hookData.hooks)) {
     return hookData;
   }
-  
+
   // Build command string from command + args
   let commandStr = hookData.command || '';
   if (hookData.args && Array.isArray(hookData.args)) {
-    // Join args, properly quoting if needed
-    const quotedArgs = hookData.args.map(arg => {
-      if (arg.includes(' ') && !arg.startsWith('"') && !arg.startsWith("'")) {
-        return `"${arg.replace(/"/g, '\\"')}"`;
+    // Special handling for bash -c commands: use single quotes for the script
+    // This avoids complex escaping issues with jq and other shell commands
+    if (commandStr === 'bash' && hookData.args.length >= 2 && hookData.args[0] === '-c') {
+      // Use single quotes for bash -c script argument
+      // Single quotes prevent shell expansion, so internal double quotes work naturally
+      const script = hookData.args[1];
+      // Escape single quotes within the script: ' -> '\''
+      const escapedScript = script.replace(/'/g, "'\\''");
+      commandStr = `bash -c '${escapedScript}'`;
+      // Handle any additional args after the script
+      if (hookData.args.length > 2) {
+        const additionalArgs = hookData.args.slice(2).map(arg => {
+          if (arg.includes(' ') && !arg.startsWith('"') && !arg.startsWith("'")) {
+            return `"${arg.replace(/"/g, '\\"')}"`;
+          }
+          return arg;
+        });
+        commandStr += ' ' + additionalArgs.join(' ');
       }
-      return arg;
-    });
-    commandStr = `${commandStr} ${quotedArgs.join(' ')}`.trim();
+    } else {
+      // Default handling for other commands
+      const quotedArgs = hookData.args.map(arg => {
+        if (arg.includes(' ') && !arg.startsWith('"') && !arg.startsWith("'")) {
+          return `"${arg.replace(/"/g, '\\"')}"`;
+        }
+        return arg;
+      });
+      commandStr = `${commandStr} ${quotedArgs.join(' ')}`.trim();
+    }
   }
-  
+
   const converted = {
     hooks: [{
       type: 'command',
       command: commandStr
     }]
   };
-  
+
   // Add matcher if present (not needed for UserPromptSubmit, Stop, etc.)
   if (hookData.matcher) {
     converted.matcher = hookData.matcher;
   }
-  
+
   // Add timeout if present (in seconds for Claude Code)
   if (hookData.timeout) {
     converted.hooks[0].timeout = Math.ceil(hookData.timeout / 1000);
   }
-  
+
   // Preserve replaceIndex for updates
   if (hookData.replaceIndex !== undefined) {
     converted.replaceIndex = hookData.replaceIndex;
   }
-  
+
   return converted;
 }
 

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

@@ -1,6 +1,9 @@
 // Navigation and Routing
 // Manages navigation events, active state, content title updates, search, and path selector
 
+// View lifecycle management
+var currentViewDestroy = null;
+
 // Path Selector
 function initPathSelector() {
   const btn = document.getElementById('pathButton');
@@ -54,6 +57,11 @@ function initPathSelector() {
 
 // Cleanup function for view transitions
 function cleanupPreviousView() {
+  // Call current view's destroy function if exists
+  if (currentViewDestroy) {
+    currentViewDestroy();
+    currentViewDestroy = null;
+  }
   // Cleanup graph explorer
   if (currentView === 'graph-explorer' && typeof window.cleanupGraphExplorer === 'function') {
     window.cleanupGraphExplorer();
@@ -121,6 +129,10 @@ function initNavigation() {
         renderCliManager();
       } else if (currentView === 'cli-history') {
         renderCliHistoryView();
+        // Register destroy function for cli-history view
+        if (typeof window.destroyCliHistoryView === 'function') {
+          currentViewDestroy = window.destroyCliHistoryView;
+        }
       } else if (currentView === 'hook-manager') {
         renderHookManager();
       } else if (currentView === 'memory') {
@@ -133,6 +145,10 @@ function initNavigation() {
         renderRulesManager();
       } else if (currentView === 'claude-manager') {
         renderClaudeManager();
+        // Register destroy function for claude-manager view
+        if (typeof window.initClaudeManager === 'function') {
+          window.initClaudeManager();
+        }
       } else if (currentView === 'graph-explorer') {
         renderGraphExplorer();
       } else if (currentView === 'help') {
@@ -216,8 +232,10 @@ function updateContentTitle() {
   } else if (currentView === 'issue-discovery') {
     titleEl.textContent = t('title.issueDiscovery');
   } else if (currentView === 'liteTasks') {
-    const names = { 'lite-plan': t('title.litePlanSessions'), 'lite-fix': t('title.liteFixSessions') };
+    const names = { 'lite-plan': t('title.litePlanSessions'), 'lite-fix': t('title.liteFixSessions'), 'multi-cli-plan': t('title.multiCliPlanSessions') || 'Multi-CLI Plan Sessions' };
     titleEl.textContent = names[currentLiteType] || t('title.liteTasks');
+  } else if (currentView === 'multiCliDetail') {
+    titleEl.textContent = t('title.multiCliDetail') || 'Multi-CLI Discussion Detail';
   } else if (currentView === 'sessionDetail') {
     titleEl.textContent = t('title.sessionDetail');
   } else if (currentView === 'liteTaskDetail') {
@@ -319,12 +337,14 @@ function updateSidebarCounts(data) {
   if (archivedCount) archivedCount.textContent = data.archivedSessions?.length || 0;
   if (allCount) allCount.textContent = (data.activeSessions?.length || 0) + (data.archivedSessions?.length || 0);
 
-  // Update lite task counts
-  const litePlanCount = document.querySelector('.nav-item[data-lite="lite-plan"] .nav-count');
-  const liteFixCount = document.querySelector('.nav-item[data-lite="lite-fix"] .nav-count');
+  // Update lite task counts (using ID selectors to match dashboard.html structure)
+  const litePlanCount = document.getElementById('badgeLitePlan');
+  const liteFixCount = document.getElementById('badgeLiteFix');
+  const multiCliPlanCount = document.getElementById('badgeMultiCliPlan');
 
   if (litePlanCount) litePlanCount.textContent = data.liteTasks?.litePlan?.length || 0;
   if (liteFixCount) liteFixCount.textContent = data.liteTasks?.liteFix?.length || 0;
+  if (multiCliPlanCount) multiCliPlanCount.textContent = data.liteTasks?.multiCliPlan?.length || 0;
 }
 
 // ========== Navigation Badge Aggregation ==========