@opengeni/react 0.57.0 → 2.2.0-canary.0

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

@@ -84,6 +84,10 @@ export function QueueSurface({
   const [replaceDraftFor, setReplaceDraftFor] = useState<string | null>(null);
   const [announcement, setAnnouncement] = useState("");
   const [draggedTurnId, setDraggedTurnId] = useState<string | null>(null);
+  const [pendingMove, setPendingMove] = useState<{
+    baseVersion: number | null;
+    turnIds: string[];
+  } | null>(null);
   const surface = usePortalTokenSource<HTMLDivElement>();
   const surfaceRef = surface.currentRef;
   const portalTokenStyle = usePortalTokenStyle(surface.source);
@@ -112,30 +116,56 @@ export function QueueSurface({
   const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }));
 
   const displayedQueue = useMemo(() => {
-    if (!keyboardDrag) return queue.queue;
-    const oldIndex = queue.queue.findIndex((turn) => turn.id === keyboardDrag.turnId);
-    if (oldIndex < 0) return queue.queue;
-    return arrayMove(queue.queue, oldIndex, keyboardDrag.projectedIndex);
-  }, [keyboardDrag, queue.queue]);
+    if (keyboardDrag) {
+      const oldIndex = queue.queue.findIndex((turn) => turn.id === keyboardDrag.turnId);
+      if (oldIndex < 0) return queue.queue;
+      return arrayMove(queue.queue, oldIndex, keyboardDrag.projectedIndex);
+    }
+    if (
+      !pendingMove ||
+      pendingMove.baseVersion === null ||
+      queue.snapshot?.version !== pendingMove.baseVersion
+    ) {
+      return queue.queue;
+    }
+    const byId = new Map(queue.queue.map((turn) => [turn.id, turn]));
+    const projected = pendingMove.turnIds.map((turnId) => byId.get(turnId));
+    // Never let an optimistic ordering projection omit or invent a row. Any
+    // concurrent authoritative membership change wins immediately.
+    if (projected.some((turn) => !turn) || projected.length !== queue.queue.length) {
+      return queue.queue;
+    }
+    return projected as SessionTurn[];
+  }, [keyboardDrag, pendingMove, queue.queue, queue.snapshot?.version]);
 
   const ids = useMemo(() => displayedQueue.map((turn) => turn.id), [displayedQueue]);
   const moveToIndex = useCallback(
     async (turnId: string, nextIndex: number): Promise<void> => {
+      if (queue.mutating || pendingMove) return;
       const oldIndex = queue.queue.findIndex((turn) => turn.id === turnId);
       if (oldIndex < 0) return;
       const boundedIndex = Math.max(0, Math.min(nextIndex, queue.queue.length - 1));
       if (oldIndex === boundedIndex) return;
       const ordered = arrayMove(queue.queue, oldIndex, boundedIndex);
       const beforeTurnId = ordered[boundedIndex + 1]?.id ?? null;
-      const moved = await queue.moveTurn(turnId, beforeTurnId);
-      setAnnouncement(
-        moved
-          ? `Queued prompt moved to position ${boundedIndex + 1}.`
-          : "The queue changed before that prompt could be moved. Refreshed server order.",
-      );
-      if (moved) focusQueueTurn(surfaceRef.current, turnId);
+      setPendingMove({
+        baseVersion: queue.snapshot?.version ?? null,
+        turnIds: ordered.map((turn) => turn.id),
+      });
+      setAnnouncement(`Saving queued prompt at position ${boundedIndex + 1}.`);
+      try {
+        const moved = await queue.moveTurn(turnId, beforeTurnId);
+        setAnnouncement(
+          moved
+            ? `Queued prompt moved to position ${boundedIndex + 1}.`
+            : "The queue changed before that prompt could be moved. Refreshed server order.",
+        );
+        if (moved) focusQueueTurn(surfaceRef.current, turnId);
+      } finally {
+        setPendingMove(null);
+      }
     },
-    [queue, surfaceRef],
+    [pendingMove, queue, surfaceRef],
   );
 
   const onDragEnd = useCallback(
@@ -211,11 +241,15 @@ export function QueueSurface({
   const edit = useCallback(
     async (turn: SessionTurn, replaceDraft: boolean) => {
       if (!composer || !canEditInComposer) return;
+      setAnnouncement("Moving queued prompt to the composer…");
       const restored = await queue.editTurn(turn.id, {
         expectedDraftRevision: composer.draftRevision,
         replaceDraft,
       });
-      if (!restored) return;
+      if (!restored) {
+        setAnnouncement("That prompt changed before it could be moved to the composer.");
+        return;
+      }
       composer.applyDraft(restored);
       setReplaceDraftFor(null);
       setAnnouncement("Queued prompt moved back to the composer for editing.");
@@ -358,6 +392,7 @@ export function QueueSurface({
                       turn.id === queue.pendingInputAttachment?.turnId ? attachedInputs : []
                     }
                     pending={queue.mutationFor(turn.id)}
+                    reorderDisabled={queue.mutating || pendingMove !== null}
                     confirmingReplace={replaceDraftFor === turn.id}
                     keyboardDragging={keyboardDrag?.turnId === turn.id}
                     portalTokenStyle={portalTokenStyle}
@@ -367,6 +402,7 @@ export function QueueSurface({
                     onConfirmReplace={() => void edit(turn, true)}
                     onCancelReplace={() => setReplaceDraftFor(null)}
                     onSteer={() => {
+                      setAnnouncement("Requesting this queued prompt as the next direction…");
                       void queue.steerTurn(turn.id).then((steered) => {
                         setAnnouncement(
                           steered
@@ -379,6 +415,7 @@ export function QueueSurface({
                       });
                     }}
                     onDelete={() => {
+                      setAnnouncement("Deleting queued prompt…");
                       void queue.removeTurn(turn.id).then((removed) => {
                         setAnnouncement(
                           removed
@@ -930,6 +967,7 @@ function SortableQueueRow({
   count,
   attachedInputs,
   pending,
+  reorderDisabled,
   confirmingReplace,
   keyboardDragging,
   portalTokenStyle,
@@ -947,6 +985,7 @@ function SortableQueueRow({
   count: number;
   attachedInputs: SessionPendingInputPreview[];
   pending: QueueMutationKind | null;
+  reorderDisabled: boolean;
   confirmingReplace: boolean;
   keyboardDragging: boolean;
   portalTokenStyle: PortalTokenStyle;
@@ -961,7 +1000,7 @@ function SortableQueueRow({
 }) {
   const sortable = useSortable({
     id: turn.id,
-    disabled: pending !== null || keyboardDragging,
+    disabled: reorderDisabled || keyboardDragging,
   });
   return (
     <li
@@ -981,7 +1020,7 @@ function SortableQueueRow({
           {...sortable.attributes}
           {...sortable.listeners}
           onKeyDown={onHandleKeyDown}
-          disabled={pending !== null}
+          disabled={reorderDisabled}
           className="col-start-1 row-start-1 mt-0.5 inline-flex size-7 shrink-0 touch-none items-center justify-center rounded-md text-fg-subtle hover:bg-surface-2 hover:text-fg focus-visible:ring-2 focus-visible:ring-ring/40 pointer-coarse:size-[44px]"
           aria-label={`Reorder queued prompt ${index + 1}`}
           title="Drag to reorder. Press Space, arrows, then Space to drop."
@@ -1015,6 +1054,20 @@ function SortableQueueRow({
             <span className="min-w-0 truncate">{turn.model}</span>
             <span className="shrink-0">{turn.reasoningEffort}</span>
           </div>
+          {pending ? (
+            <div
+              role="status"
+              aria-live="polite"
+              className="mt-1 flex items-center gap-1.5 text-og-xs font-medium text-status-waiting"
+              data-testid={`queue-mutation-${pending}`}
+            >
+              <Loader2Icon
+                aria-hidden="true"
+                className="size-3 shrink-0 animate-spin motion-reduce:animate-none"
+              />
+              {queueMutationPendingLabel(pending)}
+            </div>
+          ) : null}
         </div>
         <div className="col-span-full row-start-3 flex min-w-0 items-start justify-end gap-1.5 sm:col-span-1 sm:col-start-4 sm:row-start-1 sm:gap-2">
           <button
@@ -1142,6 +1195,19 @@ function SortableQueueRow({
   );
 }
 
+function queueMutationPendingLabel(kind: QueueMutationKind): string {
+  switch (kind) {
+    case "move":
+      return "Saving new position…";
+    case "edit":
+      return "Moving to composer…";
+    case "steer":
+      return "Changing direction…";
+    case "delete":
+      return "Deleting…";
+  }
+}
+
 const verticalOnly: Modifier = ({ transform }) => ({ ...transform, x: 0 });
 
 function focusQueueTurn(surface: HTMLElement | null, turnId: string): void {

package/src/components/sandbox-files.tsx

@@ -2,6 +2,7 @@ import { FileCode2Icon, FileWarningIcon, LoaderCircleIcon } from "lucide-react";
 import { type ReactNode, useCallback, useEffect, useRef, useState } from "react";
 import { Group, Panel, Separator } from "react-resizable-panels";
 import { cn } from "../lib/cn";
+import { prefersReducedMotion } from "../lib/motion";
 import { useThemeType } from "../lib/use-theme-type";
 import {
   CapturedFileUnavailableError,
@@ -32,8 +33,14 @@ export type SandboxFilesProps = {
    *  dock warms the box on this so the save lands fast; opening/reading never fires
    *  it. Browsing the tree/diff must not warm a box. */
   onEditIntent?: (() => void) | undefined;
-  /** A guarded diff path routed here by the parent workspace. */
+  /** Restore the file last viewed in this task. Invalid/missing paths still
+   * surface the ordinary file-view error instead of changing files silently. */
+  initialSelectedPath?: string | null | undefined;
+  onSelectedPathChange?: ((path: string | null) => void) | undefined;
+  /** A deliberate file-open path routed here by the parent workspace. */
   requestedPath?: string | undefined;
+  /** 1-based line to reveal after `requestedPath` opens. */
+  requestedLine?: number | null | undefined;
   /** Identity for one guarded-file request. Increment this when the same path is
    *  deliberately requested again; it also lets a pending request be consumed
    *  without overriding later manual tree navigation. Defaults to the path. */
@@ -67,7 +74,10 @@ export function SandboxFiles({
   usePierre = true,
   editable = true,
   onEditIntent,
+  initialSelectedPath,
+  onSelectedPathChange,
   requestedPath,
+  requestedLine,
   requestedPathRequestId,
   requestedPathReady = true,
   workspaceResting = false,
@@ -77,12 +87,18 @@ export function SandboxFiles({
   themeType,
   className,
 }: SandboxFilesProps) {
-  const [selected, setSelected] = useState<string | null>(null);
+  const [selected, setSelected] = useState<string | null>(() => initialSelectedPath ?? null);
   // View vs Edit for the selected file. Resets to View on every new selection so
   // opening a file never lands you in a stale dirty editor for a different path.
   const [editMode, setEditMode] = useState(false);
+  const [focusLine, setFocusLine] = useState<number | null>(null);
+  const [treeRevealRequest, setTreeRevealRequest] = useState<{
+    path: string;
+    requestId: string | number;
+  } | null>(null);
   const [liveRequestedPath, setLiveRequestedPath] = useState<string | null>(null);
   const [viewReloadRevision, setViewReloadRevision] = useState(0);
+  const viewerScrollRef = useRef<HTMLDivElement | null>(null);
   const pendingRequestRef = useRef<string | number | null>(null);
   const handledRequestRef = useRef<string | number | null>(null);
   const requestKey = requestedPath ? (requestedPathRequestId ?? requestedPath) : null;
@@ -91,6 +107,7 @@ export function SandboxFiles({
     if (!requestedPath || requestKey === null) {
       pendingRequestRef.current = null;
       handledRequestRef.current = null;
+      setTreeRevealRequest(null);
       return;
     }
     if (handledRequestRef.current === requestKey) {
@@ -98,13 +115,18 @@ export function SandboxFiles({
     }
     if (!requestedPathReady) {
       pendingRequestRef.current = requestKey;
+      setTreeRevealRequest(null);
       return;
     }
     handledRequestRef.current = requestKey;
     pendingRequestRef.current = null;
     setSelected(requestedPath);
+    onSelectedPathChange?.(requestedPath);
     setEditMode(false);
-  }, [requestKey, requestedPath, requestedPathReady]);
+    setFocusLine(requestedLine != null && requestedLine > 0 ? requestedLine : null);
+    setTreeRevealRequest({ path: requestedPath, requestId: requestKey });
+    setViewReloadRevision((revision) => revision + 1);
+  }, [onSelectedPathChange, requestKey, requestedLine, requestedPath, requestedPathReady]);
 
   // Side-by-side (tree left, viewer right) once the surface is wide enough;
   // stacked (tree over viewer) on a narrow dock. Tracked off the container so it
@@ -147,23 +169,35 @@ export function SandboxFiles({
   const fileView = useFileView(
     viewPath,
     files.readFile,
-    (files.contentRevision ?? 0) + viewReloadRevision,
+    `${files.contentRevision ?? 0}:${viewReloadRevision}`,
   );
 
+  useEffect(() => {
+    if (focusLine === null && viewReloadRevision > 0 && viewerScrollRef.current) {
+      viewerScrollRef.current.scrollTop = 0;
+    }
+  }, [focusLine, viewReloadRevision]);
+
   // Selecting a (different) file always returns to View — never drop the user into
   // an editor whose buffer belongs to the previously-selected path. Manual
   // navigation also consumes a pending guarded-file request: a late cold→warm
   // transition must never pull the user away from the file they chose meanwhile.
-  const selectFile = useCallback((path: string) => {
-    if (pendingRequestRef.current !== null) {
-      handledRequestRef.current = pendingRequestRef.current;
-      pendingRequestRef.current = null;
-    }
-    setSelected(path);
-    setEditMode(false);
-    setLiveRequestedPath(null);
-    setViewReloadRevision(0);
-  }, []);
+  const selectFile = useCallback(
+    (path: string) => {
+      if (pendingRequestRef.current !== null) {
+        handledRequestRef.current = pendingRequestRef.current;
+        pendingRequestRef.current = null;
+      }
+      setSelected(path);
+      onSelectedPathChange?.(path);
+      setEditMode(false);
+      setFocusLine(null);
+      setTreeRevealRequest(null);
+      setLiveRequestedPath(null);
+      setViewReloadRevision(0);
+    },
+    [onSelectedPathChange],
+  );
 
   // A tree file is editable only when it is a real, fully-loaded text file: not
   // binary (would corrupt on save) and not truncated (we only hold a PREFIX). The
@@ -264,6 +298,12 @@ export function SandboxFiles({
           <FileBrowser
             result={files}
             selectedPath={selected ?? undefined}
+            {...(treeRevealRequest
+              ? {
+                  revealPath: treeRevealRequest.path,
+                  revealPathRequestId: treeRevealRequest.requestId,
+                }
+              : {})}
             onSelectFile={selectFile}
             editable={editable}
             emptyState="This directory is empty"
@@ -295,7 +335,11 @@ export function SandboxFiles({
               data-opengeni-selected-file
               className="min-w-0 truncate font-og-mono text-og-xs text-og-fg-muted"
             >
-              {selected ?? "No file selected"}
+              {selected
+                ? focusLine !== null
+                  ? `${selected}:${focusLine}`
+                  : selected
+                : "No file selected"}
             </span>
             {/* View/Edit toggle — only for a real, fully-loaded text file the editor
                 can safely round-trip. Binary/truncated/read-only files never get an
@@ -311,7 +355,11 @@ export function SandboxFiles({
               />
             )}
           </div>
-          <div className="min-h-0 flex-1 overflow-auto">
+          <div
+            ref={viewerScrollRef}
+            className="min-h-0 flex-1 overflow-auto"
+            data-opengeni-file-viewer-scroll
+          >
             {viewPath ? (
               showEditor && fileView.content !== null ? (
                 <CodeEditor
@@ -379,8 +427,9 @@ export function SandboxFiles({
                       loaded). Editing is disabled to avoid corrupting the file.
                     </div>
                   )}
-                  {usePierre ? (
+                  {usePierre && focusLine === null ? (
                     <PierreFile
+                      key={`${viewPath}:${viewReloadRevision}`}
                       path={viewPath}
                       contents={fileView.content}
                       themeType={resolvedTheme}
@@ -391,6 +440,12 @@ export function SandboxFiles({
                       }
                       className="p-1"
                     />
+                  ) : focusLine !== null ? (
+                    <LineNumberedFile
+                      path={viewPath}
+                      contents={fileView.content}
+                      focusLine={focusLine}
+                    />
                   ) : (
                     <pre className="overflow-auto whitespace-pre p-2 font-og-mono text-og-sm text-og-fg">
                       {fileView.content}
@@ -438,6 +493,65 @@ function WakeButton({ children, onClick }: { children: ReactNode; onClick: () =>
   );
 }
 
+function LineNumberedFile({
+  path,
+  contents,
+  focusLine,
+}: {
+  path: string;
+  contents: string;
+  focusLine: number;
+}) {
+  const lines = contents.split("\n");
+  const inRange = focusLine >= 1 && focusLine <= lines.length;
+  const targetRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    targetRef.current?.scrollIntoView({
+      block: "center",
+      behavior: prefersReducedMotion() ? "auto" : "smooth",
+    });
+  }, [path, focusLine, contents]);
+
+  return (
+    <div
+      className="h-full min-h-0 overflow-auto font-og-mono text-og-sm text-og-fg"
+      role="region"
+      aria-label={inRange ? `${path} at line ${focusLine}` : path}
+    >
+      {!inRange ? (
+        <p
+          className="border-b border-og-border bg-og-surface-1 px-2 py-1 text-og-xs text-og-fg-muted"
+          role="status"
+        >
+          Line {focusLine} is past the end of this file.
+        </p>
+      ) : null}
+      <div>
+        {lines.map((text, index) => {
+          const lineNumber = index + 1;
+          const focused = inRange && lineNumber === focusLine;
+          return (
+            <div
+              key={lineNumber}
+              ref={focused ? targetRef : undefined}
+              data-opengeni-file-line={lineNumber}
+              {...(focused ? { "data-opengeni-focus-line": "" } : {})}
+              aria-current={focused ? "location" : undefined}
+              className={cn("flex gap-3 px-2 py-0.5 leading-6", focused && "bg-og-accent-soft")}
+            >
+              <span className="w-11 shrink-0 select-none text-right tabular-nums text-og-fg-subtle">
+                {lineNumber}
+              </span>
+              <pre className="min-w-0 flex-1 whitespace-pre-wrap break-words">{text || " "}</pre>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
 function GitHeader({ git, loading }: { git: SandboxFilesGitSummary; loading: boolean }) {
   if (loading) {
     return (
@@ -542,7 +656,7 @@ type FileViewState = {
 function useFileView(
   path: string | null,
   readFile: UseSandboxFilesResult["readFile"],
-  reloadRevision = 0,
+  reloadRevision: string | number = 0,
 ): FileViewState {
   const previousPathRef = useRef<string | null>(null);
   const [state, setState] = useState<FileViewState>({
@@ -671,7 +785,9 @@ function Notice({
           </span>
         ) : null}
         {title ? <p className="font-medium text-og-fg">{title}</p> : null}
-        <div className="leading-5">{children}</div>
+        <div data-contrast-audited className="leading-5">
+          {children}
+        </div>
       </div>
     </div>
   );