import {  type EnvironmentId,  type ProviderConsumeResetCreditOutcome,  ProviderInstanceId,  ServerProvider,  ServerProviderResetCredits,  ServerProviderUsageWindow,  UsageLimitSourceAccount,  UsageLimitSourceSnapshot,  UsageProviderKind,} from "@t3tools/contracts";import { useAtomValue } from "@effect/atom-react";import {  collectLimitSources,  collectLimitsGroups,  elapsedShare,  formatDuration,  formatResetsIn,  limitsNotice,  type LimitPace,  paceOf,  providerLimitsLabel,} from "@t3tools/shared/usageLimits";import { GaugeIcon, TrendingDownIcon, TrendingUpIcon } from "lucide-react";import { Fragment, useState } from "react"; import { usePrimarySettings } from "../../hooks/useSettings";import { environmentPresentations } from "../../state/presentation";import { serverEnvironment } from "../../state/server";import { useAtomCommand } from "../../state/use-atom-command";import { formatUpcomingTimestamp } from "../../timestampFormat";import { ProviderInstanceIcon } from "../chat/ProviderInstanceIcon";import { getDriverOption } from "../settings/providerDriverMeta";import { RedactedSensitiveText } from "../settings/RedactedSensitiveText";import {  AlertDialog,  AlertDialogClose,  AlertDialogDescription,  AlertDialogFooter,  AlertDialogHeader,  AlertDialogPopup,  AlertDialogTitle,} from "../ui/alert-dialog";import { Button } from "../ui/button";import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";import { PROVIDER_PRESENTATION } from "./usageProviders"; const PACE: Record<LimitPace, { readonly label: string; readonly icon: typeof GaugeIcon }> = {  ahead: { label: "Ahead of pace: spending faster than the window elapses", icon: TrendingUpIcon },  on: { label: "On pace with the window", icon: GaugeIcon },  under: { label: "Under pace: headroom left for the rest of the window", icon: TrendingDownIcon },}; /** The series colour the cost chart uses for this driver, so the two views read as one. */function barColor(driver: ServerProvider["driver"]): string {  const kind: UsageProviderKind | undefined =    driver === "codex" ? "codex" : driver === "claudeAgent" ? "claude" : undefined;  return kind ? PROVIDER_PRESENTATION[kind].color : "var(--foreground)";} /** Pace as a glyph with the words on hover. */function PaceIcon({ pace }: { readonly pace: LimitPace }) {  const Icon = PACE[pace].icon;  return (    <Tooltip>      <TooltipTrigger        render={          <span            role="img"            aria-label={PACE[pace].label}            className="inline-flex text-muted-foreground"          />        }      >        <Icon className="size-3.5" aria-hidden />      </TooltipTrigger>      <TooltipPopup side="top">{PACE[pace].label}</TooltipPopup>    </Tooltip>  );} /** * One window as a full-width bar from the moment it opened to its reset. * The fill is the share of quota spent; the hairline is how far into the * window the clock is, which is also where even spending would have put the * fill. Hover for the exact figures and reset time. */function WindowBar({  color,  window,  now,}: {  readonly color: string;  readonly window: ServerProviderUsageWindow;  readonly now: number;}) {  const timestampFormat = usePrimarySettings((settings) => settings.timestampFormat);  const used = Math.max(0, Math.min(100, window.usedPercent));  const elapsed = elapsedShare(window, now);  const resetsIn = formatResetsIn(window, now);  const resetsAt = window.resetsAt    ? formatUpcomingTimestamp(window.resetsAt, timestampFormat, now)    : null;  const summary = `${window.label}: ${Math.round(used)}% used${    elapsed === null ? "" : `, ${Math.round(elapsed * 100)}% of the window elapsed`  }${resetsIn ? `, ${resetsIn}` : ""}`;   return (    <Tooltip>      <TooltipTrigger        render={          <div            role="img"            aria-label={summary}            tabIndex={0}            className="relative h-6 cursor-default rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"          />        }      >        <div className="absolute inset-x-0 inset-y-1.5 rounded-full bg-muted" />        {used > 0 ? (          <div            className="absolute inset-y-1.5 left-0 rounded-full"            style={{ width: `${used}%`, backgroundColor: color }}          />        ) : null}        {elapsed !== null ? (          <span            aria-hidden            className="absolute inset-y-0.5 w-px -translate-x-1/2 bg-foreground/60"            style={{ left: `${elapsed * 100}%` }}          />        ) : null}      </TooltipTrigger>      <TooltipPopup side="top" className="max-w-72 text-xs">        <div className="flex flex-col gap-0.5">          <span className="text-foreground">            {Math.round(used)}% used            {elapsed !== null ? ` · ${Math.round(elapsed * 100)}% of the window elapsed` : ""}          </span>          {elapsed !== null ? (            <span className="text-muted-foreground">The line is where even spending would be.</span>          ) : null}          {resetsAt ? (            <span className="text-muted-foreground">              Resets {resetsAt}              {resetsIn ? ` · ${resetsIn}` : ""}            </span>          ) : null}        </div>      </TooltipPopup>    </Tooltip>  );} /** One account's windows as rows: label and percent, bar, pace and countdown. */function LimitWindows({  driver,  windows,  now,}: {  readonly driver: ServerProvider["driver"];  readonly windows: ReadonlyArray<ServerProviderUsageWindow>;  readonly now: number;}) {  const color = barColor(driver);  return (    <div className="grid grid-cols-[11rem_minmax(0,1fr)_7rem] gap-x-4 gap-y-1">      {windows.map((window, index) => {        // Windows that reset together show the countdown once.        const previous = windows[index - 1];        const sharesReset =          previous?.resetsAt !== undefined && previous.resetsAt === window.resetsAt;        const pace = paceOf(window, now);        const resetsIn = formatResetsIn(window, now);        return (          <Fragment key={window.id}>            <span className="flex min-w-0 items-center gap-2 text-xs">              <span className="truncate text-muted-foreground">{window.label}</span>              <span className="ms-auto shrink-0 font-medium text-foreground tabular-nums">                {Math.round(window.usedPercent)}%              </span>            </span>            <WindowBar color={color} window={window} now={now} />            <span className="flex items-center gap-2 text-xs text-muted-foreground tabular-nums">              {pace ? <PaceIcon pace={pace} /> : null}              <span className="ms-auto shrink-0">{sharesReset ? "" : (resetsIn ?? "")}</span>            </span>          </Fragment>        );      })}    </div>  );} /** * Heading shared by local providers and source accounts: icon, driver, instance, plan, * and the signed-in email blurred until clicked, as provider settings do. */function AccountHeading({  driver,  label,  instanceLabel,  plan,  email,  accentColor,}: {  readonly driver: ServerProvider["driver"];  readonly label: string;  readonly instanceLabel: string;  readonly plan: string | undefined;  readonly email: string | undefined;  readonly accentColor?: string | undefined;}) {  return (    <h2 className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-sm font-medium text-foreground">      <ProviderInstanceIcon        driverKind={driver}        displayName={instanceLabel}        accentColor={accentColor}        showBadge={Boolean(accentColor)}        indicatorBackground="var(--background)"        className="size-5"        iconClassName="size-4 text-foreground/80"      />      <span className="truncate">{label}</span>      {instanceLabel !== label ? (        <span className="min-w-0 truncate text-xs font-normal text-muted-foreground">          · {instanceLabel}        </span>      ) : null}      {plan ? <span className="font-normal text-muted-foreground">· {plan}</span> : null}      {email ? (        <RedactedSensitiveText          value={email}          ariaLabel="Toggle account email visibility"          revealTooltip="Click to reveal email"          hideTooltip="Click to hide email"        />      ) : null}    </h2>  );} function ProviderLimits({  provider,  environmentId,  now,}: {  readonly provider: ServerProvider;  readonly environmentId: EnvironmentId;  readonly now: number;}) {  const limits = provider.usageLimits;  if (!limits) return null;  const notice = limitsNotice(limits);  return (    <section className="flex flex-col gap-3">      <AccountHeading        driver={provider.driver}        label={getDriverOption(provider.driver)?.label ?? String(provider.driver)}        instanceLabel={providerLimitsLabel(provider, (driver) => getDriverOption(driver)?.label)}        plan={provider.auth.label}        email={provider.auth.email}        accentColor={provider.accentColor}      />      {notice ? (        <span className="text-xs text-muted-foreground">{notice}</span>      ) : (        <LimitWindows driver={provider.driver} windows={limits.windows} now={now} />      )}      {limits.resetCredits ? (        <ResetCredits          environmentId={environmentId}          instanceId={provider.instanceId}          credits={limits.resetCredits}          now={now}        />      ) : null}    </section>  );} const OUTCOME_TEXT: Record<ProviderConsumeResetCreditOutcome, string> = {  reset: "Reset applied. Your windows have cleared.",  nothingToReset: "Nothing to reset right now.",  noCredit: "No reset credit left.",  alreadyRedeemed: "That credit was already redeemed.",}; /** * Banked reset credits with a confirmed redeem action. Redeeming spends a * credit the provider granted the user, so it never fires on a bare click. */function ResetCredits({  environmentId,  instanceId,  credits,  now,}: {  readonly environmentId: EnvironmentId;  readonly instanceId: ProviderInstanceId;  readonly credits: ServerProviderResetCredits;  readonly now: number;}) {  const consume = useAtomCommand(serverEnvironment.consumeResetCredit, { reportFailure: false });  const [confirming, setConfirming] = useState(false);  const [busy, setBusy] = useState(false);  const [status, setStatus] = useState<string | null>(null);  if (credits.availableCount === 0 && status === null) return null;   const expiresIn = credits.nextExpiresAt    ? formatDuration(Date.parse(credits.nextExpiresAt) - now)    : null;  const summary =    credits.availableCount === 0      ? "No reset credits banked"      : `${credits.availableCount} ${credits.availableCount === 1 ? "reset credit" : "reset credits"} banked${          expiresIn ? ` · next expires in ${expiresIn}` : ""        }`;   const redeem = async () => {    setConfirming(false);    setBusy(true);    setStatus(null);    const result = await consume({ environmentId, input: { instanceId } });    setBusy(false);    if (result._tag === "Success") {      setStatus(OUTCOME_TEXT[result.value.outcome]);      return;    }    setStatus(      "error" in result.cause && result.cause.error instanceof Error        ? result.cause.error.message        : "Could not use the reset credit.",    );  };   return (    <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">      <span className="tabular-nums">{summary}</span>      {credits.availableCount > 0 ? (        <Button size="xs" variant="outline" disabled={busy} onClick={() => setConfirming(true)}>          {busy ? "Using credit…" : "Use a reset credit"}        </Button>      ) : null}      {status ? <span className="text-foreground">{status}</span> : null}      <AlertDialog open={confirming} onOpenChange={setConfirming}>        <AlertDialogPopup>          <AlertDialogHeader>            <AlertDialogTitle>Use a reset credit?</AlertDialogTitle>            <AlertDialogDescription>              This redeems one credit on your account and clears the current rate-limit windows. It              cannot be undone.            </AlertDialogDescription>          </AlertDialogHeader>          <AlertDialogFooter>            <AlertDialogClose render={<Button variant="outline" />}>Cancel</AlertDialogClose>            <Button onClick={() => void redeem()}>Use credit</Button>          </AlertDialogFooter>        </AlertDialogPopup>      </AlertDialog>    </div>  );} /** One account pooled by a usage-limit source, drawn like a provider row. */function SourceAccountLimits({  account,  sourceKind,  now,}: {  readonly account: UsageLimitSourceAccount;  readonly sourceKind: string;  readonly now: number;}) {  const notice = limitsNotice(account.usageLimits);  return (    <section className="flex flex-col gap-3">      <AccountHeading        driver={account.driver}        label={getDriverOption(account.driver)?.label ?? String(account.driver)}        instanceLabel={sourceKind}        plan={account.plan}        email={account.email}      />      {notice ? (        <span className="text-xs text-muted-foreground">{notice}</span>      ) : (        <LimitWindows driver={account.driver} windows={account.usageLimits.windows} now={now} />      )}    </section>  );} const SOURCE_KIND_LABEL: Record<UsageLimitSourceSnapshot["kind"], string> = {  cliproxy: "CLI Proxy",}; type LimitsSource = ReturnType<typeof collectLimitSources>[number]; /** Read-only accounts pooled by a configured usage source. */function SourceLimits({ source, now }: { readonly source: LimitsSource; readonly now: number }) {  const kind = SOURCE_KIND_LABEL[source.kind];  return (    <div className="flex flex-col gap-6">      {source.error ? (        <span className="text-xs text-muted-foreground">{source.error}</span>      ) : source.accounts.length === 0 ? (        <span className="text-xs text-muted-foreground">          {source.hiddenAccountCount > 0            ? "All accounts are shown by connected providers."            : "No accounts reported."}        </span>      ) : (        source.accounts.map((account) => (          <SourceAccountLimits key={account.id} account={account} sourceKind={kind} now={now} />        ))      )}    </div>  );} /** * Subscription quota windows from every connected environment's providers. * Countdowns anchor to render time rather than ticking: a live clock would * repaint the page every minute for no decision-changing gain. */export function UsageLimitsSection() {  const presentations = useAtomValue(environmentPresentations.presentationsAtom);  const groups = collectLimitsGroups(presentations);  const sources = collectLimitSources(presentations);  // Anchored once per mount on purpose: countdowns must not tick (see below).  const [now] = useState(() => Date.now());   return (    <div className="flex flex-col gap-8">      {groups.length === 0 && sources.length === 0 ? (        <p className="text-sm text-muted-foreground">          No provider on a connected environment reports subscription limits.        </p>      ) : null}      {sources.map((source) => (        <SourceLimits key={source.key} source={source} now={now} />      ))}      {groups.map((group) => (        <div key={group.environmentId} className="flex flex-col gap-6">          {group.environmentLabel ? (            <h2 className="text-xs tracking-wide text-muted-foreground uppercase">              {group.environmentLabel}            </h2>          ) : null}          {group.providers.map((provider) => (            <ProviderLimits              key={provider.instanceId}              provider={provider}              environmentId={group.environmentId}              now={now}            />          ))}        </div>      ))}    </div>  );}