@opengeni/react 4.2.1-canary.39642758903001 → 4.3.1

package/src/app/lib/credit-coverage.test.ts

@@ -0,0 +1,83 @@
+import { expect, test } from "bun:test";
+import type { BillingSummary } from "../types";
+import { creditBalanceSplit, creditBalanceSplitLabel, modelListSummary } from "./credit-coverage";
+
+function balance(overrides: Partial<BillingSummary["balance"]>): BillingSummary["balance"] {
+  return {
+    accountId: "00000000-0000-4000-8000-000000000001",
+    balanceMicros: 0,
+    currency: "usd",
+    updatedAt: "2026-10-18T12:00:00Z",
+    ...overrides,
+  };
+}
+
+test("model lists stay short and name the rest by count", () => {
+  expect(modelListSummary([])).toBe("");
+  expect(modelListSummary(["GPT-6 Sol"])).toBe("GPT-6 Sol");
+  expect(modelListSummary(["GPT-6 Sol", "GPT-6 Luna"])).toBe("GPT-6 Sol and GPT-6 Luna");
+  expect(modelListSummary(["A", "B", "C"])).toBe("A, B and C");
+  expect(modelListSummary(["A", "B", "C", "D", "E"])).toBe("A, B and 3 more");
+});
+
+test("a drained general balance beside scoped credit is not shown as one total", () => {
+  // The incident shape: general credit spent, $110 left only for some models.
+  const drained = balance({
+    balanceMicros: 110_000_000,
+    generalBalanceMicros: 0,
+    promotionalCredits: [
+      {
+        grantId: "00000000-0000-4000-8000-000000000002",
+        label: "Signup trial",
+        remainingMicros: 10_000_000,
+        eligibleModelIds: ["gpt-6-luna"],
+      },
+      {
+        grantId: "00000000-0000-4000-8000-000000000003",
+        label: "Credit gift",
+        remainingMicros: 100_000_000,
+        eligibleModelIds: ["gpt-6-luna", "gpt-6-sol"],
+      },
+    ],
+  });
+  expect(creditBalanceSplit(drained)).toEqual({ generalMicros: 0, scopedMicros: 110_000_000 });
+  expect(creditBalanceSplitLabel(drained)).toBe(
+    "$0.00 for any model · $110.00 for selected models",
+  );
+});
+
+test("negative general balances read as none for any model", () => {
+  const owed = balance({
+    balanceMicros: 5_000_000,
+    generalBalanceMicros: -5_000_000,
+    promotionalCredits: [
+      {
+        grantId: "00000000-0000-4000-8000-000000000002",
+        label: "Coupon",
+        remainingMicros: 10_000_000,
+        eligibleModelIds: ["gpt-6-luna"],
+      },
+    ],
+  });
+  expect(creditBalanceSplit(owed)).toEqual({ generalMicros: 0, scopedMicros: 10_000_000 });
+});
+
+test("balances without remaining scoped credit keep their single total", () => {
+  expect(creditBalanceSplitLabel(balance({ balanceMicros: 12_400_000 }))).toBeNull();
+  expect(
+    creditBalanceSplitLabel(
+      balance({
+        balanceMicros: 12_400_000,
+        generalBalanceMicros: 12_400_000,
+        promotionalCredits: [
+          {
+            grantId: "00000000-0000-4000-8000-000000000002",
+            label: "Spent coupon",
+            remainingMicros: 0,
+            eligibleModelIds: ["gpt-6-luna"],
+          },
+        ],
+      }),
+    ),
+  ).toBeNull();
+});

package/src/app/lib/credit-coverage.tsx

