@sentry/junior-dashboard 0.264.0 → 0.266.0

package/src/client/conversations/TranscriptTurnContextView.tsx

@@ -1,66 +1,108 @@
 import { Brain, Braces, ChevronRight, Layers } from "lucide-react";
-import { useId, useState } from "react";
+import {
+  createContext,
+  useContext,
+  useId,
+  useState,
+  type ReactNode,
+} from "react";
 import { createPortal } from "react-dom";
 
+import { DetailsPanel } from "../components/DetailsPanel";
+import { Collapsible, CollapsibleContent } from "../components/ui/collapsible";
 import { Drawer } from "../components/Drawer";
 import type { TranscriptViewTurnContext } from "../types";
 import { formatMessageTimestamp, formatTime } from "../format";
 import { memoryRecallContent, type MemoryRecallContent } from "./turnContext";
-import { cn } from "../styles";
+import { cn, dashboardDisclosureChevronClass } from "../styles";
 import { HighlightText } from "./transcriptSearch";
-import { TranscriptSummary } from "./TranscriptSummary";
+import { TranscriptSummaryTrigger } from "./TranscriptSummary";
 
-/** Show structured context attached to one transcript user message. */
+/** The turn context that a page panel shows, keyed by its message. */
+export type TurnContextSelection = {
+  contexts: TranscriptViewTurnContext[];
+  id: string;
+};
+
+/** Let the page that owns a panel show turn context there. */
+export type TurnContextPanel = {
+  openId?: string;
+  onToggle(selection: TurnContextSelection): void;
+};
+
+const TurnContextPanelContext = createContext<TurnContextPanel | undefined>(
+  undefined,
+);
+
+/**
+ * Route turn context in one transcript to its owner's panel. Without a
+ * `panel`, turn context opens in a modal drawer. Each transcript sets this, so
+ * a nested transcript does not use the panel of the page behind it.
+ */
+export function TurnContextPanelProvider(props: {
+  children: ReactNode;
+  panel?: TurnContextPanel;
+}) {
+  return (
+    <TurnContextPanelContext value={props.panel}>
+      {props.children}
+    </TurnContextPanelContext>
+  );
+}
+
+/**
+ * Show structured context attached to one transcript user message. The panel
+ * keys context by `messageId`, so every control for one message, including a
+ * remounted one, shows the same open state.
+ */
 export function TranscriptTurnContextView(props: {
   contexts: TranscriptViewTurnContext[];
+  messageId?: string;
 }) {
+  const panel = useContext(TurnContextPanelContext);
   const [open, setOpen] = useState(false);
-  const titleId = useId();
+  const instanceId = useId();
+  const id = props.messageId ?? instanceId;
+  const expanded = panel ? panel.openId === id : open;
 
   return (
     <>
       <button
-        aria-haspopup="dialog"
-        aria-expanded={open}
+        aria-haspopup={panel ? undefined : "dialog"}
+        aria-expanded={expanded}
         aria-label="View turn context"
         className={cn(
           "inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-dashboard-text-muted transition-colors hover:bg-dashboard-fill-hover hover:text-dashboard-text focus-visible:bg-dashboard-fill-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus",
-          open && "bg-dashboard-fill-hover text-dashboard-text",
+          expanded && "bg-dashboard-fill-hover text-dashboard-text",
         )}
-        onClick={() => setOpen(true)}
+        data-turn-context-id={id}
+        onClick={() => {
+          if (!panel) return setOpen(true);
+          panel.onToggle({ contexts: props.contexts, id });
+        }}
         title="View context"
         type="button"
       >
         <Layers aria-hidden="true" size={14} strokeWidth={1.8} />
       </button>
 
-      {open
+      {!panel && open
         ? createPortal(
             <Drawer
               closeLabel="Close turn context"
               header={
-                <>
-                  <h2
-                    className="m-0 text-sm font-semibold text-dashboard-text"
-                    id={titleId}
-                  >
-                    Turn context
-                  </h2>
-                  <p className="m-0 mt-1 text-xs text-dashboard-text-muted">
-                    Context supplied with this message
-                  </p>
-                </>
+                <h2
+                  className="m-0 text-sm font-semibold text-dashboard-text"
+                  id={instanceId}
+                >
+                  Turn context
+                </h2>
               }
               onClose={() => setOpen(false)}
-              openKey={titleId}
-              titleId={titleId}
+              openKey={instanceId}
+              titleId={instanceId}
             >
-              {props.contexts.map((context, index) => (
-                <TurnContext
-                  context={context}
-                  key={`${context.pluginName}:${context.kind}:${context.version}:${index}`}
-                />
-              ))}
+              <TurnContextList contexts={props.contexts} />
             </Drawer>,
             document.body,
           )
@@ -69,6 +111,37 @@ export function TranscriptTurnContextView(props: {
   );
 }
 
+/** Show turn context in the page panel: an aside, or a sheet on small screens. */
+export function TurnContextDetails(props: {
+  contexts: TranscriptViewTurnContext[];
+  onClose(): void;
+}) {
+  return (
+    <DetailsPanel
+      label="Turn context"
+      onClose={props.onClose}
+      title={
+        <h2 className="m-0 text-base font-semibold text-dashboard-text">
+          Turn context
+        </h2>
+      }
+    >
+      <div className="px-4 pb-[max(1rem,env(safe-area-inset-bottom))]">
+        <TurnContextList contexts={props.contexts} />
+      </div>
+    </DetailsPanel>
+  );
+}
+
+function TurnContextList(props: { contexts: TranscriptViewTurnContext[] }) {
+  return props.contexts.map((context, index) => (
+    <TurnContext
+      context={context}
+      key={`${context.pluginName}:${context.kind}:${context.version}:${index}`}
+    />
+  ));
+}
+
 function TurnContext(props: { context: TranscriptViewTurnContext }) {
   const memory = memoryRecallContent(props.context);
 
@@ -117,15 +190,17 @@ function MemoryRecall(props: {
   return (
     <div className="overflow-hidden rounded-lg border border-dashboard-border-strong">
       {props.memories.map((memory, index) => (
-        <details
-          className="group/memory border-t border-dashboard-border-strong first:border-t-0"
+        <Collapsible
+          className="border-t border-dashboard-border-strong first:border-t-0"
           key={memory.id}
         >
-          <TranscriptSummary className="flex items-start gap-2.5">
+          <TranscriptSummaryTrigger className="group flex items-start gap-2.5">
             <ChevronRight
               aria-hidden="true"
-              className="mt-0.5 shrink-0 text-dashboard-text-muted transition-transform group-open/memory:rotate-90"
-              size={15}
+              className={cn(
+                dashboardDisclosureChevronClass,
+                "mt-0.5 text-dashboard-text-muted",
+              )}
             />
             <span className="min-w-0 flex-1">
               <span className="flex items-center justify-between gap-3">
@@ -140,39 +215,43 @@ function MemoryRecall(props: {
                 <HighlightText text={memory.content} />
               </span>
             </span>
-          </TranscriptSummary>
-
-          <div className="border-t border-dashboard-border bg-dashboard-fill-faint px-4 py-4">
-            <div className="whitespace-pre-wrap text-sm leading-6 text-dashboard-text">
-              <HighlightText text={memory.content} />
-            </div>
+          </TranscriptSummaryTrigger>
 
-            <dl className="mt-4 grid gap-2 text-xs">
-              <div className="grid grid-cols-[5rem_minmax(0,1fr)] items-start gap-3">
-                <dt className="text-dashboard-text-muted">Memory ID</dt>
-                <dd className="m-0 break-all font-mono text-dashboard-text-muted">
-                  <HighlightText text={memory.id} />
-                </dd>
-              </div>
-              <div className="grid grid-cols-[5rem_minmax(0,1fr)] items-start gap-3">
-                <dt className="text-dashboard-text-muted">Observed</dt>
-                <dd className="m-0 text-dashboard-text-muted">
-                  {formatTime(new Date(memory.observedAtMs).toISOString())}
-                </dd>
-              </div>
-              <div className="grid grid-cols-[5rem_minmax(0,1fr)] items-start gap-3">
-                <dt className="text-dashboard-text-muted">Scope</dt>
-                <dd className="m-0 text-dashboard-text-muted">
-                  {memory.scope}
-                </dd>
-              </div>
-              <div className="grid grid-cols-[5rem_minmax(0,1fr)] items-start gap-3">
-                <dt className="text-dashboard-text-muted">Kind</dt>
-                <dd className="m-0 text-dashboard-text-muted">{memory.kind}</dd>
+          <CollapsibleContent hiddenUntilFound>
+            <div className="border-t border-dashboard-border bg-dashboard-fill-faint px-4 py-4">
+              <div className="whitespace-pre-wrap text-sm leading-6 text-dashboard-text">
+                <HighlightText text={memory.content} />
               </div>
-            </dl>
-          </div>
-        </details>
+
+              <dl className="mt-4 grid gap-2 text-xs">
+                <div className="grid grid-cols-[5rem_minmax(0,1fr)] items-start gap-3">
+                  <dt className="text-dashboard-text-muted">Memory ID</dt>
+                  <dd className="m-0 break-all font-mono text-dashboard-text-muted">
+                    <HighlightText text={memory.id} />
+                  </dd>
+                </div>
+                <div className="grid grid-cols-[5rem_minmax(0,1fr)] items-start gap-3">
+                  <dt className="text-dashboard-text-muted">Observed</dt>
+                  <dd className="m-0 text-dashboard-text-muted">
+                    {formatTime(new Date(memory.observedAtMs).toISOString())}
+                  </dd>
+                </div>
+                <div className="grid grid-cols-[5rem_minmax(0,1fr)] items-start gap-3">
+                  <dt className="text-dashboard-text-muted">Scope</dt>
+                  <dd className="m-0 text-dashboard-text-muted">
+                    {memory.scope}
+                  </dd>
+                </div>
+                <div className="grid grid-cols-[5rem_minmax(0,1fr)] items-start gap-3">
+                  <dt className="text-dashboard-text-muted">Kind</dt>
+                  <dd className="m-0 text-dashboard-text-muted">
+                    {memory.kind}
+                  </dd>
+                </div>
+              </dl>
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
       ))}
       <p className="m-0 border-t border-dashboard-border-strong px-3 py-2 text-xs text-dashboard-text-muted">
         {props.memories.length}{" "}

package/src/client/conversations/TranscriptView.tsx

@@ -1,20 +1,31 @@
+import { useState } from "react";
 import { ArrowDownToLine } from "lucide-react";
 
 import type {
   ConversationTranscript,
   TranscriptViewSubagentPart,
 } from "../types";
-import { Button } from "../components/Button";
+import { Button } from "../components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../components/ui/tooltip";
 import { ConversationTranscriptView } from "./ConversationTranscript";
 import { ConversationEventLog } from "./ConversationEventLog";
 import {
   transcriptBottomVersion,
   transcriptJuniorMessageVersion,
+  useAutoLoadPreviousPage,
   usePinnedTranscriptBottom,
 } from "./transcriptBottomPinning";
 import type { TranscriptViewMode } from "./transcriptRenderModel";
 import { transcriptEmptyClass } from "./transcriptStyles";
 import { TranscriptSearchProvider } from "./transcriptSearch";
+import {
+  TurnContextPanelProvider,
+  type TurnContextPanel,
+} from "./TranscriptTurnContextView";
 
 /** Render one conversation transcript as ordered message and tool events. */
 export function Transcript(props: {
@@ -28,16 +39,20 @@ export function Transcript(props: {
   onSelectedEventSeqChange?(seq: number | undefined): void;
   responding?: boolean;
   search?: string;
+  onSearchChange?(value: string): void;
   selectedEventSeq?: number;
   onOpenSubagentTranscript?: (args: {
     part: TranscriptViewSubagentPart;
     conversation: ConversationTranscript;
   }) => void;
   transcript?: ConversationTranscript;
+  /** Show turn context in the owner's panel. Without it, a drawer opens. */
+  turnContextPanel?: TurnContextPanel;
   view?: TranscriptViewMode;
 }) {
   const view = props.view ?? "rich";
-  const search = props.search ?? "";
+  const [localSearch, setLocalSearch] = useState("");
+  const search = props.search ?? localSearch;
   const historyLabel = view === "raw" ? "events" : "messages";
   const redacted = props.transcript?.eventHistory.status === "redacted";
   const bottomPinning = usePinnedTranscriptBottom({
@@ -54,6 +69,21 @@ export function Transcript(props: {
     },
   });
 
+  const loadPreviousPage = () => {
+    bottomPinning.preserveViewportForPrepend();
+    props.onLoadPreviousPage?.();
+  };
+  const previousPageRef = useAutoLoadPreviousPage({
+    enabled: Boolean(
+      props.onLoadPreviousPage &&
+      props.hasPreviousPage &&
+      !props.loadingPreviousPage &&
+      !props.historyError,
+    ),
+    historyVersion: props.historyVersion ?? "empty",
+    onLoad: loadPreviousPage,
+  });
+
   if (!props.transcript) {
     return (
       <div className={transcriptEmptyClass()}>
@@ -71,16 +101,13 @@ export function Transcript(props: {
           </div>
         ) : null}
         {props.hasPreviousPage || props.loadingPreviousPage ? (
-          <div className="mb-3 flex items-center gap-3">
+          <div className="mb-3 flex items-center gap-3" ref={previousPageRef}>
             <span className="h-px min-w-4 flex-1 bg-dashboard-fill-strong" />
             <button
               aria-label="Load earlier events"
               className="shrink-0 cursor-pointer border-0 bg-transparent px-1 py-0.5 font-sans text-xs font-medium text-dashboard-text-muted transition-colors hover:text-dashboard-text focus-visible:outline focus-visible:outline-1 focus-visible:outline-dashboard-focus/55 disabled:cursor-not-allowed disabled:opacity-50"
               disabled={props.loadingPreviousPage}
-              onClick={() => {
-                bottomPinning.preserveViewportForPrepend();
-                props.onLoadPreviousPage?.();
-              }}
+              onClick={loadPreviousPage}
               title="Load earlier events"
               type="button"
             >
@@ -103,15 +130,18 @@ export function Transcript(props: {
           <ConversationEventLog
             key={props.transcript.conversationId}
             conversation={props.transcript}
+            onSearchChange={props.onSearchChange ?? setLocalSearch}
             onSelectedSeqChange={props.onSelectedEventSeqChange}
             selectedSeq={props.selectedEventSeq}
           />
         ) : (
-          <ConversationTranscriptView
-            onOpenSubagentTranscript={props.onOpenSubagentTranscript}
-            conversation={props.transcript}
-            responding={props.responding ?? props.live ?? false}
-          />
+          <TurnContextPanelProvider panel={props.turnContextPanel}>
+            <ConversationTranscriptView
+              onOpenSubagentTranscript={props.onOpenSubagentTranscript}
+              conversation={props.transcript}
+              responding={props.responding ?? props.live ?? false}
+            />
+          </TurnContextPanelProvider>
         )}
         <div
           aria-hidden="true"
@@ -141,21 +171,27 @@ function JumpToLatestButton(props: {
 
   return (
     <div className="pointer-events-none sticky bottom-3 z-20 flex h-0 justify-center px-3 md:fixed md:inset-x-auto md:bottom-6 md:right-8 md:h-auto md:justify-end md:px-0">
-      <Button
-        aria-label={label}
-        className="pointer-events-auto relative -translate-y-full rounded-lg !border !border-dashboard-border-emphasis !bg-dashboard-surface-active text-dashboard-text shadow-[0_6px_24px_rgba(0,0,0,0.36)] hover:!border-dashboard-border-interactive hover:!bg-dashboard-surface-hover hover:!text-dashboard-text md:translate-y-0"
-        onClick={props.onClick}
-        size="icon"
-        title={label}
-      >
-        <ArrowDownToLine aria-hidden="true" size={16} strokeWidth={2} />
-        {props.hasPendingUpdate ? (
-          <span
-            aria-hidden="true"
-            className="absolute right-1.5 top-1.5 size-2 bg-emerald-300"
-          />
-        ) : null}
-      </Button>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <Button
+              aria-label={label}
+              className="pointer-events-auto relative -translate-y-full rounded-lg !border !border-dashboard-border-emphasis !bg-dashboard-surface-active text-dashboard-text shadow-[0_6px_24px_rgba(0,0,0,0.36)] hover:!border-dashboard-border-interactive hover:!bg-dashboard-surface-hover hover:!text-dashboard-text md:translate-y-0"
+              onClick={props.onClick}
+              size="icon"
+            >
+              <ArrowDownToLine aria-hidden="true" size={16} strokeWidth={2} />
+              {props.hasPendingUpdate ? (
+                <span
+                  aria-hidden="true"
+                  className="absolute right-1.5 top-1.5 size-2 bg-emerald-300"
+                />
+              ) : null}
+            </Button>
+          }
+        />
+        <TooltipContent size="compact">{label}</TooltipContent>
+      </Tooltip>
     </div>
   );
 }

package/src/client/conversations/eventLog.ts

@@ -111,6 +111,7 @@ export function eventLogTone(data: ConversationReportEventData): string {
   }
   if (
     (data.type === "guardian_action_reviewed" && data.decision === "ask") ||
+    (data.type === "turn_lifecycle" && data.state === "blocked") ||
     (data.type === "subagent" &&
       (data.status === "aborted" || data.status === "blocked"))
   ) {
@@ -118,3 +119,60 @@ export function eventLogTone(data: ConversationReportEventData): string {
   }
   return "text-dashboard-text-subtle";
 }
+
+/** One event log entry with its display text. */
+export type EventLogRow = {
+  event: ConversationReportEvent;
+  summary: string;
+  metadata: string;
+};
+
+/** Build the display text for each event log entry. */
+export function eventLogRows(
+  events: readonly ConversationReportEvent[],
+): EventLogRow[] {
+  return events.map((event) => {
+    const model = eventLogModel(event);
+    return {
+      event,
+      summary: eventLogSummary(event.data).replace(/\s+/g, " ").slice(0, 300),
+      metadata: [
+        model?.modelId,
+        model?.modelProfile,
+        model?.reasoningLevel && `${model.reasoningLevel} reasoning`,
+        eventLogUsage(event),
+      ]
+        .filter(Boolean)
+        .join(" · "),
+    };
+  });
+}
+
+/**
+ * Keep the rows that match a trimmed, lowercase search query. The match
+ * includes the full event payload, so large payloads are serialized here.
+ */
+export function filterEventLogRows(
+  rows: EventLogRow[],
+  normalizedQuery: string,
+): EventLogRow[] {
+  if (!normalizedQuery) return rows;
+  return rows.filter(({ event, summary, metadata }) =>
+    `${summary} ${metadata} ${JSON.stringify(event)}`
+      .toLowerCase()
+      .includes(normalizedQuery),
+  );
+}
+
+/** Find the visible rows before and after the selected event. */
+export function adjacentEventLogSeqs(
+  rows: readonly EventLogRow[],
+  seq: number | undefined,
+): { previous?: number; next?: number } {
+  const index = rows.findIndex((row) => row.event.seq === seq);
+  if (index === -1) return {};
+  return {
+    previous: rows[index - 1]?.event.seq,
+    next: rows[index + 1]?.event.seq,
+  };
+}

package/src/client/conversations/eventTime.ts

@@ -0,0 +1,60 @@
+import { useMemo } from "react";
+import { useLocalStorage } from "@uidotdev/usehooks";
+
+const storageKey = "junior:event-log:time-mode";
+
+/** Share the browser-only UTC/local preference between event rows and details. */
+export function useEventTime() {
+  const [mode, setMode] = useLocalStorage<"utc" | "local">(storageKey, "utc");
+  const local = mode === "local";
+  const localTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const timeZone = local ? localTimeZone : "UTC";
+  const formatters = useMemo(() => {
+    const clock: Intl.DateTimeFormatOptions = {
+      timeZone,
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+      fractionalSecondDigits: 3,
+      hourCycle: "h23",
+      numberingSystem: "latn",
+    };
+    return {
+      clock: new Intl.DateTimeFormat("en-GB", clock),
+      timestamp: new Intl.DateTimeFormat(undefined, {
+        ...clock,
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+        timeZoneName: "short",
+      }),
+      // A log can span both standard time and daylight-saving time.
+      zone: new Intl.DateTimeFormat(undefined, {
+        timeZone,
+        timeZoneName: "shortGeneric",
+      }),
+    };
+  }, [timeZone]);
+  const label = local
+    ? (formatters.zone
+        .formatToParts()
+        .find((part) => part.type === "timeZoneName")?.value ?? localTimeZone)
+    : "UTC";
+
+  return {
+    local,
+    label,
+    title: local
+      ? `${localTimeZone} · Switch to UTC`
+      : `UTC · Switch to local time (${localTimeZone})`,
+    toggle() {
+      setMode(local ? "utc" : "local");
+    },
+    formatClock(value: string) {
+      return formatters.clock.format(new Date(value));
+    },
+    formatTimestamp(value: string) {
+      return local ? formatters.timestamp.format(new Date(value)) : value;
+    },
+  };
+}

package/src/client/conversations/queries.ts

@@ -663,6 +663,35 @@ export function useConversationData(conversationId: string | undefined) {
       },
     );
   }, [conversationId, detailData, mailbox, outbox.data, queryClient]);
+  // The title is generated after the first message, and only the open
+  // Conversation polls. Copy a newer title into loaded feeds, such as the
+  // sidebar and the home list, so they do not keep the old one.
+  const displayTitle = detail.data?.displayTitle;
+  const detailUpdatedAt = detail.dataUpdatedAt;
+  useEffect(() => {
+    if (!conversationId || !displayTitle) return;
+    const feeds = queryClient
+      .getQueryCache()
+      .findAll({ queryKey: ["dashboard", "conversations"] });
+    for (const query of feeds) {
+      const feed = query.state.data as ConversationFeed | undefined;
+      if (!feed || query.state.dataUpdatedAt > detailUpdatedAt) continue;
+      const stale = feed.conversations.some(
+        (conversation) =>
+          conversation.conversationId === conversationId &&
+          conversation.displayTitle !== displayTitle,
+      );
+      if (!stale) continue;
+      queryClient.setQueryData<ConversationFeed>(query.queryKey, {
+        ...feed,
+        conversations: feed.conversations.map((conversation) =>
+          conversation.conversationId === conversationId
+            ? { ...conversation, displayTitle }
+            : conversation,
+        ),
+      });
+    }
+  }, [conversationId, detailUpdatedAt, displayTitle, queryClient]);
   const historyStatus = detailData?.eventHistory.status;
   const historyQueryKey = useMemo(
     () => ["conversation", conversationId, "history", historyStatus] as const,

package/src/client/conversations/transcriptBottomPinning.ts

@@ -15,6 +15,7 @@ import type { ConversationTranscript } from "../types";
 import type { TranscriptViewMode } from "./transcriptRenderModel";
 
 const BOTTOM_PROXIMITY_PX = 96;
+const PREVIOUS_PAGE_PROXIMITY_PX = 600;
 const USER_SCROLL_DELTA_PX = 2;
 
 type ScrollRoot = HTMLElement | Window;
@@ -650,6 +651,39 @@ export function usePinnedTranscriptBottom(input: {
   );
 }
 
+/** Load the previous history page when the reader scrolls near the top. */
+export function useAutoLoadPreviousPage(input: {
+  enabled: boolean;
+  historyVersion: string;
+  onLoad: () => void;
+}): RefCallback<HTMLElement> {
+  const [sentinel, setSentinel] = useState<HTMLElement | null>(null);
+  const onLoadRef = useRef(input.onLoad);
+  onLoadRef.current = input.onLoad;
+
+  useEffect(() => {
+    if (!input.enabled || !sentinel) return;
+    if (typeof IntersectionObserver === "undefined") return;
+
+    const root = scrollRootFor(sentinel);
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (!entries.some((entry) => entry.isIntersecting)) return;
+        observer.disconnect();
+        onLoadRef.current();
+      },
+      {
+        root: root && !isWindowRoot(root) ? root : null,
+        rootMargin: `${PREVIOUS_PAGE_PROXIMITY_PX}px 0px 0px 0px`,
+      },
+    );
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [input.enabled, input.historyVersion, sentinel]);
+
+  return setSentinel;
+}
+
 /** Keep the previously visible content at the same viewport offset after a prepend. */
 export function scrollTopAfterPrepend(
   previous: Pick<ScrollSnapshot, "scrollHeight" | "scrollTop">,