capsule-ai-cli/dist/ui/ModelFusionAnimation.js

The AI Model Orchestrator - Intelligent multi-model workflows with device-locked licensing

import React, { useState, useEffect } from 'react';
import { Box, Text } from 'ink';
import Spinner from 'ink-spinner';
import { CAPSULE_CORP_COLORS } from './capsule-corp-logo';
export const ModelFusionAnimation = ({ models, onComplete }) => {
    const [phase, setPhase] = useState('charging');
    const [powerLevel, setPowerLevel] = useState(0);
    const [currentFrame, setCurrentFrame] = useState(0);
    const fusionFrames = [
        { left: '🕺', right: '💃', center: '  ' },
        { left: ' 🕺', right: '💃 ', center: '  ' },
        { left: '  🕺', right: '💃  ', center: '  ' },
        { left: '   ', right: '   ', center: '⚡' },
        { left: '   ', right: '   ', center: '💥' },
        { left: '   ', right: '   ', center: '🔮' }
    ];
    useEffect(() => {
        if (phase === 'charging') {
            const interval = setInterval(() => {
                setPowerLevel(prev => {
                    if (prev >= 9000) {
                        setPhase('fusion');
                        return prev;
                    }
                    return prev + 500;
                });
            }, 100);
            return () => clearInterval(interval);
        }
        if (phase === 'fusion') {
            const interval = setInterval(() => {
                setCurrentFrame(prev => {
                    if (prev >= fusionFrames.length - 1) {
                        setPhase('complete');
                        onComplete?.();
                        return prev;
                    }
                    return prev + 1;
                });
            }, 300);
            return () => clearInterval(interval);
        }
    }, [phase, onComplete]);
    return (React.createElement(Box, { flexDirection: "column", alignItems: "center", paddingY: 1 },
        phase === 'charging' && (React.createElement(React.Fragment, null,
            React.createElement(Text, { color: CAPSULE_CORP_COLORS.yellow, bold: true }, "\u26A1 CHARGING POWER LEVELS \u26A1"),
            React.createElement(Box, { marginY: 1 },
                React.createElement(Text, null, "Power Level: "),
                React.createElement(Text, { color: powerLevel > 8000 ? 'red' : 'yellow', bold: true }, powerLevel),
                powerLevel > 8000 && React.createElement(Text, { color: "red", bold: true }, " (IT'S OVER 8000!)")),
            React.createElement(Box, null, models.map((model, i) => (React.createElement(Box, { key: model, marginX: 1 },
                React.createElement(Text, { color: "cyan" },
                    model,
                    ": "),
                React.createElement(Spinner, { type: "dots" }))))))),
        phase === 'fusion' && (React.createElement(React.Fragment, null,
            React.createElement(Text, { color: CAPSULE_CORP_COLORS.purple, bold: true }, "\u2728 MODEL FUSION DANCE \u2728"),
            React.createElement(Box, { marginY: 1 },
                React.createElement(Text, null, fusionFrames[currentFrame].left),
                React.createElement(Text, { color: "yellow", bold: true }, fusionFrames[currentFrame].center),
                React.createElement(Text, null, fusionFrames[currentFrame].right)),
            React.createElement(Text, { dimColor: true },
                "Combining ",
                models.join(' + '),
                "..."))),
        phase === 'complete' && (React.createElement(Box, { flexDirection: "column", alignItems: "center" },
            React.createElement(Text, { color: "green", bold: true }, "\uD83D\uDD25 FUSION COMPLETE! \uD83D\uDD25"),
            React.createElement(Text, { color: CAPSULE_CORP_COLORS.saiyanBlue }, "Model Fusion\u2122 Power Level: MAXIMUM"),
            React.createElement(Box, { marginTop: 1 },
                React.createElement(Text, { dimColor: true }, "Ready to unleash combined AI power!"))))));
};
export const ModelScouter = ({ model, analyzing }) => {
    const [dots, setDots] = useState('');
    useEffect(() => {
        if (analyzing) {
            const interval = setInterval(() => {
                setDots(prev => prev.length >= 3 ? '' : prev + '.');
            }, 500);
            return () => clearInterval(interval);
        }
    }, [analyzing]);
    return (React.createElement(Box, null,
        React.createElement(Text, { color: "green" }, "\uD83D\uDCE1 "),
        React.createElement(Text, { color: "cyan" },
            model,
            ": "),
        analyzing ? (React.createElement(Text, { color: "yellow" },
            "Analyzing",
            dots)) : (React.createElement(Text, { color: "green" }, "Ready!"))));
};
//# sourceMappingURL=ModelFusionAnimation.js.map