feat: OpenUsage rate limits panel (from dpcode)

apps/web/src/components/RateLimitSummaryList.tsx

@@ -0,0 +1,40 @@
+// FILE: RateLimitSummaryList.tsx
+// Purpose: Renders the compact rate-limit rows shared by the local popover and
+// the dedicated rate-limit panel.
+
+import { useMemo } from "react";
+
+import type { ProviderRateLimit } from "~/lib/rateLimits";
+import {
+  deriveVisibleRateLimitRows,
+  formatRateLimitRemainingPercent,
+  formatRateLimitResetTime,
+} from "~/lib/rateLimits";
+
+export function RateLimitSummaryList({
+  rateLimits,
+}: {
+  rateLimits: ReadonlyArray<ProviderRateLimit>;
+}) {
+  const rows = useMemo(() => deriveVisibleRateLimitRows(rateLimits), [rateLimits]);
+
+  if (rows.length === 0) {
+    return <p className="text-xs text-muted-foreground">No rate limit data yet.</p>;
+  }
+
+  return (
+    <>
+      {rows.map((row) => (
+        <div key={row.id} className="flex items-center justify-between text-xs">
+          <span className="font-medium text-foreground">{row.label}</span>
+          <span className="flex items-center gap-2 tabular-nums text-muted-foreground">
+            <span className="text-foreground">
+              {formatRateLimitRemainingPercent(row.remainingPercent)}
+            </span>
+            {row.resetsAt ? <span>{formatRateLimitResetTime(row.resetsAt)}</span> : null}
+          </span>
+        </div>
+      ))}
+    </>
+  );
+}

apps/web/src/components/RateLimitsPanel.test.tsx

@@ -0,0 +1,231 @@
+import { describe, expect, it } from "vitest";
+import { EventId, type OrchestrationThreadActivity, TurnId } from "@t3tools/contracts";
+
+import {
+  deriveAccountRateLimits,
+  deriveVisibleRateLimitRows,
+  formatRateLimitRemainingPercent,
+} from "~/lib/rateLimits";
+
+function makeActivity(
+  id: string,
+  kind: string,
+  payload: unknown,
+  createdAt = "2099-04-08T18:00:00.000Z",
+): OrchestrationThreadActivity {
+  return {
+    id: EventId.make(id),
+    tone: "info",
+    kind,
+    summary: kind,
+    payload,
+    turnId: TurnId.make("turn-1"),
+    createdAt,
+  };
+}
+
+describe("RateLimitsPanel helpers", () => {
+  it("normalizes direct rate-limit snapshots into visible 5h and Weekly rows", () => {
+    const rateLimits = deriveAccountRateLimits([
+      {
+        activities: [
+          makeActivity("activity-1", "account.rate-limits.updated", {
+            provider: "codex",
+            rateLimitsByLimitId: {
+              short: {
+                primary: {
+                  usedPercent: 12,
+                  windowDurationMins: 300,
+                  resetsAt: "2099-04-08T20:43:00.000Z",
+                },
+              },
+              weekly: {
+                primary: {
+                  usedPercent: 8,
+                  windowDurationMins: 10_080,
+                  resetsAt: "2099-04-15T00:00:00.000Z",
+                },
+              },
+            },
+          }),
+        ],
+      },
+    ]);
+
+    const rows = deriveVisibleRateLimitRows(rateLimits);
+
+    expect(rows).toEqual([
+      {
+        id: "codex-5h",
+        label: "5h",
+        remainingPercent: 88,
+        resetsAt: "2099-04-08T20:43:00.000Z",
+        windowDurationMins: 300,
+      },
+      {
+        id: "codex-Weekly",
+        label: "Weekly",
+        remainingPercent: 92,
+        resetsAt: "2099-04-15T00:00:00.000Z",
+        windowDurationMins: 10080,
+      },
+    ]);
+    expect(formatRateLimitRemainingPercent(rows[0]?.remainingPercent)).toBe("88%");
+  });
+
+  it("keeps the most constrained row when multiple providers report the same window", () => {
+    const rows = deriveVisibleRateLimitRows([
+      {
+        provider: "codex",
+        updatedAt: "2099-04-08T18:00:00.000Z",
+        limits: [
+          {
+            window: "Weekly",
+            usedPercent: 8,
+            resetsAt: "2099-04-15T00:00:00.000Z",
+            windowDurationMins: 10080,
+          },
+        ],
+      },
+      {
+        provider: "claudeAgent",
+        updatedAt: "2099-04-08T18:05:00.000Z",
+        limits: [
+          {
+            window: "Weekly",
+            usedPercent: 20,
+            resetsAt: "2099-04-14T20:00:00.000Z",
+            windowDurationMins: 10080,
+          },
+        ],
+      },
+    ]);
+
+    expect(rows).toEqual([
+      {
+        id: "claudeAgent-Weekly",
+        label: "Weekly",
+        remainingPercent: 80,
+        resetsAt: "2099-04-14T20:00:00.000Z",
+        windowDurationMins: 10080,
+      },
+    ]);
+  });
+
+  it("reads nested codex runtime payloads like the app-server notifications", () => {
+    const rateLimits = deriveAccountRateLimits([
+      {
+        activities: [
+          makeActivity("activity-1", "account.rate-limits.updated", {
+            provider: "codex",
+            rateLimits: {
+              limitId: "codex",
+              primary: {
+                usedPercent: 12,
+                windowDurationMins: 300,
+                resetsAt: "2099-04-08T20:43:00.000Z",
+              },
+              secondary: {
+                usedPercent: 8,
+                windowDurationMins: 10_080,
+                resetsAt: "2099-04-15T00:00:00.000Z",
+              },
+            },
+          }),
+        ],
+      },
+    ]);
+
+    const rows = deriveVisibleRateLimitRows(rateLimits);
+
+    expect(rows).toEqual([
+      {
+        id: "codex-5h",
+        label: "5h",
+        remainingPercent: 88,
+        resetsAt: "2099-04-08T20:43:00.000Z",
+        windowDurationMins: 300,
+      },
+      {
+        id: "codex-Weekly",
+        label: "Weekly",
+        remainingPercent: 92,
+        resetsAt: "2099-04-15T00:00:00.000Z",
+        windowDurationMins: 10080,
+      },
+    ]);
+  });
+
+  it("reads doubly nested codex runtime payloads from provider logs", () => {
+    const rateLimits = deriveAccountRateLimits([
+      {
+        activities: [
+          makeActivity("activity-1", "account.rate-limits.updated", {
+            provider: "codex",
+            rateLimits: {
+              rateLimits: {
+                primary: {
+                  usedPercent: 20,
+                  windowDurationMins: 300,
+                  resetsAt: 4_079_388_780,
+                },
+                secondary: {
+                  usedPercent: 10,
+                  windowDurationMins: 10_080,
+                  resetsAt: 4_079_880_000,
+                },
+              },
+            },
+          }),
+        ],
+      },
+    ]);
+
+    expect(deriveVisibleRateLimitRows(rateLimits)).toEqual([
+      {
+        id: "codex-5h",
+        label: "5h",
+        remainingPercent: 80,
+        resetsAt: "2099-04-09T03:33:00.000Z",
+        windowDurationMins: 300,
+      },
+      {
+        id: "codex-Weekly",
+        label: "Weekly",
+        remainingPercent: 90,
+        resetsAt: "2099-04-14T20:00:00.000Z",
+        windowDurationMins: 10080,
+      },
+    ]);
+  });
+
+  it("reads claude rate_limit_info payloads from runtime telemetry", () => {
+    const rateLimits = deriveAccountRateLimits([
+      {
+        activities: [
+          makeActivity("activity-1", "account.rate-limits.updated", {
+            provider: "claudeAgent",
+            rate_limit_info: {
+              status: "allowed_warning",
+              rateLimitType: "five_hour",
+              utilization: 0.9,
+              resetsAt: 4_078_972_980,
+            },
+          }),
+        ],
+      },
+    ]);
+
+    const rows = deriveVisibleRateLimitRows(rateLimits);
+
+    expect(rows).toEqual([
+      {
+        id: "claudeAgent-5h",
+        label: "5h",
+        remainingPercent: 10,
+        resetsAt: "2099-04-04T08:03:00.000Z",
+        windowDurationMins: 300,
+      },
+    ]);
+  });
+});

