@sentry/junior-dashboard 0.280.0 → 0.281.0

package/src/client/conversations/ConversationMeta.tsx

@@ -483,11 +483,14 @@ export function liveModelId(
   return openTurns.size > 0 ? modelId : undefined;
 }
 
-/** True when runtime stats have content to show in details. */
-export function hasConversationStats(props: {
+type ConversationStatsProps = {
   conversation: Conversation | undefined;
   detail?: ConversationDetailReport;
-}): boolean {
+  showUsageBreakdown?: boolean;
+};
+
+/** True when runtime stats have content to show in details. */
+export function hasConversationStats(props: ConversationStatsProps): boolean {
   return conversationStatItems(props).length > 0;
 }
 
@@ -500,10 +503,7 @@ type ConversationStatItem = {
 };
 
 /** Render runtime, source, token, and cost metadata as a labeled list. */
-export function ConversationStats(props: {
-  conversation: Conversation | undefined;
-  detail?: ConversationDetailReport;
-}) {
+export function ConversationStats(props: ConversationStatsProps) {
   const stats = conversationStatItems(props);
   if (stats.length === 0) return null;
   return (
@@ -576,10 +576,9 @@ export function conversationCost(
   );
 }
 
-function conversationStatItems(props: {
-  conversation: Conversation | undefined;
-  detail?: ConversationDetailReport;
-}): ConversationStatItem[] {
+function conversationStatItems(
+  props: ConversationStatsProps,
+): ConversationStatItem[] {
   if (!props.conversation) return [];
   const completeDetail = props.detail?.previousCursor
     ? undefined
@@ -596,9 +595,11 @@ function conversationStatItems(props: {
     props.detail?.childAgentTotals ?? props.conversation.childAgentTotals;
   const lastActivityAt = props.conversation.lastSeenAt;
   const location = conversationLocation(props.conversation, props.detail);
-  const cost = conversationCost(props.conversation, props.detail);
+  const cost = props.showUsageBreakdown
+    ? null
+    : conversationCost(props.conversation, props.detail);
   const rawStats: Array<ConversationStatItem | undefined> = [
-    // The desktop title bar shows the location and cost. Mobile hides that bar.
+    // The desktop title bar shows the location. Mobile hides that bar.
     location
       ? {
           content: location,
@@ -646,7 +647,7 @@ function conversationStatItems(props: {
           label: "Runtime",
         }
       : undefined,
-    tokenSummary
+    tokenSummary && !props.showUsageBreakdown
       ? {
           content: (
             <TokenMetric
@@ -673,7 +674,6 @@ function conversationStatItems(props: {
           content: cost,
           key: "cost",
           label: "Cost",
-          mobileOnly: true,
         }
       : undefined,
     childAgentTotals

package/src/client/conversations/ConversationPage.tsx

@@ -2,6 +2,7 @@ import {
   useCallback,
   useEffect,
   useEffectEvent,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -151,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();
@@ -193,6 +195,10 @@ export function ConversationPage(props: {
   const [memoryPopover, setMemoryPopover] = useState<OpenMemoryPopover>();
   // A memory chosen in details waits here until its transcript row renders.
   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,
@@ -201,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.
@@ -208,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",
   );
@@ -345,6 +360,10 @@ export function ConversationPage(props: {
     ) : null;
   const conversationDetail = detail.data;
   const links = conversationLinks(conversationDetail);
+  const showUsageBreakdown = hasConversationUsageBreakdown({
+    conversation,
+    detail: conversationDetail,
+  });
   const title =
     conversationDetailTitle(detail.data) ??
     conversationDisplayTitle(conversation);
@@ -519,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
@@ -536,8 +555,12 @@ export function ConversationPage(props: {
               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 ||
@@ -665,6 +688,7 @@ export function ConversationPage(props: {
                           history.newer ? undefined : detail.inlineMessages
                         }
                         pinRequestVersion={pinRequestVersion}
+                        revealSeq={revealSeq}
                         responding={
                           !detail.error &&
                           !history.newer &&
@@ -744,6 +768,7 @@ export function ConversationPage(props: {
               // can hide them.
               if (view !== "rich") onViewChange("rich");
               setSearch("");
+              setRevealSeq(entry.seq);
               setMemoryJump({
                 memoryId: entry.memory.id,
                 seq: entry.seq,
@@ -756,18 +781,17 @@ export function ConversationPage(props: {
               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}