@sentry/junior-dashboard 0.280.0 → 0.281.0

package/src/client/conversations/ConversationTranscript.tsx

@@ -1,4 +1,11 @@
-import { memo, useMemo, useRef, type ReactNode } from "react";
+import {
+  memo,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
 import { History } from "lucide-react";
 import type { ConversationMailboxMessage } from "./conversationOutbox";
 
@@ -20,11 +27,7 @@ import type {
 } from "../types";
 import { TranscriptSubagentView } from "./TranscriptSubagentView";
 import { TranscriptContextEventView } from "./TranscriptContextEventView";
-import {
-  isCollapsibleActivityEntry,
-  quietTurnEntryKeys,
-  TranscriptActivityGroup,
-} from "./TranscriptActivityGroup";
+import { TranscriptActivityGroup } from "./TranscriptActivityGroup";
 import { TranscriptToolView } from "./TranscriptToolView";
 import { TranscriptReasoningView } from "./TranscriptReasoningView";
 import { TranscriptAttachmentsDeliveredView } from "./TranscriptAttachmentsDeliveredView";
@@ -50,16 +53,23 @@ import {
   TranscriptAutomationTriggerView,
 } from "./TranscriptAutomationTriggerView";
 import { TranscriptTypingIndicator } from "./TranscriptTypingIndicator";
+import { groupTranscriptMessages } from "./transcriptRenderModel";
+import { useTranscriptSearch } from "./transcriptSearch";
 import {
-  groupTranscriptMessages,
-  type RenderedTranscriptEntry,
-} from "./transcriptRenderModel";
-import { entryMatchesSearch, useTranscriptSearch } from "./transcriptSearch";
-import {
+  TranscriptOpenRows,
   TranscriptRow,
   TranscriptRows,
   TranscriptUnreadMarker,
 } from "./TranscriptRows";
+import {
+  defaultTranscriptRowSize,
+  rowIndexForSeq,
+  transcriptListRows,
+  transcriptRowSizeClass,
+  UNREAD_MARKER_KEY,
+  type TranscriptListRow,
+} from "./transcriptListRows";
+import { useVirtualRows } from "./virtualRows";
 import { TranscriptTimestampProvider } from "./TranscriptTimestamp";
 import type { TranscriptUnreadRange } from "./transcriptReadPosition";
 
@@ -81,7 +91,11 @@ type TranscriptToolEntry = Extract<TranscriptEntry, { kind: "tool" }>;
 
 function renderReasoningEntry(entry: TranscriptReasoningEntry): ReactNode {
   return (
-    <TranscriptReasoningView part={entry.part} timestamp={entry.timestamp} />
+    <TranscriptReasoningView
+      openKey={entry.key}
+      part={entry.part}
+      timestamp={entry.timestamp}
+    />
   );
 }
 
@@ -96,6 +110,10 @@ export const ConversationTranscriptView = memo(
     /** Sends that history does not have yet. History wins on message id. */
     pendingMessages?: readonly ConversationMailboxMessage[];
     responding?: boolean;
+    /** Keep the rows around this event seq mounted, to show it. */
+    revealSeq?: number;
+    /** The row that holds the reader's place, from the scroll owner. */
+    scrollAnchorKey?: () => string | undefined;
     /** Show the "New" marker before the first row in this range. */
     unread?: TranscriptUnreadRange;
   }) {
@@ -119,6 +137,8 @@ export const ConversationTranscriptView = memo(
             conversation={props.conversation}
             messages={messages}
             responding={props.responding}
+            revealSeq={props.revealSeq}
+            scrollAnchorKey={props.scrollAnchorKey}
             unread={props.unread}
           />
         </section>
@@ -127,16 +147,22 @@ export const ConversationTranscriptView = memo(
   },
 );
 
-function SegmentEvents(props: {
-  onOpenSubagentTranscript?: (args: {
-    part: TranscriptViewSubagentPart;
+function SegmentEvents(
+  props: TranscriptListPlacement & {
+    onOpenSubagentTranscript?: (args: {
+      part: TranscriptViewSubagentPart;
+      conversation: ConversationTranscript;
+    }) => void;
     conversation: ConversationTranscript;
-  }) => void;
-  conversation: ConversationTranscript;
-  messages: TranscriptViewMessage[];
-  responding?: boolean;
-  unread?: TranscriptUnreadRange;
-}) {
+    messages: TranscriptViewMessage[];
+    responding?: boolean;
+    unread?: TranscriptUnreadRange;
+  },
+) {
+  const placement = {
+    revealSeq: props.revealSeq,
+    scrollAnchorKey: props.scrollAnchorKey,
+  };
   return (
     <TranscriptRows>
       {props.conversation.eventHistory.status === "expired" ? (
@@ -146,6 +172,7 @@ function SegmentEvents(props: {
         />
       ) : props.conversation.eventHistory.status === "available" ? (
         <VisibleTranscriptEntries
+          {...placement}
           onOpenSubagentTranscript={props.onOpenSubagentTranscript}
           transcript={props.messages}
           conversation={props.conversation}
@@ -154,12 +181,14 @@ function SegmentEvents(props: {
       ) : props.conversation.eventHistory.status === "redacted" &&
         props.messages.length > 0 ? (
         <RedactedTranscriptView
+          {...placement}
           onOpenSubagentTranscript={props.onOpenSubagentTranscript}
           conversation={props.conversation}
           messages={props.messages}
         />
       ) : props.messages.length > 0 ? (
         <VisibleTranscriptEntries
+          {...placement}
           onOpenSubagentTranscript={props.onOpenSubagentTranscript}
           transcript={props.messages}
           conversation={props.conversation}
@@ -214,15 +243,17 @@ function ExpiredTranscriptView(props: {
   );
 }
 
-const VisibleTranscriptEntries = memo(function VisibleTranscriptEntries(props: {
-  onOpenSubagentTranscript?: (args: {
-    part: TranscriptViewSubagentPart;
+const VisibleTranscriptEntries = memo(function VisibleTranscriptEntries(
+  props: TranscriptListPlacement & {
+    onOpenSubagentTranscript?: (args: {
+      part: TranscriptViewSubagentPart;
+      conversation: ConversationTranscript;
+    }) => void;
+    transcript: TranscriptViewMessage[];
     conversation: ConversationTranscript;
-  }) => void;
-  transcript: TranscriptViewMessage[];
-  conversation: ConversationTranscript;
-  unread?: TranscriptUnreadRange;
-}) {
+    unread?: TranscriptUnreadRange;
+  },
+) {
   const entries = useMemo(
     () => groupTranscriptMessages(props.transcript),
     [props.transcript],
@@ -230,7 +261,11 @@ const VisibleTranscriptEntries = memo(function VisibleTranscriptEntries(props: {
   return (
     <TranscriptEntryList
       entries={entries}
+      // Open rows and row sizes belong to one Conversation.
+      key={props.conversation.conversationId}
       keyPrefix={props.conversation.conversationId}
+      revealSeq={props.revealSeq}
+      scrollAnchorKey={props.scrollAnchorKey}
       unread={props.unread}
       renderContext={(entry) => (
         <TranscriptRailEvent kind="compaction">
@@ -264,7 +299,7 @@ const VisibleTranscriptEntries = memo(function VisibleTranscriptEntries(props: {
             kind="event"
             objectType={entry.message.eventObjectType}
           >
-            <TranscriptEventView message={entry.message} />
+            <TranscriptEventView message={entry.message} openKey={entry.key} />
             <TranscriptRecalledMemories
               className="mt-1"
               message={entry.message}
@@ -341,9 +376,7 @@ const VisibleTranscriptEntries = memo(function VisibleTranscriptEntries(props: {
   );
 });
 
-function TranscriptEntryList(props: {
-  entries: TranscriptEntry[];
-  keyPrefix: string;
+type TranscriptEntryRenderers = {
   renderAttachmentsDelivered: (
     entry: TranscriptAttachmentsDeliveredEntry,
   ) => ReactNode;
@@ -354,179 +387,194 @@ function TranscriptEntryList(props: {
   renderReasoning: (entry: TranscriptReasoningEntry) => ReactNode;
   renderSubagent: (entry: TranscriptSubagentEntry) => ReactNode;
   renderTool: (entry: TranscriptToolEntry) => ReactNode;
-  unread?: TranscriptUnreadRange;
-}) {
+};
+
+/**
+ * Render transcript entries as list rows. Only the rows near the viewport
+ * mount. These rows also stay mounted, because the scroll owner and the
+ * page find them in the DOM: the row that holds the reader's place, the
+ * "New" marker and the row after it, and the rows around `revealSeq`.
+ */
+function TranscriptEntryList(
+  props: TranscriptEntryRenderers &
+    TranscriptListPlacement & {
+      entries: TranscriptEntry[];
+      keyPrefix: string;
+      unread?: TranscriptUnreadRange;
+    },
+) {
   const search = useTranscriptSearch();
   const activityKeys = useRef(new Map<string, string>());
-  const quietKeys = useMemo(
-    () => quietTurnEntryKeys(props.entries),
-    [props.entries],
+  const [openRows] = useState(() => new Map<string, boolean>());
+  const listRef = useRef<HTMLDivElement>(null);
+  const searchQuery = search.active ? search.normalizedQuery : undefined;
+  const rows = useMemo(
+    () =>
+      transcriptListRows({
+        entries: props.entries,
+        keyPrefix: props.keyPrefix,
+        knownActivityKeys: activityKeys.current,
+        search: searchQuery,
+        unread: props.unread,
+      }),
+    [props.entries, props.keyPrefix, props.unread, searchQuery],
   );
-  const collapsible = (entry: TranscriptEntry) =>
-    isCollapsibleActivityEntry(entry) || quietKeys.has(entry.key);
-  const claimedActivityKeys = new Set<string>();
-  const rows: ReactNode[] = [];
-  // Search results are not a reading order, so they get no marker.
-  const markerSeq = search.active
-    ? undefined
-    : unreadMarkerSeq(props.entries, props.unread);
-  let unreadMarkerPending = markerSeq !== undefined;
-  // Entries are in seq order, so the first row that reaches the marker seq
-  // gets the marker.
-  const pushRow = (seq: number | undefined, row: ReactNode) => {
-    if (unreadMarkerPending && seq !== undefined && seq >= markerSeq!) {
-      unreadMarkerPending = false;
-      rows.push(<TranscriptUnreadMarker key="unread-marker" />);
-    }
-    rows.push(row);
-  };
-
-  const renderEntry = (entry: TranscriptEntry): ReactNode => {
-    if (entry.kind === "subagent") return props.renderSubagent(entry);
-    if (entry.kind === "context") return props.renderContext(entry);
-    if (entry.kind === "attachments_delivered") {
-      return props.renderAttachmentsDelivered(entry);
-    }
-    if (entry.kind === "structured_event") {
-      return props.renderStructuredEvent(entry);
-    }
-    if (entry.kind === "failure") return props.renderFailure(entry);
-    if (entry.kind === "reasoning") return props.renderReasoning(entry);
-    if (entry.kind === "tool") return props.renderTool(entry);
-    return props.renderMessage(entry);
-  };
-
-  for (let index = 0; index < props.entries.length; ) {
-    const entry = props.entries[index]!;
-
-    if (collapsible(entry)) {
-      const activityEntries: RenderedTranscriptEntry[] = [];
-      while (
-        index < props.entries.length &&
-        collapsible(props.entries[index]!)
-      ) {
-        activityEntries.push(props.entries[index]!);
-        index += 1;
+  const indexByKey = useMemo(
+    () => new Map(rows.map((row, index) => [row.key, index])),
+    [rows],
+  );
+  const anchorKey = props.scrollAnchorKey?.();
+  const markerIndex = indexByKey.get(UNREAD_MARKER_KEY);
+  // A memory row can sit at its event or on the message before it.
+  const revealIndex =
+    props.revealSeq === undefined
+      ? undefined
+      : rowIndexForSeq(rows, props.revealSeq);
+  const virtualizer = useVirtualRows({
+    count: rows.length,
+    defaultSize: defaultTranscriptRowSize,
+    // The gap between rows, like the gap of the transcript stack.
+    gap: 4,
+    getItemKey: (index) => rows[index]!.key,
+    keptIndexes: [
+      anchorKey === undefined ? undefined : indexByKey.get(anchorKey),
+      // The scroll owner opens at the marker and holds the reader's place
+      // at the first unread row after it.
+      markerIndex,
+      markerIndex === undefined ? undefined : markerIndex + 1,
+      revealIndex,
+      revealIndex === undefined ? undefined : revealIndex - 1,
+    ],
+    listRef,
+    sizeClass: (index) => transcriptRowSizeClass(rows[index]!),
+  });
+  // Rows render again only when the renderers change, not on each scroll.
+  const {
+    renderAttachmentsDelivered,
+    renderContext,
+    renderFailure,
+    renderMessage,
+    renderReasoning,
+    renderStructuredEvent,
+    renderSubagent,
+    renderTool,
+  } = props;
+  const renderEntry = useCallback(
+    (entry: TranscriptEntry): ReactNode => {
+      if (entry.kind === "subagent") return renderSubagent(entry);
+      if (entry.kind === "context") return renderContext(entry);
+      if (entry.kind === "attachments_delivered") {
+        return renderAttachmentsDelivered(entry);
       }
-      const visibleEntries = search.active
-        ? activityEntries.filter((candidate) =>
-            entryMatchesSearch(candidate, search.normalizedQuery),
-          )
-        : activityEntries;
-      if (visibleEntries.length > 0) {
-        const activityKey = stableActivityGroupKey({
-          claimedKeys: claimedActivityKeys,
-          entries: activityEntries,
-          keyPrefix: props.keyPrefix,
-          knownKeys: activityKeys.current,
-        });
-        const lastSeq = lastEntrySeq(activityEntries);
-        // The marker goes before the group when any of it is unread.
-        pushRow(
-          lastSeq,
-          <TranscriptRow
-            anchorKey={activityKey}
-            indent
-            key={activityKey}
-            seq={lastSeq}
-          >
-            <TranscriptActivityGroup
-              entries={visibleEntries}
-              renderEntry={renderEntry}
-            />
-          </TranscriptRow>,
-        );
+      if (entry.kind === "structured_event") {
+        return renderStructuredEvent(entry);
       }
-      continue;
-    }
-
-    if (!search.active || entryMatchesSearch(entry, search.normalizedQuery)) {
-      const rowKey = `${props.keyPrefix}:${entry.key}`;
-      pushRow(
-        entry.seq,
-        <TranscriptRow anchorKey={rowKey} key={rowKey} seq={entry.seq}>
-          {renderEntry(entry)}
-        </TranscriptRow>,
-      );
-    }
-    index += 1;
-  }
+      if (entry.kind === "failure") return renderFailure(entry);
+      if (entry.kind === "reasoning") return renderReasoning(entry);
+      if (entry.kind === "tool") return renderTool(entry);
+      return renderMessage(entry);
+    },
+    [
+      renderAttachmentsDelivered,
+      renderContext,
+      renderFailure,
+      renderMessage,
+      renderReasoning,
+      renderStructuredEvent,
+      renderSubagent,
+      renderTool,
+    ],
+  );
 
   if (search.active && rows.length === 0) {
     return <EmptyTelemetry>No events match your search.</EmptyTelemetry>;
   }
 
-  // Let rows participate in the parent transcript stack so messages, tool
-  // groups, and the thinking indicator share one vertical gap.
-  return rows;
+  return (
+    <TranscriptOpenRows value={openRows}>
+      <div
+        className="relative min-w-0"
+        ref={listRef}
+        style={{ height: virtualizer.getTotalSize() }}
+      >
+        {virtualizer.getVirtualItems().map((item) => (
+          <VirtualTranscriptRow
+            index={item.index}
+            key={item.key}
+            measure={virtualizer.measureElement}
+            offset={item.start - virtualizer.options.scrollMargin}
+            renderEntry={renderEntry}
+            row={rows[item.index]!}
+          />
+        ))}
+      </div>
+    </TranscriptOpenRows>
+  );
 }
 
+/** Where the list keeps rows mounted outside the viewport. */
+type TranscriptListPlacement = {
+  /** Keep the rows around this event seq mounted, to show it. */
+  revealSeq?: number;
+  /** The row that holds the reader's place, from the scroll owner. */
+  scrollAnchorKey?: () => string | undefined;
+};
+
 /**
- * Find the seq of the first unread row. Entries are in seq order, and pending
- * sends without a seq come last, so a binary search finds the first seq after
- * the read position. Rows after the range arrived after open, so they get no
- * marker.
+ * Place one list row at its offset. Rows render again only when their row
+ * or offset changes, not when the mounted range changes.
  */
-function unreadMarkerSeq(
-  entries: readonly TranscriptEntry[],
-  unread: TranscriptUnreadRange | undefined,
-): number | undefined {
-  if (!unread) return undefined;
-  let low = 0;
-  let high = entries.length;
-  while (low < high) {
-    const middle = (low + high) >> 1;
-    const seq = entries[middle]!.seq;
-    if (seq !== undefined && seq <= unread.afterSeq) low = middle + 1;
-    else high = middle;
-  }
-  const seq = entries[low]?.seq;
-  return seq !== undefined && seq <= unread.throughSeq ? seq : undefined;
-}
-
-function lastEntrySeq(
-  entries: readonly RenderedTranscriptEntry[],
-): number | undefined {
-  for (let index = entries.length - 1; index >= 0; index -= 1) {
-    const seq = entries[index]!.seq;
-    if (seq !== undefined) return seq;
-  }
-  return undefined;
-}
-
-/** Keep one activity group mounted while new or historical events extend either edge. */
-function stableActivityGroupKey(args: {
-  claimedKeys: Set<string>;
-  entries: RenderedTranscriptEntry[];
-  keyPrefix: string;
-  knownKeys: Map<string, string>;
-}): string {
-  const entryKeys = args.entries.map(
-    (entry) => `${args.keyPrefix}:${entry.key}`,
+const VirtualTranscriptRow = memo(function VirtualTranscriptRow(props: {
+  index: number;
+  measure: (element: HTMLElement | null) => void;
+  offset: number;
+  renderEntry: (entry: TranscriptEntry) => ReactNode;
+  row: TranscriptListRow;
+}) {
+  const { row } = props;
+  return (
+    <div
+      className="absolute left-0 top-0 w-full"
+      data-index={props.index}
+      ref={props.measure}
+      style={{ transform: `translateY(${props.offset}px)` }}
+    >
+      {row.kind === "unread_marker" ? (
+        <TranscriptUnreadMarker />
+      ) : row.kind === "activity" ? (
+        <TranscriptRow anchorKey={row.key} indent seq={row.seq}>
+          <TranscriptActivityGroup
+            entries={row.entries}
+            openKey={row.key}
+            renderEntry={props.renderEntry}
+          />
+        </TranscriptRow>
+      ) : (
+        <TranscriptRow anchorKey={row.key} seq={row.seq}>
+          {props.renderEntry(row.entry)}
+        </TranscriptRow>
+      )}
+    </div>
   );
-  const knownKey = entryKeys
-    .map((entryKey) => args.knownKeys.get(entryKey))
-    .find((key) => key !== undefined && !args.claimedKeys.has(key));
-  const groupKey =
-    knownKey ?? `${args.keyPrefix}:activity:${args.entries[0]!.key}`;
-
-  args.claimedKeys.add(groupKey);
-  entryKeys.forEach((entryKey) => args.knownKeys.set(entryKey, groupKey));
-  return groupKey;
-}
+});
 
-function RedactedTranscriptView(props: {
-  onOpenSubagentTranscript?: (args: {
-    part: TranscriptViewSubagentPart;
+function RedactedTranscriptView(
+  props: TranscriptListPlacement & {
+    onOpenSubagentTranscript?: (args: {
+      part: TranscriptViewSubagentPart;
+      conversation: ConversationTranscript;
+    }) => void;
     conversation: ConversationTranscript;
-  }) => void;
-  conversation: ConversationTranscript;
-  messages: TranscriptViewMessage[];
-}) {
+    messages: TranscriptViewMessage[];
+  },
+) {
   return (
     <TranscriptEntryList
       entries={groupTranscriptMessages(props.messages)}
+      key={props.conversation.conversationId}
       keyPrefix={`${props.conversation.conversationId}:redacted`}
+      revealSeq={props.revealSeq}
+      scrollAnchorKey={props.scrollAnchorKey}
       renderContext={(entry) => (
         <TranscriptRailEvent kind="compaction">
           <TranscriptContextEventView
@@ -556,7 +604,7 @@ function RedactedTranscriptView(props: {
             kind="event"
             objectType={entry.message.eventObjectType}
           >
-            <TranscriptEventView message={entry.message} />
+            <TranscriptEventView message={entry.message} openKey={entry.key} />
           </TranscriptRailEvent>
         ) : entry.message.context ? (
           <TranscriptRailEvent kind="message_context">