@opengeni/react 0.15.0 → 0.20.0

package/src/components/queue-surface.tsx

@@ -1,578 +1,60 @@
-import {
-  DndContext,
-  DragOverlay,
-  PointerSensor,
-  closestCenter,
-  useSensor,
-  useSensors,
-  type DragEndEvent,
-  type DragStartEvent,
-  type Modifier,
-} from "@dnd-kit/core";
-import {
-  SortableContext,
-  arrayMove,
-  useSortable,
-  verticalListSortingStrategy,
-} from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import type { SessionTurn } from "@opengeni/sdk";
-import {
-  ArrowDownToLineIcon,
-  ArrowUpToLineIcon,
-  ChevronDownIcon,
-  EllipsisIcon,
-  GripVerticalIcon,
-  Loader2Icon,
-  PencilIcon,
-  RotateCwIcon,
-  Trash2Icon,
-  ZapIcon,
-} from "lucide-react";
-import { useCallback, useMemo, useState, type KeyboardEvent as ReactKeyboardEvent } from "react";
+import { Loader2Icon } from "lucide-react";
+import { lazy, Suspense, type ComponentType } from "react";
 
-import { DropdownMenu } from "radix-ui";
-import type { ComposerState } from "../hooks/use-composer";
-import type { QueueMutationKind, UseTurnQueueResult } from "../hooks/use-turn-queue";
+import type { QueueSurfaceProps } from "./queue-surface-implementation";
+import { EmptyQueueStateSurface } from "./queue-surface-state";
 
-/** The sole human prompt queue: compact above Goal, Agents, and composer. */
-export type QueueSurfaceProps =
-  | {
-      queue: UseTurnQueueResult;
-      composer: ComposerState;
-      readOnly?: false | undefined;
-    }
-  | {
-      queue: UseTurnQueueResult;
-      composer?: undefined;
-      readOnly: true;
-    };
-
-export function QueueSurface({ queue, composer, readOnly = false }: QueueSurfaceProps) {
-  const [open, setOpen] = useState(false);
-  const [replaceDraftFor, setReplaceDraftFor] = useState<string | null>(null);
-  const [announcement, setAnnouncement] = useState("");
-  const [draggedTurnId, setDraggedTurnId] = useState<string | null>(null);
-  const [keyboardDrag, setKeyboardDrag] = useState<{
-    turnId: string;
-    projectedIndex: number;
-  } | null>(null);
-  const count = queue.queue.length;
-  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: string, nextIndex: number): Promise<void> => {
-      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(turnId);
-    },
-    [queue],
-  );
-
-  const onDragEnd = useCallback(
-    (event: DragEndEvent) => {
-      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: DragStartEvent) => {
-      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: ReactKeyboardEvent<HTMLButtonElement>, turnId: string) => {
-      const canonicalIndex = queue.queue.findIndex((turn) => turn.id === turnId);
-      if (canonicalIndex < 0) return;
+export type { QueueSurfaceProps } from "./queue-surface-implementation";
 
-      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;
+const loadQueueSurface = () => import("./queue-surface-implementation");
+type QueueSurfaceModule = { QueueSurface: ComponentType<QueueSurfaceProps> };
+type QueueSurfaceLoader = () => Promise<QueueSurfaceModule>;
 
-      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;
-      }
+/** The sole human prompt queue: compact above Goal, Agents, and composer. */
+export const QueueSurface = createQueueSurface(loadQueueSurface);
 
-      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],
-  );
+/** @internal Deterministic Suspense seam for the QueueSurface regression suite. */
+export function createQueueSurfaceForTest(loadImplementation: QueueSurfaceLoader) {
+  return createQueueSurface(loadImplementation);
+}
 
