@opengeni/react 7.6.1 → 7.7.0-canary.37111190284001

package/src/components/message-timeline.tsx

@@ -1,4 +1,5 @@
 import { RollingActivity } from "../timeline/rolling-activity";
+import { useErrorMessage } from "../lib/error-message";
 import { formatElapsed } from "../timeline/turn-summary";
 import { ActivityNoteTextContext } from "../timeline/activity-rail";
 import { timelineGroupContainsPresentedImage } from "../timeline/presented-image";
@@ -73,7 +74,6 @@ import {
   type TimelineAnchor,
 } from "./timeline-anchor";
 import { useReadingProgress } from "./timeline-reading-progress";
-import { type TimelinePillPlacement, useTimelinePillPlacement } from "./timeline-pill-placement";
 import {
   animateTimelineSettlement,
   captureTimelineSettlement,
@@ -332,20 +332,20 @@ const PIN_THRESHOLD_PX = 48;
 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 pills rest at these spots and slide sideways, in this order, when
-// their resting spot would cover a control (see useTimelinePillPlacement).
-const JUMP_PILL_PLACEMENTS: readonly TimelinePillPlacement[] = ["center", "end", "start"];
-const QUESTION_PILL_PLACEMENTS: readonly TimelinePillPlacement[] = ["end", "center", "start"];
-const JUMP_PILL_PLACEMENT_CLASS: Record<TimelinePillPlacement, string> = {
-  center: "inset-x-0 mx-auto",
-  end: "right-4 sm:right-6",
-  start: "left-4 sm:left-6",
-};
-const QUESTION_PILL_PLACEMENT_CLASS: Record<TimelinePillPlacement, string> = {
-  center: "justify-center",
-  end: "justify-end",
-  start: "justify-start",
-};
+/**
+ * Floating timeline navigation (Back to your message, Jump to latest) shares one
+ * fixed anchor: centered at the bottom of the conversation, above the composer.
+ * The pills never measure or dodge the content beneath them, so they cannot
+ * wander sideways or drift vertically as rows stream in or the host resizes.
+ */
+const NAV_PILL_CLASS =
+  "pointer-events-auto inline-flex max-w-full items-center gap-1.5 whitespace-nowrap rounded-full border border-og-border bg-og-surface-3/90 px-3 py-1.5 text-og-control font-medium text-og-fg shadow-og-md backdrop-blur hover:border-og-border-strong focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-og-accent pointer-coarse:min-h-11";
+const NAV_PILL_MOTION = {
+  initial: { opacity: 0, y: 8 },
+  animate: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: 8 },
+  transition: { duration: 0.15, ease: "easeOut" },
+} as const;
 /**
  * Prefetch older history when the top sentinel is this far from the viewport.
  * After a page loads we stay cool until the reader leaves this band (scrolls
@@ -562,6 +562,7 @@ export function MessageTimeline({
   emptyState,
   className,
 }: MessageTimelineProps) {
+  const formatError = useErrorMessage();
   const resolvedItems = useMemo(() => {
     const projectedItems = items ?? buildTimeline(events ?? []);
     if (!shouldRenderAuthNeeded) {
@@ -672,12 +673,12 @@ export function MessageTimeline({
             setNewerRetryPending(false);
             setNewerFailure({
               key: newerBoundaryKey,
-              message: reason instanceof Error ? reason.message : String(reason),
+              message: formatError(reason),
             });
           },
         );
     },
-    [onLoadNewer, loadingNewer, newerBoundaryKey],
+    [onLoadNewer, loadingNewer, newerBoundaryKey, formatError],
   );
   const previousSourceIdsRef = useRef(new Set<string>());
   const previousSourceBoundaryRef = useRef<string | undefined>(undefined);
@@ -745,22 +746,7 @@ export function MessageTimeline({
   const resizeFollowRafRef = useRef<number | null>(null);
   const questionNavFrameRef = useRef<number | null>(null);
   const [questionNav, setQuestionNav] = useState<QuestionNav | null>(null);
-  const jumpPillRef = useRef<HTMLButtonElement | null>(null);
-  const questionPillRef = useRef<HTMLDivElement | null>(null);
   const jumpPillShown = autoFollow && (!pinned || hasNewer || canSkipTipCatchup);
-  const jumpPillPlacement = useTimelinePillPlacement({
-    pillRef: jumpPillRef,
-    scrollerRef: scrollRef,
-    active: jumpPillShown,
-    preference: JUMP_PILL_PLACEMENTS,
-  });
-  const questionPillPlacement = useTimelinePillPlacement({
-    pillRef: questionPillRef,
-    scrollerRef: scrollRef,
-    active: questionNav !== null,
-    preference: QUESTION_PILL_PLACEMENTS,
-    allowDownwardFallback: true,
-  });
   const firstGroupKey = allGroups[0] ? timelineGroupKey(allGroups[0]) : null;
   // Content stays invisible until the tip is hard-parked across a short
   // post-commit settle (two rAFs). That absorbs sync late layout while hidden
@@ -2264,8 +2250,7 @@ export function MessageTimeline({
                       // (pt-16). Subtract exactly that padding so an expanded work
                       // header pins flush to the scrollport. Pinning it lower left a
                       // band of scrolling rows visible above the header, which then
-                      // looked like it floated over the middle of the timeline. The
-                      // floating question action sits below this strip instead.
+                      // looked like it floated over the middle of the timeline.
                       style={{ "--og-work-header-top": "-4rem" } as CSSProperties}
                     >
                       {onAnnotate ? (
@@ -2394,14 +2379,7 @@ export function MessageTimeline({
                                   transition={{ duration: 0.15, ease: "easeOut" }}
                                   data-og-loading-older=""
                                   aria-live="polite"
-                                  className={cn(
-                                    "pointer-events-none absolute inset-x-0 -top-11 z-10 flex",
-                                    // The scrolling history control and fixed question
-                                    // action must never share the same pointer region.
-                                    questionNav
-                                      ? "max-w-[calc(50%-0.5rem)] justify-start"
-                                      : "justify-center",
-                                  )}
+                                  className="pointer-events-none absolute inset-x-0 -top-11 z-10 flex justify-center"
                                 >
                                   {loadingOlder || loadingOldest ? (
                                     <span className={LOADING_CHIP_CLASS}>
@@ -2576,139 +2554,113 @@ export function MessageTimeline({
                         </Suspense>
                       ) : null}
 
-                      <AnimatePresence>
-                        {questionNav ? (
-                          <motion.div
-                            key="question-nav"
-                            initial={{ opacity: 0, y: -6 }}
-                            animate={{ opacity: 1, y: 0 }}
-                            exit={{ opacity: 0, y: -6 }}
-                            transition={{ duration: 0.15, ease: "easeOut" }}
-                            data-og-question-nav=""
-                            // Below the pinned work-header strip (py-1.5 row, 44px on coarse
-                            // pointers), never over it: the header stays a full-width target.
-                            data-og-pill-placement={questionPillPlacement.placement}
-                            style={{ marginTop: questionPillPlacement.offsetY }}
-                            className={cn(
-                              "pointer-events-none absolute inset-x-0 top-11 z-10 flex px-4 sm:px-6 pointer-coarse:top-14",
-                              QUESTION_PILL_PLACEMENT_CLASS[questionPillPlacement.placement],
-                            )}
-                          >
+                      <div
+                        data-og-timeline-nav=""
+                        // One fixed anchor for every floating navigation control: a
+                        // centered column at the bottom of the conversation. Newest
+                        // stays nearest the composer; the up-pointing action and the
+                        // later-activity status stack above it.
+                        className="pointer-events-none absolute inset-x-0 bottom-4 z-10 flex flex-col items-center gap-2 px-4 sm:px-6"
+                      >
+                        <AnimatePresence mode="popLayout">
+                          {loadingNewer ? (
                             <motion.div
-                              ref={questionPillRef}
+                              key="loading-newer"
                               layout="position"
-                              transition={{ duration: 0.18, ease: "easeOut" }}
-                              className="pointer-events-auto inline-flex max-w-full items-center rounded-full border border-og-border bg-og-surface-3/90 text-og-control font-medium text-og-fg shadow-og-md backdrop-blur"
+                              {...NAV_PILL_MOTION}
+                              data-og-loading-newer=""
+                              aria-live="polite"
+                              className="flex max-w-full justify-center"
                             >
-                              <button
-                                type="button"
-                                data-og-jump-to-question=""
-                                onClick={() => jumpToQuestion(questionNav.key)}
-                                className="inline-flex min-w-0 items-center gap-1.5 whitespace-nowrap px-3 py-1.5 hover:text-og-fg pointer-coarse:min-h-11"
-                              >
-                                <ArrowUpIcon aria-hidden className="size-3.5" />
-                                Back to your message
-                              </button>
+                              <span className={LOADING_CHIP_CLASS}>
+                                <span className="og-shimmer-text">Loading later activity…</span>
+                              </span>
                             </motion.div>
-                          </motion.div>
-                        ) : null}
-                      </AnimatePresence>
-                      <AnimatePresence>
-                        {loadingNewer ? (
-                          <motion.div
-                            initial={{ opacity: 0, y: 6 }}
-                            animate={{ opacity: 1, y: 0 }}
-                            exit={{ opacity: 0, y: 6 }}
-                            transition={{ duration: 0.15, ease: "easeOut" }}
-                            data-og-loading-newer=""
-                            aria-live="polite"
-                            className="pointer-events-none absolute inset-x-0 bottom-14 z-10 flex justify-center"
-                          >
-                            <span className={LOADING_CHIP_CLASS}>
-                              <span className="og-shimmer-text">Loading later activity…</span>
-                            </span>
-                          </motion.div>
-                        ) : null}
-                      </AnimatePresence>
-                      <AnimatePresence>
-                        {jumpPillShown ? (
-                          <motion.button
-                            ref={jumpPillRef}
-                            type="button"
-                            data-og-jump-to-latest=""
-                            data-og-pill-placement={jumpPillPlacement.placement}
-                            layout="position"
-                            initial={{ opacity: 0, y: 8 }}
-                            animate={{ opacity: 1, y: 0 }}
-                            exit={{ opacity: 0, y: 8 }}
-                            transition={{ duration: 0.15, ease: "easeOut" }}
-                            onClick={() => {
-                              // Returning to the tip explicitly releases reader-owned
-                              // prose. Clear only this timeline's selection before the
-                              // synchronous ownership check on the next commit.
-                              const viewport = scrollRef.current;
-                              const selection = viewport?.ownerDocument.getSelection();
-                              if (
-                                selection &&
-                                !selection.isCollapsed &&
-                                (viewport?.contains(selection.anchorNode) ||
-                                  viewport?.contains(selection.focusNode))
-                              )
-                                selection.removeAllRanges();
-                              disclosureKeepsUnpinnedRef.current = false;
-                              if (hasNewer) {
-                                // Do not pin against the current history page — its bottom
-                                // is not the tip. The pin + snap run when the tip window
-                                // actually lands (`hasNewer` flips false).
-                                wantPinRef.current = true;
-                                const node = scrollRef.current;
-                                if (onJumpToLatest) {
-                                  void Promise.resolve(onJumpToLatest()).then(
-                                    () => {
-                                      // Covers a host that flipped hasNewer before
-                                      // resolving; otherwise the tip-window commit
-                                      // consumes the flag.
-                                      const current = scrollRef.current;
-                                      if (current && wantPinRef.current && !hasNewerRef.current) {
+                          ) : null}
+                          {questionNav ? (
+                            <motion.button
+                              key="question-nav"
+                              layout="position"
+                              {...NAV_PILL_MOTION}
+                              type="button"
+                              data-og-question-nav=""
+                              data-og-jump-to-question=""
+                              onClick={() => jumpToQuestion(questionNav.key)}
+                              className={NAV_PILL_CLASS}
+                            >
+                              <ArrowUpIcon aria-hidden className="size-3.5 shrink-0" />
+                              Back to your message
+                            </motion.button>
+                          ) : null}
+                          {jumpPillShown ? (
+                            <motion.button
+                              key="jump-to-latest"
+                              layout="position"
+                              {...NAV_PILL_MOTION}
+                              type="button"
+                              data-og-jump-to-latest=""
+                              onClick={() => {
+                                // Returning to the tip explicitly releases reader-owned
+                                // prose. Clear only this timeline's selection before the
+                                // synchronous ownership check on the next commit.
+                                const viewport = scrollRef.current;
+                                const selection = viewport?.ownerDocument.getSelection();
+                                if (
+                                  selection &&
+                                  !selection.isCollapsed &&
+                                  (viewport?.contains(selection.anchorNode) ||
+                                    viewport?.contains(selection.focusNode))
+                                )
+                                  selection.removeAllRanges();
+                                disclosureKeepsUnpinnedRef.current = false;
+                                if (hasNewer) {
+                                  // Do not pin against the current history page — its bottom
+                                  // is not the tip. The pin + snap run when the tip window
+                                  // actually lands (`hasNewer` flips false).
+                                  wantPinRef.current = true;
+                                  const node = scrollRef.current;
+                                  if (onJumpToLatest) {
+                                    void Promise.resolve(onJumpToLatest()).then(
+                                      () => {
+                                        // Covers a host that flipped hasNewer before
+                                        // resolving; otherwise the tip-window commit
+                                        // consumes the flag.
+                                        const current = scrollRef.current;
+                                        if (current && wantPinRef.current && !hasNewerRef.current) {
+                                          wantPinRef.current = false;
+                                          applyPinned(true);
+                                          snapToBottom(current);
+                                        }
+                                      },
+                                      () => {
+                                        // The tip reload failed (ordinary network error):
+                                        // an armed latch would fire a surprise snap when
+                                        // the reader later pages to the tip themselves.
                                         wantPinRef.current = false;
-                                        applyPinned(true);
-                                        snapToBottom(current);
-                                      }
-                                    },
-                                    () => {
-                                      // The tip reload failed (ordinary network error):
-                                      // an armed latch would fire a surprise snap when
-                                      // the reader later pages to the tip themselves.
-                                      wantPinRef.current = false;
-                                    },
-                                  );
-                                } else if (node) {
-                                  // No tip reload available: jump within the in-memory
-                                  // window so the newer sentinel can page forward; the
-                                  // latch pins if the tip window eventually lands.
+                                      },
+                                    );
+                                  } else if (node) {
+                                    // No tip reload available: jump within the in-memory
+                                    // window so the newer sentinel can page forward; the
+                                    // latch pins if the tip window eventually lands.
+                                    snapToBottom(node);
+                                  }
+                                  return;
+                                }
+                                const node = scrollRef.current;
+                                if (node) {
+                                  applyPinned(true);
                                   snapToBottom(node);
                                 }
-                                return;
-                              }
-                              const node = scrollRef.current;
-                              if (node) {
-                                applyPinned(true);
-                                snapToBottom(node);
-                              }
-                            }}
-                            className={cn(
-                              "absolute bottom-4 w-fit",
-                              JUMP_PILL_PLACEMENT_CLASS[jumpPillPlacement.placement],
-                              "inline-flex items-center gap-1.5 rounded-full border border-og-border bg-og-surface-3/90 px-3 py-1.5",
-                              "text-og-control font-medium text-og-fg shadow-og-md backdrop-blur",
-                              "hover:border-og-border-strong",
-                            )}
-                          >
-                            <ArrowDownIcon className="size-3.5" />
-                            Jump to latest
-                          </motion.button>
-                        ) : null}
-                      </AnimatePresence>
+                              }}
+                              className={NAV_PILL_CLASS}
+                            >
+                              <ArrowDownIcon aria-hidden className="size-3.5 shrink-0" />
+                              Jump to latest
+                            </motion.button>
+                          ) : null}
+                        </AnimatePresence>
+                      </div>
                     </div>
                   </TimelineAnnotationSourceRootContext.Provider>
                 </TooltipProvider>

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

@@ -161,19 +161,6 @@ export type ModelPolicyPickerProps = {
 
 const SLIDE_EASE = [0.22, 1, 0.36, 1] as const;
 
-// Solid facets keep the brand legible at the picker’s 14px icon size.
-function OpenGeniMark(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg viewBox="0 0 140 133" fill="currentColor" 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}>
@@ -189,7 +176,7 @@ export function BillingClassMark(props: {
   "aria-label"?: string | undefined;
 }) {
   const labels: Record<PickerBillingClass, string> = {
-    opengeni_credits: "Opengeni",
+    opengeni_credits: "Models",
     external: "External provider",
     codex_subscription: "Codex",
     supergrok_subscription: "SuperGrok",
@@ -217,7 +204,7 @@ export function BillingClassMark(props: {
       {props.presentation?.icon !== undefined ? (
         props.presentation.icon
       ) : props.billingClass === "opengeni_credits" ? (
-        <OpenGeniMark className={mark} />
+        <SparklesIcon className={mark} aria-hidden />
       ) : props.billingClass === "external" ? (
         <Globe2Icon className={mark} aria-hidden />
       ) : props.billingClass === "codex_subscription" ? (

package/src/components/open-geni-chat.tsx

@@ -2,6 +2,7 @@ import type { OpenGeniClient } from "@opengeni/sdk";
 import { MenuIcon, SendIcon, XIcon } from "lucide-react";
 import { useCallback, useRef, useState, type CSSProperties, type FormEvent } from "react";
 import { cn } from "../lib/cn";
+import { useErrorMessage } from "../lib/error-message";
 import { useOpenGeni, type ClientOverride } from "../session-context";
 import { SessionConversation, type SessionConversationProps } from "./session-conversation";
 import { SessionList, type SessionListLabels, type SessionListProps } from "./session-list";
@@ -198,7 +199,8 @@ function NewChat({
 }) {
   const [text, setText] = useState("");
   const [sending, setSending] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+  const [error, setError] = useState<{ cause: unknown } | null>(null);
+  const formatError = useErrorMessage();
   // One key per draft, so a retried send returns the same chat.
   const idempotencyKey = useRef(crypto.randomUUID());
 
@@ -214,7 +216,7 @@ function NewChat({
       setText("");
       onCreated(id);
     } catch (cause) {
-      setError(cause instanceof Error ? cause.message : String(cause));
+      setError({ cause });
     } finally {
       setSending(false);
     }
@@ -223,12 +225,17 @@ function NewChat({
   return (
     <form
       onSubmit={(event) => void submit(event)}
-      className="flex h-full flex-col justify-end gap-2 p-3"
+      className="box-border flex h-full flex-col justify-end gap-2 p-3"
       data-og-new-chat-composer=""
     >
       {error ? (
         <p role="alert" className="text-og-xs text-og-status-failed">
-          {error}
+          {formatError(
+            error.cause,
+            error.cause instanceof Error && error.cause.message === labels.newChatUnavailable
+              ? labels.newChatUnavailable
+              : undefined,
+          )}
         </p>
       ) : null}
       <div className="flex items-end gap-2 rounded-lg border border-og-border bg-og-surface-1 p-2">

package/src/components/queue-surface-state.tsx

@@ -1,6 +1,7 @@
 import { Loader2Icon, RotateCwIcon } from "lucide-react";
 
 import type { UseTurnQueueResult } from "../hooks/use-turn-queue";
+import { useErrorMessage } from "../lib/error-message";
 
 type QueueStateProps = {
   queue: UseTurnQueueResult;
@@ -60,6 +61,7 @@ export function QueueErrorAlert({
   queue,
   dividerBefore = false,
 }: QueueStateProps & { dividerBefore?: boolean }) {
+  const formatError = useErrorMessage();
   return (
     <div className={`${dividerBefore ? "border-t border-border" : ""} p-2`}>
       <div
@@ -74,7 +76,7 @@ export function QueueErrorAlert({
           data-testid="queue-error-message"
           dir="auto"
         >
-          {(queue.mutationError ?? queue.error)?.message}
+          {formatError(queue.mutationError ?? queue.error)}
         </span>
         <button
           type="button"

package/src/components/session-chrome.tsx

@@ -73,6 +73,7 @@ import type { ComposerOptimisticMessage, ComposerState } from "../hooks/use-comp
 import type { UseGoalResult } from "../hooks/use-goal";
 import type { UseTurnQueueResult } from "../hooks/use-turn-queue";
 import { cn } from "../lib/cn";
+import { useErrorMessage } from "../lib/error-message";
 import { formatClockTime } from "../lib/format";
 import { requestQueueDraftEdit } from "./queue-draft-policy";
 import { QUEUE_ITEM_CONTENT_UNAVAILABLE, queueItemContent } from "./queue-item-content";
@@ -453,6 +454,7 @@ export function SessionChrome({
   defaultActive = null,
   onActiveChange,
 }: SessionChromeProps) {
+  const formatError = useErrorMessage();
   const [activityRequested, setActivityOpen] = useState(
     Boolean(defaultActive && ["incoming", "agents", "commands"].includes(defaultActive)),
   );
@@ -1192,7 +1194,7 @@ export function SessionChrome({
           </AnimatePresence>
           {goal?.mutationError ? (
             <p role="alert" className="px-3 pb-2 text-og-xs text-og-danger">
-              Goal action not confirmed. {goal.mutationError.message}
+              Goal action not confirmed. {formatError(goal.mutationError)}
             </p>
           ) : null}
           <div
@@ -1667,6 +1669,7 @@ function GoalPanel({
   elapsed: string | null;
   readOnly: boolean;
 }) {
+  const formatError = useErrorMessage();
   const record = goal.goal;
   if (!record) return null;
   const canToggle = !readOnly && (record.status === "active" || record.status === "paused");
@@ -1699,7 +1702,7 @@ function GoalPanel({
       ) : null}
       {record.continuation?.lastError ? (
         <p className="rounded-og-sm bg-og-status-waiting/10 px-1.5 py-1 text-og-xs leading-4 text-og-status-waiting">
-          {record.continuation.lastError}
+          {formatError(record.continuation.lastError)}
         </p>
       ) : null}
       <div className="flex flex-wrap items-center justify-between gap-1.5 pt-0.5">

package/src/components/session-commands-panel.tsx

@@ -2,6 +2,7 @@ import { ChevronRightIcon, Loader2Icon, SquareIcon } from "lucide-react";
 import { useState } from "react";
 import type { UseSessionBackgroundCommandsResult } from "../hooks/use-session-background-commands";
 import { formatClockTime } from "../lib/format";
+import { useErrorMessage } from "../lib/error-message";
 
 /** The current session's live commands. Settled commands belong to the timeline. */
 export function SessionCommandsPanel({
@@ -11,6 +12,7 @@ export function SessionCommandsPanel({
   commands: UseSessionBackgroundCommandsResult;
   readOnly?: boolean;
 }) {
+  const formatError = useErrorMessage();
   const [pending, setPending] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
   const active = state.commands.filter(
@@ -22,7 +24,7 @@ export function SessionCommandsPanel({
     try {
       await state.cancel(id);
     } catch (cause) {
-      setError(cause instanceof Error ? cause.message : "Stop was not confirmed. Try again.");
+      setError(formatError(cause));
     } finally {
       setPending(null);
     }

package/src/components/session-conversation.tsx

@@ -12,7 +12,7 @@ import {
 import type { SiteSnapshotClient } from "./artifacts/chat-interactive-block";
 import { useOpenGeni, type ClientOverride } from "../session-context";
 import { useWorkspaceModelCatalog } from "../hooks/use-available-models";
-import { ModelPolicyPicker } from "./model-policy-picker";
+import { ModelPolicyPicker, type ModelPolicyPickerProps } from "./model-policy-picker";
 import { useSessionEvents } from "../hooks/use-session-events";
 import { useSession } from "../hooks/use-session";
 import { useTurnQueue } from "../hooks/use-turn-queue";
@@ -37,6 +37,7 @@ import {
 import type { UserMessageDisclosureLabels } from "./user-message-body";
 import { conversationTimeline } from "../conversation-timeline";
 import { cn } from "../lib/cn";
+import { useErrorMessage } from "../lib/error-message";
 
 export type SessionConversationProps = ClientOverride & {
   sessionId: string;
@@ -80,6 +81,8 @@ export type SessionConversationProps = ClientOverride & {
    * reports `modelSelection: false` (a host proxy that fixes the model policy).
    */
   modelPicker?: boolean | undefined;
+  /** Model-picker appearance only; visibility, policy and delivery remain owned here. */
+  modelPickerProps?: Pick<ModelPolicyPickerProps, "groupPresentation" | "messages"> | undefined;
   /** Localized actions for already-sent user-message disclosure. */
   userMessageDisclosureLabels?: UserMessageDisclosureLabels | undefined;
   loadSkillReview?: HumanInputSurfaceProps["loadSkillReview"];
@@ -110,6 +113,7 @@ function Conversation({
   allowanceExhaustedLabels,
   attachments: attachmentsRequested = true,
   modelPicker,
+  modelPickerProps,
   userMessageDisclosureLabels,
   loadSkillReview,
   client,
@@ -120,6 +124,7 @@ function Conversation({
 }: SessionConversationProps) {
   const scope = { client, workspaceId };
   const context = useOpenGeni(scope);
+  const formatError = useErrorMessage();
   const config = useClientConfigFlags(context.client);
   const showModelPicker = modelPicker ?? config.modelSelection;
   const catalog = useWorkspaceModelCatalog({
@@ -203,7 +208,7 @@ function Conversation({
       style={{ height }}
       data-og-conversation=""
     >
-      {error && <p role="alert">{error.message}</p>}
+      {error && <p role="alert">{formatError(error)}</p>}
       <MessageTimeline
         renderMessageText={renderMessageText}
         resolveLink={links}
@@ -265,7 +270,7 @@ function Conversation({
                 await human.respond(id, response);
               }}
               respondingRequestId={human.respondingRequestId}
-              error={human.mutationError?.message}
+              error={human.mutationError ? formatError(human.mutationError) : null}
               autoFocus={false}
             />
             {terminal ? (
@@ -291,6 +296,8 @@ function Conversation({
                 composerProps?.controlsStart ??
                 (showModelPicker && composer.policy && (
                   <ModelPolicyPicker
+                    groupPresentation={modelPickerProps?.groupPresentation}
+                    messages={modelPickerProps?.messages}
                     rows={catalog.rows}
                     model={composer.policy.model}
                     effort={composer.policy.reasoningEffort}