@opengeni/react 6.8.0 → 6.9.1-canary.41937124785001

package/src/app/components/session/subscription-account-indicator.test.ts

@@ -16,6 +16,8 @@ import {
 const RESET_5H = "2026-10-22T21:00:00.000Z";
 const RESET_WEEK = "2026-10-26T12:00:00.000Z";
 const OBSERVED = "2026-10-22T16:50:00.000Z";
+// Read the menu just after the reading, before any window resets.
+const NOW = Date.parse(OBSERVED) + 60_000;
 
 const facts = [
   { id: "a", label: "Team 1", email: "a@example.test", used: [36, 62] },
@@ -30,8 +32,16 @@ function codexAccount(fact: (typeof facts)[number]): CodexAccount {
     email: fact.email,
     plan: "Pro",
     status: "active",
-    fiveHour: { percent: fact.used[0], remaining: 100 - fact.used[0], resetAt: RESET_5H },
-    weekly: { percent: fact.used[1], remaining: 100 - fact.used[1], resetAt: RESET_WEEK },
+    fiveHour: {
+      percent: fact.used[0],
+      remaining: 100 - fact.used[0],
+      resetAt: RESET_5H,
+    },
+    weekly: {
+      percent: fact.used[1],
+      remaining: 100 - fact.used[1],
+      resetAt: RESET_WEEK,
+    },
     usageCheckedAt: OBSERVED,
   } as CodexAccount;
 }
@@ -51,8 +61,18 @@ function claudeOption(fact: (typeof facts)[number]): ModelAccountChoiceOption {
     usage: {
       observedAt: OBSERVED,
       windows: [
-        { id: "five_hour", usedPercent: fact.used[0], resetsAt: RESET_5H, status: "ok" },
-        { id: "seven_day", usedPercent: fact.used[1], resetsAt: RESET_WEEK, status: "ok" },
+        {
+          id: "five_hour",
+          usedPercent: fact.used[0],
+          resetsAt: RESET_5H,
+          status: "ok",
+        },
+        {
+          id: "seven_day",
+          usedPercent: fact.used[1],
+          resetsAt: RESET_WEEK,
+          status: "ok",
+        },
       ],
       exhaustedUntil: null,
       exhaustedKind: null,
@@ -102,10 +122,18 @@ function claude(choice: Partial<SessionModelAccountChoiceResponse> = {}) {
           reasoningEffort: "high",
           latencyMode: "standard",
         },
-        binding: { provider: "claude", connectionId: null, choice: "automatic" },
+        binding: {
+          provider: "claude",
+          connectionId: null,
+          choice: "automatic",
+        },
         bindings: [{ provider: "claude", connectionId: null, choice: "automatic" }],
         accounts: facts.map(claudeOption),
-        personal: { connectionsAllowed: false, fallbackAllowed: false, fallbackOptIn: false },
+        personal: {
+          connectionsAllowed: false,
+          fallbackAllowed: false,
+          fallbackOptIn: false,
+        },
         ...choice,
       },
     },
@@ -113,24 +141,37 @@ function claude(choice: Partial<SessionModelAccountChoiceResponse> = {}) {
   );
 }
 
