claude-code-workflow 6.1.4 → 6.2.1

package/ccw/src/templates/dashboard-js/views/home.js

@@ -1,197 +0,0 @@
-// ==========================================
-// HOME VIEW - Dashboard Homepage
-// ==========================================
-
-function renderDashboard() {
-  // Show stats grid and search (may be hidden by MCP view)
-  showStatsAndSearch();
-
-  updateStats();
-  updateBadges();
-  updateCarousel();
-  renderSessions();
-  document.getElementById('generatedAt').textContent = workflowData.generatedAt || new Date().toISOString();
-}
-
-function showStatsAndSearch() {
-  const statsGrid = document.getElementById('statsGrid');
-  const searchInput = document.getElementById('searchInput');
-  if (statsGrid) statsGrid.style.display = '';
-  if (searchInput) searchInput.parentElement.style.display = '';
-}
-
-function hideStatsAndCarousel() {
-  const statsGrid = document.getElementById('statsGrid');
-  const searchInput = document.getElementById('searchInput');
-  if (statsGrid) statsGrid.style.display = 'none';
-  if (searchInput) searchInput.parentElement.style.display = 'none';
-}
-
-function updateStats() {
-  const stats = workflowData.statistics || {};
-  document.getElementById('statTotalSessions').textContent = stats.totalSessions || 0;
-  document.getElementById('statActiveSessions').textContent = stats.activeSessions || 0;
-  document.getElementById('statTotalTasks').textContent = stats.totalTasks || 0;
-  document.getElementById('statCompletedTasks').textContent = stats.completedTasks || 0;
-}
-
-function updateBadges() {
-  const active = workflowData.activeSessions || [];
-  const archived = workflowData.archivedSessions || [];
-
-  document.getElementById('badgeAll').textContent = active.length + archived.length;
-  document.getElementById('badgeActive').textContent = active.length;
-  document.getElementById('badgeArchived').textContent = archived.length;
-
-  // Lite Tasks badges
-  const liteTasks = workflowData.liteTasks || {};
-  document.getElementById('badgeLitePlan').textContent = liteTasks.litePlan?.length || 0;
-  document.getElementById('badgeLiteFix').textContent = liteTasks.liteFix?.length || 0;
-
-  // MCP badge - load async if needed
-  if (typeof loadMcpConfig === 'function') {
-    loadMcpConfig().then(() => {
-      if (typeof updateMcpBadge === 'function') {
-        updateMcpBadge();
-      }
-    }).catch(e => console.error('MCP badge update failed:', e));
-  }
-}
-
-function renderSessions() {
-  const container = document.getElementById('mainContent');
-
-  let sessions = [];
-
-  if (currentFilter === 'all' || currentFilter === 'active') {
-    sessions = sessions.concat((workflowData.activeSessions || []).map(s => ({ ...s, _isActive: true })));
-  }
-  if (currentFilter === 'all' || currentFilter === 'archived') {
-    sessions = sessions.concat((workflowData.archivedSessions || []).map(s => ({ ...s, _isActive: false })));
-  }
-
-  if (sessions.length === 0) {
-    container.innerHTML = `
-      <div class="empty-state" style="grid-column: 1/-1;">
-        <div class="empty-icon"><i data-lucide="inbox" class="w-12 h-12"></i></div>
-        <div class="empty-title">No Sessions Found</div>
-        <div class="empty-text">No workflow sessions match your current filter.</div>
-      </div>
-    `;
-    if (typeof lucide !== 'undefined') lucide.createIcons();
-    return;
-  }
-
-  container.innerHTML = `<div class="sessions-grid">${sessions.map(session => renderSessionCard(session)).join('')}</div>`;
-  
-  // Initialize Lucide icons after rendering
-  if (typeof lucide !== 'undefined') lucide.createIcons();
-}
-
-function renderSessionCard(session) {
-  const tasks = session.tasks || [];
-  const taskCount = session.taskCount || tasks.length;
-  const completed = tasks.filter(t => t.status === 'completed').length;
-  const progress = taskCount > 0 ? Math.round((completed / taskCount) * 100) : 0;
-
-  // Use _isActive flag set during rendering, default to true
-  const isActive = session._isActive !== false;
-  const date = session.created_at;
-
-  // Get session type badge
-  const sessionType = session.type || 'workflow';
-  const typeBadge = sessionType !== 'workflow' ? `<span class="session-type-badge ${sessionType}">${sessionType}</span>` : '';
-
-  // Store session data for modal
-  const sessionKey = `session-${session.session_id}`.replace(/[^a-zA-Z0-9-]/g, '-');
-  sessionDataStore[sessionKey] = session;
-
-  // Special rendering for review sessions
-  if (sessionType === 'review') {
-    return renderReviewSessionCard(session, sessionKey, typeBadge, isActive, date);
-  }
-
-  return `
-    <div class="session-card" onclick="showSessionDetailPage('${sessionKey}')">
-      <div class="session-header">
-        <div class="session-title">${escapeHtml(session.session_id || 'Unknown')}</div>
-        <div class="session-badges">
-          ${typeBadge}
-          <span class="session-status ${isActive ? 'active' : 'archived'}">
-            ${isActive ? 'ACTIVE' : 'ARCHIVED'}
-          </span>
-        </div>
-      </div>
-      <div class="session-body">
-        <div class="session-meta">
-          <span class="session-meta-item"><i data-lucide="calendar" class="w-3.5 h-3.5 inline mr-1"></i>${formatDate(date)}</span>
-          <span class="session-meta-item"><i data-lucide="list-checks" class="w-3.5 h-3.5 inline mr-1"></i>${taskCount} tasks</span>
-        </div>
-        ${taskCount > 0 ? `
-          <div class="progress-container">
-            <span class="progress-label">Progress</span>
-            <div class="progress-bar-wrapper">
-              <div class="progress-bar">
-                <div class="progress-fill" style="width: ${progress}%"></div>
-              </div>
-              <span class="progress-text">${completed}/${taskCount} (${progress}%)</span>
-            </div>
-          </div>
-        ` : ''}
-      </div>
-    </div>
-  `;
-}
-
-// Special card rendering for review sessions
-function renderReviewSessionCard(session, sessionKey, typeBadge, isActive, date) {
-  // Calculate findings stats from reviewDimensions
-  const dimensions = session.reviewDimensions || [];
-  let totalFindings = 0;
-  let criticalCount = 0;
-  let highCount = 0;
-  let mediumCount = 0;
-  let lowCount = 0;
-
-  dimensions.forEach(dim => {
-    const findings = dim.findings || [];
-    totalFindings += findings.length;
-    criticalCount += findings.filter(f => f.severity === 'critical').length;
-    highCount += findings.filter(f => f.severity === 'high').length;
-    mediumCount += findings.filter(f => f.severity === 'medium').length;
-    lowCount += findings.filter(f => f.severity === 'low').length;
-  });
-
-  return `
-    <div class="session-card" onclick="showSessionDetailPage('${sessionKey}')">
-      <div class="session-header">
-        <div class="session-title">${escapeHtml(session.session_id || 'Unknown')}</div>
-        <div class="session-badges">
-          ${typeBadge}
-          <span class="session-status ${isActive ? 'active' : 'archived'}">
-            ${isActive ? 'ACTIVE' : 'ARCHIVED'}
-          </span>
-        </div>
-      </div>
-      <div class="session-body">
-        <div class="session-meta">
-          <span class="session-meta-item"><i data-lucide="calendar" class="w-3.5 h-3.5 inline mr-1"></i>${formatDate(date)}</span>
-          <span class="session-meta-item"><i data-lucide="search" class="w-3.5 h-3.5 inline mr-1"></i>${totalFindings} findings</span>
-        </div>
-        ${totalFindings > 0 ? `
-          <div class="review-findings-summary">
-            <div class="findings-severity-row">
-              ${criticalCount > 0 ? `<span class="finding-count critical"><i data-lucide="alert-circle" class="w-3 h-3 inline"></i> ${criticalCount}</span>` : ''}
-              ${highCount > 0 ? `<span class="finding-count high"><i data-lucide="alert-triangle" class="w-3 h-3 inline"></i> ${highCount}</span>` : ''}
-              ${mediumCount > 0 ? `<span class="finding-count medium"><i data-lucide="info" class="w-3 h-3 inline"></i> ${mediumCount}</span>` : ''}
-              ${lowCount > 0 ? `<span class="finding-count low"><i data-lucide="check-circle" class="w-3 h-3 inline"></i> ${lowCount}</span>` : ''}
-            </div>
-            <div class="dimensions-info">
-              ${dimensions.length} dimensions
-            </div>
-          </div>
-        ` : ''}
-      </div>
-    </div>
-  `;
-}

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

