@opengeni/react 1.0.1 → 1.0.2-canary.37202341988001

package/src/components/pierre-file.tsx

@@ -6,8 +6,14 @@ import {
   Suspense,
   useEffect,
   useState,
+  useSyncExternalStore,
 } from "react";
 import { cn } from "../lib/cn";
+import {
+  loadPierreDiffs,
+  pierreDiffsRevision,
+  subscribePierreDiffs,
+} from "../lib/pierre-diffs-loader";
 
 /** Pierre `File` props subset we drive — the single-file, syntax-highlighted view
  *  (Shiki), the read counterpart of `PatchDiff`. */
@@ -25,7 +31,7 @@ type FileComponent = ComponentType<{
 }>;
 
 export type PierreFileProps = {
-  /** Workspace-relative path (used for the header + language inference). */
+  /** Target path (used for the header + language inference). */
   path: string;
   /** The decoded text contents. */
   contents: string;
@@ -44,7 +50,7 @@ export type PierreFileProps = {
 // Lazy-load `@pierre/diffs/react`'s `File` so Shiki + the worker pool stay off the
 // critical path (and out of an SSR bundle) until a file is actually viewed.
 const LazyFile = lazy(async () => {
-  const mod = (await import("@pierre/diffs/react")) as unknown as { File: FileComponent };
+  const mod = (await loadPierreDiffs()) as { File: FileComponent };
   return { default: mod.File };
 });
 
@@ -65,18 +71,30 @@ export function PierreFile({
   className,
 }: PierreFileProps) {
   const [failed, setFailed] = useState(false);
+  const [ready, setReady] = useState(false);
 
   // Probe the import once so a hard failure (peer missing) shows `fallback`
   // rather than a Suspense boundary that never resolves.
+  const loaderRevision = useSyncExternalStore(
+    subscribePierreDiffs,
+    pierreDiffsRevision,
+    pierreDiffsRevision,
+  );
   useEffect(() => {
     let cancelled = false;
-    void import("@pierre/diffs/react").catch(() => {
-      if (!cancelled) setFailed(true);
-    });
+    setFailed(false);
+    loadPierreDiffs().then(
+      () => {
+        if (!cancelled) setReady(true);
+      },
+      () => {
+        if (!cancelled) setFailed(true);
+      },
+    );
     return () => {
       cancelled = true;
     };
-  }, []);
+  }, [loaderRevision]);
 
   const name = path.split("/").filter(Boolean).pop() ?? path;
 
@@ -108,6 +126,9 @@ export function PierreFile({
     "--diffs-light-bg": "var(--og-color-bg)",
     "--diffs-bg-buffer-override": "var(--og-color-surface-1)",
     "--diffs-bg-separator-override": "var(--og-color-surface-1)",
+    // Pierre's default (fg mixed 65% into bg) falls under 4.5:1 on the lifted
+    // graphite separator; quiet meta text keeps AA on every diff surface.
+    "--diffs-fg-number-override": "var(--og-color-fg-subtle)",
     "--diffs-font-size": "var(--og-code-font-size)",
     "--diffs-line-height": "var(--og-code-line-height)",
   } as CSSProperties;
@@ -117,11 +138,15 @@ export function PierreFile({
       <Suspense fallback={loading ?? <FileSkeleton />}>
         {/* `cacheKey` keys Pierre's worker-pool highlight cache on path+size so a
             re-select of the same file is instant but an edited file re-highlights. */}
-        <LazyFile
-          file={{ name, contents }}
-          options={options}
-          {...(disableWorkerPool !== undefined ? { disableWorkerPool } : {})}
-        />
+        {ready ? (
+          <LazyFile
+            file={{ name, contents }}
+            options={options}
+            {...(disableWorkerPool !== undefined ? { disableWorkerPool } : {})}
+          />
+        ) : (
+          (loading ?? <FileSkeleton />)
+        )}
       </Suspense>
     </div>
   );

package/src/components/preview-loading.tsx

@@ -0,0 +1,154 @@
+import { useEffect, useRef } from "react";
+
+/** Private loading surface: never receives or executes the unfinished fence. */
+export function PreviewLoading() {
+  const ref = useRef<HTMLCanvasElement>(null);
+  useEffect(() => {
+    const canvas = ref.current;
+    if (!canvas) return;
+    let ctx: CanvasRenderingContext2D | null;
+    try {
+      ctx = canvas.getContext("2d");
+    } catch {
+      return; // The CSS grid and status remain when canvas is unavailable.
+    }
+    if (!ctx) return;
+    const context = ctx;
+    const motion = window.matchMedia?.("(prefers-reduced-motion: reduce)");
+    let frame: number | undefined;
+    let time = 2;
+    let last: number | undefined;
+    let disposed = false;
+    // Without visibility observation, keep a static surface rather than doing
+    // unbounded work for previews that may be outside the viewport.
+    let visible = false;
+    const canAnimate = () => !disposed && visible && !document.hidden && motion?.matches === false;
+
+    function draw() {
+      const w = canvas!.clientWidth;
+      const h = canvas!.clientHeight;
+      if (!w || !h || document.hidden || disposed) return;
+      const d = Math.min(window.devicePixelRatio || 1, 2);
+      if (canvas!.width !== Math.round(w * d) || canvas!.height !== Math.round(h * d)) {
+        canvas!.width = Math.round(w * d);
+        canvas!.height = Math.round(h * d);
+      }
+      const style = getComputedStyle(canvas!);
+      const ink = style.getPropertyValue("--_og-preview-ink").trim() || "#9fdccd";
+      const glowColor = style.getPropertyValue("--_og-preview-glow").trim() || "#5fb8a3";
+      context.setTransform(d, 0, 0, d, 0, 0);
+      context.clearRect(0, 0, w, h);
+      const cx = w * (0.5 + 0.13 * Math.sin(time * 0.21));
+      const cy = h * (0.5 + 0.12 * Math.cos(time * 0.27));
+      const glow = context.createRadialGradient(cx, cy, 0, cx, cy, Math.max(w, h) * 0.65);
+      glow.addColorStop(0, glowColor);
+      glow.addColorStop(1, "transparent");
+      context.globalAlpha = 0.09;
+      context.fillStyle = glow;
+      context.fillRect(0, 0, w, h);
+      const rows = Math.ceil(h / 18) + 7;
+      const cols = Math.ceil(w / 18) + 7;
+      const points = Array.from({ length: rows }, (_row, r) =>
+        Array.from({ length: cols }, (_col, c) => {
+          const x = (c - 3) * 18;
+          const y = (r - 3) * 18;
+          const dist = Math.hypot((x - cx) * 0.8, y - cy);
+          const wave = Math.sin(dist * 0.032 - time * 0.95);
+          return {
+            x: x + ((x - cx) / Math.max(dist, 1)) * wave * 4,
+            y: y + ((y - cy) / Math.max(dist, 1)) * wave * 4,
+            l: Math.pow((wave + 1) / 2, 5),
+          };
+        }),
+      );
+      context.strokeStyle = ink;
+      context.fillStyle = ink;
+      context.lineWidth = 0.65;
+      points.forEach((row, r) =>
+        row.forEach((p, c) => {
+          context.globalAlpha = 0.035 + p.l * 0.055;
+          context.beginPath();
+          if (c + 1 < cols) {
+            context.moveTo(p.x, p.y);
+            context.lineTo(row[c + 1]!.x, row[c + 1]!.y);
+          }
+          if (r + 1 < rows) {
+            context.moveTo(p.x, p.y);
+            context.lineTo(points[r + 1]![c]!.x, points[r + 1]![c]!.y);
+          }
+          context.stroke();
+          context.globalAlpha = 0.15 + p.l * 0.55;
+          context.beginPath();
+          context.arc(p.x, p.y, 0.85 + p.l * 0.65, 0, Math.PI * 2);
+          context.fill();
+        }),
+      );
+      context.globalAlpha = 1;
+      canvas!.dataset.painted = "true";
+    }
+
+    function stop() {
+      if (frame !== undefined) window.cancelAnimationFrame(frame);
+      frame = undefined;
+      last = undefined;
+    }
+    function tick(stamp: number) {
+      frame = undefined;
+      if (!canAnimate()) return;
+      if (last !== undefined) time += Math.min((stamp - last) / 1000, 0.05);
+      last = stamp;
+      draw();
+      frame = window.requestAnimationFrame(tick);
+    }
+    function refresh() {
+      stop();
+      if (disposed || document.hidden || (!visible && intersection)) return;
+      draw();
+      if (canAnimate() && typeof window.requestAnimationFrame === "function") {
+        frame = window.requestAnimationFrame(tick);
+      }
+    }
+    const intersection =
+      typeof IntersectionObserver === "function"
+        ? new IntersectionObserver(([entry]) => {
+            visible = entry?.isIntersecting === true;
+            refresh();
+          })
+        : undefined;
+    intersection?.observe(canvas);
+    const resize = typeof ResizeObserver === "function" ? new ResizeObserver(refresh) : undefined;
+    resize?.observe(canvas);
+    // Observe only ancestors, not the document subtree. This also updates the
+    // static reduced-motion canvas when a host changes its local theme.
+    const theme =
+      typeof MutationObserver === "function" ? new MutationObserver(refresh) : undefined;
+    for (let ancestor = canvas.parentElement; ancestor; ancestor = ancestor.parentElement) {
+      theme?.observe(ancestor, {
+        attributes: true,
+        attributeFilter: ["class", "style", "data-og-theme"],
+      });
+    }
+    motion?.addEventListener?.("change", refresh);
+    document.addEventListener("visibilitychange", refresh);
+    window.addEventListener("resize", refresh);
+    // Old hosts get one still frame; observed surfaces wait until onscreen.
+    if (!intersection) draw();
+    return () => {
+      disposed = true;
+      stop();
+      intersection?.disconnect();
+      resize?.disconnect();
+      theme?.disconnect();
+      motion?.removeEventListener?.("change", refresh);
+      document.removeEventListener("visibilitychange", refresh);
+      window.removeEventListener("resize", refresh);
+    };
+  }, []);
+
+  return (
+    <div className="og-preview-loading">
+      <canvas ref={ref} aria-hidden="true" />
+      <span className="og-preview-loading-label">Preparing preview…</span>
+    </div>
+  );
+}

package/src/components/queue-item-content.ts

@@ -0,0 +1,14 @@
+/**
+ * One presentation rule for a queued item, shared by the full queue and the
+ * compact session-chrome dock so the two cannot drift. A turn with an empty
+ * prompt and timeline annotations is valid content; an item with neither is a
+ * malformed or legacy object that gets an explicit fallback, never a blank row.
+ */
+export type QueueItemContent = "text" | "annotations" | "unavailable";
+
+export const QUEUE_ITEM_CONTENT_UNAVAILABLE = "Content unavailable";
+
+export function queueItemContent(text: string, annotationCount: number): QueueItemContent {
+  if (text.length > 0) return "text";
+  return annotationCount > 0 ? "annotations" : "unavailable";
+}

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

@@ -17,6 +17,7 @@ import {
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import type { SessionPendingInputPreview, SessionTurn, TimelineAnnotation } from "@opengeni/sdk";
+import { modelDisplayName } from "@opengeni/sdk/model-display";
 import {
   ArrowDownToLineIcon,
   ArrowUpToLineIcon,
@@ -37,6 +38,7 @@ import {
 } from "react";
 
 import { DropdownMenu } from "radix-ui";
+import { MENU_ITEM_CLASS, MENU_SEPARATOR_CLASS, MENU_SURFACE_CLASS } from "../lib/menu-styles";
 import type { ComposerState } from "../hooks/use-composer";
 import type { QueueMutationKind, UseTurnQueueResult } from "../hooks/use-turn-queue";
 import {
@@ -45,9 +47,13 @@ import {
   usePortalTokenStyle,
 } from "../lib/use-portal-token-style";
 import { requestQueueDraftEdit } from "./queue-draft-policy";
+import { QUEUE_ITEM_CONTENT_UNAVAILABLE, queueItemContent } from "./queue-item-content";
 import { QueueErrorAlert, QueueStoppingStatus } from "./queue-surface-state";
 import { TimelineAnnotationsChip } from "./timeline-annotations";
 
+// Queued prompts can be long; menu rows wrap instead of truncating.
+const QUEUE_MENU_ITEM_CLASS = `${MENU_ITEM_CLASS} whitespace-normal break-words`;
+
 /** The sole pending-input surface: compact above Goal, Agents, and composer. */
 type QueueSurfaceCommonProps = {
   /** Focus the composer owned by this queue after checkout/removal. */
@@ -84,6 +90,10 @@ export function QueueSurface({
   const [replaceDraftFor, setReplaceDraftFor] = useState<string | null>(null);
   const [announcement, setAnnouncement] = useState("");
   const [draggedTurnId, setDraggedTurnId] = useState<string | null>(null);
+  const [pendingMove, setPendingMove] = useState<{
+    baseVersion: number | null;
+    turnIds: string[];
+  } | null>(null);
   const surface = usePortalTokenSource<HTMLDivElement>();
   const surfaceRef = surface.currentRef;
   const portalTokenStyle = usePortalTokenStyle(surface.source);
@@ -112,30 +122,56 @@ export function QueueSurface({
   const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }));
 
   const displayedQueue = useMemo(() => {
-    if (!keyboardDrag) return queue.queue;
-    const oldIndex = queue.queue.findIndex((turn) => turn.id === keyboardDrag.turnId);
-    if (oldIndex < 0) return queue.queue;
-    return arrayMove(queue.queue, oldIndex, keyboardDrag.projectedIndex);
-  }, [keyboardDrag, queue.queue]);
+    if (keyboardDrag) {
+      const oldIndex = queue.queue.findIndex((turn) => turn.id === keyboardDrag.turnId);
+      if (oldIndex < 0) return queue.queue;
+      return arrayMove(queue.queue, oldIndex, keyboardDrag.projectedIndex);
+    }
+    if (
+      !pendingMove ||
+      pendingMove.baseVersion === null ||
+      queue.snapshot?.version !== pendingMove.baseVersion
+    ) {
+      return queue.queue;
+    }
+    const byId = new Map(queue.queue.map((turn) => [turn.id, turn]));
+    const projected = pendingMove.turnIds.map((turnId) => byId.get(turnId));
+    // Never let an optimistic ordering projection omit or invent a row. Any
+    // concurrent authoritative membership change wins immediately.
+    if (projected.some((turn) => !turn) || projected.length !== queue.queue.length) {
+      return queue.queue;
+    }
+    return projected as SessionTurn[];
+  }, [keyboardDrag, pendingMove, queue.queue, queue.snapshot?.version]);
 
   const ids = useMemo(() => displayedQueue.map((turn) => turn.id), [displayedQueue]);
   const moveToIndex = useCallback(
     async (turnId: string, nextIndex: number): Promise<void> => {
+      if (queue.mutating || pendingMove) return;
       const oldIndex = queue.queue.findIndex((turn) => turn.id === turnId);
       if (oldIndex < 0) return;
       const boundedIndex = Math.max(0, Math.min(nextIndex, queue.queue.length - 1));
       if (oldIndex === boundedIndex) return;
       const ordered = arrayMove(queue.queue, oldIndex, boundedIndex);
       const beforeTurnId = ordered[boundedIndex + 1]?.id ?? null;
-      const moved = await queue.moveTurn(turnId, beforeTurnId);
-      setAnnouncement(
-        moved
-          ? `Queued prompt moved to position ${boundedIndex + 1}.`
-          : "The queue changed before that prompt could be moved. Refreshed server order.",
-      );
-      if (moved) focusQueueTurn(surfaceRef.current, turnId);
+      setPendingMove({
+        baseVersion: queue.snapshot?.version ?? null,
+        turnIds: ordered.map((turn) => turn.id),
+      });
+      setAnnouncement(`Saving queued prompt at position ${boundedIndex + 1}.`);
+      try {
+        const moved = await queue.moveTurn(turnId, beforeTurnId);
+        setAnnouncement(
+          moved
+            ? `Queued prompt moved to position ${boundedIndex + 1}.`
+            : "The queue changed before that prompt could be moved. Refreshed server order.",
+        );
+        if (moved) focusQueueTurn(surfaceRef.current, turnId);
+      } finally {
+        setPendingMove(null);
+      }
     },
-    [queue, surfaceRef],
+    [pendingMove, queue, surfaceRef],
   );
 
   const onDragEnd = useCallback(
@@ -211,11 +247,15 @@ export function QueueSurface({
   const edit = useCallback(
     async (turn: SessionTurn, replaceDraft: boolean) => {
       if (!composer || !canEditInComposer) return;
+      setAnnouncement("Moving queued prompt to the composer…");
       const restored = await queue.editTurn(turn.id, {
         expectedDraftRevision: composer.draftRevision,
         replaceDraft,
       });
-      if (!restored) return;
+      if (!restored) {
+        setAnnouncement("That prompt changed before it could be moved to the composer.");
+        return;
+      }
       composer.applyDraft(restored);
       setReplaceDraftFor(null);
       setAnnouncement("Queued prompt moved back to the composer for editing.");
@@ -358,6 +398,7 @@ export function QueueSurface({
                       turn.id === queue.pendingInputAttachment?.turnId ? attachedInputs : []
                     }
                     pending={queue.mutationFor(turn.id)}
+                    reorderDisabled={queue.mutating || pendingMove !== null}
                     confirmingReplace={replaceDraftFor === turn.id}
                     keyboardDragging={keyboardDrag?.turnId === turn.id}
                     portalTokenStyle={portalTokenStyle}
@@ -367,6 +408,7 @@ export function QueueSurface({
                     onConfirmReplace={() => void edit(turn, true)}
                     onCancelReplace={() => setReplaceDraftFor(null)}
                     onSteer={() => {
+                      setAnnouncement("Requesting this queued prompt as the next direction…");
                       void queue.steerTurn(turn.id).then((steered) => {
                         setAnnouncement(
                           steered
@@ -379,6 +421,7 @@ export function QueueSurface({
                       });
                     }}
                     onDelete={() => {
+                      setAnnouncement("Deleting queued prompt…");
                       void queue.removeTurn(turn.id).then((removed) => {
                         setAnnouncement(
                           removed
@@ -492,8 +535,7 @@ type QueuePromptPreview = {
   isFallback: boolean;
 };
 
-function annotationOnlyQueuePreview(count: number): QueuePromptPreview {
-  const summary = `${count} timeline ${count === 1 ? "annotation" : "annotations"}`;
+function labelQueuePreview(summary: string): QueuePromptPreview {
   return {
     summary,
     collapsedVisual: summary,
@@ -509,10 +551,24 @@ function queueTurnPreview(
   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);
+  return queueContentPreview(turn.prompt, turn.annotations?.length ?? 0, maxCharacters);
+}
+
+function queueContentPreview(
+  prompt: string,
+  annotationCount: number,
+  maxCharacters: number,
+): QueuePromptPreview {
+  switch (queueItemContent(prompt, annotationCount)) {
+    case "text":
+      return queuePromptPreview(prompt, maxCharacters);
+    case "annotations":
+      return labelQueuePreview(
+        `${annotationCount} timeline ${annotationCount === 1 ? "annotation" : "annotations"}`,
+      );
+    case "unavailable":
+      return labelQueuePreview(QUEUE_ITEM_CONTENT_UNAVAILABLE);
+  }
 }
 
 /**
@@ -788,11 +844,9 @@ function QueuePrompt({
 }) {
   const [expanded, setExpanded] = useState(false);
   const fullContentId = useId();
+  const content = queueItemContent(prompt, annotations.length);
   const preview = useMemo(
-    () =>
-      prompt.length === 0 && annotations.length > 0
-        ? annotationOnlyQueuePreview(annotations.length)
-        : queuePromptPreview(prompt, QUEUE_ROW_PREVIEW_CHARACTERS),
+    () => queueContentPreview(prompt, annotations.length, QUEUE_ROW_PREVIEW_CHARACTERS),
     [annotations.length, prompt],
   );
 
@@ -843,6 +897,14 @@ function QueuePrompt({
           className={prompt ? "mt-1" : undefined}
         />
       ) : null}
+      {content === "unavailable" ? (
+        <p
+          className="text-og-control leading-5 text-fg-muted italic"
+          data-testid={`queue-prompt-unavailable-${index + 1}`}
+        >
+          {QUEUE_ITEM_CONTENT_UNAVAILABLE}
+        </p>
+      ) : null}
       {prompt ? (
         <button
           type="button"
@@ -916,7 +978,7 @@ function ReadOnlyQueueRow({
               {turn.tools.length} tool{turn.tools.length === 1 ? "" : "s"}
             </span>
           ) : null}
-          <span className="min-w-0 truncate">{turn.model}</span>
+          <span className="min-w-0 truncate">{modelDisplayName(turn.model)}</span>
           <span className="shrink-0">{turn.reasoningEffort}</span>
         </div>
       </div>
@@ -930,6 +992,7 @@ function SortableQueueRow({
   count,
   attachedInputs,
   pending,
+  reorderDisabled,
   confirmingReplace,
   keyboardDragging,
   portalTokenStyle,
@@ -947,6 +1010,7 @@ function SortableQueueRow({
   count: number;
   attachedInputs: SessionPendingInputPreview[];
   pending: QueueMutationKind | null;
+  reorderDisabled: boolean;
   confirmingReplace: boolean;
   keyboardDragging: boolean;
   portalTokenStyle: PortalTokenStyle;
@@ -961,7 +1025,7 @@ function SortableQueueRow({
 }) {
   const sortable = useSortable({
     id: turn.id,
-    disabled: pending !== null || keyboardDragging,
+    disabled: reorderDisabled || keyboardDragging,
   });
   return (
     <li
@@ -981,7 +1045,7 @@ function SortableQueueRow({
           {...sortable.attributes}
           {...sortable.listeners}
           onKeyDown={onHandleKeyDown}
-          disabled={pending !== null}
+          disabled={reorderDisabled}
           className="col-start-1 row-start-1 mt-0.5 inline-flex size-7 shrink-0 touch-none items-center justify-center rounded-md text-fg-subtle hover:bg-surface-2 hover:text-fg focus-visible:ring-2 focus-visible:ring-ring/40 pointer-coarse:size-[44px]"
           aria-label={`Reorder queued prompt ${index + 1}`}
           title="Drag to reorder. Press Space, arrows, then Space to drop."
@@ -1012,9 +1076,23 @@ function SortableQueueRow({
                 {turn.tools.length} tool{turn.tools.length === 1 ? "" : "s"}
               </span>
             ) : null}
-            <span className="min-w-0 truncate">{turn.model}</span>
+            <span className="min-w-0 truncate">{modelDisplayName(turn.model)}</span>
             <span className="shrink-0">{turn.reasoningEffort}</span>
           </div>
+          {pending ? (
+            <div
+              role="status"
+              aria-live="polite"
+              className="mt-1 flex items-center gap-1.5 text-og-xs font-medium text-status-waiting"
+              data-testid={`queue-mutation-${pending}`}
+            >
+              <Loader2Icon
+                aria-hidden="true"
+                className="size-3 shrink-0 animate-spin motion-reduce:animate-none"
+              />
+              {queueMutationPendingLabel(pending)}
+            </div>
+          ) : null}
         </div>
         <div className="col-span-full row-start-3 flex min-w-0 items-start justify-end gap-1.5 sm:col-span-1 sm:col-start-4 sm:row-start-1 sm:gap-2">
           <button
@@ -1022,6 +1100,7 @@ function SortableQueueRow({
             disabled={pending !== null}
             onClick={onSteer}
             aria-label={`Steer queued prompt ${index + 1}`}
+            data-analytics-action="steer"
             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-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]"
           >
@@ -1065,48 +1144,46 @@ function SortableQueueRow({
               <DropdownMenu.Content
                 align="end"
                 sideOffset={4}
-                className="og-root z-50 w-48 max-w-[calc(100vw-16px)] rounded-md border border-border bg-surface p-1 text-og-control text-fg shadow-lg"
+                collisionPadding={8}
+                className={`${MENU_SURFACE_CLASS} og-root z-50 max-h-(--radix-dropdown-menu-content-available-height) w-52 max-w-[calc(100vw-16px)] overflow-x-hidden overflow-y-auto`}
                 style={portalTokenStyle}
                 data-testid={`queue-actions-menu-${index + 1}`}
               >
                 {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-hidden focus:bg-surface-2 pointer-coarse:min-h-[44px]"
-                      onSelect={onEdit}
-                    >
-                      <PencilIcon className="size-3.5" /> Edit in composer
+                    <DropdownMenu.Item className={QUEUE_MENU_ITEM_CLASS} onSelect={onEdit}>
+                      <PencilIcon /> Edit in composer
                     </DropdownMenu.Item>
-                    <DropdownMenu.Separator className="my-1 h-px bg-border" />
+                    <DropdownMenu.Separator className={MENU_SEPARATOR_CLASS} />
                   </>
                 ) : 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-hidden focus:bg-surface-2 data-[disabled]:opacity-50 pointer-coarse:min-h-[44px]"
+                  className={QUEUE_MENU_ITEM_CLASS}
                   disabled={index === 0}
                   onSelect={() => onMove(0)}
                 >
-                  <ArrowUpToLineIcon className="size-3.5" /> Move to top
+                  <ArrowUpToLineIcon /> 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-hidden focus:bg-surface-2 data-[disabled]:opacity-50 pointer-coarse:min-h-[44px]"
+                  className={QUEUE_MENU_ITEM_CLASS}
                   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-hidden focus:bg-surface-2 data-[disabled]:opacity-50 pointer-coarse:min-h-[44px]"
+                  className={QUEUE_MENU_ITEM_CLASS}
                   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-hidden focus:bg-surface-2 data-[disabled]:opacity-50 pointer-coarse:min-h-[44px]"
+                  className={QUEUE_MENU_ITEM_CLASS}
                   disabled={index === count - 1}
                   onSelect={() => onMove(count - 1)}
                 >
-                  <ArrowDownToLineIcon className="size-3.5" /> Move to bottom
+                  <ArrowDownToLineIcon /> Move to bottom
                 </DropdownMenu.Item>
               </DropdownMenu.Content>
             </DropdownMenu.Portal>
@@ -1130,7 +1207,7 @@ function SortableQueueRow({
             </button>
             <button
               type="button"
-              className="rounded-md bg-brand px-2 py-1 font-medium text-white hover:bg-brand/90 focus-visible:ring-2 focus-visible:ring-ring/40"
+              className="rounded-md border border-og-primary-border bg-og-primary text-og-primary-fg px-2 py-1 font-medium hover:bg-og-primary-hover focus-visible:ring-2 focus-visible:ring-ring/40"
               onClick={onConfirmReplace}
             >
               Replace and edit
@@ -1142,6 +1219,19 @@ function SortableQueueRow({
   );
 }
 
+function queueMutationPendingLabel(kind: QueueMutationKind): string {
+  switch (kind) {
+    case "move":
+      return "Saving new position…";
+    case "edit":
+      return "Moving to composer…";
+    case "steer":
+      return "Changing direction…";
+    case "delete":
+      return "Deleting…";
+  }
+}
+
 const verticalOnly: Modifier = ({ transform }) => ({ ...transform, x: 0 });
 
 function focusQueueTurn(surface: HTMLElement | null, turnId: string): void {

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

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