@opengeni/react 0.46.1 → 0.52.1

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 pointer-coarse:h-11",
+          "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-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 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

@@ -16,7 +16,7 @@ import {
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import type { SessionPendingInputPreview, SessionTurn } from "@opengeni/sdk";
+import type { SessionPendingInputPreview, SessionTurn, TimelineAnnotation } from "@opengeni/sdk";
 import {
   ArrowDownToLineIcon,
   ArrowUpToLineIcon,
@@ -32,7 +32,6 @@ import {
   useCallback,
   useId,
   useMemo,
-  useRef,
   useState,
   type KeyboardEvent as ReactKeyboardEvent,
 } from "react";
@@ -40,9 +39,14 @@ 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";
+import { TimelineAnnotationsChip } from "./timeline-annotations";
 
 /** The sole pending-input surface: compact above Goal, Agents, and composer. */
 type QueueSurfaceCommonProps = {
@@ -80,8 +84,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;
@@ -95,14 +100,15 @@ export function QueueSurface({
     (input) => !attachedInputIds.includes(input.id),
   );
   const canEditInComposer = queueComposerCheckoutEnabled(composer, readOnly);
-  const collapsedPreview = useMemo(
-    () =>
-      queuePromptPreview(
-        queue.queue[0]?.prompt ?? queue.pendingInputs[0]?.summary ?? "",
-        QUEUE_COLLAPSED_PREVIEW_CHARACTERS,
-      ),
-    [queue.pendingInputs, queue.queue],
-  );
+  const collapsedPreview = useMemo(() => {
+    const firstTurn = queue.queue[0];
+    return firstTurn
+      ? queueTurnPreview(firstTurn, QUEUE_COLLAPSED_PREVIEW_CHARACTERS)
+      : queuePromptPreview(
+          queue.pendingInputs[0]?.summary ?? "",
+          QUEUE_COLLAPSED_PREVIEW_CHARACTERS,
+        );
+  }, [queue.pendingInputs, queue.queue]);
   const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }));
 
   const displayedQueue = useMemo(() => {
@@ -129,7 +135,7 @@ export function QueueSurface({
       );
       if (moved) focusQueueTurn(surfaceRef.current, turnId);
     },
-    [queue],
+    [queue, surfaceRef],
   );
 
   const onDragEnd = useCallback(
@@ -245,7 +251,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 +259,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}
@@ -405,8 +411,8 @@ export function QueueSurface({
                     dir="auto"
                   >
                     {
-                      queuePromptPreview(
-                        queue.queue.find((turn) => turn.id === draggedTurnId)?.prompt ?? "",
+                      queueTurnPreview(
+                        queue.queue.find((turn) => turn.id === draggedTurnId),
                         QUEUE_ROW_PREVIEW_CHARACTERS,
                       ).summary
                     }
@@ -486,6 +492,29 @@ type QueuePromptPreview = {
   isFallback: boolean;
 };
 
+function annotationOnlyQueuePreview(count: number): QueuePromptPreview {
+  const summary = `${count} timeline ${count === 1 ? "annotation" : "annotations"}`;
+  return {
+    summary,
+    collapsedVisual: summary,
+    visibleStart: summary,
+    visibleIdentity: null,
+    visibleIdentityLabel: null,
+    isFallback: false,
+  };
+}
+
+function queueTurnPreview(
+  turn: SessionTurn | undefined,
+  maxCharacters: number,
+): QueuePromptPreview {
+  if (!turn) return queuePromptPreview("", maxCharacters);
+  const annotations = turn.annotations ?? [];
+  return turn.prompt.length === 0 && annotations.length > 0
+    ? annotationOnlyQueuePreview(annotations.length)
+    : queuePromptPreview(turn.prompt, maxCharacters);
+}
+
 /**
  * Build a bounded head/tail summary of an arbitrary queued prompt. Sampling
  * both ends distinguishes prompts with equal long prefixes. Each sampled edge
@@ -748,73 +777,94 @@ function isLowSurrogate(codeUnit: number): boolean {
 
 function QueuePrompt({
   prompt,
+  annotations,
   index,
   onDisclosureChange,
 }: {
   prompt: string;
+  annotations: readonly TimelineAnnotation[];
   index: number;
   onDisclosureChange: (expanded: boolean) => void;
 }) {
   const [expanded, setExpanded] = useState(false);
   const fullContentId = useId();
-  const preview = useMemo(() => queuePromptPreview(prompt, QUEUE_ROW_PREVIEW_CHARACTERS), [prompt]);
+  const preview = useMemo(
+    () =>
+      prompt.length === 0 && annotations.length > 0
+        ? annotationOnlyQueuePreview(annotations.length)
+        : queuePromptPreview(prompt, QUEUE_ROW_PREVIEW_CHARACTERS),
+    [annotations.length, prompt],
+  );
 
   return (
     <div className="w-full min-w-0 max-w-full">
-      <div
-        aria-label={`Queued prompt ${index + 1} summary: ${preview.summary}`}
-        className="max-w-full overflow-hidden text-og-control leading-5 text-fg"
-        data-testid={`queue-prompt-preview-${index + 1}`}
-        dir="auto"
-        role="note"
-      >
-        <span aria-hidden="true" className="flex min-w-0 max-w-full items-baseline gap-2 sm:block">
+      {prompt ? (
+        <div
+          aria-label={`Queued prompt ${index + 1} summary: ${preview.summary}`}
+          className="max-w-full overflow-hidden text-og-control leading-5 text-fg"
+          data-testid={`queue-prompt-preview-${index + 1}`}
+          dir="auto"
+          role="note"
+        >
           <span
-            className={`${preview.isFallback ? "" : "line-clamp-1 sm:line-clamp-2"} min-w-0 flex-1 whitespace-pre-wrap break-all [unicode-bidi:plaintext]`}
-            data-testid={`queue-prompt-start-${index + 1}`}
-            dir="auto"
+            aria-hidden="true"
+            className="flex min-w-0 max-w-full items-baseline gap-2 sm:block"
           >
-            {preview.visibleStart}
-          </span>
-          {preview.visibleIdentity && preview.visibleIdentityLabel ? (
             <span
-              className="flex min-w-0 max-w-[70%] shrink-0 items-center gap-1 text-og-xs leading-4 text-fg-muted sm:mt-0.5 sm:max-w-full"
-              data-testid={`queue-prompt-identity-row-${index + 1}`}
+              className={`${preview.isFallback ? "" : "line-clamp-1 sm:line-clamp-2"} min-w-0 flex-1 whitespace-pre-wrap break-all [unicode-bidi:plaintext]`}
+              data-testid={`queue-prompt-start-${index + 1}`}
+              dir="auto"
             >
-              <span className="shrink-0 font-medium text-fg-subtle">
-                {preview.visibleIdentityLabel}
-              </span>
+              {preview.visibleStart}
+            </span>
+            {preview.visibleIdentity && preview.visibleIdentityLabel ? (
               <span
-                className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap font-mono [unicode-bidi:plaintext]"
-                data-testid={`queue-prompt-identity-${index + 1}`}
-                dir="auto"
+                className="flex min-w-0 max-w-[70%] shrink-0 items-center gap-1 text-og-xs leading-4 text-fg-muted sm:mt-0.5 sm:max-w-full"
+                data-testid={`queue-prompt-identity-row-${index + 1}`}
               >
-                {preview.visibleIdentity}
+                <span className="shrink-0 font-medium text-fg-subtle">
+                  {preview.visibleIdentityLabel}
+                </span>
+                <span
+                  className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap font-mono [unicode-bidi:plaintext]"
+                  data-testid={`queue-prompt-identity-${index + 1}`}
+                  dir="auto"
+                >
+                  {preview.visibleIdentity}
+                </span>
               </span>
-            </span>
-          ) : null}
-        </span>
-      </div>
-      <button
-        type="button"
-        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]"
-        data-testid={`queue-prompt-disclosure-${index + 1}`}
-        onClick={() => {
-          const next = !expanded;
-          setExpanded(next);
-          onDisclosureChange(next);
-        }}
-      >
-        <ChevronDownIcon
-          aria-hidden="true"
-          className={`size-3 shrink-0 transition-transform ${expanded ? "rotate-180" : ""}`}
+            ) : null}
+          </span>
+        </div>
+      ) : null}
+      {annotations.length > 0 ? (
+        <TimelineAnnotationsChip
+          annotations={annotations}
+          className={prompt ? "mt-1" : undefined}
         />
-        {expanded ? "Hide full prompt" : "View full prompt"}
-      </button>
-      {expanded ? (
+      ) : null}
+      {prompt ? (
+        <button
+          type="button"
+          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-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;
+            setExpanded(next);
+            onDisclosureChange(next);
+          }}
+        >
+          <ChevronDownIcon
+            aria-hidden="true"
+            className={`size-3 shrink-0 transition-transform ${expanded ? "rotate-180" : ""}`}
+          />
+          {expanded ? "Hide full prompt" : "View full prompt"}
+        </button>
+      ) : null}
+      {expanded && prompt ? (
         <pre
           id={fullContentId}
           role="region"
@@ -846,7 +896,12 @@ function ReadOnlyQueueRow({
     <li className="flex min-w-0 items-start gap-2 bg-surface px-3 py-2">
       <span className="mt-1 shrink-0 font-mono text-og-xs text-fg-subtle">{index + 1}</span>
       <div className="min-w-0 flex-1">
-        <QueuePrompt prompt={turn.prompt} index={index} onDisclosureChange={onDisclosureChange} />
+        <QueuePrompt
+          prompt={turn.prompt}
+          annotations={turn.annotations ?? []}
+          index={index}
+          onDisclosureChange={onDisclosureChange}
+        />
         {attachedInputs.length > 0 ? (
           <PendingMachineInputs inputs={attachedInputs} attached />
         ) : null}
@@ -937,7 +992,12 @@ function SortableQueueRow({
           {index + 1}
         </span>
         <div className="col-span-full row-start-2 min-w-0 sm:col-span-1 sm:col-start-3 sm:row-start-1">
-          <QueuePrompt prompt={turn.prompt} index={index} onDisclosureChange={onDisclosureChange} />
+          <QueuePrompt
+            prompt={turn.prompt}
+            annotations={turn.annotations ?? []}
+            index={index}
+            onDisclosureChange={onDisclosureChange}
+          />
           {attachedInputs.length > 0 ? (
             <PendingMachineInputs inputs={attachedInputs} attached />
           ) : null}
@@ -963,7 +1023,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 +1038,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 +1052,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 +1072,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 +1081,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>