claude-code-templates 1.21.13 → 1.22.0

package/docs/js/workflows-events.js

@@ -1,1146 +0,0 @@
-// Workflows Events - Handles events specific to workflows.html
-
-class WorkflowManager {
-    constructor() {
-        this.workflowState = {
-            agents: [], // New hierarchical structure: [{agent: {...}, subItems: []}]
-            steps: [], // Legacy support
-            properties: {
-                name: '',
-                description: '',
-                tags: [],
-                prompt: ''
-            },
-            components: {
-                agents: [],
-                commands: [],
-                mcps: []
-            }
-        };
-    }
-
-    async init() {
-        try {
-            await this.loadComponents();
-            this.setupEventListeners();
-            this.initializeDragAndDrop();
-            this.renderComponentsList();
-            console.log('Workflow Builder initialized successfully');
-        } catch (error) {
-            console.error('Error initializing Workflow Builder:', error);
-            this.showError('Failed to load components. Please refresh the page.');
-        }
-    }
-
-    async loadComponents() {
-        this.workflowState.components = await window.dataLoader.loadComponents();
-    }
-
-    setupEventListeners() {
-        // Search functionality
-        const searchInput = document.getElementById('componentSearch');
-        if (searchInput) {
-            searchInput.addEventListener('input', (e) => this.handleComponentSearch(e));
-        }
-
-        // Canvas actions
-        const previewBtn = document.getElementById('previewWorkflow');
-        if (previewBtn) {
-            previewBtn.addEventListener('click', () => this.previewWorkflow());
-        }
-
-        const clearBtn = document.getElementById('clearCanvas');
-        if (clearBtn) {
-            clearBtn.addEventListener('click', () => this.clearWorkflow());
-        }
-
-        const generateBtn = document.getElementById('generateWorkflow');
-        if (generateBtn) {
-            generateBtn.addEventListener('click', () => this.openPropertiesModal());
-        }
-
-        // Properties modal
-        const closePropertiesBtn = document.getElementById('closePropertiesModal');
-        if (closePropertiesBtn) {
-            closePropertiesBtn.addEventListener('click', () => this.closePropertiesModal());
-        }
-
-        const savePropertiesBtn = document.getElementById('saveWorkflowProperties');
-        if (savePropertiesBtn) {
-            savePropertiesBtn.addEventListener('click', () => this.saveAndGenerateWorkflow());
-        }
-
-        // Category accordion toggle
-        document.querySelectorAll('.category-card-header').forEach(header => {
-            header.addEventListener('click', () => {
-                header.parentElement.classList.toggle('expanded');
-            });
-        });
-
-        // Sub-folders toggle
-        document.addEventListener('click', (event) => {
-            const header = event.target.closest('.tree-node-header');
-            if (header) {
-                const children = header.nextElementSibling;
-                if (children && children.classList.contains('tree-children')) {
-                    header.classList.toggle('expanded');
-                    children.classList.toggle('expanded');
-                }
-            }
-        });
-    }
-
-    renderComponentsList() {
-        ['agents', 'commands', 'mcps'].forEach(type => {
-            this.renderComponentsListByType(type, this.workflowState.components[type]);
-        });
-    }
-
-    renderComponentsListByType(type, components) {
-        const container = document.getElementById(`${type}-tree`);
-        const countElement = document.getElementById(`${type}-count`);
-        
-        if (!container || !countElement) return;
-        
-        countElement.textContent = components.length;
-        container.innerHTML = '';
-        
-        const groupedComponents = components.reduce((acc, component) => {
-            const category = component.category === 'root' ? 'general' : component.category;
-            if (!acc[category]) acc[category] = [];
-            acc[category].push(component);
-            return acc;
-        }, {});
-        
-        Object.entries(groupedComponents).forEach(([category, categoryComponents]) => {
-            const folderElement = this.createTreeFolder(category, categoryComponents, type);
-            container.appendChild(folderElement);
-        });
-    }
-
-    createTreeFolder(category, components, type) {
-        const folderElement = document.createElement('div');
-        folderElement.className = 'tree-node';
-        const folderId = `${type}-${category.replace(/[^a-z0-9]/gi, '_').toLowerCase()}`;
-        
-        folderElement.innerHTML = `
-            <div class="tree-node-header" data-folder="${folderId}">
-                <span class="tree-icon folder-icon">📁</span>
-                <span class="tree-label">${category}</span>
-                <span class="tree-count">${components.length}</span>
-                <span class="tree-arrow">▶</span>
-            </div>
-            <div class="tree-children" id="${folderId}"></div>
-        `;
-        
-        const childrenContainer = folderElement.querySelector('.tree-children');
-        components.forEach(component => {
-            const fileElement = this.createTreeFile(component);
-            childrenContainer.appendChild(fileElement);
-        });
-        
-        return folderElement;
-    }
-
-    createTreeFile(component) {
-        const element = document.createElement('div');
-        element.className = 'tree-file';
-        element.draggable = true;
-        element.dataset.componentType = component.type;
-        element.dataset.componentName = component.name;
-        element.dataset.componentPath = component.path;
-        element.dataset.componentCategory = component.category;
-        
-        const fileIcon = this.getFileIcon(component.type);
-        
-        element.innerHTML = `
-            <div class="tree-file-header">
-                <span class="tree-icon file-icon">${fileIcon}</span>
-                <span class="tree-file-name">${component.name}</span>
-                <div class="tree-file-actions">
-                    <button class="tree-action-btn" title="View Details" onclick="showWorkflowComponentDetails('${component.type}', '${component.name}', '${component.path}', '${component.category}')">ℹ️</button>
-                    <button class="tree-action-btn" title="Add to Workflow" onclick="addComponentFromButton(event)">➕</button>
-                </div>
-            </div>
-        `;
-        
-        return element;
-    }
-
-    getFileIcon(type) {
-        const icons = { 'agent': '📄', 'command': '⚡', 'mcp': '⚙️' };
-        return icons[type] || '📄';
-    }
-
-    initializeDragAndDrop() {
-        const workflowSteps = document.getElementById('workflowSteps');
-        if (!workflowSteps) return;
-
-        document.addEventListener('dragstart', (event) => {
-            if (event.target.closest('.tree-file')) {
-                this.handleDragStart(event);
-            }
-        });
-
-        // Main drop zone
-        workflowSteps.addEventListener('dragover', this.handleDragOver);
-        workflowSteps.addEventListener('drop', (e) => this.handleDrop(e));
-        
-        // Enhanced drag enter/leave for better highlighting
-        workflowSteps.addEventListener('dragenter', (e) => {
-            e.preventDefault();
-            const dropZone = e.target.closest('.drop-zone');
-            const subDropZone = e.target.closest('.sub-item-drop-zone');
-            const addItemBtn = e.target.closest('.add-agent-btn');
-            
-            if (dropZone && !subDropZone) {
-                dropZone.classList.add('drag-over');
-            } else if (subDropZone) {
-                subDropZone.classList.add('drag-over');
-            } else if (addItemBtn) {
-                addItemBtn.classList.add('drag-over');
-            }
-        });
-
-        workflowSteps.addEventListener('dragleave', (e) => {
-            const dropZone = e.target.closest('.drop-zone');
-            const subDropZone = e.target.closest('.sub-item-drop-zone');
-            const addItemBtn = e.target.closest('.add-agent-btn');
-            
-            // Only remove if we're actually leaving the zone
-            if (dropZone && !dropZone.contains(e.relatedTarget)) {
-                dropZone.classList.remove('drag-over');
-            }
-            if (subDropZone && !subDropZone.contains(e.relatedTarget)) {
-                subDropZone.classList.remove('drag-over');
-            }
-            if (addItemBtn && !addItemBtn.contains(e.relatedTarget)) {
-                addItemBtn.classList.remove('drag-over');
-            }
-        });
-
-        // Clean up drag-over class when drag ends
-        document.addEventListener('dragend', () => {
-            document.querySelectorAll('.drag-over').forEach(el => {
-                el.classList.remove('drag-over');
-            });
-        });
-    }
-
-    handleDragStart(event) {
-        const treeFile = event.target.closest('.tree-file');
-        const componentData = { ...treeFile.dataset };
-        event.dataTransfer.setData('application/json', JSON.stringify(componentData));
-        event.dataTransfer.effectAllowed = 'copy';
-    }
-
-    handleDragOver(event) {
-        event.preventDefault();
-        event.dataTransfer.dropEffect = 'copy';
-    }
-
-    handleDrop(event) {
-        event.preventDefault();
-        
-        // Don't handle drops on sub-item drop zones - those are handled by dropOnAgent
-        if (event.target.closest('.sub-item-drop-zone')) {
-            return;
-        }
-        
-        event.target.closest('.drop-zone')?.classList.remove('drag-over');
-        try {
-            const componentData = JSON.parse(event.dataTransfer.getData('application/json'));
-            this.addWorkflowStep(componentData);
-        } catch (error) {
-            console.error('Error handling drop:', error);
-        }
-    }
-
-    addWorkflowStep(componentData, targetAgentId = null) {
-        // Ensure agents array is initialized
-        if (!this.workflowState.agents) {
-            this.workflowState.agents = [];
-        }
-        
-        const step = {
-            id: `step_${Date.now()}`,
-            type: componentData.componentType,
-            name: componentData.componentName,
-            path: componentData.componentPath,
-            category: componentData.componentCategory,
-            description: `Execute ${componentData.componentName}`,
-            icon: this.getComponentIcon(componentData.componentType)
-        };
-        
-        if (step.type === 'agent') {
-            // Add as new agent
-            this.workflowState.agents.push({
-                agent: step,
-                subItems: [],
-                isMainLevel: true
-            });
-        } else if (targetAgentId && (step.type === 'command' || step.type === 'mcp')) {
-            // Add as sub-item to specific agent - DON'T add to main flow
-            const agentIndex = this.workflowState.agents.findIndex(a => a.agent.id === targetAgentId);
-            if (agentIndex !== -1) {
-                this.workflowState.agents[agentIndex].subItems.push(step);
-                // Don't add to steps array - it's a sub-item
-                this.renderWorkflowSteps();
-                this.updateWorkflowStats();
-                return;
-            }
-        } else if (step.type === 'command' || step.type === 'mcp') {
-            // Add command/MCP as main level item (no sub-items)
-            this.workflowState.agents.push({
-                agent: step,
-                subItems: null, // null indicates no sub-items allowed
-                isMainLevel: true
-            });
-        }
-        
-        // Maintain legacy steps array for backwards compatibility (only for main level items)
-        this.workflowState.steps.push(step);
-        
-        this.renderWorkflowSteps();
-        this.updateWorkflowStats();
-    }
-
-    getComponentIcon(type) {
-        const icons = { 'agent': '🤖', 'command': '⚡', 'mcp': '🔌' };
-        return icons[type] || '📦';
-    }
-
-    renderWorkflowSteps() {
-        const container = document.getElementById('workflowSteps');
-        if (!container) return;
-
-        const dropZone = container.querySelector('.drop-zone');
-        const existingAgents = container.querySelectorAll('.workflow-agent');
-        const existingSteps = container.querySelectorAll('.workflow-step');
-        const existingIndicators = container.querySelectorAll('.add-agent-indicator');
-        existingAgents.forEach(agent => agent.remove());
-        existingSteps.forEach(step => step.remove());
-        existingIndicators.forEach(indicator => indicator.remove());
-
-        const agents = this.workflowState.agents || [];
-        if (agents.length > 0) {
-            if (dropZone) dropZone.style.display = 'none';
-            
-            agents.forEach((agentData, index) => {
-                const mainStepNumber = index + 1;
-                const agentElement = document.createElement('div');
-                agentElement.className = 'workflow-agent';
-                agentElement.dataset.agentId = agentData.agent.id;
-                agentElement.dataset.stepNumber = mainStepNumber;
-                
-                // Check if this is a command/MCP in main flow (no sub-items)
-                if (agentData.subItems === null) {
-                    // Simple command/MCP item (no sub-items allowed)
-                    agentElement.innerHTML = `
-                        <div class="step-number">${mainStepNumber}</div>
-                        <div class="agent-header">
-                            <div class="step-icon">${agentData.agent.icon}</div>
-                            <div class="step-content">
-                                <div class="step-name">${agentData.agent.name}</div>
-                                <div class="step-type">${agentData.agent.type}</div>
-                            </div>
-                            <div class="agent-actions">
-                                <button class="agent-action" onclick="showWorkflowComponentDetails('${agentData.agent.type}', '${agentData.agent.name.replace(/'/g, "\\'")}')" title="Details">ℹ️</button>
-                                <button class="agent-action" onclick="removeAgent('${agentData.agent.id}')" title="Remove">🗑️</button>
-                            </div>
-                        </div>
-                    `;
-                } else {
-                    // Agent with potential sub-items
-                    const subItemsHtml = agentData.subItems.map((subItem, subIndex) => `
-                        <div class="sub-item" data-sub-item-id="${subItem.id}">
-                            <div class="step-number">${mainStepNumber}.${subIndex + 1}</div>
-                            <div class="step-icon">${subItem.icon}</div>
-                            <div class="step-content">
-                                <div class="step-name">${subItem.name}</div>
-                                <div class="step-type">${subItem.type}</div>
-                            </div>
-                            <div class="agent-actions">
-                                <button class="sub-item-action" onclick="showWorkflowComponentDetails('${subItem.type}', '${subItem.name.replace(/'/g, "\\'")}')" title="Details">ℹ️</button>
-                                <button class="sub-item-action" onclick="removeSubItem('${agentData.agent.id}', '${subItem.id}')" title="Remove">🗑️</button>
-                            </div>
-                        </div>
-                    `).join('');
-                    
-                    agentElement.innerHTML = `
-                        <div class="step-number">${mainStepNumber}</div>
-                        <div class="agent-header">
-                            <div class="step-icon">${agentData.agent.icon}</div>
-                            <div class="step-content">
-                                <div class="step-name">${agentData.agent.name}</div>
-                                <div class="step-type">${agentData.agent.type}</div>
-                            </div>
-                            <div class="agent-actions">
-                                <button class="agent-action" onclick="showWorkflowComponentDetails('${agentData.agent.type}', '${agentData.agent.name.replace(/'/g, "\\'")}')" title="Details">ℹ️</button>
-                                <button class="agent-action" onclick="removeAgent('${agentData.agent.id}')" title="Remove">🗑️</button>
-                            </div>
-                        </div>
-                        <div class="agent-content">
-                            <div class="agent-sub-items">
-                                ${subItemsHtml}
-                                <div class="sub-item-drop-zone" data-agent-id="${agentData.agent.id}" 
-                                     ondrop="dropOnAgent(event, '${agentData.agent.id}')" 
-                                     ondragover="allowDrop(event)"
-                                     ondragenter="event.preventDefault(); event.target.classList.add('drag-over')"
-                                     ondragleave="if (!event.target.contains(event.relatedTarget)) event.target.classList.remove('drag-over')">
-                                    Drop commands or MCPs here
-                                </div>
-                            </div>
-                        </div>
-                    `;
-                }
-                container.appendChild(agentElement);
-            });
-            
-            // Add one "add item" indicator at the end of all agents
-            const addAgentIndicator = document.createElement('div');
-            addAgentIndicator.className = 'add-agent-indicator';
-            addAgentIndicator.innerHTML = `
-                <div class="add-agent-btn" 
-                     onclick="scrollToDropZone()"
-                     ondrop="dropOnAddItem(event)" 
-                     ondragover="allowDrop(event)">
-                    <svg viewBox="0 0 24 24" fill="currentColor">
-                        <path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M11,7H13V11H17V13H13V17H11V13H7V11H11V7Z"/>
-                    </svg>
-                    Add Next Item
-                </div>
-            `;
-            container.appendChild(addAgentIndicator);
-        } else {
-            if (dropZone) dropZone.style.display = 'flex';
-        }
-    }
-
-    updateWorkflowStats() {
-        const stats = { agents: 0, commands: 0, mcps: 0 };
-        let totalStepsCount = 0;
-        
-        // Count from hierarchical structure
-        const agents = this.workflowState.agents || [];
-        agents.forEach(agentData => {
-            const agentType = agentData.agent.type;
-            if (agentType === 'agent') {
-                stats.agents++;
-            } else if (agentType === 'command') {
-                stats.commands++;
-            } else if (agentType === 'mcp') {
-                stats.mcps++;
-            }
-            totalStepsCount++; // Count main level item
-            
-            // Count sub-items (commands/MCPs inside agents)
-            if (agentData.subItems && agentData.subItems.length > 0) {
-                agentData.subItems.forEach(subItem => {
-                    totalStepsCount++; // Count each sub-item for total
-                    
-                    // Count sub-items in their respective categories
-                    if (subItem.type === 'command') {
-                        stats.commands++;
-                    } else if (subItem.type === 'mcp') {
-                        stats.mcps++;
-                    }
-                });
-            }
-        });
-
-        const agentCount = document.getElementById('agentCount');
-        const commandCount = document.getElementById('commandCount');
-        const mcpCount = document.getElementById('mcpCount');
-        const totalSteps = document.getElementById('totalSteps');
-
-        if (agentCount) agentCount.textContent = stats.agents;
-        if (commandCount) commandCount.textContent = stats.commands;
-        if (mcpCount) mcpCount.textContent = stats.mcps;
-        if (totalSteps) totalSteps.textContent = totalStepsCount;
-    }
-
-    handleComponentSearch(event) {
-        const searchTerm = event.target.value.toLowerCase();
-        document.querySelectorAll('.tree-file').forEach(file => {
-            const match = file.dataset.componentName.toLowerCase().includes(searchTerm);
-            file.style.display = match ? '' : 'none';
-        });
-    }
-
-    clearWorkflow() {
-        if (confirm('Are you sure you want to clear the workflow?')) {
-            this.workflowState.steps = [];
-            this.workflowState.agents = [];
-            this.renderWorkflowSteps();
-            this.updateWorkflowStats();
-        }
-    }
-
-    openPropertiesModal() {
-        const agents = this.workflowState.agents || [];
-        if (agents.length === 0) {
-            this.showError('Add at least one agent to the workflow.');
-            return;
-        }
-        const modal = document.getElementById('propertiesModal');
-        if (modal) modal.style.display = 'block';
-    }
-
-    closePropertiesModal() {
-        const modal = document.getElementById('propertiesModal');
-        if (modal) modal.style.display = 'none';
-    }
-
-    saveAndGenerateWorkflow() {
-        const nameInput = document.getElementById('workflowName');
-        const descInput = document.getElementById('workflowDescription');
-        const tagsInput = document.getElementById('workflowTags');
-        const promptInput = document.getElementById('workflowPrompt');
-
-        if (nameInput) this.workflowState.properties.name = nameInput.value;
-        if (descInput) this.workflowState.properties.description = descInput.value;
-        if (tagsInput) {
-            this.workflowState.properties.tags = tagsInput.value.split(',').map(t => t.trim());
-        }
-        if (promptInput) this.workflowState.properties.prompt = promptInput.value.trim();
-        
-        if (!this.workflowState.properties.name) {
-            this.showError('Workflow name is required.');
-            return;
-        }
-        
-        this.closePropertiesModal();
-        this.generateWorkflow();
-    }
-
-    async generateWorkflow() {
-        try {
-            const workflowCommand = await this.generateWorkflowHash();
-            const yamlContent = this.generateWorkflowYAML();
-            this.showGenerateModal(workflowCommand, yamlContent);
-        } catch (error) {
-            console.error('Error generating workflow:', error);
-            this.showError('Failed to generate workflow.');
-        }
-    }
-
-    async generateWorkflowHash() {
-        // NEW APPROACH: Generate component-based command instead of embedded hash
-        const agents = this.workflowState.steps.filter(step => step.type === 'agent').map(step => step.path.replace(/\.md$/, ''));
-        const commands = this.workflowState.steps.filter(step => step.type === 'command').map(step => step.path.replace(/\.md$/, ''));
-        const mcps = this.workflowState.steps.filter(step => step.type === 'mcp').map(step => step.path.replace(/\.json$/, ''));
-        
-        // Generate YAML and encode it
-        const yamlContent = this.generateWorkflowYAML();
-        const encodedYaml = btoa(unescape(encodeURIComponent(yamlContent)));
-        
-        // Build command components for Method 1 (full command with embedded YAML)
-        const commandParts = [];
-        
-        if (agents.length > 0) {
-            commandParts.push(`--agent ${agents.join(',')}`);
-        }
-        
-        if (commands.length > 0) {
-            commandParts.push(`--command ${commands.join(',')}`);
-        }
-        
-        if (mcps.length > 0) {
-            commandParts.push(`--mcp ${mcps.join(',')}`);
-        }
-        
-        // Add prompt parameter if provided
-        if (this.workflowState.properties.prompt) {
-            commandParts.push(`--prompt "${this.workflowState.properties.prompt}"`);
-        }
-        
-        // Method 1: Full command with embedded YAML
-        const fullCommand = `npx claude-code-templates@latest ${commandParts.join(' ')} --workflow ${encodedYaml}`;
-        
-        // Method 2: Components only command (without embedded YAML) 
-        // Remove prompt from components-only command since YAML isn't included
-        const componentsParts = commandParts.filter(part => !part.startsWith('--prompt'));
-        const componentsOnlyCommand = componentsParts.length > 0 ? 
-            `npx claude-code-templates@latest ${componentsParts.join(' ')}` : 
-            '# No components to install';
-        
-        // Create a short hash for reference
-        const shortHash = CryptoJS.SHA256(fullCommand).toString(CryptoJS.enc.Hex).substring(0, 8);
-        
-        // Store locally for reference
-        localStorage.setItem(`workflow_${shortHash}`, JSON.stringify({
-            fullCommand: fullCommand,
-            componentsCommand: componentsOnlyCommand,
-            yaml: yamlContent,
-            metadata: this.workflowState.properties,
-            timestamp: new Date().toISOString()
-        }));
-        
-        return {
-            fullCommand: fullCommand,
-            componentsCommand: componentsOnlyCommand,
-            yaml: yamlContent
-        };
-    }
-
-    // Simple and reliable string compression with Unicode support
-    compressString(str) {
-        try {
-            // Simple approach: remove redundant whitespace and use efficient encoding
-            let compressed = str
-                // Remove unnecessary whitespace
-                .replace(/\s+/g, ' ')
-                // Remove whitespace around common JSON characters
-                .replace(/\s*([{}[\]:,])\s*/g, '$1')
-                // Remove quotes around simple keys (where safe)
-                .replace(/"([a-zA-Z_][a-zA-Z0-9_]*)"\s*:/g, '$1:');
-            
-            // Use proper Unicode-safe Base64 encoding
-            return btoa(unescape(encodeURIComponent(compressed)));
-            
-        } catch (error) {
-            console.warn('Compression failed, using fallback:', error);
-            // Last resort: just encode the original string
-            try {
-                return btoa(unescape(encodeURIComponent(str)));
-            } catch (finalError) {
-                // If even that fails, return the original string (will cause error later)
-                console.error('All encoding methods failed:', finalError);
-                return str;
-            }
-        }
-    }
-
-    // Decompress string (for CLI)
-    decompressString(compressed) {
-        try {
-            // Since we're using simple Base64 encoding, just decode it
-            return decodeURIComponent(escape(atob(compressed)));
-        } catch (error) {
-            throw new Error('Failed to decompress data: ' + error.message);
-        }
-    }
-
-    async getComponentsData() {
-        const componentsData = {};
-        
-        // Group components by type and get their full content
-        for (const step of this.workflowState.steps) {
-            if (!componentsData[step.type]) {
-                componentsData[step.type] = [];
-            }
-            
-            // Find the component in the loaded data
-            const componentsList = this.workflowState.components[step.type + 's'] || [];
-            const fullComponent = componentsList.find(c => c.name === step.name);
-            
-            if (fullComponent) {
-                componentsData[step.type].push({
-                    name: step.name,
-                    path: step.path,
-                    category: step.category,
-                    content: fullComponent.content,
-                    type: step.type
-                });
-            }
-        }
-        
-        return componentsData;
-    }
-
-    generateWorkflowYAML() {
-        // Ensure agents array exists and has valid structure
-        const agents = this.workflowState.agents || [];
-        const totalSteps = agents.reduce((total, agent) => total + 1 + (agent.subItems ? agent.subItems.length : 0), 0);
-        
-        const promptComment = this.workflowState.properties.prompt 
-            ? `# Initial Prompt: ${this.workflowState.properties.prompt}\n`
-            : '';
-            
-        return `# Workflow: ${this.workflowState.properties.name}
-# Description: ${this.workflowState.properties.description}
-${promptComment}# Generated: ${new Date().toISOString()}
-# Agents: ${agents.length} total
-# Components: ${totalSteps} total
-
-name: "${this.workflowState.properties.name}"
-description: "${this.workflowState.properties.description}"
-tags: [${this.workflowState.properties.tags.map(tag => `"${tag}"`).join(', ')}]
-version: "2.0.0"${this.workflowState.properties.prompt ? '\nprompt: "' + this.workflowState.properties.prompt + '"' : ''}
-
-# Hierarchical workflow structure: Agents → Commands/MCPs
-agents:
-${agents.map((agentData, i) => `  - agent: ${i + 1}
-    type: ${agentData.agent.type}
-    name: "${agentData.agent.name}"
-    path: "${agentData.agent.type === 'mcp' ? `.mcp.json#${agentData.agent.name}` : `.claude/${agentData.agent.type}s/${agentData.agent.path}`}"
-    category: "${agentData.agent.category}"
-    description: "${agentData.agent.description}"
-    tasks:${(agentData.subItems && agentData.subItems.length > 0) ? agentData.subItems.map((subItem, j) => `
-      - task: ${j + 1}
-        type: ${subItem.type}
-        name: "${subItem.name}"
-        path: "${subItem.type === 'mcp' ? `.mcp.json#${subItem.name}` : `.claude/${subItem.type}s/${subItem.path}`}"
-        category: "${subItem.category}"
-        description: "${subItem.description}"`).join('') : `
-      - task: 1
-        type: "default"
-        name: "No specific tasks assigned"
-        description: "This agent has no specific commands or MCPs assigned"`}`).join('\n')}
-
-execution:
-  mode: "hierarchical"
-  on_error: "stop"
-  sequence: "agent-by-agent"
-  
-components:
-  agents: [${agents.filter(a => a.agent.type === 'agent').map(a => `".claude/agents/${a.agent.path}"`).join(', ')}]
-  commands: [${[...agents.filter(a => a.agent.type === 'command').map(a => `".claude/commands/${a.agent.path}"`), ...agents.flatMap(a => (a.subItems || []).filter(s => s.type === 'command').map(s => `".claude/commands/${s.path}`))].join(', ')}]
-  mcps: [${[...agents.filter(a => a.agent.type === 'mcp').map(a => `".mcp.json#${a.agent.name}"`), ...agents.flatMap(a => (a.subItems || []).filter(s => s.type === 'mcp').map(s => `".mcp.json#${s.name}`))].join(', ')}]
-
-# Instructions for Claude Code:
-# This hierarchical workflow contains ${agents.length} agents with their assigned tasks.
-# Each agent should be loaded first, then its associated commands and MCPs should be executed in sequence.`;
-    }
-
-    showGenerateModal(commandData, yaml) {
-        const { fullCommand, componentsCommand } = commandData;
-
-        const fullCommandEl = document.getElementById('fullCommand');
-        const componentsOnlyCommandEl = document.getElementById('componentsOnlyCommand');
-        const yamlEl = document.getElementById('yamlContent');
-        const workflowFileNameEl = document.getElementById('workflowFileName');
-        const modal = document.getElementById('generateModal');
-
-        if (fullCommandEl) fullCommandEl.textContent = fullCommand;
-        if (componentsOnlyCommandEl) componentsOnlyCommandEl.textContent = componentsCommand;
-        if (yamlEl) yamlEl.textContent = yaml;
-        
-        // Update workflow file name dynamically
-        if (workflowFileNameEl) {
-            const workflowName = this.workflowState.properties.name || 'workflow';
-            const fileName = `${workflowName.replace(/[^a-z0-9]/gi, '-').toLowerCase()}.yaml`;
-            workflowFileNameEl.textContent = fileName;
-        }
-        
-        // Show prompt indicator if prompt is provided
-        const promptIndicator = document.getElementById('promptIndicator');
-        const promptText = document.getElementById('promptText');
-        if (promptIndicator && promptText) {
-            if (this.workflowState.properties.prompt) {
-                promptText.textContent = `"${this.workflowState.properties.prompt}"`;
-                promptIndicator.style.display = 'flex';
-            } else {
-                promptIndicator.style.display = 'none';
-            }
-        }
-        
-        if (modal) modal.style.display = 'block';
-
-        // Setup close modal functionality
-        const closeModalBtn = document.getElementById('closeModal');
-        if (closeModalBtn) {
-            closeModalBtn.onclick = () => modal.style.display = 'none';
-        }
-
-        // Close modal when clicking outside
-        window.onclick = (event) => {
-            if (event.target === modal) {
-                modal.style.display = 'none';
-            }
-        };
-
-        // Add copy functionality to the buttons in the modal
-        const copyFullCommandBtn = document.getElementById('copyFullCommand');
-        if (copyFullCommandBtn) {
-            copyFullCommandBtn.onclick = () => copyToClipboard(fullCommand, 'Full command copied!');
-        }
-
-        const copyComponentsCommandBtn = document.getElementById('copyComponentsCommand');
-        if (copyComponentsCommandBtn) {
-            copyComponentsCommandBtn.onclick = () => copyToClipboard(componentsCommand, 'Components command copied!');
-        }
-
-        // Original YAML buttons (in accordion)
-        const copyYamlBtn = document.getElementById('copyYaml');
-        if (copyYamlBtn) {
-            copyYamlBtn.onclick = () => copyToClipboard(yamlEl.textContent, 'YAML content copied!');
-        }
-
-        const downloadYamlBtn = document.getElementById('downloadYaml');
-        if (downloadYamlBtn) {
-            downloadYamlBtn.onclick = () => {
-                const filename = `${this.workflowState.properties.name.replace(/[^a-z0-9]/gi, '-').toLowerCase() || 'workflow'}.yaml`;
-                const blob = new Blob([yaml], { type: 'text/yaml' });
-                const url = URL.createObjectURL(blob);
-                const a = document.createElement('a');
-                a.href = url;
-                a.download = filename;
-                document.body.appendChild(a);
-                a.click();
-                document.body.removeChild(a);
-                URL.revokeObjectURL(url);
-                showNotification('YAML downloaded successfully!', 'success');
-            };
-        }
-
-        // Manual method YAML buttons
-        const copyYamlManualBtn = document.getElementById('copyYamlManual');
-        if (copyYamlManualBtn) {
-            copyYamlManualBtn.onclick = () => copyToClipboard(yamlEl.textContent, 'YAML content copied!');
-        }
-
-        const downloadYamlManualBtn = document.getElementById('downloadYamlManual');
-        if (downloadYamlManualBtn) {
-            downloadYamlManualBtn.onclick = () => {
-                const filename = `${this.workflowState.properties.name.replace(/[^a-z0-9]/gi, '-').toLowerCase() || 'workflow'}.yaml`;
-                const blob = new Blob([yaml], { type: 'text/yaml' });
-                const url = URL.createObjectURL(blob);
-                const a = document.createElement('a');
-                a.href = url;
-                a.download = filename;
-                document.body.appendChild(a);
-                a.click();
-                document.body.removeChild(a);
-                URL.revokeObjectURL(url);
-                showNotification('YAML downloaded successfully!', 'success');
-            };
-        }
-
-        const shareWorkflowBtn = document.getElementById('shareWorkflow');
-        if (shareWorkflowBtn) {
-            shareWorkflowBtn.onclick = () => {
-                // For the new approach, we share the command directly
-                navigator.clipboard.writeText(fullCommand).then(() => {
-                    showNotification('Installation command copied to clipboard!', 'success');
-                }).catch(err => {
-                    console.error('Failed to copy command: ', err);
-                    showNotification('Failed to copy command', 'error');
-                });
-            };
-        }
-    }
-
-    previewWorkflow() {
-        const agents = this.workflowState.agents || [];
-        if (agents.length === 0) {
-            this.showError('Add at least one component to preview the workflow.');
-            return;
-        }
-
-        // Set default properties if not set
-        if (!this.workflowState.properties.name) {
-            this.workflowState.properties.name = 'Untitled Workflow';
-        }
-        if (!this.workflowState.properties.description) {
-            this.workflowState.properties.description = 'Generated workflow preview';
-        }
-        if (!this.workflowState.properties.tags.length) {
-            this.workflowState.properties.tags = ['preview'];
-        }
-
-        // Generate YAML content
-        const yamlContent = this.generateWorkflowYAML();
-        
-        // Show in modal
-        this.showPreviewModal(yamlContent);
-    }
-
-    showPreviewModal(yamlContent) {
-        const modal = document.getElementById('previewModal');
-        const yamlElement = document.getElementById('previewYamlContent');
-        const lineNumbersElement = document.getElementById('previewLineNumbers');
-        
-        if (!modal || !yamlElement || !lineNumbersElement) return;
-
-        // Apply syntax highlighting to YAML content
-        const highlightedYaml = this.highlightYaml(yamlContent);
-        yamlElement.innerHTML = highlightedYaml;
-        yamlElement.className = 'yaml-syntax';
-        
-        // Generate line numbers
-        const lines = yamlContent.split('\n');
-        lineNumbersElement.innerHTML = lines.map((_, index) => 
-            `<span>${index + 1}</span>`
-        ).join('');
-
-        // Show modal
-        modal.style.display = 'block';
-
-        // Setup event listeners
-        this.setupPreviewModalListeners(yamlContent);
-    }
-
-    highlightYaml(yamlContent) {
-        return yamlContent
-            .split('\n')
-            .map(line => this.highlightYamlLine(line))
-            .join('\n');
-    }
-
-    highlightYamlLine(line) {
-        // Handle comments (everything after #)
-        if (line.trim().startsWith('#')) {
-            return `<span class="yaml-comment">${this.escapeHtml(line)}</span>`;
-        }
-        
-        // Handle lines with comments
-        const commentIndex = line.indexOf('#');
-        let mainPart = line;
-        let commentPart = '';
-        
-        if (commentIndex > -1) {
-            mainPart = line.substring(0, commentIndex);
-            commentPart = `<span class="yaml-comment">${this.escapeHtml(line.substring(commentIndex))}</span>`;
-        }
-        
-        // Handle key-value pairs
-        const keyValueMatch = mainPart.match(/^(\s*)([\w-]+)(\s*:\s*)(.*)/);
-        if (keyValueMatch) {
-            const [, indent, key, colon, value] = keyValueMatch;
-            
-            let highlightedValue = value;
-            
-            // Highlight different value types
-            if (value.trim().match(/^".*"$/)) {
-                // String in quotes
-                highlightedValue = `<span class="yaml-string">${this.escapeHtml(value)}</span>`;
-            } else if (value.trim().match(/^[\d.]+$/)) {
-                // Numbers
-                highlightedValue = `<span class="yaml-number">${this.escapeHtml(value)}</span>`;
-            } else if (value.trim().match(/^(true|false|yes|no|on|off)$/i)) {
-                // Booleans
-                highlightedValue = `<span class="yaml-boolean">${this.escapeHtml(value)}</span>`;
-            } else if (value.trim().match(/^[\w\/-]+\.(md|json|yaml|yml)$/)) {
-                // File paths
-                highlightedValue = `<span class="yaml-path">${this.escapeHtml(value)}</span>`;
-            } else if (value.trim().startsWith('[') && value.trim().endsWith(']')) {
-                // Arrays
-                highlightedValue = `<span class="yaml-array">${this.escapeHtml(value)}</span>`;
-            } else if (value.trim()) {
-                // Regular strings
-                highlightedValue = `<span class="yaml-string">${this.escapeHtml(value)}</span>`;
-            }
-            
-            return `${this.escapeHtml(indent)}<span class="yaml-key">${this.escapeHtml(key)}</span><span class="yaml-punctuation">${this.escapeHtml(colon)}</span>${highlightedValue}${commentPart}`;
-        }
-        
-        // Handle list items
-        const listMatch = mainPart.match(/^(\s*-\s*)(.*)/);
-        if (listMatch) {
-            const [, listMarker, content] = listMatch;
-            
-            // Check if it's a key-value in list
-            const listKeyValueMatch = content.match(/^([\w-]+)(\s*:\s*)(.*)/);
-            if (listKeyValueMatch) {
-                const [, key, colon, value] = listKeyValueMatch;
-                let highlightedValue = value;
-                
-                if (value.trim().match(/^".*"$/)) {
-                    highlightedValue = `<span class="yaml-string">${this.escapeHtml(value)}</span>`;
-                } else if (value.trim().match(/^[\d.]+$/)) {
-                    highlightedValue = `<span class="yaml-number">${this.escapeHtml(value)}</span>`;
-                } else if (value.trim()) {
-                    highlightedValue = `<span class="yaml-string">${this.escapeHtml(value)}</span>`;
-                }
-                
-                return `<span class="yaml-list-item">${this.escapeHtml(listMarker)}</span><span class="yaml-key">${this.escapeHtml(key)}</span><span class="yaml-punctuation">${this.escapeHtml(colon)}</span>${highlightedValue}${commentPart}`;
-            } else {
-                return `<span class="yaml-list-item">${this.escapeHtml(listMarker)}</span><span class="yaml-string">${this.escapeHtml(content)}</span>${commentPart}`;
-            }
-        }
-        
-        // Handle section headers (main keys without indentation)
-        const sectionMatch = mainPart.match(/^([\w-]+)(\s*:\s*)(.*)/);
-        if (sectionMatch && !mainPart.startsWith(' ')) {
-            const [, key, colon, value] = sectionMatch;
-            return `<span class="yaml-section">${this.escapeHtml(key)}</span><span class="yaml-punctuation">${this.escapeHtml(colon)}</span><span class="yaml-string">${this.escapeHtml(value)}</span>${commentPart}`;
-        }
-        
-        // Default: return line as is
-        return `${this.escapeHtml(mainPart)}${commentPart}`;
-    }
-
-    escapeHtml(text) {
-        const div = document.createElement('div');
-        div.textContent = text;
-        return div.innerHTML;
-    }
-
-    setupPreviewModalListeners(yamlContent) {
-        // Close modal events
-        const closeBtn = document.getElementById('closePreviewModal');
-        const closeModalBtn = document.getElementById('closePreviewModalBtn');
-        const modal = document.getElementById('previewModal');
-
-        if (closeBtn) {
-            closeBtn.onclick = () => modal.style.display = 'none';
-        }
-        if (closeModalBtn) {
-            closeModalBtn.onclick = () => modal.style.display = 'none';
-        }
-
-        // Copy YAML
-        const copyBtn = document.getElementById('copyPreviewYaml');
-        if (copyBtn) {
-            copyBtn.onclick = () => {
-                navigator.clipboard.writeText(yamlContent).then(() => {
-                    showNotification('YAML copied to clipboard!', 'success');
-                }).catch(() => {
-                    showNotification('Failed to copy YAML', 'error');
-                });
-            };
-        }
-
-        // Download YAML
-        const downloadBtn = document.getElementById('downloadPreviewYaml');
-        if (downloadBtn) {
-            downloadBtn.onclick = () => {
-                const filename = `${this.workflowState.properties.name.replace(/[^a-z0-9]/gi, '-').toLowerCase() || 'workflow'}-preview.yaml`;
-                const blob = new Blob([yamlContent], { type: 'text/yaml' });
-                const url = URL.createObjectURL(blob);
-                const a = document.createElement('a');
-                a.href = url;
-                a.download = filename;
-                document.body.appendChild(a);
-                a.click();
-                document.body.removeChild(a);
-                URL.revokeObjectURL(url);
-                showNotification('YAML downloaded successfully!', 'success');
-            };
-        }
-
-        // Close modal when clicking outside
-        window.onclick = (event) => {
-            if (event.target === modal) {
-                modal.style.display = 'none';
-            }
-        };
-    }
-
-    showError(message) {
-        showNotification(message, 'error');
-    }
-}
-
-// Global functions for workflow events (called from onclick)
-function showWorkflowComponentDetails(type, name, path, category) {
-    const component = window.dataLoader.findComponent(name, type);
-    if (component) {
-        showComponentModal(component);
-    } else {
-        console.warn('Component not found:', type, name);
-    }
-}
-
-function addComponentFromButton(event) {
-    const treeFile = event.target.closest('.tree-file');
-    const componentData = { ...treeFile.dataset };
-    if (window.workflowManager) {
-        window.workflowManager.addWorkflowStep(componentData);
-    }
-}
-
-function removeWorkflowStep(stepId) {
-    if (window.workflowManager) {
-        window.workflowManager.workflowState.steps = 
-            window.workflowManager.workflowState.steps.filter(step => step.id !== stepId);
-        window.workflowManager.renderWorkflowSteps();
-        window.workflowManager.updateWorkflowStats();
-    }
-}
-
-function removeAgent(agentId) {
-    if (window.workflowManager && confirm('Remove this agent and all its associated commands/MCPs?')) {
-        // Remove from agents array
-        window.workflowManager.workflowState.agents = 
-            window.workflowManager.workflowState.agents.filter(agentData => agentData.agent.id !== agentId);
-        
-        // Remove from legacy steps array
-        window.workflowManager.workflowState.steps = 
-            window.workflowManager.workflowState.steps.filter(step => step.id !== agentId);
-        
-        window.workflowManager.renderWorkflowSteps();
-        window.workflowManager.updateWorkflowStats();
-    }
-}
-
-function removeSubItem(agentId, subItemId) {
-    if (window.workflowManager) {
-        const agentIndex = window.workflowManager.workflowState.agents.findIndex(
-            agentData => agentData.agent.id === agentId
-        );
-        if (agentIndex !== -1) {
-            window.workflowManager.workflowState.agents[agentIndex].subItems = 
-                window.workflowManager.workflowState.agents[agentIndex].subItems.filter(
-                    subItem => subItem.id !== subItemId
-                );
-            
-            // Remove from legacy steps array
-            window.workflowManager.workflowState.steps = 
-                window.workflowManager.workflowState.steps.filter(step => step.id !== subItemId);
-            
-            window.workflowManager.renderWorkflowSteps();
-            window.workflowManager.updateWorkflowStats();
-        }
-    }
-}
-
-// Helper function to scroll to drop zone
-function scrollToDropZone() {
-    const dropZone = document.querySelector('.drop-zone');
-    if (dropZone) {
-        dropZone.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        // Add a brief highlight effect
-        dropZone.classList.add('drag-over');
-        setTimeout(() => {
-            dropZone.classList.remove('drag-over');
-        }, 1000);
-    }
-}
-
-// Helper functions for drag and drop
-function allowDrop(event) {
-    event.preventDefault();
-}
-
-function dropOnAgent(event, agentId) {
-    event.preventDefault();
-    event.stopPropagation(); // Prevent the main drop handler from also firing
-    
-    // Remove drag-over class
-    event.target.classList.remove('drag-over');
-    
-    try {
-        const componentData = JSON.parse(event.dataTransfer.getData('application/json'));
-        if (componentData.componentType === 'command' || componentData.componentType === 'mcp') {
-            window.workflowManager.addWorkflowStep(componentData, agentId);
-        }
-    } catch (error) {
-        console.error('Error handling agent drop:', error);
-    }
-}
-
-function dropOnAddItem(event) {
-    event.preventDefault();
-    event.stopPropagation(); // Prevent the main drop handler from also firing
-    
-    // Remove drag-over class
-    event.target.classList.remove('drag-over');
-    event.target.closest('.add-agent-btn')?.classList.remove('drag-over');
-    
-    try {
-        const componentData = JSON.parse(event.dataTransfer.getData('application/json'));
-        // Add as main level item (no targetAgentId)
-        window.workflowManager.addWorkflowStep(componentData);
-    } catch (error) {
-        console.error('Error handling add item drop:', error);
-    }
-}
-
-// Initialize when DOM is ready
-document.addEventListener('DOMContentLoaded', () => {
-    window.workflowManager = new WorkflowManager();
-    window.workflowManager.init();
-});