v0-ui-reviewer/dist/progress.js

Next-gen UI/UX reviewer with multi-model AI support (OpenAI, Claude, v0), style extraction, and live preview sandbox

import cliProgress from 'cli-progress';
import chalk from 'chalk';
export class EnhancedProgressBar {
    multibar;
    bars = new Map();
    mainBar = null;
    steps;
    currentStepIndex = 0;
    totalWeight = 0;
    constructor(steps) {
        this.steps = [...steps]; // Make a copy to allow modifications
        this.totalWeight = steps.reduce((sum, step) => sum + step.weight, 0);
        this.multibar = new cliProgress.MultiBar({
            clearOnComplete: false,
            hideCursor: true,
            format: ' {task} │{bar}│ {percentage}% │ {message}',
            barCompleteChar: '█',
            barIncompleteChar: '░',
            stopOnComplete: true
        }, cliProgress.Presets.shades_grey);
    }
    start() {
        // Create main progress bar
        this.mainBar = this.multibar.create(100, 0, {
            task: chalk.cyan('Overall Progress'),
            message: 'Starting...'
        });
    }
    startStep(stepName, message = '') {
        const bar = this.multibar.create(100, 0, {
            task: chalk.yellow(stepName.padEnd(20)),
            message
        });
        this.bars.set(stepName, bar);
        return bar;
    }
    updateStep(stepName, progress, message) {
        const bar = this.bars.get(stepName);
        if (bar) {
            bar.update(progress, message ? { message } : undefined);
        }
    }
    completeStep(stepName, message = 'Complete') {
        const bar = this.bars.get(stepName);
        if (bar) {
            bar.update(100, { message: chalk.green(message) });
            bar.stop();
        }
        // Update main progress
        if (this.mainBar && this.currentStepIndex < this.steps.length) {
            const completedWeight = this.steps
                .slice(0, this.currentStepIndex + 1)
                .reduce((sum, step) => sum + step.weight, 0);
            const progress = Math.round((completedWeight / this.totalWeight) * 100);
            this.mainBar.update(progress, {
                message: `Step ${this.currentStepIndex + 1}/${this.steps.length} complete`
            });
            this.currentStepIndex++;
        }
    }
    addStep(stepName, weight = 10) {
        this.steps.push({ name: stepName, weight });
        this.totalWeight += weight;
        // Start the step immediately
        this.startStep(stepName);
    }
    stop() {
        if (this.mainBar) {
            this.mainBar.update(100, { message: chalk.green('All tasks complete!') });
        }
        this.multibar.stop();
    }
    error(stepName, error) {
        const bar = this.bars.get(stepName);
        if (bar) {
            bar.update(0, { message: chalk.red(`Error: ${error}`) });
            bar.stop();
        }
        this.multibar.stop();
    }
}
// Progress bars for different operations
export const reviewProgressSteps = [
    { name: 'Browser Launch', weight: 10 },
    { name: 'Page Load', weight: 25 },
    { name: 'Screenshot Capture', weight: 15 },
    { name: 'Image Processing', weight: 10 },
    { name: 'API Analysis', weight: 35 },
    { name: 'Report Generation', weight: 5 }
];
export const screenshotProgressSteps = [
    { name: 'Image Validation', weight: 10 },
    { name: 'Image Processing', weight: 20 },
    { name: 'API Analysis', weight: 60 },
    { name: 'Report Generation', weight: 10 }
];