@hhoangphuoc/escape-room-cli/dist/components/BudgetAlert.js

A CLI for playing AI-generated escape room games. Install globally with: npm install -g @hhoangphuoc/escape-room-cli

import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { Box, Text } from 'ink';
const BudgetAlert = ({ alert, onDismiss, compact = false }) => {
    const getAlertColor = (type) => {
        switch (type) {
            case 'warning': return 'yellow';
            case 'limit': return 'red';
            default: return 'blue';
        }
    };
    const getAlertEmoji = (type) => {
        switch (type) {
            case 'warning': return '⚠️';
            case 'limit': return '🚫';
            default: return 'ℹ️';
        }
    };
    const getAlertTitle = (type) => {
        switch (type) {
            case 'warning': return 'BUDGET WARNING';
            case 'limit': return 'BUDGET LIMIT REACHED';
            default: return 'BUDGET INFO';
        }
    };
    const formatCost = (cost) => {
        return cost < 0.01 ? `$${cost.toFixed(5)}` : `$${cost.toFixed(3)}`;
    };
    const getProgressPercentage = () => {
        if (!alert.threshold || !alert.currentCost)
            return 0;
        return Math.min((alert.currentCost / alert.threshold) * 100, 100);
    };
    const renderProgressBar = (percentage, width = 20) => {
        const filled = Math.round((percentage / 100) * width);
        const empty = width - filled;
        // const color = percentage >= 100 ? 'red' : percentage >= 75 ? 'yellow' : 'green';
        return '█'.repeat(filled) + '░'.repeat(empty);
    };
    if (compact) {
        return (_jsxs(Box, { paddingX: 1, children: [_jsxs(Text, { color: getAlertColor(alert.type), children: [getAlertEmoji(alert.type), " ", alert.message] }), onDismiss && (_jsx(Text, { color: "gray", children: " (Press ESC to dismiss)" }))] }));
    }
    const progressPercentage = getProgressPercentage();
    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: getAlertColor(alert.type), padding: 1, marginY: 1, children: [_jsxs(Box, { marginBottom: 1, justifyContent: "space-between", children: [_jsx(Box, { children: _jsxs(Text, { bold: true, color: getAlertColor(alert.type), children: [getAlertEmoji(alert.type), " ", getAlertTitle(alert.type)] }) }), onDismiss && (_jsx(Box, { children: _jsx(Text, { color: "gray", children: "[ESC to dismiss]" }) }))] }), _jsx(Box, { marginBottom: 1, paddingX: 1, children: _jsx(Text, { color: getAlertColor(alert.type), children: alert.message }) }), alert.threshold && alert.currentCost !== undefined && (_jsxs(_Fragment, { children: [_jsxs(Box, { marginBottom: 1, paddingX: 1, children: [_jsx(Box, { width: 15, children: _jsx(Text, { color: "white", children: "Current Usage:" }) }), _jsx(Box, { width: 12, children: _jsx(Text, { color: getAlertColor(alert.type), children: formatCost(alert.currentCost) }) }), _jsx(Box, { width: 5, children: _jsx(Text, { color: "gray", children: "of" }) }), _jsx(Box, { children: _jsx(Text, { color: "cyan", children: formatCost(alert.threshold) }) })] }), _jsxs(Box, { marginBottom: 1, paddingX: 1, children: [_jsx(Box, { width: 10, children: _jsx(Text, { color: "white", children: "Progress:" }) }), _jsx(Box, { width: 25, children: _jsxs(Text, { color: getAlertColor(alert.type), children: [renderProgressBar(progressPercentage), " ", progressPercentage.toFixed(1), "%"] }) })] })] })), _jsx(Box, { marginTop: 1, paddingX: 1, children: _jsx(Text, { color: "gray", children: alert.type === 'limit'
                        ? '🛑 Consider pausing AI usage or increasing your budget'
                        : alert.type === 'warning'
                            ? '💡 Consider using cheaper models or reducing AI requests'
                            : '📊 Monitor your usage to stay within budget' }) }), alert.type !== 'info' && (_jsx(Box, { marginTop: 1, paddingX: 1, children: _jsx(Text, { color: "cyan", children: "\uD83D\uDCB0 Cost-effective models: gpt-4.1-mini, o3-mini" }) }))] }));
};
export const BudgetAlerts = ({ alerts, onDismissAll, maxVisible = 3 }) => {
    if (alerts.length === 0)
        return null;
    const visibleAlerts = alerts.slice(0, maxVisible);
    const hasMore = alerts.length > maxVisible;
    return (_jsxs(Box, { flexDirection: "column", children: [visibleAlerts.map((alert, index) => (_jsx(BudgetAlert, { alert: alert, onDismiss: onDismissAll }, index))), hasMore && (_jsx(Box, { paddingX: 1, marginY: 1, children: _jsxs(Text, { color: "gray", children: ["\u23F3 +", alerts.length - maxVisible, " more alerts..."] }) })), onDismissAll && alerts.length > 0 && (_jsx(Box, { justifyContent: "center", marginTop: 1, children: _jsx(Text, { color: "gray", children: "Press ESC to dismiss all alerts" }) }))] }));
};
export default BudgetAlert;