@opengeni/react 0.45.0 → 0.48.0

package/src/components/machine-card.tsx

@@ -81,7 +81,7 @@ export function MachineCard({
         "og-root group relative flex flex-col gap-3 overflow-hidden rounded-og-lg border border-og-border",
         "bg-og-surface-1 p-4 shadow-og-sm transition-colors",
         openable &&
-          "cursor-pointer hover:border-og-border-strong focus-visible:border-og-accent/60 focus-visible:outline-none",
+          "cursor-pointer hover:border-og-border-strong focus-visible:border-og-accent/60 focus-visible:outline-hidden",
         machine.active && "border-og-accent/40",
         className,
       )}

package/src/components/machines/machine-detail.tsx

@@ -6,7 +6,14 @@
 // how have they moved over the chosen window. Built entirely on the existing
 // `og-*` token system — no new visual language, just the missing depth.
 // ----------------------------------------------------------------------------
-import { ArrowLeftIcon, CpuIcon, LaptopIcon, RadioIcon, ServerIcon } from "lucide-react";
+import {
+  ArrowLeftIcon,
+  CpuIcon,
+  LaptopIcon,
+  RadioIcon,
+  ServerIcon,
+  Trash2Icon,
+} from "lucide-react";
 import { cn } from "../../lib/cn";
 import { formatRelativeTime } from "../../lib/format";
 import type { MachineView, MetricSample } from "../../types/machines";
@@ -23,6 +30,8 @@ export type MachineDetailProps = {
   onWindowChange: (w: MetricWindow) => void;
   loadingSeries?: boolean | undefined;
   onBack?: (() => void) | undefined;
+  /** Open the workspace-admin removal confirmation for a self-hosted machine. */
+  onRemove?: ((machine: MachineView) => void) | undefined;
   now?: number | undefined;
   className?: string | undefined;
 };
