@sentry/junior-dashboard 0.279.0 → 0.281.0

package/src/client/conversations/ConversationPage.tsx

@@ -1,25 +1,33 @@
 import {
   useCallback,
   useEffect,
+  useEffectEvent,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
   useSyncExternalStore,
   type ReactNode,
 } from "react";
-import { useSearchParams } from "react-router";
+import { useNavigate, useSearchParams } from "react-router";
 import type {
   ConversationDetailReport,
   ConversationFeed,
+  ConversationReportEvent,
 } from "@sentry/junior/api/schema";
 
 import type { ConversationData } from "./queries";
 import {
   useArchiveConversation,
+  type ArchivedFromConversationState,
   type PendingArchiveConversationUpdate,
 } from "./conversationArchive";
 import { usePinConversation } from "./usePinConversation";
 import { conversationIsResponding } from "./transcript";
+import {
+  ConversationCatchUpContext,
+  useConversationCatchUp,
+} from "./conversationCatchUpState";
 import { buildConversationMarkdown } from "../markdownExport";
 import { CopyButton } from "../components/CopyButton";
 import {
@@ -39,6 +47,7 @@ import {
   memoryAnchorKey,
   useConversationMemories,
   type ConversationMemoryState,
+  type MemoryJump,
   type OpenMemoryPopover,
 } from "./conversationMemory";
 import { ConversationEventDetails } from "./ConversationEventDetails";
@@ -57,14 +66,13 @@ import {
 import { cn } from "../styles";
 import { ConversationForkLinks } from "./ConversationForkLinks";
 import { ConversationAgentTree } from "./ConversationAgentTree";
+import { conversationContextTags } from "./ConversationContextTags";
 import { conversationLinks } from "./ConversationLinkedWork";
 import {
   ConversationAnnotations,
   conversationCost,
-  conversationLocation,
   ConversationPrivacyChip,
   ConversationStats,
-  hasConversationAnnotations,
   hasConversationStats,
 } from "./ConversationMeta";
 import {
@@ -100,9 +108,10 @@ import {
 import { TranscriptLoading } from "./TranscriptLoading";
 import { recordTranscriptShown } from "../sentry";
 import {
-  useUnreadHistory,
+  useHistoryAround,
+  type HistoryStart,
   type TranscriptHistory,
-} from "./transcriptUnreadHistory";
+} from "./transcriptAroundHistory";
 import type { TranscriptViewMode } from "./transcriptRenderModel";
 import {
   SubagentTranscriptDrawer,
@@ -143,6 +152,7 @@ export function ConversationPage(props: {
     () => false,
   );
   const pageRef = useRef<HTMLDivElement>(null);
+  const focusDetailsOnOpen = useRef(false);
   const [subagentTarget, setSubagentTarget] =
     useState<SubagentTranscriptTarget>();
   const [searchParams, setSearchParams] = useSearchParams();
@@ -184,7 +194,11 @@ export function ConversationPage(props: {
   const [turnContext, setTurnContext] = useState<TurnContextSelection>();
   const [memoryPopover, setMemoryPopover] = useState<OpenMemoryPopover>();
   // A memory chosen in details waits here until its transcript row renders.
-  const [memoryJump, setMemoryJump] = useState<OpenMemoryPopover>();
+  const [memoryJump, setMemoryJump] = useState<MemoryJump>();
+  // The transcript mounts only rows near the viewport. The rows of the last
+  // memory jump stay mounted, so the jump finds its row and the popover
+  // keeps it.
+  const [revealSeq, setRevealSeq] = useState<number>();
   // The page stays mounted across Conversations. Memory state belongs to one.
   const [memoryConversationId, setMemoryConversationId] = useState(
     props.conversationId,
@@ -193,6 +207,7 @@ export function ConversationPage(props: {
     setMemoryConversationId(props.conversationId);
     setMemoryPopover(undefined);
     setMemoryJump(undefined);
+    setRevealSeq(undefined);
   }
   const quickQuestion = useQuickQuestionThread(props.conversationId);
   // Event details and turn context also show over a Quick question.
@@ -200,6 +215,14 @@ export function ConversationPage(props: {
     Boolean(quickQuestion.thread) && !eventOpen && !turnContext;
   const showDetails =
     detailsOpen && !eventOpen && !turnContext && !quickQuestion.thread;
+  useLayoutEffect(() => {
+    if (!showDetails || !focusDetailsOnOpen.current) return;
+    focusDetailsOnOpen.current = false;
+    // The inline opener leaves the tab order while details are visible.
+    pageRef.current
+      ?.querySelector<HTMLButtonElement>('[data-slot="details-panel-close"]')
+      ?.focus({ preventScroll: true });
+  }, [showDetails]);
   const [viewState, setView] = useState<TranscriptViewMode>(() =>
     eventOpen ? "raw" : "rich",
   );
@@ -214,11 +237,33 @@ export function ConversationPage(props: {
   const [startAtUnread] = useState(
     () => readConversationStartPosition() === "unread",
   );
+  // A link at open shows its row, so the transcript does not open at the
+  // latest message or the read position, unless the link fails first.
+  const [startAtLink, setStartAtLink] = useState(
+    () => selectedEventSeq !== undefined || linkedTurnId !== undefined,
+  );
   const detail = props.detail;
   // Jump to latest, a send, or the mobile keyboard skips the newer pages for
   // the rest of the visit. It can come before the unread page loads.
   const [showLatest, setShowLatest] = useState(false);
-  const opensAtUnread = startAtUnread && !showLatest;
+  // A link at open wins over the read position. When the loaded rows hold
+  // the link, the transcript keeps them and does not page to the read
+  // position.
+  const opensAtUnread = startAtUnread && !showLatest && !startAtLink;
+  // A linked row that the transcript does not hold. The transcript opens at
+  // the page around it until the reader jumps to the latest. A link at open
+  // starts there, so the first render reads no other page.
+  const [linkStart, setLinkStart] = useState(() =>
+    linkedTurnId !== undefined
+      ? unheldLinkStart(detail.data?.events, { turn: linkedTurnId })
+      : selectedEventSeq === undefined
+        ? undefined
+        : unheldLinkStart(detail.data?.events, { event: selectedEventSeq }),
+  );
+  const showLatestPage = useCallback(() => {
+    setShowLatest(true);
+    setLinkStart(undefined);
+  }, []);
   const memoryList = useConversationMemories(conversationId).data;
   const memoryState = useMemo<ConversationMemoryState>(
     () => ({
@@ -229,41 +274,78 @@ export function ConversationPage(props: {
     [memoryList, memoryPopover],
   );
   const archive = useArchiveConversation(conversationId);
+  const navigate = useNavigate();
   const pin = usePinConversation(conversationId);
   const markRead = useMarkConversationRead(conversationId);
   const readAtOpen = useReadPositionAtOpen(detail.data, detail.fetchedDetail);
-  const unreadHistory = useUnreadHistory({
+  const dropLink = useCallback(() => {
+    setLinkStart(undefined);
+    setStartAtLink(false);
+    setMemoryJump(undefined);
+    setSearchParams(
+      (current) => {
+        const next = new URLSearchParams(current);
+        next.delete(CONVERSATION_EVENT_PARAM);
+        next.delete(CONVERSATION_TURN_PARAM);
+        return next;
+      },
+      { replace: true },
+    );
+  }, [setSearchParams]);
+  const unreadCursor = opensAtUnread ? readAtOpen.unreadCursor : undefined;
+  const aroundHistory = useHistoryAround({
     conversationId,
     // Cached earlier pages from a past visit would look like newer events.
     detail: detail.latest,
-    onShowLatest: () => setShowLatest(true),
-    unreadCursor: opensAtUnread ? readAtOpen.unreadCursor : undefined,
-    unreadPage: readAtOpen.unreadPage,
+    onShowLatest: showLatestPage,
+    // A link that fails to load is dropped. The transcript goes back to
+    // where it was.
+    ...(linkStart
+      ? { onStartFailed: dropLink, start: linkStart }
+      : unreadCursor
+        ? {
+            start: { around: unreadCursor },
+            ...(readAtOpen.unreadPage
+              ? { startPage: readAtOpen.unreadPage }
+              : undefined),
+          }
+        : undefined),
   });
-  // The page is keyed by Conversation, so this is the cached copy at open.
-  const [cachedAtOpen] = useState(() => detail.data);
-  // A reader far behind sees the events from their read position. Others
-  // see the latest page and the pages before it. A cached transcript stays
-  // on screen until this visit's fetch tells where to open and the unread
-  // events load. It loads no earlier pages and shows no marker: both would
-  // come from the cached read position. It reports no reads, because it sits
-  // at rows the reader has not read yet. Then the transcript opens at the
-  // "New" marker, if the reader has not moved.
-  const holdCachedTranscript = Boolean(
-    cachedAtOpen &&
-    (unreadHistory?.isPending || (opensAtUnread && !detail.fetchedAtOpen)),
+  // The transcript on screen, so it can stay while the next one loads. The
+  // page is keyed by Conversation, so at open this is the cached copy.
+  const shownRef = useRef(detail.data);
+  // A reader far behind sees the events from their read position, and a
+  // link shows the events around its row. Others see the latest page and
+  // the pages before it. The transcript on screen stays until this visit's
+  // fetch tells where to open and the page around that row loads. It loads
+  // no earlier pages and shows no marker: at open, both would come from the
+  // cached read position. It reports no reads, because it can sit at rows
+  // the reader has not read yet. Then the transcript opens at the row, if
+  // the reader has not moved.
+  const holdShown = Boolean(
+    shownRef.current &&
+    (aroundHistory?.isPending ||
+      (opensAtUnread && !linkStart && !detail.fetchedAtOpen)),
   );
-  const history: TranscriptHistory = holdCachedTranscript
+  const transcriptPending =
+    detail.isPending || Boolean(aroundHistory?.isPending && !shownRef.current);
+  const history: TranscriptHistory = holdShown
     ? {
         ...detail,
-        data: cachedAtOpen,
+        data: shownRef.current,
         hasPreviousPage: false,
         isLoadingPreviousPage: false,
         loadPreviousPage: () => {},
       }
-    : (unreadHistory ?? detail);
-  const transcriptPending =
-    detail.isPending || Boolean(unreadHistory?.isPending && !cachedAtOpen);
+    : (aroundHistory ?? detail);
+  if (history.data) shownRef.current = history.data;
+  const catchUp = useConversationCatchUp({
+    conversationId,
+    events: history.data?.events,
+    hasNewerPage: Boolean(history.newer),
+    hasPreviousPage: history.hasPreviousPage,
+    unread: holdShown ? undefined : readAtOpen.unread,
+  });
   const feedConversation = conversations.find(
     (item) => item.id === conversationId,
   );
@@ -277,6 +359,11 @@ export function ConversationPage(props: {
       <ParticipantAvatarStack participants={participants} size="detail" />
     ) : null;
   const conversationDetail = detail.data;
+  const links = conversationLinks(conversationDetail);
+  const showUsageBreakdown = hasConversationUsageBreakdown({
+    conversation,
+    detail: conversationDetail,
+  });
   const title =
     conversationDetailTitle(detail.data) ??
     conversationDisplayTitle(conversation);
@@ -342,53 +429,29 @@ export function ConversationPage(props: {
     },
     [eventOpen, setSelectedEventSeq],
   );
-  // A linked event, Turn, or memory can be outside the loaded pages. Look
-  // for it one page at a time, in the direction where it can be.
-  const historyRef = useRef(history);
-  historyRef.current = history;
-  const loadToward = useCallback((search: HistorySearch | undefined) => {
-    if (search === "load-earlier") historyRef.current.loadPreviousPage();
-    else if (search === "load-newer") historyRef.current.newer?.load();
-  }, []);
-  const searchHistory = (direction: HistorySearchDirection) =>
-    nextHistorySearch(history, direction, holdCachedTranscript);
-  const oldestLoadedSeq = transcript?.events[0]?.seq;
-  const newestLoadedSeq = transcript?.events.at(-1)?.seq;
-  const linkedEventDirection: HistorySearchDirection | undefined =
-    selectedEventSeq === undefined ||
-    oldestLoadedSeq === undefined ||
-    newestLoadedSeq === undefined
-      ? undefined
-      : selectedEventSeq < oldestLoadedSeq
-        ? "earlier"
-        : selectedEventSeq > newestLoadedSeq &&
-            (history.newer || holdCachedTranscript)
-          ? "newer"
-          : undefined;
-  // Replace a found Turn link with a link to its first event, or drop it
-  // when history has no such event.
+  // A linked event, Turn, or memory can be outside the loaded rows. Then the
+  // transcript opens at the page around it, which the server finds by the
+  // event seq or Turn id. Only a new link does this, so a reader who jumps to
+  // the latest stays there. Returns false when the loaded rows hold the link.
+  const openLink = useEffectEvent((link: ConversationLink) => {
+    const start = unheldLinkStart(history.data?.events, link);
+    if (start) setLinkStart(start);
+    return Boolean(start);
+  });
+  useEffect(() => {
+    if (linkedTurnId !== undefined) openLink({ turn: linkedTurnId });
+    else if (selectedEventSeq !== undefined) {
+      openLink({ event: selectedEventSeq });
+    }
+  }, [linkedTurnId, selectedEventSeq]);
+  // Replace a found Turn link with a link to its first event.
   const linkedTurnSeq = linkedTurnId
     ? turnStartedEventSeq(transcript?.events, linkedTurnId)
     : undefined;
-  const linkedTurnMissing =
-    linkedTurnId !== undefined &&
-    linkedTurnSeq === undefined &&
-    transcript !== undefined;
-  const linkedSearch = linkedEventDirection
-    ? searchHistory(linkedEventDirection)
-    : linkedTurnMissing
-      ? searchHistory("any")
-      : undefined;
-  useEffect(() => loadToward(linkedSearch), [linkedSearch, loadToward]);
-  const linkedTurnNotFound = linkedTurnMissing && linkedSearch === "end";
   useEffect(() => {
     if (linkedTurnSeq !== undefined) setSelectedEventSeq(linkedTurnSeq);
-    else if (linkedTurnNotFound) setSelectedEventSeq(undefined);
-  }, [linkedTurnNotFound, linkedTurnSeq, setSelectedEventSeq]);
-  // Show a chosen memory at its transcript row. Wait for the first page, then
-  // load pages toward the row until it renders, or stop when history ends.
-  const memorySearch =
-    memoryJump && transcript ? searchHistory("any") : undefined;
+  }, [linkedTurnSeq, setSelectedEventSeq]);
+  // Show a chosen memory at its transcript row, once the row renders.
   useEffect(() => {
     if (!memoryJump || !transcript) return;
     const anchor = pageRef.current?.querySelector(
@@ -398,22 +461,17 @@ export function ConversationPage(props: {
       anchor.scrollIntoView({ block: "center" });
       setMemoryPopover(memoryJump);
       setMemoryJump(undefined);
-    } else if (memorySearch === "failed" || memorySearch === "end") {
+    } else if (!holdShown && !openLink({ event: memoryJump.seq })) {
+      // The loaded rows hold the event, but no row shows the memory.
       setMemoryJump(undefined);
-    } else {
-      loadToward(memorySearch);
     }
-  }, [loadToward, memoryJump, memorySearch, transcript, view]);
+  }, [holdShown, memoryJump, transcript, view]);
   // Keep the panel while the transcript or a linked event loads, and for the
   // render before a found Turn link becomes an event link.
   const eventLoading =
     eventOpen &&
     !selectedEvent &&
-    (transcriptPending ||
-      linkedTurnSeq !== undefined ||
-      linkedSearch === "load-earlier" ||
-      linkedSearch === "load-newer" ||
-      linkedSearch === "wait");
+    (transcriptPending || holdShown || linkedTurnId !== undefined);
   const showEvent = Boolean(selectedEvent) || eventLoading;
   // Step through the same filtered rows that the event log shows.
   const events = transcript?.events;
@@ -436,9 +494,9 @@ export function ConversationPage(props: {
     [turnContext?.id],
   );
   const requestPin = useCallback(() => {
-    setShowLatest(true);
+    showLatestPage();
     setPinRequestVersion((version) => version + 1);
-  }, []);
+  }, [showLatestPage]);
   const onOpenSubagentTranscript = useCallback(
     ({
       part,
@@ -480,7 +538,7 @@ export function ConversationPage(props: {
       className={cn(
         "grid h-full min-h-0 min-w-0",
         (showDetails || showEvent || turnContext || showQuickQuestion) &&
-          "xl:grid-cols-[minmax(0,1fr)_25rem]",
+          "xl:grid-cols-[minmax(0,1fr)_22rem] 2xl:grid-cols-[minmax(0,1fr)_25rem]",
       )}
     >
       <ChatLayout
@@ -489,15 +547,20 @@ export function ConversationPage(props: {
             agentTree={
               agentTree ? <ConversationAgentTree nodes={agentTree} /> : null
             }
+            contextTags={conversationContextTags(conversation)}
             conversationId={conversationId}
-            cost={conversationCost(conversation, detail.data, "below")}
+            cost={conversationCost(conversation, conversationDetail, "below")}
             detailsOpen={showDetails}
             onDetailsClick={() => {
               if (eventOpen) setSelectedEventSeq(undefined);
               setTurnContext(undefined);
               quickQuestion.close();
-              if (showDetails) closeDetails();
-              else setDetailsChoice(true);
+              if (showDetails) {
+                closeDetails();
+              } else {
+                focusDetailsOnOpen.current = true;
+                setDetailsChoice(true);
+              }
             }}
             forks={
               detail.data?.forkedFromConversationId ||
@@ -529,9 +592,7 @@ export function ConversationPage(props: {
               />
             }
             linkedWork={
-              hasConversationAnnotations(detail.data?.annotations) ? (
-                <ConversationAnnotations detail={detail.data} />
-              ) : null
+              links.length ? <ConversationAnnotations links={links} /> : null
             }
             pin={{
               // The API lets only participants pin, the same as archive.
@@ -545,15 +606,25 @@ export function ConversationPage(props: {
               archived: Boolean(conversation?.archivedAt),
               disabled: !conversation || archive.isPending,
               error: Boolean(archive.error),
-              onClick: () =>
+              onClick: () => {
+                const archived = !conversation!.archivedAt;
                 archive.mutate({
-                  archived: !conversation?.archivedAt,
+                  archived,
                   lastSeenAt: conversation!.lastSeenAt,
-                }),
+                });
+                // Archiving hides this conversation, so go home at once.
+                // The mutation keeps running after this page unmounts.
+                if (archived) {
+                  navigate("/", {
+                    state: {
+                      archivedConversation: conversation!,
+                    } satisfies ArchivedFromConversationState,
+                  });
+                }
+              },
               pending: archive.isPending,
             }}
             live={live}
-            location={conversationLocation(conversation, detail.data)}
             onSearchChange={setSearch}
             onViewChange={onViewChange}
             privacy={
@@ -600,39 +671,41 @@ export function ConversationPage(props: {
                     </div>
                   ) : null}
                   <ConversationMemoryContext value={memoryState}>
-                    <Transcript
-                      hasPreviousPage={history.hasPreviousPage}
-                      historyError={history.historyError}
-                      historyVersion={history.historyVersion}
-                      lastReadSeq={readAtOpen.lastReadSeq}
-                      live={live}
-                      loadingPreviousPage={history.isLoadingPreviousPage}
-                      newerHistory={history.newer}
-                      onLoadPreviousPage={history.loadPreviousPage}
-                      onRead={holdCachedTranscript ? undefined : markRead}
-                      onSelectedEventSeqChange={setSelectedEventSeq}
-                      // Sends and the thinking row belong after the latest event.
-                      pendingMessages={
-                        history.newer ? undefined : detail.inlineMessages
-                      }
-                      pinRequestVersion={pinRequestVersion}
-                      responding={
-                        !detail.error &&
-                        !history.newer &&
-                        conversationIsResponding(detail.data)
-                      }
-                      onOpenSubagentTranscript={onOpenSubagentTranscript}
-                      search={search}
-                      onSearchChange={setSearch}
-                      selectedEventSeq={selectedEventSeq}
-                      startAtUnread={startAtUnread}
-                      transcript={transcript}
-                      turnContextPanel={turnContextPanel}
-                      unread={
-                        holdCachedTranscript ? undefined : readAtOpen.unread
-                      }
-                      view={view}
-                    />
+                    <ConversationCatchUpContext value={catchUp}>
+                      <Transcript
+                        hasPreviousPage={history.hasPreviousPage}
+                        historyError={history.historyError}
+                        historyVersion={history.historyVersion}
+                        lastReadSeq={readAtOpen.lastReadSeq}
+                        live={live}
+                        loadingPreviousPage={history.isLoadingPreviousPage}
+                        newerHistory={history.newer}
+                        onLoadPreviousPage={history.loadPreviousPage}
+                        onRead={holdShown ? undefined : markRead}
+                        onSelectedEventSeqChange={setSelectedEventSeq}
+                        // Sends and the thinking row belong after the latest event.
+                        pendingMessages={
+                          history.newer ? undefined : detail.inlineMessages
+                        }
+                        pinRequestVersion={pinRequestVersion}
+                        revealSeq={revealSeq}
+                        responding={
+                          !detail.error &&
+                          !history.newer &&
+                          conversationIsResponding(detail.data)
+                        }
+                        onOpenSubagentTranscript={onOpenSubagentTranscript}
+                        search={search}
+                        onSearchChange={setSearch}
+                        selectedEventSeq={selectedEventSeq}
+                        startAtLink={startAtLink}
+                        startAtUnread={startAtUnread}
+                        transcript={transcript}
+                        turnContextPanel={turnContextPanel}
+                        unread={holdShown ? undefined : readAtOpen.unread}
+                        view={view}
+                      />
+                    </ConversationCatchUpContext>
                   </ConversationMemoryContext>
                 </>
               )}
@@ -695,29 +768,30 @@ export function ConversationPage(props: {
               // can hide them.
               if (view !== "rich") onViewChange("rich");
               setSearch("");
+              setRevealSeq(entry.seq);
               setMemoryJump({
                 memoryId: entry.memory.id,
+                seq: entry.seq,
                 source: entry.source,
                 turnId: entry.turnId,
               });
             }}
-            links={conversationLinks(detail.data)}
+            links={links}
             overview={
               hasConversationStats({
                 conversation,
                 detail: detail.data,
+                showUsageBreakdown,
               }) ? (
                 <ConversationStats
                   conversation={conversation}
                   detail={detail.data}
+                  showUsageBreakdown={showUsageBreakdown}
                 />
               ) : null
             }
             usage={
-              hasConversationUsageBreakdown({
-                conversation,
-                detail: detail.data,
-              }) ? (
+              showUsageBreakdown ? (
                 <ConversationUsageBreakdown
                   conversation={conversation}
                   detail={detail.data}
@@ -812,32 +886,20 @@ function committedMessageIds(
 
 const EMPTY_MESSAGE_IDS: readonly string[] = [];
 
-type HistorySearchDirection = "any" | "earlier" | "newer";
-type HistorySearch = "end" | "failed" | "load-earlier" | "load-newer" | "wait";
+type ConversationLink = { event: number } | { turn: string };
 
-/**
- * The next step to find a row that the loaded pages do not have: load one
- * more page toward it, or wait for the page that loads. "any" looks at newer
- * pages first. A failed page stops the search, but the link stays, so a
- * retry can still find the row.
- */
-function nextHistorySearch(
-  history: TranscriptHistory,
-  direction: HistorySearchDirection,
-  held: boolean,
-): HistorySearch {
-  if (held || history.isLoadingPreviousPage || history.newer?.loading) {
-    return "wait";
-  }
-  if (direction !== "earlier" && history.newer && !history.newer.error) {
-    return "load-newer";
-  }
-  if (
-    direction !== "newer" &&
-    history.hasPreviousPage &&
-    !history.historyError
-  ) {
-    return "load-earlier";
-  }
-  return history.historyError || history.newer?.error ? "failed" : "end";
+/** The page to open for a link, or nothing when `events` hold its row. */
+function unheldLinkStart(
+  events: readonly ConversationReportEvent[] | undefined,
+  link: ConversationLink,
+): HistoryStart | undefined {
+  const seq =
+    "event" in link ? link.event : turnStartedEventSeq(events, link.turn);
+  const held =
+    seq !== undefined &&
+    events !== undefined &&
+    seq >= (events[0]?.seq ?? Infinity) &&
+    seq <= (events.at(-1)?.seq ?? -Infinity);
+  if (held) return undefined;
+  return "event" in link ? { event: String(link.event) } : { turn: link.turn };
 }