@opengeni/react 7.0.0 → 7.1.0-canary.35855175602001

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

@@ -1,5 +1,5 @@
 import type { ClientModel, ReasoningEffort } from "@opengeni/sdk";
-import { CheckIcon, SearchIcon, ZapIcon } from "lucide-react";
+import { ArrowRightIcon, CheckIcon, SearchIcon, ZapIcon } from "lucide-react";
 import { useRef, useState, type RefObject, type CSSProperties } from "react";
 import { Popover, RadioGroup } from "radix-ui";
 import { cn } from "../lib/cn";
@@ -30,13 +30,26 @@ export function ModelPolicyPickerMenu(props: ModelPolicyPickerProps) {
   const selected = findPickerRow(rows, props.model);
   const words = query.toLowerCase().trim().split(/\s+/).filter(Boolean);
   const filtered = rows.filter((row) => {
+    const description = props.groupPresentation?.[row.billingClass]?.description;
     const text =
-      `${row.label} ${row.id} ${row.providerLabel} ${row.billingClassLabel} ${payerSummaryForModel(row.catalog)}`.toLowerCase();
+      `${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 })
-    .map((group) => ({ ...group, rows: group.rows.filter((row) => matchingIds.has(row.id)) }))
+    .map((group) => {
+      const override = props.groupPresentation?.[group.billingClass]?.description;
+      return {
+        ...group,
+        rows: group.rows.filter((row) => matchingIds.has(row.id)),
+        description:
+          override === undefined
+            ? group.billingClass === "opengeni_credits"
+              ? null
+              : messages.billingHints[group.billingClass]
+            : override,
+      };
+    })
     .filter((group) => group.rows.length > 0);
   const choose = (row: ClientPickerModelRow) => {
     if (!row.selectable || props.disabled) return;
@@ -59,7 +72,7 @@ export function ModelPolicyPickerMenu(props: ModelPolicyPickerProps) {
       hint={row.unavailableReason ?? undefined}
       disabled={props.disabled || !row.selectable}
       title={[row.label, row.unavailableReason].filter(Boolean).join(" · ")}
-      active={row.id === props.model}
+      active={row.selectable && row.id === props.model}
       showChevron={false}
       trailing={
         row.catalog.cost === "free" || row.id === props.model ? (
@@ -106,28 +119,30 @@ export function ModelPolicyPickerMenu(props: ModelPolicyPickerProps) {
         buttons[next]?.focus();
       }}
     >
-      <div className="border-b border-og-border py-1">
-        <label className="og-model-policy-search flex items-center gap-2 rounded-og-sm px-2 py-1 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-og-accent/40">
-          <SearchIcon className="size-4 shrink-0 text-og-fg-subtle" aria-hidden />
-          <input
-            aria-label={messages.searchLabel}
-            placeholder={messages.searchPlaceholder}
-            value={query}
-            onChange={(event) => setQuery(event.target.value)}
-            onKeyDown={(event) => {
-              if (event.key !== "Escape" && event.key !== "Tab") event.stopPropagation();
-              if (event.key === "ArrowDown") {
-                event.preventDefault();
-                event.currentTarget
-                  .closest('[data-testid="model-picker-menu"]')
-                  ?.querySelector<HTMLButtonElement>("button:not(:disabled)")
-                  ?.focus();
-              }
-            }}
-            className="og-model-policy-search-input h-8 min-w-0 flex-1 bg-transparent text-og-menu text-og-fg outline-hidden placeholder:text-og-fg-subtle"
-          />
-        </label>
-      </div>
+      {rows.some((row) => row.selectable) ? (
+        <div className="border-b border-og-border py-1">
+          <label className="og-model-policy-search flex items-center gap-2 rounded-og-sm px-2 py-1 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-og-accent/40">
+            <SearchIcon className="size-4 shrink-0 text-og-fg-subtle" aria-hidden />
+            <input
+              aria-label={messages.searchLabel}
+              placeholder={messages.searchPlaceholder}
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.key !== "Escape" && event.key !== "Tab") event.stopPropagation();
+                if (event.key === "ArrowDown") {
+                  event.preventDefault();
+                  event.currentTarget
+                    .closest('[data-testid="model-picker-menu"]')
+                    ?.querySelector<HTMLButtonElement>("button:not(:disabled)")
+                    ?.focus();
+                }
+              }}
+              className="og-model-policy-search-input h-8 min-w-0 flex-1 bg-transparent text-og-menu text-og-fg outline-hidden placeholder:text-og-fg-subtle"
+            />
+          </label>
+        </div>
+      ) : null}
       {props.error ? (
         <p className="px-2 py-2 text-og-control text-og-status-failed" role="alert">
           {props.error}
@@ -139,7 +154,7 @@ export function ModelPolicyPickerMenu(props: ModelPolicyPickerProps) {
       >
         {props.loading ? (
           <p className="px-2 py-3 text-og-control text-og-fg-subtle">{messages.loading}</p>
-        ) : (
+        ) : rows.some((row) => row.selectable) ? (
           <>
             {groups.map((group) => (
               <section
@@ -148,12 +163,16 @@ export function ModelPolicyPickerMenu(props: ModelPolicyPickerProps) {
                 className="py-2.5 first:pt-1 [&+section]:border-t [&+section]:border-og-border"
               >
                 <div className="flex items-center gap-2 px-2.5 py-1.5 text-og-control font-semibold text-og-fg">
-                  <BillingClassMark billingClass={group.billingClass} aria-label="" />
-                  {group.label}
+                  <BillingClassMark
+                    billingClass={group.billingClass}
+                    presentation={props.groupPresentation?.[group.billingClass]}
+                    aria-label=""
+                  />
+                  <span className="min-w-0 break-words">{group.label}</span>
                 </div>
-                {group.billingClass !== "opengeni_credits" ? (
-                  <p className="px-2.5 pb-2 text-og-control text-og-fg-subtle">
-                    {messages.billingHints[group.billingClass]}
+                {group.description ? (
+                  <p className="break-words px-2.5 pb-2 text-og-control text-og-fg-subtle">
+                    {group.description}
                   </p>
                 ) : null}
                 {group.rows.map(modelRow)}
@@ -165,9 +184,14 @@ export function ModelPolicyPickerMenu(props: ModelPolicyPickerProps) {
               </p>
             ) : null}
           </>
+        ) : props.connectModelsHref || rows.length > 0 ? (
+          <ConnectModelsPanel href={props.connectModelsHref} messages={messages} />
+        ) : (
+          <p className="px-2 py-4 text-og-control text-og-fg-subtle">{messages.noModels}</p>
         )}
       </div>
-      {selected &&
+      {rows.some((row) => row.selectable) &&
+      selected &&
       ((props.hasImageAttachments &&
         selected.catalog.capabilities?.inputModalities.includes("image") === false) ||
         (effortOptionsForModel(selected.catalog).length > 1 &&
@@ -188,6 +212,80 @@ export function ModelPolicyPickerMenu(props: ModelPolicyPickerProps) {
   );
 }
 
+const CONNECT_MODEL_OPTIONS: Array<{
+  billingClass: "codex_subscription" | "supergrok_subscription" | "byok" | "external";
+  title: string;
+  detail: string;
+}> = [
+  { billingClass: "codex_subscription", title: "Codex", detail: "ChatGPT" },
+  { billingClass: "supergrok_subscription", title: "SuperGrok", detail: "xAI" },
+  { billingClass: "byok", title: "AI Gateway", detail: "Vercel" },
+  { billingClass: "external", title: "OpenRouter", detail: "API key" },
+];
+
+function ConnectModelsPanel(props: {
+  href: string | undefined;
+  messages: typeof defaultModelPolicyPickerMessages;
+}) {
+  return (
+    <div className="px-1.5 pb-1.5 pt-2" data-testid="model-picker-connect">
+      <div className="px-1.5 pb-3">
+        <p className="text-og-menu font-medium tracking-tight text-og-fg">
+          {props.messages.connectTitle}
+        </p>
+        <p className="mt-1 text-og-control leading-snug text-og-fg-subtle">
+          {props.messages.connectBody}
+        </p>
+      </div>
+      <div className="grid grid-cols-2 gap-1">
+        {CONNECT_MODEL_OPTIONS.map((option) => {
+          const content = (
+            <>
+              <span className="flex size-8 shrink-0 items-center justify-center rounded-og-md bg-og-surface-2 text-og-fg">
+                <BillingClassMark
+                  billingClass={option.billingClass}
+                  aria-label=""
+                  className="size-4 text-og-fg"
+                />
+              </span>
+              <span className="min-w-0">
+                <span className="block truncate text-og-control font-medium text-og-fg">
+                  {option.title}
+                </span>
+                <span className="block truncate text-og-control text-og-fg-subtle">
+                  {option.detail}
+                </span>
+              </span>
+            </>
+          );
+          const className =
+            "flex min-w-0 items-center gap-2 rounded-og-md px-1.5 py-1.5 outline-hidden transition-colors hover:bg-og-surface-2 focus-visible:ring-2 focus-visible:ring-og-accent/40";
+          return props.href ? (
+            <a key={option.title} href={props.href} className={className}>
+              {content}
+            </a>
+          ) : (
+            <div key={option.title} className={className}>
+              {content}
+            </div>
+          );
+        })}
+      </div>
+      {props.href ? (
+        <a
+          href={props.href}
+          className="mt-2 flex h-9 w-full items-center justify-center gap-1.5 rounded-og-md bg-og-fg text-og-control font-medium text-og-surface-1 outline-hidden transition-opacity hover:opacity-90 focus-visible:ring-2 focus-visible:ring-og-accent/40"
+        >
+          {props.messages.connectAction}
+          <ArrowRightIcon className="size-3.5" aria-hidden />
+        </a>
+      ) : (
+        <p className="px-1.5 pt-3 text-og-control text-og-fg-subtle">{props.messages.noModels}</p>
+      )}
+    </div>
+  );
+}
+
 function ModelThinkingControls(props: ModelPolicyPickerProps) {
   const selected = findPickerRow(effectiveRows(props), props.model);
   if (!selected) return null;

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

@@ -5,6 +5,7 @@ import {
   ChevronRightIcon,
   Globe2Icon,
   KeyRoundIcon,
+  SparklesIcon,
   ZapIcon,
 } from "lucide-react";
 import { motion, useReducedMotion } from "motion/react";
@@ -37,10 +38,27 @@ const LazyModelPolicyPickerMenu = lazy(() =>
 
 type ClientPickerModelRow = PickerModelRow<ClientModel>;
 
+/** Presentation only; never changes model identity, billing or availability. */
+export type ModelPolicyPickerGroupPresentation = Partial<
+  Record<
+    PickerBillingClass,
+    {
+      label?: string | undefined;
+      /** Omit to preserve the default; null hides the supporting text. */
+      description?: string | null | undefined;
+      /** Decorative, non-interactive content. Omit for the default; null hides it. */
+      icon?: ReactNode | undefined;
+    }
+  >
+>;
+
 export type ModelPolicyPickerMessages = {
   label: string;
   loading: string;
   noModels: string;
+  connectTitle: string;
+  connectBody: string;
+  connectAction: string;
   thinking: string;
   fast: string;
   fastRateHint: string;
@@ -61,6 +79,9 @@ export const defaultModelPolicyPickerMessages: ModelPolicyPickerMessages = {
   label: "Model and effort",
   loading: "Loading model catalog…",
   noModels: "No models available.",
+  connectTitle: "Connect a model",
+  connectBody: "Use a subscription or a provider key you already have.",
+  connectAction: "Open Models",
   thinking: "Thinking",
   fast: "Fast",
   fastRateHint: "2× rate",
@@ -85,6 +106,8 @@ export const defaultModelPolicyPickerMessages: 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. */
@@ -110,6 +133,8 @@ export type ModelPolicyPickerProps = {
   menuSide?: "top" | "bottom" | undefined;
   /** Hide latency controls on surfaces whose saved policy does not include latency. */
   allowLatencyMode?: boolean | undefined;
+  /** Settings → Models. Shown when the catalog has no model that can run. */
+  connectModelsHref?: string | undefined;
   /** Classes for the portalled menu surface. Prefer --og-* tokens for theming. */
   contentClassName?: string | undefined;
   /** Inline styles for the portalled menu, applied after inherited --og-* tokens. */
@@ -157,6 +182,7 @@ function XaiMark(props: SVGProps<SVGSVGElement>) {
 
 export function BillingClassMark(props: {
   billingClass: PickerBillingClass;
+  presentation?: ModelPolicyPickerGroupPresentation[PickerBillingClass] | undefined;
   className?: string | undefined;
   "aria-label"?: string | undefined;
 }) {
@@ -168,13 +194,14 @@ export function BillingClassMark(props: {
     byok: "Workspace provider account",
     organization_byok: "Organization provider account",
   };
-  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";
@@ -184,7 +211,9 @@ export function BillingClassMark(props: {
       data-testid={`billing-class-icon-${props.billingClass}`}
       {...accessibility}
     >
-      {props.billingClass === "opengeni_credits" ? (
+      {props.presentation?.icon !== undefined ? (
+        props.presentation.icon
+      ) : props.billingClass === "opengeni_credits" ? (
         <OpenGeniMark className={mark} />
       ) : props.billingClass === "external" ? (
         <Globe2Icon className={mark} aria-hidden />
@@ -235,7 +264,10 @@ function applyCodexOnly(
 export function effectiveRows(props: ModelPolicyPickerProps): ClientPickerModelRow[] {
   const rows = props.rows !== undefined ? props.rows : projectClientModelRows(props.models ?? []);
   const messages = { ...defaultModelPolicyPickerMessages, ...props.messages };
-  return applyCodexOnly(rows, props.codexOnly === true, messages.codexOnly);
+  return applyCodexOnly(rows, props.codexOnly === true, messages.codexOnly).map((row) => {
+    const label = props.groupPresentation?.[row.billingClass]?.label;
+    return label === undefined ? row : { ...row, billingClassLabel: label };
+  });
 }
 
 export function PickerNavRow(props: {
@@ -346,6 +378,8 @@ export function ModelPolicyPicker(props: ModelPolicyPickerProps) {
   );
   const { open, setOpen, rows } = useModelPolicyPickerState(props);
   const selected = findPickerRow(rows, props.model);
+  const needsModel =
+    !rows.some((row) => row.selectable) && (rows.length > 0 || Boolean(props.connectModelsHref));
 
   if (props.loading) {
     return (
@@ -372,21 +406,36 @@ export function ModelPolicyPicker(props: ModelPolicyPickerProps) {
         disabled={props.disabled}
         aria-label={messages.label}
         className={cn(
-          "og-root og-model-policy-trigger inline-flex h-[var(--og-model-picker-trigger-height)] min-w-0 max-w-64 items-center gap-1 rounded-full border border-transparent px-2.5 text-og-control text-og-fg-muted outline-hidden transition-colors hover:border-og-border hover:bg-og-surface-2 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:cursor-not-allowed disabled:opacity-50 max-sm:h-11 max-sm:max-w-[7.5rem] max-sm:px-2",
+          "og-root og-model-policy-trigger inline-flex h-[var(--og-model-picker-trigger-height)] min-w-0 max-w-64 items-center gap-1 rounded-full border px-2.5 text-og-control outline-hidden transition-colors focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:cursor-not-allowed disabled:opacity-50 max-sm:h-11 max-sm:max-w-[7.5rem] max-sm:px-2",
+          needsModel
+            ? "border-og-border bg-og-surface-2 text-og-fg hover:bg-og-surface-3"
+            : "border-transparent text-og-fg-muted hover:border-og-border hover:bg-og-surface-2 hover:text-og-fg",
           props.className,
         )}
       >
-        <BillingClassMark
-          billingClass={selected?.billingClass ?? billingClassForMissingSelection(props.model)}
-          className="text-og-fg"
-        />
+        {needsModel ? (
+          <SparklesIcon className="size-3.5 shrink-0" aria-hidden />
+        ) : (
+          <BillingClassMark
+            billingClass={selected?.billingClass ?? billingClassForMissingSelection(props.model)}
+            presentation={
+              props.groupPresentation?.[
+                selected?.billingClass ?? billingClassForMissingSelection(props.model)
+              ]
+            }
+            className="text-og-fg"
+          />
+        )}
         <span className="og-model-policy-label-full min-w-0 truncate font-medium text-og-fg max-sm:hidden @max-[20rem]/model-controls:hidden">
-          {selected?.label ?? props.model}
+          {needsModel ? messages.connectTitle : (selected?.label ?? props.model)}
         </span>
         <span className="og-model-policy-label-short min-w-0 truncate font-medium text-og-fg sm:hidden @max-[20rem]/model-controls:block">
-          {selected?.shortLabel ?? selected?.label ?? props.model}
+          {needsModel
+            ? messages.connectTitle
+            : (selected?.shortLabel ?? selected?.label ?? props.model)}
         </span>
         {selected &&
+        !needsModel &&
         effortOptionsForModel(selected.catalog).length > 1 &&
         selected.catalog.capabilities?.reasoning.runnable !== false ? (
           <span
@@ -396,7 +445,7 @@ export function ModelPolicyPicker(props: ModelPolicyPickerProps) {
             {labelReasoningEffort(props.effort)}
           </span>
         ) : null}
-        {props.latencyMode === "fast" ? (
+        {props.latencyMode === "fast" && !needsModel ? (
           <ZapIcon
             className="size-3.5 shrink-0 fill-current stroke-current text-og-fg"
             aria-label={messages.fast}

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

@@ -62,13 +62,18 @@ export function SessionCommandsPanel({
                     title="Expand command"
                   >
                     <ChevronRightIcon className="size-3 shrink-0 text-og-fg-subtle transition-transform group-open/command:rotate-90" />
-                    <span className="truncate">
-                      {command.commandPreview || "Background command"}
+                    <span
+                      className="min-w-0 truncate"
+                      title={
+                        command.commandText ?? (command.commandPreview || "Background command")
+                      }
+                    >
+                      {command.commandText ?? (command.commandPreview || "Background command")}
                     </span>
                   </summary>
                   <div className="mt-2 space-y-1">
                     <p className="whitespace-pre-wrap break-all font-mono text-og-fg-muted">
-                      {command.commandPreview || "Background command"}
+                      {command.commandText ?? (command.commandPreview || "Background command")}
                     </p>
                     <time
                       className="block text-og-fg-subtle"

package/src/components/session-conversation.tsx

@@ -10,13 +10,15 @@ import { useHumanInputRequests } from "../hooks/use-human-input";
 import { ChatComposer, type ChatComposerProps } from "./chat-composer";
 import { SessionChrome } from "./session-chrome";
 import { HumanInputSurface, type HumanInputSurfaceProps } from "./human-input-surface";
-import { MessageTimeline } from "./message-timeline";
+import { MessageTimeline, type MessageTimelineProps } from "./message-timeline";
 import type { UserMessageDisclosureLabels } from "./user-message-body";
 import { conversationTimeline } from "../conversation-timeline";
 import { cn } from "../lib/cn";
 
 export type SessionConversationProps = ClientOverride & {
   sessionId: string;
+  /** Host-owned artifact links, previews and other message presentation. */
+  renderMessageText?: MessageTimelineProps["renderMessageText"];
   /** Localized actions for already-sent user-message disclosure. */
   userMessageDisclosureLabels?: UserMessageDisclosureLabels | undefined;
   loadSkillReview?: HumanInputSurfaceProps["loadSkillReview"];
@@ -35,6 +37,7 @@ export function SessionConversation(props: SessionConversationProps) {
 
 function Conversation({
   sessionId,
+  renderMessageText,
   userMessageDisclosureLabels,
   loadSkillReview,
   client,
@@ -75,6 +78,7 @@ function Conversation({
     >
       {error && <p role="alert">{error.message}</p>}
       <MessageTimeline
+        renderMessageText={renderMessageText}
         userMessageDisclosureLabels={userMessageDisclosureLabels}
         className="min-h-0 flex-1"
         items={conversationTimeline(feed.timeline, queue, composer)}

package/src/composer.ts

@@ -15,6 +15,7 @@ export {
 export type {
   ModelPolicyPickerMessages,
   ModelPolicyPickerProps,
+  ModelPolicyPickerGroupPresentation,
 } from "./components/model-policy-picker";
 export {
   Actions,

package/src/hooks/use-last-started-turn-policy.ts

@@ -47,8 +47,7 @@ export function useLastStartedTurnPolicy(
   sessionId: string | null | undefined,
   options: UseLastStartedTurnPolicyOptions = {},
 ): UseLastStartedTurnPolicyResult {
-  const { client, workspaceId, workspaceControlEvent, registerSessionReconciler } =
-    useOpenGeni(options);
+  const { client, workspaceId, registerSessionReconciler } = useOpenGeni(options);
   const enabled = (options.enabled ?? true) && Boolean(sessionId);
 
   const load = useCallback(
@@ -68,10 +67,6 @@ export function useLastStartedTurnPolicy(
     enabled,
   });
 
-  useEffect(() => {
-    if (enabled && workspaceControlEvent) void refresh();
-  }, [enabled, refresh, workspaceControlEvent]);
-
   useEffect(() => {
     if (!sessionId || !enabled) return;
     return registerSessionReconciler(sessionId, "last-started-turn-policy", refresh);
@@ -79,7 +74,8 @@ export function useLastStartedTurnPolicy(
 
   // Shared-feed only: the session header lives outside the route event log and
   // must not open a second SSE. Without `events`, rely on the initial fetch +
-  // optional poll / workspace-control / reconciler.
+  // optional poll / reconciler. Pause/resume controls do not change the last
+  // admitted turn; its own turn.started event supplies that invalidation.
   useSessionEventTrigger(
     client,
     workspaceId,

package/src/hooks/use-session-events.ts

@@ -105,8 +105,8 @@ const FOREGROUND_COMPACT_CATCHUP_MAX_GROUPS = 16;
 const FOREGROUND_COMPACT_CATCHUP_MAX_BYTES = 512 * 1024;
 const EMPTY_EVENTS: SessionEvent[] = [];
 const encoder = new TextEncoder();
-export const SESSION_EVENT_BROWSER_MAX_BYTES = 8 * 1024 * 1024;
-export const SESSION_EVENT_BROWSER_MAX_COUNT = 10_000;
+export const SESSION_EVENT_BROWSER_MAX_BYTES = 160 * 1024 * 1024;
+export const SESSION_EVENT_BROWSER_MAX_COUNT = 200_000;
 export const SESSION_EVENT_BROWSER_PENDING_MAX_BYTES = 1024 * 1024;
 export const SESSION_EVENT_BROWSER_PENDING_MAX_COUNT = 256;
 
@@ -325,7 +325,7 @@ export function useSessionEvents(
         setSessionStatusProjection(status);
       }
       const current = eventWindowRef.current;
-      const next = boundBrowserSessionEventWindow([...current.events, ...batch]);
+      const next = appendBrowserSessionEventWindow(current, batch);
       const retained = {
         ...next,
         truncated: current.truncated || next.truncated,
@@ -366,7 +366,7 @@ export function useSessionEvents(
             const current = eventWindowRef.current;
             assertAppendOrder(current.events, plan.events);
             const status = observeSessionStatus(plan.events, sessionStatusRef);
-            const next = boundBrowserSessionEventWindow([...current.events, ...plan.events]);
+            const next = appendBrowserSessionEventWindow(current, plan.events);
             const retained = {
               ...next,
               truncated: current.truncated || next.truncated,
@@ -764,9 +764,7 @@ export function useSessionEvents(
       const status = observeSessionStatus(window.events, sessionStatusRef);
       const previousOldest = current.events[0]?.sequence ?? null;
       // Moving forward through history: keep the newest suffix of the merge.
-      const next = boundBrowserSessionEventWindow([...current.events, ...window.events], {
-        direction: "newest",
-      });
+      const next = appendBrowserSessionEventWindow(current, window.events);
       const retained = {
         ...next,
         truncated: current.truncated || next.truncated || window.hasNewer,
@@ -1049,6 +1047,33 @@ export function boundBrowserSessionEventWindow(
   };
 }
 
+/** @internal Append immutable events without serializing the retained history again. */
+export function appendBrowserSessionEventWindow(
+  current: BrowserSessionEventWindow,
+  batch: readonly SessionEvent[],
+  options: { maxBytes?: number; maxCount?: number } = {},
+): BrowserSessionEventWindow {
+  const maxBytes = Math.max(1024, options.maxBytes ?? SESSION_EVENT_BROWSER_MAX_BYTES);
+  const maxCount = Math.max(1, Math.floor(options.maxCount ?? SESSION_EVENT_BROWSER_MAX_COUNT));
+  const events = [...current.events, ...batch];
+  let bytes = current.bytes;
+  for (let index = 0; index < batch.length; index += 1) {
+    bytes += browserJsonBytes(batch[index]) + (current.events.length + index > 0 ? 1 : 0);
+  }
+  let start = 0;
+  // Preserve the newest event even when it alone exceeds the byte target,
+  // matching the full-window reducer and retaining exact cursor progress.
+  while (events.length - start > 1 && (bytes > maxBytes || events.length - start > maxCount)) {
+    bytes -= browserJsonBytes(events[start]) + 1;
+    start += 1;
+  }
+  return {
+    events: start === 0 ? events : events.slice(start),
+    bytes,
+    truncated: current.truncated || start > 0,
+  };
+}
+
 function browserJsonBytes(value: unknown): number {
   return encoder.encode(JSON.stringify(value)).byteLength;
 }

package/src/index.ts

@@ -504,6 +504,7 @@ export { ModelPolicyPickerMenu } from "./components/model-policy-picker-menu";
 export type {
   ModelPolicyPickerMessages,
   ModelPolicyPickerProps,
+  ModelPolicyPickerGroupPresentation,
 } from "./components/model-policy-picker";
 export {
   advancedSourceSummary,

package/src/model-policy.ts

@@ -217,10 +217,7 @@ function organizationProviderPayerSummary(model: ClientModel): string {
 
 export function projectPickerRows(models: WorkspaceModelCatalogModel[]): PickerModelRow[] {
   return models
-    .filter((catalog) => {
-      const billingClass = billingClassForModel(catalog);
-      return billingClass === "opengeni_credits" || catalog.credentialReadiness.status === "ready";
-    })
+    .filter((catalog) => catalog.credentialReadiness.status === "ready")
     .map((catalog) => {
       const billingClass = billingClassForModel(catalog);
       return {

package/src/timeline/projection.ts

@@ -1,5 +1,6 @@
 import {
   parseMediaGenerationResult,
+  parseToolDisplayMetadata,
   type HumanInputAnswer,
   type HumanInputQuestion,
   type HumanInputResponse,
@@ -610,6 +611,7 @@ export function buildTimeline(
 
       case "agent.toolCall.created": {
         const name = typeof payload.name === "string" ? payload.name : "tool";
+        const display = parseToolDisplayMetadata(payload.display);
         const callId = typeof payload.id === "string" ? payload.id : null;
         const args = payload.arguments ?? null;
         closeStreamingTail();
@@ -651,6 +653,7 @@ export function buildTimeline(
               (item): item is ToolCallItem => item.kind === "tool-call" && item.callId === callId,
             );
           if (existing) {
+            if (display) existing.display = display;
             if (args != null) {
               existing.arguments = args;
             }
@@ -667,6 +670,7 @@ export function buildTimeline(
           turnId,
           callId,
           name,
+          ...(display ? { display } : {}),
           arguments: args,
           output: undefined,
           truncation: null,

package/src/timeline/rolling-activity.tsx

@@ -36,7 +36,9 @@ export function RollingActivity({
   const fallback = (
     <span className="og-rolling-label">
       <WrenchIcon className="size-3.5" />
-      <span>{item.kind === "tool-call" ? toolDisplayName(item.name) : "Working"}</span>
+      <span>
+        {item.kind === "tool-call" ? toolDisplayName(item.name, item.display) : "Working"}
+      </span>
     </span>
   );
   return (
@@ -46,7 +48,7 @@ export function RollingActivity({
     >
       <span className="sr-only">
         {item.kind === "tool-call"
-          ? toolDisplayName(item.name)
+          ? toolDisplayName(item.name, item.display)
           : item.kind === "reasoning"
             ? "Thinking"
             : "Working"}