@opengeni/react 2.5.0-canary.2 → 3.0.0-canary.0

package/src/components/chat-composer.tsx

@@ -148,90 +148,94 @@ export function ChatComposer({
   const stackActions = hasControls && Boolean(actionsStart);
 
   return (
-    <Root controller={controller} responsiveBasis={responsiveBasis} className={className}>
-      <Frame>
-        <CommandPalette />
-        <Surface>
-          <PausedState />
-          <RestoredResources />
-          <Attachments />
-          {header}
-          {composer.annotations && composer.annotations.length > 0 ? (
-            <div className="px-3 pt-2 sm:px-4">
-              <TimelineAnnotationsChip
-                annotations={composer.annotations}
-                editable
-                focusAnnotationId={composer.annotationReviewTargetId}
-                onFocusConsumed={composer.clearAnnotationReviewTarget}
-                onUpdate={composer.updateAnnotation}
-                onRemove={composer.removeAnnotation}
-              />
-            </div>
-          ) : null}
-          <Input placeholder={placeholder} autoFocus={autoFocus} />
-          {controller.confirmState ? (
-            <Confirmation />
-          ) : (
-            <Footer
-              data-og-stack-actions={stackActions ? "" : undefined}
-              className={stackActions ? "max-sm:flex-nowrap sm:flex-wrap" : undefined}
-            >
-              <LayoutGroup id="og-composer-footer">
-                {hasControls ? (
-                  <Controls
-                    className={stackActions ? "min-w-0 max-sm:flex-1 sm:w-auto" : undefined}
-                  >
-                    {controlsLeading}
-                    <AttachButton className={attachButtonClassName} />
-                    {transcription ? (
-                      <ComposerTranscriptionControl
-                        {...transcription}
-                        suppressed={transcriptionSuppressed}
-                        className={[transcription.className, transcriptionClassName]
-                          .filter(Boolean)
-                          .join(" ")}
-                      />
-                    ) : null}
-                    {models ? (
-                      <motion.span
-                        layout
-                        transition={{ duration: 0.36, ease: [0.22, 1, 0.36, 1] }}
-                        className="inline-flex min-w-0"
-                      >
-                        <ModelPicker
-                          models={models}
-                          value={selectedModel}
-                          onChange={onSelectModel}
+    <>
+      <Root controller={controller} responsiveBasis={responsiveBasis} className={className}>
+        <Frame>
+          <CommandPalette />
+          <Surface>
+            <PausedState />
+            <RestoredResources />
+            <Attachments />
+            {header}
+            {composer.annotations && composer.annotations.length > 0 ? (
+              <div className="px-3 pt-2 sm:px-4">
+                <TimelineAnnotationsChip
+                  annotations={composer.annotations}
+                  editable
+                  focusAnnotationId={composer.annotationReviewTargetId}
+                  onFocusConsumed={composer.clearAnnotationReviewTarget}
+                  onUpdate={composer.updateAnnotation}
+                  onRemove={composer.removeAnnotation}
+                />
+              </div>
+            ) : null}
+            <Input placeholder={placeholder} autoFocus={autoFocus} />
+            {controller.confirmState ? (
+              <Confirmation />
+            ) : (
+              <Footer
+                data-og-stack-actions={stackActions ? "" : undefined}
+                className={stackActions ? "max-sm:flex-nowrap sm:flex-wrap" : undefined}
+              >
+                <LayoutGroup id="og-composer-footer">
+                  {hasControls ? (
+                    <Controls
+                      className={stackActions ? "min-w-0 max-sm:flex-1 sm:w-auto" : undefined}
+                    >
+                      {controlsLeading}
+                      <AttachButton className={attachButtonClassName} />
+                      {transcription ? (
+                        <ComposerTranscriptionControl
+                          {...transcription}
+                          suppressed={transcriptionSuppressed}
+                          className={[transcription.className, transcriptionClassName]
+                            .filter(Boolean)
+                            .join(" ")}
                         />
-                      </motion.span>
-                    ) : null}
-                    {controlsStart ? (
-                      <motion.span
-                        layout
-                        transition={{ duration: 0.36, ease: [0.22, 1, 0.36, 1] }}
-                        className="inline-flex min-w-0 flex-1 items-center gap-1.5"
-                      >
-                        {controlsStart}
-                      </motion.span>
-                    ) : null}
-                  </Controls>
-                ) : (
-                  <Hint>{hint}</Hint>
-                )}
-                <Actions
-                  className={stackActions ? "max-sm:shrink-0 sm:w-auto sm:justify-end" : undefined}
-                >
-                  {actionsStart}
-                  <PauseButton />
-                  <SendButton />
-                </Actions>
-              </LayoutGroup>
-            </Footer>
-          )}
-        </Surface>
-      </Frame>
-      <Help />
-      <Status />
-    </Root>
+                      ) : null}
+                      {models ? (
+                        <motion.span
+                          layout
+                          transition={{ duration: 0.36, ease: [0.22, 1, 0.36, 1] }}
+                          className="inline-flex min-w-0"
+                        >
+                          <ModelPicker
+                            models={models}
+                            value={selectedModel}
+                            onChange={onSelectModel}
+                          />
+                        </motion.span>
+                      ) : null}
+                      {controlsStart ? (
+                        <motion.span
+                          layout
+                          transition={{ duration: 0.36, ease: [0.22, 1, 0.36, 1] }}
+                          className="inline-flex min-w-0 flex-1 items-center gap-1.5"
+                        >
+                          {controlsStart}
+                        </motion.span>
+                      ) : null}
+                    </Controls>
+                  ) : (
+                    <Hint>{hint}</Hint>
+                  )}
+                  <Actions
+                    className={
+                      stackActions ? "max-sm:shrink-0 sm:w-auto sm:justify-end" : undefined
+                    }
+                  >
+                    {actionsStart}
+                    <PauseButton />
+                    <SendButton />
+                  </Actions>
+                </LayoutGroup>
+              </Footer>
+            )}
+          </Surface>
+        </Frame>
+        <Help />
+        <Status />
+      </Root>
+    </>
   );
 }

package/src/components/composer.tsx

@@ -52,6 +52,7 @@ import {
 } from "../lib/composer-responsive-context";
 import { composerSubmissionErrorMessage, formatBytes, formatRelativeTime } from "../lib/format";
 import type { PickerModelRow } from "../model-policy";
+import { useLightboxOptional } from "../timeline/screenshot-lightbox";
 import { OPEN_WORKSTREAM_CONTROL_EVENT } from "../workstream-control-event";
 import { CommandPalette as CommandPaletteView } from "./command-palette";
 import { ModelPicker as ModelPickerView } from "./model-picker";
@@ -135,6 +136,10 @@ export type ChatComposerMessages = {
   removeRestoredResource: (index: number) => string;
   uploading: string;
   uploadFailed: string;
+  previewAttachment: (name: string) => string;
+  attachmentPreviewLabel: string;
+  downloadAttachment: (name: string) => string;
+  closeAttachmentPreview: string;
   retryAttachment: (name: string) => string;
   retryUpload: string;
   removeAttachment: (name: string) => string;
@@ -198,6 +203,10 @@ export const defaultChatComposerMessages: ChatComposerMessages = {
   removeRestoredResource: (index) => `Remove restored resource ${index + 1}`,
   uploading: "Uploading",
   uploadFailed: "Upload failed",
+  previewAttachment: (name) => `Preview ${name}`,
+  attachmentPreviewLabel: "Attachment preview",
+  downloadAttachment: (name) => `Download ${name}`,
+  closeAttachmentPreview: "Close",
   retryAttachment: (name) => `Retry ${name}`,
   retryUpload: "Retry upload",
   removeAttachment: (name) => `Remove ${name}`,
@@ -367,30 +376,32 @@ export function useChatComposerController({
   const [submitting, setSubmitting] = useState(false);
   const submittingRef = useRef(false);
   const controlOperationRef = useRef(false);
+  const deliveryValue = delivery.value;
+  const setDeliveryValue = delivery.setValue;
   const mountedRef = useRef(true);
-  const deliveredValueRef = useRef(delivery.value);
-  const liveValueRef = useRef(delivery.value);
-  const [renderedValue, setRenderedValue] = useState(delivery.value);
-  const deliveryChanged = delivery.value !== deliveredValueRef.current;
+  const deliveredValueRef = useRef(deliveryValue);
+  const liveValueRef = useRef(deliveryValue);
+  const [renderedValue, setRenderedValue] = useState(deliveryValue);
+  const deliveryChanged = deliveryValue !== deliveredValueRef.current;
   if (deliveryChanged) {
-    deliveredValueRef.current = delivery.value;
-    liveValueRef.current = delivery.value;
+    deliveredValueRef.current = deliveryValue;
+    liveValueRef.current = deliveryValue;
   }
   const setComposerValue = useCallback(
     (next: string) => {
       liveValueRef.current = next;
       setRenderedValue(next);
-      delivery.setValue(next);
+      setDeliveryValue(next);
     },
-    [delivery.setValue],
+    [setDeliveryValue],
   );
-  const visibleValue = deliveryChanged ? delivery.value : renderedValue;
+  const visibleValue = deliveryChanged ? deliveryValue : renderedValue;
 
   useLayoutEffect(() => {
     if (renderedValue !== liveValueRef.current) {
       setRenderedValue(liveValueRef.current);
     }
-  }, [delivery.value, renderedValue]);
+  }, [deliveryValue, renderedValue]);
 
   useEffect(() => {
     mountedRef.current = true;
@@ -935,6 +946,7 @@ export function Attachments() {
       messages={controller.messages}
       onRemove={controller.attachments.remove}
       onRetry={controller.attachments.retry}
+      onRetainPreview={controller.attachments.retainPreview}
     />
   );
 }
@@ -1625,12 +1637,15 @@ function AttachmentChips({
   messages,
   onRemove,
   onRetry,
+  onRetainPreview,
 }: {
   attachments: UseFileAttachmentsResult["attachments"];
   messages: ChatComposerMessages;
   onRemove: (id: string) => void;
   onRetry?: ((id: string) => void) | undefined;
+  onRetainPreview: UseFileAttachmentsResult["retainPreview"];
 }) {
+  const lightbox = useLightboxOptional();
   return (
     <div className="flex flex-wrap gap-2 px-3 py-2">
       {attachments.map((attachment) => {
@@ -1651,7 +1666,34 @@ function AttachmentChips({
                 : "border-og-border bg-og-surface-2",
             )}
           >
-            {attachment.previewUrl ? (
+            {attachment.previewUrl && lightbox ? (
+              <button
+                type="button"
+                className="size-8 shrink-0 overflow-hidden rounded outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent"
+                aria-label={messages.previewAttachment(attachment.name)}
+                onClick={(event) => {
+                  const releasePreview = onRetainPreview(attachment.id);
+                  lightbox.open(
+                    attachment.previewUrl!,
+                    attachment.name,
+                    event.currentTarget,
+                    messages.attachmentPreviewLabel,
+                    attachment.name,
+                    {
+                      download: messages.downloadAttachment(attachment.name),
+                      close: messages.closeAttachmentPreview,
+                    },
+                    releasePreview,
+                  );
+                }}
+              >
+                <img
+                  src={attachment.previewUrl}
+                  alt=""
+                  className="h-full w-full object-cover transition-opacity hover:opacity-80"
+                />
+              </button>
+            ) : attachment.previewUrl ? (
               <img
                 src={attachment.previewUrl}
                 alt=""

package/src/components/file-browser.tsx

@@ -31,6 +31,7 @@ import {
 } from "../lib/use-portal-token-style";
 import { useUnicodeFallbackFonts } from "../lib/use-unicode-fonts";
 import type { FileTreeNode, UseSandboxFilesResult } from "../hooks/use-sandbox-files";
+import { visibleFileTree, type FileNodeVisibilityPredicate } from "../file-node-visibility";
 
 export type FileBrowserProps = {
   /** From `useSandboxFiles(...)`. */
@@ -43,6 +44,8 @@ export type FileBrowserProps = {
   /** Selection callback for the preview pane. */
   onSelectFile?: ((path: string) => void) | undefined;
   selectedPath?: string | undefined;
+  /** Presentation-only node filter. Hidden parents never expose their children. */
+  isNodeVisible?: FileNodeVisibilityPredicate | undefined;
   /** Deliberately reveal this selected path by lazily opening every loaded
    * ancestor and scrolling its row into view. The path is opaque and is never
    * normalized or re-rooted here. */
@@ -183,6 +186,7 @@ export function FileBrowser({
   fallback,
   onSelectFile,
   selectedPath,
+  isNodeVisible,
   revealPath,
   revealPathRequestId,
   renderNode,
@@ -220,6 +224,10 @@ export function FileBrowser({
     () => (typeof document === "undefined" ? null : document.getElementById(treeId)),
     [treeId],
   );
+  const visibleTree = useMemo(
+    () => visibleFileTree(result.tree, isNodeVisible),
+    [isNodeVisible, result.tree],
+  );
 
   useBrowserLayoutEffect(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
@@ -255,11 +263,16 @@ export function FileBrowser({
 
   // The keyboard cursor: an explicitly-navigated node falls back to the
   // externally-selected file so arrow keys pick up where the preview pane is.
-  const cursor = active ?? selectedPath ?? null;
+  const visibleActive = active && findNode(visibleTree, active) ? active : null;
+  const cursor =
+    visibleActive ?? (selectedPath && findNode(visibleTree, selectedPath) ? selectedPath : null);
+  useEffect(() => {
+    if (active !== null && visibleActive === null) setActive(null);
+  }, [active, visibleActive]);
 
   const expand = useCallback(
     async (path: string) => {
-      const node = findNode(result.tree, path);
+      const node = findNode(visibleTree, path);
       if (node && node.kind === "dir" && node.children === undefined) {
         setLoadingPaths((prev) => new Set(prev).add(path));
         try {
@@ -273,7 +286,7 @@ export function FileBrowser({
         }
       }
     },
-    [result],
+    [result, visibleTree],
   );
 
   const open = useCallback(
@@ -286,7 +299,7 @@ export function FileBrowser({
 
   useEffect(() => {
     if (!revealRequest) return;
-    const trace = traceRevealPath(result.tree, revealRequest.path);
+    const trace = traceRevealPath(visibleTree, revealRequest.path);
     if (trace.directories.length > 0) {
       setExpanded((previous) => {
         const next = new Set(previous);
@@ -310,7 +323,7 @@ export function FileBrowser({
     }
     attemptedRevealPathsRef.current.add(frontier);
     void expand(frontier);
-  }, [expand, loadingPaths, result.expandingPaths, result.tree, revealRequest]);
+  }, [expand, loadingPaths, result.expandingPaths, revealRequest, visibleTree]);
 
   const toggle = useCallback(
     async (node: FileTreeNode) => {
@@ -362,9 +375,9 @@ export function FileBrowser({
         }
       }
     };
-    walk(result.tree, 0);
+    walk(visibleTree, 0);
     return items;
-  }, [result.tree, expanded, draftCreate, loadingPaths, result.expandingPaths, cold]);
+  }, [visibleTree, expanded, draftCreate, loadingPaths, result.expandingPaths, cold]);
   const unicodeFontPaths = useMemo(
     () => renderItems.flatMap((item) => (item.type === "node" ? [item.node.path] : [])),
     [renderItems],
@@ -391,9 +404,9 @@ export function FileBrowser({
         if (node.children) visit(node.children);
       });
     };
-    visit(result.tree);
+    visit(visibleTree);
     return positions;
-  }, [result.tree]);
+  }, [visibleTree]);
   const cursorIndex = cursor ? (rowIndexByPath.get(cursor) ?? -1) : -1;
   const activeDescendantId = cursorIndex >= 0 ? `${treeId}-item-${cursorIndex}` : undefined;
 
@@ -485,7 +498,7 @@ export function FileBrowser({
       const draft = draftRename;
       setDraftRename(null);
       if (!draft || !supportsMutation) return;
-      const node = findNode(result.tree, draft.path);
+      const node = findNode(visibleTree, draft.path);
       const trimmed = name.trim().replace(/\/+$/, "");
       if (!node || !trimmed || trimmed === node.name) return;
       const newPath = joinPath(parentOf(draft.path), trimmed);
@@ -502,21 +515,21 @@ export function FileBrowser({
         setBusy(false);
       }
     },
-    [draftRename, supportsMutation, result, selectedPath, active, onSelectFile],
+    [draftRename, supportsMutation, result, selectedPath, active, onSelectFile, visibleTree],
   );
 
   // Begin a new file/folder under the active node's directory (or root).
   const startCreate = useCallback(
     (kind: "file" | "dir") => {
       if (!supportsMutation) return;
-      const anchor = cursor ? findNode(result.tree, cursor) : undefined;
+      const anchor = cursor ? findNode(visibleTree, cursor) : undefined;
       const parent = anchor ? (anchor.kind === "dir" ? anchor.path : parentOf(anchor.path)) : "";
       if (parent) open(parent);
       setDraftRename(null);
       setMenu(null);
       setDraftCreate({ parent, kind });
     },
-    [supportsMutation, cursor, result.tree, open],
+    [supportsMutation, cursor, open, visibleTree],
   );
 
   const startRename = useCallback(
@@ -534,7 +547,7 @@ export function FileBrowser({
     async (targetDir: string, sourcePath: string) => {
       setDragOver(null);
       if (!supportsMutation || !sourcePath) return;
-      const src = findNode(result.tree, sourcePath);
+      const src = findNode(visibleTree, sourcePath);
       if (!src) return;
       // No-op drops: onto its own current parent, onto itself, or into its own subtree.
       if (parentOf(sourcePath) === targetDir) return;
@@ -554,7 +567,7 @@ export function FileBrowser({
         setBusy(false);
       }
     },
-    [supportsMutation, result, selectedPath, active, onSelectFile],
+    [supportsMutation, result, selectedPath, active, onSelectFile, visibleTree],
   );
 
   const onKeyDown = useCallback(
@@ -691,9 +704,9 @@ export function FileBrowser({
     };
   }, [menu]);
 
-  const showErrorEmpty = result.error && result.tree.length === 0 && !draftCreate;
-  const showDegradedTree = result.error && result.tree.length > 0;
-  const showEmpty = !result.loading && result.tree.length === 0 && !draftCreate;
+  const showErrorEmpty = result.error && visibleTree.length === 0 && !draftCreate;
+  const showDegradedTree = result.error && visibleTree.length > 0;
+  const showEmpty = !result.loading && visibleTree.length === 0 && !draftCreate;
   // Retry lives next to the state it explains (the degraded/empty notice), so do
   // not render a second toolbar retry for the same failure.
   const showToolbar = supportsMutation || result.loading;
@@ -934,7 +947,7 @@ export function FileBrowser({
               <ToolbarButton
                 label="Rename"
                 onClick={() => {
-                  const node = cursor ? findNode(result.tree, cursor) : undefined;
+                  const node = cursor ? findNode(visibleTree, cursor) : undefined;
                   if (node) startRename(node);
                 }}
                 disabled={busy || !cursor}
@@ -944,7 +957,7 @@ export function FileBrowser({
               <ToolbarButton
                 label="Delete"
                 onClick={(event) => {
-                  const node = cursor ? findNode(result.tree, cursor) : undefined;
+                  const node = cursor ? findNode(visibleTree, cursor) : undefined;
                   if (node) void runDelete(node, event.currentTarget);
                 }}
                 disabled={busy || !cursor}

package/src/components/human-input-surface.tsx

@@ -1,5 +1,6 @@
 import type { SessionHumanInputRequest, SubmitHumanInputResponseRequest } from "@opengeni/sdk";
 import { useEffect, useMemo, useRef } from "react";
+import { isActionableHumanInputRequest } from "../human-input";
 import { cn } from "../lib/cn";
 import {
   HumanInputForm,
@@ -36,12 +37,15 @@ export function HumanInputSurface({
   const batchTotalRef = useRef(0);
 
   const ordered = useMemo(() => {
-    return [...requests].sort((a, b) => {
-      const aAt = a.createdAt ? Date.parse(a.createdAt) : 0;
-      const bAt = b.createdAt ? Date.parse(b.createdAt) : 0;
-      if (aAt !== bAt) return aAt - bAt;
-      return a.id.localeCompare(b.id);
-    });
+    const now = Date.now();
+    return requests
+      .filter((request) => isActionableHumanInputRequest(request, now))
+      .sort((a, b) => {
+        const aAt = a.createdAt ? Date.parse(a.createdAt) : 0;
+        const bAt = b.createdAt ? Date.parse(b.createdAt) : 0;
+        if (aAt !== bAt) return aAt - bAt;
+        return a.id.localeCompare(b.id);
+      });
   }, [requests]);
 
   useEffect(() => {

package/src/components/message-timeline.tsx

@@ -237,6 +237,13 @@ export type MessageTimelineProps = {
  *   alone is wrong. Late layout while unpinned stays browser-owned.
  */
 const PIN_THRESHOLD_PX = 48;
+/**
+ * A pinned timeline can still have meaningful pre-existing debt while the
+ * tip-follow camera catches up. Surface the existing explicit jump once that
+ * debt is large enough to be useful, without flashing the control for ordinary
+ * line-sized streaming movement.
+ */
+const JUMP_TO_LATEST_CATCHUP_DEBT_PX = 240;
 /**
  * Prefetch older history when the top sentinel is this far from the viewport.
  * After a page loads we stay cool until the reader leaves this band (scrolls
@@ -432,6 +439,8 @@ export function MessageTimeline({
   const bottomSentinelRef = useRef<HTMLDivElement | null>(null);
   const previousBulkFirstKeyRef = useRef<string | null | undefined>(undefined);
   const [pinned, setPinned] = useState(true);
+  const [canSkipTipCatchup, setCanSkipTipCatchup] = useState(false);
+  const canSkipTipCatchupRef = useRef(false);
   const [bulkActive, setBulkActive] = useState(true);
   // Older history prefetch is user-driven: a window shorter than the viewport
   // + rootMargin would otherwise keep the top sentinel intersecting and fetch
@@ -545,15 +554,28 @@ export function MessageTimeline({
     previousBulkFirstKeyRef.current !== firstGroupKey;
   const bulkRender = allGroups.length > 0 && (bulkActive || firstKeyChangedForBulk);
 
+  const applyCanSkipTipCatchup = useCallback((value: boolean) => {
+    if (canSkipTipCatchupRef.current !== value) {
+      canSkipTipCatchupRef.current = value;
+      setCanSkipTipCatchup(value);
+    }
+  }, []);
+
   // The ONLY writer of the pinned flag. Ref and state move together, so
   // behavior (refs read by rAF callbacks) and rendering (the anchor class,
   // the Jump-to-latest button) can never desync.
-  const applyPinned = useCallback((value: boolean) => {
-    if (pinnedRef.current !== value) {
-      pinnedRef.current = value;
-      setPinned(value);
-    }
-  }, []);
+  const applyPinned = useCallback(
+    (value: boolean) => {
+      if (pinnedRef.current !== value) {
+        pinnedRef.current = value;
+        setPinned(value);
+      }
+      if (!value) {
+        applyCanSkipTipCatchup(false);
+      }
+    },
+    [applyCanSkipTipCatchup],
+  );
 
   const rearmOlderPrefetchAfterLeavingTop = useCallback((node: HTMLElement) => {
     if (node.scrollTop > OLDER_PREFETCH_MARGIN_PX) {
@@ -757,8 +779,9 @@ export function MessageTimeline({
         lastClientHeight: node.clientHeight,
         cameraTop: null,
       };
+      applyCanSkipTipCatchup(false);
     },
-    [cancelLeaveFallback, stopFollow, syncScrollBaseline, writeScrollTop],
+    [applyCanSkipTipCatchup, cancelLeaveFallback, stopFollow, syncScrollBaseline, writeScrollTop],
   );
 
   const beginUserMessageDisclosureChange = useCallback(
@@ -965,6 +988,10 @@ export function MessageTimeline({
       followRef.current = result.state;
       writeScrollTop(node, result.scrollTop);
       syncScrollBaseline(node);
+      applyCanSkipTipCatchup(
+        result.state.running &&
+          maxScrollOf(node) - node.scrollTop >= JUMP_TO_LATEST_CATCHUP_DEBT_PX,
+      );
       if (result.state.running) {
         cancelLeaveFallback();
         if (followFrameRef.current == null) {
@@ -981,7 +1008,7 @@ export function MessageTimeline({
         followFrameRef.current = null;
       }
     },
-    [cancelLeaveFallback, stopFollow, syncScrollBaseline, writeScrollTop],
+    [applyCanSkipTipCatchup, cancelLeaveFallback, stopFollow, syncScrollBaseline, writeScrollTop],
   );
   driveFollowRef.current = driveFollow;
 
@@ -1825,9 +1852,10 @@ export function MessageTimeline({
                     ) : null}
                   </AnimatePresence>
                   <AnimatePresence>
-                    {((!pinned && autoFollow) || hasNewer) && autoFollow ? (
+                    {((!pinned && autoFollow) || hasNewer || canSkipTipCatchup) && autoFollow ? (
                       <motion.button
                         type="button"
+                        data-og-jump-to-latest=""
                         initial={{ opacity: 0, y: 8 }}
                         animate={{ opacity: 1, y: 0 }}
                         exit={{ opacity: 0, y: 8 }}