@@ -40,6 +49,7 @@ export function MachineDetail({
   onWindowChange,
   loadingSeries,
   onBack,
+  onRemove,
   now = Date.now(),
   className,
 }: MachineDetailProps) {
@@ -78,24 +88,38 @@ export function MachineDetail({
           </span>
         </div>
 
-        {/* range selector */}
-        <div className="flex shrink-0 items-center gap-0.5 rounded-og-md border border-og-border bg-og-surface-1 p-0.5">
-          {METRIC_WINDOWS.map((w) => (
+        <div className="flex shrink-0 items-center gap-2">
+          {onRemove && machine.enrollmentId && !machine.isSessionGroup ? (
             <button
-              key={w}
               type="button"
-              onClick={() => onWindowChange(w)}
-              data-active={w === window}
-              className={cn(
-                "rounded-og-sm px-2 py-1 font-og-mono text-og-xs transition-colors",
-                w === window
-                  ? "bg-og-surface-3 text-og-fg shadow-og-sm"
-                  : "text-og-fg-subtle hover:text-og-fg-muted",
-              )}
+              data-remove-machine
+              aria-label={`Remove machine ${machine.name}`}
+              onClick={() => onRemove(machine)}
+              className="inline-flex min-h-9 items-center gap-1.5 rounded-og-sm border border-og-status-failed/40 px-2.5 py-1 font-medium text-og-xs text-og-status-failed transition-colors hover:bg-og-status-failed/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-og-status-failed/50 pointer-coarse:min-h-11"
             >
-              {w}
+              <Trash2Icon className="size-3.5" aria-hidden />
+              <span className="hidden sm:inline">Remove machine</span>
             </button>
-          ))}
+          ) : null}
+          {/* range selector */}
+          <div className="flex items-center gap-0.5 rounded-og-md border border-og-border bg-og-surface-1 p-0.5">
+            {METRIC_WINDOWS.map((w) => (
+              <button
+                key={w}
+                type="button"
+                onClick={() => onWindowChange(w)}
+                data-active={w === window}
+                className={cn(
+                  "rounded-og-sm px-2 py-1 font-og-mono text-og-xs transition-colors",
+                  w === window
+                    ? "bg-og-surface-3 text-og-fg shadow-og-sm"
+                    : "text-og-fg-subtle hover:text-og-fg-muted",
+                )}
+              >
+                {w}
+              </button>
+            ))}
+          </div>
         </div>
       </div>
 

package/src/components/machines-dashboard.tsx

@@ -20,7 +20,7 @@ export type MachinesDashboardProps = {
   onOpenDetail?: ((machine: MachineView) => void) | undefined;
   /** Shared clock so freshness/relative times render consistently across cards. */
   now?: number | undefined;
-  /** Open the enrollment flow (the "Enroll a machine" CTA). */
+  /** Open the connection flow (the "Connect a machine" CTA). */
   onEnroll?: (() => void) | undefined;
   onRefresh?: (() => void) | undefined;
   className?: string | undefined;
@@ -38,7 +38,8 @@ function EmptyState({ onEnroll }: { onEnroll?: (() => void) | undefined }) {
       <div className="space-y-1">
         <p className="text-og-base font-medium text-og-fg">No machines yet</p>
         <p className="max-w-xs text-og-sm text-og-fg-muted">
-          Enroll your own computer to run the agent on it — your files, your terminal, your desktop.
+          Connect your own computer to run the agent on it — your files, your terminal, your
+          desktop.
         </p>
       </div>
       {onEnroll ? (
@@ -49,7 +50,7 @@ function EmptyState({ onEnroll }: { onEnroll?: (() => void) | undefined }) {
           className="inline-flex items-center gap-1.5 rounded-og-sm bg-og-accent px-3 py-1.5 text-og-sm font-medium text-og-accent-fg transition-colors hover:bg-og-accent-strong pointer-coarse:min-h-11"
         >
           <PlusIcon className="size-3.5" aria-hidden />
-          Enroll a machine
+          Connect a machine
         </button>
       ) : null}
     </div>
@@ -93,7 +94,7 @@ function Header({
             className="inline-flex items-center gap-1.5 rounded-og-sm border border-og-border px-2.5 py-1 text-og-sm font-medium text-og-fg-muted transition-colors hover:border-og-border-strong hover:text-og-fg pointer-coarse:min-h-11"
           >
             <PlusIcon className="size-3.5" aria-hidden />
-            Enroll machine
+            Connect a machine
           </button>
         ) : null}
       </div>
@@ -102,10 +103,10 @@ function Header({
 }
 
 /**
- * The workspace Machines dashboard: the fleet of selfhosted enrollments + the
+ * The workspace Machines dashboard: the fleet of Connected Machines + the
  * session's managed sandbox, each with its connection-status pill, state badges,
  * latest metrics, and an attach/swap affordance. Renders the empty state (no
- * machines → enroll CTA), a load error, and the populated grid. The component
+ * machines → connect CTA), a load error, and the populated grid. The component
  * is purely presentational — feed it `MachinesResponse` data via `useMachines`.
  */
 export function MachinesDashboard({

package/src/components/message-timeline.tsx

@@ -68,6 +68,7 @@ import {
   type NoticeItem,
   type TimelineGroup,
   type TimelineItem,
+  type RetainedScreenshotLoader,
   type ToolRegistry,
   type TurnSummaryOptions,
   type UserMessageItem,
@@ -123,6 +124,12 @@ export type MessageTimelineProps = {
    * a Reconnect button without a handler to run it.
    */
   onReconnect?: ((item: AuthNeededItem) => void | Promise<void>) | undefined;
+  /**
+   * Decide which durable authentication notices this timeline presents.
+   * Defaults to showing every notice. Embedded hosts can suppress notices for
+   * credentials they manage elsewhere without discarding the underlying event.
+   */
+  shouldRenderAuthNeeded?: ((item: AuthNeededItem) => boolean) | undefined;
   /**
    * Resolve a provider domain (from a reconnect card) to a logo URL the host
    * serves itself — the app maps it through its catalog + `catalogAssetUrl`.
@@ -137,6 +144,8 @@ export type MessageTimelineProps = {
    * `createDefaultToolRegistry({ entries })` to add custom tool renderers.
    */
   toolRegistry?: ToolRegistry | undefined;
+  /** Resolve opaque retained screenshot receipts through the authenticated host SDK. */
+  loadRetainedScreenshot?: RetainedScreenshotLoader | undefined;
   /**
    * Display name of the session's active compute target (Connected Machine or
    * cloud sandbox). When set, exec_command collapsed previews prefix `on {label}`.
@@ -167,6 +176,8 @@ export type MessageTimelineProps = {
    * scrolls the in-memory window.
    */
   onJumpToLatest?: (() => void | Promise<void>) | undefined;
+  /** Host-owned content appended after timeline groups, such as startup progress. */
+  trailingState?: ReactNode | undefined;
   emptyState?: ReactNode | undefined;
   className?: string | undefined;
 };
@@ -277,8 +288,10 @@ export function MessageTimeline({
   onOpenSession,
   onMemoryClick,
   onReconnect,
+  shouldRenderAuthNeeded,
   resolveProviderLogo,
   toolRegistry = defaultToolRegistry,
+  loadRetainedScreenshot,
   computeLabel = null,
   turnSummary,
   autoFollow = true,
@@ -291,10 +304,17 @@ export function MessageTimeline({
   loadingNewer = false,
   onLoadNewer,
   onJumpToLatest,
+  trailingState,
   emptyState,
   className,
 }: MessageTimelineProps) {
-  const resolvedItems = useMemo(() => items ?? buildTimeline(events ?? []), [items, events]);
+  const resolvedItems = useMemo(() => {
+    const projected = items ?? buildTimeline(events ?? []);
+    if (!shouldRenderAuthNeeded) {
+      return projected;
+    }
+    return projected.filter((item) => item.kind !== "auth-needed" || shouldRenderAuthNeeded(item));
+  }, [items, events, shouldRenderAuthNeeded]);
   const allGroups = useMemo(() => groupTimeline(resolvedItems), [resolvedItems]);
   const groups = useStableTimelineGroupKeys(allGroups);
   const scrollRef = useRef<HTMLDivElement | null>(null);
@@ -1278,7 +1298,7 @@ export function MessageTimeline({
                     className={cn(
                       // tabIndex=-1 is programmatic only — never paint a focus ring on
                       // the whole scroller (click + Shift used to flash a blue outline).
-                      "min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 py-6 sm:px-6 outline-none",
+                      "min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 py-6 sm:px-6 outline-hidden",
                       autoFollow && pinned && !hasNewer
                         ? "[overflow-anchor:none]"
                         : "[overflow-anchor:auto]",
@@ -1325,6 +1345,7 @@ export function MessageTimeline({
                                 onReconnect,
                                 resolveProviderLogo,
                                 toolRegistry,
+                                loadRetainedScreenshot,
                                 turnSummary,
                               ]}
                             >
@@ -1337,6 +1358,7 @@ export function MessageTimeline({
                                   onReconnect={onReconnect}
                                   resolveProviderLogo={resolveProviderLogo}
                                   toolRegistry={toolRegistry}
+                                  loadRetainedScreenshot={loadRetainedScreenshot}
                                   turnSummary={turnSummary}
                                   foldLiveCluster={isAgentProgress(next)}
                                   trailingAgentText={trailingAgentTextAfterTurn(group, next)}
@@ -1349,6 +1371,9 @@ export function MessageTimeline({
                           </div>
                         );
                       })}
+                      {groups.length > 0 && trailingState ? (
+                        <div data-og-timeline-trailing-state="">{trailingState}</div>
+                      ) : null}
                       {hasNewer ? (
                         <div
                           ref={bottomSentinelRef}
@@ -1502,7 +1527,7 @@ export function MessageTimeline({
                           }
                         }}
                         className={cn(
-                          "absolute bottom-4 left-1/2 -translate-x-1/2",
+                          "absolute inset-x-0 bottom-4 mx-auto w-fit",
                           "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",
@@ -1677,6 +1702,7 @@ const TimelineGroupView = memo(function TimelineGroupView({
   onReconnect,
   resolveProviderLogo,
   toolRegistry,
+  loadRetainedScreenshot,
   turnSummary,
   insideTurn = false,
   nestClusterChips = false,
@@ -1693,6 +1719,7 @@ const TimelineGroupView = memo(function TimelineGroupView({
   onReconnect?: ((item: AuthNeededItem) => void | Promise<void>) | undefined;
   resolveProviderLogo?: ((providerDomain: string) => string | null | undefined) | undefined;
   toolRegistry: ToolRegistry;
+  loadRetainedScreenshot?: RetainedScreenshotLoader | undefined;
   turnSummary?: TurnSummaryOptions | undefined;
   /** A completed cluster of a still-RUNNING turn (not the live tail) folds
       behind a neutral chip — the one place activity without an outcome still
@@ -1766,6 +1793,7 @@ const TimelineGroupView = memo(function TimelineGroupView({
               onOpenSession={onOpenSession}
               onMemoryClick={onMemoryClick}
               toolRegistry={toolRegistry}
+              loadRetainedScreenshot={loadRetainedScreenshot}
               bare
             />
           );
@@ -1787,6 +1815,7 @@ const TimelineGroupView = memo(function TimelineGroupView({
               onOpenSession={onOpenSession}
               onMemoryClick={onMemoryClick}
               toolRegistry={toolRegistry}
+              loadRetainedScreenshot={loadRetainedScreenshot}
               bare
             />
           </TurnSummary>
@@ -1812,6 +1841,7 @@ const TimelineGroupView = memo(function TimelineGroupView({
                 onOpenSession={onOpenSession}
                 onMemoryClick={onMemoryClick}
                 toolRegistry={toolRegistry}
+                loadRetainedScreenshot={loadRetainedScreenshot}
                 bare
               />
             </TurnRailFrame>
@@ -1838,6 +1868,7 @@ const TimelineGroupView = memo(function TimelineGroupView({
               onReconnect,
               resolveProviderLogo,
               toolRegistry,
+              loadRetainedScreenshot,
               turnSummary,
             ]}
           >
@@ -1849,6 +1880,7 @@ const TimelineGroupView = memo(function TimelineGroupView({
               onReconnect={onReconnect}
               resolveProviderLogo={resolveProviderLogo}
               toolRegistry={toolRegistry}
+              loadRetainedScreenshot={loadRetainedScreenshot}
               turnSummary={turnSummary}
               insideTurn
               nestClusterChips={nestClusters}
@@ -2184,12 +2216,12 @@ function CompactionRow({ item }: { item: ContextCompactionItem }) {
       : null;
   const title =
     item.phase === "started"
-      ? "Compacting conversation memory…"
+      ? "Compacting conversation history…"
       : item.phase === "compacted"
         ? before && after
-          ? `Conversation memory compacted · ~${before} → ~${after} tokens`
-          : "Conversation memory compacted"
-        : "Couldn’t compact conversation memory";
+          ? `Conversation history compacted · ~${before} → ~${after} estimated history tokens`
+          : "Conversation history compacted"
+        : "Couldn’t compact conversation history";
   const subtitle =
     item.phase === "compacted"
       ? "Chat history above is unchanged"
@@ -2247,7 +2279,7 @@ function MessageFooterTime({ occurredAt }: { occurredAt: string }) {
       className={cn(
         "shrink-0 tabular-nums text-og-xs text-og-fg-subtle",
         "opacity-0 transition-opacity duration-150",
-        "group-hover/copy:opacity-100 group-focus-within/copy:opacity-100 pointer-coarse:opacity-70",
+        "group-hover/copy:opacity-100 group-focus-within/copy:opacity-100 pointer-coarse:opacity-100",
       )}
     >
       {formatClockTime(occurredAt)}
@@ -2428,7 +2460,7 @@ function WorkerCompletionRow({
               onClick={() => onOpenSession(item.childSessionId)}
               className={cn(
                 "-my-0.5 -mr-1 inline-flex shrink-0 items-center gap-1 rounded-og-sm px-2 py-1 text-og-sm font-medium text-og-fg-muted pointer-coarse:py-2",
-                "outline-none transition-colors duration-150 hover:bg-og-surface-2 hover:text-og-fg",
+                "outline-hidden transition-colors duration-150 hover:bg-og-surface-2 hover:text-og-fg",
                 "focus-visible:ring-2 focus-visible:ring-og-accent",
               )}
             >
@@ -2444,7 +2476,7 @@ function WorkerCompletionRow({
                 type="button"
                 className={cn(
                   "group/wc -mx-1 inline-flex w-fit items-center gap-1 rounded-og-sm px-1 py-0.5 text-og-xs font-medium text-og-fg-subtle",
-                  "outline-none transition-colors duration-150 hover:text-og-fg-muted focus-visible:ring-2 focus-visible:ring-og-accent",
+                  "outline-hidden transition-colors duration-150 hover:text-og-fg-muted focus-visible:ring-2 focus-visible:ring-og-accent",
                 )}
               >
                 <ChevronRightIcon className="size-3 transition-transform duration-150 ease-og-in-out group-data-[state=open]/wc:rotate-90" />
@@ -2693,7 +2725,8 @@ function AuthNeededRow({
   const enter = useEntranceAnimation();
   const [busy, setBusy] = useState(false);
   const [failed, setFailed] = useState(false);
-  const provider = providerLabel(item.providerDomain);
+  const provider =
+    item.serverId === "codex_apps" ? "Codex Apps" : providerLabel(item.providerDomain);
   const unavailable =
     item.reason === "personal_authority_unavailable" ||
     item.reason === "unsupported_auth" ||

package/src/components/model-picker.tsx

@@ -100,10 +100,10 @@ export function ModelPicker({
         disabled={disabled === true}
         aria-label={label}
         className={cn(
-          "h-8 max-w-[180px] cursor-pointer appearance-none truncate rounded-og-md bg-transparent",
+          "og-model-picker-native h-8 max-w-[180px] cursor-pointer appearance-none truncate rounded-og-md bg-transparent pointer-coarse:h-11",
           "py-0 pl-2 pr-6 text-[13px] text-og-fg-muted",
           "transition-colors duration-150 hover:bg-og-surface-2 hover:text-og-fg",
-          "focus:outline-none focus-visible:outline-none",
+          "focus:outline-hidden focus-visible:outline-hidden",
           "disabled:cursor-not-allowed disabled:opacity-50",
         )}
       >

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

@@ -12,14 +12,13 @@ import { DropdownMenu } from "radix-ui";
 import {
   useEffect,
   useMemo,
-  useRef,
   useState,
   type CSSProperties,
   type ReactNode,
   type SVGProps,
 } from "react";
 import { cn } from "../lib/cn";
-import { usePortalTokenStyle } from "../lib/use-portal-token-style";
+import { usePortalTokenSource, usePortalTokenStyle } from "../lib/use-portal-token-style";
 import {
   coerceReasoningEffortForModel,
   effortOptionsForModel,
@@ -243,7 +242,7 @@ export function PickerNavRow(props: {
       onClick={props.onClick}
       data-testid={props.testId}
       className={cn(
-        "flex w-full cursor-pointer items-center gap-2 rounded-og-sm px-[var(--og-model-picker-row-padding-x)] py-[var(--og-model-picker-row-padding-y)] text-left text-og-fg outline-none transition-colors hover:bg-og-surface-2 focus-visible:ring-2 focus-visible:ring-og-accent/40",
+        "flex w-full cursor-pointer items-center gap-2 rounded-og-sm px-[var(--og-model-picker-row-padding-x)] py-[var(--og-model-picker-row-padding-y)] text-left text-og-fg outline-hidden transition-colors hover:bg-og-surface-2 focus-visible:ring-2 focus-visible:ring-og-accent/40",
         props.disabled && "cursor-not-allowed opacity-50",
       )}
     >
@@ -278,7 +277,7 @@ export function PickerBackHeader(props: {
         type="button"
         onClick={props.onBack}
         data-testid="model-picker-back"
-        className="flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 rounded-og-sm px-1.5 py-1.5 text-left text-og-fg outline-none transition-colors hover:bg-og-surface-2 focus-visible:ring-2 focus-visible:ring-og-accent/40"
+        className="flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 rounded-og-sm px-1.5 py-1.5 text-left text-og-fg outline-hidden transition-colors hover:bg-og-surface-2 focus-visible:ring-2 focus-visible:ring-og-accent/40"
       >
         <ChevronLeftIcon className="size-3.5 shrink-0 text-og-fg-subtle" />
         {props.icon}
@@ -455,7 +454,7 @@ export function ModelPolicyPickerMenu(
                   );
                 }}
                 className={cn(
-                  "flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-og-sm text-og-fg-subtle outline-none transition-colors hover:bg-og-surface-2 focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:cursor-not-allowed disabled:opacity-50",
+                  "flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-og-sm text-og-fg-subtle outline-hidden transition-colors hover:bg-og-surface-2 focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:cursor-not-allowed disabled:opacity-50",
                   activeModel && props.latencyMode === "fast" && "text-og-fg",
                 )}
               >
@@ -487,7 +486,7 @@ export function ModelPolicyPickerMenu(
                 disabled={!focusModel.selectable}
                 onClick={() => selectEffort(focusModel, effort)}
                 className={cn(
-                  "flex h-[var(--og-model-picker-effort-height)] w-full cursor-pointer items-center rounded-og-sm px-[var(--og-model-picker-row-padding-x)] text-left text-og-menu text-og-fg outline-none transition-colors hover:bg-og-surface-2 focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:cursor-not-allowed disabled:opacity-50",
+                  "flex h-[var(--og-model-picker-effort-height)] w-full cursor-pointer items-center rounded-og-sm px-[var(--og-model-picker-row-padding-x)] text-left text-og-menu text-og-fg outline-hidden transition-colors hover:bg-og-surface-2 focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:cursor-not-allowed disabled:opacity-50",
                   selected && "bg-og-surface-2",
                 )}
               >
@@ -542,8 +541,8 @@ export function ModelPolicyPicker(props: ModelPolicyPickerProps) {
     if (props.open === undefined) setUncontrolledOpen(next);
     props.onOpenChange?.(next);
   };
-  const triggerRef = useRef<HTMLButtonElement | null>(null);
-  const portalStyle = usePortalTokenStyle(triggerRef);
+  const trigger = usePortalTokenSource<HTMLButtonElement>();
+  const portalStyle = usePortalTokenStyle(trigger.source);
   const messages = useMemo(
     () => ({ ...defaultModelPolicyPickerMessages, ...props.messages }),
     [props.messages],
@@ -556,7 +555,7 @@ export function ModelPolicyPicker(props: ModelPolicyPickerProps) {
     return (
       <span
         className={cn(
-          "inline-flex h-8 w-40 shrink-0 animate-pulse rounded-full bg-og-surface-2",
+          "og-root inline-flex h-8 w-40 shrink-0 animate-pulse rounded-full bg-og-surface-2",
           props.className,
         )}
         aria-label={messages.loading}
@@ -568,12 +567,12 @@ export function ModelPolicyPicker(props: ModelPolicyPickerProps) {
     <DropdownMenu.Root open={open} onOpenChange={setOpen}>
       <DropdownMenu.Trigger asChild>
         <button
-          ref={triggerRef}
+          ref={trigger.ref}
           type="button"
           disabled={props.disabled}
           aria-label={messages.label}
           className={cn(
-            "og-root 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-none 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-[var(--og-model-picker-trigger-height-mobile)] 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 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",
             props.className,
           )}
         >
@@ -584,13 +583,15 @@ export function ModelPolicyPicker(props: ModelPolicyPickerProps) {
             }
             className="text-og-fg"
           />
-          <span className="min-w-0 truncate font-medium text-og-fg max-sm:hidden">
+          <span className="og-model-policy-label-full min-w-0 truncate font-medium text-og-fg max-sm:hidden">
             {selected?.label ?? props.model}
           </span>
-          <span className="min-w-0 truncate font-medium text-og-fg sm:hidden">
+          <span className="og-model-policy-label-short min-w-0 truncate font-medium text-og-fg sm:hidden">
             {selected?.shortLabel ?? selected?.label ?? props.model}
           </span>
-          <span className="max-sm:hidden">{labelReasoningEffort(props.effort)}</span>
+          <span className="og-model-policy-effort max-sm:hidden">
+            {labelReasoningEffort(props.effort)}
+          </span>
           {props.latencyMode === "fast" ? (
             <ZapIcon
               className="size-3.5 shrink-0 fill-current stroke-current text-og-fg"
@@ -609,7 +610,7 @@ export function ModelPolicyPicker(props: ModelPolicyPickerProps) {
           collisionPadding={12}
           onCloseAutoFocus={(event) => event.preventDefault()}
           className={cn(
-            "og-root z-50 flex max-h-[min(20rem,var(--radix-dropdown-menu-content-available-height))] w-[var(--og-model-picker-menu-width)] max-w-[calc(100vw-16px)] flex-col overflow-hidden rounded-og-lg border border-og-border bg-og-surface-1 p-[var(--og-model-picker-menu-padding)] text-og-fg shadow-og-lg",
+            "og-root og-model-policy-menu z-50 flex max-h-[min(20rem,var(--radix-dropdown-menu-content-available-height))] w-[var(--og-model-picker-menu-width)] max-w-[calc(100vw-16px)] flex-col overflow-hidden rounded-og-lg border border-og-border bg-og-surface-1 p-[var(--og-model-picker-menu-padding)] text-og-fg shadow-og-lg",
             props.contentClassName,
           )}
           style={{ ...portalStyle, ...props.contentStyle }}

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

@@ -32,7 +32,6 @@ import {
   useCallback,
   useId,
   useMemo,
-  useRef,
   useState,
   type KeyboardEvent as ReactKeyboardEvent,
 } from "react";
@@ -40,7 +39,11 @@ import {
 import { DropdownMenu } from "radix-ui";
 import type { ComposerState } from "../hooks/use-composer";
 import type { QueueMutationKind, UseTurnQueueResult } from "../hooks/use-turn-queue";
-import { type PortalTokenStyle, usePortalTokenStyle } from "../lib/use-portal-token-style";
+import {
+  type PortalTokenStyle,
+  usePortalTokenSource,
+  usePortalTokenStyle,
+} from "../lib/use-portal-token-style";
 import { requestQueueDraftEdit } from "./queue-draft-policy";
 import { QueueErrorAlert, QueueStoppingStatus } from "./queue-surface-state";
 
@@ -80,8 +83,9 @@ export function QueueSurface({
   const [replaceDraftFor, setReplaceDraftFor] = useState<string | null>(null);
   const [announcement, setAnnouncement] = useState("");
   const [draggedTurnId, setDraggedTurnId] = useState<string | null>(null);
-  const surfaceRef = useRef<HTMLDivElement | null>(null);
-  const portalTokenStyle = usePortalTokenStyle(surfaceRef);
+  const surface = usePortalTokenSource<HTMLDivElement>();
+  const surfaceRef = surface.currentRef;
+  const portalTokenStyle = usePortalTokenStyle(surface.source);
   const [keyboardDrag, setKeyboardDrag] = useState<{
     turnId: string;
     projectedIndex: number;
@@ -129,7 +133,7 @@ export function QueueSurface({
       );
       if (moved) focusQueueTurn(surfaceRef.current, turnId);
     },
-    [queue],
+    [queue, surfaceRef],
   );
 
   const onDragEnd = useCallback(
@@ -245,7 +249,7 @@ export function QueueSurface({
 
   return (
     <div
-      ref={surfaceRef}
+      ref={surface.ref}
       className="og-root mx-auto mb-2 w-full max-w-3xl shrink-0 px-4 sm:px-6"
       data-testid="queue-surface"
     >
@@ -253,7 +257,7 @@ export function QueueSurface({
         {queue.stoppingPreviousAttempt ? <QueueStoppingStatus queue={queue} dividerAfter /> : null}
         <button
           type="button"
-          className="flex w-full min-w-0 flex-wrap items-center gap-2 px-3 py-2 text-left outline-none transition-colors hover:bg-surface-2/60 focus-visible:bg-surface-2/60 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/40 pointer-coarse:min-h-[44px]"
+          className="flex w-full min-w-0 flex-wrap items-center gap-2 px-3 py-2 text-left outline-hidden transition-colors hover:bg-surface-2/60 focus-visible:bg-surface-2/60 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/40 pointer-coarse:min-h-[44px]"
           onClick={() => setOpen((value) => !value)}
           aria-description={!open && totalCount > 0 ? collapsedPreview.summary : undefined}
           aria-expanded={open}
@@ -800,7 +804,7 @@ function QueuePrompt({
         aria-controls={fullContentId}
         aria-expanded={expanded}
         aria-label={`${expanded ? "Hide" : "Show"} full content for queued prompt ${index + 1}`}
-        className="mt-1 inline-flex min-h-7 min-w-0 max-w-full items-center gap-1 whitespace-normal rounded-md text-left text-og-xs font-medium text-fg outline-none focus-visible:ring-2 focus-visible:ring-ring/40 pointer-coarse:min-h-[44px]"
+        className="mt-1 inline-flex min-h-7 min-w-0 max-w-full items-center gap-1 whitespace-normal rounded-md text-left text-og-xs font-medium text-fg outline-hidden focus-visible:ring-2 focus-visible:ring-ring/40 pointer-coarse:min-h-[44px]"
         data-testid={`queue-prompt-disclosure-${index + 1}`}
         onClick={() => {
           const next = !expanded;
@@ -963,7 +967,7 @@ function SortableQueueRow({
             onClick={onSteer}
             aria-label={`Steer queued prompt ${index + 1}`}
             title="Steer — interrupt the current turn and send this message now"
-            className="inline-flex h-7 shrink-0 items-center justify-center gap-1 rounded-md px-2 text-og-control font-medium text-fg outline-none transition-[background-color] hover:bg-surface-2 focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50 pointer-coarse:min-h-[44px] pointer-coarse:min-w-[44px]"
+            className="inline-flex h-7 shrink-0 items-center justify-center gap-1 rounded-md px-2 text-og-control font-medium text-fg outline-hidden transition-[background-color] hover:bg-surface-2 focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50 pointer-coarse:min-h-[44px] pointer-coarse:min-w-[44px]"
           >
             {pending === "steer" ? (
               <Loader2Icon className="size-3.5 animate-spin" />
@@ -978,7 +982,7 @@ function SortableQueueRow({
             onClick={onDelete}
             aria-label={`Delete queued prompt ${index + 1}`}
             title="Delete this queued prompt"
-            className="inline-flex size-7 shrink-0 items-center justify-center rounded-md outline-none transition-colors hover:bg-surface-2 hover:text-status-failed focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50 pointer-coarse:size-[44px]"
+            className="inline-flex size-7 shrink-0 items-center justify-center rounded-md outline-hidden transition-colors hover:bg-surface-2 hover:text-status-failed focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50 pointer-coarse:size-[44px]"
           >
             {pending === "delete" ? (
               <Loader2Icon className="size-3.5 animate-spin" />
@@ -992,7 +996,7 @@ function SortableQueueRow({
                 type="button"
                 disabled={pending !== null}
                 aria-label={`More actions for queued prompt ${index + 1}`}
-                className="inline-flex size-7 shrink-0 items-center justify-center rounded-md outline-none transition-colors hover:bg-surface-2 focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50 pointer-coarse:size-[44px]"
+                className="inline-flex size-7 shrink-0 items-center justify-center rounded-md outline-hidden transition-colors hover:bg-surface-2 focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50 pointer-coarse:size-[44px]"
               >
                 {pending && pending !== "steer" && pending !== "delete" ? (
                   <Loader2Icon className="size-3.5 animate-spin" />
@@ -1012,7 +1016,7 @@ function SortableQueueRow({
                 {onEdit ? (
                   <>
                     <DropdownMenu.Item
-                      className="flex min-w-0 cursor-default items-center gap-2 whitespace-normal break-words rounded-sm px-2 py-1.5 outline-none focus:bg-surface-2 pointer-coarse:min-h-[44px]"
+                      className="flex min-w-0 cursor-default items-center gap-2 whitespace-normal break-words rounded-sm px-2 py-1.5 outline-hidden focus:bg-surface-2 pointer-coarse:min-h-[44px]"
                       onSelect={onEdit}
                     >
                       <PencilIcon className="size-3.5" /> Edit in composer
@@ -1021,28 +1025,28 @@ function SortableQueueRow({
                   </>
                 ) : null}
                 <DropdownMenu.Item
-                  className="flex min-w-0 cursor-default items-center gap-2 whitespace-normal break-words rounded-sm px-2 py-1.5 outline-none focus:bg-surface-2 data-[disabled]:opacity-50 pointer-coarse:min-h-[44px]"
+                  className="flex min-w-0 cursor-default items-center gap-2 whitespace-normal break-words rounded-sm px-2 py-1.5 outline-hidden focus:bg-surface-2 data-[disabled]:opacity-50 pointer-coarse:min-h-[44px]"
                   disabled={index === 0}
                   onSelect={() => onMove(0)}
                 >
                   <ArrowUpToLineIcon className="size-3.5" /> Move to top
                 </DropdownMenu.Item>
                 <DropdownMenu.Item
-                  className="flex min-w-0 cursor-default items-center gap-2 whitespace-normal break-words rounded-sm px-2 py-1.5 outline-none focus:bg-surface-2 data-[disabled]:opacity-50 pointer-coarse:min-h-[44px]"
+                  className="flex min-w-0 cursor-default items-center gap-2 whitespace-normal break-words rounded-sm px-2 py-1.5 outline-hidden focus:bg-surface-2 data-[disabled]:opacity-50 pointer-coarse:min-h-[44px]"
                   disabled={index === 0}
                   onSelect={() => onMove(index - 1)}
                 >
                   Move up
                 </DropdownMenu.Item>
                 <DropdownMenu.Item
-                  className="flex min-w-0 cursor-default items-center gap-2 whitespace-normal break-words rounded-sm px-2 py-1.5 outline-none focus:bg-surface-2 data-[disabled]:opacity-50 pointer-coarse:min-h-[44px]"
+                  className="flex min-w-0 cursor-default items-center gap-2 whitespace-normal break-words rounded-sm px-2 py-1.5 outline-hidden focus:bg-surface-2 data-[disabled]:opacity-50 pointer-coarse:min-h-[44px]"
                   disabled={index === count - 1}
                   onSelect={() => onMove(index + 1)}
                 >
                   Move down
                 </DropdownMenu.Item>
                 <DropdownMenu.Item
-                  className="flex min-w-0 cursor-default items-center gap-2 whitespace-normal break-words rounded-sm px-2 py-1.5 outline-none focus:bg-surface-2 data-[disabled]:opacity-50 pointer-coarse:min-h-[44px]"
+                  className="flex min-w-0 cursor-default items-center gap-2 whitespace-normal break-words rounded-sm px-2 py-1.5 outline-hidden focus:bg-surface-2 data-[disabled]:opacity-50 pointer-coarse:min-h-[44px]"
                   disabled={index === count - 1}
                   onSelect={() => onMove(count - 1)}
                 >

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

@@ -70,7 +70,7 @@ export function QueueErrorAlert({
           role="region"
           aria-label="Queue error details"
           tabIndex={0}
-          className="max-h-[min(5rem,20dvh)] min-w-0 max-w-full flex-[1_1_5rem] overflow-auto overscroll-contain whitespace-pre-wrap rounded-sm outline-none [overflow-wrap:anywhere] [unicode-bidi:plaintext] focus-visible:ring-2 focus-visible:ring-ring/40"
+          className="max-h-[min(5rem,20dvh)] min-w-0 max-w-full flex-[1_1_5rem] overflow-auto overscroll-contain whitespace-pre-wrap rounded-sm outline-hidden [overflow-wrap:anywhere] [unicode-bidi:plaintext] focus-visible:ring-2 focus-visible:ring-ring/40"
           data-testid="queue-error-message"
           dir="auto"
         >
@@ -84,7 +84,7 @@ export function QueueErrorAlert({
           }}
           aria-label="Dismiss queue error and retry"
           title="Retry loading the queue"
-          className="ms-auto inline-flex size-7 shrink-0 items-center justify-center self-start rounded-md outline-none transition-colors hover:bg-surface-3 focus-visible:ring-2 focus-visible:ring-ring/40 motion-reduce:transition-none pointer-coarse:size-[44px]"
+          className="ms-auto inline-flex size-7 shrink-0 items-center justify-center self-start rounded-md outline-hidden transition-colors hover:bg-surface-3 focus-visible:ring-2 focus-visible:ring-ring/40 motion-reduce:transition-none pointer-coarse:size-[44px]"
         >
           <RotateCwIcon className="size-3.5" />
         </button>