claude-code-workflow 6.3.27 → 6.3.29

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

@@ -52,12 +52,13 @@ const HOOK_TEMPLATES = {
   'memory-update-queue': {
     event: 'Stop',
     matcher: '',
-    command: 'bash',
-    args: ['-c', 'ccw tool exec memory_queue "{\\"action\\":\\"add\\",\\"path\\":\\"$CLAUDE_PROJECT_DIR\\"}"'],
+    command: 'node',
+    args: ['-e', "require('child_process').spawnSync(process.platform==='win32'?'cmd':'ccw',process.platform==='win32'?['/c','ccw','tool','exec','memory_queue',JSON.stringify({action:'add',path:process.env.CLAUDE_PROJECT_DIR,tool:'gemini'})]:['tool','exec','memory_queue',JSON.stringify({action:'add',path:process.env.CLAUDE_PROJECT_DIR,tool:'gemini'})],{stdio:'inherit'})"],
     description: 'Queue CLAUDE.md update when session ends (batched by threshold/timeout)',
     category: 'memory',
     configurable: true,
     config: {
+      tool: { type: 'select', default: 'gemini', options: ['gemini', 'qwen', 'codex', 'opencode'], label: 'CLI Tool' },
       threshold: { type: 'number', default: 5, min: 1, max: 20, label: 'Threshold (paths)', step: 1 },
       timeout: { type: 'number', default: 300, min: 60, max: 1800, label: 'Timeout (seconds)', step: 60 }
     }
@@ -66,8 +67,8 @@ const HOOK_TEMPLATES = {
   'skill-context-keyword': {
     event: 'UserPromptSubmit',
     matcher: '',
-    command: 'bash',
-    args: ['-c', 'ccw tool exec skill_context_loader --stdin'],
+    command: 'node',
+    args: ['-e', "const p=JSON.parse(process.env.HOOK_INPUT||'{}');require('child_process').spawnSync('ccw',['tool','exec','skill_context_loader',JSON.stringify({prompt:p.user_prompt||''})],{stdio:'inherit'})"],
     description: 'Load SKILL context based on keyword matching in user prompt',
     category: 'skill',
     configurable: true,
@@ -79,8 +80,8 @@ const HOOK_TEMPLATES = {
   'skill-context-auto': {
     event: 'UserPromptSubmit',
     matcher: '',
-    command: 'bash',
-    args: ['-c', 'ccw tool exec skill_context_loader --stdin --mode auto'],
+    command: 'node',
+    args: ['-e', "const p=JSON.parse(process.env.HOOK_INPUT||'{}');require('child_process').spawnSync('ccw',['tool','exec','skill_context_loader',JSON.stringify({mode:'auto',prompt:p.user_prompt||''})],{stdio:'inherit'})"],
     description: 'Auto-detect and load SKILL based on skill name in prompt',
     category: 'skill',
     configurable: false
@@ -195,6 +196,7 @@ const WIZARD_TEMPLATES = {
       }
     ],
     configFields: [
+      { key: 'tool', type: 'select', label: 'CLI Tool', default: 'gemini', options: ['gemini', 'qwen', 'codex', 'opencode'], description: 'CLI tool for CLAUDE.md generation' },
       { key: 'threshold', type: 'number', label: 'Threshold (paths)', default: 5, min: 1, max: 20, step: 1, description: 'Number of paths to trigger batch update' },
       { key: 'timeout', type: 'number', label: 'Timeout (seconds)', default: 300, min: 60, max: 1800, step: 60, description: 'Auto-flush queue after this time' }
     ]
@@ -359,48 +361,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;
 }
 
@@ -723,6 +750,7 @@ function renderWizardModalContent() {
   // Helper to get translated field labels
   const getFieldLabel = (fieldKey) => {
     const labels = {
+      'tool': t('hook.wizard.cliTool') || 'CLI Tool',
       'threshold': t('hook.wizard.thresholdPaths') || 'Threshold (paths)',
       'timeout': t('hook.wizard.timeoutSeconds') || 'Timeout (seconds)'
     };
@@ -731,6 +759,7 @@ function renderWizardModalContent() {
 
   const getFieldDesc = (fieldKey) => {
     const descs = {
+      'tool': t('hook.wizard.cliToolDesc') || 'CLI tool for CLAUDE.md generation',
       'threshold': t('hook.wizard.thresholdPathsDesc') || 'Number of paths to trigger batch update',
       'timeout': t('hook.wizard.timeoutSecondsDesc') || 'Auto-flush queue after this time'
     };
@@ -1096,20 +1125,19 @@ function generateWizardCommand() {
         keywords: c.keywords.split(',').map(k => k.trim()).filter(k => k)
       }));
 
-      const params = JSON.stringify({ configs: configJson, prompt: '$CLAUDE_PROMPT' });
-      return `ccw tool exec skill_context_loader '${params}'`;
+      // Use node + spawnSync for cross-platform JSON handling
+      const paramsObj = { configs: configJson, prompt: '${p.user_prompt}' };
+      return `node -e "const p=JSON.parse(process.env.HOOK_INPUT||'{}');require('child_process').spawnSync('ccw',['tool','exec','skill_context_loader',JSON.stringify(${JSON.stringify(paramsObj).replace('${p.user_prompt}', "'+p.user_prompt+'")})],{stdio:'inherit'})"`;
     } else {
-      // auto mode
-      const params = JSON.stringify({ mode: 'auto', prompt: '$CLAUDE_PROMPT' });
-      return `ccw tool exec skill_context_loader '${params}'`;
+      // auto mode - use node + spawnSync
+      return `node -e "const p=JSON.parse(process.env.HOOK_INPUT||'{}');require('child_process').spawnSync('ccw',['tool','exec','skill_context_loader',JSON.stringify({mode:'auto',prompt:p.user_prompt||''})],{stdio:'inherit'})"`;
     }
   }
 
   // Handle memory-update wizard (default)
-  // Now uses memory_queue for batched updates with configurable threshold/timeout
-  // The command adds to queue, configuration is applied separately via submitHookWizard
-  const params = `"{\\"action\\":\\"add\\",\\"path\\":\\"$CLAUDE_PROJECT_DIR\\"}"`;
-  return `ccw tool exec memory_queue ${params}`;
+  // Use node + spawnSync for cross-platform JSON handling
+  const selectedTool = wizardConfig.tool || 'gemini';
+  return `node -e "require('child_process').spawnSync(process.platform==='win32'?'cmd':'ccw',process.platform==='win32'?['/c','ccw','tool','exec','memory_queue',JSON.stringify({action:'add',path:process.env.CLAUDE_PROJECT_DIR,tool:'${selectedTool}'})]:['tool','exec','memory_queue',JSON.stringify({action:'add',path:process.env.CLAUDE_PROJECT_DIR,tool:'${selectedTool}'})],{stdio:'inherit'})"`;
 }
 
 async function submitHookWizard() {
@@ -1192,13 +1220,18 @@ async function submitHookWizard() {
   const baseTemplate = HOOK_TEMPLATES[selectedOption.templateId];
   if (!baseTemplate) return;
 
-  const command = generateWizardCommand();
-
-  const hookData = {
-    command: 'bash',
-    args: ['-c', command]
+  // Build hook data with configured values
+  let hookData = {
+    command: baseTemplate.command,
+    args: [...baseTemplate.args]
   };
 
+  // For memory-update wizard, use configured tool in args (cross-platform)
+  if (wizard.id === 'memory-update') {
+    const selectedTool = wizardConfig.tool || 'gemini';
+    hookData.args = ['-e', `require('child_process').spawnSync(process.platform==='win32'?'cmd':'ccw',process.platform==='win32'?['/c','ccw','tool','exec','memory_queue',JSON.stringify({action:'add',path:process.env.CLAUDE_PROJECT_DIR,tool:'${selectedTool}'})]:['tool','exec','memory_queue',JSON.stringify({action:'add',path:process.env.CLAUDE_PROJECT_DIR,tool:'${selectedTool}'})],{stdio:'inherit'})`];
+  }
+
   if (baseTemplate.matcher) {
     hookData.matcher = baseTemplate.matcher;
   }
@@ -1207,6 +1240,7 @@ async function submitHookWizard() {
 
   // For memory-update wizard, also configure queue settings
   if (wizard.id === 'memory-update') {
+    const selectedTool = wizardConfig.tool || 'gemini';
     const threshold = wizardConfig.threshold || 5;
     const timeout = wizardConfig.timeout || 300;
     try {
@@ -1217,7 +1251,7 @@ async function submitHookWizard() {
         body: JSON.stringify({ tool: 'memory_queue', params: configParams })
       });
       if (response.ok) {
-        showRefreshToast(`Queue configured: threshold=${threshold}, timeout=${timeout}s`, 'success');
+        showRefreshToast(`Queue configured: tool=${selectedTool}, threshold=${threshold}, timeout=${timeout}s`, 'success');
       }
     } catch (e) {
       console.warn('Failed to configure memory queue:', e);

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 ==========