@opengeni/react 3.3.2 → 3.4.0

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,23 @@ import {
   usePortalTokenStyle,
 } from "../lib/use-portal-token-style";
 import { requestQueueDraftEdit } from "./queue-draft-policy";
+import {
+  projectPendingQueueMove,
+  QUEUE_COLLAPSED_PREVIEW_CHARACTERS,
+  QUEUE_REPLACE_DRAFT_COPY,
+  QUEUE_ROW_PREVIEW_CHARACTERS,
+  queueContentPreview,
+  queueMovePlan,
+  queuePromptPreview,
+  queueTurnPreview,
+} from "../queue-presentation-model";
+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. */
@@ -121,36 +137,21 @@ export function QueueSurface({
       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]);
+    return projectPendingQueueMove(queue.queue, pendingMove, queue.snapshot);
+  }, [keyboardDrag, pendingMove, queue.queue, queue.snapshot]);
 
   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 plan = queueMovePlan(queue.queue, turnId, nextIndex);
+      if (!plan) return;
+      const { beforeTurnId, index: boundedIndex } = plan;
       setPendingMove({
         baseVersion: queue.snapshot?.version ?? null,
-        turnIds: ordered.map((turn) => turn.id),
+        turnIds: plan.turnIds,
       });
       setAnnouncement(`Saving queued prompt at position ${boundedIndex + 1}.`);
       try {
@@ -504,314 +505,6 @@ function PendingMachineInputs({
   );
 }
 
-const QUEUE_ROW_PREVIEW_CHARACTERS = 360;
-const QUEUE_COLLAPSED_PREVIEW_CHARACTERS = 180;
-const QUEUE_PREVIEW_GRAPHEME_CONTEXT_CHARACTERS = 32;
-const QUEUE_PREVIEW_REFERENCE_SAMPLE_CHARACTERS = 32;
-const QUEUE_VISIBLE_END_IDENTITY_CHARACTERS = 18;
-const QUEUE_PREVIEW_SEPARATOR = " … ";
-const queuePreviewSegmenter = new Intl.Segmenter(undefined, { granularity: "grapheme" });
-const queuePromptNonRenderingCodePoint =
-  /[\p{White_Space}\p{Control}\p{Default_Ignorable_Code_Point}]/u;
-
-type BoundedPromptSample = {
-  value: string;
-  characters: number;
-  truncated: boolean;
-};
-
-type QueuePromptPreview = {
-  summary: string;
-  collapsedVisual: string;
-  visibleStart: string;
-  visibleIdentity: string | null;
-  visibleIdentityLabel: "End" | "Safe boundary" | null;
-  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
- * has a small amount of grapheme context so ordinary emoji/combining sequences
- * can be retained whole. A cluster that exceeds that context is omitted rather
- * than fragmented, and malformed UTF-16 is replaced only in the summary. The
- * durable prompt remains exact and no operation scans or copies it in full.
- */
-function queuePromptPreview(prompt: string, maxCharacters: number): QueuePromptPreview {
-  const wholePromptProbe = samplePromptStart(prompt, maxCharacters + 1);
-  if (!wholePromptProbe.truncated && wholePromptProbe.characters <= maxCharacters) {
-    const summary = replaceLoneSurrogates(wholePromptProbe.value);
-    return hasVisiblePromptContent(summary)
-      ? {
-          summary,
-          collapsedVisual: summary,
-          visibleStart: summary,
-          visibleIdentity: null,
-          visibleIdentityLabel: null,
-          isFallback: false,
-        }
-      : fallbackPromptPreview(prompt.length, wholePromptProbe.value, wholePromptProbe.value);
-  }
-
-  const suffixCharacters = Math.min(Math.floor(maxCharacters / 3), 120);
-  const prefixCharacters =
-    maxCharacters - codePointLength(QUEUE_PREVIEW_SEPARATOR) - suffixCharacters;
-  const prefixSample = samplePromptStart(
-    prompt,
-    prefixCharacters + QUEUE_PREVIEW_GRAPHEME_CONTEXT_CHARACTERS,
-  );
-  const suffixSample = samplePromptEnd(
-    prompt,
-    suffixCharacters + QUEUE_PREVIEW_GRAPHEME_CONTEXT_CHARACTERS,
-  );
-  const prefixSegments = segmentPromptSample(prefixSample.value);
-  const suffixSegments = segmentPromptSample(suffixSample.value);
-
-  // A cluster at a truncated sampling edge may continue outside the sample.
-  // Prefix sampling starts at the true source start, so only its last segment
-  // is ambiguous. Suffix sampling ends at the true source end, so its first is.
-  if (prefixSample.truncated) prefixSegments.pop();
-  if (suffixSample.truncated) {
-    let ambiguousSegment = suffixSegments.shift();
-    // A locally segmented leading fragment ending in ZWJ can join the next
-    // pictographic segment when omitted left context supplies its base. Keep
-    // backing off until that uncertainty no longer propagates to the right.
-    while (ambiguousSegment?.endsWith("\u200d") && suffixSegments.length > 0) {
-      ambiguousSegment = suffixSegments.shift();
-    }
-    // Regional Indicator pairing depends on the parity of the preceding run.
-    // If that run reaches the unknown sample boundary, omit all of its visible
-    // leading segments rather than potentially recombining halves of flags.
-    while (suffixSegments[0] && startsWithRegionalIndicator(suffixSegments[0])) {
-      suffixSegments.shift();
-    }
-  }
-
-  const prefix = takeWholeGraphemesFromStart(prefixSegments, prefixCharacters);
-  const suffix = takeWholeGraphemesFromEnd(suffixSegments, suffixCharacters);
-  const reference = boundedPromptSampleReference(
-    prompt.length,
-    prefixSample.value,
-    suffixSample.value,
-  );
-
-  if (!hasVisiblePromptContent(prefix) && !hasVisiblePromptContent(suffix)) {
-    return fallbackPromptPreview(prompt.length, prefixSample.value, suffixSample.value);
-  }
-
-  const safeSuffix = hasVisiblePromptContent(suffix)
-    ? suffix
-    : promptPreviewFallbackLabel(reference);
-  const summary = `${prefix}${QUEUE_PREVIEW_SEPARATOR}${safeSuffix}`;
-  if (!hasVisiblePromptContent(prefix)) {
-    return {
-      summary,
-      collapsedVisual: summary,
-      visibleStart: safeSuffix,
-      visibleIdentity: null,
-      visibleIdentityLabel: null,
-      isFallback: false,
-    };
-  }
-
-  const endIdentity = takeWholeGraphemesFromEnd(
-    suffixSegments,
-    QUEUE_VISIBLE_END_IDENTITY_CHARACTERS,
-  );
-  return {
-    summary,
-    collapsedVisual: summary,
-    visibleStart: prefix,
-    visibleIdentity: hasVisiblePromptContent(endIdentity) ? endIdentity : `ref ${reference}`,
-    visibleIdentityLabel: hasVisiblePromptContent(endIdentity) ? "End" : "Safe boundary",
-    isFallback: false,
-  };
-}
-
-function fallbackPromptPreview(
-  promptLength: number,
-  startSample: string,
-  endSample: string,
-): QueuePromptPreview {
-  const reference = boundedPromptSampleReference(promptLength, startSample, endSample);
-  const summary = promptPreviewFallbackLabel(reference);
-  return {
-    summary,
-    collapsedVisual: `Omitted · ${reference}`,
-    // The complete fallback remains the canonical accessible summary. Narrow
-    // collapsed/row layouts paint the bounded reference in a compact truthful
-    // form so ellipsis cannot hide the only identifying portion.
-    visibleStart: `Omitted · ${reference}`,
-    visibleIdentity: null,
-    visibleIdentityLabel: null,
-    isFallback: true,
-  };
-}
-
-function promptPreviewFallbackLabel(reference: string): string {
-  return `Content omitted at safe boundary · ref ${reference}`;
-}
-
-function boundedPromptSampleReference(
-  promptLength: number,
-  startSample: string,
-  endSample: string,
-): string {
-  const head = samplePromptStart(startSample, QUEUE_PREVIEW_REFERENCE_SAMPLE_CHARACTERS).value;
-  const tail = samplePromptEnd(endSample, QUEUE_PREVIEW_REFERENCE_SAMPLE_CHARACTERS).value;
-  let hash = 0x811c9dc5;
-  for (const value of [String(promptLength), head, tail]) {
-    for (let index = 0; index < value.length; index += 1) {
-      hash ^= value.charCodeAt(index);
-      hash = Math.imul(hash, 0x01000193);
-    }
-    hash ^= 0xffff;
-    hash = Math.imul(hash, 0x01000193);
-  }
-  return (hash >>> 0).toString(16).padStart(8, "0").toUpperCase();
-}
-
-function hasVisiblePromptContent(value: string): boolean {
-  // Callers pass only the already-bounded whole/head/tail preview samples.
-  // Default-ignorables and controls can survive trim() while painting no row
-  // identity at all (for example ZWJ, VS16, bidi controls, and tag characters).
-  for (const character of value) {
-    if (!queuePromptNonRenderingCodePoint.test(character)) return true;
-  }
-  return false;
-}
-
-function samplePromptStart(prompt: string, maxCharacters: number): BoundedPromptSample {
-  let end = 0;
-  let characters = 0;
-  while (end < prompt.length && characters < maxCharacters) {
-    const first = prompt.charCodeAt(end);
-    end +=
-      isHighSurrogate(first) &&
-      end + 1 < prompt.length &&
-      isLowSurrogate(prompt.charCodeAt(end + 1))
-        ? 2
-        : 1;
-    characters += 1;
-  }
-  return { value: prompt.slice(0, end), characters, truncated: end < prompt.length };
-}
-
-function samplePromptEnd(prompt: string, maxCharacters: number): BoundedPromptSample {
-  let start = prompt.length;
-  let characters = 0;
-  while (start > 0 && characters < maxCharacters) {
-    start -= 1;
-    if (
-      isLowSurrogate(prompt.charCodeAt(start)) &&
-      start > 0 &&
-      isHighSurrogate(prompt.charCodeAt(start - 1))
-    ) {
-      start -= 1;
-    }
-    characters += 1;
-  }
-  return { value: prompt.slice(start), characters, truncated: start > 0 };
-}
-
-function segmentPromptSample(sample: string): string[] {
-  return Array.from(
-    queuePreviewSegmenter.segment(replaceLoneSurrogates(sample)),
-    ({ segment }) => segment,
-  );
-}
-
-function replaceLoneSurrogates(value: string): string {
-  let sanitized = "";
-  for (let index = 0; index < value.length; index += 1) {
-    const current = value.charCodeAt(index);
-    if (
-      isHighSurrogate(current) &&
-      index + 1 < value.length &&
-      isLowSurrogate(value.charCodeAt(index + 1))
-    ) {
-      sanitized += value.slice(index, index + 2);
-      index += 1;
-    } else if (isHighSurrogate(current) || isLowSurrogate(current)) {
-      sanitized += "�";
-    } else {
-      sanitized += value[index];
-    }
-  }
-  return sanitized;
-}
-
-function takeWholeGraphemesFromStart(segments: string[], maxCharacters: number): string {
-  const selected: string[] = [];
-  let characters = 0;
-  for (const segment of segments) {
-    const segmentCharacters = codePointLength(segment);
-    if (characters + segmentCharacters > maxCharacters) break;
-    selected.push(segment);
-    characters += segmentCharacters;
-  }
-  while (selected.at(-1)?.trim().length === 0) selected.pop();
-  return selected.join("");
-}
-
-function takeWholeGraphemesFromEnd(segments: string[], maxCharacters: number): string {
-  const selected: string[] = [];
-  let characters = 0;
-  for (let index = segments.length - 1; index >= 0; index -= 1) {
-    const segment = segments[index];
-    if (!segment) continue;
-    const segmentCharacters = codePointLength(segment);
-    if (characters + segmentCharacters > maxCharacters) break;
-    selected.unshift(segment);
-    characters += segmentCharacters;
-  }
-  while (selected[0]?.trim().length === 0) selected.shift();
-  while (selected.at(-1)?.trim().length === 0) selected.pop();
-  return selected.join("");
-}
-
-function codePointLength(value: string): number {
-  let characters = 0;
-  for (const _character of value) characters += 1;
-  return characters;
-}
-
-function startsWithRegionalIndicator(value: string): boolean {
-  const codePoint = value.codePointAt(0);
-  return codePoint !== undefined && codePoint >= 0x1f1e6 && codePoint <= 0x1f1ff;
-}
-
-function isHighSurrogate(codeUnit: number): boolean {
-  return codeUnit >= 0xd800 && codeUnit <= 0xdbff;
-}
-
-function isLowSurrogate(codeUnit: number): boolean {
-  return codeUnit >= 0xdc00 && codeUnit <= 0xdfff;
-}
-
 function QueuePrompt({
   prompt,
   annotations,
@@ -825,11 +518,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],
   );
 
@@ -880,6 +571,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"
@@ -953,7 +652,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>
@@ -1051,7 +750,7 @@ 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 ? (
@@ -1075,6 +774,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]"
           >
@@ -1118,48 +818,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>
@@ -1168,25 +866,22 @@ function SortableQueueRow({
       </div>
       {confirmingReplace ? (
         <div className="mx-3 mb-2 rounded-md border border-status-waiting/30 bg-status-waiting/10 p-2 text-og-control text-fg">
-          <p>Your composer already has a draft. Replace it with this queued prompt?</p>
-          <p className="mt-0.5 text-fg-muted">
-            The current draft will be permanently discarded; this queued prompt is preserved until
-            you confirm.
-          </p>
+          <p>{QUEUE_REPLACE_DRAFT_COPY.title}</p>
+          <p className="mt-0.5 text-fg-muted">{QUEUE_REPLACE_DRAFT_COPY.detail}</p>
           <div className="mt-2 flex justify-end gap-1.5">
             <button
               type="button"
               className="rounded-md px-2 py-1 font-medium hover:bg-surface-2 focus-visible:ring-2 focus-visible:ring-ring/40"
               onClick={onCancelReplace}
             >
-              Keep current draft
+              {QUEUE_REPLACE_DRAFT_COPY.keep}
             </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
+              {QUEUE_REPLACE_DRAFT_COPY.replace}
             </button>
           </div>
         </div>

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

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

package/src/components/rehype-secret-refs.ts

@@ -0,0 +1,98 @@
+import type { SecretTextTokenLike } from "../secrets-ui";
+
+/* Turn secret references in rendered Markdown into chip placeholders
+   (`<span data-og-secret-ref="{{secret:…}}">`), which the Markdown `span`
+   renderer draws as a SecretRefChip.
+
+   Where references become chips:
+   - prose text (paragraphs, lists, tables, headings, emphasis);
+   - inline code whose whole content is exactly one reference, because the
+     agent often writes `{{secret:GitHub/password}}` in backticks and the chip
+     says the same thing more clearly.
+   Where they stay literal:
+   - fenced code blocks and inline code with anything else in it, so code reads
+     and copies exactly as written;
+   - link text, so a chip never nests inside a link.
+
+   Structural hast types keep the module dependency-free, like stream-reveal. */
+
+type HastText = { type: "text"; value: string; position?: unknown };
+type HastElement = {
+  type: "element";
+  tagName: string;
+  properties?: Record<string, unknown>;
+  children: HastChild[];
+};
+type HastChild = HastText | HastElement | { type: string; children?: HastChild[] };
+type HastParent = { children?: HastChild[] };
+
+const MARKER = "{{secret";
+
+export function rehypeSecretRefs(options: { tokenize: (text: string) => SecretTextTokenLike[] }) {
+  const { tokenize } = options;
+  return (tree: HastParent) => {
+    walk(tree);
+  };
+
+  function walk(node: HastParent): void {
+    if (!node.children) return;
+    let changed = false;
+    const next: HastChild[] = [];
+    for (const child of node.children) {
+      if (child.type === "text" && (child as HastText).value.includes(MARKER)) {
+        const split = splitText(child as HastText);
+        if (split) {
+          next.push(...split);
+          changed = true;
+          continue;
+        }
+      } else if (child.type === "element") {
+        const element = child as HastElement;
+        if (element.tagName === "code") {
+          const chip = wholeReference(element);
+          if (chip) {
+            next.push(chip);
+            changed = true;
+            continue;
+          }
+        } else if (element.tagName !== "pre" && element.tagName !== "a") {
+          walk(element);
+        }
+      } else if ("children" in child) {
+        walk(child as HastParent);
+      }
+      next.push(child);
+    }
+    if (changed) node.children = next;
+  }
+
+  function splitText(node: HastText): HastChild[] | null {
+    const tokens = tokenize(node.value);
+    if (!tokens.some((token) => token.type === "reference")) return null;
+    return tokens.map((token) =>
+      token.type === "reference"
+        ? chipPlaceholder(token.reference.raw)
+        : ({ type: "text", value: token.type === "text" ? token.value : token.raw } as HastText),
+    );
+  }
+
+  function wholeReference(code: HastElement): HastElement | null {
+    if (code.children.length !== 1) return null;
+    const only = code.children[0]!;
+    if (only.type !== "text") return null;
+    const value = (only as HastText).value;
+    if (!value.includes(MARKER)) return null;
+    const tokens = tokenize(value.trim());
+    const token = tokens.length === 1 ? tokens[0]! : null;
+    return token?.type === "reference" ? chipPlaceholder(token.reference.raw) : null;
+  }
+}
+
+function chipPlaceholder(raw: string): HastElement {
+  return {
+    type: "element",
+    tagName: "span",
+    properties: { dataOgSecretRef: raw },
+    children: [{ type: "text", value: raw }],
+  };
+}