@opengeni/react 1.4.2 → 1.4.5-canary.37458084490001

package/src/components/human-input-form.tsx

@@ -1,5 +1,4 @@
 import type {
-  HumanInputAnswer,
   HumanInputQuestion,
   SkillRecord,
   SessionHumanInputRequest,
@@ -9,64 +8,24 @@ import { ChevronDownIcon, ChevronUpIcon, MessageCircleQuestionIcon } from "lucid
 import { useEffect, useId, useRef, useState, type FormEvent, type ReactNode } from "react";
 import { cn } from "../lib/cn";
 import { useErrorMessage } from "../lib/error-message";
+import {
+  answersFromDrafts,
+  defaultHumanInputFormMessages,
+  emptyDraft,
+  initialDrafts,
+  type HumanInputAnswerDraft,
+  type HumanInputFormMessages,
+} from "../human-input-model";
 
-export type HumanInputAnswerDraft = {
-  values: string[];
-  other: string;
-  otherSelected: boolean;
+export {
+  answersFromDrafts,
+  defaultHumanInputFormMessages,
+  type HumanInputAnswerDraft,
+  type HumanInputFormMessages,
 };
 
 class SkillReviewVerificationError extends Error {}
 
-export type HumanInputFormMessages = {
-  title: string;
-  description: string;
-  submit: string;
-  skip: string;
-  submitting: string;
-  other: string;
-  deadlineLabel: string;
-  formatDeadline: (value: string) => string;
-  required: string;
-  otherRequired: string;
-  minSelections: (count: number) => string;
-  maxSelections: (count: number) => string;
-  optional: string;
-  /** Shown when the question list overflows the card and more content is below. */
-  moreBelow: string;
-  questionCount: (count: number) => string;
-  collapse: string;
-  expand: string;
-  selectionHint: (min: number | null | undefined, max: number | null | undefined) => string | null;
-};
-
-export const defaultHumanInputFormMessages: HumanInputFormMessages = {
-  title: "Input required",
-  /** Multi-question chrome has no default subtitle; hosts may still override. */
-  description: "",
-  submit: "Send answers",
-  skip: "Skip",
-  submitting: "Submitting…",
-  other: "Other",
-  deadlineLabel: "Expires",
-  formatDeadline,
-  required: "This question is required.",
-  otherRequired: "Enter a value for Other.",
-  minSelections: (count) => `Choose at least ${count} option${count === 1 ? "" : "s"}.`,
-  maxSelections: (count) => `Choose no more than ${count} option${count === 1 ? "" : "s"}.`,
-  optional: "Optional",
-  moreBelow: "More below",
-  questionCount: (count) => `${count} questions`,
-  collapse: "Collapse",
-  expand: "Expand",
-  selectionHint: (min, max) => {
-    if (min != null && max != null) return `Choose ${min}–${max}.`;
-    if (min != null) return `Choose at least ${min}.`;
-    if (max != null) return `Choose up to ${max}.`;
-    return null;
-  },
-};
-
 export type HumanInputFormProps = {
   /** Scoped immutable revision reader. Saving a Skill fails closed without its full preview. */
   loadSkillReview?:
@@ -1006,73 +965,3 @@ function QuestionControls({
     </>
   );
 }
-
-export function answersFromDrafts(
-  questions: HumanInputQuestion[],
-  drafts: Record<string, HumanInputAnswerDraft>,
-  messageOverrides: Partial<HumanInputFormMessages> = {},
-): { answers: HumanInputAnswer[]; errors: Record<string, string> } {
-  const messages = { ...defaultHumanInputFormMessages, ...messageOverrides };
-  const answers: HumanInputAnswer[] = [];
-  const errors: Record<string, string> = {};
-  for (const question of questions) {
-    const draft = drafts[question.id] ?? emptyDraft();
-    const values = question.kind === "text" ? draft.values.filter(Boolean) : draft.values;
-    const other = draft.otherSelected ? draft.other : "";
-    const hasOther = Boolean(other.trim());
-    const supplied = values.length + (hasOther ? 1 : 0);
-
-    // Other-selected-but-empty must win over generic "required" — otherwise the
-    // user sees the wrong diagnosis next to a clearly selected control.
-    if (question.kind !== "text" && draft.otherSelected && !hasOther) {
-      errors[question.id] = messages.otherRequired;
-      continue;
-    }
-
-    if (question.required && supplied === 0) {
-      errors[question.id] = messages.required;
-      continue;
-    }
-    if (question.kind !== "text") {
-      const min = question.validation?.minSelections;
-      const max = question.kind === "single_select" ? 1 : question.validation?.maxSelections;
-      if (min != null && supplied < min) {
-        errors[question.id] = messages.minSelections(min);
-        continue;
-      }
-      if (max != null && supplied > max) {
-        errors[question.id] = messages.maxSelections(max);
-        continue;
-      }
-    }
-    if (supplied > 0) {
-      answers.push({
-        questionId: question.id,
-        values,
-        ...(hasOther ? { other } : {}),
-      });
-    }
-  }
-  return { answers, errors };
-}
-
-function initialDrafts(questions: HumanInputQuestion[]): Record<string, HumanInputAnswerDraft> {
-  return Object.fromEntries(questions.map((question) => [question.id, emptyDraft()]));
-}
-
-function emptyDraft(): HumanInputAnswerDraft {
-  return { values: [], other: "", otherSelected: false };
-}
-
-function formatDeadline(value: string): string {
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) return value;
-  const ms = date.getTime() - Date.now();
-  if (ms <= 0) return "deadline passed";
-  const minutes = Math.round(ms / 60_000);
-  if (minutes < 1) return "in under a minute";
-  if (minutes < 60) return `in ${minutes}m`;
-  const hours = Math.round(minutes / 60);
-  if (hours < 48) return `in ${hours}h`;
-  return date.toLocaleString();
-}

package/src/components/markdown.tsx

@@ -28,6 +28,7 @@ import { MOTION_INSPECT_SCALE } from "../lib/motion-inspect";
 import { CopyButton } from "./copy-button";
 import { PreviewLoading } from "./preview-loading";
 import type { observeMarkdownTableLayout } from "./markdown-table-layout";
+import { remarkSoftLineBreaks } from "./remark-soft-line-breaks";
 import { softenStreamingMarkdown } from "./soften-streaming-markdown";
 import { createStreamReveal, rehypeStreamReveal, type StreamReveal } from "./stream-reveal";
 import { TooltipProvider } from "./tooltip";
@@ -81,6 +82,14 @@ export type MarkdownProps = {
   renderInteractiveBlock?: ((block: MarkdownInteractiveBlock) => ReactNode) | undefined;
   children: string;
   className?: string | undefined;
+  /**
+   * Render a single newline inside prose as a line break (`<br>`), the way chat
+   * apps show messages; CommonMark otherwise folds it into a space. Chat message
+   * bodies enable this. Leave it off for documents and other authored Markdown.
+   * Code (fenced and inline), lists, tables, and blank-line paragraphs are
+   * unaffected either way.
+   */
+  softLineBreaks?: boolean | undefined;
   /**
    * While true, newly arrived source fades in through tip ink (`.og-stream-ink`):
    * an age window over each append batch — fast streams keep a large soft band,
@@ -630,10 +639,19 @@ function MarkdownTable({ children, className, ...props }: ComponentPropsWithoutR
   );
 }
 
+type RemarkPlugins = NonNullable<Parameters<typeof ReactMarkdown>[0]["remarkPlugins"]>;
+const REMARK_PLUGINS: RemarkPlugins = [remarkGfm];
+// Structural plugin types (see remark-soft-line-breaks.ts) need one cast at the seam.
+const SOFT_LINE_BREAK_REMARK_PLUGINS = [
+  remarkGfm,
+  remarkSoftLineBreaks,
+] as unknown as RemarkPlugins;
+
 function MarkdownImpl({
   children,
   artifactHref,
   className,
+  softLineBreaks = false,
   streaming = false,
   onSandboxFile,
   renderInteractiveBlock,
@@ -760,7 +778,7 @@ function MarkdownImpl({
             )}
           >
             <ReactMarkdown
-              remarkPlugins={[remarkGfm]}
+              remarkPlugins={softLineBreaks ? SOFT_LINE_BREAK_REMARK_PLUGINS : REMARK_PLUGINS}
               rehypePlugins={rehypePlugins}
               components={markdownComponents}
               urlTransform={markdownUrlTransform}

package/src/components/message-timeline.tsx

@@ -1,4 +1,15 @@
+import { QUESTION_NAV_MARGIN_PX, questionNavTarget } from "../timeline/question-nav-model";
 import { RollingActivity } from "../timeline/rolling-activity";
+import {
+  clusterIsSettled,
+  compactedLandmarkCount,
+  durationBetween,
+  flattenActivityItems,
+  isPreparingWork,
+  readableWorkDefaultOpen,
+  readableWorkShowsPreview,
+  readableWorkStatus,
+} from "../timeline/work-presentation";
 import { useErrorMessage } from "../lib/error-message";
 import { formatElapsed } from "../timeline/turn-summary";
 import { ActivityNoteTextContext } from "../timeline/activity-rail";
@@ -143,6 +154,11 @@ import {
   readableMachineInputSource,
 } from "./machine-input-display";
 import { SESSION_STATUS_META, StatusDot } from "./session-status";
+import {
+  noticeDisplayText,
+  noticeIsResolvedApproval,
+  noticeTone,
+} from "../timeline/notice-presentation";
 import { TimelineComputeLabelProvider } from "../timeline/compute-label";
 import { EntranceAnimationProvider, useEntranceAnimation } from "../timeline/entrance";
 import {
@@ -338,8 +354,6 @@ const PIN_THRESHOLD_PX = 48;
  * line-sized streaming movement.
  */
 const JUMP_TO_LATEST_CATCHUP_DEBT_PX = 240;
-/** Breathing room above the question when following stops at an answer. */
-const QUESTION_NAV_MARGIN_PX = 12;
 /**
  * Floating timeline navigation: two identical small round arrow buttons at fixed
  * spots, centered on the conversation. Back to your message floats 12px below
@@ -505,25 +519,16 @@ function contentTopOf(node: HTMLElement, groupKey: string): number | null {
  */
 type QuestionNav = { key: string; belowHeader: boolean };
 
-/** How far a question's start must be above the viewport before navigation shows. */
-const QUESTION_NAV_HIDDEN_PX = 24;
-
 function readQuestionNav(node: HTMLElement): QuestionNav | null {
   const view = node.getBoundingClientRect();
-  const prompts = [...node.querySelectorAll<HTMLElement>("[data-og-prompt]")];
-  // The last prompt before the reading position owns the response/work in view.
-  // A newer prompt farther down the conversation is not a navigation target.
-  const middle = view.top + view.height / 2;
-  const prompt = prompts
-    .reverse()
-    .find((candidate) => candidate.getBoundingClientRect().top <= middle);
-  const key = prompt?.dataset.ogGroupKey;
-  if (!prompt || !key) return null;
-  const bounds = prompt.getBoundingClientRect();
-  if (bounds.top >= view.top - QUESTION_NAV_HIDDEN_PX || bounds.bottom > view.top) {
-    return null;
-  }
-  return { key, belowHeader: workHeaderPinned(node, view) };
+  const prompts = [...node.querySelectorAll<HTMLElement>("[data-og-prompt]")].flatMap((prompt) => {
+    const key = prompt.dataset.ogGroupKey;
+    if (!key) return [];
+    const bounds = prompt.getBoundingClientRect();
+    return [{ key, top: bounds.top, bottom: bounds.bottom }];
+  });
+  const key = questionNavTarget(prompts, { top: view.top, height: view.height });
+  return key ? { key, belowHeader: workHeaderPinned(node, view) } : null;
 }
 
 /** True while an expanded outer work header is stuck to the scrollport's top edge. */
@@ -633,6 +638,7 @@ export function MessageTimeline({
             const body = (
               <Markdown
                 searchTarget={searchItem?.id === item.id ? searchTarget : null}
+                softLineBreaks
                 streaming={item.kind === "agent-message" && item.streaming}
                 renderInteractiveBlock={
                   item.kind === "agent-message" ? renderInteractiveBlock : undefined
@@ -3401,18 +3407,7 @@ const TimelineGroupView = memo(function TimelineGroupView({
   switch (group.kind) {
     case "activity":
       if (group.work) {
-        const phases = group.items.filter((item) => item.kind === "startup-phase");
-        const preparing =
-          !startupDetails &&
-          !startupDismissed &&
-          !group.work.endedAt &&
-          !group.work.waiting &&
-          phases.length > 0 &&
-          group.items.every(
-            (item) =>
-              item.kind === "startup-phase" || (item.kind === "reasoning" && !item.text.trim()),
-          ) &&
-          !phases.some((item) => item.status === "failed" || item.status === "cancelled");
+        const preparing = isPreparingWork(group, { startupDetails, startupDismissed });
         if (preparing) {
           // Preparation is primary, never hidden in an activity disclosure.
           // Keep work.startedAt unchanged for the handoff and settled duration.
@@ -3429,22 +3424,20 @@ const TimelineGroupView = memo(function TimelineGroupView({
             />
           );
         }
-        const end = group.work.endedAt;
-        const status: TurnSummaryStatus = end
-          ? { kind: "worked", durationMs: durationBetween(group.work.startedAt, end) }
-          : group.work.waiting
-            ? { kind: "waiting", ...group.work.waiting }
-            : {
-                kind: "working",
-                since: group.work.startedAt,
-                preview: containsPresentedImage ? undefined : (
+        const workStatus = readableWorkStatus({ ...group, work: group.work });
+        const status: TurnSummaryStatus =
+          workStatus.kind === "working"
+            ? {
+                ...workStatus,
+                preview: readableWorkShowsPreview(group) ? (
                   <RollingActivity
                     items={group.items}
                     toolRegistry={toolRegistry}
                     showCount={false}
                   />
-                ),
-              };
+                ) : undefined,
+              }
+            : workStatus;
         return (
           // Marks this work row for the live-note fold (list keys can be carried
           // over from an earlier row, so they are not the work id).
@@ -3456,13 +3449,7 @@ const TimelineGroupView = memo(function TimelineGroupView({
               outcome={group.outcome}
               failureText={group.failureText}
               foldKey={group.id}
-              defaultOpen={
-                containsPresentedImage ||
-                group.outcome === "failed" ||
-                phases.some((item) => item.status === "failed" || item.status === "cancelled")
-                  ? true
-                  : undefined
-              }
+              defaultOpen={readableWorkDefaultOpen(group)}
               facets={turnSummary?.facets}
               contextCompactionCount={compactedLandmarkCount(group.work.details)}
               onOpenStateChange={
@@ -3783,15 +3770,6 @@ function renderFoldedGroups(
   ));
 }
 
-function compactedLandmarkCount(groups: readonly TimelineGroup[]): number {
-  return groups.filter(
-    (group) =>
-      group.kind === "item" &&
-      group.item.kind === "context-compaction" &&
-      group.item.phase === "compacted",
-  ).length;
-}
-
 /**
  * Body under a turn/activity chip. Remount flashes are gated by the timeline
  * seen-activity-id map (not by killing entrance): FoldBody used to force
@@ -3892,18 +3870,6 @@ function isAgentProgress(next: TimelineGroup | undefined): boolean {
 /** No item still running or streaming — the only state safe to fold live.
     Position alone is a broken proxy: a pending queued message (or any trailing
     item) can sit after the ACTIVE cluster, which must never fold mid-work. */
-function clusterIsSettled(group: Extract<TimelineGroup, { kind: "activity" }>): boolean {
-  return group.items.every((item) => {
-    if (item.kind === "reasoning" || item.kind === "agent-message") {
-      return !item.streaming;
-    }
-    // Memory writes and fleet observations are discrete, already-settled events.
-    if (item.kind === "memory" || item.kind === "fleet-decision") {
-      return true;
-    }
-    return item.status !== "running";
-  });
-}
 
 /** Settled activity clusters that could become nested chips under a turn. */
 function foldableActivityClusterCount(groups: readonly TimelineGroup[]): number {
@@ -3916,18 +3882,6 @@ function foldableActivityClusterCount(groups: readonly TimelineGroup[]): number
   return count;
 }
 
-function flattenActivityItems(groups: readonly TimelineGroup[]): ActivityItem[] {
-  const items: ActivityItem[] = [];
-  for (const group of groups) {
-    if (group.kind === "activity") {
-      items.push(...flattenActivityItems(group.work?.details ?? []), ...group.items);
-    } else if (group.kind === "turn") {
-      items.push(...flattenActivityItems(group.groups));
-    }
-  }
-  return items;
-}
-
 /** Assistant prose inside a turn fold (mid-turn narration), joined for copy. */
 function collectAgentMessageText(groups: readonly TimelineGroup[]): string {
   const parts: string[] = [];
@@ -4026,15 +3980,6 @@ function collectTurnCopyText(
   return parts.join("\n\n");
 }
 
-function durationBetween(startedAt: string, endedAt: string): number | undefined {
-  const started = Date.parse(startedAt);
-  const ended = Date.parse(endedAt);
-  if (!Number.isFinite(started) || !Number.isFinite(ended) || ended < started) {
-    return undefined;
-  }
-  return ended - started;
-}
-
 /* --- single rows ------------------------------------------------------------ */
 
 /**
@@ -4235,7 +4180,7 @@ function UserMessageRow({
                   renderMessageText(item.text, item)
                 ) : (
                   <UserMessageBody messageId={item.id} text={item.text}>
-                    <Markdown>{item.text}</Markdown>
+                    <Markdown softLineBreaks>{item.text}</Markdown>
                   </UserMessageBody>
                 )}
               </div>
@@ -4445,7 +4390,9 @@ function AgentMessageRow({
   const body = renderMessageText ? (
     renderMessageText(item.text, item)
   ) : (
-    <Markdown streaming={item.streaming}>{item.text}</Markdown>
+    <Markdown softLineBreaks streaming={item.streaming}>
+      {item.text}
+    </Markdown>
   );
   // While streaming, copy is still useful (current text) but keep chrome calm —
   // stamp only after the message finishes (occurredAt tracks completion).
@@ -4934,11 +4881,12 @@ function NoticeRow({ item }: { item: NoticeItem }) {
       </details>
     );
   }
-  const resolvedApproval = Boolean(item.resolvedAt && item.text.startsWith("Approval needed"));
+  const presentedTone = noticeTone(item);
+  const resolvedApproval = noticeIsResolvedApproval(item);
   const tone =
-    item.tone === "failed"
+    presentedTone === "failed"
       ? "border-og-status-failed/35 bg-og-status-failed/10 text-og-status-failed"
-      : item.tone === "waiting" && !item.resolvedAt
+      : presentedTone === "waiting"
         ? WAITING_PILL_CLASS
         : NEUTRAL_PILL;
   return (
@@ -4958,9 +4906,7 @@ function NoticeRow({ item }: { item: NoticeItem }) {
         />
       )}
       <div className="min-w-0 flex-1">
-        <span className="whitespace-pre-wrap break-words">
-          {resolvedApproval ? "You responded to this approval." : item.text}
-        </span>
+        <span className="whitespace-pre-wrap break-words">{noticeDisplayText(item)}</span>
         {item.details ? (
           <details className="mt-2 text-og-control">
             <summary className="cursor-pointer font-medium">{item.details.label}</summary>

package/src/components/model-mark.tsx

@@ -1,3 +1,4 @@
+import { CHATGPT_MARK_PATH } from "../model-mark-paths";
 import {
   modelDisplayName,
   modelLogoUrl,
@@ -15,7 +16,7 @@ import { GrokMark } from "./grok-mark";
 export 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" />
+      <path d={CHATGPT_MARK_PATH} />
     </svg>
   );
 }

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

@@ -9,23 +9,17 @@ import {
   MENU_NOTE_CLASS,
   MENU_SURFACE_CLASS,
 } from "../lib/menu-styles";
+import { labelReasoningEffort, type PickerModelRow } from "../model-policy";
 import {
-  coerceReasoningEffortForModel,
-  effortOptionsForModel,
-  findPickerRow,
-  groupPickerRowsByBillingClass,
-  labelReasoningEffort,
-  payerSummaryForModel,
-  runnableLatencyModesForModel,
-  type PickerModelRow,
-} from "../model-policy";
+  compactEffortLabel,
+  groupPresentationFor,
+  modelPickerChoice,
+  modelPickerMenuView,
+} from "../model-picker-model";
 import {
   BillingClassMark,
   defaultModelPolicyPickerMessages,
-  effectiveRows,
-  groupPresentationFor,
   PickerNavRow,
-  SCOPED_BILLING_HINTS,
   type ModelPolicyPickerProps,
 } from "./model-policy-picker";
 import { ModelMark } from "./model-mark";
@@ -33,57 +27,18 @@ type ClientPickerModelRow = PickerModelRow<ClientModel>;
 
 /** Model selection stays flat; reasoning never becomes a navigation destination. */
 export function ModelPolicyPickerMenu(props: ModelPolicyPickerProps) {
-  const messages = { ...defaultModelPolicyPickerMessages, ...props.messages };
   const [query, setQuery] = useState("");
-  const rows = effectiveRows(props);
-  const selected = findPickerRow(rows, props.model);
-  const words = query.toLowerCase().trim().split(/\s+/).filter(Boolean);
-  const filtered = rows.filter((row) => {
-    const description = groupPresentationFor(props, row.billingClass)?.description;
-    const text =
-      `${row.label} ${row.id} ${row.providerLabel} ${row.billingClassLabel} ${description === undefined ? payerSummaryForModel(row.catalog) : (description ?? "")}`.toLowerCase();
-    return words.every((word) => text.includes(word));
-  });
-  const matchingIds = new Set(filtered.map((row) => row.id));
-  const groups = groupPickerRowsByBillingClass(rows, {
-    codexOnly: props.codexOnly === true,
-    selectedId: props.model,
-    collapseScopes: props.collapseScopes !== false,
-  })
-    .map((group) => {
-      const presentation = groupPresentationFor(props, group.billingClass);
-      const override = presentation?.description;
-      const defaultHint =
-        props.collapseScopes === false &&
-        messages.billingHints[group.billingClass] ===
-          defaultModelPolicyPickerMessages.billingHints[group.billingClass]
-          ? (SCOPED_BILLING_HINTS[group.billingClass] ?? messages.billingHints[group.billingClass])
-          : messages.billingHints[group.billingClass];
-      return {
-        ...group,
-        label: presentation?.label ?? group.label,
-        rows: group.rows.filter((row) => matchingIds.has(row.id)),
-        description:
-          override === undefined
-            ? group.billingClass === "opengeni_credits"
-              ? null
-              : defaultHint
-            : override,
-      };
-    })
-    .filter((group) => group.rows.length > 0);
+  const view = modelPickerMenuView(props, query);
+  const { messages, rows, groups } = view;
+  const selected = view.selected;
   const choose = (row: ClientPickerModelRow) => {
-    if (!row.selectable || props.disabled) return;
-    if (row.id !== props.model) props.onModelChange(row.id);
-    const effort = coerceReasoningEffortForModel(row.catalog, props.effort);
+    if (props.disabled) return;
+    const choice = modelPickerChoice(props, row);
+    if (!choice) return;
+    if (choice.model !== null) props.onModelChange(choice.model);
     // Hosts may commit the combined model/effort draft through this callback.
-    props.onEffortChange(effort);
-    if (
-      props.latencyMode !== "standard" &&
-      !runnableLatencyModesForModel(row.catalog).includes(props.latencyMode)
-    ) {
-      props.onLatencyModeChange("standard");
-    }
+    props.onEffortChange(choice.effort);
+    if (choice.latencyMode !== null) props.onLatencyModeChange(choice.latencyMode);
   };
   const modelRow = (row: ClientPickerModelRow) => (
     <PickerNavRow
@@ -214,9 +169,9 @@ export function ModelPolicyPickerMenu(props: ModelPolicyPickerProps) {
                 {group.rows.map(modelRow)}
               </section>
             ))}
-            {filtered.length === 0 ? (
+            {view.matchCount === 0 ? (
               <p className={MENU_NOTE_CLASS}>
-                {words.length ? messages.noMatches : messages.noModels}
+                {view.searching ? messages.noMatches : messages.noModels}
               </p>
             ) : null}
           </>
@@ -226,17 +181,9 @@ export function ModelPolicyPickerMenu(props: ModelPolicyPickerProps) {
           <p className={MENU_NOTE_CLASS}>{messages.noModels}</p>
         )}
       </div>
-      {rows.some((row) => row.selectable) &&
-      selected &&
-      ((props.hasImageAttachments &&
-        selected.catalog.capabilities?.inputModalities.includes("image") === false) ||
-        (effortOptionsForModel(selected.catalog).length > 1 &&
-          selected.catalog.capabilities?.reasoning.runnable !== false) ||
-        (props.allowLatencyMode !== false &&
-          runnableLatencyModesForModel(selected.catalog).includes("fast"))) ? (
+      {view.anySelectable && selected && (view.unsupportedAttachments || view.thinking) ? (
         <div className="border-t border-og-border px-2.5 py-2.5">
-          {props.hasImageAttachments &&
-          selected.catalog.capabilities?.inputModalities.includes("image") === false ? (
+          {view.unsupportedAttachments ? (
             <p className="pb-1.5 text-og-control leading-relaxed text-og-fg-subtle">
               {messages.unsupportedAttachments}
             </p>
@@ -323,15 +270,13 @@ function ConnectModelsPanel(props: {
 }
 
 function ModelThinkingControls(props: ModelPolicyPickerProps) {
-  const selected = findPickerRow(effectiveRows(props), props.model);
-  if (!selected) return null;
-  const efforts = effortOptionsForModel(selected.catalog);
-  const messages = { ...defaultModelPolicyPickerMessages, ...props.messages };
-  const supportsFast = runnableLatencyModesForModel(selected.catalog).includes("fast");
-  const showThinking =
-    efforts.length > 1 && selected.catalog.capabilities?.reasoning.runnable !== false;
-  const showFast = supportsFast && props.allowLatencyMode !== false;
-  if (!showThinking && !showFast) return null;
+  const view = modelPickerMenuView(props, "");
+  const thinking = view.thinking;
+  if (!view.selected || !thinking) return null;
+  const messages = view.messages;
+  const efforts = thinking.efforts;
+  const showThinking = thinking.showThinking;
+  const showFast = thinking.showFast;
   return (
     <div className="space-y-2 text-og-control" data-testid="model-picker-reasoning">
       <div className="flex min-h-7 items-center justify-between gap-3">
@@ -340,7 +285,7 @@ function ModelThinkingControls(props: ModelPolicyPickerProps) {
           <button
             type="button"
             data-testid="model-picker-fast"
-            disabled={props.disabled || !selected.selectable}
+            disabled={props.disabled || thinking.disabled}
             aria-pressed={props.latencyMode === "fast"}
             title={messages.fast + " · " + messages.fastRateHint}
             onClick={() =>
@@ -357,8 +302,8 @@ function ModelThinkingControls(props: ModelPolicyPickerProps) {
       {showThinking ? (
         <RadioGroup.Root
           aria-label={messages.thinkingEffort}
-          value={coerceReasoningEffortForModel(selected.catalog, props.effort)}
-          disabled={props.disabled || !selected.selectable}
+          value={thinking.value}
+          disabled={props.disabled || thinking.disabled}
           onValueChange={(value) => props.onEffortChange(value as ReasoningEffort)}
           orientation="horizontal"
           className="flex flex-wrap gap-0.5 rounded-og-md bg-og-surface-2 p-0.5"
@@ -371,7 +316,7 @@ function ModelThinkingControls(props: ModelPolicyPickerProps) {
               title={labelReasoningEffort(effort)}
               className="min-h-8 min-w-10 flex-1 cursor-pointer whitespace-nowrap rounded-og-sm px-1.5 text-og-control text-og-fg-muted outline-hidden transition-colors hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent/40 data-[state=checked]:bg-og-surface-1 data-[state=checked]:text-og-fg data-[state=checked]:shadow-sm disabled:cursor-not-allowed disabled:opacity-50"
             >
-              {effort === "xhigh" ? "X-high" : labelReasoningEffort(effort)}
+              {compactEffortLabel(effort, labelReasoningEffort(effort))}
             </RadioGroup.Item>
           ))}
         </RadioGroup.Root>