claude-code-workflow 6.1.3 → 6.2.1

package/ccw/src/templates/dashboard-js/components/global-notifications.js

@@ -1,219 +0,0 @@
-// ==========================================
-// GLOBAL NOTIFICATION SYSTEM
-// ==========================================
-// Floating notification panel accessible from any view
-
-/**
- * Initialize global notification panel
- */
-function initGlobalNotifications() {
-  // Create FAB and panel if not exists
-  if (!document.getElementById('globalNotificationFab')) {
-    const fabHtml = `
-      <div class="global-notif-fab" id="globalNotificationFab" onclick="toggleGlobalNotifications()" title="Notifications">
-        <span class="fab-icon">🔔</span>
-        <span class="fab-badge" id="globalNotifBadge">0</span>
-      </div>
-      
-      <div class="global-notif-panel" id="globalNotificationPanel">
-        <div class="global-notif-header">
-          <span class="global-notif-title">🔔 Notifications</span>
-          <button class="global-notif-close" onclick="toggleGlobalNotifications()">×</button>
-        </div>
-        <div class="global-notif-actions">
-          <button class="notif-action-btn" onclick="clearGlobalNotifications()">
-            <span>🗑️</span> Clear All
-          </button>
-        </div>
-        <div class="global-notif-list" id="globalNotificationList">
-          <div class="global-notif-empty">
-            <span>No notifications</span>
-            <p>System events and task updates will appear here</p>
-          </div>
-        </div>
-      </div>
-    `;
-    
-    const container = document.createElement('div');
-    container.id = 'globalNotificationContainer';
-    container.innerHTML = fabHtml;
-    document.body.appendChild(container);
-  }
-  
-  renderGlobalNotifications();
-}
-
-/**
- * Toggle notification panel visibility
- */
-function toggleGlobalNotifications() {
-  isNotificationPanelVisible = !isNotificationPanelVisible;
-  const panel = document.getElementById('globalNotificationPanel');
-  const fab = document.getElementById('globalNotificationFab');
-  
-  if (panel && fab) {
-    if (isNotificationPanelVisible) {
-      panel.classList.add('show');
-      fab.classList.add('active');
-    } else {
-      panel.classList.remove('show');
-      fab.classList.remove('active');
-    }
-  }
-}
-
-/**
- * Add a global notification
- * @param {string} type - 'info', 'success', 'warning', 'error'
- * @param {string} message - Main notification message
- * @param {string} details - Optional details
- * @param {string} source - Optional source identifier (e.g., 'explorer', 'mcp')
- */
-function addGlobalNotification(type, message, details = null, source = null) {
-  const notification = {
-    id: Date.now(),
-    type,
-    message,
-    details,
-    source,
-    timestamp: new Date().toISOString(),
-    read: false
-  };
-  
-  globalNotificationQueue.unshift(notification);
-  
-  // Keep only last 100 notifications
-  if (globalNotificationQueue.length > 100) {
-    globalNotificationQueue = globalNotificationQueue.slice(0, 100);
-  }
-  
-  renderGlobalNotifications();
-  updateGlobalNotifBadge();
-  
-  // Show toast for important notifications
-  if (type === 'error' || type === 'success') {
-    showNotificationToast(notification);
-  }
-}
-
-/**
- * Show a brief toast notification
- */
-function showNotificationToast(notification) {
-  const typeIcon = {
-    'info': 'ℹ️',
-    'success': '✅',
-    'warning': '⚠️',
-    'error': '❌'
-  }[notification.type] || 'ℹ️';
-  
-  // Remove existing toast
-  const existing = document.querySelector('.notif-toast');
-  if (existing) existing.remove();
-  
-  const toast = document.createElement('div');
-  toast.className = `notif-toast type-${notification.type}`;
-  toast.innerHTML = `
-    <span class="toast-icon">${typeIcon}</span>
-    <span class="toast-message">${escapeHtml(notification.message)}</span>
-  `;
-  document.body.appendChild(toast);
-  
-  // Animate in
-  requestAnimationFrame(() => toast.classList.add('show'));
-  
-  // Auto-remove
-  setTimeout(() => {
-    toast.classList.remove('show');
-    setTimeout(() => toast.remove(), 300);
-  }, 3000);
-}
-
-/**
- * Render notification list
- */
-function renderGlobalNotifications() {
-  const listEl = document.getElementById('globalNotificationList');
-  if (!listEl) return;
-  
-  if (globalNotificationQueue.length === 0) {
-    listEl.innerHTML = `
-      <div class="global-notif-empty">
-        <span>No notifications</span>
-        <p>System events and task updates will appear here</p>
-      </div>
-    `;
-    return;
-  }
-  
-  listEl.innerHTML = globalNotificationQueue.map(notif => {
-    const typeIcon = {
-      'info': 'ℹ️',
-      'success': '✅',
-      'warning': '⚠️',
-      'error': '❌'
-    }[notif.type] || 'ℹ️';
-    
-    const time = formatNotifTime(notif.timestamp);
-    const sourceLabel = notif.source ? `<span class="notif-source">${notif.source}</span>` : '';
-    
-    return `
-      <div class="global-notif-item type-${notif.type} ${notif.read ? 'read' : ''}" data-id="${notif.id}">
-        <div class="notif-item-header">
-          <span class="notif-icon">${typeIcon}</span>
-          <span class="notif-message">${escapeHtml(notif.message)}</span>
-          ${sourceLabel}
-        </div>
-        ${notif.details ? `<div class="notif-details">${escapeHtml(notif.details)}</div>` : ''}
-        <div class="notif-meta">
-          <span class="notif-time">${time}</span>
-        </div>
-      </div>
-    `;
-  }).join('');
-}
-
-/**
- * Format notification time
- */
-function formatNotifTime(timestamp) {
-  const date = new Date(timestamp);
-  const now = new Date();
-  const diff = now - date;
-  
-  if (diff < 60000) return 'Just now';
-  if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
-  if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;
-  return date.toLocaleDateString();
-}
-
-/**
- * Update notification badge
- */
-function updateGlobalNotifBadge() {
-  const badge = document.getElementById('globalNotifBadge');
-  if (badge) {
-    const unreadCount = globalNotificationQueue.filter(n => !n.read).length;
-    badge.textContent = unreadCount;
-    badge.style.display = unreadCount > 0 ? 'flex' : 'none';
-  }
-}
-
-/**
- * Clear all notifications
- */
-function clearGlobalNotifications() {
-  globalNotificationQueue = [];
-  renderGlobalNotifications();
-  updateGlobalNotifBadge();
-}
-
-/**
- * Mark all as read
- */
-function markAllNotificationsRead() {
-  globalNotificationQueue.forEach(n => n.read = true);
-  renderGlobalNotifications();
-  updateGlobalNotifBadge();
-}
-

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

