@opengeni/react 1.0.1 → 1.0.2-canary.37202341988001

package/src/components/model-policy-picker.tsx

@@ -1,56 +1,82 @@
+import { ClaudeMark } from "./claude-mark";
+import { GrokMark } from "./grok-mark";
+import { ChatGptMark, ModelMark, modelHasMark } from "./model-mark";
+import { modelDisplayName } from "@opengeni/sdk/model-display";
 import type { ClientModel, LatencyMode, ReasoningEffort } from "@opengeni/sdk";
 import {
-  CheckIcon,
   ChevronDownIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
+  Globe2Icon,
   KeyRoundIcon,
+  SparklesIcon,
   ZapIcon,
 } from "lucide-react";
 import { motion, useReducedMotion } from "motion/react";
-import { DropdownMenu } from "radix-ui";
 import {
-  useEffect,
+  Suspense,
+  lazy,
   useMemo,
+  useId,
   useState,
   type CSSProperties,
   type ReactNode,
-  type SVGProps,
 } from "react";
 import { cn } from "../lib/cn";
+import { MENU_CHEVRON_CLASS } from "../lib/menu-styles";
 import { usePortalTokenSource, usePortalTokenStyle } from "../lib/use-portal-token-style";
 import {
-  coerceReasoningEffortForModel,
   effortOptionsForModel,
   findPickerRow,
-  groupPickerRowsByBillingClass,
   labelReasoningEffort,
   projectClientModelRows,
-  runnableLatencyModesForModel,
+  scopedBillingClassLabel,
   type PickerBillingClass,
   type PickerModelRow,
 } from "../model-policy";
 
-type ClientPickerModelRow = PickerModelRow<ClientModel>;
-
-type NavLevel = "providers" | "models" | "thinking";
+const LazyModelPolicyPickerMenu = lazy(() =>
+  import("./model-policy-picker-menu").then(({ ModelPolicyPickerPopover }) => ({
+    default: ModelPolicyPickerPopover,
+  })),
+);
 
-type PickerNavState = {
-  level: NavLevel;
-  rail: PickerBillingClass | null;
-  modelId: string | null;
-};
+type ClientPickerModelRow = PickerModelRow<ClientModel>;
 
-type NavUpdater = PickerNavState | ((previous: PickerNavState) => PickerNavState);
+/** Presentation only; never changes model identity, billing or availability. */
+export type ModelPolicyPickerGroupPresentation = Partial<
+  Record<
+    PickerBillingClass,
+    {
+      label?: string | undefined;
+      /** Omit to preserve the default; null hides the supporting text. */
+      description?: string | null | undefined;
+      /** Decorative, non-interactive content. Omit for the default; null hides it. */
+      icon?: ReactNode | undefined;
+    }
+  >
+>;
 
 export type ModelPolicyPickerMessages = {
   label: string;
   loading: string;
   noModels: string;
+  connectTitle: string;
+  connectBody: string;
+  connectAction: string;
   thinking: string;
   fast: string;
   fastRateHint: string;
   codexOnly: string;
+  searchLabel?: string;
+  searchPlaceholder?: string;
+  currentModel?: string;
+  noMatches?: string;
+  unsupportedAttachments?: string;
+  thinkingEffort?: string;
+  selected?: string;
+  free?: string;
+
   billingHints: Record<PickerBillingClass, string>;
 };
 
