claude-flow-novice 1.0.0

package/dist/src/config/ui/progressive-disclosure-engine.js

@@ -0,0 +1,876 @@
+/**
+ * Progressive Disclosure Engine
+ *
+ * Implements adaptive UI patterns that reveal complexity gradually
+ * based on user experience level and project requirements.
+ */ import { EventEmitter } from 'events';
+/**
+ * Progressive disclosure engine that adapts UI complexity based on user needs
+ */ export class ProgressiveDisclosureEngine extends EventEmitter {
+    config;
+    state;
+    sections;
+    hints;
+    animations;
+    userProgress;
+    contextAnalyzer;
+    constructor(config){
+        super();
+        this.config = config;
+        this.state = this.initializeState();
+        this.sections = new Map();
+        this.hints = new Map();
+        this.animations = new Map();
+        this.userProgress = new ProgressTracker();
+        this.contextAnalyzer = new UIContextAnalyzer();
+        this.initializeSections();
+        this.initializeHints();
+        this.initializeAnimations();
+    }
+    /**
+   * Get the current UI structure filtered for user's level
+   */ getCurrentUI() {
+        const visibleSections = Array.from(this.sections.values()).filter((section)=>this.shouldShowSection(section)).sort((a, b)=>a.priority - b.priority).map((section)=>this.filterSectionForLevel(section));
+        return {
+            mode: this.state.currentLevel,
+            sections: visibleSections,
+            progress: this.calculateProgress(),
+            hints: this.getActiveHints(),
+            animations: this.getActiveAnimations(),
+            theme: this.config.preferences.theme,
+            accessibility: this.getAccessibilitySettings()
+        };
+    }
+    /**
+   * Update configuration level and regenerate UI
+   */ async setConfigurationLevel(level, smooth = true) {
+        const previousLevel = this.state.currentLevel;
+        if (previousLevel === level) return;
+        // Validate level transition
+        if (!await this.canTransitionToLevel(level)) {
+            throw new Error(`Cannot transition to ${level} level`);
+        }
+        // Animate transition if enabled
+        if (smooth && this.config.animations) {
+            await this.animateTransition(previousLevel, level);
+        }
+        // Update state
+        this.state.currentLevel = level;
+        this.updateVisibilityForLevel(level);
+        // Emit events
+        this.emit('levelChanged', {
+            from: previousLevel,
+            to: level,
+            timestamp: new Date()
+        });
+        // Update user progress
+        await this.userProgress.recordLevelChange(level);
+        // Show appropriate hints for new level
+        await this.showLevelTransitionHints(level);
+    }
+    /**
+   * Toggle section expansion
+   */ async toggleSection(sectionId, expand) {
+        const section = this.sections.get(sectionId);
+        if (!section || !section.visible) return;
+        const shouldExpand = expand !== undefined ? expand : !section.expanded;
+        // Animate section expansion
+        if (this.config.animations) {
+            await this.animateSectionToggle(sectionId, shouldExpand);
+        }
+        section.expanded = shouldExpand;
+        if (shouldExpand) {
+            this.state.expandedSections.add(sectionId);
+            // Show contextual hints for expanded section
+            await this.showSectionHints(sectionId);
+        } else {
+            this.state.expandedSections.delete(sectionId);
+        }
+        this.emit('sectionToggled', {
+            sectionId,
+            expanded: shouldExpand,
+            timestamp: new Date()
+        });
+    }
+    /**
+   * Update component value and validate
+   */ async updateComponent(componentId, value, triggerValidation = true) {
+        const component = this.findComponent(componentId);
+        if (!component) {
+            throw new Error(`Component not found: ${componentId}`);
+        }
+        // Validate value
+        const validationResult = triggerValidation ? await this.validateComponent(component, value) : {
+            valid: true,
+            errors: []
+        };
+        // Update component state
+        component.error = validationResult.errors.join(', ');
+        // Animate value change if enabled
+        if (this.config.animations && validationResult.valid) {
+            await this.animateValueChange(componentId, value);
+        }
+        // Check if this completes a section
+        await this.checkSectionCompletion(component);
+        // Update dependent components
+        await this.updateDependentComponents(componentId, value);
+        // Show contextual hints
+        await this.showValueChangeHints(componentId, value);
+        this.emit('componentUpdated', {
+            componentId,
+            value,
+            valid: validationResult.valid,
+            timestamp: new Date()
+        });
+        return validationResult;
+    }
+    /**
+   * Suggest next action to user
+   */ async suggestNextAction() {
+        const incompleteSections = this.getIncompleteSections();
+        const currentProgress = this.calculateProgress();
+        // If user is ready for next level
+        if (currentProgress.percentage > 80 && this.canUpgradeLevel()) {
+            return {
+                type: 'level-upgrade',
+                title: 'Ready for Advanced Features',
+                description: "You've mastered the basics! Unlock more powerful features.",
+                action: 'upgrade-level',
+                priority: 'high',
+                benefits: this.getUpgradeBenefits()
+            };
+        }
+        // If there are incomplete required sections
+        if (incompleteSections.required.length > 0) {
+            const section = incompleteSections.required[0];
+            return {
+                type: 'complete-section',
+                title: `Complete ${section.title}`,
+                description: section.description,
+                action: 'focus-section',
+                target: section.id,
+                priority: 'high'
+            };
+        }
+        // Suggest optional improvements
+        if (incompleteSections.optional.length > 0) {
+            const section = incompleteSections.optional[0];
+            return {
+                type: 'optional-section',
+                title: `Consider ${section.title}`,
+                description: `${section.description} (Optional)`,
+                action: 'suggest-section',
+                target: section.id,
+                priority: 'medium'
+            };
+        }
+        // Configuration is complete
+        return {
+            type: 'complete',
+            title: 'Configuration Complete',
+            description: 'Your configuration is ready to use!',
+            action: 'finalize',
+            priority: 'low'
+        };
+    }
+    /**
+   * Get contextual help for current state
+   */ async getContextualHelp() {
+        const context = await this.contextAnalyzer.analyzeCurrentContext(this.state);
+        return {
+            overview: this.generateOverviewHelp(context),
+            currentSection: this.getCurrentSectionHelp(context),
+            troubleshooting: this.getTroubleshootingHelp(context),
+            examples: this.getExamples(context),
+            resources: this.getResourceLinks(context)
+        };
+    }
+    /**
+   * Initialize UI sections based on configuration schema
+   */ initializeSections() {
+        // Core sections
+        this.sections.set('project', {
+            id: 'project',
+            title: 'Project Setup',
+            description: 'Configure your project type and basic settings',
+            level: [
+                'novice',
+                'intermediate',
+                'advanced',
+                'enterprise'
+            ],
+            category: 'core',
+            priority: 1,
+            components: [
+                {
+                    id: 'project-type',
+                    type: 'dropdown',
+                    path: 'project.type',
+                    label: 'Project Type',
+                    description: 'What type of project are you working on?',
+                    level: [
+                        'novice',
+                        'intermediate',
+                        'advanced',
+                        'enterprise'
+                    ],
+                    options: [
+                        {
+                            value: 'web-app',
+                            label: 'Web Application',
+                            description: 'Frontend web applications'
+                        },
+                        {
+                            value: 'api',
+                            label: 'API Service',
+                            description: 'Backend API services'
+                        },
+                        {
+                            value: 'cli',
+                            label: 'Command Line Tool',
+                            description: 'Terminal applications'
+                        },
+                        {
+                            value: 'library',
+                            label: 'Library/Package',
+                            description: 'Reusable code libraries'
+                        },
+                        {
+                            value: 'mobile',
+                            label: 'Mobile App',
+                            description: 'Mobile applications'
+                        },
+                        {
+                            value: 'ml',
+                            label: 'Machine Learning',
+                            description: 'ML and AI projects'
+                        },
+                        {
+                            value: 'data',
+                            label: 'Data Pipeline',
+                            description: 'Data processing and analysis'
+                        }
+                    ],
+                    visible: true,
+                    disabled: false,
+                    required: true,
+                    helpText: 'Choose the type that best matches your project. This will optimize the configuration for your needs.'
+                },
+                {
+                    id: 'project-language',
+                    type: 'dropdown',
+                    path: 'project.language',
+                    label: 'Primary Language',
+                    description: 'Main programming language for your project',
+                    level: [
+                        'novice',
+                        'intermediate',
+                        'advanced',
+                        'enterprise'
+                    ],
+                    options: [
+                        {
+                            value: 'javascript',
+                            label: 'JavaScript'
+                        },
+                        {
+                            value: 'typescript',
+                            label: 'TypeScript'
+                        },
+                        {
+                            value: 'python',
+                            label: 'Python'
+                        },
+                        {
+                            value: 'java',
+                            label: 'Java'
+                        },
+                        {
+                            value: 'go',
+                            label: 'Go'
+                        },
+                        {
+                            value: 'rust',
+                            label: 'Rust'
+                        },
+                        {
+                            value: 'csharp',
+                            label: 'C#'
+                        },
+                        {
+                            value: 'php',
+                            label: 'PHP'
+                        },
+                        {
+                            value: 'ruby',
+                            label: 'Ruby'
+                        }
+                    ],
+                    visible: true,
+                    disabled: false,
+                    required: true
+                }
+            ],
+            visible: true,
+            expanded: true,
+            required: true
+        });
+        // Agent configuration section
+        this.sections.set('agents', {
+            id: 'agents',
+            title: 'Agent Configuration',
+            description: 'Configure AI agents to help with your project',
+            level: [
+                'novice',
+                'intermediate',
+                'advanced',
+                'enterprise'
+            ],
+            category: 'core',
+            priority: 2,
+            components: [
+                {
+                    id: 'agent-auto-spawn',
+                    type: 'toggle',
+                    path: 'agent.autoSpawn',
+                    label: 'Auto-spawn Agents',
+                    description: 'Automatically create appropriate agents for your project',
+                    level: [
+                        'novice'
+                    ],
+                    defaultValue: true,
+                    visible: true,
+                    disabled: false,
+                    required: false,
+                    helpText: 'When enabled, the system will automatically choose and create the best agents for your project type.'
+                },
+                {
+                    id: 'agent-max-count',
+                    type: 'slider',
+                    path: 'agent.maxAgents',
+                    label: 'Maximum Agents',
+                    description: 'Maximum number of agents to run simultaneously',
+                    level: [
+                        'novice',
+                        'intermediate',
+                        'advanced',
+                        'enterprise'
+                    ],
+                    validation: [
+                        {
+                            type: 'min',
+                            value: 1,
+                            message: 'At least 1 agent is required'
+                        },
+                        {
+                            type: 'max',
+                            value: 20,
+                            message: 'Maximum 20 agents allowed'
+                        }
+                    ],
+                    defaultValue: 3,
+                    visible: true,
+                    disabled: false,
+                    required: true,
+                    helpText: 'More agents can work faster but use more resources. Start with 3-5 for most projects.'
+                },
+                {
+                    id: 'agent-topology',
+                    type: 'dropdown',
+                    path: 'agent.topology',
+                    label: 'Agent Coordination',
+                    description: 'How agents coordinate with each other',
+                    level: [
+                        'intermediate',
+                        'advanced',
+                        'enterprise'
+                    ],
+                    options: [
+                        {
+                            value: 'mesh',
+                            label: 'Mesh Network',
+                            description: 'All agents communicate directly'
+                        },
+                        {
+                            value: 'hierarchical',
+                            label: 'Hierarchical',
+                            description: 'Organized in layers with managers'
+                        },
+                        {
+                            value: 'ring',
+                            label: 'Ring Network',
+                            description: 'Agents form a communication ring'
+                        },
+                        {
+                            value: 'star',
+                            label: 'Star Network',
+                            description: 'Central coordinator manages all agents'
+                        }
+                    ],
+                    defaultValue: 'mesh',
+                    visible: true,
+                    disabled: false,
+                    required: false,
+                    helpText: 'Mesh is best for most projects. Use hierarchical for large teams.'
+                }
+            ],
+            visible: true,
+            expanded: false,
+            required: true
+        });
+        // Features section
+        this.sections.set('features', {
+            id: 'features',
+            title: 'Features & Capabilities',
+            description: 'Enable advanced features for your project',
+            level: [
+                'intermediate',
+                'advanced',
+                'enterprise'
+            ],
+            category: 'features',
+            priority: 3,
+            components: [
+                {
+                    id: 'memory-enabled',
+                    type: 'toggle',
+                    path: 'features.memory.enabled',
+                    label: 'Persistent Memory',
+                    description: 'Remember context between sessions',
+                    level: [
+                        'intermediate',
+                        'advanced',
+                        'enterprise'
+                    ],
+                    defaultValue: true,
+                    visible: true,
+                    disabled: false,
+                    required: false,
+                    helpText: 'Enables agents to remember what they learned in previous sessions.'
+                },
+                {
+                    id: 'monitoring-enabled',
+                    type: 'toggle',
+                    path: 'features.monitoring.enabled',
+                    label: 'Performance Monitoring',
+                    description: 'Track and optimize performance',
+                    level: [
+                        'intermediate',
+                        'advanced',
+                        'enterprise'
+                    ],
+                    defaultValue: false,
+                    visible: true,
+                    disabled: false,
+                    required: false,
+                    helpText: 'Monitor system performance and get optimization suggestions.'
+                },
+                {
+                    id: 'neural-enabled',
+                    type: 'toggle',
+                    path: 'features.neural.enabled',
+                    label: 'Neural Learning',
+                    description: 'Advanced AI pattern learning',
+                    level: [
+                        'advanced',
+                        'enterprise'
+                    ],
+                    defaultValue: false,
+                    visible: true,
+                    disabled: false,
+                    required: false,
+                    helpText: 'Enables advanced AI capabilities that learn from your patterns. Requires more resources.'
+                }
+            ],
+            visible: false,
+            expanded: false,
+            required: false
+        });
+        // Add more sections for advanced/enterprise levels
+        this.initializeAdvancedSections();
+    }
+    initializeAdvancedSections() {
+        // Security section for enterprise
+        this.sections.set('security', {
+            id: 'security',
+            title: 'Security & Compliance',
+            description: 'Configure security and compliance features',
+            level: [
+                'enterprise'
+            ],
+            category: 'security',
+            priority: 8,
+            components: [
+                {
+                    id: 'encryption-enabled',
+                    type: 'toggle',
+                    path: 'features.security.encryption.enabled',
+                    label: 'Data Encryption',
+                    description: 'Encrypt configuration data at rest',
+                    level: [
+                        'enterprise'
+                    ],
+                    defaultValue: false,
+                    visible: true,
+                    disabled: false,
+                    required: false,
+                    helpText: 'Encrypts all stored configuration data for security compliance.'
+                },
+                {
+                    id: 'auth-enabled',
+                    type: 'toggle',
+                    path: 'features.security.authentication.enabled',
+                    label: 'Authentication',
+                    description: 'Require authentication for access',
+                    level: [
+                        'enterprise'
+                    ],
+                    defaultValue: false,
+                    visible: true,
+                    disabled: false,
+                    required: false
+                }
+            ],
+            visible: false,
+            expanded: false,
+            required: false
+        });
+        // Team collaboration section
+        this.sections.set('collaboration', {
+            id: 'collaboration',
+            title: 'Team Collaboration',
+            description: 'Configure team sharing and collaboration features',
+            level: [
+                'advanced',
+                'enterprise'
+            ],
+            category: 'collaboration',
+            priority: 6,
+            components: [
+                {
+                    id: 'team-sharing',
+                    type: 'toggle',
+                    path: 'storage.team.enabled',
+                    label: 'Team Configuration Sharing',
+                    description: 'Share configuration with your team',
+                    level: [
+                        'advanced',
+                        'enterprise'
+                    ],
+                    defaultValue: false,
+                    visible: true,
+                    disabled: false,
+                    required: false,
+                    helpText: 'Enables sharing configuration templates and settings with your team.'
+                },
+                {
+                    id: 'cloud-sync',
+                    type: 'toggle',
+                    path: 'storage.cloud.enabled',
+                    label: 'Cloud Synchronization',
+                    description: 'Sync configuration across devices',
+                    level: [
+                        'advanced',
+                        'enterprise'
+                    ],
+                    defaultValue: false,
+                    visible: true,
+                    disabled: false,
+                    required: false,
+                    helpText: 'Synchronize your configuration across all your devices.'
+                }
+            ],
+            visible: false,
+            expanded: false,
+            required: false
+        });
+    }
+    /**
+   * Initialize contextual hints
+   */ initializeHints() {
+        // First-time user hints
+        this.hints.set('welcome', {
+            id: 'welcome',
+            targetElement: '.configuration-container',
+            content: "Welcome! Let's set up your project in just a few steps. We'll start with the basics and you can add more features later.",
+            type: 'modal',
+            trigger: 'auto',
+            position: 'auto',
+            delay: 1000,
+            conditions: [
+                {
+                    type: 'first-time'
+                }
+            ],
+            shown: false,
+            dismissed: false
+        });
+        this.hints.set('project-type-help', {
+            id: 'project-type-help',
+            targetElement: '#project-type',
+            content: 'Choose your project type carefully - it determines which agents and features are recommended for you.',
+            type: 'tooltip',
+            trigger: 'hover',
+            position: 'right',
+            delay: 500,
+            shown: false,
+            dismissed: false
+        });
+        this.hints.set('agent-count-guidance', {
+            id: 'agent-count-guidance',
+            targetElement: '#agent-max-count',
+            content: 'Start with 3 agents for most projects. You can always adjust this later as you learn what works best.',
+            type: 'popover',
+            trigger: 'focus',
+            position: 'top',
+            delay: 0,
+            conditions: [
+                {
+                    type: 'first-time'
+                }
+            ],
+            shown: false,
+            dismissed: false
+        });
+        // Level transition hints
+        this.hints.set('intermediate-unlock', {
+            id: 'intermediate-unlock',
+            targetElement: '.level-indicator',
+            content: 'Great progress! You can now access intermediate features like monitoring and advanced agent coordination.',
+            type: 'modal',
+            trigger: 'auto',
+            position: 'auto',
+            delay: 500,
+            shown: false,
+            dismissed: false
+        });
+        // Error recovery hints
+        this.hints.set('validation-error-help', {
+            id: 'validation-error-help',
+            targetElement: '.error-field',
+            content: "Don't worry about errors - they help ensure your configuration will work correctly. Check the help text for guidance.",
+            type: 'inline',
+            trigger: 'auto',
+            position: 'bottom',
+            delay: 0,
+            conditions: [
+                {
+                    type: 'error-state'
+                }
+            ],
+            shown: false,
+            dismissed: false
+        });
+    }
+    /**
+   * Initialize UI animations
+   */ initializeAnimations() {
+        // Section transitions
+        this.animations.set('section-expand', {
+            type: 'slide-in',
+            duration: 300,
+            delay: 0,
+            easing: 'ease-out',
+            element: '.section-content',
+            trigger: 'show'
+        });
+        this.animations.set('section-collapse', {
+            type: 'slide-in',
+            duration: 200,
+            delay: 0,
+            easing: 'ease-in',
+            element: '.section-content',
+            trigger: 'hide'
+        });
+        // Level transitions
+        this.animations.set('level-up', {
+            type: 'fade-in',
+            duration: 500,
+            delay: 100,
+            easing: 'ease-out',
+            element: '.new-features',
+            trigger: 'show'
+        });
+        // Value changes
+        this.animations.set('value-success', {
+            type: 'highlight',
+            duration: 600,
+            delay: 0,
+            easing: 'ease-out',
+            element: '.field-success',
+            trigger: 'success'
+        });
+        this.animations.set('value-error', {
+            type: 'shake',
+            duration: 400,
+            delay: 0,
+            easing: 'ease-out',
+            element: '.field-error',
+            trigger: 'error'
+        });
+    }
+    // Helper methods for state management and UI logic
+    initializeState() {
+        return {
+            currentLevel: this.config.mode === 'auto' ? 'novice' : this.config.mode,
+            visibleSections: new Set([
+                'project'
+            ]),
+            expandedSections: new Set([
+                'project'
+            ]),
+            completedSections: new Set(),
+            userProgress: 0,
+            showAdvanced: false,
+            expertMode: false
+        };
+    }
+    shouldShowSection(section) {
+        return section.level.includes(this.state.currentLevel) && this.state.visibleSections.has(section.id);
+    }
+    filterSectionForLevel(section) {
+        const filteredComponents = section.components.filter((component)=>component.level.includes(this.state.currentLevel)).map((component)=>({
+                ...component
+            }));
+        return {
+            ...section,
+            components: filteredComponents
+        };
+    }
+    updateVisibilityForLevel(level) {
+        for (const section of this.sections.values()){
+            const shouldBeVisible = section.level.includes(level);
+            section.visible = shouldBeVisible;
+            if (shouldBeVisible) {
+                this.state.visibleSections.add(section.id);
+            } else {
+                this.state.visibleSections.delete(section.id);
+                this.state.expandedSections.delete(section.id);
+            }
+            // Update component visibility
+            for (const component of section.components){
+                component.visible = component.level.includes(level);
+            }
+        }
+    }
+    calculateProgress() {
+        const visibleSections = Array.from(this.sections.values()).filter((section)=>section.visible);
+        const totalSteps = visibleSections.length;
+        const completedSteps = this.state.completedSections.size;
+        const percentage = totalSteps > 0 ? completedSteps / totalSteps * 100 : 0;
+        return {
+            totalSteps,
+            completedSteps,
+            currentStep: completedSteps + 1,
+            percentage: Math.round(percentage),
+            sectionsComplete: Array.from(this.state.completedSections),
+            sectionsRemaining: visibleSections.filter((section)=>!this.state.completedSections.has(section.id)).map((section)=>section.id),
+            estimatedTimeRemaining: this.estimateTimeRemaining(totalSteps - completedSteps)
+        };
+    }
+    estimateTimeRemaining(remainingSections) {
+        const avgTimePerSection = 120; // 2 minutes per section
+        return remainingSections * avgTimePerSection;
+    }
+    async canTransitionToLevel(level) {
+        // Check if user has completed required prerequisites
+        const requiredSections = this.getRequiredSectionsForLevel(level);
+        return requiredSections.every((sectionId)=>this.state.completedSections.has(sectionId));
+    }
+    getRequiredSectionsForLevel(level) {
+        switch(level){
+            case 'novice':
+                return [
+                    'project'
+                ];
+            case 'intermediate':
+                return [
+                    'project',
+                    'agents'
+                ];
+            case 'advanced':
+                return [
+                    'project',
+                    'agents',
+                    'features'
+                ];
+            case 'enterprise':
+                return [
+                    'project',
+                    'agents',
+                    'features',
+                    'collaboration'
+                ];
+            default:
+                return [];
+        }
+    }
+    // Additional methods would be implemented for animations, validation, hints, etc.
+    async animateTransition(from, to) {
+    // Implementation for smooth level transitions
+    }
+    async validateComponent(component, value) {
+        const errors = [];
+        if (component.validation) {
+            for (const rule of component.validation){
+                switch(rule.type){
+                    case 'required':
+                        if (value === null || value === undefined || value === '') {
+                            errors.push(rule.message);
+                        }
+                        break;
+                    case 'min':
+                        if (typeof value === 'number' && value < rule.value) {
+                            errors.push(rule.message);
+                        }
+                        break;
+                    case 'max':
+                        if (typeof value === 'number' && value > rule.value) {
+                            errors.push(rule.message);
+                        }
+                        break;
+                    case 'pattern':
+                        if (typeof value === 'string' && !new RegExp(rule.value).test(value)) {
+                            errors.push(rule.message);
+                        }
+                        break;
+                    case 'custom':
+                        if (rule.validator && !await rule.validator(value)) {
+                            errors.push(rule.message);
+                        }
+                        break;
+                }
+            }
+        }
+        return {
+            valid: errors.length === 0,
+            errors
+        };
+    }
+    findComponent(componentId) {
+        for (const section of this.sections.values()){
+            const component = section.components.find((c)=>c.id === componentId);
+            if (component) return component;
+        }
+        return null;
+    }
+}
+// Supporting classes and interfaces
+let ProgressTracker = class ProgressTracker {
+    async recordLevelChange(level) {
+    // Track user progression through levels
+    }
+};
+let UIContextAnalyzer = class UIContextAnalyzer {
+    async analyzeCurrentContext(state) {
+        return {
+            currentLevel: state.currentLevel,
+            completionRate: state.userProgress,
+            commonErrors: [],
+            suggestedNextSteps: []
+        };
+    }
+};
+ // Additional interface definitions would continue here...
+
+//# sourceMappingURL=progressive-disclosure-engine.js.map