@sentry/junior-dashboard 0.272.0 → 0.273.0

package/src/client/components/ui/sidebar.tsx

@@ -0,0 +1,336 @@
+import * as React from "react";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@dashboard/lib/utils";
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@dashboard/components/ui/tooltip";
+
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+
+type SidebarContextProps = {
+  state: "expanded" | "collapsed";
+};
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null);
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.");
+  }
+
+  return context;
+}
+
+/**
+ * Own the sidebar state and width variables for the page frame.
+ *
+ * The dashboard keeps only the desktop sidebar. It drops the stock toggle
+ * state, cookie, Cmd/Ctrl+B shortcut, and mobile sheet: the nav rail stays
+ * collapsed, and `DashboardHeader` owns mobile navigation.
+ */
+function SidebarProvider({
+  open = true,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  open?: boolean;
+}) {
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed";
+
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({ state }),
+    [state],
+  );
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <div
+        data-slot="sidebar-wrapper"
+        style={
+          {
+            "--sidebar-width": SIDEBAR_WIDTH,
+            "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+            ...style,
+          } as React.CSSProperties
+        }
+        className={cn(
+          "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </SidebarContext.Provider>
+  );
+}
+
+/** Render the fixed sidebar from the `md` breakpoint up. */
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: "left" | "right";
+  variant?: "sidebar" | "floating" | "inset";
+  collapsible?: "offcanvas" | "icon" | "none";
+}) {
+  const { state } = useSidebar();
+
+  if (collapsible === "none") {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="group peer hidden text-sidebar-foreground md:block"
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        data-side={side}
+        className={cn(
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+          className,
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/** Hold content pinned to the top of the sidebar. */
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  );
+}
+
+/** Hold content pinned to the bottom of the sidebar. */
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  );
+}
+
+/** Scroll the sidebar body between the header and the footer. */
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        "no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** Group related sidebar menus with shared padding. */
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  );
+}
+
+/** List sidebar menu items. */
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn("flex w-full min-w-0 flex-col gap-0", className)}
+      {...props}
+    />
+  );
+}
+
+/** Wrap one menu button and its badge. */
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
+      {...props}
+    />
+  );
+}
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+/** Render a menu link or button, with a tooltip while the sidebar is collapsed. */
+function SidebarMenuButton({
+  render,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}: useRender.ComponentProps<"button"> &
+  React.ComponentProps<"button"> & {
+    isActive?: boolean;
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+  } & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const { state } = useSidebar();
+  const comp = useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(
+      {
+        className: cn(sidebarMenuButtonVariants({ variant, size }), className),
+      },
+      props,
+    ),
+    render: !tooltip ? render : <TooltipTrigger render={render} />,
+    state: {
+      slot: "sidebar-menu-button",
+      sidebar: "menu-button",
+      size,
+      active: isActive,
+    },
+  });
+
+  if (!tooltip) {
+    return comp;
+  }
+
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    };
+  }
+
+  return (
+    <Tooltip>
+      {comp}
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== "collapsed"}
+        {...tooltip}
+      />
+    </Tooltip>
+  );
+}
+
+/** Show a count beside a menu button. */
+function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+};

package/src/client/conversations/ConversationPage.tsx

@@ -522,6 +522,7 @@ export function ConversationPage(props: {
           // runs without interactive auth, so it has no approval to show.
           view === "rich" && detail.data?.isParticipant && !agentTree ? (
             <ConversationReplyFooter
+              authors={detail.data.authors}
               conversationId={conversationId}
               // Only pass committed ids for mailbox de-dupe. The full transcript is
               // too large to re-enter the footer on every live poll while typing.
@@ -620,6 +621,7 @@ export function ConversationPage(props: {
  * footer tree. Fast chat UIs isolate the composer the same way.
  */
 const ConversationReplyFooter = memo(function ConversationReplyFooter(props: {
+  authors?: ConversationDetailReport["authors"];
   committedMessageIds: readonly string[];
   conversationId: string;
   onPinRequest: () => void;
@@ -874,6 +876,7 @@ const ConversationReplyFooter = memo(function ConversationReplyFooter(props: {
           >
             <ConversationReviewBar conversationId={props.conversationId} />
             <PendingMailboxStack
+              authors={props.authors}
               cancelError={cancelError}
               cancelPending={cancelPendingMessages.isPending}
               cancelTargetInboundMessageId={cancelTargetInboundMessageId}

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/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,
@@ -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/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";