@@ -0,0 +1,48 @@
+import { modelDisplayName } from "@opengeni/sdk/model-display";
+import { formatMoneyMicros } from "./format";
+import type { BillingSummary } from "../types";
+
+/**
+ * Short, readable list of models: "GPT-6 Sol, GPT-6 Luna and 3 more". Labels
+ * come from the caller (catalog rows) or the shared display-name table.
+ */
+export function modelListSummary(
+  labels: readonly string[],
+  { limit = 2 }: { limit?: number } = {},
+): string {
+  if (labels.length === 0) return "";
+  if (labels.length <= limit + 1) {
+    if (labels.length === 1) return labels[0]!;
+    return `${labels.slice(0, -1).join(", ")} and ${labels.at(-1)!}`;
+  }
+  return `${labels.slice(0, limit).join(", ")} and ${labels.length - limit} more`;
+}
+
+/** The models a scoped credit grant pays for, by display name. */
+export function coveredModelsSummary(eligibleModelIds: readonly string[]): string {
+  return modelListSummary(eligibleModelIds.map((id) => modelDisplayName(id)));
+}
+
+/**
+ * Splits a balance into credit any credits-billed model can spend and credit
+ * only some models can spend. The total alone overstates what an uncovered
+ * model can use, so compact rows show both parts. Null without scoped credit.
+ */
+export function creditBalanceSplit(
+  balance: BillingSummary["balance"],
+): { generalMicros: number; scopedMicros: number } | null {
+  const scopedMicros = (balance.promotionalCredits ?? []).reduce(
+    (total, grant) => total + Math.max(0, grant.remainingMicros),
+    0,
+  );
+  if (scopedMicros <= 0) return null;
+  const general = balance.generalBalanceMicros ?? balance.balanceMicros - scopedMicros;
+  return { generalMicros: Math.max(0, general), scopedMicros };
+}
+
+/** "$0.00 for any model · $100.00 for selected models", or null without scoped credit. */
+export function creditBalanceSplitLabel(balance: BillingSummary["balance"]): string | null {
+  const split = creditBalanceSplit(balance);
+  if (!split) return null;
+  return `${formatMoneyMicros(split.generalMicros, balance.currency)} for any model · ${formatMoneyMicros(split.scopedMicros, balance.currency)} for selected models`;
+}

package/src/app/lib/free-credit-gap.test.ts

@@ -1,7 +1,12 @@
 import { expect, test } from "bun:test";
 import type { PickerModelRow } from "./model-policy";
 import { failedSessionCopy } from "./failed-session-copy";
-import { coveredModelChoice, freeCreditGap, freeCreditGapReason } from "./free-credit-gap";
+import {
+  coveredModelChoice,
+  creditRefusalGap,
+  freeCreditGap,
+  freeCreditGapReason,
+} from "./free-credit-gap";
 
 type Funding = "promotional" | "general" | "unavailable" | undefined;
 function row(id: string, label: string, creditFunding: Funding, selectable = true) {
@@ -113,3 +118,29 @@ test("the one-click switch keeps the composer policy sendable", () => {
   });
   expect(coveredModelChoice({ ...sol, selectable: false }, "high", "standard")).toBeNull();
 });
+
+test("a credit refusal names its model even while the catalog still says it is funded", () => {
+  // The catalog was read before general credit ran out: Argon still reads "general".
+  const stale = [row("vertex-gateway/gemini-4-argon", "Gemini 4 Argon", "general"), ...rows];
+  expect(freeCreditGap(stale, "vertex-gateway/gemini-4-argon")).toBeNull();
+  expect(
+    creditRefusalGap(stale, "vertex-gateway/gemini-4-argon", {
+      selectedModel: "vertex-gateway/gemini-4-argon",
+      preferredModel: "azure-sol/gpt-6.1-sol",
+    }),
+  ).toEqual({
+    modelLabel: "Gemini 4 Argon",
+    covered: [
+      { id: "azure-sol/gpt-6.1-sol", label: "GPT-6.1 Sol" },
+      { id: "gpt-6-luna", label: "GPT-6 Luna" },
+    ],
+    selectionUsable: false,
+  });
+});
+
+test("a credit refusal without covered models still names the model", () => {
+  const gap = creditRefusalGap([rows[0]!, rows[5]!], "claude-opus", { selectedModel: "connected" });
+  expect(gap).toEqual({ modelLabel: "Claude Opus 5.5", covered: [], selectionUsable: true });
+  // A model missing from the catalog falls back to its display name.
+  expect(creditRefusalGap([], "gpt-6-sol").modelLabel).toBe("GPT-6 Sol");
+});