apps/web/src/components/RateLimitsPanel.tsx

@@ -0,0 +1,68 @@
+// FILE: RateLimitsPanel.tsx
+// Purpose: Wraps the shared rate-limit summary UI in a collapsible panel fed by
+// orchestration thread activities.
+
+import { useMemo, useState } from "react";
+import type { OrchestrationThread } from "@t3tools/contracts";
+import { ChevronDownIcon, ExternalLinkIcon } from "lucide-react";
+import { deriveAccountRateLimits, deriveRateLimitLearnMoreHref } from "~/lib/rateLimits";
+import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from "./ui/collapsible";
+import { cn } from "~/lib/utils";
+import { RateLimitSummaryList } from "./RateLimitSummaryList";
+
+export default function RateLimitsPanel({
+  threads,
+}: {
+  threads: ReadonlyArray<Pick<OrchestrationThread, "activities">>;
+}) {
+  const [open, setOpen] = useState(false);
+  const rateLimits = useMemo(() => deriveAccountRateLimits(threads), [threads]);
+  const learnMoreHref = useMemo(() => deriveRateLimitLearnMoreHref(rateLimits), [rateLimits]);
+
+  if (rateLimits.length === 0) return null;
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen}>
+      <div className="mx-auto w-full max-w-3xl px-3">
+        <div className="rounded-lg border border-border/60 bg-card/50">
+          <CollapsibleTrigger className="flex w-full items-center justify-between gap-2 px-3 py-2 text-xs text-muted-foreground transition-colors hover:text-foreground">
+            <span className="flex items-center gap-1.5">
+              <svg
+                className="size-3.5"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <circle cx="12" cy="12" r="10" />
+                <polyline points="12 6 12 12 16 14" />
+              </svg>
+              <span className="font-medium">Rate limits remaining</span>
+            </span>
+            <ChevronDownIcon
+              className={cn("size-3.5 transition-transform duration-200", open && "rotate-180")}
+            />
+          </CollapsibleTrigger>
+          <CollapsiblePanel>
+            <div className="space-y-3 border-t border-border/40 px-3 pb-3 pt-2">
+              <RateLimitSummaryList rateLimits={rateLimits} />
+              {learnMoreHref ? (
+                <a
+                  href={learnMoreHref}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-1 text-[11px] text-muted-foreground transition-colors hover:text-foreground"
+                >
+                  Learn more
+                  <ExternalLinkIcon className="size-3" />
+                </a>
+              ) : null}
+            </div>
+          </CollapsiblePanel>
+        </div>
+      </div>
+    </Collapsible>
+  );
+}