@opengeni/react 4.6.1 → 4.6.2-canary.39854174564001

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

@@ -0,0 +1,239 @@
+import { describe, expect, test } from "bun:test";
+import type {
+  CodexAccount,
+  ModelAccountChoiceOption,
+  SessionModelAccountChoiceResponse,
+} from "@opengeni/sdk";
+import { subscriptionAccountMenuContent } from "./subscription-account";
+import {
+  codexAccountState,
+  codexUsage,
+  sharedAccountState,
+} from "./subscription-account-indicator";
+
+// The two data sources (Codex's session endpoint and the shared subscription
+// core) must normalize the same facts into the same menu.
+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";
+
+const facts = [
+  { id: "a", label: "Team 1", email: "a@example.test", used: [36, 62] },
+  { id: "b", label: "Team 2", email: "b@example.test", used: [74, 21] },
+] as const;
+
+function codexAccount(fact: (typeof facts)[number]): CodexAccount {
+  return {
+    id: fact.id,
+    source: "organization",
+    label: fact.label,
+    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 },
+    usageCheckedAt: OBSERVED,
+  } as CodexAccount;
+}
+
+function claudeOption(fact: (typeof facts)[number]): ModelAccountChoiceOption {
+  return {
+    provider: "claude",
+    connectionId: fact.id,
+    label: fact.label,
+    accountEmail: fact.email,
+    planType: "Pro",
+    source: "organization",
+    personal: false,
+    status: "active",
+    refusal: null,
+    choosable: true,
+    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" },
+      ],
+      exhaustedUntil: null,
+      exhaustedKind: null,
+    },
+  } as ModelAccountChoiceOption;
+}
+
+const idle = { checking: false, checked: false, failed: false };
+
+function codex(extra: Partial<Parameters<typeof codexAccountState>[0]> = {}) {
+  return codexAccountState(
+    {
+      accounts: facts.map(codexAccount),
+      pinnedAccountId: null,
+      currentSelection: { credentialId: "a", waiting: false },
+      currentAccount: codexAccount(facts[0]),
+      switchAppliedTo: null,
+      loading: false,
+      error: null,
+      liveUsage: {},
+      liveUsageUpdatedAt: null,
+      pinning: false,
+      pinningTarget: null,
+      mutationError: null,
+      ...extra,
+    },
+    idle,
+  );
+}
+
+function claude(choice: Partial<SessionModelAccountChoiceResponse> = {}) {
+  return sharedAccountState(
+    "claude",
+    {
+      loading: false,
+      choosing: false,
+      choosingTarget: undefined,
+      appliedTo: null,
+      mutationError: null,
+      choice: {
+        serving: {
+          turnId: "turn-1",
+          provider: "claude",
+          connectionId: "a",
+          modelId: "m",
+          preferredModelId: "m",
+          reasoningEffort: "high",
+          latencyMode: "standard",
+        },
+        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 },
+        ...choice,
+      },
+    },
+    "turn-1",
+  );
+}
+
+const neutral = (value: unknown) => JSON.stringify(value).replaceAll(/Claude|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());
+    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.accounts[1]?.usageSummary).toBe("5h 74% · Week 21% used");
+  });
+
+  test("an explicit choice reads the same from both sources", () => {
+    const fromCodex = subscriptionAccountMenuContent(
+      codex({ pinnedAccountId: "b", currentSelection: null, currentAccount: null }),
+    );
+    const fromClaude = subscriptionAccountMenuContent(
+      claude({
+        serving: null,
+        binding: { provider: "claude", connectionId: "b", choice: "explicit" },
+        bindings: [{ provider: "claude", connectionId: "b", choice: "explicit" }],
+      }),
+    );
+    expect(neutral(fromCodex)).toBe(neutral(fromClaude));
+    expect(fromCodex.selectionLabel).toBe("Chosen account");
+    expect(fromCodex.selectedId).toBe("b");
+  });
+
+  test("a failed read is unavailable from both sources", () => {
+    const fromCodex = subscriptionAccountMenuContent(
+      codex({
+        error: new Error("down"),
+        accounts: [],
+        currentSelection: null,
+        currentAccount: null,
+      }),
+    );
+    const fromClaude = subscriptionAccountMenuContent(
+      sharedAccountState(
+        "claude",
+        {
+          loading: false,
+          choosing: false,
+          choosingTarget: undefined,
+          appliedTo: null,
+          mutationError: null,
+          choice: null,
+        },
+        undefined,
+      ),
+    );
+    expect(neutral(fromCodex)).toBe(neutral(fromClaude));
+    expect(fromCodex.displayName).toBe("Accounts unavailable");
+    expect(fromCodex.automaticSelected).toBe(false);
+  });
+});
+
+describe("Codex usage", () => {
+  const base = codexAccount(facts[0]);
+
+  test("percent is the used share; remaining is the fallback", () => {
+    expect(codexUsage(base, undefined)?.windows.map((window) => window.usedPercent)).toEqual([
+      36, 62,
+    ]);
+    const remainingOnly = codexUsage(
+      { ...base, fiveHour: { remaining: 30 }, weekly: null } as CodexAccount,
+      undefined,
+    );
+    expect(remainingOnly?.windows).toEqual([
+      { id: "five_hour", usedPercent: 70, resetsAt: null, status: "ok" },
+    ]);
+  });
+
+  test("windows at 90% are near their limit and at 100% exhausted", () => {
+    const usage = codexUsage(
+      {
+        ...base,
+        fiveHour: { percent: 92, remaining: 8 },
+        weekly: { percent: 100, remaining: 0 },
+      } as CodexAccount,
+      undefined,
+    );
+    expect(usage?.windows.map((window) => window.status)).toEqual(["warning", "exhausted"]);
+  });
+
+  test("a cooling-down account says until when", () => {
+    const usage = codexUsage(
+      { ...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(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,
+        undefined,
+        Date.parse(RESET_5H) + 1,
+      ),
+    ).toBe(null);
+  });
+
+  test("an account with no label, email or plan is named by its ChatGPT id", () => {
+    const bare = {
+      id: "z",
+      chatgptAccountId: "acct-123",
+      status: "active",
+    } as CodexAccount;
+    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" }],
+      currentSelection: null,
+      currentAccount: null,
+    });
+    expect(subscriptionAccountMenuContent(named).accounts[0]?.label).toBe("z@example.test");
+  });
+});

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

