@sentry/junior-dashboard 0.269.0 → 0.270.0

package/src/client/conversations/EventDetails.tsx

@@ -13,7 +13,7 @@ import { dashboardDisclosureChevronClass } from "../styles";
 
 import { RedactedMarker } from "./TranscriptRedacted";
 import { DetailsCard } from "./DetailsList";
-import { TranscriptText } from "./TranscriptText";
+import { DisplayText } from "../display-text/DisplayText";
 import { eventLogModel } from "./eventLog";
 import { formatCostBreakdown } from "../format";
 import { EventUsage } from "./EventUsage";
@@ -68,7 +68,7 @@ export function EventDetails({ event }: { event: ConversationReportEvent }) {
           ) : null}
           {summary ? (
             <DetailSection title="Continuation summary">
-              <TranscriptText mentions={mentions} text={summary} />
+              <DisplayText mentions={mentions} text={summary} />
             </DetailSection>
           ) : null}
         </>
@@ -86,7 +86,7 @@ export function EventDetails({ event }: { event: ConversationReportEvent }) {
             {redacted ? (
               <RedactedMarker />
             ) : (
-              <TranscriptText mentions={mentions} text={text ?? ""} />
+              <DisplayText mentions={mentions} text={text ?? ""} />
             )}
           </DetailSection>
         </>
@@ -128,7 +128,7 @@ export function EventDetails({ event }: { event: ConversationReportEvent }) {
           {part.redacted ? (
             <RedactedMarker />
           ) : (
-            <TranscriptText mentions={mentions} text={part.text ?? ""} />
+            <DisplayText mentions={mentions} text={part.text ?? ""} />
           )}
         </DetailSection>
       ));
