@opengeni/react 3.1.0 → 3.3.2-canary.1

package/src/model-policy.ts

@@ -1,11 +1,11 @@
+import {
+  compareModelPickerOrder,
+  modelPickerBillingClassFor,
+  type ModelPickerBillingClass,
+} from "@opengeni/sdk/model-picker-order";
 import type { ClientModel, ReasoningEffort, WorkspaceModelCatalogModel } from "@opengeni/sdk";
 
-export type PickerBillingClass =
-  | "opengeni_credits"
-  | "external"
-  | "codex_subscription"
-  | "supergrok_subscription"
-  | "byok";
+export type PickerBillingClass = ModelPickerBillingClass;
 
 export type PickerModelRow<TCatalog extends ClientModel = WorkspaceModelCatalogModel> = {
   id: string;
@@ -23,20 +23,12 @@ export type PickerModelRow<TCatalog extends ClientModel = WorkspaceModelCatalogM
 
 export type LatencyModeId = "standard" | "priority" | "fast";
 
-const BILLING_CLASS_ORDER: PickerBillingClass[] = [
-  "opengeni_credits",
-  "external",
-  "codex_subscription",
-  "supergrok_subscription",
-  "byok",
-];
-
 const BILLING_CLASS_LABELS: Record<PickerBillingClass, string> = {
   opengeni_credits: "OpenGeni",
   external: "External",
   codex_subscription: "Codex",
   supergrok_subscription: "SuperGrok",
-  byok: "Your Gateway",
+  byok: "Workspace providers",
 };
 
 const AVAILABILITY_REASON_LABELS: Record<string, string> = {
@@ -50,33 +42,10 @@ const AVAILABILITY_REASON_LABELS: Record<string, string> = {
 };
 
 export function billingClassForModel(model: ClientModel): PickerBillingClass {
-  if (model.billing?.metering === "external" && model.billing.upstreamPayer === "deployment") {
-    return "external";
-  }
-  if (model.source === "supergrok") {
-    return "supergrok_subscription";
-  }
-  if (model.source === "codex") {
-    return "codex_subscription";
-  }
-  if (model.source === "workspace_gateway") {
-    return "byok";
-  }
-  if (model.credentialSource?.kind === "connected_subscription") {
-    return model.credentialSource.provider === "xai"
-      ? "supergrok_subscription"
-      : "codex_subscription";
-  }
-  if (model.credentialSource?.kind === "workspace_connection") {
+  if (model.provider === "workspace-gateway" || model.provider === "workspace-openrouter") {
     return "byok";
   }
-  if (model.billing?.upstreamPayer === "connected_subscription") {
-    return "codex_subscription";
-  }
-  if (model.billing?.upstreamPayer === "workspace") {
-    return "byok";
-  }
-  return "opengeni_credits";
+  return modelPickerBillingClassFor(model);
 }
 
 export function billingClassLabel(billingClass: PickerBillingClass): string {
@@ -144,6 +113,23 @@ export function labelReasoningEffort(effort: ReasoningEffort): string {
 }
 
 export function payerSummaryForModel(model: ClientModel): string {
+  if (model.cost === "free") {
+    return "Free in this deployment";
+  }
+  if (model.cost === "credits") {
+    return "OpenGeni credits";
+  }
+  if (model.cost === "subscription") {
+    return model.source === "supergrok"
+      ? "SuperGrok subscription · external billing"
+      : "Codex subscription · external billing";
+  }
+  if (model.cost === "workspace") {
+    return workspaceProviderPayerSummary(model);
+  }
+
+  // Older client-config payloads do not carry `cost`; preserve their existing
+  // settlement-derived label until every deployment has rolled forward.
   const billing = model.billing;
   if (!billing) {
     return "Route unknown";
@@ -157,7 +143,7 @@ export function payerSummaryForModel(model: ClientModel): string {
       : "Codex subscription · external billing";
   }
   if (billing.upstreamPayer === "workspace") {
-    return "Billed to your AI Gateway";
+    return workspaceProviderPayerSummary(model);
   }
   return "External provider · no OpenGeni credits";
 }
@@ -175,7 +161,13 @@ export function advancedSourceSummary(model: ClientModel): string | null {
       : "Connected Codex subscription";
   }
   if (source.kind === "workspace_connection") {
-    return "Workspace AI Gateway";
+    if (model.provider === "workspace-openrouter") {
+      return "Workspace OpenRouter connection";
+    }
+    if (model.provider === "workspace-gateway" || model.source === "workspace_gateway") {
+      return "Workspace Vercel AI Gateway";
+    }
+    return "Workspace provider connection";
   }
   if (source.kind === "deployment") {
     return source.mechanism === "azure_ad_bearer"
@@ -185,6 +177,16 @@ export function advancedSourceSummary(model: ClientModel): string | null {
   return null;
 }
 
+function workspaceProviderPayerSummary(model: ClientModel): string {
+  if (model.provider === "workspace-openrouter") {
+    return "Billed to the workspace OpenRouter account";
+  }
+  if (model.provider === "workspace-gateway" || model.source === "workspace_gateway") {
+    return "Billed to the workspace Vercel account";
+  }
+  return "Billed to the workspace provider account";
+}
+
 export function projectPickerRows(models: WorkspaceModelCatalogModel[]): PickerModelRow[] {
   return models
     .filter((catalog) => {
@@ -232,18 +234,7 @@ export function projectClientModelRows(models: ClientModel[]): PickerModelRow<Cl
 export function sortPickerRows<TCatalog extends ClientModel>(
   rows: PickerModelRow<TCatalog>[],
 ): PickerModelRow<TCatalog>[] {
-  return [...rows].sort((left, right) => {
-    const classDelta =
-      BILLING_CLASS_ORDER.indexOf(left.billingClass) -
-      BILLING_CLASS_ORDER.indexOf(right.billingClass);
-    if (classDelta !== 0) {
-      return classDelta;
-    }
-    if (left.selectable !== right.selectable) {
-      return left.selectable ? -1 : 1;
-    }
-    return left.label.localeCompare(right.label);
-  });
+  return [...rows].sort(compareModelPickerOrder);
 }
 
 export function findPickerRow<TCatalog extends ClientModel>(

package/src/realtime/realtime-control.tsx

@@ -105,7 +105,12 @@ const REALTIME_MODEL_CATALOG_CACHE_MAX_WORKSPACES = 64;
 type RealtimeControllerClient = EmbeddedRealtimeSessionClientLike & SessionRealtimeClientLike;
 
 type RealtimeModelCatalogCacheEntry =
-  | { state: "loading"; promise: Promise<RealtimeModelOption[]> }
+  | {
+      state: "loading";
+      promise: Promise<RealtimeModelOption[]>;
+      controller: AbortController;
+      consumers: number;
+    }
   | { state: "ready"; models: RealtimeModelOption[]; expiresAt: number };
 
 // Scope advisory availability to the exact client object and workspace. The
@@ -166,19 +171,26 @@ function pruneRealtimeModelCatalogCache(
 function loadRealtimeModelCatalog(
   client: RealtimeControllerClient,
   workspaceId: string,
+  signal?: AbortSignal,
 ): Promise<RealtimeModelOption[]> | null {
   const load = client.getWorkspaceRealtimeModelCatalog;
   if (!load) return null;
+  if (signal?.aborted) {
+    return Promise.reject(signal.reason ?? new DOMException("Request aborted", "AbortError"));
+  }
   const now = Date.now();
   const cache = realtimeModelCatalogCacheFor(client);
   const entry = cache.get(workspaceId);
-  if (entry?.state === "loading") return entry.promise;
+  if (entry?.state === "loading" && !entry.controller.signal.aborted) {
+    return consumeRealtimeModelCatalog(entry, signal);
+  }
   if (entry?.state === "ready" && entry.expiresAt > now) return Promise.resolve(entry.models);
   if (entry) cache.delete(workspaceId);
   pruneRealtimeModelCatalogCache(cache, now);
 
+  const controller = new AbortController();
   const promise = load
-    .call(client, workspaceId)
+    .call(client, workspaceId, { signal: controller.signal })
     .then((response) => response.models.map(toRealtimeModelOption))
     .then((models) => {
       const current = cache.get(workspaceId);
@@ -197,8 +209,43 @@ function loadRealtimeModelCatalog(
       if (current?.state === "loading" && current.promise === promise) cache.delete(workspaceId);
       throw error;
     });
-  cache.set(workspaceId, { state: "loading", promise });
-  return promise;
+  const loading: RealtimeModelCatalogCacheEntry & { state: "loading" } = {
+    state: "loading",
+    promise,
+    controller,
+    consumers: 0,
+  };
+  cache.set(workspaceId, loading);
+  return consumeRealtimeModelCatalog(loading, signal);
+}
+
+function consumeRealtimeModelCatalog(
+  entry: RealtimeModelCatalogCacheEntry & { state: "loading" },
+  signal?: AbortSignal,
+): Promise<RealtimeModelOption[]> {
+  entry.consumers += 1;
+  return new Promise((resolve, reject) => {
+    let released = false;
+    const release = (abandoned: boolean) => {
+      if (released) return;
+      released = true;
+      entry.consumers = Math.max(0, entry.consumers - 1);
+      if (abandoned && entry.consumers === 0) {
+        entry.controller.abort(
+          signal?.reason ?? new DOMException("Request abandoned", "AbortError"),
+        );
+      }
+    };
+    const onAbort = () => {
+      release(true);
+      reject(signal?.reason ?? new DOMException("Request aborted", "AbortError"));
+    };
+    signal?.addEventListener("abort", onAbort, { once: true });
+    void entry.promise.then(resolve, reject).finally(() => {
+      signal?.removeEventListener("abort", onAbort);
+      release(false);
+    });
+  });
 }
 
 export type SessionRealtimeControllerFactory = (
@@ -550,6 +597,7 @@ export function useRealtimeModelSelection(options: {
 
   useEffect(() => {
     let disposed = false;
+    const requestAbort = new AbortController();
     const applyCatalog = (models: RealtimeModelOption[]) => {
       catalogScopeRef.current = { client, workspaceId, source: "cache" };
       setCatalog(models);
@@ -570,7 +618,7 @@ export function useRealtimeModelSelection(options: {
       }
       return;
     }
-    const loading = loadRealtimeModelCatalog(client, workspaceId);
+    const loading = loadRealtimeModelCatalog(client, workspaceId, requestAbort.signal);
     if (!loading) return;
     void loading
       .then((models) => {
@@ -580,6 +628,7 @@ export function useRealtimeModelSelection(options: {
       .catch(() => undefined);
     return () => {
       disposed = true;
+      requestAbort.abort();
     };
   }, [client, workspaceId]);
 

package/src/timeline/entrance.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useRef } from "react";
+import { createContext, useContext, useRef, type ReactNode } from "react";
 
 /* ----------------------------------------------------------------------------
    Entrance animation gating
@@ -15,8 +15,33 @@ import { createContext, useContext, useRef } from "react";
    -------------------------------------------------------------------------- */
 
 const EntranceAnimationContext = createContext(true);
+const EntranceAnimationLiveContext = createContext(true);
 
-export const EntranceAnimationProvider = EntranceAnimationContext.Provider;
+/**
+ * Freeze the mount-time gate for this subtree while publishing a separate live
+ * gate to activity rails that need later appends to animate after a bulk paint.
+ * MessageTimeline mounts one provider per durable group, so existing groups do
+ * not receive a context invalidation when a prepend toggles bulk mode and new
+ * groups still capture the value from the commit that created them.
+ */
+export function EntranceAnimationProvider({
+  value,
+  liveValue = value,
+  children,
+}: {
+  value: boolean;
+  liveValue?: boolean | undefined;
+  children: ReactNode;
+}) {
+  const mountedValue = useRef(value).current;
+  return (
+    <EntranceAnimationContext.Provider value={mountedValue}>
+      <EntranceAnimationLiveContext.Provider value={liveValue}>
+        {children}
+      </EntranceAnimationLiveContext.Provider>
+    </EntranceAnimationContext.Provider>
+  );
+}
 
 /**
  * Live entrance gate from the nearest provider. Prefer
@@ -25,7 +50,7 @@ export const EntranceAnimationProvider = EntranceAnimationContext.Provider;
  * later appends after a bulk window clears.
  */
 export function useEntranceAnimationLive(): boolean {
-  return useContext(EntranceAnimationContext);
+  return useContext(EntranceAnimationLiveContext);
 }
 
 /**

package/src/timeline/projection.ts

@@ -2091,6 +2091,10 @@ function findOpenCall(
     if (byId) {
       return byId as ToolCallItem | WorkerItem;
     }
+    // An explicit provider correlation id is authoritative. Falling back to
+    // an unrelated running call corrupts its status/output when compact pages
+    // or interleaved providers deliver an unmatched historical result.
+    return undefined;
   }
   return reversed.find(
     (item): item is ToolCallItem | WorkerItem => isCall(item) && item.status === "running",

package/styles/compiled.css

@@ -4495,6 +4495,11 @@
       max-width: 12rem;
     }
   }
+:where(.og-root).sm\:max-w-\[32rem\],:where(.og-root) .sm\:max-w-\[32rem\] {
+    @media (width >= 40rem) {
+      max-width: 32rem;
+    }
+  }
 :where(.og-root).sm\:max-w-\[82\%\],:where(.og-root) .sm\:max-w-\[82\%\] {
     @media (width >= 40rem) {
       max-width: 82%;