"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "@stigmer/theme";
import { useSessionUsage, } from "../session/useSessionUsage";
/**
 * Right-sidebar widget that displays session-level cost and token
 * usage aggregated from per-message `LlmCallMetrics`.
 *
 * Usage data is computed purely from messages the frontend already
 * has — no server RPC is required for the real-time widget.
 *
 * Returns `null` when no execution has usage data, matching the
 * conditional-render pattern of {@link ArtifactsWidget} and
 * {@link WriteBacksWidget}.
 *
 * All visual properties flow through `--stgm-*` tokens. Zero
 * Console dependencies.
 *
 * @example
 * ```tsx
 * const conv = useSessionConversation(sessionId, org);
 *
 * <UsageWidget
 *   executions={[
 *     ...conv.completedExecutions,
 *     ...(conv.activeStreamExecution ? [conv.activeStreamExecution] : []),
 *   ]}
 * />
 * ```
 *
 * @see {@link useSessionUsage} — headless session-level usage aggregation hook
 */
export function UsageWidget({ executions, className }) {
    const usage = useSessionUsage(executions);
    if (!usage.hasUsage)
        return null;
    const multiModel = usage.modelBreakdown.length > 1;
    return (_jsxs("div", { className: cn("flex flex-col gap-1.5", className), role: "region", "aria-label": "Session cost summary", children: [_jsx("div", { className: "text-sm font-medium tabular-nums text-foreground", children: formatCost(usage.totalCostUsd) }), multiModel ? (_jsx(ModelBreakdown, { models: usage.modelBreakdown })) : (_jsxs("div", { className: "truncate text-xs text-muted-foreground", children: [usage.primaryModel, usage.primaryProvider && ` · ${usage.primaryProvider}`] })), _jsxs("div", { className: "text-xs tabular-nums text-muted-foreground", children: [formatTokenCount(usage.totalTokens), " tokens \u00B7", " ", usage.llmCallCount, " ", usage.llmCallCount === 1 ? "call" : "calls"] }), _jsxs("div", { className: "pl-2 text-xs tabular-nums text-muted-foreground", children: ["prompt ", formatTokenCount(usage.inputTokens), " \u00B7 completion", " ", formatTokenCount(usage.outputTokens)] }), (usage.cacheReadTokens > 0 || usage.cacheCreationTokens > 0) && (_jsx(CacheLine, { readTokens: usage.cacheReadTokens, creationTokens: usage.cacheCreationTokens }))] }));
}
function ModelBreakdown({ models, }) {
    return (_jsx("div", { className: "flex flex-col gap-0.5", role: "list", "aria-label": "Model cost breakdown", children: models.map((entry) => (_jsxs("div", { className: "flex items-baseline justify-between text-xs text-muted-foreground", role: "listitem", children: [_jsx("span", { className: "truncate", children: entry.model }), _jsx("span", { className: "ml-2 shrink-0 tabular-nums", children: formatCost(entry.estimatedCostUsd) })] }, `${entry.model}\0${entry.provider}`))) }));
}
function CacheLine({ readTokens, creationTokens, }) {
    const parts = [];
    if (readTokens > 0)
        parts.push(`${formatTokenCount(readTokens)} read`);
    if (creationTokens > 0)
        parts.push(`${formatTokenCount(creationTokens)} write`);
    return (_jsxs("div", { className: "pl-2 text-xs tabular-nums text-muted-foreground", children: ["cache ", parts.join(" · ")] }));
}
/**
 * Formats a USD cost value for display.
 * - Zero: "$0.00"
 * - Under $1: 4 decimal places ("$0.0042")
 * - $1 and above: 2 decimal places ("$1.23")
 */
export function formatCost(usd) {
    if (usd === 0)
        return "$0.00";
    if (usd < 1)
        return `$${usd.toFixed(4)}`;
    return `$${usd.toFixed(2)}`;
}
const tokenFormatter = new Intl.NumberFormat("en-US");
/**
 * Formats an integer token count with comma-separated digit grouping
 * (en-US locale) for deterministic display across environments.
 */
export function formatTokenCount(count) {
    return tokenFormatter.format(count);
}
//# sourceMappingURL=UsageWidget.js.map