package/src/app/lib/free-credit-gap.tsx

@@ -1,4 +1,5 @@
 import type { LatencyMode, ReasoningEffort } from "@opengeni/sdk";
+import { modelDisplayName } from "@opengeni/sdk/model-display";
 import {
   coerceReasoningEffortForModel,
   findPickerRow,
@@ -33,17 +34,46 @@ export function freeCreditGap(
 ): FreeCreditGap | null {
   const current = findPickerRow(rows, model);
   if (current?.catalog.creditFunding !== "unavailable") return null;
+  const gap = creditCoverageGap(rows, model, current.label, options);
+  return gap.covered.length > 0 ? gap : null;
+}
+
+/**
+ * The API refused a Send or a new chat because no credit pays for its model.
+ * The refusal is authoritative even while the catalog still reports older
+ * funding, so the gap is named whether or not other models are covered.
+ */
+export function creditRefusalGap(
+  rows: PickerModelRow[],
+  model: string,
+  options: {
+    selectedModel?: string | null | undefined;
+    preferredModel?: string | null | undefined;
+  } = {},
+): FreeCreditGap {
+  const label = findPickerRow(rows, model)?.label ?? modelDisplayName(model);
+  return creditCoverageGap(rows, model, label, options);
+}
+
+function creditCoverageGap(
+  rows: PickerModelRow[],
+  model: string,
+  modelLabel: string,
+  options: {
+    selectedModel?: string | null | undefined;
+    preferredModel?: string | null | undefined;
+  },
+): FreeCreditGap {
   const covered = rows.filter(
     (row) => row.id !== model && row.selectable && row.catalog.creditFunding === "promotional",
   );
-  if (covered.length === 0) return null;
   const { selectedModel, preferredModel } = options;
   const preferred = preferredModel ? covered.findIndex((row) => row.id === preferredModel) : -1;
   if (preferred > 0) covered.unshift(...covered.splice(preferred, 1));
   const selected =
     selectedModel && selectedModel !== model ? findPickerRow(rows, selectedModel) : null;
   return {
-    modelLabel: current.label,
+    modelLabel,
     covered: covered.map((row) => ({ id: row.id, label: row.label })),
     selectionUsable: Boolean(
       selected?.selectable && selected.catalog.creditFunding !== "unavailable",

package/src/app/lib/integration-connect-analytics.test.ts

@@ -62,6 +62,7 @@ describe("integration classes", () => {
     expect(integrationClassFromConnectProvider("openapi")).toBe("other");
     expect(modelConnectionClass("ai-gateway")).toBe("vercel_gateway");
     expect(modelConnectionClass("claude_subscription")).toBe("claude_subscription");
+    expect(modelConnectionClass("azure_openai")).toBe("azure_openai");
     expect(modelConnectionClass("unknown")).toBeNull();
   });
 

package/src/app/lib/integration-connect-analytics.tsx

@@ -58,6 +58,8 @@ export const MODEL_CONNECTION_CLASSES = [
   "claude_subscription",
   "opper",
   "elevenlabs",
+  "openai",
+  "azure_openai",
 ] as const satisfies readonly ModelClass[];
 
 export type IntegrationClass = ConnectionClass | ModelClass;
@@ -145,6 +147,8 @@ export function modelConnectionClass(provider: string): ModelClass | null {
     case "supergrok":
     case "openrouter":
     case "opper":
+    case "openai":
+    case "azure_openai":
     case "anthropic":
     case "claude_subscription":
     case "elevenlabs":

package/src/app/lib/models-route.test.ts

@@ -52,6 +52,24 @@ describe("Models URLs", () => {
     expect(connectStepOf("connect")).toBeNull();
   });
 
+  test("Azure OpenAI is addressed for the organization only", () => {
+    // A workspace's own Azure key is a direct connection, not a Models account.
+    expect(parseModelsAccount("org:gateway:azure_openai")).toBe("org:gateway:azure_openai");
+    expect(parseModelsAccount("gateway:azure_openai")).toBeUndefined();
+    expect(accountKeyOf("org:gateway:azure_openai")).toEqual({
+      provider: "gateway",
+      id: "azure_openai",
+      organization: true,
+    });
+    expect(accountKeyOf("gateway:azure_openai")).toBeNull();
+    expect(parseModelsView("connect-org:azure_openai")).toBe("connect-org:azure_openai");
+    expect(parseModelsView("connect:azure_openai")).toBeUndefined();
+    expect(connectStepOf("connect-org:azure_openai")).toEqual({
+      provider: "azure_openai",
+      organization: true,
+    });
+  });
+
   test("a workspace's old Models URL opens its page in Organization settings > Models", () => {
     expect(
       workspaceModelsRedirect({ workspaceId: "ws-1", account: undefined, view: undefined }),

package/src/app/lib/models-route.tsx

@@ -23,6 +23,8 @@ export type ModelsProvider =
   | "vercel"
   | "openrouter"
   | "opper"
+  | "openai"
+  | "azure_openai"
   | "anthropic"
   | "claude_subscription";
 
@@ -46,11 +48,19 @@ const PROVIDERS: readonly ModelsProvider[] = [
   "claude_subscription",
 ];
 
+/**
+ * Connected for the organization only: a workspace's own OpenAI or Azure key is
+ * a direct connection with its own section.
+ */
+const ORGANIZATION_ONLY_PROVIDERS: readonly ModelsProvider[] = ["openai", "azure_openai"];
+
 const VIEWS: ReadonlySet<string> = new Set<ModelsView>([
   "connect",
   "connect-workspace",
   ...PROVIDERS.map((provider) => `connect:${provider}` as const),
-  ...PROVIDERS.map((provider) => `connect-org:${provider}` as const),
+  ...[...PROVIDERS, ...ORGANIZATION_ONLY_PROVIDERS].map(
+    (provider) => `connect-org:${provider}` as const,
+  ),
   "allowed-models",
   "compaction",
   "account-rule-locks",
@@ -62,13 +72,24 @@ export function parseModelsView(value: unknown): ModelsView | undefined {
 }
 
 const ACCOUNT_KEY =
-  /^(org:)?((codex|supergrok|claude):[\w-]{1,128}|gateway:(vercel|openrouter|opper|anthropic|claude_subscription))$/;
+  /^((org:)?((codex|supergrok|claude):[\w-]{1,128}|gateway:(vercel|openrouter|opper|anthropic|claude_subscription))|org:gateway:(openai|azure_openai))$/;
 
 export function parseModelsAccount(value: unknown): string | undefined {
   return typeof value === "string" && ACCOUNT_KEY.test(value) ? value : undefined;
 }
 
-export type GatewayId = "vercel" | "openrouter" | "opper" | "anthropic" | "claude_subscription";
+export type GatewayId =
+  | "vercel"
+  | "openrouter"
+  | "opper"
+  | "anthropic"
+  | "claude_subscription"
+  /** Organization only; workspace pages never address these. */
+  | "openai"
+  | "azure_openai";
+
+/** The API-key providers a workspace can hold as its own. */
+export type WorkspaceGatewayId = Exclude<GatewayId, "openai" | "azure_openai">;
 
 export type AccountKey = (
   | { provider: "codex" | "supergrok" | "claude"; id: string }
@@ -92,7 +113,8 @@ export function accountKeyOf(value: string | undefined): AccountKey | null {
       id === "openrouter" ||
       id === "opper" ||
       id === "anthropic" ||
-      id === "claude_subscription")
+      id === "claude_subscription" ||
+      ((id === "openai" || id === "azure_openai") && organization))
   ) {
     return { provider, id, organization };
   }

package/src/app/lib/session-search-route.tsx

@@ -39,10 +39,15 @@ export function requestSessionSearch(
   target: EventTarget,
   workspaceId: string,
   returnFocus?: HTMLElement,
+  query?: string,
 ): void {
   target.dispatchEvent(
     new CustomEvent(OPEN_SESSION_SEARCH_EVENT, {
-      detail: { workspaceId, ...(returnFocus ? { returnFocus } : {}) },
+      detail: {
+        workspaceId,
+        ...(returnFocus ? { returnFocus } : {}),
+        ...(query?.trim() ? { query: query.trim() } : {}),
+      },
     }),
   );
 }

package/src/app/lib/session-ui-features.tsx

@@ -14,8 +14,11 @@ export type SessionUiFeatures = Readonly<{
   dock: boolean;
   /** The workspace-admin access indicator and grant dialog in the header. */
   adminAccess: boolean;
-  /** Global keyboard shortcut for a new chat (⌘/Ctrl+⇧O). */
-  newChatShortcut: boolean;
+  /**
+   * Page-wide keyboard shortcuts and the ⌘K command menu (⌘/Ctrl+⇧O for a new
+   * chat, ⌘/Ctrl+K, next and previous chat, the shortcut sheet).
+   */
+  keyboardShortcuts: boolean;
   /** The Opengeni logo and wordmark at the top of the chat list. */
   brand: boolean;
 }>;
@@ -24,16 +27,16 @@ export type SessionUiPreset = "app" | "companion" | "embed";
 
 export const SESSION_UI_PRESETS: Readonly<Record<SessionUiPreset, SessionUiFeatures>> = {
   /** The web app and the desktop app. */
-  app: { chatList: true, dock: true, adminAccess: true, newChatShortcut: true, brand: true },
+  app: { chatList: true, dock: true, adminAccess: true, keyboardShortcuts: true, brand: true },
   /**
    * First-party side panes (the Excel add-in): everything but admin access and
-   * the page-wide new-chat shortcut.
+   * page-wide keyboard shortcuts.
    */
   companion: {
     chatList: true,
     dock: true,
     adminAccess: false,
-    newChatShortcut: false,
+    keyboardShortcuts: false,
     brand: true,
   },
   /**
@@ -41,23 +44,39 @@ export const SESSION_UI_PRESETS: Readonly<Record<SessionUiPreset, SessionUiFeatu
    * without Opengeni's brand, the session panel, admin access or page-wide
    * shortcuts until the host turns them on.
    */
-  embed: { chatList: true, dock: false, adminAccess: false, newChatShortcut: false, brand: false },
+  embed: {
+    chatList: true,
+    dock: false,
+    adminAccess: false,
+    keyboardShortcuts: false,
+    brand: false,
+  },
 };
 
 const SessionUiFeaturesContext = createContext<SessionUiFeatures>(SESSION_UI_PRESETS.app);
 
+/** Feature switches a host may pass, including names from earlier releases. */
+export type SessionUiFeatureOverrides = Partial<SessionUiFeatures> & {
+  /** @deprecated Use `keyboardShortcuts`. */
+  newChatShortcut?: boolean | undefined;
+};
+
 export function SessionUiFeaturesProvider(props: {
   preset?: SessionUiPreset | undefined;
-  features?: Partial<SessionUiFeatures> | undefined;
+  features?: SessionUiFeatureOverrides | undefined;
   children?: ReactNode;
 }) {
   const preset = props.preset ?? "app";
-  const overrides = props.features;
+  const { newChatShortcut, ...current } = props.features ?? {};
+  const overrides: Partial<SessionUiFeatures> =
+    newChatShortcut === undefined || current.keyboardShortcuts !== undefined
+      ? current
+      : { ...current, keyboardShortcuts: newChatShortcut };
   const value = useMemo(
     () => ({ ...SESSION_UI_PRESETS[preset], ...overrides }),
     // Hosts often pass an inline object; compare by content.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [preset, JSON.stringify(overrides ?? {})],
+    [preset, JSON.stringify(overrides)],
   );
   return (
     <SessionUiFeaturesContext.Provider value={value}>

package/src/app/routes/session.tsx

@@ -29,7 +29,8 @@ import {
 } from "../lib/failed-session-retry";
 import { useSessionStartupTimeline } from "../lib/session-startup-timeline";
 import { failedSessionCopy } from "../lib/failed-session-copy";
-import { coveredModelChoice, freeCreditGap } from "../lib/free-credit-gap";
+import { coveredModelChoice, creditRefusalGap, freeCreditGap } from "../lib/free-credit-gap";
+import { isPaymentRequiredError } from "../lib/model-access";
 import { timelineShowsFailure } from "../lib/timeline-failure-owner";
 import { sessionDisplayTitle } from "../lib/session-rename";
 import { useStreamHealthTelemetry } from "../lib/stream-health";
@@ -130,7 +131,7 @@ import {
 import { toast } from "../lib/toast";
 
 import { isApiErrorStatus, useAppApi } from "../lib/app-api";
-import { userErrorText } from "../../ui/api-error";
+import { apiErrorFacts, userErrorText } from "../../ui/api-error";
 import { ConsoleComposer } from "../components/Composer";
 import { CONSOLE_TIMELINE_ALLOWANCE_LABELS } from "../lib/allowance-labels";
 import { WorkspaceComposerPlus as ComposerMobilePlus } from "../components/workspace-composer-plus";
@@ -326,6 +327,13 @@ const LazyFailedSessionBanner = lazy(() =>
   })),
 );
 
+// Only a refused Send shows it, so it stays out of the direct session bundle.
+const LazyCreditRefusalNotice = lazy(() =>
+  import("../components/credits/credit-refusal-notice").then((module) => ({
+    default: module.CreditRefusalNotice,
+  })),
+);
+
 const LazyAgentConfigurationPanel = lazy(() =>
   import("../components/session/agent-configuration-panel").then(({ AgentConfigurationPanel }) => ({
     default: AgentConfigurationPanel,
@@ -2116,6 +2124,13 @@ function SessionChatPane(props: {
   const [refusedModel, setRefusedModel] = useState<{ sessionId: string; model: string } | null>(
     null,
   );
+  // The API's credit refusal of a Send: no remaining credit pays for that model.
+  // It stays above the composer until a message is accepted or it is dismissed.
+  const [creditRefusal, setCreditRefusal] = useState<{
+    sessionId: string;
+    model: string;
+    message: string;
+  } | null>(null);
   useEffect(() => {
     const onFocusRequest = (event: Event) => {
       const detail = (event as CustomEvent<SessionComposerFocusIntent>).detail;
@@ -2680,6 +2695,7 @@ function SessionChatPane(props: {
     // host-owned upload/repository queue in sync once those inputs are
     // accepted too; the immutable input snapshot preserves later additions.
     onSent: (_text, input) => {
+      setCreditRefusal(null);
       attachments.removeReadyFiles(
         (input.resources ?? []).flatMap((resource) =>
           resource.kind === "file" ? [resource.fileId] : [],
@@ -2698,6 +2714,15 @@ function SessionChatPane(props: {
         void modelCatalog.refresh();
         setModelPickerSession(props.session.id);
       }
+      // Re-read funding so the notice and picker name what the credit covers now.
+      if (isPaymentRequiredError(error)) {
+        setCreditRefusal({
+          sessionId: props.session.id,
+          model: refusedModelId(error, input) ?? props.session.model,
+          message: error.message,
+        });
+        void modelCatalog.refresh();
+      }
     },
   });
   useBrowserAccountBridgeBlocker(`session-composer:${props.session.id}`, () => {
@@ -3274,6 +3299,15 @@ function SessionChatPane(props: {
     ],
   );
 
+  const canBuyCredits =
+    context.clientConfig.billingMode === "stripe" &&
+    Boolean(workspaceAccountId) &&
+    hasAccountPermission(context.accessContext, workspaceAccountId ?? "", "billing:manage");
+  const canConnectModel = hasWorkspacePermission(
+    context.accessContext,
+    props.session.workspaceId,
+    "connections:write",
+  );
   const failureRecovery =
     !props.hasNewer &&
     props.failure &&
@@ -3301,20 +3335,8 @@ function SessionChatPane(props: {
             freeCreditGap={creditGap}
             onChooseModel={chooseCoveredModel}
             workspaceId={props.session.workspaceId}
-            canBuyCredits={
-              context.clientConfig.billingMode === "stripe" &&
-              Boolean(workspaceAccountId) &&
-              hasAccountPermission(
-                context.accessContext,
-                workspaceAccountId ?? "",
-                "billing:manage",
-              )
-            }
-            canConnectModel={hasWorkspacePermission(
-              context.accessContext,
-              props.session.workspaceId,
-              "connections:write",
-            )}
+            canBuyCredits={canBuyCredits}
+            canConnectModel={canConnectModel}
             sandboxRecovery={
               needsSandboxRecoveryCheck(props.session, props.failure.structuralSandboxFailure)
                 ? {
@@ -3372,6 +3394,38 @@ function SessionChatPane(props: {
         </Suspense>
       </FailureRecoveryBoundary>
     ) : null;
+  // A refused Send names its model, the models the credit still covers, and the
+  // next step above the composer. The credit-stop banner already says this.
+  const sessionCreditRefusal =
+    creditRefusal?.sessionId === props.session.id &&
+    !terminal &&
+    !(failureRecovery && props.creditExhausted)
+      ? creditRefusal
+      : null;
+  // The plain refusal text shows while the notice chunk loads or if it fails.
+  const creditRefusalFallback = sessionCreditRefusal ? (
+    <p role="alert" className="px-1.5 text-sm text-fg-muted">
+      {apiErrorFacts(sessionCreditRefusal.message).serverMessage ?? sessionCreditRefusal.message}
+    </p>
+  ) : null;
+  const creditRefusalNotice = sessionCreditRefusal ? (
+    <FailureRecoveryBoundary key={props.session.id} fallback={creditRefusalFallback}>
+      <Suspense fallback={creditRefusalFallback}>
+        <LazyCreditRefusalNotice
+          gap={creditRefusalGap(modelCatalog.rows, sessionCreditRefusal.model, {
+            selectedModel: composerPolicy?.model,
+            preferredModel: modelCatalog.defaultSelection?.model,
+          })}
+          message={sessionCreditRefusal.message}
+          workspaceId={props.session.workspaceId}
+          canBuyCredits={canBuyCredits}
+          canConnectModel={canConnectModel}
+          onChooseModel={modelPickerDisabled ? undefined : chooseCoveredModel}
+          onDismiss={() => setCreditRefusal(null)}
+        />
+      </Suspense>
+    </FailureRecoveryBoundary>
+  ) : null;
 
   const modelRecovery = props.hasNewer
     ? null
@@ -3733,6 +3787,7 @@ function SessionChatPane(props: {
                 header={
                   unavailableModelNotice ||
                   usageLimitNotice ||
+                  creditRefusalNotice ||
                   (machineAccess && !machineAccess.isOwner) ? (
                     <>
                       {!(
@@ -3754,6 +3809,9 @@ function SessionChatPane(props: {
                       ) : null}
                       {unavailableModelNotice}
                       {usageLimitNotice}
+                      {creditRefusalNotice ? (
+                        <div className="px-2 pt-2">{creditRefusalNotice}</div>
+                      ) : null}
                     </>
                   ) : null
                 }