@opengeni/react 0.13.0 → 0.20.0

package/dist/queue-surface-implementation-NQMV2ML3.js

@@ -0,0 +1,890 @@
+import {
+  QueueErrorAlert,
+  QueueStoppingStatus
+} from "./chunk-EBTT3MYN.js";
+
+// src/components/queue-surface-implementation.tsx
+import {
+  DndContext,
+  DragOverlay,
+  PointerSensor,
+  closestCenter,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  arrayMove,
+  useSortable,
+  verticalListSortingStrategy
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import {
+  ArrowDownToLineIcon,
+  ArrowUpToLineIcon,
+  ChevronDownIcon,
+  EllipsisIcon,
+  GripVerticalIcon,
+  Loader2Icon,
+  PencilIcon,
+  Trash2Icon,
+  ZapIcon
+} from "lucide-react";
+import {
+  useCallback,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { DropdownMenu } from "radix-ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function queueComposerCheckoutEnabled(composer, readOnly) {
+  return !readOnly && composer !== void 0 && composer.draftPersistence !== "disabled";
+}
+function QueueSurface({
+  queue,
+  composer,
+  readOnly = false,
+  onRequestComposerFocus
+}) {
+  const [open, setOpen] = useState(false);
+  const [replaceDraftFor, setReplaceDraftFor] = useState(null);
+  const [announcement, setAnnouncement] = useState("");
+  const [draggedTurnId, setDraggedTurnId] = useState(null);
+  const surfaceRef = useRef(null);
+  const [keyboardDrag, setKeyboardDrag] = useState(null);
+  const count = queue.queue.length;
+  const canEditInComposer = queueComposerCheckoutEnabled(composer, readOnly);
+  const collapsedPreview = useMemo(
+    () => queuePromptPreview(queue.queue[0]?.prompt ?? "", QUEUE_COLLAPSED_PREVIEW_CHARACTERS),
+    [queue.queue]
+  );
+  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]);
+  const ids = useMemo(() => displayedQueue.map((turn) => turn.id), [displayedQueue]);
+  const moveToIndex = useCallback(
+    async (turnId, nextIndex) => {
+      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);
+    },
+    [queue]
+  );
+  const onDragEnd = useCallback(
+    (event) => {
+      setDraggedTurnId(null);
+      const activeId = String(event.active.id);
+      const overId = event.over ? String(event.over.id) : null;
+      if (!overId || activeId === overId) {
+        setAnnouncement("Queued prompt returned to its original position.");
+        return;
+      }
+      const nextIndex = queue.queue.findIndex((turn) => turn.id === overId);
+      if (nextIndex >= 0) void moveToIndex(activeId, nextIndex);
+    },
+    [moveToIndex, queue.queue]
+  );
+  const onDragStart = useCallback(
+    (event) => {
+      setKeyboardDrag(null);
+      const turnId = String(event.active.id);
+      const position = queue.queue.findIndex((turn) => turn.id === turnId) + 1;
+      setDraggedTurnId(turnId);
+      setAnnouncement(`Dragging queued prompt ${position} of ${queue.queue.length}.`);
+    },
+    [queue.queue]
+  );
+  const onHandleKeyDown = useCallback(
+    (event, turnId) => {
+      const canonicalIndex = queue.queue.findIndex((turn) => turn.id === turnId);
+      if (canonicalIndex < 0) return;
+      if (!keyboardDrag) {
+        if (event.key !== " ") return;
+        event.preventDefault();
+        setKeyboardDrag({ turnId, projectedIndex: canonicalIndex });
+        setAnnouncement(
+          `Lifted queued prompt ${canonicalIndex + 1} of ${count}. Use arrow keys to move it, then press Space to drop.`
+        );
+        return;
+      }
+      if (keyboardDrag.turnId !== turnId) return;
+      if (event.key === "Escape") {
+        event.preventDefault();
+        setKeyboardDrag(null);
+        setAnnouncement("Queue reorder cancelled.");
+        return;
+      }
+      if (event.key === " ") {
+        event.preventDefault();
+        const targetIndex = keyboardDrag.projectedIndex;
+        setAnnouncement(`Moving queued prompt to position ${targetIndex + 1}.`);
+        void moveToIndex(turnId, targetIndex).finally(() => setKeyboardDrag(null));
+        return;
+      }
+      const direction = event.key === "ArrowUp" ? -1 : event.key === "ArrowDown" ? 1 : 0;
+      const edge = event.key === "Home" ? 0 : event.key === "End" ? count - 1 : null;
+      if (direction === 0 && edge === null) return;
+      event.preventDefault();
+      const projectedIndex = Math.max(
+        0,
+        Math.min(edge ?? keyboardDrag.projectedIndex + direction, count - 1)
+      );
+      setKeyboardDrag({ turnId, projectedIndex });
+      setAnnouncement(`Queued prompt projected to position ${projectedIndex + 1} of ${count}.`);
+    },
+    [count, keyboardDrag, moveToIndex, queue.queue]
+  );
+  const edit = useCallback(
+    async (turn, replaceDraft) => {
+      if (!composer || !canEditInComposer) return;
+      const restored = await queue.editTurn(turn.id, {
+        expectedDraftRevision: composer.draftRevision,
+        replaceDraft
+      });
+      if (!restored) return;
+      composer.applyDraft(restored);
+      setReplaceDraftFor(null);
+      setAnnouncement("Queued prompt moved back to the composer for editing.");
+      window.requestAnimationFrame(() => {
+        if (onRequestComposerFocus) {
+          onRequestComposerFocus();
+          return;
+        }
+        const input = document.querySelector(
+          'textarea[aria-label="Message the agent"]'
+        );
+        input?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+        input?.focus();
+      });
+    },
+    [canEditInComposer, composer, onRequestComposerFocus, queue]
+  );
+  const requestEdit = useCallback(
+    (turn) => {
+      if (!composer || !canEditInComposer) return;
+      const draftDirty = composer.value.length > 0 || composer.restoredResources.length > 0 || (composer.draft?.tools.length ?? 0) > 0 || composer.draft?.sourceTurnId !== null && composer.draft?.sourceTurnId !== void 0;
+      if (draftDirty) {
+        setReplaceDraftFor(turn.id);
+      } else {
+        void edit(turn, false);
+      }
+    },
+    [canEditInComposer, composer, edit]
+  );
+  if (count === 0 && !queue.stoppingPreviousAttempt && !queue.error && !queue.mutationError)
+    return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: surfaceRef,
+      className: "mx-auto mb-2 w-full max-w-3xl shrink-0 px-4 sm:px-6",
+      "data-testid": "queue-surface",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-lg border border-border bg-surface/80 shadow-sm", children: [
+          queue.stoppingPreviousAttempt ? /* @__PURE__ */ jsx(QueueStoppingStatus, { queue, dividerAfter: true }) : null,
+          /* @__PURE__ */ jsxs(
+            "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]",
+              onClick: () => setOpen((value) => !value),
+              "aria-description": !open && count > 0 ? collapsedPreview.summary : void 0,
+              "aria-expanded": open,
+              "aria-label": `${count} queued prompt${count === 1 ? "" : "s"}${readOnly ? " Read-only" : ""}`,
+              children: [
+                /* @__PURE__ */ jsx(
+                  ChevronDownIcon,
+                  {
+                    "aria-hidden": "true",
+                    className: `size-3.5 shrink-0 text-fg-subtle transition-transform ${open ? "rotate-180" : ""}`
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-fg", children: [
+                  count,
+                  " queued prompt",
+                  count === 1 ? "" : "s"
+                ] }),
+                readOnly ? /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded border border-border px-1.5 py-0.5 text-2xs text-fg-subtle", children: "Read-only" }) : null,
+                !open && count > 0 ? /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: `max-w-full truncate text-fg-muted ${collapsedPreview.collapsedVisual === collapsedPreview.summary ? "min-w-0 flex-1 text-xs" : "shrink-0 text-[10px]"}`,
+                    "data-testid": "queue-collapsed-preview",
+                    dir: "auto",
+                    children: collapsedPreview.collapsedVisual
+                  }
+                ) : null,
+                queue.loading ? /* @__PURE__ */ jsx(Loader2Icon, { className: "ml-auto size-3.5 animate-spin" }) : null
+              ]
+            }
+          ),
+          open && count > 0 && readOnly ? /* @__PURE__ */ jsx(
+            "ol",
+            {
+              className: "max-h-[min(30rem,60dvh)] divide-y divide-border overflow-y-auto overscroll-contain border-t border-border",
+              "aria-label": "Queued prompts",
+              "data-testid": "queue-list",
+              children: queue.queue.map((turn, index) => /* @__PURE__ */ jsx(
+                ReadOnlyQueueRow,
+                {
+                  turn,
+                  index,
+                  onDisclosureChange: (expanded) => setAnnouncement(
+                    `Full content for queued prompt ${index + 1} ${expanded ? "shown" : "hidden"}.`
+                  )
+                },
+                turn.id
+              ))
+            }
+          ) : null,
+          open && count > 0 && !readOnly ? /* @__PURE__ */ jsxs(
+            DndContext,
+            {
+              sensors,
+              collisionDetection: closestCenter,
+              modifiers: [verticalOnly],
+              onDragStart,
+              onDragCancel: () => {
+                setDraggedTurnId(null);
+                setAnnouncement("Queue reorder cancelled.");
+              },
+              onDragEnd,
+              children: [
+                /* @__PURE__ */ jsx(SortableContext, { items: ids, strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsx(
+                  "ol",
+                  {
+                    className: "max-h-[min(30rem,60dvh)] divide-y divide-border overflow-y-auto overscroll-contain border-t border-border",
+                    "aria-label": "Queued prompts",
+                    "data-testid": "queue-list",
+                    children: displayedQueue.map((turn, index) => /* @__PURE__ */ jsx(
+                      SortableQueueRow,
+                      {
+                        turn,
+                        index,
+                        count,
+                        pending: queue.mutationFor(turn.id),
+                        confirmingReplace: replaceDraftFor === turn.id,
+                        keyboardDragging: keyboardDrag?.turnId === turn.id,
+                        onHandleKeyDown: (event) => onHandleKeyDown(event, turn.id),
+                        onMove: (nextIndex) => void moveToIndex(turn.id, nextIndex),
+                        onEdit: canEditInComposer ? () => requestEdit(turn) : void 0,
+                        onConfirmReplace: () => void edit(turn, true),
+                        onCancelReplace: () => setReplaceDraftFor(null),
+                        onSteer: () => {
+                          void queue.steerTurn(turn.id).then((steered) => {
+                            setAnnouncement(
+                              steered ? "Queued prompt is now the next direction." : "That prompt changed before it could be steered."
+                            );
+                            if (steered) {
+                              focusAfterQueueRemoval(surfaceRef.current, index, onRequestComposerFocus);
+                            }
+                          });
+                        },
+                        onDelete: () => {
+                          void queue.removeTurn(turn.id).then((removed) => {
+                            setAnnouncement(
+                              removed ? "Queued prompt deleted." : "That prompt changed before it could be deleted."
+                            );
+                            if (removed) {
+                              focusAfterQueueRemoval(surfaceRef.current, index, onRequestComposerFocus);
+                            }
+                          });
+                        },
+                        onDisclosureChange: (expanded) => setAnnouncement(
+                          `Full content for queued prompt ${index + 1} ${expanded ? "shown" : "hidden"}.`
+                        )
+                      },
+                      turn.id
+                    ))
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(DragOverlay, { modifiers: [verticalOnly], children: draggedTurnId ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "max-h-20 w-[min(36rem,calc(100vw-2rem))] max-w-[calc(100vw-2rem)] overflow-hidden rounded-md border border-brand/40 bg-surface px-3 py-2 text-xs text-fg shadow-lg",
+                    "data-testid": "queue-drag-overlay",
+                    children: /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        "aria-hidden": "true",
+                        className: "line-clamp-3 break-all whitespace-pre-wrap [unicode-bidi:plaintext]",
+                        dir: "auto",
+                        children: queuePromptPreview(
+                          queue.queue.find((turn) => turn.id === draggedTurnId)?.prompt ?? "",
+                          QUEUE_ROW_PREVIEW_CHARACTERS
+                        ).summary
+                      }
+                    )
+                  }
+                ) : null })
+              ]
+            }
+          ) : null,
+          queue.error || queue.mutationError ? /* @__PURE__ */ jsx(QueueErrorAlert, { queue, dividerBefore: true }) : null
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "sr-only", "aria-live": "polite", "aria-atomic": "true", children: announcement })
+      ]
+    }
+  );
+}
+var QUEUE_ROW_PREVIEW_CHARACTERS = 360;
+var QUEUE_COLLAPSED_PREVIEW_CHARACTERS = 180;
+var QUEUE_PREVIEW_GRAPHEME_CONTEXT_CHARACTERS = 32;
+var QUEUE_PREVIEW_REFERENCE_SAMPLE_CHARACTERS = 32;
+var QUEUE_VISIBLE_END_IDENTITY_CHARACTERS = 18;
+var QUEUE_PREVIEW_SEPARATOR = " \u2026 ";
+var queuePreviewSegmenter = new Intl.Segmenter(void 0, { granularity: "grapheme" });
+var queuePromptNonRenderingCodePoint = /[\p{White_Space}\p{Control}\p{Default_Ignorable_Code_Point}]/u;
+function queuePromptPreview(prompt, maxCharacters) {
+  const wholePromptProbe = samplePromptStart(prompt, maxCharacters + 1);
+  if (!wholePromptProbe.truncated && wholePromptProbe.characters <= maxCharacters) {
+    const summary2 = replaceLoneSurrogates(wholePromptProbe.value);
+    return hasVisiblePromptContent(summary2) ? {
+      summary: summary2,
+      collapsedVisual: summary2,
+      visibleStart: summary2,
+      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);
+  if (prefixSample.truncated) prefixSegments.pop();
+  if (suffixSample.truncated) {
+    let ambiguousSegment = suffixSegments.shift();
+    while (ambiguousSegment?.endsWith("\u200D") && suffixSegments.length > 0) {
+      ambiguousSegment = suffixSegments.shift();
+    }
+    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, startSample, endSample) {
+  const reference = boundedPromptSampleReference(promptLength, startSample, endSample);
+  const summary = promptPreviewFallbackLabel(reference);
+  return {
+    summary,
+    collapsedVisual: `Omitted \xB7 ${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 \xB7 ${reference}`,
+    visibleIdentity: null,
+    visibleIdentityLabel: null,
+    isFallback: true
+  };
+}
+function promptPreviewFallbackLabel(reference) {
+  return `Content omitted at safe boundary \xB7 ref ${reference}`;
+}
+function boundedPromptSampleReference(promptLength, startSample, endSample) {
+  const head = samplePromptStart(startSample, QUEUE_PREVIEW_REFERENCE_SAMPLE_CHARACTERS).value;
+  const tail = samplePromptEnd(endSample, QUEUE_PREVIEW_REFERENCE_SAMPLE_CHARACTERS).value;
+  let hash = 2166136261;
+  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, 16777619);
+    }
+    hash ^= 65535;
+    hash = Math.imul(hash, 16777619);
+  }
+  return (hash >>> 0).toString(16).padStart(8, "0").toUpperCase();
+}
+function hasVisiblePromptContent(value) {
+  for (const character of value) {
+    if (!queuePromptNonRenderingCodePoint.test(character)) return true;
+  }
+  return false;
+}
+function samplePromptStart(prompt, maxCharacters) {
+  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, maxCharacters) {
+  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) {
+  return Array.from(
+    queuePreviewSegmenter.segment(replaceLoneSurrogates(sample)),
+    ({ segment }) => segment
+  );
+}
+function replaceLoneSurrogates(value) {
+  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 += "\uFFFD";
+    } else {
+      sanitized += value[index];
+    }
+  }
+  return sanitized;
+}
+function takeWholeGraphemesFromStart(segments, maxCharacters) {
+  const selected = [];
+  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, maxCharacters) {
+  const selected = [];
+  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) {
+  let characters = 0;
+  for (const _character of value) characters += 1;
+  return characters;
+}
+function startsWithRegionalIndicator(value) {
+  const codePoint = value.codePointAt(0);
+  return codePoint !== void 0 && codePoint >= 127462 && codePoint <= 127487;
+}
+function isHighSurrogate(codeUnit) {
+  return codeUnit >= 55296 && codeUnit <= 56319;
+}
+function isLowSurrogate(codeUnit) {
+  return codeUnit >= 56320 && codeUnit <= 57343;
+}
+function QueuePrompt({
+  prompt,
+  index,
+  onDisclosureChange
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const fullContentId = useId();
+  const preview = useMemo(() => queuePromptPreview(prompt, QUEUE_ROW_PREVIEW_CHARACTERS), [prompt]);
+  return /* @__PURE__ */ jsxs("div", { className: "w-full min-w-0 max-w-full", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-label": `Queued prompt ${index + 1} summary: ${preview.summary}`,
+        className: "max-w-full overflow-hidden text-xs leading-5 text-fg",
+        "data-testid": `queue-prompt-preview-${index + 1}`,
+        dir: "auto",
+        role: "note",
+        children: /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "flex min-w-0 max-w-full items-baseline gap-2 sm:block", children: [
+          /* @__PURE__ */ jsx(
+            "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",
+              children: preview.visibleStart
+            }
+          ),
+          preview.visibleIdentity && preview.visibleIdentityLabel ? /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "flex min-w-0 max-w-[70%] shrink-0 items-center gap-1 text-2xs leading-4 text-fg-muted sm:mt-0.5 sm:max-w-full",
+              "data-testid": `queue-prompt-identity-row-${index + 1}`,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "shrink-0 font-medium text-fg-subtle", children: preview.visibleIdentityLabel }),
+                /* @__PURE__ */ jsx(
+                  "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",
+                    children: preview.visibleIdentity
+                  }
+                )
+              ]
+            }
+          ) : null
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "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-2xs font-medium text-fg-muted outline-none transition-colors hover:text-fg 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);
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            ChevronDownIcon,
+            {
+              "aria-hidden": "true",
+              className: `size-3 shrink-0 transition-transform ${expanded ? "rotate-180" : ""}`
+            }
+          ),
+          expanded ? "Hide full prompt" : "View full prompt"
+        ]
+      }
+    ),
+    expanded ? /* @__PURE__ */ jsx(
+      "pre",
+      {
+        id: fullContentId,
+        role: "region",
+        "aria-label": `Full content for queued prompt ${index + 1}`,
+        className: "mt-1.5 max-h-64 w-full min-w-0 max-w-full overflow-auto overscroll-contain rounded-md border border-border bg-surface-2/60 p-2 whitespace-pre-wrap break-all font-mono text-xs leading-5 text-fg [unicode-bidi:plaintext]",
+        "data-testid": `queue-prompt-full-${index + 1}`,
+        dir: "auto",
+        tabIndex: 0,
+        children: prompt
+      }
+    ) : null
+  ] });
+}
+function ReadOnlyQueueRow({
+  turn,
+  index,
+  onDisclosureChange
+}) {
+  return /* @__PURE__ */ jsxs("li", { className: "flex min-w-0 items-start gap-2 bg-surface px-3 py-2", children: [
+    /* @__PURE__ */ jsx("span", { className: "mt-1 shrink-0 font-mono text-2xs text-fg-subtle", children: index + 1 }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx(QueuePrompt, { prompt: turn.prompt, index, onDisclosureChange }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-1 flex min-w-0 items-center gap-2 overflow-hidden whitespace-nowrap text-2xs text-fg-subtle", children: [
+        turn.resources.length > 0 ? /* @__PURE__ */ jsxs("span", { className: "shrink-0", children: [
+          turn.resources.length,
+          " resource",
+          turn.resources.length === 1 ? "" : "s"
+        ] }) : null,
+        turn.tools.length > 0 ? /* @__PURE__ */ jsxs("span", { className: "shrink-0", children: [
+          turn.tools.length,
+          " tool",
+          turn.tools.length === 1 ? "" : "s"
+        ] }) : null,
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: turn.model }),
+        /* @__PURE__ */ jsx("span", { className: "shrink-0", children: turn.reasoningEffort })
+      ] })
+    ] })
+  ] });
+}
+function SortableQueueRow({
+  turn,
+  index,
+  count,
+  pending,
+  confirmingReplace,
+  keyboardDragging,
+  onHandleKeyDown,
+  onMove,
+  onEdit,
+  onConfirmReplace,
+  onCancelReplace,
+  onSteer,
+  onDelete,
+  onDisclosureChange
+}) {
+  const sortable = useSortable({
+    id: turn.id,
+    disabled: pending !== null || keyboardDragging
+  });
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      "data-queue-turn-id": turn.id,
+      ref: sortable.setNodeRef,
+      style: {
+        transform: CSS.Transform.toString(sortable.transform),
+        transition: sortable.transition
+      },
+      className: `bg-surface ${sortable.isDragging || keyboardDragging ? "relative z-10 shadow-lg ring-1 ring-brand/40" : ""}`,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "grid min-w-0 grid-cols-[auto_minmax(0,1fr)] items-start gap-x-1.5 px-2 py-1.5 sm:grid-cols-[auto_auto_minmax(0,1fr)_auto] sm:gap-x-2 sm:px-3 sm:py-2", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              "data-queue-handle": true,
+              ref: sortable.setActivatorNodeRef,
+              type: "button",
+              ...sortable.attributes,
+              ...sortable.listeners,
+              onKeyDown: onHandleKeyDown,
+              disabled: pending !== null,
+              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.",
+              children: /* @__PURE__ */ jsx(GripVerticalIcon, { className: "size-3.5" })
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "col-start-2 row-start-1 mt-1 shrink-0 font-mono text-2xs text-fg-subtle", children: index + 1 }),
+          /* @__PURE__ */ jsxs("div", { className: "col-span-full row-start-2 min-w-0 sm:col-span-1 sm:col-start-3 sm:row-start-1", children: [
+            /* @__PURE__ */ jsx(QueuePrompt, { prompt: turn.prompt, index, onDisclosureChange }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-1 flex min-w-0 items-center gap-2 overflow-hidden whitespace-nowrap text-2xs text-fg-subtle", children: [
+              turn.resources.length > 0 ? /* @__PURE__ */ jsxs("span", { className: "shrink-0", children: [
+                turn.resources.length,
+                " resource",
+                turn.resources.length === 1 ? "" : "s"
+              ] }) : null,
+              turn.tools.length > 0 ? /* @__PURE__ */ jsxs("span", { className: "shrink-0", children: [
+                turn.tools.length,
+                " tool",
+                turn.tools.length === 1 ? "" : "s"
+              ] }) : null,
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: turn.model }),
+              /* @__PURE__ */ jsx("span", { className: "shrink-0", children: turn.reasoningEffort })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("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", children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                disabled: pending !== null,
+                onClick: onSteer,
+                "aria-label": `Steer queued prompt ${index + 1}`,
+                title: "Make this the next direction",
+                className: "inline-flex h-7 shrink-0 items-center justify-center gap-1 rounded-md px-2 text-xs font-medium 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:min-h-[44px] pointer-coarse:min-w-[44px]",
+                children: [
+                  pending === "steer" ? /* @__PURE__ */ jsx(Loader2Icon, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ jsx(ZapIcon, { className: "size-3.5" }),
+                  /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "Steer" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                disabled: pending !== null,
+                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]",
+                children: pending === "delete" ? /* @__PURE__ */ jsx(Loader2Icon, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ jsx(Trash2Icon, { className: "size-3.5" })
+              }
+            ),
+            /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
+              /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  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]",
+                  children: pending && pending !== "steer" && pending !== "delete" ? /* @__PURE__ */ jsx(Loader2Icon, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ jsx(EllipsisIcon, { className: "size-3.5" })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsxs(
+                DropdownMenu.Content,
+                {
+                  align: "end",
+                  sideOffset: 4,
+                  className: "z-50 w-48 max-w-[calc(100vw-16px)] rounded-md border border-border bg-surface p-1 text-xs text-fg shadow-lg",
+                  "data-testid": `queue-actions-menu-${index + 1}`,
+                  children: [
+                    onEdit ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsxs(
+                        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]",
+                          onSelect: onEdit,
+                          children: [
+                            /* @__PURE__ */ jsx(PencilIcon, { className: "size-3.5" }),
+                            " Edit in composer"
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(DropdownMenu.Separator, { className: "my-1 h-px bg-border" })
+                    ] }) : null,
+                    /* @__PURE__ */ jsxs(
+                      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]",
+                        disabled: index === 0,
+                        onSelect: () => onMove(0),
+                        children: [
+                          /* @__PURE__ */ jsx(ArrowUpToLineIcon, { className: "size-3.5" }),
+                          " Move to top"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      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]",
+                        disabled: index === 0,
+                        onSelect: () => onMove(index - 1),
+                        children: "Move up"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      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]",
+                        disabled: index === count - 1,
+                        onSelect: () => onMove(index + 1),
+                        children: "Move down"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      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]",
+                        disabled: index === count - 1,
+                        onSelect: () => onMove(count - 1),
+                        children: [
+                          /* @__PURE__ */ jsx(ArrowDownToLineIcon, { className: "size-3.5" }),
+                          " Move to bottom"
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ) })
+            ] })
+          ] })
+        ] }),
+        confirmingReplace ? /* @__PURE__ */ jsxs("div", { className: "mx-3 mb-2 rounded-md border border-status-waiting/30 bg-status-waiting/10 p-2 text-xs text-fg", children: [
+          /* @__PURE__ */ jsx("p", { children: "Your composer already has a draft. Replace it with this queued prompt?" }),
+          /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-fg-muted", children: "The current draft will be permanently discarded; this queued prompt is preserved until you confirm." }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-2 flex justify-end gap-1.5", children: [
+            /* @__PURE__ */ jsx(
+              "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,
+                children: "Keep current draft"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "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",
+                onClick: onConfirmReplace,
+                children: "Replace and edit"
+              }
+            )
+          ] })
+        ] }) : null
+      ]
+    }
+  );
+}
+var verticalOnly = ({ transform }) => ({ ...transform, x: 0 });
+function focusQueueTurn(surface, turnId) {
+  window.requestAnimationFrame(() => {
+    surface?.querySelector(`[data-queue-turn-id="${turnId}"] [data-queue-handle]`)?.focus();
+  });
+}
+function focusAfterQueueRemoval(surface, previousIndex, onRequestComposerFocus) {
+  window.requestAnimationFrame(() => {
+    const handles = surface?.querySelectorAll("[data-queue-handle]") ?? [];
+    const nearest = handles[Math.min(previousIndex, Math.max(0, handles.length - 1))];
+    if (nearest) {
+      nearest.focus();
+      return;
+    }
+    if (onRequestComposerFocus) {
+      onRequestComposerFocus();
+      return;
+    }
+    document.querySelector('textarea[aria-label="Message the agent"]')?.focus();
+  });
+}
+export {
+  QueueSurface,
+  queueComposerCheckoutEnabled
+};
+//# sourceMappingURL=queue-surface-implementation-NQMV2ML3.js.map