@opengeni/react 3.3.2 → 3.4.0

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

@@ -1,80 +1,68 @@
+import { ClaudeMark } from "./claude-mark";
+import { GrokMark } from "./grok-mark";
+import { ChatGptMark, ModelMark, modelHasMark } from "./model-mark";
+import { modelDisplayName, modelLogoUrl } 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,
-  useRef,
+  useId,
   useState,
   type CSSProperties,
   type ReactNode,
-  type SVGProps,
 } from "react";
 import { cn } from "../lib/cn";
+import {
+  billingClassForMissingSelection,
+  defaultModelPolicyPickerMessages,
+  effectiveRows as sharedEffectiveRows,
+  groupPresentationFor,
+  SCOPED_BILLING_HINTS,
+  type ModelPickerGroupPresentation,
+  type ModelPolicyPickerMessages,
+} from "../model-picker-model";
+import { MENU_CHEVRON_CLASS } from "../lib/menu-styles";
 import { usePortalTokenSource, usePortalTokenStyle } from "../lib/use-portal-token-style";
 import {
-  effortOptionsForModel,
   findPickerRow,
-  groupPickerRowsByBillingClass,
   labelReasoningEffort,
-  projectClientModelRows,
-  runnableLatencyModesForModel,
+  modelOffersEffortChoice,
   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 NavUpdater = PickerNavState | ((previous: PickerNavState) => PickerNavState);
+type ClientPickerModelRow = PickerModelRow<ClientModel>;
 
-export type ModelPolicyPickerMessages = {
-  label: string;
-  loading: string;
-  noModels: string;
-  thinking: string;
-  fast: string;
-  fastRateHint: string;
-  codexOnly: string;
-  billingHints: Record<PickerBillingClass, string>;
-};
+/** Presentation only; never changes model identity, billing or availability. */
+export type ModelPolicyPickerGroupPresentation = ModelPickerGroupPresentation<ReactNode>;
 
-export const defaultModelPolicyPickerMessages: ModelPolicyPickerMessages = {
-  label: "Model and effort",
-  loading: "Loading model catalog…",
-  noModels: "No models available.",
-  thinking: "Thinking",
-  fast: "Fast",
-  fastRateHint: "2× rate",
-  codexOnly: "Codex-only session",
-  billingHints: {
-    opengeni_credits: "Will use credits",
-    external: "Provider terms and limits apply",
-    codex_subscription: "ChatGPT / Codex plan",
-    supergrok_subscription: "SuperGrok / xAI plan",
-    byok: "Billed to your AI Gateway",
-  },
-};
+export { defaultModelPolicyPickerMessages, groupPresentationFor, SCOPED_BILLING_HINTS };
+export type { ModelPolicyPickerMessages };
 
 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;
@@ -90,17 +78,37 @@ 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;
+  /** Hide effort and latency controls when the saved policy chooses only a model identity. */
+  allowModelOptions?: 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;
@@ -109,64 +117,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";
@@ -176,14 +149,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 />
       )}
@@ -191,57 +168,67 @@ export function BillingClassMark(props: {
   );
 }
 
-function isCodexModel(model: ClientModel): boolean {
-  return model.id.startsWith("codex/") || model.source === "codex";
+/**
+ * The trigger shows who makes the chosen model. Subscription rails already
+ * carry their maker's mark (ChatGPT, Claude, Grok). Configured catalog logos win
+ * in collapsed model presentation; otherwise explicit host branding wins and 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 (modelLogoUrl(model)) {
+    return <ModelMark model={model} 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 applyCodexOnly(
-  rows: ClientPickerModelRow[],
-  codexOnly: boolean,
-  unavailableReason: string,
-): ClientPickerModelRow[] {
-  if (!codexOnly) return rows;
-  return rows.map((row) =>
-    isCodexModel(row.catalog)
-      ? row
-      : {
-          ...row,
-          selectable: false,
-          unavailableReason: row.unavailableReason ?? unavailableReason,
-        },
-  );
-}
+const SCOPED_MARK_LABELS: Partial<Record<PickerBillingClass, string>> = {
+  byok: "Workspace provider account",
+  organization_byok: "Organization provider account",
+};
 
-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);
+/** 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);
 }
 
-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 BRANDED_BILLING_CLASSES: ReadonlySet<PickerBillingClass> = new Set([
+  "codex_subscription",
+  "claude_subscription",
+  "supergrok_subscription",
+]);
 
-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];
+export function effectiveRows(props: ModelPolicyPickerProps): ClientPickerModelRow[] {
+  return sharedEffectiveRows(props);
 }
 
 export function PickerNavRow(props: {
@@ -252,6 +239,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;
@@ -261,28 +249,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>
   );
 }
@@ -294,14 +278,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>
@@ -329,261 +315,39 @@ 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 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(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 && props.allowLatencyMode !== false ? (
-              <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.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>
-  );
-}
-
-/** @internal Shared state seam kept outside the Radix portal for deterministic testing. */
+/** @internal Shared controlled/uncontrolled state seam. */
 export function useModelPolicyPickerState(props: ModelPolicyPickerProps) {
   const [uncontrolledOpen, setUncontrolledOpen] = useState(props.defaultOpen ?? false);
   const open = props.open ?? uncontrolledOpen;
-  const rows = effectiveRows(props);
-  const [nav, setNav] = usePickerNavState(props.sessionKey, rows, props.model);
-  const previousControlledOpen = useRef(props.open);
-  useEffect(() => {
-    const wasOpen = previousControlledOpen.current;
-    previousControlledOpen.current = props.open;
-    if (props.open === true && wasOpen !== true) {
-      setNav(defaultNavState(rows, props.model));
-    }
-    // Reset only on the controlled closed-to-open edge; ordinary rerenders
-    // deliberately preserve the current drill-down page.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.open]);
   const setOpen = (next: boolean) => {
-    if (next) {
-      setNav(defaultNavState(rows, props.model));
-    }
     if (props.open === undefined) setUncontrolledOpen(next);
     props.onOpenChange?.(next);
   };
-  return { open, setOpen, rows, nav, setNav };
+  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 { open, setOpen, rows, nav, setNav } = useModelPolicyPickerState(props);
+  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));
+  const selectedDescription = needsModel
+    ? messages.connectTitle
+    : [selected?.label ?? fallbackName(props), labelReasoningEffort(props.effort)].join(" · ");
 
   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}
@@ -591,64 +355,123 @@ 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}
+          aria-description={selectedDescription}
           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}
+        aria-description={selectedDescription}
+        className={cn(
+          // Phone: the composer row also carries attach, dictate, voice, pause
+          // and send, so the pill drops its chevron and tightens its padding
+          // to keep the model's short name readable.
+          "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:gap-0.5 max-sm:px-1.5",
+          // 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 && modelOffersEffortChoice(selected.catalog) ? (
+          <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="og-model-policy-chevron size-3 shrink-0 max-sm:hidden" />
+      </button>
+
+      {open ? (
+        <Suspense fallback={null}>
+          <LazyModelPolicyPickerMenu
+            {...props}
+            anchor={trigger.currentRef}
+            contentId={contentId}
+            portalStyle={portalStyle}
+            onOpenChange={setOpen}
+          />
+        </Suspense>
+      ) : null}
+    </>
   );
 }