@@ -58,21 +84,40 @@ export const defaultModelPolicyPickerMessages: ModelPolicyPickerMessages = {
   label: "Model and effort",
   loading: "Loading model catalog…",
   noModels: "No models available.",
+  connectTitle: "Connect a model",
+  connectBody: "Use a subscription or a provider key you already have.",
+  connectAction: "Open Models",
   thinking: "Thinking",
   fast: "Fast",
   fastRateHint: "2× rate",
   codexOnly: "Codex-only session",
+  searchLabel: "Search models or providers",
+  searchPlaceholder: "Search models or providers…",
+  currentModel: "Current model",
+  noMatches: "No matching models. Try a model or provider name.",
+  unsupportedAttachments: "This model cannot view the attached images.",
+  thinkingEffort: "Thinking effort",
+  selected: "Selected",
+  free: "Free",
+
   billingHints: {
-    opengeni_credits: "Will use credits",
+    opengeni_credits: "Provided by Opengeni",
+    external: "Provider terms and limits apply",
     codex_subscription: "ChatGPT / Codex plan",
     supergrok_subscription: "SuperGrok / xAI plan",
-    byok: "Billed to your AI Gateway",
+    claude_subscription: "Claude plan",
+    byok: "Billed to the connected provider account",
+    organization_byok: "Billed to the connected provider account",
   },
 };
 
 export type ModelPolicyPickerProps = {
+  /** Host branding for payment-source groups, shared by menu and trigger. */
+  groupPresentation?: ModelPolicyPickerGroupPresentation | undefined;
   /** Lightweight deployment models. Catalog rows take precedence when supplied. */
   models?: ClientModel[] | undefined;
+  /** Warn only when the draft actually contains images this model cannot view. */
+  hasImageAttachments?: boolean | undefined;
   /** Catalog-backed rows with availability and billing-class truth. */
   rows?: PickerModelRow[] | undefined;
   model: string;
@@ -88,15 +133,35 @@ export type ModelPolicyPickerProps = {
   onOpenChange?: ((open: boolean) => void) | undefined;
   /** Non-Codex models stay visible but cannot be selected. */
   codexOnly?: boolean | undefined;
-  /** Resets drill-down navigation when the session scope changes. */
+  /** Identity of the current session scope. */
   sessionKey?: string | undefined;
   /** Prefer bottom on new-chat surfaces and top for bottom-docked composers. */
   menuSide?: "top" | "bottom" | undefined;
+  /**
+   * Default true: show models the way people choose them, with clean names,
+   * maker marks, one "API keys" group for organization- and workspace-connected
+   * keys, and one row for identical copies. Models settings passes false to
+   * keep its scope-aware presentation (raw catalog labels, scoped groups).
+   */
+  collapseScopes?: boolean | undefined;
+  /** Hide latency controls on surfaces whose saved policy does not include latency. */
+  allowLatencyMode?: boolean | undefined;
+  /** Settings → Models. Shown when the catalog has no model that can run. */
+  connectModelsHref?: string | undefined;
   /** Classes for the portalled menu surface. Prefer --og-* tokens for theming. */
   contentClassName?: string | undefined;
   /** Inline styles for the portalled menu, applied after inherited --og-* tokens. */
   contentStyle?: CSSProperties | undefined;
   className?: string | undefined;
+  /**
+   * "pill" (default) is the composer's quiet rounded trigger with the effort.
+   * "field" is a settings control: a bordered rectangle with the model name
+   * and `triggerMeta` (for example the payer) in muted text. The effort stays
+   * in the menu.
+   */
+  triggerStyle?: "pill" | "field" | undefined;
+  /** Muted text after the model name in the "field" trigger. */
+  triggerMeta?: ReactNode;
   messages?: Partial<ModelPolicyPickerMessages> | undefined;
   onModelChange: (modelId: string) => void;
   onEffortChange: (effort: ReasoningEffort) => void;
@@ -105,63 +170,29 @@ export type ModelPolicyPickerProps = {
 
 const SLIDE_EASE = [0.22, 1, 0.36, 1] as const;
 
-function OpenGeniMark(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      viewBox="0 0 140 133"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={1.2}
-      strokeLinejoin="round"
-      aria-hidden="true"
-      {...props}
-    >
-      <g transform="translate(-17.5,-20.999893188476562) scale(1.75)">
-        <g transform="translate(0,-952.36218)">
-          <path d="m 60.7828,964.36215 27.1809,0.8834 -27.1809,25.9958 z m -1.9745,1.4513 0,26.7845 -25.2681,0 c 8.6166,-8.7334 16.8796,-17.8103 25.2681,-26.7845 z m 27.7053,3.628 3.4864,1.1989 -12.5877,7.4768 z m -68.1835,2.9656 5.5226,0 12.8654,14.0705 -5.9854,6.1204 -12.4026,0 c 9e-4,-6.7347 0,-13.4597 0,-20.1909 z m -1.9746,1.2304 0,5.8364 -6.3555,0 z m 3.363,20.9796 38.627,0 -10.7675,29.43465 z m 39.0898,4.54286 0,41.20229 -12.5878,-6.8775 c 4.1972,-11.443 8.3886,-22.879 12.5878,-34.32479 z" />
-        </g>
-      </g>
-    </svg>
-  );
-}
-
-function ChatGptMark(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>
-      <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3653-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8414 3.3698-2.02 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.783-2.7622a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
-    </svg>
-  );
-}
-
-function XaiMark(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg viewBox="0 0 466.04 516.93" fill="currentColor" aria-hidden="true" {...props}>
-      <polygon points="0.12 182.71 234.14 516.92 338.15 516.92 104.13 182.71 0.12 182.71" />
-      <polygon points="0 516.92 104.08 516.92 156.08 442.67 104.04 368.34 0 516.92" />
-      <polygon points="466.04 0 361.96 0 182.1 256.86 234.15 331.18 466.04 0" />
-      <polygon points="380.78 516.92 466.04 516.92 466.04 37.16 380.78 158.92 380.78 516.92" />
-    </svg>
-  );
-}
-
 export function BillingClassMark(props: {
   billingClass: PickerBillingClass;
+  presentation?: ModelPolicyPickerGroupPresentation[PickerBillingClass] | undefined;
   className?: string | undefined;
   "aria-label"?: string | undefined;
 }) {
   const labels: Record<PickerBillingClass, string> = {
-    opengeni_credits: "OpenGeni",
+    opengeni_credits: "Models",
+    external: "External provider",
     codex_subscription: "Codex",
     supergrok_subscription: "SuperGrok",
-    byok: "Bring your own key",
+    claude_subscription: "Claude",
+    byok: "API key",
+    organization_byok: "API key",
   };
-  const label = props["aria-label"] ?? labels[props.billingClass];
+  if (props.presentation?.icon === null) return null;
+  const label = props["aria-label"] ?? props.presentation?.label ?? labels[props.billingClass];
   const accessibility =
     label.length === 0
       ? { "aria-hidden": true as const }
       : { role: "img" as const, "aria-label": label };
   const shell = cn(
-    "inline-flex size-3.5 shrink-0 items-center justify-center overflow-hidden text-og-fg-subtle",
+    "inline-flex size-3.5 shrink-0 items-center justify-center overflow-hidden text-og-fg-subtle [&>svg]:size-full [&>img]:size-full",
     props.className,
   );
   const mark = "size-3.5";
@@ -171,12 +202,18 @@ export function BillingClassMark(props: {
       data-testid={`billing-class-icon-${props.billingClass}`}
       {...accessibility}
     >
-      {props.billingClass === "opengeni_credits" ? (
-        <OpenGeniMark className={mark} />
+      {props.presentation?.icon !== undefined ? (
+        props.presentation.icon
+      ) : props.billingClass === "opengeni_credits" ? (
+        <SparklesIcon className={mark} aria-hidden />
+      ) : props.billingClass === "external" ? (
+        <Globe2Icon className={mark} aria-hidden />
       ) : props.billingClass === "codex_subscription" ? (
         <ChatGptMark className={mark} />
+      ) : props.billingClass === "claude_subscription" ? (
+        <ClaudeMark className={mark} />
       ) : props.billingClass === "supergrok_subscription" ? (
-        <XaiMark className={mark} />
+        <GrokMark className={mark} />
       ) : (
         <KeyRoundIcon className={mark} aria-hidden />
       )}
@@ -188,6 +225,22 @@ function isCodexModel(model: ClientModel): boolean {
   return model.id.startsWith("codex/") || model.source === "codex";
 }
 
+function billingClassForMissingSelection(modelId: string): PickerBillingClass {
+  if (modelId.startsWith("workspace-claude-subscription/")) return "claude_subscription";
+  if (modelId.startsWith("workspace-anthropic/")) return "byok";
+  if (modelId.startsWith("organization-claude-subscription/")) return "claude_subscription";
+  if (modelId.startsWith("organization-anthropic/")) return "organization_byok";
+  if (modelId.startsWith("workspace-gateway/")) return "byok";
+  if (modelId.startsWith("workspace-openrouter/")) return "byok";
+  // A deployment OpenRouter ID does not encode its workspace-facing cost.
+  // Missing rows therefore use the credits-safe rail instead of falsely
+  // claiming that an unknown former selection was externally funded.
+  if (modelId.startsWith("openrouter/")) return "opengeni_credits";
+  if (modelId.startsWith("codex/")) return "codex_subscription";
+  if (modelId.startsWith("supergrok/")) return "supergrok_subscription";
+  return "opengeni_credits";
+}
+
 function applyCodexOnly(
   rows: ClientPickerModelRow[],
   codexOnly: boolean,
@@ -205,36 +258,102 @@ function applyCodexOnly(
   );
 }
 
-function effectiveRows(props: ModelPolicyPickerProps): ClientPickerModelRow[] {
-  const rows = props.rows !== undefined ? props.rows : projectClientModelRows(props.models ?? []);
-  const messages = { ...defaultModelPolicyPickerMessages, ...props.messages };
-  return applyCodexOnly(rows, props.codexOnly === true, messages.codexOnly);
+/**
+ * The trigger shows who makes the chosen model. Subscription rails already
+ * carry their maker's mark (ChatGPT, Claude, Grok), and explicit host branding
+ * for a payment group always wins; otherwise API-key and deployment models show
+ * the maker's logo instead of a generic key, falling back to the group mark.
+ */
+function SelectedModelMark(input: {
+  props: ModelPolicyPickerProps;
+  selected: ClientPickerModelRow | null;
+}) {
+  const billingClass =
+    input.selected?.billingClass ?? billingClassForMissingSelection(input.props.model);
+  const presentation = groupPresentationFor(input.props, billingClass);
+  const model = input.selected?.catalog ?? input.props.model;
+  if (input.props.collapseScopes === false) {
+    return (
+      <BillingClassMark
+        billingClass={billingClass}
+        presentation={presentation}
+        aria-label={presentation?.label ?? SCOPED_MARK_LABELS[billingClass]}
+        className="text-og-fg"
+      />
+    );
+  }
+  if (
+    presentation?.icon !== undefined ||
+    BRANDED_BILLING_CLASSES.has(billingClass) ||
+    !modelHasMark(model)
+  ) {
+    return (
+      <BillingClassMark
+        billingClass={billingClass}
+        presentation={presentation}
+        className="text-og-fg"
+      />
+    );
+  }
+  return <ModelMark model={model} className="text-og-fg" />;
 }
 
-function defaultNavState(rows: ClientPickerModelRow[], modelId: string): PickerNavState {
-  const selected = findPickerRow(rows, modelId);
-  if (!selected) {
-    const rails = new Set(rows.map((row) => row.billingClass));
-    const onlyRail = rails.size === 1 ? rows[0]?.billingClass : null;
-    return onlyRail
-      ? { level: "models", rail: onlyRail, modelId: null }
-      : { level: "providers", rail: null, modelId: null };
-  }
-  return { level: "thinking", rail: selected.billingClass, modelId: selected.id };
+const SCOPED_MARK_LABELS: Partial<Record<PickerBillingClass, string>> = {
+  byok: "Workspace provider account",
+  organization_byok: "Organization provider account",
+};
+
+/** Models settings keeps naming who is billed for a key. */
+export const SCOPED_BILLING_HINTS: Partial<Record<PickerBillingClass, string>> = {
+  byok: "Billed to the workspace provider account",
+  organization_byok: "Billed to the organization provider account",
+};
+
+/**
+ * Host branding for a payment group. While scopes are collapsed, API keys are
+ * one group, so either API-key presentation serves both.
+ */
+export function groupPresentationFor(
+  props: Pick<ModelPolicyPickerProps, "groupPresentation" | "collapseScopes">,
+  billingClass: PickerBillingClass,
+): ModelPolicyPickerGroupPresentation[PickerBillingClass] {
+  const own = props.groupPresentation?.[billingClass];
+  if (own !== undefined || props.collapseScopes === false) return own;
+  if (billingClass === "byok") return props.groupPresentation?.organization_byok;
+  if (billingClass === "organization_byok") return props.groupPresentation?.byok;
+  return undefined;
 }
 
-function usePickerNavState(
-  sessionKey: string | undefined,
-  rows: ClientPickerModelRow[],
-  model: string,
-): [PickerNavState, (next: NavUpdater) => void] {
-  const [state, setState] = useState<PickerNavState>(() => defaultNavState(rows, model));
-  useEffect(() => {
-    setState(defaultNavState(rows, model));
-    // The menu deliberately preserves its drill-down while the same session is mounted.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sessionKey]);
-  return [state, setState];
+/** A selection the catalog no longer lists: its clean name (settings keep the id). */
+function fallbackName(props: ModelPolicyPickerProps): string {
+  return props.collapseScopes === false ? props.model : modelDisplayName(props.model);
+}
+
+const BRANDED_BILLING_CLASSES: ReadonlySet<PickerBillingClass> = new Set([
+  "codex_subscription",
+  "claude_subscription",
+  "supergrok_subscription",
+]);
+
+export function effectiveRows(props: ModelPolicyPickerProps): ClientPickerModelRow[] {
+  const rows = props.rows !== undefined ? props.rows : projectClientModelRows(props.models ?? []);
+  const messages = { ...defaultModelPolicyPickerMessages, ...props.messages };
+  return applyCodexOnly(rows, props.codexOnly === true, messages.codexOnly).map((row) => {
+    const scoped =
+      props.collapseScopes === false
+        ? {
+            ...row,
+            label: row.catalog.label,
+            billingClassLabel: scopedBillingClassLabel(row.billingClass),
+          }
+        : row;
+    if (props.collapseScopes === false) {
+      if (row.catalog.shortLabel) scoped.shortLabel = row.catalog.shortLabel;
+      else delete scoped.shortLabel;
+    }
+    const label = groupPresentationFor(props, row.billingClass)?.label;
+    return label === undefined ? scoped : { ...scoped, billingClassLabel: label };
+  });
 }
 
 export function PickerNavRow(props: {
@@ -245,6 +364,7 @@ export function PickerNavRow(props: {
   showChevron?: boolean | undefined;
   disabled?: boolean | undefined;
   title?: string | undefined;
+  description?: string | undefined;
   active?: boolean | undefined;
   testId?: string | undefined;
   onClick: () => void;
@@ -254,28 +374,24 @@ export function PickerNavRow(props: {
       type="button"
       disabled={props.disabled}
       title={props.title}
+      aria-description={props.description}
       onClick={props.onClick}
       data-testid={props.testId}
       className={cn(
-        "flex w-full cursor-pointer items-center gap-2 rounded-og-sm px-[var(--og-model-picker-row-padding-x)] py-[var(--og-model-picker-row-padding-y)] text-left text-og-fg outline-hidden transition-colors hover:bg-og-surface-2 focus-visible:ring-2 focus-visible:ring-og-accent/40",
+        // The one menu row (lib/menu-styles.ts), with density tokens for embedders.
+        "flex min-h-8 w-full cursor-pointer items-center gap-2.5 rounded-og-md px-[var(--og-model-picker-row-padding-x)] py-[var(--og-model-picker-row-padding-y)] text-left text-og-fg outline-hidden transition-colors duration-[120ms] hover:bg-og-hover focus-visible:bg-og-hover focus-visible:outline-2 focus-visible:-outline-offset-2! focus-visible:outline-og-accent/55 pointer-coarse:min-h-11",
         props.disabled && "cursor-not-allowed opacity-50",
       )}
     >
       {props.icon}
       <span className="min-w-0 flex-1">
-        <span className={cn("block truncate text-og-menu", props.active && "font-medium")}>
-          {props.label}
-        </span>
+        <span className="block truncate text-og-menu">{props.label}</span>
         {props.hint ? (
-          <span className="mt-0.5 block truncate text-og-control text-og-fg-subtle">
-            {props.hint}
-          </span>
+          <span className="mt-0.5 block truncate text-og-sm text-og-fg-muted">{props.hint}</span>
         ) : null}
       </span>
       {props.trailing ? <span className="ml-auto shrink-0">{props.trailing}</span> : null}
-      {props.showChevron === false ? null : (
-        <ChevronRightIcon className="size-3.5 shrink-0 text-og-fg-subtle" />
-      )}
+      {props.showChevron === false ? null : <ChevronRightIcon className={MENU_CHEVRON_CLASS} />}
     </button>
   );
 }
@@ -287,14 +403,16 @@ export function PickerBackHeader(props: {
   trailing?: ReactNode;
 }) {
   return (
-    <div className="mb-1 flex items-center gap-0.5 border-b border-og-border/70 px-0.5 pb-1.5">
+    <div className="mb-1.5 flex min-h-9 items-center gap-1 border-b border-og-border pb-1.5">
       <button
         type="button"
         onClick={props.onBack}
         data-testid="model-picker-back"
-        className="flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 rounded-og-sm px-1.5 py-1.5 text-left text-og-fg outline-hidden transition-colors hover:bg-og-surface-2 focus-visible:ring-2 focus-visible:ring-og-accent/40"
+        className="flex min-h-8 min-w-0 flex-1 cursor-pointer items-center gap-1 rounded-og-md pr-2.5 text-left text-og-fg outline-hidden transition-colors duration-[120ms] hover:bg-og-hover focus-visible:outline-2 focus-visible:-outline-offset-2! focus-visible:outline-og-accent/55 pointer-coarse:min-h-11"
       >
-        <ChevronLeftIcon className="size-3.5 shrink-0 text-og-fg-subtle" />
+        <span className="flex size-8 shrink-0 items-center justify-center text-og-fg-muted">
+          <ChevronLeftIcon className="size-4" />
+        </span>
         {props.icon}
         <span className="min-w-0 flex-1 truncate text-og-menu font-medium">{props.label}</span>
       </button>
@@ -322,255 +440,36 @@ export function PickerAnimatedPage(props: {
   );
 }
 
-export function ModelPolicyPickerMenu(
-  props: ModelPolicyPickerProps & {
-    nav?: PickerNavState | undefined;
-    onNavChange?: ((next: NavUpdater) => void) | undefined;
-  },
-) {
-  const messages = useMemo(
-    () => ({ ...defaultModelPolicyPickerMessages, ...props.messages }),
-    [props.messages],
-  );
-  const rows = effectiveRows(props);
-  const groups = useMemo(() => groupPickerRowsByBillingClass(rows), [rows]);
-  const [localNav, setLocalNav] = usePickerNavState(
-    props.nav === undefined ? props.sessionKey : undefined,
-    rows,
-    props.model,
-  );
-  const nav = props.nav ?? localNav;
-  const setNav = props.onNavChange ?? setLocalNav;
-  const [direction, setDirection] = useState<1 | -1>(1);
-
-  const effectiveNav =
-    nav.level === "providers" && groups.length === 1
-      ? { level: "models" as const, rail: groups[0]!.billingClass, modelId: null }
-      : nav;
-  const activeGroup =
-    effectiveNav.rail === null
-      ? undefined
-      : groups.find((group) => group.billingClass === effectiveNav.rail);
-  const focusModel =
-    effectiveNav.modelId === null ? undefined : findPickerRow(rows, effectiveNav.modelId);
-  const selectedRow = findPickerRow(rows, props.model);
-  const { latencyMode, loading, onLatencyModeChange } = props;
-
-  useEffect(() => {
-    if (loading || !selectedRow?.selectable) return;
-    const supportsCurrentMode = runnableLatencyModesForModel(selectedRow.catalog).includes(
-      latencyMode,
-    );
-    if (!supportsCurrentMode && latencyMode !== "standard") {
-      onLatencyModeChange("standard");
-    }
-  }, [latencyMode, loading, onLatencyModeChange, selectedRow]);
-
-  const go = (next: PickerNavState, nextDirection: 1 | -1) => {
-    setDirection(nextDirection);
-    setNav(next);
-  };
-
-  const selectEffort = (row: ClientPickerModelRow, effort: ReasoningEffort) => {
-    if (!row.selectable) return;
-    if (row.id !== props.model) props.onModelChange(row.id);
-    props.onEffortChange(coerceReasoningEffortForModel(row.catalog, effort));
-  };
-
-  const pageKey =
-    effectiveNav.level === "providers"
-      ? "providers"
-      : effectiveNav.level === "models"
-        ? `models:${effectiveNav.rail ?? ""}`
-        : `thinking:${effectiveNav.modelId ?? ""}`;
-
-  let body: ReactNode;
-  if (props.loading) {
-    body = <p className="px-2 py-3 text-og-control text-og-fg-subtle">{messages.loading}</p>;
-  } else if (groups.length === 0) {
-    body = <p className="px-2 py-3 text-og-control text-og-fg-subtle">{messages.noModels}</p>;
-  } else if (effectiveNav.level === "providers") {
-    body = (
-      <div className="flex flex-col gap-0.5" data-testid="model-picker-providers">
-        {groups.map((group) => (
-          <PickerNavRow
-            key={group.billingClass}
-            label={group.label}
-            hint={messages.billingHints[group.billingClass]}
-            icon={<BillingClassMark billingClass={group.billingClass} />}
-            active={selectedRow?.billingClass === group.billingClass}
-            testId={`model-picker-rail-${group.billingClass}`}
-            onClick={() => go({ level: "models", rail: group.billingClass, modelId: null }, 1)}
-          />
-        ))}
-      </div>
-    );
-  } else if (effectiveNav.level === "models" && activeGroup) {
-    body = (
-      <div data-testid="model-picker-models">
-        {groups.length > 1 ? (
-          <PickerBackHeader
-            label={activeGroup.label}
-            icon={<BillingClassMark billingClass={activeGroup.billingClass} />}
-            onBack={() => go({ level: "providers", rail: null, modelId: null }, -1)}
-          />
-        ) : null}
-        <div className="flex flex-col gap-0.5">
-          {activeGroup.rows.map((row) => (
-            <PickerNavRow
-              key={`${row.billingClass}:${row.id}`}
-              label={row.label}
-              hint={row.unavailableReason ?? undefined}
-              disabled={!row.selectable}
-              title={row.unavailableReason ?? undefined}
-              active={row.id === props.model}
-              testId={`model-picker-choice-${row.id}`}
-              onClick={() => {
-                if (row.selectable) {
-                  go({ level: "thinking", rail: row.billingClass, modelId: row.id }, 1);
-                }
-              }}
-            />
-          ))}
-        </div>
-      </div>
-    );
-  } else if (effectiveNav.level === "thinking" && focusModel) {
-    const activeModel = focusModel.id === props.model;
-    const supportsFast = runnableLatencyModesForModel(focusModel.catalog).includes("fast");
-    body = (
-      <div data-testid="model-picker-reasoning">
-        <PickerBackHeader
-          label={focusModel.label}
-          icon={<BillingClassMark billingClass={focusModel.billingClass} />}
-          onBack={() => go({ level: "models", rail: focusModel.billingClass, modelId: null }, -1)}
-          trailing={
-            supportsFast ? (
-              <button
-                type="button"
-                disabled={!focusModel.selectable}
-                aria-pressed={activeModel && props.latencyMode === "fast"}
-                aria-label={
-                  activeModel && props.latencyMode === "fast"
-                    ? `Disable ${messages.fast}`
-                    : `Enable ${messages.fast}`
-                }
-                title={`${messages.fast} · ${messages.fastRateHint}`}
-                data-testid="model-picker-fast"
-                onClick={() => {
-                  if (!activeModel) {
-                    props.onModelChange(focusModel.id);
-                    props.onEffortChange(
-                      coerceReasoningEffortForModel(focusModel.catalog, props.effort),
-                    );
-                  }
-                  props.onLatencyModeChange(
-                    activeModel && props.latencyMode === "fast" ? "standard" : "fast",
-                  );
-                }}
-                className={cn(
-                  "flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-og-sm text-og-fg-subtle outline-hidden transition-colors hover:bg-og-surface-2 focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:cursor-not-allowed disabled:opacity-50",
-                  activeModel && props.latencyMode === "fast" && "text-og-fg",
-                )}
-              >
-                <ZapIcon
-                  className={cn(
-                    "size-3.5",
-                    activeModel && props.latencyMode === "fast" && "fill-current",
-                  )}
-                />
-              </button>
-            ) : null
-          }
-        />
-        <p className="px-2.5 pt-1 pb-1 text-og-control font-medium tracking-wide text-og-fg-subtle uppercase">
-          {messages.thinking}
-        </p>
-        {focusModel.catalog.capabilities?.inputModalities.includes("image") === false ? (
-          <p className="px-2.5 pb-1.5 text-og-control leading-relaxed text-og-fg-subtle">
-            Unsupported attachments stay in the session but are hidden from this model.
-          </p>
-        ) : null}
-        <div className="flex flex-col gap-0.5">
-          {effortOptionsForModel(focusModel.catalog).map((effort) => {
-            const selected = activeModel && effort === props.effort;
-            return (
-              <button
-                key={effort}
-                type="button"
-                disabled={!focusModel.selectable}
-                onClick={() => selectEffort(focusModel, effort)}
-                className={cn(
-                  "flex h-[var(--og-model-picker-effort-height)] w-full cursor-pointer items-center rounded-og-sm px-[var(--og-model-picker-row-padding-x)] text-left text-og-menu text-og-fg outline-hidden transition-colors hover:bg-og-surface-2 focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:cursor-not-allowed disabled:opacity-50",
-                  selected && "bg-og-surface-2",
-                )}
-              >
-                <span className="min-w-0 flex-1 truncate">{labelReasoningEffort(effort)}</span>
-                {selected ? (
-                  <CheckIcon
-                    className="ml-auto size-3.5 shrink-0"
-                    data-testid="model-picker-effort-check"
-                  />
-                ) : null}
-              </button>
-            );
-          })}
-        </div>
-      </div>
-    );
-  } else {
-    body = (
-      <div className="flex flex-col gap-0.5" data-testid="model-picker-providers">
-        {groups.map((group) => (
-          <PickerNavRow
-            key={group.billingClass}
-            label={group.label}
-            hint={messages.billingHints[group.billingClass]}
-            icon={<BillingClassMark billingClass={group.billingClass} />}
-            testId={`model-picker-rail-${group.billingClass}`}
-            onClick={() => go({ level: "models", rail: group.billingClass, modelId: null }, 1)}
-          />
-        ))}
-      </div>
-    );
-  }
-
-  return (
-    <div data-testid="model-picker-menu" className="relative overflow-hidden">
-      {props.error ? (
-        <p className="px-2 py-1 text-og-control text-og-status-failed" role="alert">
-          {props.error}
-        </p>
-      ) : null}
-      <PickerAnimatedPage pageKey={pageKey} direction={direction}>
-        {body}
-      </PickerAnimatedPage>
-    </div>
-  );
-}
-
-export function ModelPolicyPicker(props: ModelPolicyPickerProps) {
+/** @internal Shared controlled/uncontrolled state seam. */
+export function useModelPolicyPickerState(props: ModelPolicyPickerProps) {
   const [uncontrolledOpen, setUncontrolledOpen] = useState(props.defaultOpen ?? false);
   const open = props.open ?? uncontrolledOpen;
   const setOpen = (next: boolean) => {
     if (props.open === undefined) setUncontrolledOpen(next);
     props.onOpenChange?.(next);
   };
+  return { open, setOpen, rows: effectiveRows(props) };
+}
+
+export function ModelPolicyPicker(props: ModelPolicyPickerProps) {
+  const contentId = useId();
   const trigger = usePortalTokenSource<HTMLButtonElement>();
   const portalStyle = usePortalTokenStyle(trigger.source);
   const messages = useMemo(
     () => ({ ...defaultModelPolicyPickerMessages, ...props.messages }),
     [props.messages],
   );
-  const rows = effectiveRows(props);
-  const [nav, setNav] = usePickerNavState(props.sessionKey, rows, props.model);
+  const { open, setOpen, rows } = useModelPolicyPickerState(props);
   const selected = findPickerRow(rows, props.model);
+  const needsModel =
+    !rows.some((row) => row.selectable) && (rows.length > 0 || Boolean(props.connectModelsHref));
 
   if (props.loading) {
     return (
       <span
         className={cn(
           "og-root inline-flex h-8 w-40 shrink-0 animate-pulse rounded-full bg-og-surface-2",
+          props.triggerStyle === "field" && "w-[180px] rounded-og-md",
           props.className,
         )}
         aria-label={messages.loading}
@@ -578,64 +477,121 @@ export function ModelPolicyPicker(props: ModelPolicyPickerProps) {
       />
     );
   }
-  return (
-    <DropdownMenu.Root open={open} onOpenChange={setOpen}>
-      <DropdownMenu.Trigger asChild>
+  if (props.triggerStyle === "field") {
+    return (
+      <>
         <button
           ref={trigger.ref}
           type="button"
+          aria-haspopup="dialog"
+          aria-expanded={open}
+          aria-controls={open ? contentId : undefined}
+          data-state={open ? "open" : "closed"}
+          data-trigger-style="field"
+          onClick={() => setOpen(!open)}
           disabled={props.disabled}
           aria-label={messages.label}
           className={cn(
-            "og-root og-model-policy-trigger inline-flex h-[var(--og-model-picker-trigger-height)] min-w-0 max-w-64 items-center gap-1 rounded-full border border-transparent px-2.5 text-og-control text-og-fg-muted outline-hidden transition-colors hover:border-og-border hover:bg-og-surface-2 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:cursor-not-allowed disabled:opacity-50 max-sm:h-11 max-sm:max-w-[7.5rem] max-sm:px-2",
+            "og-root inline-flex h-8 min-w-[180px] max-w-full items-center gap-2 rounded-og-md border border-og-border bg-og-surface px-2.5 text-sm text-og-fg outline-hidden transition-colors hover:bg-og-surface-2 focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:cursor-not-allowed disabled:opacity-50",
             props.className,
           )}
         >
-          <BillingClassMark
-            billingClass={
-              selected?.billingClass ??
-              (props.model.startsWith("codex/") ? "codex_subscription" : "opengeni_credits")
-            }
-            className="text-og-fg"
-          />
-          <span className="og-model-policy-label-full min-w-0 truncate font-medium text-og-fg max-sm:hidden">
-            {selected?.label ?? props.model}
-          </span>
-          <span className="og-model-policy-label-short min-w-0 truncate font-medium text-og-fg sm:hidden">
-            {selected?.shortLabel ?? selected?.label ?? props.model}
-          </span>
-          <span className="og-model-policy-effort max-sm:hidden">
-            {labelReasoningEffort(props.effort)}
+          {needsModel ? (
+            <SparklesIcon className="size-3.5 shrink-0" aria-hidden />
+          ) : (
+            <SelectedModelMark props={props} selected={selected} />
+          )}
+          <span className="min-w-0 truncate font-medium">
+            {needsModel ? messages.connectTitle : (selected?.label ?? fallbackName(props))}
           </span>
-          {props.latencyMode === "fast" ? (
-            <ZapIcon
-              className="size-3.5 shrink-0 fill-current stroke-current text-og-fg"
-              aria-label={messages.fast}
-              data-testid="model-picker-fast-icon"
-            />
+          {props.triggerMeta && !needsModel ? (
+            <span className="min-w-0 shrink-[9999] truncate text-og-fg-muted">
+              {props.triggerMeta}
+            </span>
           ) : null}
-          <ChevronDownIcon className="size-3 shrink-0" />
+          <ChevronDownIcon className="ml-auto size-3.5 shrink-0 text-og-fg-muted" />
         </button>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Portal>
-        <DropdownMenu.Content
-          align="start"
-          side={props.menuSide ?? "bottom"}
-          sideOffset={8}
-          collisionPadding={12}
-          onCloseAutoFocus={(event) => event.preventDefault()}
-          className={cn(
-            "og-root og-model-policy-menu z-50 flex max-h-[min(20rem,var(--radix-dropdown-menu-content-available-height))] w-[var(--og-model-picker-menu-width)] max-w-[calc(100vw-16px)] flex-col overflow-hidden rounded-og-lg border border-og-border bg-og-surface-1 p-[var(--og-model-picker-menu-padding)] text-og-fg shadow-og-lg",
-            props.contentClassName,
-          )}
-          style={{ ...portalStyle, ...props.contentStyle }}
-          data-testid="model-picker-content"
-        >
-          <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
-            <ModelPolicyPickerMenu {...props} nav={nav} onNavChange={setNav} />
-          </div>
-        </DropdownMenu.Content>
-      </DropdownMenu.Portal>
-    </DropdownMenu.Root>
+        {open ? (
+          <Suspense fallback={null}>
+            <LazyModelPolicyPickerMenu
+              {...props}
+              anchor={trigger.currentRef}
+              contentId={contentId}
+              portalStyle={portalStyle}
+              onOpenChange={setOpen}
+            />
+          </Suspense>
+        ) : null}
+      </>
+    );
+  }
+  return (
+    <>
+      <button
+        ref={trigger.ref}
+        type="button"
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        aria-controls={open ? contentId : undefined}
+        data-state={open ? "open" : "closed"}
+        onClick={() => setOpen(!open)}
+        disabled={props.disabled}
+        aria-label={messages.label}
+        className={cn(
+          "og-root og-model-policy-trigger inline-flex h-[var(--og-model-picker-trigger-height)] min-w-0 max-w-64 items-center gap-1 rounded-full border px-2.5 text-og-control outline-hidden transition-colors focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:cursor-not-allowed disabled:opacity-50 max-sm:h-11 max-sm:max-w-[7.5rem] max-sm:px-2",
+          // With no usable model the pill is the one thing that unblocks the
+          // composer, so it takes the primary wash.
+          needsModel
+            ? "border-og-primary-border bg-og-primary text-og-primary-fg hover:bg-og-primary-hover"
+            : "border-transparent text-og-fg-muted hover:border-og-border hover:bg-og-surface-2 hover:text-og-fg",
+          props.className,
+        )}
+      >
+        {needsModel ? (
+          <SparklesIcon className="size-3.5 shrink-0" aria-hidden />
+        ) : (
+          <SelectedModelMark props={props} selected={selected} />
+        )}
+        <span className="og-model-policy-label-full min-w-0 truncate font-medium text-og-fg max-sm:hidden @max-[20rem]/model-controls:hidden">
+          {needsModel ? messages.connectTitle : (selected?.label ?? fallbackName(props))}
+        </span>
+        <span className="og-model-policy-label-short min-w-0 truncate font-medium text-og-fg sm:hidden @max-[20rem]/model-controls:block">
+          {needsModel
+            ? messages.connectTitle
+            : (selected?.shortLabel ?? selected?.label ?? fallbackName(props))}
+        </span>
+        {selected &&
+        !needsModel &&
+        effortOptionsForModel(selected.catalog).length > 1 &&
+        selected.catalog.capabilities?.reasoning.runnable !== false ? (
+          <span
+            className="og-model-policy-effort min-w-0 shrink-[9999] truncate"
+            title={labelReasoningEffort(props.effort)}
+          >
+            {labelReasoningEffort(props.effort)}
+          </span>
+        ) : null}
+        {props.latencyMode === "fast" && !needsModel ? (
+          <ZapIcon
+            className="size-3.5 shrink-0 fill-current stroke-current text-og-fg"
+            aria-label={messages.fast}
+            data-testid="model-picker-fast-icon"
+          />
+        ) : null}
+        <ChevronDownIcon className="size-3 shrink-0" />
+      </button>
+
+      {open ? (
+        <Suspense fallback={null}>
+          <LazyModelPolicyPickerMenu
+            {...props}
+            anchor={trigger.currentRef}
+            contentId={contentId}
+            portalStyle={portalStyle}
+            onOpenChange={setOpen}
+          />
+        </Suspense>
+      ) : null}
+    </>
   );
 }