feat(web): render provider quota usage buckets in settings

Author: Aditya190803

apps/web/src/components/settings/SettingsPanels.tsx

@@ -16,6 +16,7 @@ import {
   type ProviderKind,
   type ServerProvider,
   type ServerProviderModel,
+  type ServerProviderUsageBucket,
   ThreadId,
 } from "@t3tools/contracts";
 import { DEFAULT_UNIFIED_SETTINGS } from "@t3tools/contracts/settings";
@@ -46,6 +47,11 @@ import {
   getCustomModelOptionsByProvider,
   resolveAppModelSelectionState,
 } from "../../modelSelection";
+import {
+  formatUsageRemainingPercent,
+  formatUsageResetAt,
+  getProviderUsageBuckets,
+} from "../../lib/accountQuota";
 import { ensureNativeApi, readNativeApi } from "../../nativeApi";
 import { useStore } from "../../store";
 import { formatRelativeTime, formatRelativeTimeLabel } from "../../timestampFormat";
@@ -60,6 +66,51 @@ import { toastManager } from "../ui/toast";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import { ProjectFavicon } from "../ProjectFavicon";
 
+function ProviderUsageRows({
+  buckets,
+  timestampFormat,
+}: {
+  buckets: ReadonlyArray<ServerProviderUsageBucket>;
+  timestampFormat: "locale" | "12-hour" | "24-hour";
+}) {
+  if (buckets.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="px-4 pb-4 sm:px-5">
+      <div className="space-y-3">
+        {buckets.map((bucket) => (
+          <div key={bucket.id} className="space-y-1.5">
+            <div className="flex items-center justify-between gap-3">
+              <span className="text-xs font-medium text-foreground">{bucket.label}</span>
+              <span className="text-[11px] text-muted-foreground">
+                {formatUsageRemainingPercent(bucket)}
+              </span>
+            </div>
+            <div
+              className="h-1.5 overflow-hidden rounded-full bg-muted"
+              role="progressbar"
+              aria-label={bucket.label}
+              aria-valuemin={0}
+              aria-valuemax={100}
+              aria-valuenow={bucket.usedPercent}
+            >
+              <div
+                className="h-full rounded-full bg-foreground/80 transition-[width]"
+                style={{ width: `${bucket.usedPercent}%` }}
+              />
+            </div>
+            <div className="text-[11px] text-muted-foreground">
+              {formatUsageResetAt(bucket.resetsAt, timestampFormat)}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
 const THEME_OPTIONS = [
   {
     value: "system",
@@ -1064,6 +1115,7 @@ export function GeneralSettingsPanel() {
           const customModelError = customModelErrorByProvider[providerCard.provider] ?? null;
           const providerDisplayName =
             PROVIDER_DISPLAY_NAMES[providerCard.provider] ?? providerCard.title;
+          const usageBuckets = getProviderUsageBuckets(providerCard.liveProvider);
 
           return (
             <div key={providerCard.provider} className="border-t border-border first:border-t-0">
@@ -1154,6 +1206,11 @@ export function GeneralSettingsPanel() {
                 </div>
               </div>
 
+              <ProviderUsageRows
+                buckets={usageBuckets}
+                timestampFormat={settings.timestampFormat}
+              />
+
               <Collapsible
                 open={openProviderDetails[providerCard.provider]}
                 onOpenChange={(open) =>

apps/web/src/lib/accountQuota.test.ts

@@ -0,0 +1,77 @@
+import { describe, expect, it } from "vitest";
+import type { ServerProvider } from "@t3tools/contracts";
+
+import {
+  formatUsageRemainingPercent,
+  formatUsageResetAt,
+  getProviderUsageBuckets,
+} from "./accountQuota";
+
+function makeProvider(
+  input: Partial<ServerProvider> & Pick<ServerProvider, "provider">,
+): ServerProvider {
+  return {
+    enabled: true,
+    installed: true,
+    version: "0.117.0",
+    status: "ready",
+    auth: { status: "authenticated" },
+    checkedAt: "2026-03-30T00:00:00.000Z",
+    models: [],
+    ...input,
+  };
+}
+
+describe("accountQuota", () => {
+  it("returns provider usage buckets in normalized order", () => {
+    const buckets = getProviderUsageBuckets(
+      makeProvider({
+        provider: "codex",
+        usage: {
+          buckets: [
+            {
+              id: "fiveHour",
+              label: "5 hour usage limit",
+              remainingPercent: 67,
+              usedPercent: 33,
+              resetsAt: "2026-04-01T05:30:00.000Z",
+            },
+            {
+              id: "weekly",
+              label: "Weekly usage limit",
+              remainingPercent: 71,
+              usedPercent: 29,
+              resetsAt: "2026-04-06T05:12:45.000Z",
+            },
+          ],
+          updatedAt: "2026-03-31T10:00:00.000Z",
+        },
+      }),
+    );
+
+    expect(buckets).toHaveLength(2);
+    expect(buckets[0]?.id).toBe("fiveHour");
+    expect(buckets[1]?.id).toBe("weekly");
+  });
+
+  it("formats compact remaining percentages", () => {
+    expect(
+      formatUsageRemainingPercent({
+        id: "weekly",
+        label: "Weekly usage limit",
+        remainingPercent: 58,
+        usedPercent: 42,
+        resetsAt: "2026-04-06T05:12:45.000Z",
+      }),
+    ).toBe("58% remaining");
+  });
+
+  it("formats reset timestamps using the selected time format", () => {
+    expect(formatUsageResetAt("2026-04-06T17:05:00.000Z", "24-hour")).not.toMatch(/[AP]M/);
+    expect(formatUsageResetAt("2026-04-06T17:05:00.000Z", "12-hour")).toMatch(/[AP]M/);
+  });
+
+  it("returns an empty list when usage is unavailable", () => {
+    expect(getProviderUsageBuckets(makeProvider({ provider: "claudeAgent" }))).toEqual([]);
+  });
+});

apps/web/src/lib/accountQuota.ts

@@ -0,0 +1,40 @@
+import type {
+  ServerProvider,
+  ServerProviderUsageBucket,
+  TimestampFormat,
+} from "@t3tools/contracts";
+import { getTimestampFormatOptions } from "../timestampFormat";
+
+export function getProviderUsageBuckets(
+  provider: ServerProvider | null | undefined,
+): ReadonlyArray<ServerProviderUsageBucket> {
+  return provider?.usage?.buckets ?? [];
+}
+
+export function formatUsageRemainingPercent(bucket: ServerProviderUsageBucket): string {
+  const rounded = Number.isInteger(bucket.remainingPercent)
+    ? bucket.remainingPercent
+    : Number(bucket.remainingPercent.toFixed(1));
+  return `${rounded}% remaining`;
+}
+
+const usageResetFormatterCache = new Map<string, Intl.DateTimeFormat>();
+
+function getUsageResetFormatter(timestampFormat: TimestampFormat): Intl.DateTimeFormat {
+  const cached = usageResetFormatterCache.get(timestampFormat);
+  if (cached) {
+    return cached;
+  }
+
+  const formatter = new Intl.DateTimeFormat(undefined, {
+    month: "short",
+    day: "numeric",
+    ...getTimestampFormatOptions(timestampFormat, false),
+  });
+  usageResetFormatterCache.set(timestampFormat, formatter);
+  return formatter;
+}
+
+export function formatUsageResetAt(isoDate: string, timestampFormat: TimestampFormat): string {
+  return `Resets ${getUsageResetFormatter(timestampFormat).format(new Date(isoDate))}`;
+}