@sentry/junior-dashboard 0.258.0 → 0.260.0

package/src/client/components/README.md

@@ -6,8 +6,18 @@ the policy. `pnpm dashboard-style:check` enforces the token rules below.
 
 ## Foundations
 
-Tokens live in the `@theme` block of `src/tailwind.css`. Light mode does not
-exist yet. Keep every color in a token so a second theme can redefine them.
+Tokens live in the `@theme` block of `src/tailwind.css`. Keep every color in a
+token so each theme can redefine it.
+
+- **Themes.** Dark is the default. The light theme redefines every token under
+  `:root[data-theme="light"]`. It also mirrors the light status and chart
+  shades (50-400) to their dark pair, so `text-rose-300` stays readable on the
+  light canvas. The head script in `src/theme.ts` sets `data-theme` before first
+  paint from the saved choice or the system color scheme. `ThemeSwitcher` saves
+  the choice for this browser. Use the `light:` variant only for one-off values
+  that no token covers, such as provider brand colors.
+- **Charts.** Use `var(--color-*)` for series colors in SVG attributes, not hex
+  values, so they follow the theme.
 
 - **Surfaces.** Use the surface ladder, darkest to lightest: `bg`,
   `bg-elevated` (drawers), `surface-panel` (sidebar, cards, bubbles),

package/src/client/components/ThemeSwitcher.tsx

