@sentry/junior-dashboard 0.271.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

@@ -98,6 +98,11 @@ import {
 } from "../review-desk/reviewItemFormat";
 import { useConfirmUnsentAnswers } from "../review-desk/UnsentAnswers";
 import { Transcript } from "./TranscriptView";
+import {
+  readConversationStartPosition,
+  useMarkConversationRead,
+  useReadPositionAtOpen,
+} from "./transcriptReadPosition";
 import { TranscriptLoading } from "./TranscriptLoading";
 import type { TranscriptViewMode } from "./transcriptRenderModel";
 import {
@@ -166,6 +171,8 @@ export function ConversationPage(props: {
   const conversations = buildConversations(summaries);
   const detail = useConversationData(conversationId);
   const archive = useArchiveConversation(conversationId);
+  const markRead = useMarkConversationRead(conversationId);
+  const readAtOpen = useReadPositionAtOpen(detail.data, detail.fetchedDetail);
   const feedConversation = conversations.find(
     (item) => item.id === conversationId,
   );
@@ -484,9 +491,11 @@ export function ConversationPage(props: {
                     hasPreviousPage={detail.hasPreviousPage}
                     historyError={detail.historyError}
                     historyVersion={detail.historyVersion}
+                    lastReadSeq={readAtOpen.lastReadSeq}
                     live={live}
                     loadingPreviousPage={detail.isLoadingPreviousPage}
                     onLoadPreviousPage={detail.loadPreviousPage}
+                    onRead={markRead}
                     onSelectedEventSeqChange={setSelectedEventSeq}
                     pendingMessages={detail.inlineMessages}
                     pinRequestVersion={pinRequestVersion}
@@ -497,8 +506,10 @@ export function ConversationPage(props: {
                     search={search}
                     onSearchChange={setSearch}
                     selectedEventSeq={selectedEventSeq}
+                    startAtUnread={readConversationStartPosition() === "unread"}
                     transcript={transcript}
                     turnContextPanel={turnContextPanel}
+                    unread={readAtOpen.unread}
                     view={view}
                   />
                 </>
@@ -511,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.
@@ -609,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;
@@ -863,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/ConversationTranscript.tsx

@@ -49,8 +49,13 @@ import {
   type RenderedTranscriptEntry,
 } from "./transcriptRenderModel";
 import { entryMatchesSearch, useTranscriptSearch } from "./transcriptSearch";
-import { TranscriptRow, TranscriptRows } from "./TranscriptRows";
+import {
+  TranscriptRow,
+  TranscriptRows,
+  TranscriptUnreadMarker,
+} from "./TranscriptRows";
 import { TranscriptTimestampProvider } from "./TranscriptTimestamp";
+import type { TranscriptUnreadRange } from "./transcriptReadPosition";
 
 type TranscriptEntry = ReturnType<typeof groupTranscriptMessages>[number];
 type TranscriptContextEntry = Extract<TranscriptEntry, { kind: "context" }>;
@@ -85,6 +90,8 @@ export const ConversationTranscriptView = memo(
     /** Sends that history does not have yet. History wins on message id. */
     pendingMessages?: readonly ConversationMailboxMessage[];
     responding?: boolean;
+    /** Show the "New" marker before the first row in this range. */
+    unread?: TranscriptUnreadRange;
   }) {
     // Cards can change while their Message events stay unchanged.
     const { events, annotations } = props.conversation;
@@ -106,6 +113,7 @@ export const ConversationTranscriptView = memo(
             conversation={props.conversation}
             messages={messages}
             responding={props.responding}
+            unread={props.unread}
           />
         </section>
       </TranscriptTimestampProvider>
@@ -121,6 +129,7 @@ function SegmentEvents(props: {
   conversation: ConversationTranscript;
   messages: TranscriptViewMessage[];
   responding?: boolean;
+  unread?: TranscriptUnreadRange;
 }) {
   return (
     <TranscriptRows>
@@ -134,6 +143,7 @@ function SegmentEvents(props: {
           onOpenSubagentTranscript={props.onOpenSubagentTranscript}
           transcript={props.messages}
           conversation={props.conversation}
+          unread={props.unread}
         />
       ) : props.conversation.eventHistory.status === "redacted" &&
         props.messages.length > 0 ? (
@@ -205,6 +215,7 @@ const VisibleTranscriptEntries = memo(function VisibleTranscriptEntries(props: {
   }) => void;
   transcript: TranscriptViewMessage[];
   conversation: ConversationTranscript;
+  unread?: TranscriptUnreadRange;
 }) {
   const entries = useMemo(
     () => groupTranscriptMessages(props.transcript),
@@ -214,6 +225,7 @@ const VisibleTranscriptEntries = memo(function VisibleTranscriptEntries(props: {
     <TranscriptEntryList
       entries={entries}
       keyPrefix={props.conversation.conversationId}
+      unread={props.unread}
       renderContext={(entry) => (
         <TranscriptRailEvent
           kind={entry.part.event.type === "handoff" ? "handoff" : "compaction"}
@@ -314,11 +326,26 @@ function TranscriptEntryList(props: {
   renderReasoning: (entry: TranscriptReasoningEntry) => ReactNode;
   renderSubagent: (entry: TranscriptSubagentEntry) => ReactNode;
   renderTool: (entry: TranscriptToolEntry) => ReactNode;
+  unread?: TranscriptUnreadRange;
 }) {
   const search = useTranscriptSearch();
   const activityKeys = useRef(new Map<string, string>());
   const claimedActivityKeys = new Set<string>();
   const rows: ReactNode[] = [];
+  // Search results are not a reading order, so they get no marker.
+  const markerSeq = search.active
+    ? undefined
+    : unreadMarkerSeq(props.entries, props.unread);
+  let unreadMarkerPending = markerSeq !== undefined;
+  // Entries are in seq order, so the first row that reaches the marker seq
+  // gets the marker.
+  const pushRow = (seq: number | undefined, row: ReactNode) => {
+    if (unreadMarkerPending && seq !== undefined && seq >= markerSeq!) {
+      unreadMarkerPending = false;
+      rows.push(<TranscriptUnreadMarker key="unread-marker" />);
+    }
+    rows.push(row);
+  };
 
   const renderEntry = (entry: TranscriptEntry): ReactNode => {
     if (entry.kind === "subagent") return props.renderSubagent(entry);
@@ -359,8 +386,16 @@ function TranscriptEntryList(props: {
           keyPrefix: props.keyPrefix,
           knownKeys: activityKeys.current,
         });
-        rows.push(
-          <TranscriptRow anchorKey={activityKey} indent key={activityKey}>
+        const lastSeq = lastEntrySeq(activityEntries);
+        // The marker goes before the group when any of it is unread.
+        pushRow(
+          lastSeq,
+          <TranscriptRow
+            anchorKey={activityKey}
+            indent
+            key={activityKey}
+            seq={lastSeq}
+          >
             <TranscriptActivityGroup
               entries={visibleEntries}
               renderEntry={renderEntry}
@@ -373,8 +408,9 @@ function TranscriptEntryList(props: {
 
     if (!search.active || entryMatchesSearch(entry, search.normalizedQuery)) {
       const rowKey = `${props.keyPrefix}:${entry.key}`;
-      rows.push(
-        <TranscriptRow anchorKey={rowKey} key={rowKey}>
+      pushRow(
+        entry.seq,
+        <TranscriptRow anchorKey={rowKey} key={rowKey} seq={entry.seq}>
           {renderEntry(entry)}
         </TranscriptRow>,
       );
@@ -391,6 +427,39 @@ function TranscriptEntryList(props: {
   return rows;
 }
 
+/**
+ * Find the seq of the first unread row. Entries are in seq order, and pending
+ * sends without a seq come last, so a binary search finds the first seq after
+ * the read position. Rows after the range arrived after open, so they get no
+ * marker.
+ */
+function unreadMarkerSeq(
+  entries: readonly TranscriptEntry[],
+  unread: TranscriptUnreadRange | undefined,
+): number | undefined {
+  if (!unread) return undefined;
+  let low = 0;
+  let high = entries.length;
+  while (low < high) {
+    const middle = (low + high) >> 1;
+    const seq = entries[middle]!.seq;
+    if (seq !== undefined && seq <= unread.afterSeq) low = middle + 1;
+    else high = middle;
+  }
+  const seq = entries[low]?.seq;
+  return seq !== undefined && seq <= unread.throughSeq ? seq : undefined;
+}
+
+function lastEntrySeq(
+  entries: readonly RenderedTranscriptEntry[],
+): number | undefined {
+  for (let index = entries.length - 1; index >= 0; index -= 1) {
+    const seq = entries[index]!.seq;
+    if (seq !== undefined) return seq;
+  }
+  return undefined;
+}
+
 /** Keep one activity group mounted while new or historical events extend either edge. */
 function stableActivityGroupKey(args: {
   claimedKeys: Set<string>;

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}