-const neutral = (value: unknown) => JSON.stringify(value).replaceAll(/Claude|Codex/g, "X");
+const neutral = (value: unknown) => JSON.stringify(value).replaceAll(/Claude|ChatGPT|Codex/g, "X");
 
 describe("Codex and Claude sources", () => {
   test("the same accounts and usage produce the same menu", () => {
-    const fromCodex = subscriptionAccountMenuContent(codex());
-    const fromClaude = subscriptionAccountMenuContent(claude());
+    const fromCodex = subscriptionAccountMenuContent(codex(), NOW);
+    const fromClaude = subscriptionAccountMenuContent(claude(), NOW);
     expect(neutral(fromCodex)).toBe(neutral(fromClaude));
     expect(fromCodex.selectionLabel).toBe("Current account");
-    expect(fromCodex.usage.windows?.map((window) => [window.label, window.usedPercent])).toEqual([
-      ["5h", 36],
-      ["Week", 62],
+    expect(fromCodex.usage.windows?.map((window) => [window.label, window.leftPercent])).toEqual([
+      ["5h", 64],
+      ["Week", 38],
     ]);
-    expect(fromCodex.accounts[1]?.usageSummary).toBe("5h 74% · Week 21% used");
+    expect(
+      fromCodex.accounts[1]?.windows?.map((window) => [window.label, window.leftPercent]),
+    ).toEqual([
+      ["5h", 26],
+      ["Week", 79],
+    ]);
+    // Both accounts share a plan, so it is named once above the list.
+    expect(fromCodex.plan).toBe("ChatGPT Pro");
+    expect(fromCodex.accounts.map((account) => account.plan)).toEqual([null, null]);
   });
 
   test("an explicit choice reads the same from both sources", () => {
     const fromCodex = subscriptionAccountMenuContent(
-      codex({ pinnedAccountId: "b", currentSelection: null, currentAccount: null }),
+      codex({
+        pinnedAccountId: "b",
+        currentSelection: null,
+        currentAccount: null,
+      }),
+      NOW,
     );
     const fromClaude = subscriptionAccountMenuContent(
       claude({
@@ -138,6 +179,7 @@ describe("Codex and Claude sources", () => {
         binding: { provider: "claude", connectionId: "b", choice: "explicit" },
         bindings: [{ provider: "claude", connectionId: "b", choice: "explicit" }],
       }),
+      NOW,
     );
     expect(neutral(fromCodex)).toBe(neutral(fromClaude));
     expect(fromCodex.selectionLabel).toBe("Chosen account");
@@ -203,18 +245,32 @@ describe("Codex usage", () => {
 
   test("a cooling-down account says until when", () => {
     const usage = codexUsage(
-      { ...base, fiveHour: null, weekly: null, exhaustedUntil: RESET_5H } as CodexAccount,
+      {
+        ...base,
+        fiveHour: null,
+        weekly: null,
+        exhaustedUntil: RESET_5H,
+      } as CodexAccount,
       undefined,
       Date.parse(RESET_5H) - 1,
     );
-    expect(usage).toMatchObject({ windows: [], exhaustedUntil: RESET_5H, exhaustedKind: "quota" });
+    expect(usage).toMatchObject({
+      windows: [],
+      exhaustedUntil: RESET_5H,
+      exhaustedKind: "quota",
+    });
     expect(codexUsage({ ...base, fiveHour: null, weekly: null } as CodexAccount, undefined)).toBe(
       null,
     );
     // An ended cooldown is not a limit.
     expect(
       codexUsage(
-        { ...base, fiveHour: null, weekly: null, exhaustedUntil: RESET_5H } as CodexAccount,
+        {
+          ...base,
+          fiveHour: null,
+          weekly: null,
+          exhaustedUntil: RESET_5H,
+        } as CodexAccount,
         undefined,
         Date.parse(RESET_5H) + 1,
       ),
@@ -227,7 +283,11 @@ describe("Codex usage", () => {
       chatgptAccountId: "acct-123",
       status: "active",
     } as CodexAccount;
-    const state = codex({ accounts: [bare], currentSelection: null, currentAccount: null });
+    const state = codex({
+      accounts: [bare],
+      currentSelection: null,
+      currentAccount: null,
+    });
     expect(subscriptionAccountMenuContent(state).accounts[0]?.label).toBe("acct-123");
     const named = codex({
       accounts: [{ ...bare, email: "z@example.test" }],

package/src/app/components/session/subscription-account-indicator.tsx

@@ -19,6 +19,7 @@ import {
   type UseSessionModelAccountResult,
 } from "../../../hooks/use-session-model-account";
 import { Skeleton } from "../../../ui/skeleton";
+import { codexWindowInputs } from "../../lib/subscription-accounts";
 import { BillingClassMark } from "../billing-class-mark";
 import {
   showsSubscriptionAccountMenu,
@@ -201,37 +202,21 @@ export function codexUsage(
   live: CodexUsageMap[string] | undefined,
   now = Date.now(),
 ): SubscriptionAccountUsage | null {
-  const window = (
-    id: string,
-    reading: CodexAccount["fiveHour"],
-  ): SubscriptionAccountUsage["windows"] => {
-    if (!reading) return [];
-    const usedPercent =
-      typeof reading.percent === "number"
-        ? reading.percent
-        : typeof reading.remaining === "number"
-          ? 100 - reading.remaining
-          : null;
-    return [
-      {
-        id,
-        usedPercent,
-        resetsAt: reading.resetAt ?? null,
-        status:
-          usedPercent === null
-            ? "unknown"
-            : usedPercent >= 100
-              ? "exhausted"
-              : usedPercent >= 90
-                ? "warning"
-                : "ok",
-      },
-    ];
-  };
-  const windows = [
-    ...window("five_hour", account.fiveHour),
-    ...window("seven_day", account.weekly),
-  ];
+  // Only the windows the endpoint reported: a Pro plan without a 5-hour limit has none.
+  const windows: SubscriptionAccountUsage["windows"] = codexWindowInputs(account).map((input) => ({
+    id: input.id,
+    usedPercent: input.usedPercent,
+    resetsAt:
+      typeof input.resetsAt === "number" ? new Date(input.resetsAt).toISOString() : input.resetsAt,
+    status:
+      input.usedPercent === null
+        ? "unknown"
+        : input.usedPercent >= 100
+          ? "exhausted"
+          : input.usedPercent >= 90
+            ? "warning"
+            : "ok",
+  }));
   // The endpoint reports a cooldown even after it ended; only a future one applies.
   const exhaustedUntil =
     account.exhaustedUntil && Date.parse(account.exhaustedUntil) > now

package/src/app/components/session/subscription-account-menu.tsx

@@ -10,32 +10,32 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
-  DropdownMenuMeta,
   DropdownMenuNote,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "../../../ui/dropdown-menu";
 import { cn } from "../../lib/utils";
+import type { SubscriptionWindow } from "../../lib/subscription-accounts";
+import { SubscriptionUsageWindows } from "../models/subscription-usage";
 
 export type SubscriptionAccountMenuRow = {
   id: string;
+  /** The account's full name (label or email); wraps, never truncated. */
   label: string;
+  /** The email under a label that differs from it. */
+  email?: string | null | undefined;
+  /** The plan's own name, only when the listed accounts' plans differ. */
   plan?: string | null | undefined;
   status?: string | null;
+  /** `next_turn`: the chosen account. `in_use`: the account the chat runs on. */
+  mark?: "next_turn" | "in_use" | null | undefined;
+  /** Every reported window; null while hidden (the current account, a live check). */
+  windows?: SubscriptionWindow[] | null | undefined;
+  /** Words instead of windows: no reading yet, or a limit no window shows. */
+  usageMessage?: string | null | undefined;
   detail?: string;
   personal?: boolean;
   disabled?: boolean;
-  /** Per-window readings, not an aggregate capacity/eligibility estimate. */
-  usageSummary?: string | undefined;
-  /** The row's most-used window, drawn as a small bar beside the summary. */
-  usageBar?: { label: string; usedPercent: number } | undefined;
-};
-
-export type SubscriptionAccountUsageWindow = {
-  label: string;
-  /** Null means unknown; values over 100 can represent overage. */
-  usedPercent: number | null;
-  detail?: string;
 };
 
 export type SubscriptionAccountMenuUsage = {
@@ -43,66 +43,10 @@ export type SubscriptionAccountMenuUsage = {
   unavailable?: boolean | undefined;
   message?: string | undefined;
   note?: string | undefined;
-  windows?: SubscriptionAccountUsageWindow[] | undefined;
+  windows?: SubscriptionWindow[] | undefined;
 };
 
-function UsageRow({ label, usedPercent, detail }: SubscriptionAccountUsageWindow) {
-  const known = typeof usedPercent === "number" && Number.isFinite(usedPercent);
-  const pct = known ? Math.min(100, Math.max(0, usedPercent)) : 0;
-  const text = known ? `${Math.round(usedPercent)}% used` : "Unknown";
-  return (
-    <div className="space-y-0.5 text-2xs text-fg-subtle">
-      <div className="flex items-center gap-2">
-        <span className="max-w-28 min-w-10 shrink-0 truncate" title={label}>
-          {label}
-        </span>
-        {known ? (
-          <span
-            className="h-1 min-w-0 flex-1 overflow-hidden rounded-full bg-surface-2"
-            role="progressbar"
-            aria-label={`${label} used`}
-            aria-valuemin={0}
-            aria-valuemax={100}
-            aria-valuenow={pct}
-            aria-valuetext={text}
-          >
-            <span
-              className={cn(
-                "block h-full rounded-full",
-                pct >= 90 ? "bg-status-waiting" : "bg-brand",
-              )}
-              style={{ width: `${pct}%` }}
-            />
-          </span>
-        ) : (
-          <span className="flex-1" />
-        )}
-        <span className="shrink-0 whitespace-nowrap text-right tabular-nums">{text}</span>
-      </div>
-      {detail ? <p>{detail}</p> : null}
-    </div>
-  );
-}
-
-function RowUsageBar({ label, usedPercent }: { label: string; usedPercent: number }) {
-  const pct = Math.min(100, Math.max(0, usedPercent));
-  return (
-    <span
-      className="h-1 w-10 shrink-0 overflow-hidden rounded-full bg-surface-2"
-      role="progressbar"
-      aria-label={`${label} used`}
-      aria-valuemin={0}
-      aria-valuemax={100}
-      aria-valuenow={pct}
-      aria-valuetext={`${Math.round(usedPercent)}% used`}
-    >
-      <span
-        className={cn("block h-full rounded-full", pct >= 90 ? "bg-status-waiting" : "bg-brand")}
-        style={{ width: `${pct}%` }}
-      />
-    </span>
-  );
-}
+const MARK_TEXT = { next_turn: "Next turn", in_use: "In use" } as const;
 
 export function SubscriptionAccountMenu({
   ariaLabel,
@@ -115,6 +59,7 @@ export function SubscriptionAccountMenu({
   tone = "ok",
   usage,
   accounts,
+  plan,
   selectedId,
   automaticSelected,
   choosing,
@@ -137,6 +82,8 @@ export function SubscriptionAccountMenu({
   tone?: "ok" | "warn" | "bad" | undefined;
   usage: SubscriptionAccountMenuUsage;
   accounts: SubscriptionAccountMenuRow[];
+  /** The plan every listed account shares, shown once beside the list. */
+  plan?: string | null | undefined;
   selectedId: string | null;
   automaticSelected: boolean;
   choosing: boolean;
@@ -154,31 +101,59 @@ export function SubscriptionAccountMenu({
       key={account.id}
       disabled={choosing || account.disabled}
       title={account.detail}
+      data-mark={account.mark ?? undefined}
       onSelect={(event) => {
         event.preventDefault();
         onChoose(account.id);
       }}
-      className="cursor-pointer"
+      className="cursor-pointer items-start"
     >
-      <span className="min-w-0 flex-1">
-        <span className="block truncate">{account.label}</span>
-        {account.usageSummary ? (
-          <span className="flex min-w-0 items-center gap-1.5 text-2xs text-fg-subtle">
-            {account.usageBar ? <RowUsageBar {...account.usageBar} /> : null}
-            <span className="min-w-0 truncate" title={account.usageSummary}>
-              {account.usageSummary}
-            </span>
+      <span className="min-w-0 flex-1 space-y-1">
+        <span className="flex min-w-0 items-baseline gap-2">
+          <span
+            data-slot="subscription-account-name"
+            className={cn(
+              "min-w-0 flex-1 [overflow-wrap:anywhere]",
+              account.mark === "next_turn" && "font-medium",
+            )}
+          >
+            {account.label}
+          </span>
+          {account.plan ? (
+            <span className="shrink-0 text-xs text-fg-muted">{account.plan}</span>
+          ) : null}
+        </span>
+        {account.email ? (
+          <span className="block text-2xs leading-4 text-fg-subtle [overflow-wrap:anywhere]">
+            {account.email}
+          </span>
+        ) : null}
+        {account.mark || account.status ? (
+          <span className="flex flex-wrap items-center gap-x-2 text-2xs leading-4">
+            {account.mark ? (
+              <span
+                className={cn(
+                  "font-medium",
+                  account.mark === "next_turn" ? "text-brand" : "text-fg-muted",
+                )}
+              >
+                {MARK_TEXT[account.mark]}
+              </span>
+            ) : null}
+            {account.status ? <span className="text-status-waiting">{account.status}</span> : null}
           </span>
         ) : null}
+        {account.windows && account.windows.length > 0 ? (
+          <SubscriptionUsageWindows windows={account.windows} empty={null} />
+        ) : null}
+        {account.usageMessage ? (
+          <span className="block text-2xs leading-4 text-fg-subtle">{account.usageMessage}</span>
+        ) : null}
       </span>
-      {account.plan ? <DropdownMenuMeta>{account.plan}</DropdownMenuMeta> : null}
-      {account.status ? (
-        <span className="shrink-0 text-xs text-status-waiting">{account.status}</span>
-      ) : null}
       {choosingTarget === account.id ? (
-        <Loader2Icon className="size-4 shrink-0 animate-spin" />
+        <Loader2Icon className="mt-0.5 size-4 shrink-0 animate-spin" />
       ) : (
-        <DropdownMenuCheck checked={account.id === selectedId} className="ml-0" />
+        <DropdownMenuCheck checked={account.id === selectedId} className="mt-0.5 ml-0" />
       )}
     </DropdownMenuItem>
   );
@@ -220,7 +195,7 @@ export function SubscriptionAccountMenu({
         side="bottom"
         sideOffset={8}
         collisionPadding={12}
-        className="flex max-h-[min(32rem,var(--radix-dropdown-menu-content-available-height))] w-72 flex-col overflow-hidden"
+        className="flex max-h-[min(40rem,var(--radix-dropdown-menu-content-available-height))] w-[min(24rem,calc(100vw-1.5rem))] flex-col overflow-hidden"
       >
         <div className="shrink-0 space-y-2 px-2.5 pt-1.5 pb-2">
           <div className="flex items-start gap-2">
@@ -229,34 +204,37 @@ export function SubscriptionAccountMenu({
             </span>
             <div className="min-w-0 flex-1">
               <p className="text-2xs text-fg-subtle">{selectionLabel}</p>
-              <p className="truncate text-sm font-medium text-fg">{displayName}</p>
+              <p className="text-sm font-medium text-fg [overflow-wrap:anywhere]">{displayName}</p>
               {identity ? (
-                <p className="truncate text-2xs text-fg-subtle" title={identity}>
-                  {identity}
-                </p>
+                <p className="text-2xs text-fg-subtle [overflow-wrap:anywhere]">{identity}</p>
               ) : null}
-              <p className="truncate text-2xs text-fg-subtle" title={metadata}>
-                {metadata}
-              </p>
+              <p className="text-2xs text-fg-subtle">{metadata}</p>
             </div>
           </div>
           {usage.checking ? (
             <p className="text-2xs text-fg-subtle">Checking usage…</p>
           ) : usage.unavailable ? (
             <p className="text-2xs text-fg-subtle">Usage unavailable</p>
-          ) : usage.message ? (
-            <p className="text-2xs text-fg-subtle">{usage.message}</p>
           ) : (
-            <div className="max-h-36 space-y-1.5 overflow-y-auto overscroll-contain">
-              {usage.windows?.map((window) => (
-                <UsageRow key={window.label} {...window} />
-              ))}
-            </div>
+            <>
+              {usage.windows && usage.windows.length > 0 ? (
+                <SubscriptionUsageWindows
+                  windows={usage.windows}
+                  layout="stack"
+                  empty={null}
+                  className="max-h-36 overflow-y-auto overscroll-contain text-xs leading-5"
+                />
+              ) : null}
+              {usage.message ? <p className="text-2xs text-fg-subtle">{usage.message}</p> : null}
+            </>
           )}
           {usage.note ? <p className="text-2xs text-fg-subtle">{usage.note}</p> : null}
         </div>
         <DropdownMenuSeparator className="shrink-0" />
-        <DropdownMenuLabel className="shrink-0">{actionLabel}</DropdownMenuLabel>
+        <DropdownMenuLabel className="flex shrink-0 items-baseline justify-between gap-3">
+          <span>{actionLabel}</span>
+          {plan ? <span className="font-normal text-fg-subtle">{plan}</span> : null}
+        </DropdownMenuLabel>
         <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
           <DropdownMenuItem
             disabled={choosing}