@@ -0,0 +1,48 @@
+import { Monitor, Moon, Sun, type LucideIcon } from "lucide-react";
+
+import type { DashboardThemeChoice } from "../../theme";
+import { cn } from "../styles";
+import { useDashboardThemeChoice } from "../theme";
+import { ToggleButton } from "./Button";
+
+const themeChoices = [
+  { Icon: Monitor, label: "System", value: "system" },
+  { Icon: Sun, label: "Light", value: "light" },
+  { Icon: Moon, label: "Dark", value: "dark" },
+] as const satisfies ReadonlyArray<{
+  Icon: LucideIcon;
+  label: string;
+  value: DashboardThemeChoice;
+}>;
+
+/** Choose the dashboard theme for this browser: system, light, or dark. */
+export function ThemeSwitcher(props: { className?: string }) {
+  const [choice, setChoice] = useDashboardThemeChoice();
+  return (
+    <div
+      className={cn("flex items-center justify-between gap-3", props.className)}
+    >
+      <span className="font-sans text-sm font-semibold text-dashboard-text">
+        Theme
+      </span>
+      <div
+        aria-label="Theme"
+        className="flex gap-0.5 rounded-lg border border-dashboard-border p-0.5"
+        role="group"
+      >
+        {themeChoices.map(({ Icon, label, value }) => (
+          <ToggleButton
+            aria-label={`${label} theme`}
+            key={value}
+            onClick={() => setChoice(value)}
+            pressed={choice === value}
+            title={label}
+            variant="segment"
+          >
+            <Icon aria-hidden="true" size={14} strokeWidth={2} />
+          </ToggleButton>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/client/components/charts/ActivityChart.tsx

@@ -248,7 +248,7 @@ export function ActivityChartGrid(props: {
     return (
       <g key={ratio}>
         <line
-          stroke="rgba(255,255,255,0.07)"
+          stroke="var(--color-dashboard-border-subtle)"
           strokeDasharray="3 5"
           x1={props.layout.left}
           x2={props.layout.width - props.layout.right}
@@ -332,9 +332,6 @@ export function activityChartAverage(values: readonly number[]): number {
 export const chartAverageLabelClassName =
   "fill-dashboard-text-solid font-sans tabular-nums leading-none";
 
-/** Solid chip behind average labels so series colors never wash out the text. */
-const chartAverageLabelChip = "rgba(9, 12, 14, 0.92)";
-
 /**
  * Opt-in horizontal average across the plotted buckets.
  * Renders a dashed guide plus a compact "value / day" label on the right.
@@ -380,7 +377,7 @@ export function ActivityChartAverageLine(props: {
   return (
     <g aria-label={`average ${label}`} pointerEvents="none">
       <line
-        stroke={props.stroke ?? "rgba(255,255,255,0.55)"}
+        stroke={props.stroke ?? "var(--color-dashboard-text-faint)"}
         strokeDasharray="4 4"
         strokeOpacity={0.85}
         strokeWidth={1.25}
@@ -389,8 +386,10 @@ export function ActivityChartAverageLine(props: {
         y1={y}
         y2={y}
       />
+      {/* Solid chip so series colors never wash out the label text. */}
       <rect
-        fill={chartAverageLabelChip}
+        fill="var(--color-dashboard-bg-elevated)"
+        fillOpacity={0.92}
         height={chipHeight}
         rx={3}
         width={chipWidth}
@@ -399,7 +398,7 @@ export function ActivityChartAverageLine(props: {
       />
       <text
         className={chartAverageLabelClassName}
-        fill="#ffffff"
+        fill="var(--color-dashboard-text-solid)"
         fontSize={fontSize}
         textAnchor="middle"
         x={chipX + chipWidth / 2}

package/src/client/components/charts/InputCacheChart.tsx

@@ -164,7 +164,7 @@ export function InputCacheChart(props: {
                   {bars}
                   {incomplete ? (
                     <rect
-                      fill="#94a3b8"
+                      fill="var(--color-slate-400)"
                       x={x(index) - barWidth / 2}
                       y={layout.top + layout.plotHeight - 3}
                       width={barWidth}

package/src/client/components/charts/SystemMetricCharts.tsx

@@ -49,7 +49,7 @@ function compactDuration(value: number): string {
 function tokenChart(): ChartConfig {
   return {
     axisFormat: formatCompactNumber,
-    color: "#22d3ee",
+    color: "var(--color-cyan-400)",
     format: formatCompactNumber,
     metric: "tokens",
     title: "Token usage",
@@ -61,7 +61,7 @@ function supportingCharts(): ChartConfig[] {
   return [
     {
       axisFormat: compactCurrency,
-      color: "#fbbf24",
+      color: "var(--color-amber-400)",
       format: (value) => formatCostSummary({ total: value }),
       metric: "costUsd",
       title: "Model spend",
@@ -69,7 +69,7 @@ function supportingCharts(): ChartConfig[] {
     },
     {
       axisFormat: compactDuration,
-      color: "#a78bfa",
+      color: "var(--color-violet-400)",
       format: formatDuration,
       metric: "durationMs",
       title: "Runtime",

package/src/client/components/charts/WorkspaceUsageChart.tsx

@@ -14,7 +14,7 @@ import { Card } from "../layout/Card";
 import { formatActivityChartAverage, formatCompactNumber } from "../../format";
 import type { WorkspaceUsageDay } from "./workspaceUsage";
 
-const USAGE_COLOR = "#a78bfa";
+const USAGE_COLOR = "var(--color-violet-400)";
 
 /** Plot successful Workspace switches for one recipe over a trailing window. */
 export function WorkspaceUsageChart(props: {

package/src/client/components/charts/cache-input.ts

@@ -1,9 +1,17 @@
 import type { ConversationMetricDay } from "@sentry/junior/api/schema";
 
 export const CACHE_INPUT_SERIES = [
-  { key: "cachedInputTokens", label: "From cache", color: "#22d3ee" },
-  { key: "cacheCreationTokens", label: "Written to cache", color: "#fbbf24" },
-  { key: "inputTokens", label: "Uncached", color: "#a78bfa" },
+  {
+    key: "cachedInputTokens",
+    label: "From cache",
+    color: "var(--color-cyan-400)",
+  },
+  {
+    key: "cacheCreationTokens",
+    label: "Written to cache",
+    color: "var(--color-amber-400)",
+  },
+  { key: "inputTokens", label: "Uncached", color: "var(--color-violet-400)" },
 ] as const;
 
 export type CacheInput = Pick<

package/src/client/components/layout/DashboardHeader.tsx

@@ -14,11 +14,7 @@ import {
   MobileSecondaryNavigationSlot,
   useRegisterOpenMobileNavigation,
 } from "./DashboardChrome";
-import {
-  cn,
-  dashboardContainerClass,
-  dashboardInteractiveTextClass,
-} from "../../styles";
+import { cn, dashboardInteractiveTextClass } from "../../styles";
 
 export type DashboardHeaderNavItem = {
   key: string;
@@ -37,7 +33,6 @@ const focusableSelector = [
 
 /** Render the primary dashboard shell header and optional mobile nav sheet. */
 export function DashboardHeader(props: {
-  compact?: boolean;
   /** Back target used on mobile conversation detail. */
   mobileBackTo?: string;
   mobileNavigationOpen: boolean;
@@ -151,12 +146,10 @@ export function DashboardHeader(props: {
     <header className="relative bg-dashboard-bg">
       <div
         className={cn(
-          props.compact ? "w-full min-w-0" : dashboardContainerClass,
-          "grid grid-cols-[2.5rem_minmax(0,1fr)_2.5rem] items-center gap-x-2 px-3 py-2 md:gap-x-5 md:gap-y-3 md:px-4 md:py-4",
+          "grid w-full min-w-0 grid-cols-[2.5rem_minmax(0,1fr)_2.5rem] items-center gap-x-2 px-3 py-2 md:gap-x-5 md:gap-y-3 md:px-7 md:py-3",
           props.profile
             ? "md:grid-cols-[auto_minmax(0,1fr)_auto]"
             : "md:grid-cols-[auto_minmax(0,1fr)]",
-          props.compact ? "md:px-7 md:py-3" : "md:px-8",
         )}
       >
         {conversationMode && props.mobileBackTo ? (

package/src/client/conversations/ConversationBrief.tsx

@@ -5,6 +5,7 @@ import type { ConversationDetailReport } from "@sentry/junior/api/schema";
 import { Detail, DetailList } from "../components/DetailList";
 import { StatusChip, type StatusChipTone } from "../components/StatusChip";
 import { formatTime } from "../format";
+import { MentionPeopleProvider, renderMentionText } from "./transcriptMentions";
 
 type ConversationBriefReport = NonNullable<ConversationDetailReport["brief"]>;
 
@@ -24,13 +25,24 @@ const outcomeTones: Record<BriefContent["outcome"]["status"], StatusChipTone> =
 export function ConversationBrief(props: {
   brief: ConversationBriefReport;
   variant?: "summary" | "full";
+}) {
+  return (
+    <MentionPeopleProvider mentions={props.brief.mentions ?? []}>
+      <BriefContentView brief={props.brief} variant={props.variant} />
+    </MentionPeopleProvider>
+  );
+}
+
+function BriefContentView(props: {
+  brief: ConversationBriefReport;
+  variant?: "summary" | "full";
 }) {
   const { content } = props.brief;
   if (props.variant === "summary") {
     return (
       <div className="grid min-w-0 gap-4">
         <p className="m-0 text-sm leading-relaxed text-dashboard-text">
-          {content.summary}
+          <BriefText text={content.summary} />
         </p>
         {content.openDecisions.length > 0 ? (
           <div className="grid gap-2">
@@ -58,12 +70,16 @@ export function ConversationBrief(props: {
         </span>
       </div>
       <p className="m-0 text-sm leading-relaxed text-dashboard-text">
-        {content.summary}
+        <BriefText text={content.summary} />
       </p>
       <BriefSection title="Intent & outcome">
         <DetailList>
-          <Detail label="Intent">{content.intent}</Detail>
-          <Detail label="Outcome">{content.outcome.text}</Detail>
+          <Detail label="Intent">
+            <BriefText text={content.intent} />
+          </Detail>
+          <Detail label="Outcome">
+            <BriefText text={content.outcome.text} />
+          </Detail>
         </DetailList>
       </BriefSection>
       {content.decisions.length || content.openDecisions.length ? (
@@ -169,11 +185,13 @@ function BriefDecisions(props: { decisions: BriefContent["decisions"] }) {
             >
               {decision.kind}
             </StatusChip>
-            <span className="min-w-0">{decision.text}</span>
+            <span className="min-w-0">
+              <BriefText text={decision.text} />
+            </span>
           </div>
           {decision.by ? (
             <div className="mt-0.5 text-xs text-dashboard-text-muted">
-              by · {decision.by}
+              by · <BriefText text={decision.by} />
             </div>
           ) : null}
         </li>
@@ -189,10 +207,12 @@ function BriefOpenDecisions(props: {
     <ul className="m-0 grid list-none gap-2 p-0">
       {props.decisions.map((decision, index) => (
         <li key={`${decision.text}:${index}`}>
-          <div>{decision.text}</div>
+          <div>
+            <BriefText text={decision.text} />
+          </div>
           {decision.owner ? (
             <div className="mt-1 text-xs text-dashboard-text-muted">
-              Owner: {decision.owner}
+              Owner: <BriefText text={decision.owner} />
             </div>
           ) : null}
         </li>
@@ -205,12 +225,18 @@ function BriefList(props: { items: string[] }) {
   return (
     <ul className="my-0 grid gap-1.5 pl-4">
       {props.items.map((item, index) => (
-        <li key={`${item}:${index}`}>{item}</li>
+        <li key={`${item}:${index}`}>
+          <BriefText text={item} />
+        </li>
       ))}
     </ul>
   );
 }
 
+function BriefText(props: { text: string }) {
+  return <>{renderMentionText(props.text, "brief")}</>;
+}
+
 function displayLabel(value: string): string {
   return value.replaceAll("_", " ");
 }

package/src/client/conversations/ConversationHomeList.tsx

@@ -22,6 +22,7 @@ import { ConversationArchiveNotices } from "./ConversationArchiveNotices";
 import { ConversationListStatusIcon } from "./ConversationListStatusIcon";
 import { conversationPath } from "./conversationRoutes";
 import { useArchiveConversation } from "./queries";
+import { MentionText } from "./transcriptMentions";
 import {
   buildConversationSections,
   type ConversationSection,
@@ -265,7 +266,12 @@ function ConversationCard(props: {
       </div>
       {conversation.activityPreview ? (
         <p className="relative z-[1] m-0 line-clamp-2 font-sans text-sm leading-relaxed text-dashboard-text-subtle pointer-events-none">
-          {formatConversationActivityPreview(conversation.activityPreview.text)}
+          <MentionText
+            mentions={conversation.activityPreview.mentions ?? []}
+            text={formatConversationActivityPreview(
+              conversation.activityPreview.text,
+            )}
+          />
         </p>
       ) : (
         <p className="relative z-[1] m-0 font-sans text-sm leading-relaxed text-dashboard-text-muted pointer-events-none">

package/src/client/conversations/ConversationMeta.tsx

@@ -167,7 +167,7 @@ export function ConversationSidebarAnnotations(props: {
         {useMobileFacepile ? (
           <SidebarAnnotationIconFacepile
             annotations={mobileFacepileAnnotations}
-            // Discs sit on the sidebar panel / row surface (#09090b).
+            // Discs sit on the sidebar panel / row surface.
             cutoutColor="var(--color-dashboard-surface-panel)"
           />
         ) : (
@@ -343,21 +343,33 @@ type SidebarAnnotationIconName = NonNullable<
 >;
 
 const SIDEBAR_ICON_PRESENTATION = {
-  "circle-dot": { className: "text-[#3fb950]", Icon: CircleDot, label: "Open" },
+  "circle-dot": {
+    className: "text-[#3fb950] light:text-[#1a7f37]",
+    Icon: CircleDot,
+    label: "Open",
+  },
   "circle-dashed": {
-    className: "text-[#8c959f]",
+    className: "text-[#8c959f] light:text-[#59636e]",
     Icon: CircleDashed,
     label: "Draft",
   },
-  "circle-x": { className: "text-[#f85149]", Icon: CircleX, label: "Closed" },
-  "git-merge": { className: "text-[#a371f7]", Icon: GitMerge, label: "Merged" },
+  "circle-x": {
+    className: "text-[#f85149] light:text-[#cf222e]",
+    Icon: CircleX,
+    label: "Closed",
+  },
+  "git-merge": {
+    className: "text-[#a371f7] light:text-[#8250df]",
+    Icon: GitMerge,
+    label: "Merged",
+  },
   "git-pull-request": {
-    className: "text-[#3fb950]",
+    className: "text-[#3fb950] light:text-[#1a7f37]",
     Icon: GitPullRequest,
     label: "Open pull request",
   },
   "triangle-alert": {
-    className: "text-[#d29922]",
+    className: "text-[#d29922] light:text-[#9a6700]",
     Icon: TriangleAlert,
     label: "Needs attention",
   },

package/src/client/conversations/ConversationTranscript.tsx

@@ -43,7 +43,6 @@ import { transcriptEmptyClass } from "./transcriptStyles";
 import { entryMatchesSearch, useTranscriptSearch } from "./transcriptSearch";
 import { TranscriptRow, TranscriptRows } from "./TranscriptRows";
 import { TranscriptTimestampProvider } from "./TranscriptTimestamp";
-import { TranscriptMentionPeopleProvider } from "./transcriptMentions";
 
 type TranscriptEntry = ReturnType<typeof groupTranscriptMessages>[number];
 type TranscriptContextEntry = Extract<TranscriptEntry, { kind: "context" }>;
@@ -86,16 +85,14 @@ export const ConversationTranscriptView = memo(
 
     return (
       <TranscriptTimestampProvider>
-        <TranscriptMentionPeopleProvider messages={messages}>
-          <section className="min-w-0 pt-1">
-            <SegmentEvents
-              onOpenSubagentTranscript={props.onOpenSubagentTranscript}
-              conversation={props.conversation}
-              messages={messages}
-              responding={props.responding}
-            />
-          </section>
-        </TranscriptMentionPeopleProvider>
+        <section className="min-w-0 pt-1">
+          <SegmentEvents
+            onOpenSubagentTranscript={props.onOpenSubagentTranscript}
+            conversation={props.conversation}
+            messages={messages}
+            responding={props.responding}
+          />
+        </section>
       </TranscriptTimestampProvider>
     );
   },

package/src/client/conversations/EventDetails.tsx

@@ -10,6 +10,7 @@ import { EventUsage } from "./EventUsage";
 /** Present event content as readable sections, with the exact report available on demand. */
 export function EventDetails({ event }: { event: ConversationReportEvent }) {
   const data = event.data;
+  const mentions = event.mentions ?? [];
   const model = eventLogModel(event);
   const { usage, ...callAttributes } = event.modelCall ?? {};
   let content: ReactNode;
@@ -54,7 +55,7 @@ export function EventDetails({ event }: { event: ConversationReportEvent }) {
           ) : null}
           {summary ? (
             <DetailSection title="Continuation summary">
-              <TranscriptText text={summary} />
+              <TranscriptText mentions={mentions} text={summary} />
             </DetailSection>
           ) : null}
         </>
@@ -70,7 +71,7 @@ export function EventDetails({ event }: { event: ConversationReportEvent }) {
             {redacted ? (
               <RedactedMarker />
             ) : (
-              <TranscriptText text={text ?? ""} />
+              <TranscriptText mentions={mentions} text={text ?? ""} />
             )}
           </DetailSection>
         </>
@@ -112,7 +113,7 @@ export function EventDetails({ event }: { event: ConversationReportEvent }) {
           {part.redacted ? (
             <RedactedMarker />
           ) : (
-            <TranscriptText text={part.text ?? ""} />
+            <TranscriptText mentions={mentions} text={part.text ?? ""} />
           )}
         </DetailSection>
       ));
@@ -124,12 +125,15 @@ export function EventDetails({ event }: { event: ConversationReportEvent }) {
           <DetailValue value={metadata} />
           <DetailSection title={presentation.title}>
             {presentation.preview ? (
-              <TranscriptText text={presentation.preview} />
+              <TranscriptText mentions={mentions} text={presentation.preview} />
             ) : null}
             {presentation.details?.map((detail, index) => (
               <DetailSection key={index} title={detail.title}>
                 {detail.description ? (
-                  <TranscriptText text={detail.description} />
+                  <TranscriptText
+                    mentions={mentions}
+                    text={detail.description}
+                  />
                 ) : null}
                 {detail.content ? <DetailValue value={detail.content} /> : null}
                 {detail.metadata ? (

package/src/client/conversations/README.md

@@ -34,6 +34,12 @@ shared controls and overlays.
   a person, so it stays collapsed behind "Show prompt".
 - `TranscriptAttachments` owns wrapping for both message attachments and file
   deliveries. `ImageAttachment` owns image previews.
+- Display text keeps Slack tokens such as `<@U123>` and `<#C123|name>`. The
+  API resolves the people in that text. It returns them as `mentions` next to
+  the object that owns the text: an event, an activity preview, a Brief, or an
+  Automation. Render this text with `TranscriptText` or `MentionText`. Both
+  require `mentions`, so a caller cannot forget them. Do not resolve names in
+  the dashboard, and do not rewrite tokens into links on the server.
 - `TranscriptTurnContextView` owns context content. The shared `Drawer` owns
   dismissal, focus trapping, focus return, scroll locking, and panel layout.
 

package/src/client/conversations/TranscriptContextEventView.tsx

@@ -44,7 +44,11 @@ export function TranscriptContextEventView(props: {
             Continuation summary
           </summary>
           <div className="mt-1.5 whitespace-pre-wrap text-xs leading-relaxed text-dashboard-text-muted">
-            <TranscriptText role="system" text={event.summary} />
+            <TranscriptText
+              mentions={props.part.mentions ?? []}
+              role="system"
+              text={event.summary}
+            />
           </div>
         </details>
       ) : null}

package/src/client/conversations/TranscriptEventView.tsx

@@ -1,28 +1,67 @@
 import { ChevronRight } from "lucide-react";
 
-import { renderMentionText } from "./transcriptMentions";
+import { MentionText } from "./transcriptMentions";
 import { messageRawText } from "./transcriptRenderModel";
 import { HighlightText } from "./transcriptSearch";
 import { RedactedMarker } from "./TranscriptRedacted";
 import type { TranscriptViewMessage } from "../types";
 import { TranscriptSummary } from "./TranscriptSummary";
 
+function EventTypeChip(props: { eventType: string }) {
+  return (
+    <span className="break-all rounded-md border border-dashboard-border px-1.5 py-0.5 font-mono text-2xs leading-none text-dashboard-text-muted">
+      <HighlightText text={props.eventType} />
+    </span>
+  );
+}
+
+/** Heading for several Events that arrived in one message. */
+function batchSummary(events: readonly { label?: string }[]): string {
+  // Name the resource only when every Event is about it.
+  const label = events[0]?.label;
+  const shared = label && events.every((event) => event.label === label);
+  return `${events.length} events${shared ? ` · ${label}` : ""}`;
+}
+
 /** Render an Event Message whose heading expands its full text. */
 export function TranscriptEventView(props: { message: TranscriptViewMessage }) {
   const text = messageRawText(props.message);
   const redacted = props.message.parts.some(
     (part) => part.type === "text" && part.redacted,
   );
-  const summary = props.message.trustedSummary ?? props.message.eventType ?? "";
+  const events = props.message.events ?? [];
+  const mentions = props.message.mentions ?? [];
+  const isBatch = events.length > 1;
+  const summary = isBatch
+    ? batchSummary(events)
+    : (props.message.trustedSummary ?? props.message.eventType ?? "");
   const heading = (
-    <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">
-        {renderMentionText(summary, "event-summary")}
-      </span>
-      {props.message.eventType ? (
-        <span className="break-all rounded-md border border-dashboard-border px-1.5 py-0.5 font-mono text-2xs leading-none text-dashboard-text-muted">
-          <HighlightText text={props.message.eventType} />
+    <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 mentions={mentions} text={summary} />
         </span>
+        {!isBatch && props.message.eventType ? (
+          <EventTypeChip eventType={props.message.eventType} />
+        ) : null}
+      </span>
+      {isBatch ? (
+        <ul className="flex min-w-0 flex-col gap-1">
+          {events.map((event, index) => (
+            <li
+              key={index}
+              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
+                  mentions={mentions}
+                  text={event.trustedSummary ?? event.eventType}
+                />
+              </span>
+              <EventTypeChip eventType={event.eventType} />
+            </li>
+          ))}
+        </ul>
       ) : null}
     </span>
   );

package/src/client/conversations/TranscriptMessageView.tsx

@@ -54,7 +54,12 @@ 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 key={index} role={role} text={part.text ?? ""} />
+              <TranscriptText
+                key={index}
+                mentions={props.message.mentions ?? []}
+                role={role}
+                text={part.text ?? ""}
+              />
             ) : null,
           )}
         </div>

package/src/client/conversations/TranscriptStructuredEventView.tsx

@@ -1,5 +1,6 @@
 import { formatMessageTimestamp } from "../format";
 import type { TranscriptViewStructuredEventPart } from "../types";
+import { MentionText } from "./transcriptMentions";
 import { HighlightText, useTranscriptSearch } from "./transcriptSearch";
 import { TranscriptSummary } from "./TranscriptSummary";
 
@@ -14,6 +15,7 @@ export function TranscriptStructuredEventView(props: {
   const presentation = props.part.presentation;
   const timestamp = formatMessageTimestamp(props.timestamp);
   const details = presentation.details ?? [];
+  const mentions = props.part.mentions ?? [];
   // The rail icon box is h-6. A leading-6 title shares its center line.
   const surfaceClass = "min-w-0 font-sans text-xs";
   // A lone detail often repeats the event title, such as "Loaded AGENTS.md"
@@ -32,7 +34,7 @@ export function TranscriptStructuredEventView(props: {
             )}
             {detail.description ? (
               <div className="mt-1 whitespace-pre-wrap break-words text-xs leading-relaxed text-dashboard-text-muted">
-                <HighlightText text={detail.description} />
+                <MentionText mentions={mentions} text={detail.description} />
               </div>
             ) : null}
             {detail.content ? (
@@ -64,7 +66,7 @@ export function TranscriptStructuredEventView(props: {
         </div>
         {presentation.preview ? (
           <div className="mt-0.5 truncate text-xs text-dashboard-text-muted">
-            <HighlightText text={presentation.preview} />
+            <MentionText mentions={mentions} text={presentation.preview} />
           </div>
         ) : null}
       </div>