mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-11 02:33:51 +08:00
159dfd179e
- Updated all references from `/workflow:action-plan-verify` to `/workflow:plan-verify` across various documentation and command files. - Introduced a new command file for `/workflow:plan-verify` that performs read-only verification analysis on planning artifacts. - Adjusted command relationships and help documentation to reflect the new command structure. - Ensured consistency in command usage throughout the workflow guide and getting started documentation.
857 lines
32 KiB
JavaScript
857 lines
32 KiB
JavaScript
// ==========================================
|
|
// 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: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();
|
|
}
|