-  const edit = useCallback(
-    async (turn: SessionTurn, replaceDraft: boolean) => {
-      if (!composer || readOnly) 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(() => {
-        const input = document.querySelector<HTMLTextAreaElement>(
-          'textarea[aria-label="Message the agent"]',
-        );
-        input?.scrollIntoView({ block: "nearest", behavior: "smooth" });
-        input?.focus();
-      });
-    },
-    [composer, queue, readOnly],
-  );
+function createQueueSurface(loadImplementation: QueueSurfaceLoader) {
+  const LazyQueueSurface = lazy(async () => ({
+    default: (await loadImplementation()).QueueSurface,
+  }));
 
-  const requestEdit = useCallback(
-    (turn: SessionTurn) => {
-      if (!composer || readOnly) return;
-      const draftDirty =
-        composer.value.length > 0 ||
-        composer.restoredResources.length > 0 ||
-        (composer.draft?.tools.length ?? 0) > 0 ||
-        (composer.draft?.sourceTurnId !== null && composer.draft?.sourceTurnId !== undefined);
-      if (draftDirty) {
-        setReplaceDraftFor(turn.id);
-      } else {
-        void edit(turn, false);
-      }
-    },
-    [composer, edit, readOnly],
-  );
+  return function QueueSurfaceBoundary(props: QueueSurfaceProps) {
+    const { queue } = props;
+    if (queue.queue.length === 0) {
+      if (!queue.stoppingPreviousAttempt && !queue.error && !queue.mutationError) return null;
+      return <EmptyQueueStateSurface queue={queue} />;
+    }
 
-  if (count === 0 && !queue.error && !queue.mutationError) return null;
+    return (
+      <Suspense fallback={<QueueSurfaceFallback count={queue.queue.length} />}>
+        <LazyQueueSurface {...props} />
+      </Suspense>
+    );
+  };
+}
 