@@ -0,0 +1,361 @@
+// The session-header account control for every subscription provider: the
+// provider's mark opens one menu with the account the chat uses, its usage,
+// and the accounts that can serve the next turn. The control and its content
+// are provider-neutral (`subscription-account.ts`); only where the data comes
+// from differs. Codex still reads its session endpoint, which alone reports a
+// turn waiting for capacity and offers a live usage check.
+import { useState } from "react";
+import type {
+  CodexAccount,
+  CodexUsageMap,
+  ModelAccountChoiceOption,
+  SessionEvent,
+  SessionModelAccountChoiceResponse,
+} from "@opengeni/sdk";
+
+import { useCodexAccounts, type UseCodexAccountsResult } from "../../../hooks/use-codex-accounts";
+import {
+  useSessionModelAccount,
+  type UseSessionModelAccountResult,
+} from "../../../hooks/use-session-model-account";
+import { Skeleton } from "../../../ui/skeleton";
+import { BillingClassMark } from "../billing-class-mark";
+import {
+  showsSubscriptionAccountMenu,
+  subscriptionAccountMenuContent,
+  subscriptionProviderPresentation,
+  type SubscriptionAccount,
+  type SubscriptionAccountState,
+  type SubscriptionAccountUsage,
+} from "./subscription-account";
+import { SubscriptionAccountMenu } from "./subscription-account-menu";
+
+type IndicatorProps = {
+  workspaceId: string;
+  sessionId: string;
+  /** The session's organization; scopes personal-account choices. */
+  organizationId: string | null;
+  /** The session model's subscription provider (`codex`, `claude`, `xai`). */
+  provider: string;
+  /** The newest started turn, to show the account that served it. */
+  servingTurnId?: string | undefined;
+  events?: SessionEvent[];
+};
+
+export function SubscriptionAccountIndicator(props: IndicatorProps) {
+  return props.provider === "codex" ? (
+    <CodexAccountSource {...props} />
+  ) : (
+    <SharedAccountSource {...props} />
+  );
+}
+
+/** Renders the neutral state; identical for every provider. */
+export function SubscriptionAccountControl({
+  state,
+  onChoose,
+  onOpenChange,
+}: {
+  state: SubscriptionAccountState;
+  onChoose: (accountId: string | null) => void;
+  onOpenChange?: ((open: boolean) => void) | undefined;
+}) {
+  const { name, billingClass } = subscriptionProviderPresentation(state.provider);
+  if (state.loading) {
+    return (
+      <Skeleton
+        role="status"
+        className="h-6 w-11 shrink-0 rounded-full"
+        aria-label={`Loading ${name} account`}
+      />
+    );
+  }
+  // Nothing to choose or show (the provider's accounts are not offered for
+  // this chat): the provider's mark alone, as on any other subscription chat.
+  if (!showsSubscriptionAccountMenu(state)) {
+    return (
+      <BillingClassMark
+        billingClass={billingClass}
+        className="size-3.5 shrink-0 text-fg-muted"
+        aria-label=""
+      />
+    );
+  }
+  return (
+    <SubscriptionAccountMenu
+      {...subscriptionAccountMenuContent(state)}
+      triggerMark={
+        <BillingClassMark
+          billingClass={billingClass}
+          className="size-3.5 text-current"
+          aria-label=""
+        />
+      }
+      headerMark={<BillingClassMark billingClass={billingClass} className="size-4 text-current" />}
+      choosing={state.choosing}
+      choosingTarget={state.choosingTarget}
+      onChoose={onChoose}
+      onOpenChange={onOpenChange}
+    />
+  );
+}
+
+// ── Shared subscription core (Claude, SuperGrok, …) ─────────────────────────
+
+export function sharedAccount(option: ModelAccountChoiceOption): SubscriptionAccount {
+  return {
+    id: option.connectionId,
+    label: option.label,
+    email: option.accountEmail,
+    plan: option.planType,
+    source: option.personal ? "personal" : option.source,
+    status: option.status,
+    refusal: option.refusal,
+    choosable: option.choosable,
+    usage: option.usage,
+  };
+}
+
+/** The shared subscription core's session choice as the neutral state. */
+export function sharedAccountState(
+  provider: string,
+  account: Pick<
+    UseSessionModelAccountResult,
+    "loading" | "choosing" | "choosingTarget" | "appliedTo" | "mutationError"
+  > & { choice: SessionModelAccountChoiceResponse | null },
+  servingTurnId: string | undefined,
+): SubscriptionAccountState {
+  const choice = account.choice;
+  const options = (choice?.accounts ?? []).filter((each) => each.provider === provider);
+  const binding =
+    choice?.bindings?.find((each) => each.provider === provider) ??
+    (choice?.binding?.provider === provider ? choice.binding : null);
+  const explicit = binding?.choice === "explicit";
+  const serving =
+    choice?.serving &&
+    choice.serving.turnId === servingTurnId &&
+    choice.serving.provider === provider
+      ? choice.serving
+      : null;
+  const currentId = serving ? serving.connectionId : binding?.connectionId;
+  const current = currentId
+    ? (options.find((each) => each.connectionId === currentId) ?? null)
+    : null;
+  return {
+    provider,
+    loading: account.loading && !choice,
+    unavailable: !choice,
+    accounts: options.map(sharedAccount),
+    current: current ? sharedAccount(current) : null,
+    currentHidden: !current && (explicit || serving !== null),
+    serving: serving !== null,
+    automatic: !explicit,
+    chosenId: explicit ? (binding?.connectionId ?? null) : null,
+    waiting: false,
+    // Only the authorized stored reading; opening the menu never probes a provider.
+    usageCheck: "idle",
+    choosing: account.choosing,
+    choosingTarget: account.choosingTarget,
+    appliedTo: account.appliedTo,
+    mutationError: account.mutationError?.message ?? null,
+  };
+}
+
+function SharedAccountSource(props: IndicatorProps) {
+  const { provider } = props;
+  const account = useSessionModelAccount({
+    workspaceId: props.workspaceId,
+    sessionId: props.sessionId,
+    provider,
+    organizationId: props.organizationId,
+    pollIntervalMs: 60_000,
+    ...(props.events !== undefined ? { events: props.events } : {}),
+  });
+  const state = sharedAccountState(provider, account, props.servingTurnId);
+  return (
+    <SubscriptionAccountControl
+      state={state}
+      onChoose={(id) => {
+        // After a failed read the selection is unknown, so Automatic is sent.
+        if (
+          !state.unavailable &&
+          (id === null ? state.automatic : !state.automatic && state.chosenId === id)
+        ) {
+          return;
+        }
+        void account.choose(id);
+      }}
+    />
+  );
+}
+
+// ── Codex ───────────────────────────────────────────────────────────────────
+
+const AUTO = "auto";
+// Reopening the menu reuses live readings this recent instead of asking the
+// provider again; older ones stay on screen while the menu re-checks.
+const LIVE_USAGE_REUSE_MS = 30_000;
+
+export function codexUsage(
+  account: CodexAccount,
+  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),
+  ];
+  // The endpoint reports a cooldown even after it ended; only a future one applies.
+  const exhaustedUntil =
+    account.exhaustedUntil && Date.parse(account.exhaustedUntil) > now
+      ? account.exhaustedUntil
+      : null;
+  if (windows.length === 0 && !exhaustedUntil) return null;
+  return {
+    observedAt: live?.usage?.fetchedAt ?? account.usageCheckedAt ?? null,
+    windows,
+    exhaustedUntil,
+    exhaustedKind: exhaustedUntil ? "quota" : null,
+  };
+}
+
+/** The Codex session endpoint as the neutral state. */
+export function codexAccountState(
+  codex: Pick<
+    UseCodexAccountsResult,
+    | "accounts"
+    | "pinnedAccountId"
+    | "currentSelection"
+    | "currentAccount"
+    | "switchAppliedTo"
+    | "loading"
+    | "error"
+    | "liveUsage"
+    | "liveUsageUpdatedAt"
+    | "pinning"
+    | "pinningTarget"
+    | "mutationError"
+  >,
+  check: { checking: boolean; checked: boolean; failed: boolean },
+): SubscriptionAccountState {
+  // Live readings from an earlier check (this menu, another session's, or
+  // Settings) stay visible while a new check runs instead of flashing away.
+  const awaitingFirstUsage = check.checking && codex.liveUsageUpdatedAt === null;
+  const selection = codex.currentSelection;
+  const effective =
+    (selection ? codex.currentAccount : null) ??
+    codex.accounts.find(
+      (account) => account.id === (selection ? selection.credentialId : codex.pinnedAccountId),
+    ) ??
+    null;
+  // A live check that returned nothing for an account hides its older reading.
+  const liveMissing = (id: string) => {
+    const status = codex.liveUsage[id]?.status;
+    return check.failed || (check.checked && !status) || status === "error" || status === "no-data";
+  };
+  const account = (each: CodexAccount): SubscriptionAccount => ({
+    id: each.id,
+    // The ChatGPT account id names an account only when nothing else does.
+    label: each.label ?? (each.email || each.plan ? null : (each.chatgptAccountId ?? null)),
+    email: each.email ?? null,
+    plan: each.plan ?? null,
+    source: each.source ?? null,
+    status: each.status,
+    refusal: null,
+    choosable: true,
+    usage: liveMissing(each.id) ? null : codexUsage(each, codex.liveUsage[each.id]),
+  });
+  return {
+    provider: "codex",
+    loading: codex.loading && !effective,
+    unavailable: Boolean(codex.error),
+    accounts: codex.accounts.map(account),
+    current: effective ? account(effective) : null,
+    currentHidden: !effective && Boolean(selection?.credentialId ?? codex.pinnedAccountId),
+    serving: selection !== null,
+    automatic: codex.pinnedAccountId === null,
+    chosenId: codex.pinnedAccountId,
+    waiting: selection?.waiting === true,
+    usageCheck: awaitingFirstUsage
+      ? "checking"
+      : effective && liveMissing(effective.id)
+        ? "failed"
+        : "idle",
+    choosing: codex.pinning,
+    choosingTarget: codex.pinningTarget === AUTO ? null : (codex.pinningTarget ?? undefined),
+    appliedTo: codex.switchAppliedTo,
+    mutationError: codex.mutationError?.message ?? null,
+  };
+}
+
+function CodexAccountSource(props: IndicatorProps) {
+  const codex = useCodexAccounts({
+    sessionId: props.sessionId,
+    pollIntervalMs: 30_000,
+    ...(props.events !== undefined ? { events: props.events } : {}),
+  });
+  const [checkingUsage, setCheckingUsage] = useState(false);
+  const [usageChecked, setUsageChecked] = useState(false);
+  const [usageCheckFailed, setUsageCheckFailed] = useState(false);
+  const state = codexAccountState(codex, {
+    checking: checkingUsage,
+    checked: usageChecked,
+    failed: usageCheckFailed,
+  });
+  const waiting = state.waiting;
+  return (
+    <SubscriptionAccountControl
+      state={state}
+      onChoose={(id) => {
+        // Choosing again while a turn waits retries it on that account.
+        // After a failed read the selection is unknown, so the choice is sent.
+        if (codex.pinnedAccountId === id && !waiting && !state.unavailable) return;
+        void codex.pin(id ?? AUTO);
+      }}
+      onOpenChange={(open) => {
+        if (!open) return;
+        setCheckingUsage(true);
+        setUsageChecked(false);
+        setUsageCheckFailed(false);
+        void codex.refreshUsage({ maxAgeMs: LIVE_USAGE_REUSE_MS }).then(
+          (ok) => {
+            setUsageChecked(ok);
+            setUsageCheckFailed(!ok);
+            setCheckingUsage(false);
+          },
+          () => {
+            setUsageCheckFailed(true);
+            setCheckingUsage(false);
+          },
+        );
+      }}
+    />
+  );
+}