"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo } from "react";
import { cn } from "@stigmer/theme";
import { useContextWindow, } from "./useContextWindow.js";
import { formatTokenCount } from "./UsageWidget.js";
const HEALTH_BAR_COLORS = {
    healthy: "bg-success",
    warning: "bg-warning",
    critical: "bg-destructive",
};
const HEALTH_TEXT_COLORS = {
    healthy: "text-success",
    warning: "text-warning",
    critical: "text-destructive",
};
const HEALTH_LABELS = {
    healthy: "Healthy",
    warning: "Approaching limit",
    critical: "Near limit",
};
function formatCompactTokens(count) {
    if (count >= 1_000_000)
        return `${(count / 1_000_000).toFixed(1)}M`;
    if (count >= 1_000)
        return `${Math.round(count / 1_000)}K`;
    return String(count);
}
/**
 * Visual gauge showing context window utilization during agent execution.
 *
 * Renders a progress bar with threshold markers, token count labels, and
 * a health indicator derived from utilization percentage. The gauge updates
 * in real-time as the execution streams status updates.
 *
 * Returns `null` when `context_info` is absent (e.g., Cursor harness
 * where context is managed externally).
 *
 * All visual properties flow through `--stgm-*` tokens. Zero Console
 * dependencies. Accessible via `role="meter"` with ARIA value attributes.
 *
 * @example
 * ```tsx
 * const { execution } = useExecutionStream(executionId);
 * <ContextGauge execution={execution} />
 * ```
 *
 * @example Compact mode in a status bar:
 * ```tsx
 * <ContextGauge execution={execution} compact />
 * ```
 *
 * @see {@link useContextWindow} - headless hook for custom rendering
 */
export const ContextGauge = memo(function ContextGauge({ execution, compact = false, className, }) {
    const ctx = useContextWindow(execution);
    if (!ctx.hasContextInfo)
        return null;
    if (compact)
        return _jsx(CompactGauge, { ctx: ctx, className: className });
    return _jsx(FullGauge, { ctx: ctx, className: className });
});
const CompactGauge = memo(function CompactGauge({ ctx, className, }) {
    const barPercent = Math.min(ctx.utilizationPercent, 100);
    return (_jsxs("div", { role: "meter", "aria-label": "Context window utilization", "aria-valuenow": ctx.currentTokenCount, "aria-valuemin": 0, "aria-valuemax": ctx.contextWindowLimit, "aria-valuetext": `${Math.round(ctx.utilizationPercent)}% context used`, className: cn("flex items-center gap-2", className), children: [_jsx("div", { className: "h-1.5 flex-1 overflow-hidden rounded-full bg-muted", children: _jsx("div", { className: cn("h-full rounded-full transition-colors", HEALTH_BAR_COLORS[ctx.health]), style: { width: `${barPercent}%` } }) }), _jsxs("span", { className: cn("shrink-0 text-xs tabular-nums", HEALTH_TEXT_COLORS[ctx.health]), children: [Math.round(ctx.utilizationPercent), "%"] })] }));
});
const FullGauge = memo(function FullGauge({ ctx, className, }) {
    const barPercent = Math.min(ctx.utilizationPercent, 100);
    const triggerPercent = ctx.triggerThreshold > 0 && ctx.contextWindowLimit > 0
        ? (ctx.triggerThreshold / ctx.contextWindowLimit) * 100
        : 0;
    return (_jsxs("div", { role: "meter", "aria-label": "Context window utilization", "aria-valuenow": ctx.currentTokenCount, "aria-valuemin": 0, "aria-valuemax": ctx.contextWindowLimit, "aria-valuetext": `${formatCompactTokens(ctx.currentTokenCount)} of ${formatCompactTokens(ctx.contextWindowLimit)} tokens used, ${Math.round(ctx.utilizationPercent)}%`, className: cn("flex flex-col gap-1.5", className), children: [_jsxs("div", { className: "flex items-baseline justify-between", children: [_jsx("span", { className: "text-xs font-medium text-foreground", children: "Context" }), _jsxs("span", { className: cn("text-xs tabular-nums font-medium", HEALTH_TEXT_COLORS[ctx.health]), children: [Math.round(ctx.utilizationPercent), "%"] })] }), _jsxs("div", { className: "relative", children: [_jsx("div", { className: "h-2 overflow-hidden rounded-full bg-muted", children: _jsx("div", { className: cn("h-full rounded-full transition-colors", HEALTH_BAR_COLORS[ctx.health]), style: { width: `${barPercent}%` } }) }), triggerPercent > 0 && triggerPercent < 100 && (_jsx("div", { className: "absolute top-0 h-2 w-px bg-muted-foreground/40", style: { left: `${triggerPercent}%` }, "aria-hidden": "true" }))] }), _jsxs("div", { className: "text-xs tabular-nums text-muted-foreground", children: [formatCompactTokens(ctx.currentTokenCount), " /", " ", formatCompactTokens(ctx.contextWindowLimit), " tokens"] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: cn("inline-flex h-1.5 w-1.5 rounded-full", HEALTH_BAR_COLORS[ctx.health]), "aria-hidden": "true" }), _jsx("span", { className: "text-xs text-muted-foreground", children: HEALTH_LABELS[ctx.health] }), ctx.summarizationEvents.length > 0 && (_jsxs("span", { className: "text-xs text-muted-foreground", children: ["\u00B7 ", ctx.summarizationEvents.length, " ", ctx.summarizationEvents.length === 1
                                ? "summarization"
                                : "summarizations"] }))] }), ctx.summarizationEvents.length > 0 && (_jsx(SummarizationSummary, { events: ctx.summarizationEvents }))] }));
});
function SummarizationSummary({ events, }) {
    const latest = events[events.length - 1];
    if (!latest)
        return null;
    return (_jsxs("div", { className: "pl-3 text-xs tabular-nums text-muted-foreground", children: ["Last: ", formatTokenCount(latest.tokensBefore), " \u2192", " ", formatTokenCount(latest.tokensAfter), " tokens (", Math.round(latest.compressionRatio * 100), "% reduction)"] }));
}
//# sourceMappingURL=ContextGauge.js.map