@@ -1,283 +0,0 @@
-// Hook Manager Component
-// Manages Claude Code hooks configuration from settings.json
-
-// ========== Hook State ==========
-let hookConfig = {
-  global: { hooks: {} },
-  project: { hooks: {} }
-};
-
-// ========== Hook Templates ==========
-const HOOK_TEMPLATES = {
-  'ccw-notify': {
-    event: 'PostToolUse',
-    matcher: 'Write',
-    command: 'curl',
-    args: ['-s', '-X', 'POST', '-H', 'Content-Type: application/json', '-d', '{"type":"summary_written","filePath":"$CLAUDE_FILE_PATHS"}', 'http://localhost:3456/api/hook']
-  },
-  'log-tool': {
-    event: 'PostToolUse',
-    matcher: '',
-    command: 'bash',
-    args: ['-c', 'echo "[$(date)] Tool: $CLAUDE_TOOL_NAME, Files: $CLAUDE_FILE_PATHS" >> ~/.claude/tool-usage.log']
-  },
-  'lint-check': {
-    event: 'PostToolUse',
-    matcher: 'Write',
-    command: 'bash',
-    args: ['-c', 'for f in $CLAUDE_FILE_PATHS; do if [[ "$f" =~ \\.(js|ts|jsx|tsx)$ ]]; then npx eslint "$f" --fix 2>/dev/null || true; fi; done']
-  },
-  'git-add': {
-    event: 'PostToolUse',
-    matcher: 'Write',
-    command: 'bash',
-    args: ['-c', 'for f in $CLAUDE_FILE_PATHS; do git add "$f" 2>/dev/null || true; done']
-  }
-};
-
-// ========== Initialization ==========
-function initHookManager() {
-  // Initialize Hook navigation
-  document.querySelectorAll('.nav-item[data-view="hook-manager"]').forEach(item => {
-    item.addEventListener('click', () => {
-      setActiveNavItem(item);
-      currentView = 'hook-manager';
-      currentFilter = null;
-      currentLiteType = null;
-      currentSessionDetailKey = null;
-      updateContentTitle();
-      renderHookManager();
-    });
-  });
-}
-
-// ========== Data Loading ==========
-async function loadHookConfig() {
-  try {
-    const response = await fetch(`/api/hooks?path=${encodeURIComponent(projectPath)}`);
-    if (!response.ok) throw new Error('Failed to load hook config');
-    const data = await response.json();
-    hookConfig = data;
-    updateHookBadge();
-    return data;
-  } catch (err) {
-    console.error('Failed to load hook config:', err);
-    return null;
-  }
-}
-
-async function saveHook(scope, event, hookData) {
-  try {
-    const response = await fetch('/api/hooks', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        projectPath: projectPath,
-        scope: scope,
-        event: event,
-        hookData: hookData
-      })
-    });
-
-    if (!response.ok) throw new Error('Failed to save hook');
-
-    const result = await response.json();
-    if (result.success) {
-      await loadHookConfig();
-      renderHookManager();
-      showRefreshToast(`Hook saved successfully`, 'success');
-    }
-    return result;
-  } catch (err) {
-    console.error('Failed to save hook:', err);
-    showRefreshToast(`Failed to save hook: ${err.message}`, 'error');
-    return null;
-  }
-}
-
-async function removeHook(scope, event, hookIndex) {
-  try {
-    const response = await fetch('/api/hooks', {
-      method: 'DELETE',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        projectPath: projectPath,
-        scope: scope,
-        event: event,
-        hookIndex: hookIndex
-      })
-    });
-
-    if (!response.ok) throw new Error('Failed to remove hook');
-
-    const result = await response.json();
-    if (result.success) {
-      await loadHookConfig();
-      renderHookManager();
-      showRefreshToast(`Hook removed successfully`, 'success');
-    }
-    return result;
-  } catch (err) {
-    console.error('Failed to remove hook:', err);
-    showRefreshToast(`Failed to remove hook: ${err.message}`, 'error');
-    return null;
-  }
-}
-
-// ========== Badge Update ==========
-function updateHookBadge() {
-  const badge = document.getElementById('badgeHooks');
-  if (badge) {
-    let totalHooks = 0;
-
-    // Count global hooks
-    if (hookConfig.global?.hooks) {
-      for (const event of Object.keys(hookConfig.global.hooks)) {
-        const hooks = hookConfig.global.hooks[event];
-        totalHooks += Array.isArray(hooks) ? hooks.length : 1;
-      }
-    }
-
-    // Count project hooks
-    if (hookConfig.project?.hooks) {
-      for (const event of Object.keys(hookConfig.project.hooks)) {
-        const hooks = hookConfig.project.hooks[event];
-        totalHooks += Array.isArray(hooks) ? hooks.length : 1;
-      }
-    }
-
-    badge.textContent = totalHooks;
-  }
-}
-
-// ========== Hook Modal Functions ==========
-let editingHookData = null;
-
-function openHookCreateModal(editData = null) {
-  const modal = document.getElementById('hookCreateModal');
-  const title = document.getElementById('hookModalTitle');
-
-  if (modal) {
-    modal.classList.remove('hidden');
-    editingHookData = editData;
-
-    // Set title based on mode
-    title.textContent = editData ? 'Edit Hook' : 'Create Hook';
-
-    // Clear or populate form
-    if (editData) {
-      document.getElementById('hookEvent').value = editData.event || '';
-      document.getElementById('hookMatcher').value = editData.matcher || '';
-      document.getElementById('hookCommand').value = editData.command || '';
-      document.getElementById('hookArgs').value = (editData.args || []).join('\n');
-
-      // Set scope radio
-      const scopeRadio = document.querySelector(`input[name="hookScope"][value="${editData.scope || 'project'}"]`);
-      if (scopeRadio) scopeRadio.checked = true;
-    } else {
-      document.getElementById('hookEvent').value = '';
-      document.getElementById('hookMatcher').value = '';
-      document.getElementById('hookCommand').value = '';
-      document.getElementById('hookArgs').value = '';
-      document.querySelector('input[name="hookScope"][value="project"]').checked = true;
-    }
-
-    // Focus on event select
-    document.getElementById('hookEvent').focus();
-  }
-}
-
-function closeHookCreateModal() {
-  const modal = document.getElementById('hookCreateModal');
-  if (modal) {
-    modal.classList.add('hidden');
-    editingHookData = null;
-  }
-}
-
-function applyHookTemplate(templateName) {
-  const template = HOOK_TEMPLATES[templateName];
-  if (!template) return;
-
-  document.getElementById('hookEvent').value = template.event;
-  document.getElementById('hookMatcher').value = template.matcher;
-  document.getElementById('hookCommand').value = template.command;
-  document.getElementById('hookArgs').value = template.args.join('\n');
-}
-
-async function submitHookCreate() {
-  const event = document.getElementById('hookEvent').value;
-  const matcher = document.getElementById('hookMatcher').value.trim();
-  const command = document.getElementById('hookCommand').value.trim();
-  const argsText = document.getElementById('hookArgs').value.trim();
-  const scope = document.querySelector('input[name="hookScope"]:checked').value;
-
-  // Validate required fields
-  if (!event) {
-    showRefreshToast('Hook event is required', 'error');
-    document.getElementById('hookEvent').focus();
-    return;
-  }
-
-  if (!command) {
-    showRefreshToast('Command is required', 'error');
-    document.getElementById('hookCommand').focus();
-    return;
-  }
-
-  // Parse args (one per line)
-  const args = argsText ? argsText.split('\n').map(a => a.trim()).filter(a => a) : [];
-
-  // Build hook data
-  const hookData = {
-    command: command
-  };
-
-  if (args.length > 0) {
-    hookData.args = args;
-  }
-
-  if (matcher) {
-    hookData.matcher = matcher;
-  }
-
-  // If editing, include original index for replacement
-  if (editingHookData && editingHookData.index !== undefined) {
-    hookData.replaceIndex = editingHookData.index;
-  }
-
-  // Submit to API
-  await saveHook(scope, event, hookData);
-  closeHookCreateModal();
-}
-
-// ========== Helpers ==========
-function getHookEventDescription(event) {
-  const descriptions = {
-    'PreToolUse': 'Runs before a tool is executed',
-    'PostToolUse': 'Runs after a tool completes',
-    'Notification': 'Runs when a notification is triggered',
-    'Stop': 'Runs when the agent stops'
-  };
-  return descriptions[event] || event;
-}
-
-function getHookEventIcon(event) {
-  const icons = {
-    'PreToolUse': '⏳',
-    'PostToolUse': '✅',
-    'Notification': '🔔',
-    'Stop': '🛑'
-  };
-  return icons[event] || '🪝';
-}
-
-function getHookEventIconLucide(event) {
-  const icons = {
-    'PreToolUse': '<i data-lucide="clock" class="w-5 h-5"></i>',
-    'PostToolUse': '<i data-lucide="check-circle" class="w-5 h-5"></i>',
-    'Notification': '<i data-lucide="bell" class="w-5 h-5"></i>',
-    'Stop': '<i data-lucide="octagon-x" class="w-5 h-5"></i>'
-  };
-  return icons[event] || '<i data-lucide="webhook" class="w-5 h-5"></i>';
-}