@@ -142,15 +142,12 @@ export function EventDetails({ event }: { event: ConversationReportEvent }) {
           </DetailSection>
           <DetailSection title={presentation.title}>
             {presentation.preview ? (
-              <TranscriptText mentions={mentions} text={presentation.preview} />
+              <DisplayText mentions={mentions} text={presentation.preview} />
             ) : null}
             {presentation.details?.map((detail, index) => (
               <DetailSubsection key={index} title={detail.title}>
                 {detail.description ? (
-                  <TranscriptText
-                    mentions={mentions}
-                    text={detail.description}
-                  />
+                  <DisplayText mentions={mentions} text={detail.description} />
                 ) : null}
                 {detail.content ? <DetailValue value={detail.content} /> : null}
                 {detail.metadata ? (

package/src/client/conversations/PendingMailboxStack.tsx

@@ -38,6 +38,8 @@ import {
   TranscriptHeadingRow,
 } from "./TranscriptHeadingRow";
 import { SlackMark } from "./SlackMark";
+import { DisplayText } from "../display-text/DisplayText";
+import { displayPlainText } from "../display-text/plainText";
 
 // Rows are one line each, so the stack can show five before it collapses.
 const MAX_EXPANDED_PENDING_ROWS = 5;
@@ -306,6 +308,7 @@ function PendingRow(props: {
   steerPending: boolean;
 }) {
   const text = props.message.text ?? "";
+  const mentions = props.message.mentions ?? [];
   const redacted = Boolean(props.message.redacted);
   const showSlack = props.message.source === "slack";
   const canRetry =
@@ -334,9 +337,9 @@ function PendingRow(props: {
               // One line keeps the queue short. The title shows the full text.
               <p
                 className="m-0 min-w-0 truncate font-sans text-sm leading-snug text-dashboard-text-subtle"
-                title={text}
+                title={displayPlainText(text, mentions)}
               >
-                {text}
+                <DisplayText inline mentions={mentions} text={text} />
               </p>
             ) : null}
           </>

package/src/client/conversations/TranscriptContextEventView.tsx

@@ -8,7 +8,7 @@ import {
 import { dashboardDisclosureChevronClass } from "../styles";
 import { formatCompactNumber, formatMessageTimestamp } from "../format";
 import type { TranscriptViewContextEventPart } from "../types";
-import { TranscriptText } from "./TranscriptText";
+import { DisplayText } from "../display-text/DisplayText";
 
 /** Render a structural context change from the privacy-safe event API. */
 export function TranscriptContextEventView(props: {
@@ -57,9 +57,8 @@ export function TranscriptContextEventView(props: {
           </CollapsibleTrigger>
           <CollapsibleContent hiddenUntilFound>
             <div className="mt-1.5 whitespace-pre-wrap text-xs leading-relaxed text-dashboard-text-muted">
-              <TranscriptText
-                mentions={props.part.mentions ?? []}
-                role="system"
+              <DisplayText
+                mentions={props.part.mentions}
                 text={event.summary}
               />
             </div>

package/src/client/conversations/TranscriptEventView.tsx

@@ -3,7 +3,7 @@ import { useState } from "react";
 
 import { Collapsible, CollapsibleContent } from "../components/ui/collapsible";
 import { cn, dashboardDisclosureChevronClass } from "../styles";
-import { MentionText } from "./transcriptMentions";
+import { DisplayText } from "../display-text/DisplayText";
 import { messageRawText } from "./transcriptRenderModel";
 import { HighlightText, useTranscriptSearch } from "./transcriptSearch";
 import { RedactedMarker } from "./TranscriptRedacted";
@@ -47,7 +47,12 @@ export function TranscriptEventView(props: { message: TranscriptViewMessage }) {
     <span className="flex min-w-0 flex-col gap-1">
       <span className="flex min-h-6 min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
         <span className="min-w-0 break-words font-display text-sm font-semibold leading-6 text-dashboard-text">
-          <MentionText links={links} mentions={mentions} text={summary} />
+          <DisplayText
+            inline
+            links={links}
+            mentions={mentions}
+            text={summary}
+          />
         </span>
         {!isBatch && props.message.eventType ? (
           <EventTypeChip eventType={props.message.eventType} />
@@ -62,7 +67,8 @@ export function TranscriptEventView(props: { message: TranscriptViewMessage }) {
               className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs leading-5 text-dashboard-text-muted"
             >
               <span className="min-w-0 break-words">
-                <MentionText
+                <DisplayText
+                  inline
                   links={links}
                   mentions={mentions}
                   text={event.trustedSummary ?? event.eventType}

package/src/client/conversations/TranscriptMessageView.tsx

@@ -21,7 +21,7 @@ import { messageRawText } from "./transcriptRenderModel";
 import { TranscriptMessageHeading } from "./TranscriptHeadingRow";
 import { RedactedMarker } from "./TranscriptRedacted";
 import { SlackMark } from "./SlackMark";
-import { TranscriptText } from "./TranscriptText";
+import { DisplayText } from "../display-text/DisplayText";
 import { TranscriptTurnContextView } from "./TranscriptTurnContextView";
 import { TranscriptTimestamp } from "./TranscriptTimestamp";
 import { showsSlackSourceIcon } from "./transcriptSource";
@@ -33,7 +33,8 @@ export const TranscriptMessageView = memo(
     conversation: ConversationTranscript;
   }) {
     const rawText = messageRawText(props.message);
-    const role = props.message.role;
+    const roleKind = transcriptRoleKind(props.message.role);
+    const chatText = roleKind === "assistant" || roleKind === "user";
 
     return (
       <TranscriptMessageShell
@@ -58,10 +59,10 @@ export const TranscriptMessageView = memo(
         <div className="grid min-w-0 grid-cols-[minmax(0,1fr)] gap-2">
           {props.message.parts.map((part, index) =>
             part.type === "text" ? (
-              <TranscriptText
+              <DisplayText
+                chat={chatText}
                 key={index}
-                mentions={props.message.mentions ?? []}
-                role={role}
+                mentions={props.message.mentions}
                 text={part.text ?? ""}
               />
             ) : null,

package/src/client/conversations/TranscriptReasoningView.tsx

@@ -6,13 +6,14 @@ import {
   TraceCollapsibleContent,
   TraceCollapsibleTrigger,
 } from "../components/ui/trace";
+import { DisplayText } from "../display-text/DisplayText";
 import { formatMessageTimestamp } from "../format";
 import type { TranscriptViewReasoningPart } from "../types";
 import {
   TranscriptHeadingMeta,
   TranscriptHeadingRow,
 } from "./TranscriptHeadingRow";
-import { HighlightText, useTranscriptSearch } from "./transcriptSearch";
+import { useTranscriptSearch } from "./transcriptSearch";
 
 /** Render reasoning collapsed with a short preview until expanded or searched. */
 export function TranscriptReasoningView(props: {
@@ -50,7 +51,7 @@ export function TranscriptReasoningView(props: {
                 </span>
               ) : (
                 <span className="block min-w-0 truncate italic text-dashboard-text-muted">
-                  {rendered}
+                  <DisplayText inline links={false} text={rendered} />
                 </span>
               )
             }
@@ -67,9 +68,7 @@ export function TranscriptReasoningView(props: {
       </TraceCollapsibleTrigger>
       {/* Keep closed reasoning in the page, so browser find can reach it. */}
       <TraceCollapsibleContent className="px-3 py-2.5" hiddenUntilFound>
-        <div className="min-w-0 whitespace-pre-wrap break-words text-sm leading-relaxed text-dashboard-text-subtle">
-          <HighlightText text={rendered} />
-        </div>
+        <DisplayText text={rendered} />
       </TraceCollapsibleContent>
     </TraceCollapsible>
   );

package/src/client/conversations/TranscriptRows.tsx

@@ -17,11 +17,16 @@ export function TranscriptRows({
 
 /** 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;
 }) {
   return (
-    <div className="mobile-transcript-row -mx-2 px-2 py-1.5">
+    <div
+      className="mobile-transcript-row -mx-2 px-2 py-1.5"
+      data-scroll-anchor={props.anchorKey}
+    >
       {props.indent ? (
         <div className="pl-11">{props.children}</div>
       ) : (

package/src/client/conversations/TranscriptStructuredEventView.tsx

@@ -1,7 +1,7 @@
 import { Collapsible, CollapsibleContent } from "../components/ui/collapsible";
 import { formatMessageTimestamp } from "../format";
 import type { TranscriptViewStructuredEventPart } from "../types";
-import { MentionText } from "./transcriptMentions";
+import { DisplayText } from "../display-text/DisplayText";
 import { HighlightText, useTranscriptSearch } from "./transcriptSearch";
 import { TranscriptSummaryTrigger } from "./TranscriptSummary";
 
@@ -34,8 +34,8 @@ export function TranscriptStructuredEventView(props: {
               </div>
             )}
             {detail.description ? (
-              <div className="mt-1 whitespace-pre-wrap break-words text-xs leading-relaxed text-dashboard-text-muted">
-                <MentionText mentions={mentions} text={detail.description} />
+              <div className="mt-1">
+                <DisplayText mentions={mentions} text={detail.description} />
               </div>
             ) : null}
             {detail.content ? (
@@ -70,7 +70,8 @@ export function TranscriptStructuredEventView(props: {
         </span>
         {presentation.preview ? (
           <span className="mt-0.5 block truncate text-xs text-dashboard-text-muted">
-            <MentionText
+            <DisplayText
+              inline
               links={!collapsible}
               mentions={mentions}
               text={presentation.preview}

package/src/client/conversations/TranscriptToolView.tsx

@@ -15,6 +15,7 @@ import { reviewItemIdFromToolCall } from "../review-desk/reviewItemFormat";
 import { cn } from "../styles";
 import { ToolFrame } from "./ToolFrame";
 import { toolCallPreview } from "./toolCallPreview";
+import { transcriptPinStartProps } from "./transcriptBottomPinning";
 import { HighlightText, useTranscriptSearch } from "./transcriptSearch";
 
 /** Render one tool invocation as it advances from running to a terminal result. */
@@ -71,7 +72,7 @@ export const TranscriptToolView = memo(function TranscriptToolView(props: {
     <div className="min-w-0">
       {frame}
       {reviewItemId ? (
-        <div className="mt-2">
+        <div className="mt-2" {...transcriptPinStartProps(reviewItemId)}>
           <TranscriptReviewItemCard itemId={reviewItemId} />
         </div>
       ) : null}

package/src/client/conversations/TranscriptView.tsx

@@ -63,7 +63,6 @@ export function Transcript(props: {
     enabled: props.live ?? false,
     historyVersion: props.historyVersion ?? "empty",
     juniorMessageVersion: transcriptJuniorMessageVersion(props.transcript),
-    loadingPreviousPage: props.loadingPreviousPage ?? false,
     pinRequestVersion: props.pinRequestVersion,
     view,
     versions: {
@@ -72,10 +71,7 @@ export function Transcript(props: {
     },
   });
 
-  const loadPreviousPage = () => {
-    bottomPinning.preserveViewportForPrepend();
-    props.onLoadPreviousPage?.();
-  };
+  const loadPreviousPage = () => props.onLoadPreviousPage?.();
   const previousPageRef = useAutoLoadPreviousPage({
     enabled: Boolean(
       props.onLoadPreviousPage &&
@@ -97,7 +93,11 @@ export function Transcript(props: {
 
   return (
     <TranscriptSearchProvider query={search}>
-      <div className="grid min-w-0" ref={bottomPinning.contentRef}>
+      {/* The pinning hook holds the reader's place; browser anchoring would fight it. */}
+      <div
+        className="grid min-w-0 [overflow-anchor:none]"
+        ref={bottomPinning.contentRef}
+      >
         {redacted ? (
           <div className="mb-2 min-w-0 break-words text-sm leading-relaxed text-dashboard-text-muted">
             Hidden because this conversation is not public.

package/src/client/conversations/conversationOutbox.ts

@@ -140,12 +140,22 @@ function sameMailboxMessage(
     left.createdAt === right.createdAt &&
     left.receivedAt === right.receivedAt &&
     left.idempotencyKey === right.idempotencyKey &&
-    // Pending rows render actorLabel(actorIdentity). Live polls may enrich
-    // identity after the first accept; keep that change visible.
-    sameActorIdentity(left.actorIdentity, right.actorIdentity)
+    // Pending rows render actorLabel(actorIdentity) and mention names. Live
+    // polls may enrich them after the first accept; keep that change visible.
+    sameActorIdentity(left.actorIdentity, right.actorIdentity) &&
+    sameMentions(left.mentions, right.mentions)
   );
 }
 
+function sameMentions(
+  left: ConversationMailboxMessage["mentions"],
+  right: ConversationMailboxMessage["mentions"],
+): boolean {
+  if (left === right) return true;
+  if (!left || !right || left.length !== right.length) return false;
+  return left.every((person, index) => sameActorIdentity(person, right[index]));
+}
+
 function sameActorIdentity(
   left: ConversationMailboxMessage["actorIdentity"],
   right: ConversationMailboxMessage["actorIdentity"],

package/src/client/conversations/conversationSections.ts

@@ -8,6 +8,7 @@ export type ConversationSection = {
 
 const DAY_MS = 24 * 60 * 60 * 1000;
 const SECTION_ORDER = [
+  "attention",
   "priority",
   "today",
   "yesterday",
@@ -17,10 +18,18 @@ const SECTION_ORDER = [
   "older",
 ] as const;
 
-/** Group conversations into progressively broader activity sections. */
+/**
+ * Group conversations into progressively broader activity sections.
+ *
+ * Conversations in `attentionIds` go to the first section, before Priority.
+ */
 export function buildConversationSections(
   conversations: Conversation[],
-  options: { nowMs: number; timeZone: string },
+  options: {
+    attentionIds?: ReadonlySet<string>;
+    nowMs: number;
+    timeZone: string;
+  },
 ): ConversationSection[] {
   const nowDay = calendarDay(options.nowMs, options.timeZone);
   const sections = new Map<string, ConversationSection>();
@@ -30,12 +39,9 @@ export function buildConversationSections(
 
   for (const conversation of sorted) {
     const time = activityTime(conversation);
-    const section = conversationSection(
-      conversation,
-      time,
-      nowDay,
-      options.timeZone,
-    );
+    const section = options.attentionIds?.has(conversation.id)
+      ? { key: "attention", label: "Needs attention" }
+      : conversationSection(conversation, time, nowDay, options.timeZone);
     const existing = sections.get(section.key);
     if (existing) {
       existing.conversations.push(conversation);
@@ -49,6 +55,28 @@ export function buildConversationSections(
   );
 }
 
+/** Join the conversations that wait on the viewer or finished unseen. */
+export function attentionConversationIds(
+  waitingConversationIds: ReadonlySet<string>,
+  finishedConversationIds: ReadonlySet<string>,
+): ReadonlySet<string> {
+  return new Set([...waitingConversationIds, ...finishedConversationIds]);
+}
+
+/**
+ * Sort attention conversations to the front. The sort is stable, so each group
+ * keeps the feed order. Paginated lists call this before paging, so page 1
+ * holds every attention conversation.
+ */
+export function attentionFirst(
+  conversations: Conversation[],
+  attentionIds: ReadonlySet<string>,
+): Conversation[] {
+  const rank = (conversation: Conversation) =>
+    attentionIds.has(conversation.id) ? 0 : 1;
+  return [...conversations].sort((left, right) => rank(left) - rank(right));
+}
+
 function activityTime(conversation: Conversation): number {
   const time = Date.parse(conversation.lastSeenAt);
   return Number.isFinite(time) ? time : Number.NEGATIVE_INFINITY;

package/src/client/conversations/eventTranscript.ts

@@ -93,6 +93,7 @@ export function pendingTranscriptMessage(
     ...(message.actorIdentity
       ? { actorIdentity: message.actorIdentity }
       : undefined),
+    ...(message.mentions ? { mentions: message.mentions } : undefined),
   };
 }