@@ -1,392 +0,0 @@
-// Hook Manager View
-// Renders the Claude Code hooks management interface
-
-async function renderHookManager() {
-  const container = document.getElementById('mainContent');
-  if (!container) return;
-
-  // Hide stats grid and search for Hook view
-  const statsGrid = document.getElementById('statsGrid');
-  const searchInput = document.getElementById('searchInput');
-  if (statsGrid) statsGrid.style.display = 'none';
-  if (searchInput) searchInput.parentElement.style.display = 'none';
-
-  // Load hook config if not already loaded
-  if (!hookConfig.global.hooks && !hookConfig.project.hooks) {
-    await loadHookConfig();
-  }
-
-  const globalHooks = hookConfig.global?.hooks || {};
-  const projectHooks = hookConfig.project?.hooks || {};
-
-  // Count hooks
-  const globalHookCount = countHooks(globalHooks);
-  const projectHookCount = countHooks(projectHooks);
-
-  container.innerHTML = `
-    <div class="hook-manager">
-      <!-- Project Hooks -->
-      <div class="hook-section mb-6">
-        <div class="flex items-center justify-between mb-4">
-          <div class="flex items-center gap-3">
-            <h3 class="text-lg font-semibold text-foreground">Project Hooks</h3>
-            <span class="badge px-2 py-0.5 text-xs font-semibold rounded-full bg-primary-light text-primary">.claude/settings.json</span>
-            <button class="px-3 py-1.5 text-sm bg-primary text-primary-foreground rounded-lg hover:opacity-90 transition-opacity flex items-center gap-1"
-                    onclick="openHookCreateModal()">
-              <span>+</span> New Hook
-            </button>
-          </div>
-          <span class="text-sm text-muted-foreground">${projectHookCount} hooks configured</span>
-        </div>
-
-        ${projectHookCount === 0 ? `
-          <div class="hook-empty-state bg-card border border-border rounded-lg p-6 text-center">
-            <div class="text-muted-foreground mb-3"><i data-lucide="webhook" class="w-10 h-10 mx-auto"></i></div>
-            <p class="text-muted-foreground">No hooks configured for this project</p>
-            <p class="text-sm text-muted-foreground mt-1">Create a hook to automate actions on tool usage</p>
-          </div>
-        ` : `
-          <div class="hook-grid grid gap-3">
-            ${renderHooksByEvent(projectHooks, 'project')}
-          </div>
-        `}
-      </div>
-
-      <!-- Global Hooks -->
-      <div class="hook-section mb-6">
-        <div class="flex items-center justify-between mb-4">
-          <div class="flex items-center gap-3">
-            <h3 class="text-lg font-semibold text-foreground">Global Hooks</h3>
-            <span class="badge px-2 py-0.5 text-xs font-semibold rounded-full bg-muted text-muted-foreground">~/.claude/settings.json</span>
-          </div>
-          <span class="text-sm text-muted-foreground">${globalHookCount} hooks configured</span>
-        </div>
-
-        ${globalHookCount === 0 ? `
-          <div class="hook-empty-state bg-card border border-border rounded-lg p-6 text-center">
-            <p class="text-muted-foreground">No global hooks configured</p>
-            <p class="text-sm text-muted-foreground mt-1">Global hooks apply to all Claude Code sessions</p>
-          </div>
-        ` : `
-          <div class="hook-grid grid gap-3">
-            ${renderHooksByEvent(globalHooks, 'global')}
-          </div>
-        `}
-      </div>
-
-      <!-- Quick Install Templates -->
-      <div class="hook-section">
-        <div class="flex items-center justify-between mb-4">
-          <h3 class="text-lg font-semibold text-foreground">Quick Install Templates</h3>
-          <span class="text-sm text-muted-foreground">One-click hook installation</span>
-        </div>
-
-        <div class="hook-templates-grid grid grid-cols-1 md:grid-cols-2 gap-4">
-          ${renderQuickInstallCard('ccw-notify', 'CCW Dashboard Notify', 'Notify CCW dashboard when files are written', 'PostToolUse', 'Write')}
-          ${renderQuickInstallCard('log-tool', 'Tool Usage Logger', 'Log all tool executions to a file', 'PostToolUse', 'All')}
-          ${renderQuickInstallCard('lint-check', 'Auto Lint Check', 'Run ESLint on JavaScript/TypeScript files after write', 'PostToolUse', 'Write')}
-          ${renderQuickInstallCard('git-add', 'Auto Git Stage', 'Automatically stage written files to git', 'PostToolUse', 'Write')}
-        </div>
-      </div>
-
-      <!-- Hook Environment Variables Reference -->
-      <div class="hook-section mt-6">
-        <div class="flex items-center justify-between mb-4">
-          <h3 class="text-lg font-semibold text-foreground">Environment Variables Reference</h3>
-        </div>
-
-        <div class="bg-card border border-border rounded-lg p-4">
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
-            <div class="space-y-2">
-              <div class="flex items-start gap-2">
-                <code class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded shrink-0">$CLAUDE_FILE_PATHS</code>
-                <span class="text-muted-foreground">Space-separated file paths affected</span>
-              </div>
-              <div class="flex items-start gap-2">
-                <code class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded shrink-0">$CLAUDE_TOOL_NAME</code>
-                <span class="text-muted-foreground">Name of the tool being executed</span>
-              </div>
-              <div class="flex items-start gap-2">
-                <code class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded shrink-0">$CLAUDE_TOOL_INPUT</code>
-                <span class="text-muted-foreground">JSON input passed to the tool</span>
-              </div>
-            </div>
-            <div class="space-y-2">
-              <div class="flex items-start gap-2">
-                <code class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded shrink-0">$CLAUDE_SESSION_ID</code>
-                <span class="text-muted-foreground">Current Claude session ID</span>
-              </div>
-              <div class="flex items-start gap-2">
-                <code class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded shrink-0">$CLAUDE_PROJECT_DIR</code>
-                <span class="text-muted-foreground">Current project directory path</span>
-              </div>
-              <div class="flex items-start gap-2">
-                <code class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded shrink-0">$CLAUDE_WORKING_DIR</code>
-                <span class="text-muted-foreground">Current working directory</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  `;
-
-  // Attach event listeners
-  attachHookEventListeners();
-  
-  // Initialize Lucide icons
-  if (typeof lucide !== 'undefined') lucide.createIcons();
-}
-
-function countHooks(hooks) {
-  let count = 0;
-  for (const event of Object.keys(hooks)) {
-    const hookList = hooks[event];
-    count += Array.isArray(hookList) ? hookList.length : 1;
-  }
-  return count;
-}
-
-function renderHooksByEvent(hooks, scope) {
-  const events = Object.keys(hooks);
-  if (events.length === 0) return '';
-
-  return events.map(event => {
-    const hookList = Array.isArray(hooks[event]) ? hooks[event] : [hooks[event]];
-
-    return hookList.map((hook, index) => {
-      const matcher = hook.matcher || 'All tools';
-      const command = hook.command || 'N/A';
-      const args = hook.args || [];
-
-      return `
-        <div class="hook-card bg-card border border-border rounded-lg p-4 hover:shadow-md transition-all">
-          <div class="flex items-start justify-between mb-3">
-            <div class="flex items-center gap-2">
-              ${getHookEventIconLucide(event)}
-              <div>
-                <h4 class="font-semibold text-foreground">${event}</h4>
-                <p class="text-xs text-muted-foreground">${getHookEventDescription(event)}</p>
-              </div>
-            </div>
-            <div class="flex items-center gap-2">
-              <button class="p-1.5 text-muted-foreground hover:text-foreground hover:bg-hover rounded transition-colors"
-                      data-scope="${scope}"
-                      data-event="${event}"
-                      data-index="${index}"
-                      data-action="edit"
-                      title="Edit hook">
-                <i data-lucide="pencil" class="w-4 h-4"></i>
-              </button>
-              <button class="p-1.5 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded transition-colors"
-                      data-scope="${scope}"
-                      data-event="${event}"
-                      data-index="${index}"
-                      data-action="delete"
-                      title="Delete hook">
-                <i data-lucide="trash-2" class="w-4 h-4"></i>
-              </button>
-            </div>
-          </div>
-
-          <div class="hook-details text-sm space-y-2">
-            <div class="flex items-center gap-2">
-              <span class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded shrink-0">matcher</span>
-              <span class="text-muted-foreground">${escapeHtml(matcher)}</span>
-            </div>
-            <div class="flex items-center gap-2">
-              <span class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded shrink-0">command</span>
-              <span class="font-mono text-xs text-foreground">${escapeHtml(command)}</span>
-            </div>
-            ${args.length > 0 ? `
-              <div class="flex items-start gap-2">
-                <span class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded shrink-0">args</span>
-                <span class="font-mono text-xs text-muted-foreground truncate" title="${escapeHtml(args.join(' '))}">${escapeHtml(args.slice(0, 3).join(' '))}${args.length > 3 ? '...' : ''}</span>
-              </div>
-            ` : ''}
-          </div>
-        </div>
-      `;
-    }).join('');
-  }).join('');
-}
-
-function renderQuickInstallCard(templateId, title, description, event, matcher) {
-  const isInstalled = isHookTemplateInstalled(templateId);
-
-  return `
-    <div class="hook-template-card bg-card border border-border rounded-lg p-4 hover:shadow-md transition-all ${isInstalled ? 'border-success bg-success-light/30' : ''}">
-      <div class="flex items-start justify-between mb-3">
-        <div class="flex items-center gap-2">
-          ${isInstalled ? '<i data-lucide="check-circle" class="w-5 h-5 text-success"></i>' : '<i data-lucide="webhook" class="w-5 h-5"></i>'}
-          <div>
-            <h4 class="font-semibold text-foreground">${escapeHtml(title)}</h4>
-            <p class="text-xs text-muted-foreground">${escapeHtml(description)}</p>
-          </div>
-        </div>
-      </div>
-
-      <div class="hook-template-meta text-xs text-muted-foreground mb-3 flex items-center gap-3">
-        <span class="flex items-center gap-1">
-          <span class="font-mono bg-muted px-1 py-0.5 rounded">${event}</span>
-        </span>
-        <span class="flex items-center gap-1">
-          Matches: <span class="font-medium">${matcher}</span>
-        </span>
-      </div>
-
-      <div class="flex items-center gap-2">
-        ${isInstalled ? `
-          <button class="flex-1 px-3 py-1.5 text-sm bg-destructive/10 text-destructive rounded hover:bg-destructive/20 transition-colors"
-                  data-template="${templateId}"
-                  data-action="uninstall">
-            Uninstall
-          </button>
-        ` : `
-          <button class="flex-1 px-3 py-1.5 text-sm bg-primary text-primary-foreground rounded hover:opacity-90 transition-opacity"
-                  data-template="${templateId}"
-                  data-action="install-project">
-            Install (Project)
-          </button>
-          <button class="px-3 py-1.5 text-sm bg-muted text-foreground rounded hover:bg-hover transition-colors"
-                  data-template="${templateId}"
-                  data-action="install-global">
-            Global
-          </button>
-        `}
-      </div>
-    </div>
-  `;
-}
-
-function isHookTemplateInstalled(templateId) {
-  const template = HOOK_TEMPLATES[templateId];
-  if (!template) return false;
-
-  // Check project hooks
-  const projectHooks = hookConfig.project?.hooks?.[template.event];
-  if (projectHooks) {
-    const hookList = Array.isArray(projectHooks) ? projectHooks : [projectHooks];
-    if (hookList.some(h => h.command === template.command)) return true;
-  }
-
-  // Check global hooks
-  const globalHooks = hookConfig.global?.hooks?.[template.event];
-  if (globalHooks) {
-    const hookList = Array.isArray(globalHooks) ? globalHooks : [globalHooks];
-    if (hookList.some(h => h.command === template.command)) return true;
-  }
-
-  return false;
-}
-
-async function installHookTemplate(templateId, scope) {
-  const template = HOOK_TEMPLATES[templateId];
-  if (!template) {
-    showRefreshToast('Template not found', 'error');
-    return;
-  }
-
-  const hookData = {
-    command: template.command,
-    args: template.args
-  };
-
-  if (template.matcher) {
-    hookData.matcher = template.matcher;
-  }
-
-  await saveHook(scope, template.event, hookData);
-}
-
-async function uninstallHookTemplate(templateId) {
-  const template = HOOK_TEMPLATES[templateId];
-  if (!template) return;
-
-  // Find and remove from project hooks
-  const projectHooks = hookConfig.project?.hooks?.[template.event];
-  if (projectHooks) {
-    const hookList = Array.isArray(projectHooks) ? projectHooks : [projectHooks];
-    const index = hookList.findIndex(h => h.command === template.command);
-    if (index !== -1) {
-      await removeHook('project', template.event, index);
-      return;
-    }
-  }
-
-  // Find and remove from global hooks
-  const globalHooks = hookConfig.global?.hooks?.[template.event];
-  if (globalHooks) {
-    const hookList = Array.isArray(globalHooks) ? globalHooks : [globalHooks];
-    const index = hookList.findIndex(h => h.command === template.command);
-    if (index !== -1) {
-      await removeHook('global', template.event, index);
-      return;
-    }
-  }
-}
-
-function attachHookEventListeners() {
-  // Edit buttons
-  document.querySelectorAll('.hook-card button[data-action="edit"]').forEach(btn => {
-    btn.addEventListener('click', (e) => {
-      const button = e.currentTarget;
-      const scope = button.dataset.scope;
-      const event = button.dataset.event;
-      const index = parseInt(button.dataset.index);
-
-      const hooks = scope === 'global' ? hookConfig.global.hooks : hookConfig.project.hooks;
-      const hookList = Array.isArray(hooks[event]) ? hooks[event] : [hooks[event]];
-      const hook = hookList[index];
-
-      if (hook) {
-        openHookCreateModal({
-          scope: scope,
-          event: event,
-          index: index,
-          matcher: hook.matcher || '',
-          command: hook.command,
-          args: hook.args || []
-        });
-      }
-    });
-  });
-
-  // Delete buttons
-  document.querySelectorAll('.hook-card button[data-action="delete"]').forEach(btn => {
-    btn.addEventListener('click', async (e) => {
-      const button = e.currentTarget;
-      const scope = button.dataset.scope;
-      const event = button.dataset.event;
-      const index = parseInt(button.dataset.index);
-
-      if (confirm(`Remove this ${event} hook?`)) {
-        await removeHook(scope, event, index);
-      }
-    });
-  });
-
-  // Install project buttons
-  document.querySelectorAll('button[data-action="install-project"]').forEach(btn => {
-    btn.addEventListener('click', async (e) => {
-      const templateId = e.currentTarget.dataset.template;
-      await installHookTemplate(templateId, 'project');
-    });
-  });
-
-  // Install global buttons
-  document.querySelectorAll('button[data-action="install-global"]').forEach(btn => {
-    btn.addEventListener('click', async (e) => {
-      const templateId = e.currentTarget.dataset.template;
-      await installHookTemplate(templateId, 'global');
-    });
-  });
-
-  // Uninstall buttons
-  document.querySelectorAll('button[data-action="uninstall"]').forEach(btn => {
-    btn.addEventListener('click', async (e) => {
-      const templateId = e.currentTarget.dataset.template;
-      await uninstallHookTemplate(templateId);
-    });
-  });
-}