@sentry/junior-dashboard 0.271.0 → 0.273.0

package/src/client/conversations/TranscriptMessageView.tsx

@@ -40,6 +40,9 @@ export const TranscriptMessageView = memo(
       <TranscriptMessageShell
         role={props.message.role}
         actor={transcriptMessageActorLabel(props.conversation, props.message)}
+        avatarUrl={
+          transcriptMessageActor(props.conversation, props.message)?.avatarUrl
+        }
         onCopy={(event) => {
           const selection = event.currentTarget.ownerDocument.getSelection();
           if (
@@ -97,7 +100,8 @@ export const TranscriptMessageView = memo(
     previous.conversation.conversationId === next.conversation.conversationId &&
     previous.conversation.surface === next.conversation.surface &&
     previous.conversation.canFork === next.conversation.canFork &&
-    previous.conversation.actorIdentity === next.conversation.actorIdentity,
+    previous.conversation.actorIdentity === next.conversation.actorIdentity &&
+    previous.conversation.authors === next.conversation.authors,
 );
 
 /** Render a redacted primary chat message without exposing body content. */
@@ -109,6 +113,9 @@ export function RedactedMessageView(props: {
     <TranscriptMessageShell
       role={props.message.role}
       actor={transcriptMessageActorLabel(props.conversation, props.message)}
+      avatarUrl={
+        transcriptMessageActor(props.conversation, props.message)?.avatarUrl
+      }
     >
       <TranscriptMessageHeader
         message={props.message}

package/src/client/conversations/TranscriptRows.tsx

@@ -15,17 +15,40 @@ export function TranscriptRows({
   );
 }
 
+/**
+ * Mark where unread rows start. The pinning hook can open the transcript here.
+ */
+export function TranscriptUnreadMarker() {
+  return (
+    <div
+      className="flex items-center gap-3 py-1"
+      data-transcript-unread-marker=""
+      role="separator"
+      aria-label="New messages"
+    >
+      <span className="h-px flex-1 bg-dashboard-accent/50" />
+      <span className="shrink-0 font-sans text-xs font-semibold text-dashboard-accent-text">
+        New
+      </span>
+      <span className="h-px flex-1 bg-dashboard-accent/50" />
+    </div>
+  );
+}
+
 /** Leave room for control outlines inside the mobile row's paint bounds. */
 export function TranscriptRow(props: {
   /** Stable row id that holds the reader's place while layout changes. */
   anchorKey?: string;
   children: ReactNode;
   indent?: boolean;
+  /** Last event sequence in the row. Read positions use it. */
+  seq?: number;
 }) {
   return (
     <div
       className="mobile-transcript-row -mx-2 px-2 py-1.5"
       data-scroll-anchor={props.anchorKey}
+      data-transcript-seq={props.seq}
     >
       {props.indent ? (
         <div className="pl-11">{props.children}</div>

package/src/client/conversations/TranscriptTurnContextView.tsx

@@ -203,7 +203,7 @@ function TurnContextActor(props: { actor: ActorIdentity; timestamp?: number }) {
       aria-label="Speaker"
       className="flex min-w-0 items-center gap-3 rounded-lg border border-dashboard-border-subtle bg-dashboard-surface-panel p-3"
     >
-      <ActorAvatar name={name} size="detail" />
+      <ActorAvatar imageUrl={props.actor.avatarUrl} name={name} size="detail" />
       <div className="min-w-0 flex-1">
         <div className="flex min-w-0 items-baseline justify-between gap-3">
           {email ? (

package/src/client/conversations/TranscriptView.tsx

@@ -22,6 +22,10 @@ import {
   usePinnedTranscriptBottom,
 } from "./transcriptBottomPinning";
 import type { TranscriptViewMode } from "./transcriptRenderModel";
+import {
+  useTranscriptReadReporter,
+  type TranscriptUnreadRange,
+} from "./transcriptReadPosition";
 import { TranscriptSearchProvider } from "./transcriptSearch";
 import {
   TurnContextPanelProvider,
@@ -34,9 +38,13 @@ export function Transcript(props: {
   historyError?: Error | null;
   historyVersion?: string;
   live?: boolean;
+  /** The read position when the Conversation opened. */
+  lastReadSeq?: number;
   loadingPreviousPage?: boolean;
   pinRequestVersion?: number;
   onLoadPreviousPage?: () => void;
+  /** Receive the last event sequence the reader saw in the transcript. */
+  onRead?: (seq: number) => void;
   onSelectedEventSeqChange?(seq: number | undefined): void;
   /** The reader's own sends to show at the end until history has them. */
   pendingMessages?: readonly ConversationMailboxMessage[];
@@ -51,6 +59,10 @@ export function Transcript(props: {
   transcript?: ConversationTranscript;
   /** Show turn context in the owner's panel. Without it, a drawer opens. */
   turnContextPanel?: TurnContextPanel;
+  /** Open at the "New" marker instead of the latest message. */
+  startAtUnread?: boolean;
+  /** Rows that were unread when the Conversation opened get a marker. */
+  unread?: TranscriptUnreadRange;
   view?: TranscriptViewMode;
 }) {
   const view = props.view ?? "rich";
@@ -64,6 +76,7 @@ export function Transcript(props: {
     historyVersion: props.historyVersion ?? "empty",
     juniorMessageVersion: transcriptJuniorMessageVersion(props.transcript),
     pinRequestVersion: props.pinRequestVersion,
+    startAtUnread: view === "rich" && props.startAtUnread,
     view,
     versions: {
       rich: transcriptBottomVersion(props.transcript, "rich"),
@@ -71,6 +84,14 @@ export function Transcript(props: {
     },
   });
 
+  // Read positions follow the transcript rows, not the event log. Search
+  // results skip rows, so they do not move the read position.
+  useTranscriptReadReporter({
+    content: bottomPinning.contentElement,
+    lastReadSeq: props.lastReadSeq,
+    onRead: props.onRead,
+    paused: view !== "rich" || search.trim().length > 0,
+  });
   const loadPreviousPage = () => props.onLoadPreviousPage?.();
   const previousPageRef = useAutoLoadPreviousPage({
     enabled: Boolean(
@@ -144,6 +165,7 @@ export function Transcript(props: {
               conversation={props.transcript}
               pendingMessages={props.pendingMessages}
               responding={props.responding ?? props.live ?? false}
+              unread={props.unread}
             />
           </TurnContextPanelProvider>
         )}

package/src/client/conversations/conversationOutbox.ts

@@ -1,8 +1,10 @@
+import type { QueryClient } from "@tanstack/react-query";
 import type {
   ActorIdentity,
   ConversationPendingMessage,
   InputImage,
 } from "@sentry/junior/api/schema";
+import type { DashboardCoreData } from "../types";
 
 /** Client-owned mailbox row waiting on accept, server visibility, or retry. */
 export type ConversationOutboxMessage = {
@@ -27,6 +29,22 @@ export type ConversationMailboxMessage = ConversationPendingMessage & {
   idempotencyKey?: string;
 };
 
+/** Identity of the viewer, for the outbox rows that they send. */
+export function outboxActorIdentity(
+  queryClient: QueryClient,
+): ActorIdentity | undefined {
+  const user = queryClient.getQueryData<DashboardCoreData>([
+    "dashboard",
+    "core",
+  ])?.me.user;
+  if (!user?.email) return undefined;
+  return {
+    ...(user.avatarUrl ? { avatarUrl: user.avatarUrl } : undefined),
+    email: user.email,
+    fullName: user.name || undefined,
+  };
+}
+
 /** Stable React Query key for one conversation's local send outbox. */
 export function conversationOutboxQueryKey(conversationId: string | undefined) {
   return ["conversation", conversationId, "outbox"] as const;
@@ -163,6 +181,7 @@ function sameActorIdentity(
   if (left === right) return true;
   if (!left || !right) return false;
   return (
+    left.avatarUrl === right.avatarUrl &&
     left.email === right.email &&
     left.fullName === right.fullName &&
     left.slackUserId === right.slackUserId &&

package/src/client/conversations/eventTranscript.ts

@@ -93,6 +93,9 @@ export function pendingTranscriptMessage(
     ...(message.actorIdentity
       ? { actorIdentity: message.actorIdentity }
       : undefined),
+    ...(message.actorIdentityId
+      ? { actorIdentityId: message.actorIdentityId }
+      : undefined),
     ...(message.mentions ? { mentions: message.mentions } : undefined),
   };
 }
@@ -222,6 +225,9 @@ export function transcriptMessagesFromEvents(
         ...(data.actorIdentity
           ? { actorIdentity: data.actorIdentity }
           : undefined),
+        ...(data.actorIdentityId
+          ? { actorIdentityId: data.actorIdentityId }
+          : undefined),
         ...(data.agentInvocationId
           ? { agentInvocationId: data.agentInvocationId }
           : undefined),

package/src/client/conversations/queries.ts

@@ -1,7 +1,6 @@
 import { useDeferredValue, useEffect, useMemo, useRef } from "react";
 import {
   queryOptions,
-  type QueryClient,
   useInfiniteQuery,
   useMutation,
   useMutationState,
@@ -9,7 +8,6 @@ import {
   useQueryClient,
 } from "@tanstack/react-query";
 import type {
-  ActorIdentity,
   ConversationDetailReport,
   ConversationEventPage,
   ConversationFeed,
@@ -30,7 +28,6 @@ import {
   stopConversationTurnResponseSchema,
 } from "@sentry/junior/api/schema";
 
-import type { DashboardCoreData } from "../types";
 import {
   DashboardApiError,
   del,
@@ -45,6 +42,7 @@ import {
   failConversationOutboxMessage,
   isInlineOutboxMessage,
   mergeConversationMailboxMessages,
+  outboxActorIdentity,
   acceptConversationOutboxMessage,
   reuseConversationMailboxMessages,
   splitInlineMailboxMessages,
@@ -178,9 +176,12 @@ export function conversationDetailQueryOptions(
     structuralSharing: (previous, next) => {
       if (!next || typeof next !== "object") return next;
       if (!previous || typeof previous !== "object") return next;
-      return reuseConversationEventReferences(
+      return keepLatestReadPosition(
         previous as ConversationSnapshot,
-        next as ConversationSnapshot,
+        reuseConversationEventReferences(
+          previous as ConversationSnapshot,
+          next as ConversationSnapshot,
+        ),
       );
     },
     refetchInterval: (query) =>
@@ -196,18 +197,18 @@ export function conversationDetailQueryOptions(
   });
 }
 
-function outboxActorIdentity(
-  queryClient: QueryClient,
-): ActorIdentity | undefined {
-  const user = queryClient.getQueryData<DashboardCoreData>([
-    "dashboard",
-    "core",
-  ])?.me.user;
-  if (!user?.email) return undefined;
-  return {
-    email: user.email,
-    fullName: user.name || undefined,
-  };
+/**
+ * Read positions only move forward. A poll that started before a read report
+ * finished must not put an older position back in the cache.
+ */
+function keepLatestReadPosition(
+  previous: ConversationSnapshot,
+  next: ConversationSnapshot,
+): ConversationSnapshot {
+  const kept = previous.readPosition;
+  if (!kept) return next;
+  if ((next.readPosition?.lastReadSeq ?? -1) >= kept.lastReadSeq) return next;
+  return { ...next, readPosition: kept };
 }
 
 /** Create one dashboard conversation and refresh the personal feed. */
@@ -704,14 +705,17 @@ export function useConversationData(conversationId: string | undefined) {
     0,
     ...awaitingRows.map((message) => Date.parse(message.createdAt)),
   );
-  const detail = useQuery(
-    conversationDetailQueryOptions(conversationId, {
+  const detail = useQuery({
+    ...conversationDetailQueryOptions(conversationId, {
       awaitingMessage: awaitingRows.length > 0,
       fastPollUntilMs: latestSendAtMs
         ? latestSendAtMs + FAST_POLL_WINDOW_MS
         : undefined,
     }),
-  );
+    // A reopened Conversation shows the cached copy at once, but it can miss
+    // messages that arrived while the reader was away. Fetch it each visit.
+    refetchOnMount: "always",
+  });
   // Defer the whole server snapshot, not history alone. Queue removal and the
   // matching transcript must paint together while composer input stays urgent.
   const deferredDetail = useDeferredValue(detail.data);
@@ -893,6 +897,11 @@ export function useConversationData(conversationId: string | undefined) {
       ? history.hasNextPage
       : Boolean(detailData?.previousCursor),
     isPending: detail.isPending,
+    /** The latest detail after a fetch in this visit, before it is deferred. */
+    fetchedDetail:
+      detail.isFetchedAfterMount && !detail.isFetching
+        ? detail.data
+        : undefined,
     isLoadingPreviousPage,
     pendingAuthorization: mailbox?.authorization,
     pendingGeneratedAt: mailbox?.generatedAt,

package/src/client/conversations/transcript.ts

@@ -223,8 +223,18 @@ export function reuseConversationEventReferences(
     JSON.stringify(previous.annotations) === JSON.stringify(next.annotations)
       ? previous.annotations
       : next.annotations;
-  if (events === next.events && annotations === next.annotations) return next;
-  return { ...next, events, annotations };
+  const authors =
+    JSON.stringify(previous.authors) === JSON.stringify(next.authors)
+      ? previous.authors
+      : next.authors;
+  if (
+    events === next.events &&
+    annotations === next.annotations &&
+    authors === next.authors
+  ) {
+    return next;
+  }
+  return { ...next, events, annotations, authors };
 }
 
 function sameConversationEventVersion(

package/src/client/conversations/transcriptBottomPinning.ts

@@ -22,6 +22,8 @@ import {
 const BOTTOM_PROXIMITY_PX = 96;
 const PREVIOUS_PAGE_PROXIMITY_PX = 600;
 const USER_SCROLL_DELTA_PX = 2;
+// Leave a little earlier context above the "New" marker.
+const UNREAD_START_OFFSET_PX = 48;
 const PIN_START_ATTRIBUTE = "data-transcript-pin-start";
 const PIN_START_MARGIN_PX = 16;
 
@@ -46,6 +48,7 @@ export type ScrollSnapshot = {
 
 type BottomPinResult = {
   anchorRef: RefObject<HTMLDivElement | null>;
+  contentElement: HTMLDivElement | null;
   contentRef: RefCallback<HTMLDivElement>;
   hasPendingUpdate: boolean;
   jumpToBottom: () => void;
@@ -259,14 +262,19 @@ export function terminalReplyPinState(input: {
 
 /**
  * Show the jump control only when the reader left the bottom and a newer tail
- * arrived. Staying pinned, or intentionally following, must not flash it.
+ * arrived, or when the transcript opened at unread rows. Staying pinned, or
+ * intentionally following, must not flash it.
  */
 export function shouldShowJumpToLatest(input: {
   enabled: boolean;
   following: boolean;
   hasPendingUpdate: boolean;
+  openedAtUnread?: boolean;
 }): boolean {
-  return input.enabled && !input.following && input.hasPendingUpdate;
+  return (
+    !input.following &&
+    (Boolean(input.openedAtUnread) || (input.enabled && input.hasPendingUpdate))
+  );
 }
 
 /** Resolve scroll intent with user upward movement taking precedence over bottom slack. */
@@ -314,6 +322,8 @@ export function usePinnedTranscriptBottom(input: {
   historyVersion: string;
   juniorMessageVersion: string;
   pinRequestVersion?: number;
+  /** Open at the "New" marker when the transcript has one. */
+  startAtUnread?: boolean;
   view: TranscriptViewMode;
   versions: Record<TranscriptViewMode, string>;
 }): BottomPinResult {
@@ -337,6 +347,7 @@ export function usePinnedTranscriptBottom(input: {
   const seenPinStartsRef = useRef(new Set<string>());
   const [following, setFollowing] = useState(false);
   const [hasPendingUpdate, setHasPendingUpdate] = useState(false);
+  const [openedAtUnread, setOpenedAtUnread] = useState(false);
   const [contentElement, setContentElement] = useState<HTMLDivElement | null>(
     null,
   );
@@ -351,9 +362,14 @@ export function usePinnedTranscriptBottom(input: {
     if (!input.enabled) setHasPendingUpdate(false);
   }, [input.enabled]);
 
+  // The transcript opened at the latest message, but the reader prefers the
+  // "New" marker. The marker can appear when a fetch replaces a cached detail.
+  const awaitingUnreadMarkerRef = useRef(false);
   const setFollowingIntent = useCallback((value: boolean) => {
     followingRef.current = value;
     setFollowing(value);
+    if (value) setOpenedAtUnread(false);
+    else awaitingUnreadMarkerRef.current = false;
   }, []);
 
   const rememberPlace = useCallback(() => {
@@ -502,6 +518,32 @@ export function usePinnedTranscriptBottom(input: {
     [setFollowingIntent],
   );
 
+  /** Scroll to the "New" marker, if the transcript has one. */
+  const openAtUnreadMarker = useCallback((): boolean => {
+    const content = contentElementRef.current;
+    const root = scrollRootFor(content);
+    const marker = content?.querySelector("[data-transcript-unread-marker]");
+    if (!root || !marker) return false;
+    awaitingUnreadMarkerRef.current = false;
+    const offset =
+      marker.getBoundingClientRect().top - viewportBounds(root).top;
+    setScrollTop(
+      root,
+      Math.max(
+        0,
+        scrollSnapshot(root).scrollTop + offset - UNREAD_START_OFFSET_PX,
+      ),
+    );
+    const snapshot = scrollSnapshot(root);
+    previousScrollTopRef.current = snapshot.scrollTop;
+    // Unread rows that fit above the bottom leave the reader at the latest.
+    const atBottom = isNearScrollBottom(snapshot);
+    setFollowingIntent(atBottom);
+    setOpenedAtUnread(!atBottom);
+    rememberPlace();
+    return true;
+  }, [rememberPlace, setFollowingIntent]);
+
   useBrowserLayoutEffect(() => {
     if (!contentElement || !input.conversationId) return;
     if (initializedConversationRef.current === input.conversationId) return;
@@ -510,24 +552,40 @@ export function usePinnedTranscriptBottom(input: {
     if (!root) return;
 
     initializedConversationRef.current = input.conversationId;
+    setHasPendingUpdate(false);
+    if (input.startAtUnread && openAtUnreadMarker()) return;
+
     setScrollTop(root, scrollSnapshot(root).scrollHeight);
     previousScrollTopRef.current = scrollSnapshot(root).scrollTop;
-    // Start every conversation at its latest message. Keep following until the
-    // reader scrolls up so late content and footer layout cannot expose stale
-    // space below the transcript.
+    // Without unread rows, start at the latest message. Keep following until
+    // the reader scrolls up so late content and footer layout cannot expose
+    // stale space below the transcript.
     setFollowingIntent(true);
-    setHasPendingUpdate(false);
-  }, [contentElement, input.conversationId, setFollowingIntent]);
+    awaitingUnreadMarkerRef.current = Boolean(input.startAtUnread);
+  }, [
+    contentElement,
+    input.conversationId,
+    input.startAtUnread,
+    openAtUnreadMarker,
+    setFollowingIntent,
+  ]);
+
+  // Follow the latest message, unless the "New" marker appeared before the
+  // reader moved. Then open at the marker, as if it was there at the start.
+  const followLatest = useCallback(() => {
+    if (awaitingUnreadMarkerRef.current && openAtUnreadMarker()) return;
+    scrollToBottom("auto");
+  }, [openAtUnreadMarker, scrollToBottom]);
 
   const syncAfterLayoutChange = useCallback(() => {
     if (followingRef.current) {
-      scrollToBottom("auto");
+      followLatest();
       return;
     }
 
     restorePlace();
     measurePosition("measure");
-  }, [measurePosition, restorePlace, scrollToBottom]);
+  }, [followLatest, measurePosition, restorePlace]);
 
   // An earlier page renders above the reader. Hold their place before paint;
   // a reader at the bottom stays at the latest message.
@@ -568,7 +626,7 @@ export function usePinnedTranscriptBottom(input: {
         following: followingRef.current,
       })
     ) {
-      scrollToBottom("auto");
+      followLatest();
       setHasPendingUpdate(false);
       return;
     }
@@ -581,7 +639,7 @@ export function usePinnedTranscriptBottom(input: {
     input.view,
     input.versions.rich,
     input.versions.raw,
-    scrollToBottom,
+    followLatest,
     setFollowingIntent,
   ]);
 
@@ -655,6 +713,7 @@ export function usePinnedTranscriptBottom(input: {
   }, [contentElement, syncAfterLayoutChange]);
 
   const jumpToBottom = useCallback(() => {
+    awaitingUnreadMarkerRef.current = false;
     setFollowingIntent(true);
     setHasPendingUpdate(false);
     scrollToBottom(preferredExplicitScrollBehavior());
@@ -698,6 +757,7 @@ export function usePinnedTranscriptBottom(input: {
   return useMemo(
     () => ({
       anchorRef,
+      contentElement,
       contentRef,
       hasPendingUpdate,
       jumpToBottom,
@@ -705,9 +765,18 @@ export function usePinnedTranscriptBottom(input: {
         enabled: input.enabled,
         following,
         hasPendingUpdate,
+        openedAtUnread,
       }),
     }),
-    [contentRef, following, hasPendingUpdate, input.enabled, jumpToBottom],
+    [
+      contentElement,
+      contentRef,
+      following,
+      hasPendingUpdate,
+      input.enabled,
+      jumpToBottom,
+      openedAtUnread,
+    ],
   );
 }
 
@@ -744,7 +813,8 @@ export function useAutoLoadPreviousPage(input: {
   return setSentinel;
 }
 
-function scrollRootFor(element: HTMLElement | null): ScrollRoot | null {
+/** Find the nearest element that scrolls the transcript, or the window. */
+export function scrollRootFor(element: HTMLElement | null): ScrollRoot | null {
   if (typeof window === "undefined") return null;
   if (!element) return window;
 
@@ -819,6 +889,7 @@ function setScrollTop(
   root.scrollTo({ behavior, top: scrollTop });
 }
 
+/** Read the visible band of a scroll root in client coordinates. */
 function viewportBounds(root: ScrollRoot): { bottom: number; top: number } {
   if (isWindowRoot(root)) return { bottom: window.innerHeight, top: 0 };
   const top = root.getBoundingClientRect().top;