"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo } from "react";
import { cn } from "@stigmer/theme";
import { formatMicroUsd, formatTokenCount } from "./format-utils.js";
/**
 * Sidebar panel showing budget consumption with progress bars
 * for cost and tokens.
 */
export const WorkflowExecutionCostPanel = memo(function WorkflowExecutionCostPanel({ costSummary, maxCostMicros, maxTokens, className, }) {
    const BZ = BigInt(0);
    const hasCost = costSummary.costConsumedMicros > BZ;
    const hasTokens = costSummary.tokensConsumed > BZ;
    const costLimit = maxCostMicros ?? (costSummary.costRemainingMicros >= BZ
        ? costSummary.costConsumedMicros + costSummary.costRemainingMicros
        : undefined);
    const tokenLimit = maxTokens ?? (costSummary.tokensRemaining >= BZ
        ? costSummary.tokensConsumed + costSummary.tokensRemaining
        : undefined);
    if (!hasCost && !hasTokens)
        return null;
    return (_jsxs("div", { className: cn("flex flex-col gap-3 px-3 py-2", className), children: [_jsx("h3", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Budget" }), hasCost && (_jsx(BudgetGauge, { label: "Cost", consumed: formatMicroUsd(costSummary.costConsumedMicros), limit: costLimit ? formatMicroUsd(costLimit) : undefined, percentage: costLimit && costLimit > BZ
                    ? Number((costSummary.costConsumedMicros * BigInt(100)) / costLimit)
                    : undefined, breached: costSummary.thresholdBreached })), hasTokens && (_jsx(BudgetGauge, { label: "Tokens", consumed: formatTokenCount(costSummary.tokensConsumed), limit: tokenLimit ? formatTokenCount(tokenLimit) : undefined, percentage: tokenLimit && tokenLimit > BZ
                    ? Number((costSummary.tokensConsumed * BigInt(100)) / tokenLimit)
                    : undefined, breached: costSummary.thresholdBreached }))] }));
});
function BudgetGauge({ label, consumed, limit, percentage, breached, }) {
    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-center justify-between text-xs", children: [_jsx("span", { className: "text-muted-foreground", children: label }), _jsxs("span", { className: cn("tabular-nums", breached ? "text-warning" : "text-foreground"), children: [consumed, limit && _jsxs("span", { className: "text-muted-foreground", children: [" / ", limit] })] })] }), percentage !== undefined && (_jsx("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-muted", children: _jsx("div", { className: cn("h-full rounded-full transition-all", breached ? "bg-warning" : percentage > 80 ? "bg-warning" : "bg-primary"), style: { width: `${Math.min(percentage, 100)}%` } }) })), percentage !== undefined && (_jsxs("span", { className: "text-[10px] tabular-nums text-muted-foreground", children: [percentage.toFixed(0), "%"] }))] }));
}
//# sourceMappingURL=WorkflowExecutionCostPanel.js.map