claude-code-workflow 6.1.4 → 6.2.2

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

@@ -0,0 +1,856 @@
+// ==========================================
+// HELP VIEW
+// Command guide with categories, workflow diagrams, and CodexLens quick-start
+// ==========================================
+
+// State variables
+var helpData = {
+  commands: [],
+  grouped: {},
+  workflows: {},
+  codexlens: {}
+};
+var activeHelpTab = 'cli';
+var helpSearchQuery = '';
+var helpSearchTimeout = null;
+var cytoscapeInstance = null;
+var activeWorkflowDiagram = 'decision';
+
+// ========== Main Render Function ==========
+async function renderHelpView() {
+  // Debug: Check if ht function is available
+  console.log('[Help View] ht function available:', typeof ht, typeof window.ht);
+
+  hideStatsAndCarousel();
+
+  var container = document.getElementById('mainContent');
+  if (!container) return;
+
+  // Show loading state
+  container.innerHTML = '<div class="flex items-center justify-center py-16"><i data-lucide="loader-2" class="w-8 h-8 animate-spin"></i></div>';
+  if (typeof lucide !== 'undefined') lucide.createIcons();
+
+  // Load help data
+  await loadHelpData();
+
+  // Render layout
+  container.innerHTML = renderHelpLayout();
+
+  // Initialize event handlers
+  initializeHelpEventHandlers();
+
+  // Render initial tab
+  renderCommandsTab(activeHelpTab);
+
+  if (typeof lucide !== 'undefined') lucide.createIcons();
+}
+
+// ========== Data Loading ==========
+async function loadHelpData() {
+  try {
+    // Load all commands with grouping
+    var commandsResp = await fetch('/api/help/commands');
+    if (commandsResp.ok) {
+      var data = await commandsResp.json();
+      helpData.commands = data.commands || [];
+      helpData.grouped = data.grouped || {};
+    }
+
+    // Load workflow relationships
+    var workflowsResp = await fetch('/api/help/workflows');
+    if (workflowsResp.ok) {
+      helpData.workflows = await workflowsResp.json();
+    }
+
+    // Load CodexLens data
+    var codexResp = await fetch('/api/help/codexlens');
+    if (codexResp.ok) {
+      helpData.codexlens = await codexResp.json();
+    }
+  } catch (err) {
+    console.error('Failed to load help data:', err);
+  }
+}
+
+// ========== Layout Rendering ==========
+function renderHelpLayout() {
+  return `
+    <div class="help-view-container">
+      <!-- Page Header -->
+      <div class="bg-card border border-border rounded-lg p-6 mb-6">
+        <h2 class="text-2xl font-bold text-foreground mb-2 flex items-center gap-2">
+          <i data-lucide="help-circle" class="w-6 h-6"></i>
+          ${ht('help.title')}
+        </h2>
+        <p class="text-muted-foreground">
+          ${ht('help.subtitle')}
+        </p>
+      </div>
+
+      <!-- Search Bar -->
+      <div class="bg-card border border-border rounded-lg p-4 mb-6">
+        <div class="relative">
+          <i data-lucide="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground"></i>
+          <input
+            type="text"
+            id="helpSearchInput"
+            class="w-full pl-10 pr-4 py-2 bg-background border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
+            placeholder="${ht('help.search.placeholder')}"
+            value="${escapeHtml(helpSearchQuery)}"
+          />
+        </div>
+      </div>
+
+      <!-- Main Tab Navigation -->
+      <div class="bg-card border border-border rounded-lg overflow-hidden">
+        <div class="flex border-b border-border">
+          <button class="help-main-tab flex-1 px-6 py-3 text-sm font-medium transition-colors" data-tab="cli">
+            ${ht('help.tab.cli')}
+          </button>
+          <button class="help-main-tab flex-1 px-6 py-3 text-sm font-medium transition-colors" data-tab="memory">
+            ${ht('help.tab.memory')}
+          </button>
+          <button class="help-main-tab flex-1 px-6 py-3 text-sm font-medium transition-colors" data-tab="workflow">
+            ${ht('help.tab.workflow')}
+          </button>
+          <button class="help-main-tab flex-1 px-6 py-3 text-sm font-medium transition-colors" data-tab="task">
+            ${ht('help.tab.task')}
+          </button>
+          <button class="help-main-tab flex-1 px-6 py-3 text-sm font-medium transition-colors" data-tab="diagrams">
+            <i data-lucide="git-branch" class="w-4 h-4 inline-block mr-1"></i>
+            ${ht('help.tab.diagrams')}
+          </button>
+          <button class="help-main-tab flex-1 px-6 py-3 text-sm font-medium transition-colors" data-tab="codexlens">
+            <i data-lucide="zap" class="w-4 h-4 inline-block mr-1"></i>
+            ${ht('help.tab.codexlens')}
+          </button>
+        </div>
+
+        <!-- Tab Content Container -->
+        <div id="helpTabContent" class="p-6">
+          <!-- Content will be dynamically rendered -->
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+// ========== Event Handlers ==========
+function initializeHelpEventHandlers() {
+  // Tab switching
+  var tabs = document.querySelectorAll('.help-main-tab');
+  tabs.forEach(function(tab) {
+    tab.addEventListener('click', function() {
+      var tabName = this.dataset.tab;
+      switchHelpTab(tabName);
+    });
+  });
+
+  // Update active tab styles
+  updateActiveTab(activeHelpTab);
+
+  // Search input with debounce
+  var searchInput = document.getElementById('helpSearchInput');
+  if (searchInput) {
+    searchInput.addEventListener('input', function(e) {
+      clearTimeout(helpSearchTimeout);
+      helpSearchTimeout = setTimeout(function() {
+        helpSearchQuery = e.target.value;
+        performHelpSearch();
+      }, 300);
+    });
+  }
+}
+
+function switchHelpTab(tabName) {
+  activeHelpTab = tabName;
+  updateActiveTab(tabName);
+
+  if (tabName === 'diagrams') {
+    renderWorkflowDiagrams();
+  } else if (tabName === 'codexlens') {
+    renderCodexLensQuickStart();
+  } else {
+    renderCommandsTab(tabName);
+  }
+}
+
+function updateActiveTab(activeTab) {
+  var tabs = document.querySelectorAll('.help-main-tab');
+  tabs.forEach(function(tab) {
+    if (tab.dataset.tab === activeTab) {
+      tab.classList.add('bg-primary', 'text-primary-foreground');
+      tab.classList.remove('bg-transparent', 'text-muted-foreground', 'hover:bg-muted');
+    } else {
+      tab.classList.remove('bg-primary', 'text-primary-foreground');
+      tab.classList.add('bg-transparent', 'text-muted-foreground', 'hover:bg-muted');
+    }
+  });
+}
+
+// ========== Command Rendering ==========
+function renderCommandsTab(category) {
+  var container = document.getElementById('helpTabContent');
+  if (!container) return;
+
+  var categoryData = helpData.grouped[category];
+
+  if (!categoryData) {
+    container.innerHTML = `
+      <div class="text-center py-8 text-muted-foreground">
+        <i data-lucide="inbox" class="w-12 h-12 mx-auto mb-2"></i>
+        <p>No commands found for this category</p>
+      </div>
+    `;
+    if (typeof lucide !== 'undefined') lucide.createIcons();
+    return;
+  }
+
+  var filteredCommands = helpSearchQuery
+    ? filterCommandsBySearch(categoryData.commands, helpSearchQuery)
+    : categoryData.commands;
+
+  var html = '';
+
+  // Show search results count
+  if (helpSearchQuery) {
+    html += `
+      <div class="mb-4 p-3 bg-muted rounded-lg text-sm text-muted-foreground">
+        Found ${filteredCommands.length} commands matching "${escapeHtml(helpSearchQuery)}"
+      </div>
+    `;
+  }
+
+  // Render direct commands
+  if (filteredCommands.length > 0) {
+    html += '<div class="space-y-3">';
+    filteredCommands.forEach(function(cmd) {
+      html += renderCommandCard(cmd);
+    });
+    html += '</div>';
+  }
+
+  // Render subcategories as accordions
+  var subcategories = categoryData.subcategories || {};
+  var subcategoryKeys = Object.keys(subcategories);
+
+  if (subcategoryKeys.length > 0) {
+    html += '<div class="mt-6 space-y-3">';
+    subcategoryKeys.forEach(function(subcat) {
+      var subcatCommands = helpSearchQuery
+        ? filterCommandsBySearch(subcategories[subcat], helpSearchQuery)
+        : subcategories[subcat];
+
+      if (subcatCommands.length > 0) {
+        html += renderSubcategoryAccordion(subcat, subcatCommands);
+      }
+    });
+    html += '</div>';
+  }
+
+  if (filteredCommands.length === 0 && subcategoryKeys.length === 0) {
+    html = `
+      <div class="text-center py-8 text-muted-foreground">
+        <i data-lucide="search-x" class="w-12 h-12 mx-auto mb-2"></i>
+        <p>No commands found matching your search</p>
+      </div>
+    `;
+  }
+
+  container.innerHTML = html;
+  if (typeof lucide !== 'undefined') lucide.createIcons();
+
+  // Initialize accordion handlers
+  initializeAccordions();
+}
+
+function renderCommandCard(cmd) {
+  var difficultyColor = {
+    'Beginner': 'bg-success-light text-success',
+    'Intermediate': 'bg-warning-light text-warning',
+    'Advanced': 'bg-error-light text-error'
+  }[cmd.difficulty] || 'bg-muted text-muted-foreground';
+
+  return `
+    <div class="bg-background border border-border rounded-lg p-4 hover:border-primary transition-colors">
+      <div class="flex items-start justify-between mb-2">
+        <div class="flex-1">
+          <div class="flex items-center gap-2 mb-1">
+            <code class="text-sm font-mono text-primary font-semibold">${escapeHtml(cmd.command)}</code>
+            <span class="text-xs px-2 py-0.5 rounded ${difficultyColor}">${escapeHtml(cmd.difficulty)}</span>
+          </div>
+          <p class="text-sm text-muted-foreground">${escapeHtml(cmd.description)}</p>
+        </div>
+      </div>
+      ${cmd.arguments ? `
+        <div class="mt-2 text-xs">
+          <span class="text-muted-foreground">Arguments:</span>
+          <code class="ml-2 text-foreground">${escapeHtml(cmd.arguments)}</code>
+        </div>
+      ` : ''}
+    </div>
+  `;
+}
+
+function renderSubcategoryAccordion(subcatName, commands) {
+  var accordionId = 'accordion-' + subcatName.replace(/\s+/g, '-').toLowerCase();
+
+  return `
+    <div class="border border-border rounded-lg overflow-hidden">
+      <button
+        class="accordion-header w-full px-4 py-3 bg-muted hover:bg-muted/80 text-left flex items-center justify-between transition-colors"
+        data-accordion="${accordionId}"
+      >
+        <div class="flex items-center gap-2">
+          <i data-lucide="chevron-right" class="accordion-icon w-4 h-4 transition-transform"></i>
+          <span class="font-medium text-foreground">${escapeHtml(subcatName)}</span>
+          <span class="text-xs text-muted-foreground ml-2">(${commands.length} commands)</span>
+        </div>
+      </button>
+      <div class="accordion-content hidden">
+        <div class="p-4 space-y-3 bg-card">
+          ${commands.map(cmd => renderCommandCard(cmd)).join('')}
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+function initializeAccordions() {
+  var headers = document.querySelectorAll('.accordion-header');
+  headers.forEach(function(header) {
+    header.addEventListener('click', function() {
+      var content = this.nextElementSibling;
+      var icon = this.querySelector('.accordion-icon');
+
+      if (content.classList.contains('hidden')) {
+        content.classList.remove('hidden');
+        icon.style.transform = 'rotate(90deg)';
+      } else {
+        content.classList.add('hidden');
+        icon.style.transform = 'rotate(0deg)';
+      }
+    });
+  });
+}
+
+// ========== Search Functions ==========
+function filterCommandsBySearch(commands, query) {
+  if (!query) return commands;
+
+  var lowerQuery = query.toLowerCase();
+  return commands.filter(function(cmd) {
+    return (cmd.name && cmd.name.toLowerCase().includes(lowerQuery)) ||
+           (cmd.command && cmd.command.toLowerCase().includes(lowerQuery)) ||
+           (cmd.description && cmd.description.toLowerCase().includes(lowerQuery)) ||
+           (cmd.category && cmd.category.toLowerCase().includes(lowerQuery));
+  });
+}
+
+async function performHelpSearch() {
+  // Reload data with search query
+  try {
+    var url = '/api/help/commands' + (helpSearchQuery ? '?q=' + encodeURIComponent(helpSearchQuery) : '');
+    var resp = await fetch(url);
+    if (resp.ok) {
+      var data = await resp.json();
+      helpData.commands = data.commands || [];
+      helpData.grouped = data.grouped || {};
+    }
+  } catch (err) {
+    console.error('Search failed:', err);
+  }
+
+  // Re-render current tab
+  if (activeHelpTab !== 'diagrams' && activeHelpTab !== 'codexlens') {
+    renderCommandsTab(activeHelpTab);
+  }
+}
+
+// ========== Workflow Diagrams ==========
+function renderWorkflowDiagrams() {
+  var container = document.getElementById('helpTabContent');
+  if (!container) return;
+
+  container.innerHTML = `
+    <div class="workflow-diagrams-section">
+      <div class="mb-4">
+        <h3 class="text-lg font-semibold text-foreground mb-3">${ht('help.diagrams.title')}</h3>
+        <div class="flex gap-2 flex-wrap">
+          <button class="workflow-diagram-btn px-4 py-2 rounded-lg text-sm font-medium transition-colors" data-workflow="decision">
+            ${ht('help.diagrams.decision')}
+          </button>
+          <button class="workflow-diagram-btn px-4 py-2 rounded-lg text-sm font-medium transition-colors" data-workflow="brainstorm">
+            ${ht('help.diagrams.brainstorm')}
+          </button>
+          <button class="workflow-diagram-btn px-4 py-2 rounded-lg text-sm font-medium transition-colors" data-workflow="cli-resume">
+            ${ht('help.diagrams.cliResume')}
+          </button>
+          <button class="workflow-diagram-btn px-4 py-2 rounded-lg text-sm font-medium transition-colors" data-workflow="bug-fix">
+            ${ht('help.diagrams.bugFix')}
+          </button>
+          <button class="workflow-diagram-btn px-4 py-2 rounded-lg text-sm font-medium transition-colors" data-workflow="lite">
+            ${ht('help.diagrams.lite')}
+          </button>
+          <button class="workflow-diagram-btn px-4 py-2 rounded-lg text-sm font-medium transition-colors" data-workflow="plan-full">
+            ${ht('help.diagrams.planFull')}
+          </button>
+          <button class="workflow-diagram-btn px-4 py-2 rounded-lg text-sm font-medium transition-colors" data-workflow="tdd">
+            ${ht('help.diagrams.tdd')}
+          </button>
+        </div>
+      </div>
+
+      <!-- Cytoscape Container -->
+      <div id="cytoscapeContainer" class="bg-background border border-border rounded-lg" style="height: 600px; min-height: 500px;"></div>
+
+      <!-- Diagram Controls -->
+      <div class="mt-4 flex gap-2">
+        <button id="fitDiagramBtn" class="px-3 py-2 bg-muted hover:bg-muted/80 rounded-lg text-sm flex items-center gap-2">
+          <i data-lucide="maximize-2" class="w-4 h-4"></i>
+          ${ht('help.diagrams.fit')}
+        </button>
+        <button id="zoomInBtn" class="px-3 py-2 bg-muted hover:bg-muted/80 rounded-lg text-sm flex items-center gap-2">
+          <i data-lucide="zoom-in" class="w-4 h-4"></i>
+          ${ht('help.diagrams.zoomIn')}
+        </button>
+        <button id="zoomOutBtn" class="px-3 py-2 bg-muted hover:bg-muted/80 rounded-lg text-sm flex items-center gap-2">
+          <i data-lucide="zoom-out" class="w-4 h-4"></i>
+          ${ht('help.diagrams.zoomOut')}
+        </button>
+      </div>
+
+      <!-- Legend -->
+      <div class="mt-4 p-4 bg-muted rounded-lg">
+        <h4 class="text-sm font-semibold text-foreground mb-2">${ht('help.diagrams.legend')}</h4>
+        <div class="flex gap-4 flex-wrap text-xs">
+          <div class="flex items-center gap-2">
+            <div class="w-3 h-3 rounded-full bg-primary"></div>
+            <span>${ht('help.diagrams.legend.prerequisites')}</span>
+          </div>
+          <div class="flex items-center gap-2">
+            <div class="w-3 h-3 rounded-full bg-success"></div>
+            <span>${ht('help.diagrams.legend.nextSteps')}</span>
+          </div>
+          <div class="flex items-center gap-2">
+            <div class="w-3 h-3 rounded-full bg-warning"></div>
+            <span>${ht('help.diagrams.legend.alternatives')}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+
+  if (typeof lucide !== 'undefined') lucide.createIcons();
+
+  // Initialize workflow diagram buttons
+  var diagramBtns = document.querySelectorAll('.workflow-diagram-btn');
+  diagramBtns.forEach(function(btn) {
+    btn.addEventListener('click', function() {
+      activeWorkflowDiagram = this.dataset.workflow;
+      updateActiveWorkflowBtn(activeWorkflowDiagram);
+      initializeCytoscapeDiagram(activeWorkflowDiagram);
+    });
+  });
+
+  // Initialize control buttons
+  var fitBtn = document.getElementById('fitDiagramBtn');
+  if (fitBtn) {
+    fitBtn.addEventListener('click', function() {
+      if (cytoscapeInstance) cytoscapeInstance.fit();
+    });
+  }
+
+  var zoomInBtn = document.getElementById('zoomInBtn');
+  if (zoomInBtn) {
+    zoomInBtn.addEventListener('click', function() {
+      if (cytoscapeInstance) cytoscapeInstance.zoom(cytoscapeInstance.zoom() * 1.2);
+    });
+  }
+
+  var zoomOutBtn = document.getElementById('zoomOutBtn');
+  if (zoomOutBtn) {
+    zoomOutBtn.addEventListener('click', function() {
+      if (cytoscapeInstance) cytoscapeInstance.zoom(cytoscapeInstance.zoom() * 0.8);
+    });
+  }
+
+  // Update active button
+  updateActiveWorkflowBtn(activeWorkflowDiagram);
+
+  // Initialize Cytoscape diagram
+  setTimeout(function() {
+    initializeCytoscapeDiagram(activeWorkflowDiagram);
+  }, 100);
+}
+
+function updateActiveWorkflowBtn(workflow) {
+  var btns = document.querySelectorAll('.workflow-diagram-btn');
+  btns.forEach(function(btn) {
+    if (btn.dataset.workflow === workflow) {
+      btn.classList.add('bg-primary', 'text-primary-foreground');
+      btn.classList.remove('bg-muted', 'text-muted-foreground');
+    } else {
+      btn.classList.remove('bg-primary', 'text-primary-foreground');
+      btn.classList.add('bg-muted', 'text-muted-foreground');
+    }
+  });
+}
+
+function initializeCytoscapeDiagram(workflow) {
+  var container = document.getElementById('cytoscapeContainer');
+  if (!container) return;
+
+  // Destroy previous instance
+  if (cytoscapeInstance) {
+    cytoscapeInstance.destroy();
+    cytoscapeInstance = null;
+  }
+
+  // Get workflow data
+  var graphData = getWorkflowGraphData(workflow);
+
+  // Check if cytoscape is available
+  if (typeof cytoscape === 'undefined') {
+    container.innerHTML = '<div class="flex items-center justify-center h-full text-muted-foreground">' + ht('help.diagrams.notLoaded') + '</div>';
+    return;
+  }
+
+  // Get computed CSS variable values
+  var rootStyles = getComputedStyle(document.documentElement);
+  var primaryColor = rootStyles.getPropertyValue('--primary').trim();
+  var foregroundColor = rootStyles.getPropertyValue('--foreground').trim();
+  var mutedColor = rootStyles.getPropertyValue('--muted-foreground').trim();
+
+  // Convert HSL values to usable format
+  var primaryHsl = primaryColor ? 'hsl(' + primaryColor + ')' : '#3B82F6';
+  var foregroundHsl = foregroundColor ? 'hsl(' + foregroundColor + ')' : '#1F2937';
+  var mutedHsl = mutedColor ? 'hsl(' + mutedColor + ')' : '#6B7280';
+
+  // Initialize Cytoscape
+  cytoscapeInstance = cytoscape({
+    container: container,
+    elements: graphData,
+    style: [
+      {
+        selector: 'node',
+        style: {
+          'shape': 'roundrectangle',
+          'background-color': primaryHsl,
+          'background-opacity': 0.9,
+          'border-width': 2,
+          'border-color': primaryHsl,
+          'border-opacity': 1,
+          'label': 'data(label)',
+          'color': '#FFFFFF',
+          'text-valign': 'center',
+          'text-halign': 'center',
+          'font-size': '14px',
+          'font-weight': '600',
+          'width': '140px',
+          'height': '60px',
+          'text-wrap': 'wrap',
+          'text-max-width': '130px',
+          'padding': '8px',
+          'shadow-blur': 10,
+          'shadow-color': '#000000',
+          'shadow-opacity': 0.2,
+          'shadow-offset-x': 0,
+          'shadow-offset-y': 2
+        }
+      },
+      {
+        selector: 'edge',
+        style: {
+          'width': 3,
+          'line-color': mutedHsl,
+          'target-arrow-color': mutedHsl,
+          'target-arrow-shape': 'triangle',
+          'target-arrow-fill': 'filled',
+          'arrow-scale': 1.5,
+          'curve-style': 'bezier',
+          'label': 'data(label)',
+          'font-size': '12px',
+          'font-weight': '500',
+          'color': foregroundHsl,
+          'text-background-color': '#FFFFFF',
+          'text-background-opacity': 0.9,
+          'text-background-padding': '4px',
+          'text-background-shape': 'roundrectangle',
+          'text-border-width': 1,
+          'text-border-color': mutedHsl,
+          'text-border-opacity': 0.3
+        }
+      },
+      {
+        selector: 'edge.prerequisite',
+        style: {
+          'line-color': primaryHsl,
+          'target-arrow-color': primaryHsl,
+          'width': 3
+        }
+      },
+      {
+        selector: 'edge.next-step',
+        style: {
+          'line-color': '#10B981',
+          'target-arrow-color': '#10B981',
+          'width': 3,
+          'line-style': 'solid'
+        }
+      },
+      {
+        selector: 'edge.alternative',
+        style: {
+          'line-color': '#F59E0B',
+          'target-arrow-color': '#F59E0B',
+          'line-style': 'dashed',
+          'line-dash-pattern': [10, 5],
+          'width': 2.5
+        }
+      }
+    ],
+    layout: {
+      name: 'breadthfirst',
+      directed: true,
+      padding: 80,
+      spacingFactor: 2,
+      avoidOverlap: true,
+      nodeDimensionsIncludeLabels: true,
+      animate: false
+    }
+  });
+
+  // Add click handler for nodes
+  cytoscapeInstance.on('tap', 'node', function(evt) {
+    var node = evt.target;
+    var commandName = node.data('id');
+    showCommandTooltip(commandName, node);
+  });
+
+  // Fit to viewport
+  cytoscapeInstance.fit();
+}
+
+function getWorkflowGraphData(workflow) {
+  var workflows = {
+    'decision': {
+      nodes: [
+        { data: { id: 'start', label: ht('help.workflows.decision.start') } },
+        { data: { id: 'cli-analyze', label: ht('help.workflows.decision.cliAnalyze') } },
+        { data: { id: 'understand', label: ht('help.workflows.decision.understand') } },
+        { data: { id: 'simple', label: ht('help.workflows.decision.simple') } },
+        { data: { id: 'medium', label: ht('help.workflows.decision.medium') } },
+        { data: { id: 'complex', label: ht('help.workflows.decision.complex') } },
+        { data: { id: 'claude-exec', label: ht('help.workflows.decision.claudeExec') } },
+        { data: { id: 'cli-exec', label: ht('help.workflows.decision.cliExec') } },
+        { data: { id: 'claude-plan', label: ht('help.workflows.decision.claudePlan') } },
+        { data: { id: 'lite-plan', label: '/workflow:lite-plan' } },
+        { data: { id: 'full-plan', label: '/workflow:plan' } }
+      ],
+      edges: [
+        { data: { source: 'start', target: 'cli-analyze' }, classes: 'next-step' },
+        { data: { source: 'cli-analyze', target: 'understand' }, classes: 'next-step' },
+        { data: { source: 'understand', target: 'simple' }, classes: 'alternative' },
+        { data: { source: 'understand', target: 'medium' }, classes: 'alternative' },
+        { data: { source: 'understand', target: 'complex' }, classes: 'alternative' },
+        { data: { source: 'simple', target: 'claude-exec', label: '优先' }, classes: 'next-step' },
+        { data: { source: 'simple', target: 'cli-exec' }, classes: 'alternative' },
+        { data: { source: 'medium', target: 'claude-plan' }, classes: 'next-step' },
+        { data: { source: 'medium', target: 'lite-plan' }, classes: 'alternative' },
+        { data: { source: 'complex', target: 'full-plan' }, classes: 'next-step' }
+      ]
+    },
+    'brainstorm': {
+      nodes: [
+        { data: { id: 'start', label: ht('help.workflows.brainstorm.start') } },
+        { data: { id: 'question', label: ht('help.workflows.brainstorm.question') } },
+        { data: { id: 'product', label: ht('help.workflows.brainstorm.product') } },
+        { data: { id: 'design', label: ht('help.workflows.brainstorm.design') } },
+        { data: { id: 'brainstorm-product', label: '/workflow:brainstorm:auto-parallel' } },
+        { data: { id: 'brainstorm-design', label: '/workflow:brainstorm:auto-parallel' } },
+        { data: { id: 'next', label: ht('help.workflows.brainstorm.next') } }
+      ],
+      edges: [
+        { data: { source: 'start', target: 'question' }, classes: 'next-step' },
+        { data: { source: 'question', target: 'product' }, classes: 'alternative' },
+        { data: { source: 'question', target: 'design' }, classes: 'alternative' },
+        { data: { source: 'product', target: 'brainstorm-product' }, classes: 'next-step' },
+        { data: { source: 'design', target: 'brainstorm-design' }, classes: 'next-step' },
+        { data: { source: 'brainstorm-product', target: 'next' }, classes: 'next-step' },
+        { data: { source: 'brainstorm-design', target: 'next' }, classes: 'next-step' }
+      ]
+    },
+    'cli-resume': {
+      nodes: [
+        { data: { id: 'first-exec', label: ht('help.workflows.cliResume.firstExec') } },
+        { data: { id: 'save-context', label: ht('help.workflows.cliResume.saveContext') } },
+        { data: { id: 'resume-cmd', label: ht('help.workflows.cliResume.resumeCmd') } },
+        { data: { id: 'merge', label: ht('help.workflows.cliResume.merge') } },
+        { data: { id: 'continue', label: ht('help.workflows.cliResume.continue') } },
+        { data: { id: 'split-output', label: ht('help.workflows.cliResume.splitOutput') } },
+        { data: { id: 'complete', label: ht('help.workflows.cliResume.complete') } }
+      ],
+      edges: [
+        { data: { source: 'first-exec', target: 'save-context' }, classes: 'next-step' },
+        { data: { source: 'save-context', target: 'resume-cmd' }, classes: 'next-step' },
+        { data: { source: 'resume-cmd', target: 'merge' }, classes: 'next-step' },
+        { data: { source: 'merge', target: 'continue' }, classes: 'next-step' },
+        { data: { source: 'continue', target: 'split-output' }, classes: 'next-step' },
+        { data: { source: 'split-output', target: 'complete' }, classes: 'next-step' }
+      ]
+    },
+    'bug-fix': {
+      nodes: [
+        { data: { id: 'start', label: ht('help.workflows.bugFix.start') } },
+        { data: { id: 'cli-analyze', label: ht('help.workflows.bugFix.cliAnalyze') } },
+        { data: { id: 'lite-fix', label: '/workflow:lite-fix' } },
+        { data: { id: 'diagnosis', label: ht('help.workflows.bugFix.diagnosis') } },
+        { data: { id: 'impact', label: ht('help.workflows.bugFix.impact') } },
+        { data: { id: 'strategy', label: ht('help.workflows.bugFix.strategy') } },
+        { data: { id: 'execute', label: ht('help.workflows.bugFix.execute') } },
+        { data: { id: 'complete', label: ht('help.workflows.bugFix.complete') } }
+      ],
+      edges: [
+        { data: { source: 'start', target: 'cli-analyze' }, classes: 'next-step' },
+        { data: { source: 'cli-analyze', target: 'lite-fix' }, classes: 'next-step' },
+        { data: { source: 'lite-fix', target: 'diagnosis' }, classes: 'next-step' },
+        { data: { source: 'diagnosis', target: 'impact' }, classes: 'next-step' },
+        { data: { source: 'impact', target: 'strategy' }, classes: 'next-step' },
+        { data: { source: 'strategy', target: 'execute' }, classes: 'next-step' },
+        { data: { source: 'execute', target: 'complete' }, classes: 'next-step' }
+      ]
+    },
+    'plan-full': {
+      nodes: [
+        { data: { id: 'start', label: ht('help.workflows.planFull.start') } },
+        { data: { id: 'cli-analyze', label: ht('help.workflows.planFull.cliAnalyze') } },
+        { data: { id: 'plan', label: '/workflow:plan' } },
+        { data: { id: 'verify', label: '/workflow:action-plan-verify' } },
+        { data: { id: 'execute', label: '/workflow:execute' } },
+        { data: { id: 'test', label: '/workflow:test-gen' } },
+        { data: { id: 'review', label: '/workflow:review' } },
+        { data: { id: 'complete', label: '/workflow:session:complete' } }
+      ],
+      edges: [
+        { data: { source: 'start', target: 'cli-analyze' }, classes: 'next-step' },
+        { data: { source: 'cli-analyze', target: 'plan' }, classes: 'next-step' },
+        { data: { source: 'plan', target: 'verify' }, classes: 'next-step' },
+        { data: { source: 'verify', target: 'execute' }, classes: 'next-step' },
+        { data: { source: 'execute', target: 'test' }, classes: 'next-step' },
+        { data: { source: 'test', target: 'review' }, classes: 'next-step' },
+        { data: { source: 'review', target: 'complete' }, classes: 'next-step' }
+      ]
+    },
+    'lite': {
+      nodes: [
+        { data: { id: 'start', label: ht('help.workflows.lite.start') } },
+        { data: { id: 'lite-plan', label: '/workflow:lite-plan' } },
+        { data: { id: 'confirm', label: ht('help.workflows.lite.confirm') } },
+        { data: { id: 'lite-execute', label: '/workflow:lite-execute' } },
+        { data: { id: 'complete', label: ht('help.workflows.lite.complete') } }
+      ],
+      edges: [
+        { data: { source: 'start', target: 'lite-plan' }, classes: 'next-step' },
+        { data: { source: 'lite-plan', target: 'confirm' }, classes: 'next-step' },
+        { data: { source: 'confirm', target: 'lite-execute' }, classes: 'next-step' },
+        { data: { source: 'lite-execute', target: 'complete' }, classes: 'next-step' }
+      ]
+    },
+    'tdd': {
+      nodes: [
+        { data: { id: 'start', label: ht('help.workflows.tdd.start') } },
+        { data: { id: 'tdd-plan', label: '/workflow:tdd-plan' } },
+        { data: { id: 'red', label: ht('help.workflows.tdd.red') } },
+        { data: { id: 'green', label: ht('help.workflows.tdd.green') } },
+        { data: { id: 'refactor', label: ht('help.workflows.tdd.refactor') } },
+        { data: { id: 'verify', label: '/workflow:tdd-verify' } },
+        { data: { id: 'complete', label: ht('help.workflows.tdd.complete') } }
+      ],
+      edges: [
+        { data: { source: 'start', target: 'tdd-plan' }, classes: 'next-step' },
+        { data: { source: 'tdd-plan', target: 'red' }, classes: 'next-step' },
+        { data: { source: 'red', target: 'green' }, classes: 'next-step' },
+        { data: { source: 'green', target: 'refactor' }, classes: 'next-step' },
+        { data: { source: 'refactor', target: 'verify' }, classes: 'next-step' },
+        { data: { source: 'verify', target: 'complete' }, classes: 'next-step' }
+      ]
+    }
+  };
+
+  var workflowData = workflows[workflow] || workflows['decision'];
+  console.log('Building workflow diagram for:', workflow);
+  console.log('Generated graph:', workflowData.nodes.length, 'nodes,', workflowData.edges.length, 'edges');
+
+  return workflowData.nodes.concat(workflowData.edges);
+}
+
+function showCommandTooltip(commandName, node) {
+  // Find command in helpData
+  var command = helpData.commands.find(function(cmd) {
+    return cmd.command === '/' + commandName;
+  });
+
+  if (command) {
+    alert(command.command + '\n\n' + command.description);
+  }
+}
+
+// ========== CodexLens Quick Start ==========
+function renderCodexLensQuickStart() {
+  var container = document.getElementById('helpTabContent');
+  if (!container) return;
+
+  var data = helpData.codexlens;
+
+  var html = `
+    <div class="codexlens-quickstart">
+      <div class="mb-6">
+        <h3 class="text-xl font-bold text-foreground mb-2">${ht('help.codexlens.title')}</h3>
+        <p class="text-muted-foreground">${ht('help.codexlens.subtitle')}</p>
+      </div>
+
+      ${data.sections ? data.sections.map(function(section) {
+        return `
+          <div class="mb-8">
+            <h4 class="text-lg font-semibold text-foreground mb-4">${escapeHtml(section.title)}</h4>
+            <div class="space-y-4">
+              ${section.items.map(function(item) {
+                return `
+                  <div class="bg-background border border-border rounded-lg p-4">
+                    ${item.name ? `<h5 class="font-medium text-foreground mb-2">${escapeHtml(item.name)}</h5>` : ''}
+                    <p class="text-sm text-muted-foreground mb-2">${escapeHtml(item.description)}</p>
+                    ${item.command ? `
+                      <div class="bg-muted rounded p-3 mt-2">
+                        <code class="text-xs font-mono text-foreground">${escapeHtml(item.command)}</code>
+                      </div>
+                    ` : ''}
+                  </div>
+                `;
+              }).join('')}
+            </div>
+          </div>
+        `;
+      }).join('') : ''}
+
+      ${data.links && data.links.length > 0 ? `
+        <div class="mt-8 p-4 bg-muted rounded-lg">
+          <h4 class="text-sm font-semibold text-foreground mb-3">Additional Resources</h4>
+          <div class="space-y-2">
+            ${data.links.map(function(link) {
+              return `
+                <a href="${escapeHtml(link.url)}" class="block text-sm text-primary hover:underline">
+                  <i data-lucide="external-link" class="w-3 h-3 inline-block mr-1"></i>
+                  ${escapeHtml(link.text)}
+                </a>
+              `;
+            }).join('')}
+          </div>
+        </div>
+      ` : ''}
+    </div>
+  `;
+
+  container.innerHTML = html;
+  if (typeof lucide !== 'undefined') lucide.createIcons();
+}