Presupuesto de tokens.

<section class="ui-sample ui-ai" data-token-budget="true"><header><strong>Presupuesto</strong><span class="badge badge--ok">Disponible</span></header><progress value="38" max="100">38%</progress><p>Quedan 62.000 tokens · cálculo del proveedor</p></section>

<section class="ui-sample ui-ai border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-token-budget="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Presupuesto</strong><span class="badge badge--ok">Disponible</span></header><progress value="38" max="100">38%</progress><p>Quedan 62.000 tokens · cálculo del proveedor</p></section>

export interface TokenBudgetProps {
  title?: string;
  /** Estado del presupuesto («Disponible», «Alerta», «Agotado»); se muestra como etiqueta y vacío la oculta. */
  status?: string;
  /** Tono de la etiqueta de estado; por defecto se deduce del texto (disponible: `ok`; alerta: `warn`; agotado: `err`; otro: `neutral`). */
  statusTone?: "ok" | "warn" | "err" | "neutral";
  /** Consumo del presupuesto, de 0 a `max`. */
  value?: number;
  /** Valor máximo de la barra; por defecto, 100. */
  max?: number;
  /** Tokens que quedan y quién hizo el cálculo («Quedan 62.000 tokens · cálculo del proveedor»); debe cuadrar con `value` y `max`. Vacío lo oculta. */
  description?: string;
  className?: string;
}

const TOKEN_BUDGET_TONOS: [string, "ok" | "warn" | "err" | "neutral"][] = [
  ["disponible", "ok"],
  ["alerta", "warn"],
  ["agotado", "err"],
];

function claseEstado(status: string, tone?: "ok" | "warn" | "err" | "neutral") {
  const texto = status.toLowerCase();
  const tono = tone ?? TOKEN_BUDGET_TONOS.find(([clave]) => texto.startsWith(clave))?.[1] ?? "neutral";
  return tono === "neutral" ? "badge" : `badge badge--${tono}`;
}

/**
 * Consumo del presupuesto de tokens de un asistente o agente de IA, con barra de avance, estado y tokens restantes; se usa antes y durante una tarea larga para anticipar el límite.
 *
 * La barra es un `<progress>` nativo con el porcentaje consumido como texto alternativo. Cuando el consumo se acerca al límite, pasa el estado en `status`: va en texto dentro de una etiqueta con tono (`badge`), no sólo en color.
 *
 * @example <TokenBudget value={38} description="Quedan 62.000 tokens · cálculo del proveedor" />
 * @example <TokenBudget status="Alerta" value={91900} max={100000} description="Quedan 8.100 tokens · cálculo del proveedor" />
 */
export function TokenBudget({
  title = "Presupuesto",
  status = "Disponible",
  statusTone,
  value = 38,
  max = 100,
  description = "Quedan 62.000 tokens · cálculo del proveedor",
  className,
}: TokenBudgetProps) {
  const porcentaje = `${max > 0 ? Math.round((value / max) * 100) : 0}%`;
  return (
    <section className={["ui-ai", className].filter(Boolean).join(" ")} data-token-budget>
      <header>
        <strong>{title}</strong>
        {status ? <span className={claseEstado(status, statusTone)}>{status}</span> : null}
      </header>
      <progress value={value} max={max}>{porcentaje}</progress>
      {description ? <p>{description}</p> : null}
    </section>
  );
}