+function QueueSurfaceFallback({ count }: { count: number }) {
   return (
     <div
+      aria-live="polite"
       className="mx-auto mb-2 w-full max-w-3xl shrink-0 px-4 sm:px-6"
-      data-testid="queue-surface"
+      data-testid="queue-surface-loading"
+      role="status"
     >
       <div className="overflow-hidden rounded-lg border border-border bg-surface/80 shadow-sm">
-        <button
-          type="button"
-          className="flex w-full min-w-0 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-11"
-          onClick={() => setOpen((value) => !value)}
-          aria-expanded={open}
-        >
-          <ChevronDownIcon
-            className={`size-3.5 shrink-0 text-fg-subtle transition-transform ${open ? "rotate-180" : ""}`}
+        <div className="flex items-center gap-2 px-3 py-2 text-xs text-fg-muted pointer-coarse:min-h-[44px]">
+          <Loader2Icon
+            aria-hidden="true"
+            className="size-3.5 shrink-0 animate-spin motion-reduce:animate-none"
           />
-          <span className="text-xs font-medium text-fg">
-            {count} queued prompt{count === 1 ? "" : "s"}
-          </span>
-          {readOnly ? (
-            <span className="shrink-0 rounded border border-border px-1.5 py-0.5 text-2xs text-fg-subtle">
-              Read-only
-            </span>
-          ) : null}
-          {!open && count > 0 ? (
-            <span className="min-w-0 flex-1 truncate text-xs text-fg-muted">
-              {queue.queue[0]?.prompt}
-            </span>
-          ) : null}
-          {queue.loading ? <Loader2Icon className="ml-auto size-3.5 animate-spin" /> : null}
-        </button>
-
-        {open && count > 0 && readOnly ? (
-          <ol className="divide-y divide-border border-t border-border" aria-label="Queued prompts">
-            {queue.queue.map((turn, index) => (
-              <ReadOnlyQueueRow key={turn.id} turn={turn} index={index} />
-            ))}
-          </ol>
-        ) : null}
-
-        {open && count > 0 && !readOnly ? (
-          <DndContext
-            sensors={sensors}
-            collisionDetection={closestCenter}
-            modifiers={[verticalOnly]}
-            onDragStart={onDragStart}
-            onDragCancel={() => {
-              setDraggedTurnId(null);
-              setAnnouncement("Queue reorder cancelled.");
-            }}
-            onDragEnd={onDragEnd}
-          >
-            <SortableContext items={ids} strategy={verticalListSortingStrategy}>
-              <ol
-                className="divide-y divide-border border-t border-border"
-                aria-label="Queued prompts"
-              >
-                {displayedQueue.map((turn, index) => (
-                  <SortableQueueRow
-                    key={turn.id}
-                    turn={turn}
-                    index={index}
-                    count={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={() => requestEdit(turn)}
-                    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(index);
-                      });
-                    }}
-                    onDelete={() => {
-                      void queue.removeTurn(turn.id).then((removed) => {
-                        setAnnouncement(
-                          removed
-                            ? "Queued prompt deleted."
-                            : "That prompt changed before it could be deleted.",
-                        );
-                        if (removed) focusAfterQueueRemoval(index);
-                      });
-                    }}
-                  />
-                ))}
-              </ol>
-            </SortableContext>
-            <DragOverlay modifiers={[verticalOnly]}>
-              {draggedTurnId ? (
-                <div className="max-w-xl rounded-md border border-brand/40 bg-surface px-3 py-2 text-xs text-fg shadow-lg">
-                  {queue.queue.find((turn) => turn.id === draggedTurnId)?.prompt}
-                </div>
-              ) : null}
-            </DragOverlay>
-          </DndContext>
-        ) : null}
-
-        {queue.error || queue.mutationError ? (
-          <div className="border-t border-border p-2">
-            <div
-              role="alert"
-              className="flex items-center gap-2 rounded-md bg-status-failed/10 px-2 py-1.5 text-xs text-status-failed"
-            >
-              <span className="min-w-0 flex-1">
-                {(queue.mutationError ?? queue.error)?.message}
-              </span>
-              <button
-                type="button"
-                onClick={() => {
-                  queue.clearMutationError();
-                  void queue.refresh();
-                }}
-                aria-label="Dismiss queue error and retry"
-                title="Retry loading the queue"
-                className="inline-flex size-7 items-center justify-center rounded-md outline-none transition-colors hover:bg-surface-3 focus-visible:ring-2 focus-visible:ring-ring/40 pointer-coarse:size-11"
-              >
-                <RotateCwIcon className="size-3.5" />
-              </button>
-            </div>
-          </div>
-        ) : null}
-      </div>
-      <p className="sr-only" aria-live="polite" aria-atomic="true">
-        {announcement}
-      </p>
-    </div>
-  );
-}
-
-function ReadOnlyQueueRow({ turn, index }: { turn: SessionTurn; index: number }) {
-  return (
-    <li className="flex min-w-0 items-start gap-2 bg-surface px-3 py-2">
-      <span className="mt-1 shrink-0 font-mono text-2xs text-fg-subtle">{index + 1}</span>
-      <div className="min-w-0 flex-1">
-        <p className="whitespace-pre-wrap break-words text-xs leading-5 text-fg">{turn.prompt}</p>
-        <div className="mt-1 flex flex-wrap gap-x-2 gap-y-0.5 text-2xs text-fg-subtle">
-          {turn.resources.length > 0 ? (
-            <span>
-              {turn.resources.length} resource{turn.resources.length === 1 ? "" : "s"}
-            </span>
-          ) : null}
-          {turn.tools.length > 0 ? (
-            <span>
-              {turn.tools.length} tool{turn.tools.length === 1 ? "" : "s"}
-            </span>
-          ) : null}
-          <span>{turn.model}</span>
-          <span>{turn.reasoningEffort}</span>
+          Loading {count} queued prompt{count === 1 ? "" : "s"}…
         </div>
       </div>
-    </li>
-  );
-}
-
-function SortableQueueRow({
-  turn,
-  index,
-  count,
-  pending,
-  confirmingReplace,
-  keyboardDragging,
-  onHandleKeyDown,
-  onMove,
-  onEdit,
-  onConfirmReplace,
-  onCancelReplace,
-  onSteer,
-  onDelete,
-}: {
-  turn: SessionTurn;
-  index: number;
-  count: number;
-  pending: QueueMutationKind | null;
-  confirmingReplace: boolean;
-  keyboardDragging: boolean;
-  onHandleKeyDown: (event: ReactKeyboardEvent<HTMLButtonElement>) => void;
-  onMove: (index: number) => void;
-  onEdit: () => void;
-  onConfirmReplace: () => void;
-  onCancelReplace: () => void;
-  onSteer: () => void;
-  onDelete: () => void;
-}) {
-  const sortable = useSortable({
-    id: turn.id,
-    disabled: pending !== null || keyboardDragging,
-  });
-  return (
-    <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" : ""}`}
-    >
-      <div className="flex min-w-0 items-start gap-1.5 px-2 py-2 sm:gap-2 sm:px-3">
-        <button
-          data-queue-handle
-          ref={sortable.setActivatorNodeRef}
-          type="button"
-          {...sortable.attributes}
-          {...sortable.listeners}
-          onKeyDown={onHandleKeyDown}
-          disabled={pending !== null}
-          className="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-11"
-          aria-label={`Reorder queued prompt ${index + 1}`}
-          title="Drag to reorder. Press Space, arrows, then Space to drop."
-        >
-          <GripVerticalIcon className="size-3.5" />
-        </button>
-        <span className="mt-1 shrink-0 font-mono text-2xs text-fg-subtle">{index + 1}</span>
-        <div className="min-w-0 flex-1">
-          <p className="whitespace-pre-wrap break-words text-xs leading-5 text-fg">{turn.prompt}</p>
-          <div className="mt-1 flex flex-wrap gap-x-2 gap-y-0.5 text-2xs text-fg-subtle">
-            {turn.resources.length > 0 ? (
-              <span>
-                {turn.resources.length} resource{turn.resources.length === 1 ? "" : "s"}
-              </span>
-            ) : null}
-            {turn.tools.length > 0 ? (
-              <span>
-                {turn.tools.length} tool{turn.tools.length === 1 ? "" : "s"}
-              </span>
-            ) : null}
-            <span>{turn.model}</span>
-            <span>{turn.reasoningEffort}</span>
-          </div>
-        </div>
-        <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-11"
-        >
-          {pending === "steer" ? (
-            <Loader2Icon className="size-3.5 animate-spin" />
-          ) : (
-            <ZapIcon className="size-3.5" />
-          )}
-          <span className="hidden sm:inline">Steer</span>
-        </button>
-        <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-11"
-        >
-          {pending === "delete" ? (
-            <Loader2Icon className="size-3.5 animate-spin" />
-          ) : (
-            <Trash2Icon className="size-3.5" />
-          )}
-        </button>
-        <DropdownMenu.Root>
-          <DropdownMenu.Trigger asChild>
-            <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-11"
-            >
-              {pending && pending !== "steer" && pending !== "delete" ? (
-                <Loader2Icon className="size-3.5 animate-spin" />
-              ) : (
-                <EllipsisIcon className="size-3.5" />
-              )}
-            </button>
-          </DropdownMenu.Trigger>
-          <DropdownMenu.Portal>
-            <DropdownMenu.Content
-              align="end"
-              sideOffset={4}
-              className="z-50 w-48 rounded-md border border-border bg-surface p-1 text-xs text-fg shadow-lg"
-            >
-              <DropdownMenu.Item
-                className="flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 outline-none focus:bg-surface-2"
-                onSelect={onEdit}
-              >
-                <PencilIcon className="size-3.5" /> Edit in composer
-              </DropdownMenu.Item>
-              <DropdownMenu.Separator className="my-1 h-px bg-border" />
-              <DropdownMenu.Item
-                className="flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 outline-none focus:bg-surface-2 data-[disabled]:opacity-50"
-                disabled={index === 0}
-                onSelect={() => onMove(0)}
-              >
-                <ArrowUpToLineIcon className="size-3.5" /> Move to top
-              </DropdownMenu.Item>
-              <DropdownMenu.Item
-                className="flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 outline-none focus:bg-surface-2 data-[disabled]:opacity-50"
-                disabled={index === 0}
-                onSelect={() => onMove(index - 1)}
-              >
-                Move up
-              </DropdownMenu.Item>
-              <DropdownMenu.Item
-                className="flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 outline-none focus:bg-surface-2 data-[disabled]:opacity-50"
-                disabled={index === count - 1}
-                onSelect={() => onMove(index + 1)}
-              >
-                Move down
-              </DropdownMenu.Item>
-              <DropdownMenu.Item
-                className="flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 outline-none focus:bg-surface-2 data-[disabled]:opacity-50"
-                disabled={index === count - 1}
-                onSelect={() => onMove(count - 1)}
-              >
-                <ArrowDownToLineIcon className="size-3.5" /> Move to bottom
-              </DropdownMenu.Item>
-            </DropdownMenu.Content>
-          </DropdownMenu.Portal>
-        </DropdownMenu.Root>
-      </div>
-      {confirmingReplace ? (
-        <div className="mx-3 mb-2 rounded-md border border-status-waiting/30 bg-status-waiting/10 p-2 text-xs 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>
-          <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
-            </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"
-              onClick={onConfirmReplace}
-            >
-              Replace and edit
-            </button>
-          </div>
-        </div>
-      ) : null}
-    </li>
+    </div>
   );
 }
-
-const verticalOnly: Modifier = ({ transform }) => ({ ...transform, x: 0 });
-
-function focusQueueTurn(turnId: string): void {
-  window.requestAnimationFrame(() => {
-    document
-      .querySelector<HTMLElement>(`[data-queue-turn-id="${turnId}"] [data-queue-handle]`)
-      ?.focus();
-  });
-}
-
-function focusAfterQueueRemoval(previousIndex: number): void {
-  window.requestAnimationFrame(() => {
-    const handles = document.querySelectorAll<HTMLElement>("[data-queue-handle]");
-    const nearest = handles[Math.min(previousIndex, Math.max(0, handles.length - 1))];
-    if (nearest) {
-      nearest.focus();
-      return;
-    }
-    document
-      .querySelector<HTMLTextAreaElement>('textarea[aria-label="Message the agent"]')
-      ?.focus();
-  });
-}