@sentry/junior-dashboard 0.272.0 → 0.274.0

package/src/client/conversations/ConversationWorkspace.tsx

@@ -24,7 +24,10 @@ import { buildConversations, getDashboardTimeZone } from "../format";
 import { useDebouncedValue } from "../debouncedValue";
 import type { Conversation } from "../types";
 import { ConversationPage } from "./ConversationPage";
-import { useWaitingConversationIds } from "../review-desk/queries";
+import {
+  useWaitingConversationIds,
+  useWaitingConversations,
+} from "../review-desk/queries";
 import { UnsentAnswersProvider } from "../review-desk/UnsentAnswers";
 import { useConversationFinishedIndicators } from "./useConversationFinishedIndicators";
 
@@ -56,8 +59,9 @@ export function ConversationWorkspace() {
     if (selectedId) navigate(NEW_CONVERSATION_PATH);
   };
 
+  const waitingConversations = useWaitingConversations();
   const waitingConversationIds = useWaitingConversationIds();
-  const { finishedConversationIds, markRead } =
+  const { finishedConversationIds, heldConversationId, markRead } =
     useConversationFinishedIndicators(
       conversations,
       selectedId,
@@ -149,13 +153,14 @@ export function ConversationWorkspace() {
           conversations={conversations}
           error={feed.error?.message}
           finishedConversationIds={finishedConversationIds}
+          heldConversationId={heldConversationId}
           loading={feed.isPending}
           onNewConversation={openCreate}
           onQueryChange={setQuery}
           query={query}
           selectedId={selectedId}
           timeZone={getDashboardTimeZone()}
-          waitingConversationIds={waitingConversationIds}
+          waitingConversations={waitingConversations}
         />
       </div>
       <section

package/src/client/conversations/PendingMailboxStack.tsx

@@ -6,7 +6,10 @@ import {
   type ReactElement,
   type ReactNode,
 } from "react";
-import { INPUT_IMAGE_TYPES } from "@sentry/junior/api/schema";
+import {
+  INPUT_IMAGE_TYPES,
+  type ConversationDetailReport,
+} from "@sentry/junior/api/schema";
 import {
   AlertCircle,
   Clock3,
@@ -230,14 +233,17 @@ function PendingMetaIcons(props: {
   );
 }
 
-function PendingAuthorAvatar(props: { message: ConversationMailboxMessage }) {
+function PendingAuthorAvatar(props: {
+  authors?: ConversationDetailReport["authors"];
+  message: ConversationMailboxMessage;
+}) {
+  const { actorIdentityId } = props.message;
   // Pending rows can come from web or Slack. Redacted rows hide the author.
-  if (!props.message.actorIdentity) {
-    return <ActorAvatar name="?" size="list" />;
-  }
-  return (
-    <ParticipantAvatar participant={props.message.actorIdentity} size="list" />
-  );
+  const author =
+    (actorIdentityId ? props.authors?.[actorIdentityId] : undefined) ??
+    props.message.actorIdentity;
+  if (!author) return <ActorAvatar name="?" size="list" />;
+  return <ParticipantAvatar participant={author} size="list" />;
 }
 
 /** Show small previews so the reader can tell which images a queued message has. */
@@ -294,6 +300,7 @@ function PendingAttachmentThumbnails(props: {
 
 function PendingRow(props: {
   actionsDisabled: boolean;
+  authors?: ConversationDetailReport["authors"];
   cancelError: boolean;
   cancelPending: boolean;
   canEdit: boolean;
@@ -322,7 +329,10 @@ function PendingRow(props: {
         className="items-center"
         left={
           <>
-            <PendingAuthorAvatar message={props.message} />
+            <PendingAuthorAvatar
+              authors={props.authors}
+              message={props.message}
+            />
             {redacted ? null : (
               <PendingAttachmentThumbnails
                 conversationId={props.conversationId}
@@ -438,6 +448,8 @@ function sameEmail(left: string | undefined, right: string | undefined) {
 
 /** Render accepted mailbox rows as a compact stack attached above the composer. */
 export const PendingMailboxStack = memo(function PendingMailboxStack(props: {
+  /** Author of each row, by `actorIdentityId`. */
+  authors?: ConversationDetailReport["authors"];
   cancelError?: boolean;
   cancelPending?: boolean;
   cancelTargetInboundMessageId?: string;
@@ -506,6 +518,7 @@ export const PendingMailboxStack = memo(function PendingMailboxStack(props: {
     return (
       <PendingRow
         actionsDisabled={actionsDisabled}
+        authors={props.authors}
         cancelError={Boolean(props.cancelError && isTarget)}
         cancelPending={Boolean(props.cancelPending && isTarget)}
         canEdit={ownWebRow}

package/src/client/conversations/TranscriptMessageShell.tsx

@@ -1,10 +1,13 @@
 import type { ClipboardEventHandler, ReactNode } from "react";
+import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
 import { transcriptRoleKind } from "../format";
 import { cn } from "../styles";
 
 /** Align message text and attachments beside their avatars. */
 export function TranscriptMessageShell(props: {
   actor: string;
+  /** Junior API path of the author photo. Initials show without it. */
+  avatarUrl?: string;
   children: ReactNode;
   onCopy?: ClipboardEventHandler<HTMLElement>;
   role: string;
@@ -36,14 +39,22 @@ export function TranscriptMessageShell(props: {
               src="/_junior/dashboard/avatar.png"
             />
           ) : (
-            <span className="grid size-8 place-items-center rounded-full bg-violet-300 font-sans text-xs font-semibold text-dashboard-text-inverse">
-              {props.actor
-                .split(/\s+/)
-                .map((word) => word[0])
-                .slice(0, 2)
-                .join("")
-                .toUpperCase()}
-            </span>
+            <Avatar className="size-8 border-0 bg-violet-300 shadow-none">
+              <AvatarImage
+                alt=""
+                loading="lazy"
+                referrerPolicy="no-referrer"
+                src={props.avatarUrl}
+              />
+              <AvatarFallback>
+                {props.actor
+                  .split(/\s+/)
+                  .map((word) => word[0])
+                  .slice(0, 2)
+                  .join("")
+                  .toUpperCase()}
+              </AvatarFallback>
+            </Avatar>
           )}
         </div>
       ) : null}

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/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/composerAutocorrect.ts

@@ -0,0 +1,12 @@
+import { useLocalStorage } from "@uidotdev/usehooks";
+
+const AUTOCORRECT_STORAGE_KEY = "junior:composer:autocorrect";
+
+/**
+ * Edit the browser-only choice to let the keyboard autocorrect, spell check,
+ * and capitalize the message composer. Off by default because these change
+ * ids, paths, and code.
+ */
+export function useComposerAutocorrect() {
+  return useLocalStorage<boolean>(AUTOCORRECT_STORAGE_KEY, false);
+}

package/src/client/conversations/conversationAge.ts

@@ -0,0 +1,24 @@
+import { getDashboardTimeZone } from "../format";
+
+/**
+ * Format an activity time as a short age for dense lists: `now`, `12m`, `3h`,
+ * `2d`, `3w`, then a month and day.
+ */
+export function formatCompactAge(value: string, nowMs = Date.now()): string {
+  const time = Date.parse(value);
+  if (!Number.isFinite(time)) return "";
+
+  const minutes = Math.floor(Math.max(0, nowMs - time) / 60_000);
+  if (minutes < 1) return "now";
+  if (minutes < 60) return `${minutes}m`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h`;
+  const days = Math.floor(hours / 24);
+  if (days < 7) return `${days}d`;
+  if (days < 30) return `${Math.floor(days / 7)}w`;
+  return new Date(time).toLocaleDateString("en-US", {
+    day: "numeric",
+    month: "short",
+    timeZone: getDashboardTimeZone(),
+  });
+}

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/conversationRoutes.ts

@@ -2,16 +2,21 @@ import type { ConversationReportEvent } from "@sentry/junior/api/schema";
 
 /**
  * Build the dashboard route for a conversation id. A `turnId` opens the
- * start of that Turn in the event log.
+ * start of that Turn in the event log. `reviewItems` opens the Review items
+ * panel.
  */
 export function conversationPath(
   conversationId: string,
-  options?: { turnId?: string },
+  options?: { reviewItems?: boolean; turnId?: string },
 ): string {
   const path = `/conversations/${encodeURIComponent(conversationId)}`;
-  return options?.turnId
-    ? `${path}?${CONVERSATION_TURN_PARAM}=${encodeURIComponent(options.turnId)}`
-    : path;
+  const params = new URLSearchParams();
+  if (options?.turnId) params.set(CONVERSATION_TURN_PARAM, options.turnId);
+  if (options?.reviewItems) {
+    params.set(CONVERSATION_REVIEW_PARAM, CONVERSATION_REVIEW_OPEN);
+  }
+  const search = params.toString();
+  return search ? `${path}?${search}` : path;
 }
 
 /** Dashboard home route. Legacy `/conversations/new` redirects here. */
@@ -32,6 +37,10 @@ export function parseConversationEventSeq(
   return value && /^\d+$/.test(value) ? Number(value) : undefined;
 }
 
+/** Query param that opens the Review items panel of a Conversation. */
+export const CONVERSATION_REVIEW_PARAM = "review";
+export const CONVERSATION_REVIEW_OPEN = "open";
+
 /** Query param that opens the start of one Turn in the event log. */
 export const CONVERSATION_TURN_PARAM = "turn";
 

package/src/client/conversations/conversationSections.ts

@@ -7,21 +7,13 @@ export type ConversationSection = {
 };
 
 const DAY_MS = 24 * 60 * 60 * 1000;
-const SECTION_ORDER = [
-  "attention",
-  "priority",
-  "today",
-  "yesterday",
-  "last-week",
-  "2-weeks",
-  "3-weeks",
-  "older",
-] as const;
 
 /**
- * Group conversations into progressively broader activity sections.
+ * Group conversations by last activity: Today, Yesterday, Previous 7 days,
+ * Previous 30 days, then one section per month.
  *
- * Conversations in `attentionIds` go to the first section, before Priority.
+ * Conversations in `attentionIds` lead their section, so unread and waiting
+ * rows sit above read rows without leaving their time group.
  */
 export function buildConversationSections(
   conversations: Conversation[],
@@ -32,16 +24,21 @@ export function buildConversationSections(
   },
 ): ConversationSection[] {
   const nowDay = calendarDay(options.nowMs, options.timeZone);
-  const sections = new Map<string, ConversationSection>();
-  const sorted = [...conversations].sort(
+  const sections = new Map<string, ConversationSection & { order: number }>();
+  const byActivity = [...conversations].sort(
     (left, right) => activityTime(right) - activityTime(left),
   );
+  const sorted = options.attentionIds
+    ? attentionFirst(byActivity, options.attentionIds)
+    : byActivity;
 
   for (const conversation of sorted) {
-    const time = activityTime(conversation);
-    const section = options.attentionIds?.has(conversation.id)
-      ? { key: "attention", label: "Needs attention" }
-      : conversationSection(conversation, time, nowDay, options.timeZone);
+    const section = conversationSection(
+      activityTime(conversation),
+      nowDay,
+      options.nowMs,
+      options.timeZone,
+    );
     const existing = sections.get(section.key);
     if (existing) {
       existing.conversations.push(conversation);
@@ -50,9 +47,9 @@ export function buildConversationSections(
     }
   }
 
-  return [...sections.values()].sort(
-    (left, right) => sectionRank(left.key) - sectionRank(right.key),
-  );
+  return [...sections.values()]
+    .sort((left, right) => left.order - right.order)
+    .map(({ order: _order, ...section }) => section);
 }
 
 /** Join the conversations that wait on the viewer or finished unseen. */
@@ -82,44 +79,61 @@ function activityTime(conversation: Conversation): number {
   return Number.isFinite(time) ? time : Number.NEGATIVE_INFINITY;
 }
 
+/**
+ * Pick the section for an activity time. `order` sorts sections newest
+ * first.
+ */
 function conversationSection(
-  conversation: Conversation,
   time: number,
   nowDay: number,
+  nowMs: number,
   timeZone: string,
-): Pick<ConversationSection, "key" | "label"> {
-  if (!Number.isFinite(time)) return { key: "older", label: "Older" };
-
-  // Priority membership is decided by the conversation feed API.
-  if (conversation.isPriority) {
-    return { key: "priority", label: "Priority" };
+): Pick<ConversationSection, "key" | "label"> & { order: number } {
+  if (!Number.isFinite(time)) {
+    return { key: "older", label: "Older", order: Number.POSITIVE_INFINITY };
   }
 
-  const day = calendarDay(time, timeZone);
-  const ageInDays = Math.max(0, Math.floor((nowDay - day) / DAY_MS));
-  if (ageInDays === 0) return { key: "today", label: "Today" };
-  if (ageInDays === 1) return { key: "yesterday", label: "Yesterday" };
-  if (ageInDays < 7) {
-    return {
-      key: `day-${day}`,
-      label: new Intl.DateTimeFormat("en-US", {
-        timeZone,
-        weekday: "long",
-      }).format(time),
-    };
+  const ageInDays = Math.max(
+    0,
+    Math.round((nowDay - calendarDay(time, timeZone)) / DAY_MS),
+  );
+  if (ageInDays === 0) return { key: "today", label: "Today", order: 0 };
+  if (ageInDays === 1) {
+    return { key: "yesterday", label: "Yesterday", order: 1 };
+  }
+  if (ageInDays <= 7) {
+    return { key: "previous-7-days", label: "Previous 7 days", order: 2 };
   }
-  if (ageInDays < 14) return { key: "last-week", label: "Last week" };
-  if (ageInDays < 21) return { key: "2-weeks", label: "2 weeks ago" };
-  if (ageInDays < 28) return { key: "3-weeks", label: "3 weeks ago" };
-  return { key: "older", label: "Older" };
+  if (ageInDays <= 30) {
+    return { key: "previous-30-days", label: "Previous 30 days", order: 3 };
+  }
+
+  const month = yearMonth(time, timeZone);
+  const nowMonth = yearMonth(nowMs, timeZone);
+  return {
+    key: `month-${month.year}-${month.month}`,
+    label: new Intl.DateTimeFormat("en-US", {
+      month: "long",
+      timeZone,
+      ...(month.year === nowMonth.year ? undefined : { year: "numeric" }),
+    }).format(time),
+    // Month sections follow the rolling windows, newest month first.
+    order:
+      4 + (nowMonth.year - month.year) * 12 + (nowMonth.month - month.month),
+  };
 }
 
-function sectionRank(key: string): number {
-  const known = SECTION_ORDER.indexOf(key as (typeof SECTION_ORDER)[number]);
-  if (known >= 0) return known;
-  // Weekday buckets sit between Yesterday and Last week.
-  if (key.startsWith("day-")) return SECTION_ORDER.indexOf("yesterday") + 0.5;
-  return SECTION_ORDER.length;
+function yearMonth(
+  time: number,
+  timeZone: string,
+): { month: number; year: number } {
+  const parts = new Intl.DateTimeFormat("en-US", {
+    month: "numeric",
+    timeZone,
+    year: "numeric",
+  }).formatToParts(time);
+  const values = new Map(parts.map((part) => [part.type, Number(part.value)]));
+  return { month: values.get("month") ?? 1, year: values.get("year") ?? 0 };
 }
 
 function calendarDay(time: number, timeZone: string): number {

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,
@@ -213,20 +211,6 @@ function keepLatestReadPosition(
   return { ...next, readPosition: kept };
 }
 
-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,
-  };
-}
-
 /** Create one dashboard conversation and refresh the personal feed. */
 export function useCreateConversation() {
   const queryClient = useQueryClient();

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/useConversationFinishedIndicators.ts

@@ -12,6 +12,12 @@ type StoredConversationStates = Record<string, StoredConversationState>;
 
 type ConversationFinishedIndicators = {
   finishedConversationIds: ReadonlySet<string>;
+  /**
+   * The selected conversation when it was unread at the moment it opened.
+   * Lists keep it in its unread place until another conversation opens, so
+   * the row does not move under the pointer.
+   */
+  heldConversationId?: string;
   markRead(conversationId: string, lastReadAt: string): void;
 };
 
@@ -23,6 +29,23 @@ export function useConversationFinishedIndicators(
   pruneMissing: boolean,
 ): ConversationFinishedIndicators {
   const [storedStates, setStoredStates] = useState(readStoredStates);
+  const [held, setHeld] = useState<{ heldId?: string; selectedId?: string }>(
+    {},
+  );
+  // Read the unread state when the selection changes, before the effect
+  // below or the opened page marks it read. Hold only a row that the list
+  // already showed. A deep link has no row under the pointer, and the
+  // selected row never leads its section, so it does not move.
+  if (held.selectedId !== selectedId) {
+    const selected = conversations.find(({ id }) => id === selectedId);
+    setHeld({
+      heldId:
+        selected && finishedSinceRead(storedStates, selected)
+          ? selected.id
+          : undefined,
+      selectedId,
+    });
+  }
 
   useEffect(() => {
     if (!ready) return;
@@ -55,6 +78,7 @@ export function useConversationFinishedIndicators(
       () => finishedConversationIds(storedStates, conversations, selectedId),
       [conversations, selectedId, storedStates],
     ),
+    heldConversationId: held.heldId,
     markRead,
   };
 }
@@ -67,19 +91,27 @@ export function finishedConversationIds(
 ): ReadonlySet<string> {
   return new Set(
     conversations
-      .filter((conversation) => {
-        const state = states[conversation.id];
-        return (
+      .filter(
+        (conversation) =>
           conversation.id !== selectedId &&
-          conversation.status === "completed" &&
-          state !== undefined &&
-          isAfter(conversation.lastSeenAt, state.lastReadAt)
-        );
-      })
+          finishedSinceRead(states, conversation),
+      )
       .map((conversation) => conversation.id),
   );
 }
 
+function finishedSinceRead(
+  states: StoredConversationStates,
+  conversation: Conversation,
+): boolean {
+  const state = states[conversation.id];
+  return (
+    conversation.status === "completed" &&
+    state !== undefined &&
+    isAfter(conversation.lastSeenAt, state.lastReadAt)
+  );
+}
+
 /** Record reads and remove conversations outside the visible list. */
 export function reconcileStoredStates(
   current: StoredConversationStates,

package/src/client/format.ts

@@ -354,6 +354,10 @@ export function transcriptMessageActor(
 ): ActorIdentity | undefined {
   if (transcriptRoleKind(message.role) !== "user") return undefined;
   if (message.agentInvocationId) return undefined;
+  const author = message.actorIdentityId
+    ? conversation.authors?.[message.actorIdentityId]
+    : undefined;
+  if (author) return author;
   if (actorLabel(message.actorIdentity)) return message.actorIdentity;
   if (actorLabel(conversation.actorIdentity)) return conversation.actorIdentity;
   return undefined;
@@ -370,7 +374,10 @@ export function transcriptMessageActorLabel(
     // The conversation actor started the child agent but did not write its
     // input, so do not fall back to that actor here.
     if (message.agentInvocationId) return "Agent invocation";
-    return actorLabel(transcriptMessageActor(conversation, message)) ?? "User";
+    // Show the person's name, not their email. A web send carries both, and
+    // its durable Message carries only the name.
+    const actor = transcriptMessageActor(conversation, message);
+    return actor?.fullName?.trim() || (actorLabel(actor) ?? "User");
   }
   if (kind === "system") return "System";
   if (kind === "tool") return "Tool";